/* ============================================================
   TRAFFY DESIGN SYSTEM — Foundations
   Lifted 1:1 from reference/hero-v2.html (:root, CONFIG).
   Dark, cinematic. Single typeface (Inter) — hierarchy via
   weight + italic. Deep purple accent, turquoise CTA.
   ============================================================ */

/* Inter is loaded via Google Fonts in HTML. If you want to
   self-host, drop the .woff2 files into /fonts and switch
   the @import below to @font-face declarations. */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Inter+Tight:ital,wght@0,500;0,600;0,700;0,800;0,900;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  /* ───────── palette ───────── */
  /* surfaces (dark only — Traffy has no light mode) */
  --c-bg:         #0b0b0c;   /* page background, near-black */
  --c-bg-soft:    #151515;   /* raised surfaces, never card-like */
  --c-bg-lift:    #1c1c1e;   /* hover-on-soft */

  /* foreground */
  --c-fg:         #f5f5f5;   /* primary text / logo */
  --c-fg-dim:     #9a9a9d;   /* secondary, meta, second paragraph */
  --c-fg-mute:    #4d4e4e;   /* tertiary, foot meta, disabled */

  /* accents */
  --c-accent:     #7a4ee0;   /* deep purple — THE brand color.
                                used for: italic emphasis, hero dot,
                                hover on b&w logos, the WebGL line. */
  --c-accent-soft: rgba(122,78,224,0.18);
  --c-accent-glow: rgba(122,78,224,0.45);

  --c-cta:        #4cea91;   /* turquoise/lime — sparingly. ONLY for
                                the primary CTA pill (header + final). */
  --c-cta-fg:     #0b0b0c;
  --c-cta-hover:  #5eef9c;

  /* line work */
  --c-hairline:   rgba(255,255,255,0.10);
  --c-hairline-strong: rgba(255,255,255,0.18);
  --c-card-stroke: rgba(255,255,255,0.12);   /* one shade for ALL card/frame borders */

  /* branching-line states (Cases block) */
  --c-line:       #7a4ee0;   /* default purple thread */
  --c-line-alt:   #f5f5f5;   /* white when "control of traffic" */

  /* ───────── typography ───────── */
  --ff:           'Inter', system-ui, -apple-system, sans-serif;
  /* Display face for headlines — Inter Tight gives the heavy, slightly
     condensed shoulders of premium agency display fonts (Söhne Schmal,
     Aeonik Pro) while staying inside the Inter family for body. */
  --ff-display:   'Inter Tight', 'Inter', system-ui, sans-serif;

  /* base sizes */
  --fs-meta:      12px;      /* uppercase kickers, foot meta */
  --fs-nav:       14px;      /* nav links, CTA labels */
  --fs-small:     15px;
  --fs-body:      17px;      /* default reading size */
  --fs-lead:      clamp(20px, 2.2vw, 32px);   /* About-style large body */
  --fs-h3:        clamp(22px, 2vw, 28px);
  --fs-h2:        clamp(32px, 4vw, 56px);
  --fs-h1:        clamp(40px, 6vw, 84px);
  --fs-logo-hero: clamp(120px, 22vw, 320px);  /* the giant centered logo */
  --fs-display:   clamp(80px, 12vw, 200px);   /* huge stat numbers in Why Traffy */

  /* line-height */
  --lh-tight:     0.92;      /* display / hero */
  --lh-snug:      1.15;      /* headings */
  --lh-normal:    1.5;       /* body */
  --lh-relaxed:   1.6;

  /* tracking */
  --tracking-tight:  -0.05em;   /* big logo */
  --tracking-snug:   -0.02em;   /* h1 */
  --tracking-base:    0em;
  --tracking-wide:   0.18em;    /* uppercase kickers */
  --tracking-button: 0.01em;

  /* ───────── spacing & layout ───────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --pad-x:        clamp(20px, 4vw, 56px);   /* page side padding */
  --gutter:       clamp(40px, 8vw, 140px);  /* big-block column gap */
  --header-h:     72px;
  --max-w:        1440px;

  /* ───────── radii ───────── */
  --r-0:       0;
  --r-1:       2px;     /* hairline accents */
  --r-2:       4px;
  --r-pill:    999px;   /* nav capsule + CTA — almost the only radius used */
  --r-cap:     999px;   /* alias, semantic */

  /* ───────── motion ───────── */
  --ease:      cubic-bezier(.2,.7,.2,1);
  /* AOS (Animate On Scroll) default 'ease' = cubic-bezier(.25,.1,.25,1).
     AdSkill uses this for every fade-up; gives that crisp, simple settling
     instead of the long cinematic decay we had before. */
  --ease-out:  cubic-bezier(.25,.1,.25,1);
  --dur-fast:  200ms;
  --dur-base:  450ms;
  --dur-slow:  800ms;    /* reveal-on-scroll standard — closer to AdSkill's snappy feel */

  --rv-dur:    800ms;
  --rv-dist:   30px;     /* how far reveal travels from below (AOS fade-up uses ~24-30px) */

  /* ───────── header capsule ───────── */
  --cap-bg:        rgba(20,20,22,0.55);
  --cap-bg-scrolled: rgba(11,11,12,0.78);
  --cap-stroke:    rgba(255,255,255,0.08);
  --cap-stroke-scrolled: rgba(255,255,255,0.14);
  --cap-blur:      18px;

  /* ───────── shadows ───────── */
  /* Traffy almost never uses box-shadow — surfaces are flat.
     The "shadow" of the brand is the bloom on the WebGL line.
     These are reserved for capsules / focus rings. */
  --shadow-cap:    0 8px 32px rgba(0,0,0,0.45);
  --shadow-glow:   0 0 24px rgba(122,78,224,0.35);  /* purple bloom proxy */
  --focus-ring:    0 0 0 2px rgba(122,78,224,0.55);

  /* ───────── z-index ───────── */
  --z-base:    0;
  --z-line:    1;       /* WebGL canvas */
  --z-content: 3;
  --z-header:  50;
  --z-grain:   100;     /* SVG noise overlay always on top */
}

/* ============================================================
   SEMANTIC TYPOGRAPHY
   Use these on the appropriate element. Italic + purple is
   reserved for emphatic phrases ("Real growth.", "10 years").
   ============================================================ */

.t-kicker {
  font-family: var(--ff);
  font-size: var(--fs-meta);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--c-fg-dim);
}
.t-kicker::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  margin-right: 10px;
  transform: translateY(-1px);
}

.t-logo {
  font-family: var(--ff);
  font-style: italic;
  font-weight: 600;
  font-size: var(--fs-logo-hero);
  line-height: 0.85;
  letter-spacing: var(--tracking-tight);
  color: var(--c-fg);
}

.t-brand {                          /* small wordmark in chrome */
  font-family: var(--ff);
  font-style: italic;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1;
}

.t-h1 {
  font-family: var(--ff);
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-snug);
  color: var(--c-fg);
}
.t-h1 em {
  font-style: italic;
  font-weight: 700;
  color: var(--c-accent);
}

.t-h2 {
  font-family: var(--ff);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  color: var(--c-fg);
}
.t-h2 em { font-style: italic; font-weight: 700; color: var(--c-accent); }

.t-h3 {
  font-family: var(--ff);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--c-fg);
}

.t-lead {                           /* About-style large body */
  font-family: var(--ff);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--c-fg);
}
.t-lead em { font-style: italic; font-weight: 500; color: var(--c-accent); }

.t-body {
  font-family: var(--ff);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--c-fg);
}
.t-body-dim { color: var(--c-fg-dim); }
.t-body em { font-style: italic; color: var(--c-accent); }

.t-meta {
  font-family: var(--ff);
  font-size: var(--fs-meta);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--c-fg-mute);
}

.t-display {                        /* huge "Why Traffy" stats */
  font-family: var(--ff);
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--c-fg);
}

.t-outline {                        /* large outline numerals (Services 01,02,03) */
  font-family: var(--ff);
  font-weight: 500;
  font-size: clamp(48px, 6vw, 96px);
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--c-fg-mute);
}

/* ============================================================
   BASE / GLOBAL
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--c-bg);
  color: var(--c-fg);
  font-family: var(--ff);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--c-accent); color: var(--c-fg); }