/* ============================================================
   FX UNLOCKED — Design System  ·  Light & Airy v5
   Off-white studio stage · cyan→indigo→magenta · gold accent
   ============================================================ */

:root {
  /* ---- Surfaces ---- */
  --bg:        #f4f3f9;   /* primary stage — soft lavender-white */
  --bg-warm:   #f6f5f1;   /* warm paper alt */
  --bg-card:   #ffffff;
  --bg-soft:   #ecebf4;
  --bg-sunk:   #e7e6f1;

  /* ---- Ink ---- */
  --ink:       #14152b;
  --ink-mute:  #565a78;
  --ink-dim:   #9296b3;
  --line:      rgba(20,22,46,0.08);
  --line-2:    rgba(20,22,46,0.14);

  /* ---- Brand spectrum ---- */
  --cyan:    #21bbd7;
  --cyan-2:  #38d6ef;
  --indigo:  #333da8;
  --indigo-2:#4a57d8;
  --magenta: #bf1cc1;
  --magenta-2:#e150e3;
  --gold:    #e7b24e;
  --gold-2:  #f6cf7a;

  --grad:      linear-gradient(108deg, #21bbd7 0%, #333da8 52%, #bf1cc1 100%);
  --grad-rev:  linear-gradient(108deg, #bf1cc1 0%, #333da8 52%, #21bbd7 100%);
  --grad-soft: linear-gradient(108deg, rgba(33,187,215,.14), rgba(51,61,168,.12) 52%, rgba(191,28,193,.14));
  --grad-text: linear-gradient(108deg, #1aa6c4, #4453d0 55%, #bf1cc1);

  /* ---- Signals ---- */
  --pos: #12a06a;
  --neg: #d83a55;

  /* ---- Dark surfaces (stat band, footer) ---- */
  --dark:      #0b0e22;
  --dark-2:    #11142e;
  --dark-ink:  #f4f4fb;
  --dark-mute: #a3a8cc;
  --dark-dim:  #6a6f95;
  --dark-line: rgba(255,255,255,0.10);

  /* ---- Radius ---- */
  --r-xs: 8px;
  --r-s:  12px;
  --r-m:  18px;
  --r-l:  26px;
  --r-xl: 36px;
  --r-pill: 999px;

  /* ---- Elevation (soft, airy, diffuse) ---- */
  --sh-xs: 0 2px 8px -3px rgba(30,32,70,0.10);
  --sh-sm: 0 8px 28px -12px rgba(30,32,70,0.16);
  --sh-md: 0 24px 60px -24px rgba(30,32,70,0.22);
  --sh-lg: 0 50px 110px -34px rgba(30,32,70,0.30);
  --sh-glow: 0 30px 80px -28px rgba(51,61,168,0.40);

  /* ---- Type ---- */
  --display: "Space Grotesk", system-ui, sans-serif;
  --sans:    "Inter", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  /* ---- Layout ---- */
  --maxw: 1380px;
  --gutter: 48px;
  --nav-h: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Mobile: stop the page panning sideways on an accidental swipe.
     overflow-x:hidden must be on BOTH html and body — on body alone iOS
     Safari still lets the visual viewport pan. The hero aurora ribbons,
     blobs and stage orbs are positioned ~2000px wide beyond the viewport;
     clipping at the document edge stops them being scrolled to.
     overscroll-behavior-x:none kills the horizontal rubber-band that made
     the side-scroll feel "sensitive". */
  overflow-x: hidden;
  overscroll-behavior-x: none;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { max-width: 100%; display: block; }
::selection { background: rgba(51,61,168,0.16); }

/* ---- Stage texture: subtle dot grid + ambient orbs ---- */
.stage-bg {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(circle at 1px 1px, rgba(20,22,46,0.045) 1px, transparent 0);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, #000, transparent 60%);
  opacity: 0.7;
}
.stage-orb {
  position: fixed; border-radius: 50%; filter: blur(90px); z-index: -3;
  pointer-events: none; opacity: 0.5;
}

/* ============ LAYOUT ============ */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
@media (max-width: 1080px){ :root { --gutter: 32px; } }
@media (max-width: 760px){ :root { --gutter: 20px; } }
/* Vertical rhythm — tightened 40-45% from the original "art-gallery"
   defaults. The previous 66px sections compounded with .page-hero
   bottom-padding and .mt-l margins to create 100px+ dead zones
   between CTAs and the next section's eyebrow. Cuts here propagate
   to every page without HTML edits. */
.section { padding: 38px 0; position: relative; }
@media (max-width: 820px){ .section { padding: 28px 0; } }
.section.tight { padding: 26px 0; }

/* ============ TYPOGRAPHY ============ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-mute);
}
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--grad); box-shadow: 0 0 0 4px rgba(51,61,168,0.10);
}
.eyebrow.on-dark { color: var(--dark-mute); }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; margin: 0; letter-spacing: -0.03em; line-height: 1.0; color: var(--ink); }
.h-display {
  font-size: clamp(46px, 6.4vw, 92px);
  line-height: 1.08;
  letter-spacing: -0.04em;
  padding-top: 0.08em;
  padding-bottom: 0.08em;
}
.h1 { font-size: clamp(40px, 5vw, 72px); line-height: 0.98; letter-spacing: -0.035em; }
.h2 { font-size: clamp(32px, 4vw, 56px); line-height: 1.0; letter-spacing: -0.03em; }
.h3 { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.02em; font-weight: 600; }
.h4 { font-size: 20px; letter-spacing: -0.015em; font-weight: 600; }
.grad-ink {
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-accent {
  display: inline-block;
  font-style: normal;
  font-weight: 500;
  line-height: 1.12;
  padding-bottom: 0.08em;
}
em.accent {
  display: inline-block;
  font-style: italic;
  font-weight: 400;
  line-height: 1.08;
  padding-bottom: 0.12em;
  vertical-align: baseline;
}
.lead { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; color: var(--ink-mute); }
.body { font-size: 16.5px; line-height: 1.65; color: var(--ink-mute); }
.small { font-size: 13.5px; color: var(--ink-mute); }
.mono { font-family: var(--mono); letter-spacing: 0.02em; }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }

/* ============ SECTION HEAD ============ */
.sec-head { max-width: 860px; margin-bottom: 56px; }
.sec-head .eyebrow { margin-bottom: 20px; }
.sec-head p { margin: 20px 0 0; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.center .eyebrow { justify-content: center; }

/* ============ BUTTONS (Content Library handoff) ============ */
.btn {
  --btn-h: 44px;
  --btn-px: 22px;
  --btn-fs: 14.5px;
  --btn-gap: 10px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--btn-gap);
  height: var(--btn-h); padding: 0 var(--btn-px);
  border-radius: var(--r-pill);
  font-family: var(--display); font-weight: 600; font-size: var(--btn-fs);
  letter-spacing: -0.005em; white-space: nowrap;
  border: 1px solid transparent;
  color: var(--ink);
  cursor: pointer; user-select: none; isolation: isolate;
  transition:
    transform .45s cubic-bezier(.2,.85,.25,1),
    box-shadow .45s cubic-bezier(.2,.85,.25,1),
    background .35s, color .25s, border-color .25s, filter .25s;
}
.btn:active { transition-duration: .08s; transform: translateY(1px) scale(.985); filter: brightness(.96); }
.btn-sm { --btn-h: 36px; --btn-px: 16px; --btn-fs: 13px; --btn-gap: 7px; }
.btn-lg { --btn-h: 56px; --btn-px: 30px; --btn-fs: 16px; --btn-gap: 12px; }
.btn-block { width: 100%; }
.btn > * { position: relative; z-index: 2; }
.btn svg { width: 16px; height: 16px; flex: none; display: block; }
.btn-lg svg { width: 18px; height: 18px; }
.btn-sm svg { width: 14px; height: 14px; }

/* Two-arrow micro-interaction (Linear / Vercel / Mercury style):
   .ar / .arr is a fixed-width slot that hides overflow. Hover slides
   arrow A out the right edge and arrow B in from the left. Reads as
   kinetic forward motion without any wiggle. */
.btn .arr, .btn .ar {
  position: relative; display: inline-block;
  width: 16px; height: 16px; overflow: hidden;
}
.btn-lg .arr, .btn-lg .ar { width: 18px; height: 18px; }
.btn-sm .arr, .btn-sm .ar { width: 14px; height: 14px; }
.btn .arr > *, .btn .ar > * {
  position: absolute; inset: 0; display: block;
  transition: transform .55s cubic-bezier(.65,0,.05,1);
}
.btn .arr .arr-a, .btn .ar .arr-a { transform: translate3d(0,0,0); }
.btn .arr .arr-b, .btn .ar .arr-b { transform: translate3d(-130%,0,0); }
.btn:hover .arr .arr-a, .btn:hover .ar .arr-a { transform: translate3d(130%,0,0); }
.btn:hover .arr .arr-b, .btn:hover .ar .arr-b { transform: translate3d(0,0,0); }
/* arrowUpRight variant: A leaves top-right, B enters from bottom-left */
.btn .arr.up .arr-a, .btn .ar.up .arr-a { transform: translate3d(0,0,0); }
.btn .arr.up .arr-b, .btn .ar.up .arr-b { transform: translate3d(-110%,110%,0); }
.btn:hover .arr.up .arr-a, .btn:hover .ar.up .arr-a { transform: translate3d(110%,-110%,0); }
.btn:hover .arr.up .arr-b, .btn:hover .ar.up .arr-b { transform: translate3d(0,0,0); }

/* PRIMARY · gradient pill with hover sheen */
.btn-primary {
  color: #fff;
  background: var(--grad);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 1px 2px rgba(20,22,46,0.10),
    0 6px 16px -8px rgba(51,61,168,0.45);
}
.btn-primary::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.32) 50%, transparent 65%);
  background-size: 220% 100%; background-position: 120% 0;
  transition: background-position 0.9s cubic-bezier(.2,.85,.25,1);
  pointer-events: none; z-index: 1; opacity: 0;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 1px 2px rgba(20,22,46,0.12),
    0 10px 24px -8px rgba(51,61,168,0.55);
}
.btn-primary:hover::before { opacity: 1; background-position: -120% 0; }

/* DARK · flat ink */
.btn-dark {
  color: #fff;
  background: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 1px 2px rgba(20,22,46,0.10),
    0 6px 16px -8px rgba(11,14,34,0.45);
}
.btn-dark:hover {
  transform: translateY(-1px);
  background: #1d1f3e;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 1px 2px rgba(20,22,46,0.12),
    0 10px 24px -8px rgba(11,14,34,0.55);
}

/* GHOST · glass */
.btn-ghost {
  color: var(--ink);
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(20,22,46,0.10);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    0 1px 2px rgba(20,22,46,0.04),
    0 8px 22px -12px rgba(20,22,46,0.18);
}
.btn-ghost:hover {
  transform: translateY(-1.5px);
  background: #fff; border-color: rgba(20,22,46,0.85);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 2px 4px rgba(20,22,46,0.06),
    0 14px 30px -12px rgba(20,22,46,0.24);
}

/* LIGHT · embossed white */
.btn-light {
  color: var(--indigo);
  background: linear-gradient(180deg, #ffffff 0%, #f3f2f9 100%);
  border: 1px solid rgba(20,22,46,0.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(20,22,46,0.04),
    0 1px 2px rgba(20,22,46,0.04),
    0 8px 22px -12px rgba(51,61,168,0.20);
}
.btn-light:hover {
  transform: translateY(-1.5px);
  background: linear-gradient(180deg, #ffffff 0%, #ecebf4 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(20,22,46,0.06),
    0 2px 4px rgba(20,22,46,0.06),
    0 16px 32px -12px rgba(51,61,168,0.30);
}

/* OUTLINE GRADIENT · animated chromatic border (NEW) */
.btn-outline-grad {
  color: var(--ink);
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--grad) border-box;
  border: 1px solid transparent;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 1px 2px rgba(20,22,46,0.04),
    0 8px 22px -12px rgba(51,61,168,0.18);
}
.btn-outline-grad::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: conic-gradient(from 0deg, #21bbd7, #333da8, #bf1cc1, #21bbd7);
  filter: blur(8px); opacity: 0; transition: opacity .35s;
  z-index: -1;
}
.btn-outline-grad:hover {
  transform: translateY(-1.5px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 2px 4px rgba(20,22,46,0.06),
    0 16px 32px -12px rgba(51,61,168,0.30);
}
.btn-outline-grad:hover::before { opacity: 0.45; }

/* ON DARK · glass on ink */
.btn-on-dark {
  color: #fff;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.18);
}
.btn-on-dark:hover {
  transform: translateY(-1.5px);
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    0 10px 28px -10px rgba(0,0,0,0.6);
}

/* LINK · underline wipe (NEW) */
.btn-link {
  height: auto; padding: 4px 0; gap: 8px;
  color: var(--ink); background: transparent;
  border: 0; border-radius: 0; box-shadow: none;
}
.btn-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1.5px; background: currentColor; border-radius: 1px;
  transform-origin: left; transition: transform .45s cubic-bezier(.65,0,.05,1);
}
.btn-link:hover { transform: none; }
.btn-link:hover::after { transform: scaleX(0); transform-origin: right; }
.btn-link:active { transform: none; filter: none; }

/* MAGNETIC · primary that tracks the cursor with a glow follow */
.btn-magnetic { overflow: hidden; }
.btn-magnetic::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(120px circle at var(--mx,50%) var(--my,50%),
                              rgba(255,255,255,0.42), transparent 60%);
  opacity: 0; transition: opacity .35s; pointer-events: none; z-index: 1;
}
.btn-magnetic:hover::after { opacity: 1; }

/* ============ FEATURED CTA (Content Library handoff) ============
   Mega-specimen CTA with trust avatars + checklist. Use on the
   highest-stakes conversion moment of a page. */
.cta-featured {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px;
  background: linear-gradient(180deg, #ffffff 0%, #f8f7fc 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 44px 48px;
  box-shadow: var(--sh-sm); position: relative; overflow: hidden;
}
.cta-featured::before {
  content: ""; position: absolute; inset: -1px;
  border-radius: inherit; pointer-events: none; z-index: 0;
  background:
    radial-gradient(420px 220px at 92% 18%, rgba(191,28,193,0.10), transparent 60%),
    radial-gradient(420px 220px at 8% 90%, rgba(33,187,215,0.10), transparent 60%);
}
.cta-featured > * { position: relative; z-index: 1; }
@media (max-width: 880px){ .cta-featured { grid-template-columns: 1fr; padding: 32px 28px; gap: 28px; } }
.cta-featured h3 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.08; letter-spacing: -0.025em; font-weight: 500; }
.cta-featured .trust {
  display: flex; align-items: center; gap: 14px; margin-top: 20px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim);
}
.cta-featured .trust .ava { display: inline-flex; }
.cta-featured .trust .ava span {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid #fff; margin-left: -8px;
  box-shadow: 0 2px 6px rgba(20,22,46,0.10);
}
.cta-featured .trust .ava span:first-child { margin-left: 0; }
.cta-featured .trust .ava span:nth-child(1){ background: linear-gradient(135deg,#ffbf6b,#ff6b6b); }
.cta-featured .trust .ava span:nth-child(2){ background: linear-gradient(135deg,#21bbd7,#4a57d8); }
.cta-featured .trust .ava span:nth-child(3){ background: linear-gradient(135deg,#bf1cc1,#7b5cff); }
.cta-featured .trust .ava span:nth-child(4){ background: linear-gradient(135deg,#1c9b6e,#21bbd7); }
.cta-featured .stack { display: flex; flex-direction: column; gap: 14px; align-items: stretch; justify-content: center; }
.cta-featured .ck { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-mute); }
.cta-featured .ck svg { width: 16px; height: 16px; color: var(--pos); }

/* ============ PILLS / TAGS / CHIPS ============ */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px; border-radius: var(--r-pill);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em;
  background: rgba(255,255,255,0.6); border: 1px solid var(--line-2);
  color: var(--ink-mute); backdrop-filter: blur(8px);
}
.tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--r-pill); border: 1px solid var(--line-2); color: var(--ink-mute);
}
.delta { font-family: var(--mono); font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }
.delta.pos { color: var(--pos); }
.delta.neg { color: var(--neg); }

/* ============ CARDS ============ */
.card {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r-l); padding: 34px;
  box-shadow: var(--sh-sm);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
  position: relative;
}
.card.hover-lift:hover { transform: translateY(-6px); box-shadow: var(--sh-md); border-color: var(--line-2); }

/* glassy variant */
.glass {
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(255,255,255,0.7);
  backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: var(--sh-md);
}

/* ============ ICON TILE  ·  base + treatment system ============
   Use .icon-tile (legacy) or .tile (new) — both render a 56x56
   placeholder for an icon. The treatment classes (.soft / .solid /
   .grad / .ring / .round and the status variants) compose on top:

     <span class="tile soft" data-icon="deal"></span>     softest, default
     <span class="tile solid" data-icon="rocket"></span>  emphasis
     <span class="tile grad" data-icon="star"></span>     hero feature - ONE PER SECTION
     <span class="tile ring" data-icon="compass"></span>  editorial quiet
     <span class="tile soft round" data-icon="manager"></span>  avatar feel
*/
.icon-tile, .tile {
  width: 56px; height: 56px; border-radius: 14px;
  display: grid; place-items: center; flex: none;
  /* SOFT is the default */
  background: linear-gradient(135deg, rgba(33,187,215,0.14), rgba(191,28,193,0.12));
  color: var(--indigo); border: 1px solid var(--line);
}
.icon-tile svg, .tile svg { width: 28px; height: 28px; }
.icon-tile.round, .tile.round { border-radius: 50%; }
.icon-tile.lg, .tile.lg { width: 72px; height: 72px; border-radius: 18px; }
.tile.lg svg, .icon-tile.lg svg { width: 36px; height: 36px; }
.tile.sm, .icon-tile.sm { width: 40px; height: 40px; border-radius: 10px; }
.tile.sm svg, .icon-tile.sm svg { width: 20px; height: 20px; }

/* TREATMENTS — explicit modifiers override the default soft.
   Both .tile and the legacy .icon-tile pick these up. */
.tile.soft,  .icon-tile.soft  { background: linear-gradient(135deg, rgba(33,187,215,0.14), rgba(191,28,193,0.12)); color: var(--indigo); border: 1px solid var(--line); }
.tile.solid, .icon-tile.solid { background: var(--ink); color: #fff; border-color: transparent; }
.tile.grad,  .icon-tile.grad  { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 4px 14px -6px rgba(51,61,168,0.45); }
.tile.ring,  .icon-tile.ring  { background: #fff; color: var(--ink); border: 1.5px solid var(--ink); }

/* STATUS — tint by semantic role */
.tile.success, .icon-tile.success { background: rgba(28,155,110,0.12); color: var(--pos); border-color: rgba(28,155,110,0.18); }
.tile.alert,   .icon-tile.alert   { background: rgba(241,179,64,0.14); color: #b8821f; border-color: rgba(241,179,64,0.24); }
.tile.danger,  .icon-tile.danger  { background: rgba(216,58,85,0.10); color: var(--neg); border-color: rgba(216,58,85,0.20); }

.icon-line svg { width: 100%; height: 100%; display: block; }
.icon-line { color: var(--ink); }

/* ============ FORM ============ */
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink); }
.field label .req { color: var(--magenta); }
.field input, .field select, .field textarea {
  width: 100%; background: #fff; border: 1.5px solid #e2e2ee;
  border-radius: var(--r-s); padding: 13px 15px;
  color: var(--ink); font-size: 14.5px; font-family: inherit; outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input::placeholder, .field textarea::placeholder { color: #a3a8bd; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--indigo); box-shadow: 0 0 0 4px rgba(51,61,168,0.12);
}
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%235a5e78' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 15px center; padding-right: 38px; }
.field small { color: var(--ink-dim); font-size: 12px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 540px){ .form-row { grid-template-columns: 1fr; } }

/* ============ NAVBAR ============ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background .3s, box-shadow .3s, border-color .3s, backdrop-filter .3s, color .25s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(244,243,249,0.82);
  backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; }
/* Logo wrapper — the full FXUnlocked image (icon + wordmark) is one
   asset so we just size by height and let aspect-ratio handle width.
   flex-shrink: 0 is crucial so the parent .nav-inner (flex row) can
   never crush the logo horizontally when nav-cta gets full. */
.logo {
  display: inline-flex; align-items: center;
  line-height: 0; flex-shrink: 0;
  transition: filter .25s, transform .25s;
}
.logo img {
  height: 38px; width: auto;
  max-width: none; flex-shrink: 0;
  display: block;
  transition: filter .25s;
}
.logo:hover { transform: translateY(-1px); }
.nav-links { display: flex; align-items: center; gap: 30px; font-size: 14.5px; font-weight: 500; }
.nav-links a { color: var(--ink-mute); transition: color .18s; position: relative; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px;
  background: var(--grad); border-radius: 2px;
}

/* ---- NAV OVER DARK HERO (home only, unscrolled) ----
   The full-bleed video hero makes the default light-themed nav text
   unreadable. While the nav sits over the hero, invert colors to
   white. As soon as the user scrolls past the hero, .scrolled hits
   and the standard light-bg / dark-text nav takes over. */
/* Applies on the homepage AND the affiliates page — both open with a
   dark hero banner that the fixed nav sits over. */
body[data-page="home"] .nav:not(.scrolled),
body[data-page="affiliates"] .nav:not(.scrolled) {
  background: linear-gradient(180deg, rgba(8,10,28,0.55), rgba(8,10,28,0.10) 75%, transparent);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
}
body[data-page="home"] .nav:not(.scrolled) .logo img,
body[data-page="affiliates"] .nav:not(.scrolled) .logo img {
  /* The wordmark in the logo asset is dark; over the dark hero we
     flatten the whole logo to pure white so both the icon and
     wordmark stay legible. brightness(0) clears all color first,
     then invert(1) lights it up white. */
  filter: brightness(0) invert(1) drop-shadow(0 4px 12px rgba(255,255,255,0.18));
}
body[data-page="home"] .nav:not(.scrolled) .nav-links a,
body[data-page="affiliates"] .nav:not(.scrolled) .nav-links a { color: rgba(255,255,255,0.72); }
body[data-page="home"] .nav:not(.scrolled) .nav-links a:hover,
body[data-page="home"] .nav:not(.scrolled) .nav-links a.active,
body[data-page="affiliates"] .nav:not(.scrolled) .nav-links a:hover,
body[data-page="affiliates"] .nav:not(.scrolled) .nav-links a.active { color: #fff; }
body[data-page="home"] .nav:not(.scrolled) .btn-ghost,
body[data-page="affiliates"] .nav:not(.scrolled) .btn-ghost {
  background: rgba(255,255,255,0.10);
  color: #fff;
  border-color: rgba(255,255,255,0.22);
  backdrop-filter: blur(12px);
}
body[data-page="home"] .nav:not(.scrolled) .btn-ghost:hover,
body[data-page="affiliates"] .nav:not(.scrolled) .btn-ghost:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.38);
  color: #fff;
}
body[data-page="home"] .nav:not(.scrolled) .nav-toggle,
body[data-page="affiliates"] .nav:not(.scrolled) .nav-toggle {
  color: #fff;
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
}
.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-toggle { display: none; }

/* ============ WHATSAPP NAV CHIP ============
   Round icon chip in the brand gradient (not WhatsApp green — the
   green looked off against the brand on the dark hero). Opens wa.me
   with a pre-filled text on click. Hidden on mobile per design
   feedback; the menu toggle covers reach on small screens. */
.btn.btn-wa {
  --btn-h: 44px;
  width: 44px; padding: 0;
  background: var(--grad);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 6px 16px -8px rgba(51,61,168,0.45);
}
.btn.btn-wa svg { width: 20px; height: 20px; }
.btn.btn-wa:hover {
  transform: translateY(-1.5px);
  filter: brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    0 10px 24px -8px rgba(191,28,193,0.5);
}
/* Hide WhatsApp chip on mobile (≤1080) — the nav-cta is already busy
   with Apply now + hamburger, and the badge looks awkward squeezed in. */
@media (max-width: 1080px){
  .btn.btn-wa { display: none !important; }
}
@media (max-width: 1080px){
  .nav-links { display: none; }
  /* hide everything in nav-cta EXCEPT the gradient Apply button and the
     WhatsApp chip — both stay one-tap-accessible on phones */
  .nav-cta .btn:not(.btn-primary):not(.btn-wa) { display: none; }
}
@media (max-width: 1080px){
  /* The logo asset is icon + wordmark (4.78:1). Keep aspect ratio — size
     by height only, never set width. */
  .logo img { height: 32px; width: auto; }
}
@media (max-width: 640px){
  .nav { height: 72px; }
  .logo img { height: 28px; width: auto; }   /* small enough that logo + Apply now + menu all fit on 360px */
  .nav-cta .btn-primary { padding: 12px 18px; font-size: 14px; }
}
@media (max-width: 380px){
  .logo img { height: 24px; }
  .nav-cta .btn-primary { padding: 10px 14px; font-size: 13px; }
}

/* ============ FOOTER ============ */
.footer { background: var(--dark); color: var(--dark-mute); padding: 54px 0 30px; position: relative; overflow: hidden; }
.footer::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(700px 360px at 15% -10%, rgba(51,61,168,0.4), transparent 70%),
              radial-gradient(600px 340px at 90% 110%, rgba(191,28,193,0.3), transparent 70%);
  pointer-events: none;
}
.footer .wrap { position: relative; z-index: 1; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 36px; border-bottom: 1px solid var(--dark-line); }
@media (max-width: 880px){ .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 520px){ .foot-grid { grid-template-columns: 1fr; } }
.footer .logo { margin-bottom: 18px; }
.footer .logo img {
  /* Same brightness(0) + invert(1) trick to flip the dark-text logo
     white against the dark footer. */
  filter: brightness(0) invert(1) drop-shadow(0 4px 12px rgba(255,255,255,0.16));
  height: 44px;
}
.foot-col h5 { font-family: var(--display); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dark-dim); margin: 0 0 18px; font-weight: 600; }
.foot-col a { display: block; color: var(--dark-mute); padding: 7px 0; font-size: 14.5px; transition: color .18s; }
.foot-col a:hover { color: #fff; }
/* Escape the generic .foot-col a styles for the Apply now CTA. The
   inherited display:block + padding:7px 0 was stretching the button
   to the column width AND adding vertical padding on top of the
   .btn's own padding, which made the text drift left + the gradient
   look "off". Force the standard inline-flex button shape. */
.foot-col a.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  width: auto;
  font-size: 14px;
}
.foot-col a.btn:hover { color: #fff; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--dark-dim); }

/* ============ SCROLL REVEAL ============ */
@media (prefers-reduced-motion: no-preference) {
  /* Scroll reveal — implemented as a CSS ANIMATION, not a transition.
     Reason: cards like .benefit carry their own hover transition
     (transform/box-shadow .35s); transition declarations don't merge,
     so whichever rule wins the cascade killed the reveal's opacity
     fade entirely — elements popped in instantly ("clicky").
     Animations run independently of transitions, so the reveal sweep
     and the hover-lift coexist. animation-fill-mode: backwards holds
     the hidden "from" state during the stagger delay; after the run
     the animation releases and normal styles (incl. hover transforms)
     take over. Compositor-friendly: transform + opacity only. */
  [data-reveal]:not(.in) { opacity: 0; transform: translateY(34px) scale(0.985); }
  [data-reveal].in {
    animation: fxuReveal 1s cubic-bezier(.16, 1, .3, 1) backwards;
  }
  /* Stagger steps .12s apart so the cascade between sibling cards is
     actually perceptible instead of near-simultaneous. */
  [data-reveal-delay="1"].in { animation-delay: .12s; }
  [data-reveal-delay="2"].in { animation-delay: .24s; }
  [data-reveal-delay="3"].in { animation-delay: .36s; }
  [data-reveal-delay="4"].in { animation-delay: .48s; }
  [data-reveal-delay="5"].in { animation-delay: .60s; }
}
@keyframes fxuReveal {
  from { opacity: 0; transform: translateY(34px) scale(0.985); }
}

/* ============ MARQUEE ============ */
.marquee { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee-track { display: flex; gap: 72px; width: max-content; align-items: center; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0);} to { transform: translateX(-50%);} }

/* ============ DIVIDER GRADIENT LINE ============ */
.hr-grad { height: 1px; border: none; background: linear-gradient(90deg, transparent, var(--line-2), transparent); margin: 0; }

/* ============ UTILITY ============ */
.grid { display: grid; gap: 28px; }
.cols-2 { grid-template-columns: repeat(2,1fr); }
.cols-3 { grid-template-columns: repeat(3,1fr); }
.cols-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 980px){ .cols-3, .cols-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }
.center { text-align: center; }
/* Margin-top utilities — mt-l + mt-m tightened ~35% to stop them
   stacking with reduced section padding to recreate the old dead
   zone between hero CTAs and the next section. */
.mt-s { margin-top: 14px; } .mt-m { margin-top: 18px; } .mt-l { margin-top: 28px; }
.flex { display: flex; } .items-center { align-items: center; } .gap-s { gap: 10px; } .gap-m { gap: 18px; }
.wrap-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hide-mobile { } @media (max-width: 760px){ .hide-mobile { display: none !important; } }