/* DM10Fit Landing Page — design tokens + base */

@font-face {
  font-family: 'Rocpar';
  src: url('assets/fonts/Rocpar.otf') format('opentype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand palette (from Paleta DM10Fit) */
  --dm-yellow: #F0CB1F;
  --dm-yellow-hi: #FFD933;
  --dm-yellow-lo: #C9A60E;
  --dm-black: #0A0A0A;
  --dm-ink: #1A1A1A;
  --dm-graphite: #3A3A3A;
  --dm-gray: #909090;
  --dm-stone: #C9C9C9;
  --dm-cloud: #E4E4E4;
  --dm-paper: #F5F5F5;
  --dm-white: #FFFFFF;

  /* Semantic */
  --bg: var(--dm-black);
  --surface: #141414;
  --surface-2: #1E1E1E;
  --line: rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.14);
  --text: #F5F5F5;
  --text-mute: #A0A0A0;
  --accent: var(--dm-yellow);

  /* Type */
  --ff-display: 'Poppins', system-ui, sans-serif;
  --ff-body: 'Poppins', system-ui, sans-serif;
  --ff-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Spacing */
  --container: 1280px;
  --pad-x: clamp(20px, 4vw, 64px);

  /* Radii */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; max-width: 100%; }
body {
  font-family: var(--ff-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* Display — Poppins extra-bold w/ tight tracking */
.display {
  font-family: var(--ff-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.02;
  text-wrap: balance;
}

/* Numeric — Rocpar reserved for big numbers / big data only */
.numeric,
.stat__kpi,
.kpi__v,
.decada__num,
.reels__big,
.decada__stats strong,
.tl__y,
.pain__num,
.phone__plan-v,
.phone__tile-v {
  font-family: 'Rocpar', var(--ff-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.eyebrow {
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dm-yellow);
}

/* Layout */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--pad-x);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 26px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  border: 1.5px solid transparent;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary {
  background: var(--dm-yellow);
  color: var(--dm-black);
}
.btn--primary:hover { background: var(--dm-yellow-hi); }
.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-2);
}
.btn--ghost:hover { border-color: var(--dm-yellow); color: var(--dm-yellow); }
.btn--dark {
  background: var(--dm-black);
  color: var(--dm-white);
}
.btn--lg { padding: 20px 32px; font-size: 16px; }
.btn--block { width: 100%; }

/* Pills / badges */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 10px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dm-yellow); box-shadow: 0 0 0 4px rgba(240,203,31,.15); }

/* Section scaffolding */
section { position: relative; }
.section-pad { padding-block: clamp(72px, 9vw, 140px); }
.section-pad-sm { padding-block: clamp(48px, 6vw, 96px); }

.section-head { display: flex; flex-direction: column; gap: 18px; max-width: 820px; }
.section-head h2 { margin: 0; font-size: clamp(36px, 4.4vw, 64px); }
.section-head p { margin: 0; color: var(--text-mute); font-size: clamp(16px, 1.2vw, 19px); max-width: 60ch; }

/* Tickers */
.ticker {
  overflow: hidden;
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--dm-yellow);
  color: var(--dm-black);
}
.ticker__track {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  padding-block: 22px;
  animation: ticker-scroll 38s linear infinite;
  width: max-content;
}
.ticker__item {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(22px, 2.6vw, 36px);
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: 48px;
  text-transform: uppercase;
}
.ticker__item::after {
  content: '';
  width: 14px;
  height: 14px;
  background: var(--dm-black);
  border-radius: 50%;
}
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

/* Form */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--text-mute); text-transform: uppercase; }
.input, .select {
  width: 100%;
  background: rgba(0,0,0,.35);
  border: 1.5px solid var(--line-2);
  color: var(--text);
  padding: 14px 16px;
  border-radius: var(--r-md);
  font: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color .15s ease, background .15s ease;
}
.input::placeholder { color: rgba(255,255,255,.35); }
.input:focus, .select:focus { border-color: var(--dm-yellow); background: rgba(0,0,0,.55); }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-mute) 50%), linear-gradient(135deg, var(--text-mute) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }

/* Light surface helpers */
.surface-light { background: var(--dm-paper); color: var(--dm-ink); }
.surface-light .text-mute { color: var(--dm-graphite); opacity: .7; }
.surface-yellow { background: var(--dm-yellow); color: var(--dm-black); }

/* Marquee strap (yellow band) */
.strap {
  background: var(--dm-yellow);
  color: var(--dm-black);
  font-family: var(--ff-display);
  font-weight: 900;
  letter-spacing: -0.02em;
}

/* Divider line w/ dot */
.hr-dot { display: flex; align-items: center; gap: 16px; }
.hr-dot::before, .hr-dot::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* Utility */
.text-yellow { color: var(--dm-yellow); }
.text-mute { color: var(--text-mute); }
.flex { display: flex; }
.grid { display: grid; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }
.center { align-items: center; }
.between { justify-content: space-between; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Density variants — toggled via [data-density] */
[data-density="compact"] .section-pad { padding-block: clamp(56px, 7vw, 100px); }
[data-density="comfy"] .section-pad { padding-block: clamp(96px, 11vw, 180px); }

/* Light theme override */
[data-theme="light"] {
  --bg: #FAFAFA;
  --surface: #FFFFFF;
  --surface-2: #F2F2F2;
  --line: rgba(0,0,0,.08);
  --line-2: rgba(0,0,0,.14);
  --text: #0A0A0A;
  --text-mute: #5A5A5A;
}
[data-theme="light"] .input,
[data-theme="light"] .select {
  background: #FFF;
  color: var(--dm-ink);
}
[data-theme="light"] .input::placeholder { color: rgba(0,0,0,.4); }