/* ============================================================
   TOKENS
============================================================= */
:root{
  --ink:#0b1229;
  --ink-2:#111a3d;
  --brand:#0775e8;
  --brand-2:#00d9ff;
  --text:#f4f6fd;
  --muted:#9aa8d1;
  --surface:#111a3d;
  --surface-2:#0b1229;
  --line: rgba(255,255,255,.12);
  --radius: 18px;
  --radius-sm: 12px;
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --fs-hero: clamp(2.1rem, 4vw + 1rem, 3.6rem);
  --fs-h2: clamp(1.7rem, 2.4vw + 1rem, 2.6rem);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--font-body); color:var(--text);
  background:var(--surface); -webkit-font-smoothing:antialiased;
  position:relative;
}

/* ---- subtle sitewide animated ambient background ---- */
.ambient-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(620px circle at 12% 18%, rgba(7,117,232,.32), transparent 65%),
    radial-gradient(580px circle at 88% 10%, rgba(0,217,255,.26), transparent 60%),
    radial-gradient(680px circle at 50% 95%, rgba(7,117,232,.22), transparent 65%),
    radial-gradient(500px circle at 92% 70%, rgba(0,217,255,.18), transparent 60%);
  animation: ambient-drift 16s ease-in-out infinite alternate;
}
@keyframes ambient-drift{
  0%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(-3%,3%,0) scale(1.1); }
  100%{ transform:translate3d(4%,-4%,0) scale(1.16); }
}
@media (prefers-reduced-motion: reduce){ .ambient-bg{ animation:none; } }

/* ---- reusable floating sparkle/particle system, drop into any section ---- */
.spark-field{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.spark{ position:absolute; bottom:4%; opacity:0; font-size:1.15rem; animation: spark-float 4.2s ease-in infinite; }
.spark--sm{ font-size:.85rem; }
.spark--lg{ font-size:1.5rem; }
@keyframes spark-float{
  0%{ opacity:0; transform:translateY(0) scale(.6) rotate(0deg); }
  12%{ opacity:1; }
  100%{ opacity:0; transform:translateY(-280px) scale(1.15) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce){ .spark{ animation:none; opacity:0; } }

/* ---- reusable pulsing glow for headline gradient words ---- */
.text-gradient--pulse{ display:inline-block; animation: text-pulse 2.4s ease-in-out infinite; }
@keyframes text-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } }
@media (prefers-reduced-motion: reduce){ .text-gradient--pulse{ animation:none; } }

/* content sits above the ambient layer; sections with their own background
   simply paint over it, sections without one let it show through */
.hero, .client-logos, .services, .results, .process, .apply, .footer{ position:relative; z-index:1; }
h1,h2,h3{ font-family:var(--font-display); margin:0; line-height:1.12; letter-spacing:-0.01em; }
p{ margin:0; }
a{ color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }

.text-gradient{
  background: linear-gradient(100deg, var(--brand), var(--brand-2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

.eyebrow{
  font-family:var(--font-display); font-size:.8rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--brand); margin:0 0 12px;
}
.eyebrow--light{ color:var(--brand-2); }
.eyebrow--white{ color:#fff; }

section{ padding:88px 24px; scroll-margin-top:88px; }
@media (max-width:640px){ section{ padding:60px 20px; } }

.section-head{ max-width:720px; margin:0 auto 48px; text-align:center; }
.section-title{ font-size:var(--fs-h2); margin-bottom:14px; }
.section-title--light{ color:#fff; }
.section-sub{ color:var(--muted); font-size:1.05rem; line-height:1.55; }
.section-sub--light{ color:#c7d2fe; }

/* ---- scroll reveal ---- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px; border-radius:100px; font-weight:600; font-size:.95rem;
  text-decoration:none; transition: transform .15s ease, box-shadow .15s ease; border:1px solid transparent; cursor:pointer;
}
.btn--primary{ background: linear-gradient(100deg, var(--brand), #0559b8); color:#fff; box-shadow: 0 8px 24px rgba(7,117,232,.28); }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(7,117,232,.36); }
.btn--ghost{ background:transparent; color:var(--text); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--brand); color:var(--brand); transform:translateY(-2px); }

/* Nav CTA — flat, no gradient-glow effects (removed per feedback: caused rendering artifacts) */
.btn--nav-glow{
  padding:11px 24px; font-size:.88rem;
  background: var(--brand);
  color:#fff; box-shadow: 0 4px 14px rgba(7,117,232,.28);
}
.btn--nav-glow:hover{ transform:translateY(-2px); background:#0661c4; }

/* ============================================================
   NAV
============================================================= */
.nav{ position:sticky; top:0; z-index:50; background:rgba(11,18,41,.75); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); }
.nav__inner{
  max-width:1200px; margin:0 auto; padding:10px 24px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px;
}
.nav__logo{ grid-column:1; justify-self:start; }
.nav__logo img{ height:48px; width:auto; }
.nav__group{ grid-column:2; justify-self:center; display:flex; align-items:center; gap:28px; }
.nav__links{ display:flex; align-items:center; gap:28px; font-size:.92rem; font-weight:500; }
.nav__links a{ text-decoration:none; color:var(--text); opacity:.75; transition:opacity .15s; }
.nav__links a:hover{ opacity:1; }

/* ---- mobile hamburger toggle ---- */
.nav__burger{
  display:none; background:none; border:none; cursor:pointer; padding:8px;
  flex-direction:column; gap:4px; justify-content:center; align-items:center;
}
.nav__burger span{ display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
.nav.is-menu-open .nav__burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav.is-menu-open .nav__burger span:nth-child(2){ opacity:0; }
.nav.is-menu-open .nav__burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---- nav niche dropdown ---- */
.nav__dropdown{ position:relative; }
.nav__dropdown-trigger{
  display:flex; align-items:center; gap:5px; background:none; border:none; cursor:pointer;
  font-family:var(--font-body); font-size:.92rem; font-weight:500; color:var(--text); opacity:.75;
  padding:0; transition:opacity .15s;
}
.nav__dropdown-trigger:hover, .nav__dropdown.is-open .nav__dropdown-trigger{ opacity:1; }
.nav__dropdown-chevron{ font-size:.65rem; transition:transform .2s ease; }
.nav__dropdown.is-open .nav__dropdown-chevron{ transform:rotate(180deg); }

.nav__dropdown-menu{
  position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%) translateY(6px);
  min-width:270px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:0 24px 48px -16px rgba(11,18,41,.22); padding:8px;
  opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:60;
}
.nav__dropdown-menu::before{
  content:''; position:absolute; top:-6px; left:50%; transform:translateX(-50%) rotate(45deg);
  width:12px; height:12px; background:var(--surface); border-left:1px solid var(--line); border-top:1px solid var(--line);
}
.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown.is-open .nav__dropdown-menu{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.nav__dropdown-item{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--radius-sm);
  text-decoration:none; color:var(--text); transition:background .15s ease;
}
.nav__dropdown-item:hover{ background:var(--surface-2); }
.nav__dropdown-item-icon{
  width:36px; height:36px; border-radius:10px; background:rgba(7,117,232,.1);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0;
}
.nav__dropdown-item strong{ display:block; font-size:.9rem; font-weight:600; }
.nav__dropdown-item small{ display:block; font-size:.76rem; color:var(--muted); margin-top:1px; }

/* ---- mobile nav layout (must come after the desktop nav/dropdown rules above so it wins the cascade) ---- */
@media (max-width:800px){
  .nav__inner{ grid-template-columns:auto 1fr auto; }
  .nav__group{ grid-column:3; justify-self:end; gap:10px; }
  .nav__burger{ display:flex; }

  .nav__links{
    flex-direction:column; align-items:stretch; gap:0;
    position:absolute; top:100%; left:0; right:0; background:var(--surface);
    border-bottom:1px solid var(--line); box-shadow:0 24px 44px -20px rgba(11,18,41,.28);
    padding:0 24px; max-height:0; overflow:hidden; opacity:0;
    transition:max-height .35s ease, opacity .25s ease, padding .35s ease;
  }
  .nav.is-menu-open .nav__links{ max-height:520px; opacity:1; padding:10px 24px 18px; }
  .nav__links a{ padding:13px 2px; border-bottom:1px solid var(--line); opacity:1; }
  .nav__links > a:last-of-type{ border-bottom:none; }

  /* the niches dropdown becomes an inline expandable row inside the mobile menu */
  .nav__dropdown-trigger{ width:100%; justify-content:space-between; padding:13px 2px; border-bottom:1px solid var(--line); }
  .nav__dropdown-menu{
    position:static !important; transform:none !important; width:100%; min-width:0;
    background:none; border:none; box-shadow:none; padding:0;
    max-height:0; overflow:hidden; opacity:1; visibility:visible;
    transition:max-height .25s ease;
  }
  .nav__dropdown-menu::before{ display:none; }
  .nav__dropdown.is-open .nav__dropdown-menu{ max-height:200px; padding:4px 0 10px; }
}

/* ============================================================
   HERO
============================================================= */
.hero{
  position:relative; overflow:hidden;
  min-height:88vh; display:flex; align-items:center;
  padding:120px 24px 64px;
}
@media (max-width:900px){ .hero{ min-height:0; padding:100px 24px 56px; } }

/* ---- animated aurora background ---- */
.hero__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.hero__blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.4; }
.hero__blob--1{ width:440px; height:440px; background:var(--brand); top:-140px; left:-100px; animation: blob-drift-a 17s ease-in-out infinite; }
.hero__blob--2{ width:400px; height:400px; background:var(--brand-2); top:8%; right:-140px; animation: blob-drift-b 21s ease-in-out infinite; }
.hero__blob--3{ width:340px; height:340px; background:var(--brand-2); bottom:-160px; left:38%; opacity:.28; animation: blob-drift-c 25s ease-in-out infinite; }
@keyframes blob-drift-a{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(50px,-30px) scale(1.15); } }
@keyframes blob-drift-b{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-60px,40px) scale(.9); } }
@keyframes blob-drift-c{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(30px,-40px) scale(1.1); } }

.hero__inner{ position:relative; z-index:1; max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; width:100%; }
@media (max-width:900px){ .hero__inner{ grid-template-columns:1fr; gap:40px; } }

.hero h1{ font-size:var(--fs-hero); margin:0 0 20px; }
.hero__sub{ color:var(--muted); font-size:1.1rem; line-height:1.6; max-width:52ch; margin-bottom:28px; }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.hero__note{ color:var(--muted); font-size:.85rem; }

/* ---- entrance choreography ---- */
.hero__copy .eyebrow,
.hero__copy .hero__sub,
.hero__copy .hero__cta,
.hero__copy .hero__note{
  opacity:0; animation: hero-rise .7s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero__copy .eyebrow{ animation-delay:.05s; }
.hero__copy .hero__sub{ animation-delay:.72s; }
.hero__copy .hero__cta{ animation-delay:.92s; }
.hero__copy .hero__note{ animation-delay:1.08s; }
@keyframes hero-rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }

.reveal-word{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.15em; margin-bottom:-.15em; }
.reveal-word > span{ display:inline-block; transform:translateY(115%); animation: hero-word-up .75s cubic-bezier(.2,.8,.2,1) forwards; }
.hero__headline .reveal-word:nth-child(1) > span{ animation-delay:.15s; }
.hero__headline .reveal-word:nth-child(2) > span{ animation-delay:.21s; }
.hero__headline .reveal-word:nth-child(3) > span{ animation-delay:.27s; }
.hero__headline .reveal-word:nth-child(4) > span{ animation-delay:.33s; }
.hero__headline .reveal-word:nth-child(5) > span{ animation-delay:.39s; }
.hero__headline .reveal-word:nth-child(6) > span{ animation-delay:.45s; }
.hero__headline .reveal-word:nth-child(7) > span{ animation-delay:.52s; }
@keyframes hero-word-up{ to{ transform:translateY(0); } }

.hero__visual{ position:relative; opacity:0; animation: hero-visual-in .9s cubic-bezier(.2,.8,.2,1) .3s forwards; }
@keyframes hero-visual-in{
  from{ opacity:0; transform:scale(.86) rotate(-4deg); }
  to{ opacity:1; transform:scale(1) rotate(0); }
}
.hero__visual-float{ animation: hero-float 6s ease-in-out 1.2s infinite; perspective:1000px; }
@keyframes hero-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }

.hero__scroll-cue{
  position:absolute; left:50%; bottom:28px; margin-left:-13px; z-index:2;
  width:26px; height:42px; border:2px solid rgba(255,255,255,.28); border-radius:100px;
  display:flex; justify-content:center; padding-top:8px; text-decoration:none;
  opacity:0; animation: hero-rise .7s ease 1.55s forwards;
}
.hero__scroll-cue-dot{ width:4px; height:8px; border-radius:2px; background:var(--brand); animation: scroll-cue-bounce 1.6s ease-in-out infinite; }
@keyframes scroll-cue-bounce{ 0%,100%{ transform:translateY(0); opacity:1; } 50%{ transform:translateY(12px); opacity:.35; } }
@media (max-width:900px){ .hero__scroll-cue{ display:none; } }

@media (prefers-reduced-motion: reduce){
  .hero__blob, .reveal-word > span, .hero__copy .eyebrow, .hero__copy .hero__sub, .hero__copy .hero__cta,
  .hero__copy .hero__note, .hero__visual, .hero__visual-float, .hero__scroll-cue, .hero__scroll-cue-dot{
    animation:none !important; opacity:1 !important; transform:none !important;
  }
}

/* ---- Hero reel/engagement animation ---- */
.reel-stack{ position:relative; max-width:340px; margin:0 auto; isolation:isolate; }
.reel-stack::before{
  content:""; position:absolute; inset:-70px; z-index:-2; pointer-events:none;
  background: radial-gradient(closest-side, rgba(7,117,232,.4), rgba(0,217,255,.14) 55%, transparent 75%);
  filter: blur(6px);
  animation: reel-glow-pulse 4.5s ease-in-out infinite;
}
@keyframes reel-glow-pulse{ 0%,100%{ transform:scale(1); opacity:.85; } 50%{ transform:scale(1.1); opacity:1; } }

.reel-ghost{
  position:absolute; inset:0; border-radius:var(--radius); pointer-events:none;
  background:linear-gradient(160deg, var(--brand), var(--brand-2));
}
.reel-ghost--1{ z-index:-1; transform:rotate(-10deg) translateY(4px); opacity:.55; }
.reel-ghost--2{ z-index:-2; transform:rotate(8deg) translateY(10px); opacity:.32; }

.reel-card{ position:relative; z-index:1; background:var(--ink); border-radius:var(--radius); padding:18px; box-shadow: 0 30px 60px -20px rgba(11,18,41,.45); max-width:340px; margin:0 auto; transition: transform .3s cubic-bezier(.2,.6,.2,1); transform-style:preserve-3d; will-change:transform; }
.reel-card__screen{
  position:relative; width:100%; aspect-ratio: 9/14; border-radius:14px; overflow:hidden;
  background: linear-gradient(160deg, #0b1229, var(--brand) 85%, var(--brand-2) 130%);
}
.reel-card__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.reel-card__gradient{
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,.45), transparent 45%);
}
.reel-card__live{
  position:absolute; top:14px; left:14px; z-index:2;
  display:flex; align-items:center; gap:6px;
  background:rgba(0,0,0,.4); backdrop-filter:blur(4px);
  color:#fff; font-family:var(--font-display); font-weight:700; font-size:.66rem; letter-spacing:.05em;
  padding:5px 11px 5px 9px; border-radius:100px;
}
.reel-card__live span{ width:7px; height:7px; border-radius:50%; background:#ff4d4d; animation:live-pulse 1.5s ease-in-out infinite; }
@keyframes live-pulse{
  0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(255,77,77,.55); }
  50%{ opacity:.65; box-shadow:0 0 0 6px rgba(255,77,77,0); }
}
.reel-card__hearts{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.floating-heart{
  position:absolute; bottom:10%; font-size:1.1rem; opacity:0;
  animation: float-up 2.6s ease-in forwards;
}
@keyframes float-up{
  0%{ opacity:0; transform:translateY(0) scale(.6); }
  10%{ opacity:1; }
  100%{ opacity:0; transform:translateY(-220px) scale(1.1) translateX(var(--drift, 10px)); }
}
.reel-card__ui{ position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:flex-end; padding:14px; }
.reel-card__side{ display:flex; flex-direction:column; align-items:center; gap:4px; color:#fff; font-size:.7rem; }
.reel-card__icon{ font-size:1.3rem; margin-top:8px; }
.reel-card__icon--like{ color:var(--brand-2); transition:transform .2s ease; }
.reel-card__icon--like.pulse{ transform:scale(1.4); }

@media (prefers-reduced-motion: reduce){
  .reel-stack::before, .reel-card__live span{ animation:none; }
}

/* ============================================================
   CLIENT LOGOS MARQUEE — full color
============================================================= */
.client-logos{ padding:36px 0; background:rgba(7,117,232,.06); overflow:hidden; }
.client-logos__viewport{
  overflow:hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.client-logos__track{ display:inline-flex; align-items:center; gap:44px; animation: logos-scroll 70s linear infinite; width:max-content; }
.client-logos__track img{ height:42px; width:auto; max-width:150px; object-fit:contain; }
@keyframes logos-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============================================================
   SERVICES — icon cards, no photos
============================================================= */
.services{ position:relative; overflow:hidden; }
.services__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.services__blob{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.16; }
.services__blob--1{ width:420px; height:420px; background:var(--brand); top:-120px; left:-80px; animation: blob-drift-a 19s ease-in-out infinite; }
.services__blob--2{ width:380px; height:380px; background:var(--brand-2); bottom:-140px; right:-100px; animation: blob-drift-b 23s ease-in-out infinite; }
.services__blob--3{ width:300px; height:300px; background:var(--brand-2); top:30%; left:45%; opacity:.1; animation: blob-drift-c 27s ease-in-out infinite; }

.services__grid{
  position:relative; z-index:1;
  max-width:1180px; margin:0 auto;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:20px;
}
@media (max-width:900px){ .services__grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:560px){ .services__grid{ grid-template-columns: 1fr; } }

.service-tile{
  position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px; overflow:hidden; isolation:isolate;
  transition: transform .4s cubic-bezier(.2,.6,.2,1), box-shadow .4s ease, border-color .4s ease;
}
.service-tile:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 44px -20px rgba(7,117,232,.3);
  border-color:rgba(7,117,232,.35);
}
.service-tile__num{
  position:absolute; top:12px; right:18px; font-family:var(--font-display); font-weight:700;
  font-size:2.6rem; color:rgba(0,217,255,.14); line-height:1; z-index:0; pointer-events:none; user-select:none;
}
.service-tile__icon-wrap{
  position:relative; z-index:1; width:56px; height:56px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow:0 12px 22px -10px rgba(7,117,232,.5);
  margin-bottom:20px;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.service-tile:hover .service-tile__icon-wrap{ transform:scale(1.08) rotate(-4deg); }
.service-tile__icon{ font-size:1.5rem; position:relative; z-index:1; }
.service-tile h3{ position:relative; z-index:1; font-size:1.05rem; margin-bottom:8px; color:var(--text); }
.service-tile p{ position:relative; z-index:1; color:var(--muted); font-size:.9rem; line-height:1.6; }

.service-tile--video{ transition-delay:.03s; }
.service-tile--photo{ transition-delay:.09s; }
.service-tile--social{ transition-delay:.15s; }
.service-tile--strategy{ transition-delay:.21s; }
.service-tile--addon{ transition-delay:.27s; }

.service-tile--addon{
  grid-column:1 / -1;
  background:var(--surface-2); border:1px dashed rgba(7,117,232,.4);
  display:flex; align-items:center; gap:20px;
}
.service-tile--addon .service-tile__icon-wrap--addon{
  margin-bottom:0; flex-shrink:0;
}
.service-tile--addon h3{ font-size:1rem; }
.service-tile--addon .tag{
  display:inline-block; font-family:var(--font-body); font-size:.62rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.03em; background:rgba(7,117,232,.1); color:var(--brand);
  padding:3px 8px; border-radius:100px; margin-left:8px; vertical-align:middle;
}
@media (max-width:560px){ .service-tile--addon{ flex-direction:column; align-items:flex-start; } }

/* ============================================================
   RESULTS — stats + carousel, combined
============================================================= */
.results{
  position:relative; overflow:hidden; background:var(--ink); text-align:center;
  padding:100px 24px 90px;
}
.stats__bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 480px at 50% -12%, rgba(7,117,232,.4), transparent 65%),
    radial-gradient(500px 320px at 88% 100%, rgba(0,217,255,.14), transparent 65%);
}
.results__inner{ position:relative; z-index:1; }

.stats__inner{ max-width:1100px; margin:0 auto 84px; }

.stats__badge{
  display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14); color:#c7d2fe; font-family:var(--font-display);
  font-size:.8rem; font-weight:600; letter-spacing:.02em; padding:9px 20px; border-radius:100px; margin-bottom:26px;
}
.stats__badge-dot{ width:6px; height:6px; border-radius:50%; background:var(--brand-2); box-shadow:0 0 10px var(--brand-2); }

.stats__title{ color:#fff; font-size:var(--fs-h2); margin-bottom:64px; }

.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px 24px; }
@media (max-width:860px){ .stats__grid{ grid-template-columns:repeat(2,1fr); gap:44px 24px; } }
@media (max-width:480px){ .stats__grid{ grid-template-columns:1fr; } }

.stats__item{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;
}
.results.is-visible .stats__item{ opacity:1; transform:none; }
.results.is-visible .stats__item:nth-child(1){ transition-delay:.05s; }
.results.is-visible .stats__item:nth-child(2){ transition-delay:.15s; }
.results.is-visible .stats__item:nth-child(3){ transition-delay:.25s; }
.results.is-visible .stats__item:nth-child(4){ transition-delay:.35s; }

.stats__num{ font-family:var(--font-display); font-size:clamp(2.2rem,4.2vw,3.2rem); font-weight:700; color:#fff; line-height:1; }
.stats__item span{ color:#94a3d9; font-size:.92rem; }

@media (prefers-reduced-motion: reduce){ .stats__item{ opacity:1; transform:none; transition:none; } }

.carousel{ max-width:1000px; margin:0 auto; display:flex; align-items:center; gap:14px; }
.carousel__viewport{ flex:1; overflow-x:hidden; overflow-y:visible; padding-top:18px; }
.carousel__track{ display:flex; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.carousel__track .case-card{ flex:0 0 100%; }
.carousel__arrow{
  flex-shrink:0; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.05); color:#fff; font-size:1.1rem; cursor:pointer; transition: all .15s ease;
}
.carousel__arrow:hover{ background:var(--brand-2); color:var(--ink); border-color:var(--brand-2); }
.carousel__dots{ display:flex; justify-content:center; gap:8px; margin-top:24px; }
.carousel__dots button{ width:8px; height:8px; border-radius:50%; border:none; background:rgba(255,255,255,.25); cursor:pointer; padding:0; transition: all .2s ease; }
.carousel__dots button.is-active{ background:var(--brand-2); width:22px; border-radius:6px; }

.case-card{ background:var(--ink-2); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:32px; position:relative; }
.case-card__badge{
  position:absolute; top:-14px; left:32px; background:var(--brand-2); color:var(--ink);
  font-size:.72rem; font-weight:700; letter-spacing:.03em; padding:6px 14px; border-radius:100px; text-transform:uppercase;
}
.case-card__grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:32px; margin-top:10px; }
@media (max-width:760px){ .case-card__grid{ grid-template-columns:1fr; } .carousel{ gap:8px; } }
.case-card__stats{ display:flex; flex-direction:column; gap:18px; }
.case-card__stats strong{ font-family:var(--font-display); font-size:1.8rem; color:#fff; display:block; }
.case-card__stats span{ font-size:.8rem; color:#94a3d9; }
@media (max-width:560px){
  .case-card{ padding:22px 18px; }
  .case-card__badge{ left:18px; font-size:.64rem; padding:5px 12px; }
  .case-card__grid{ gap:16px; }
  .case-card__stats{ flex-direction:row; flex-wrap:wrap; gap:14px 18px; }
  .case-card__stats > div{ flex:1 1 auto; min-width:80px; }
  .case-card__stats strong{ font-size:1.2rem; }
  .case-card__stats span{ font-size:.68rem; }
}
.case-card__text h3{ color:#fff; font-size:1.6rem; margin-bottom:12px; }
.case-card__text p{ color:#c7d2fe; line-height:1.6; margin-bottom:12px; font-size:.95rem; }
.case-card__why{ color:#fff !important; }
@media (max-width:560px){
  .case-card__text h3{ font-size:1.1rem; margin-bottom:8px; }
  .case-card__text p{ font-size:.82rem; line-height:1.5; margin-bottom:8px; }
}

/* ============================================================
   PROCESS — animated scroll timeline
============================================================= */
.process{ overflow:hidden; }
.process__timeline{ position:relative; max-width:900px; margin:0 auto; }

.process__spine{
  position:absolute; top:6px; bottom:6px; left:50%; width:3px; margin-left:-1.5px;
  background:var(--line); border-radius:3px; z-index:0; overflow:hidden;
}
.process__spine-fill{
  position:absolute; top:0; left:0; width:100%; height:0;
  background:linear-gradient(180deg,var(--brand),var(--brand-2));
  box-shadow:0 0 16px rgba(0,217,255,.55);
  transition:height .12s linear;
}

.process__steps{ position:relative; z-index:1; display:flex; flex-direction:column; }

.process__step{
  display:grid; grid-template-columns:1fr 64px 1fr; align-items:start; padding:22px 0;
  opacity:0; transform:translateY(32px); filter:blur(2px);
  transition:opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1), filter .7s ease;
}
.process__step.is-visible{ opacity:1; transform:none; filter:blur(0); }
.process__step--left{ grid-template-areas:"card node ."; }
.process__step--right{ grid-template-areas:". node card"; }

.process__node{
  grid-area:node; justify-self:center; align-self:start; margin-top:4px; position:relative;
  width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:2px solid var(--line); font-size:1.45rem;
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), background .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.process__step.is-visible .process__node{
  border-color:var(--brand);
  box-shadow:0 0 0 7px rgba(7,117,232,.12), 0 10px 24px -6px rgba(7,117,232,.35);
  transform:scale(1.1);
}
.process__node-badge{
  position:absolute; top:-6px; right:-6px; background:var(--ink); color:#fff; font-family:var(--font-display);
  font-size:.62rem; font-weight:700; width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--surface); z-index:2;
}

.process__card{
  grid-area:card; position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px 26px; overflow:hidden;
  transition: transform .35s cubic-bezier(.2,.6,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.process__step--left .process__card{ text-align:right; }
.process__card:hover{ transform:translateY(-5px); box-shadow:0 18px 34px -16px rgba(7,117,232,.32); border-color:rgba(7,117,232,.35); }
.process__card-num{
  position:absolute; top:-8px; right:14px; font-family:var(--font-display); font-size:3.6rem; font-weight:700;
  color:rgba(0,217,255,.13); line-height:1; z-index:0; pointer-events:none; user-select:none;
}
.process__step--left .process__card-num{ right:auto; left:14px; }
.process__card h3{ position:relative; font-size:1.15rem; margin-bottom:8px; }
.process__card p{ position:relative; color:var(--muted); font-size:.92rem; line-height:1.6; }

@media (max-width:760px){
  .process__spine{ left:27px; margin-left:0; }
  .process__step, .process__step--left, .process__step--right{
    grid-template-columns:54px 1fr; grid-template-areas:"node card"; padding:16px 0; column-gap:18px;
  }
  .process__step--left .process__card,
  .process__step--right .process__card{ text-align:left; }
  .process__node{ width:50px; height:50px; font-size:1.2rem; }
  .process__card-num, .process__step--left .process__card-num{ left:auto; right:12px; font-size:2.6rem; }
}
@media (prefers-reduced-motion: reduce){
  .process__step{ opacity:1; transform:none; filter:none; transition:none; }
  .process__node{ transition:none; }
}

/* ============================================================
   QUIZ / APPLY FORM
============================================================= */
.apply{ position:relative; overflow:hidden; }
.apply__inner{ position:relative; z-index:1; max-width:640px; margin:0 auto; }
.apply .quiz-card{
  background:var(--ink-2); border:1px solid rgba(255,255,255,.14);
  box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 40px 80px -24px rgba(0,217,255,.3);
}
.quiz-card{
  background:var(--ink); border-radius:var(--radius);
  padding:40px 36px; color:#fff;
  box-shadow: 0 30px 60px -20px rgba(11,18,41,.4);
}
@media (max-width:560px){ .quiz-card{ padding:28px 22px; } }

.quiz-progress{ height:4px; background:rgba(255,255,255,.12); border-radius:4px; overflow:hidden; margin-bottom:10px; }
.quiz-progress__bar{ height:100%; width:14.28%; background:linear-gradient(90deg,var(--brand),var(--brand-2)); transition: width .3s ease; }
.quiz-step-label{ font-size:.78rem; color:#94a3d9; margin-bottom:24px; }

.quiz-step{ display:none; }
.quiz-step.is-active{ display:flex; flex-direction:column; justify-content:center; height:100%; animation: fadeIn .25s ease; }
.quiz-step--success{ text-align:center; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

.quiz-steps{ min-height:340px; position:relative; }
@media (max-width:560px){ .quiz-steps{ min-height:380px; } }

.quiz-step h3{ font-size:1.25rem; margin-bottom:8px; }
.quiz-hint{ color:#94a3d9; font-size:.88rem; margin-bottom:18px; }

.quiz-options{ display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.quiz-option{
  text-align:left; padding:14px 18px; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  color:#fff; font-size:.95rem; cursor:pointer; transition:all .15s ease;
}
.quiz-option:hover{ border-color:var(--brand-2); background:rgba(255,255,255,.08); }
.quiz-option.is-selected{ border-color:var(--brand-2); background:rgba(0,217,255,.12); }

.quiz-textarea, .quiz-input{
  width:100%; padding:14px 16px; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  color:#fff; font-family:var(--font-body); font-size:.95rem;
  margin-top:18px; margin-bottom:12px;
}
.quiz-textarea::placeholder, .quiz-input::placeholder{ color:#7d89b3; }
.quiz-textarea:focus, .quiz-input:focus{ outline:none; border-color:var(--brand-2); }

.quiz-success-icon{
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(100deg,var(--brand),var(--brand-2));
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; margin:0 auto 18px; color:#04122b;
}
.quiz-step--success p{ color:#c7d2fe; margin-top:8px; line-height:1.6; }

.quiz-nav{ display:flex; justify-content:space-between; margin-top:28px; gap:12px; }
.quiz-btn{ padding:13px 22px; border-radius:100px; font-weight:600; font-size:.92rem; border:none; cursor:pointer; transition: all .15s ease; }
.quiz-btn--back{ background:transparent; color:#94a3d9; border:1px solid rgba(255,255,255,.15); }
.quiz-btn--back:hover{ color:#fff; border-color:#fff; }
.quiz-btn--next, .quiz-btn--submit{
  background:linear-gradient(100deg,var(--brand),var(--brand-2)); color:#04122b;
  margin-left:auto;
}
.quiz-btn--next:disabled{ opacity:.35; cursor:not-allowed; }
.quiz-btn--next:not(:disabled):hover, .quiz-btn--submit:hover{ transform:translateY(-2px); }
.quiz-btn--submit{ display:none; }

/* ============================================================
   FOOTER
============================================================= */
.footer{ background:var(--ink); color:#c7d2fe; padding:56px 24px 28px; text-align:center; }
.footer__logo{ height:64px; margin:0 auto 14px; }
.footer__tagline{ font-size:.92rem; margin-bottom:20px; }
.footer__links{ display:flex; justify-content:center; gap:22px; font-size:.9rem; margin-bottom:24px; }
.footer__links a{ text-decoration:none; color:#c7d2fe; opacity:.85; }
.footer__links a:hover{ opacity:1; color:#fff; }
.footer__copy{ font-size:.78rem; color:#7d89b3; }

/* ============================================================================================
   NX — ALTERNATE HOMEPAGE CONSTRUCTION (index.html only — automotive.html is untouched by this block)
   Namespaced "nx-" so nothing here can collide with the shared components above.
=============================================================================================== */

/* ---- scroll progress bar ---- */
.nx-progress{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:998;
  background:linear-gradient(90deg,var(--brand),var(--brand-2)); box-shadow:0 0 12px rgba(0,217,255,.6);
}

/* ---- reusable "magnetic" hover nudge ---- */
.magnetic{ transition: transform .25s cubic-bezier(.2,.8,.2,1); }

/* ============================================================
   NX TOPBAR
============================================================= */
.nx-topbar{
  position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:60;
  width:min(940px, calc(100% - 28px));
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:rgba(17,26,61,.6); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.1); border-radius:100px;
  padding:9px 9px 9px 20px;
  transition: padding .35s ease, background .35s ease, box-shadow .35s ease, top .35s ease, border-color .35s ease;
}
.nx-topbar.is-condensed{
  top:10px; padding:6px 6px 6px 18px;
  background:rgba(11,18,41,.88); box-shadow:0 20px 44px -20px rgba(0,0,0,.65); border-color:rgba(255,255,255,.14);
}
.nx-topbar__logo{ display:flex; align-items:center; flex-shrink:0; }
.nx-topbar__logo img{ height:30px; width:auto; display:block; }
.nx-topbar__links{ display:flex; align-items:center; gap:24px; font-size:.87rem; font-weight:500; }
.nx-topbar__links a{
  position:relative; text-decoration:none; color:var(--text); opacity:.68; padding:8px 0; transition:opacity .2s ease;
}
.nx-topbar__links a:hover{ opacity:1; }
.nx-topbar__links a.is-active{ opacity:1; }
.nx-topbar__links a.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
}
.nx-topbar__cta{
  flex-shrink:0; display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  background:linear-gradient(100deg,var(--brand),var(--brand-2)); color:#04122b; font-weight:700; font-size:.85rem;
  padding:11px 22px; border-radius:100px; transition: box-shadow .2s ease;
}
.nx-topbar__cta:hover{ box-shadow:0 12px 26px -8px rgba(0,217,255,.55); }

.nx-topbar__burger{
  display:none; width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05); align-items:center; justify-content:center; flex-direction:column; gap:4px;
  cursor:pointer; flex-shrink:0;
}
.nx-topbar__burger span{ width:15px; height:1.5px; background:var(--text); border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
.nx-topbar.is-menu-open .nx-topbar__burger span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.nx-topbar.is-menu-open .nx-topbar__burger span:nth-child(2){ opacity:0; }
.nx-topbar.is-menu-open .nx-topbar__burger span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

.nx-topbar__mobile{
  position:absolute; top:calc(100% + 10px); left:0; right:0;
  background:rgba(11,18,41,.96); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.1); border-radius:22px;
  padding:8px; display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.nx-topbar.is-menu-open .nx-topbar__mobile{ opacity:1; visibility:visible; transform:none; }
.nx-topbar__mobile a{ padding:14px 16px; border-radius:14px; text-decoration:none; color:var(--text); font-size:.95rem; font-weight:500; transition:background .15s; }
.nx-topbar__mobile a:hover{ background:rgba(255,255,255,.07); }

@media (max-width:760px){
  .nx-topbar__links{ display:none; }
  .nx-topbar__burger{ display:flex; }
  .nx-topbar{ padding:7px 7px 7px 18px; }
}

/* ============================================================
   NX HERO
============================================================= */
.nx-hero{
  position:relative; overflow:hidden; min-height:100vh;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:150px 24px 64px; text-align:center;
}
.nx-hero__glow{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.nx-hero__blob{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.4; }
.nx-hero__blob--1{ width:560px; height:560px; background:var(--brand); top:-200px; left:-160px; animation: blob-drift-a 18s ease-in-out infinite; }
.nx-hero__blob--2{ width:480px; height:480px; background:var(--brand-2); top:-40px; right:-180px; animation: blob-drift-b 22s ease-in-out infinite; }
.nx-hero__blob--3{ width:420px; height:420px; background:var(--brand); bottom:-220px; left:50%; margin-left:-210px; opacity:.28; animation: blob-drift-c 26s ease-in-out infinite; }

.nx-hero__eyebrow{ position:relative; z-index:1; }
.nx-hero__title{
  position:relative; z-index:1; font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.6rem, 6vw, 5.4rem); line-height:1.05; letter-spacing:-0.02em; max-width:12ch; margin:0 auto 26px;
}
@media (min-width:1100px){ .nx-hero__title{ max-width:9.5ch; } }
.nx-hero__sub{ position:relative; z-index:1; color:var(--muted); font-size:1.15rem; max-width:56ch; margin:0 auto 34px; line-height:1.6; }
@media (min-width:1100px){ .nx-hero__sub{ max-width:38ch; } }
.nx-hero__cta{ position:relative; z-index:1; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:18px; }
.nx-hero__note{ position:relative; z-index:1; color:var(--muted); font-size:.85rem; margin-bottom:54px; }

.nx-ticker{
  position:relative; z-index:1; width:100%; max-width:1040px; overflow:hidden;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 0;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.nx-ticker__track{ display:inline-flex; white-space:nowrap; width:max-content; animation: nx-ticker-scroll 24s linear infinite; }
.nx-ticker__item{
  font-family:var(--font-display); font-weight:600; font-size:1rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); display:inline-flex; align-items:center; gap:16px; padding:0 20px;
}
.nx-ticker__item em{ color:var(--brand-2); font-style:normal; }
@keyframes nx-ticker-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .nx-ticker__track{ animation:none; } }

.nx-hero__reel{
  position:relative; z-index:1; margin:44px auto 0; width:200px;
  --tx:0px; --ty:0px; transform:translate(var(--tx),var(--ty)) rotate(5deg);
  transition: transform .35s cubic-bezier(.2,.6,.2,1);
}
.nx-hero__reel .reel-stack, .nx-hero__reel .reel-card{ max-width:200px; }
@media (min-width:1100px){
  .nx-hero__reel{
    position:absolute; right:1%; top:54%; margin:0; width:340px;
    transform:translateY(-50%) translate(var(--tx),var(--ty)) rotate(5deg);
  }
  .nx-hero__reel .reel-stack, .nx-hero__reel .reel-card{ max-width:340px; }
}
@media (min-width:1400px){
  .nx-hero__reel{ right:6%; width:380px; }
  .nx-hero__reel .reel-stack, .nx-hero__reel .reel-card{ max-width:380px; }
}

.nx-hero__scroll{
  position:relative; z-index:1; margin-top:36px;
  display:inline-flex; flex-direction:column; align-items:center; gap:10px;
  text-decoration:none; color:var(--muted); font-size:.75rem; letter-spacing:.05em; text-transform:uppercase;
}
.nx-hero__scroll-dot-wrap{
  width:26px; height:42px; border:2px solid rgba(255,255,255,.28); border-radius:100px;
  display:flex; justify-content:center; padding-top:8px;
}
.nx-hero__scroll-dot{ width:4px; height:8px; border-radius:2px; background:var(--brand-2); animation: scroll-cue-bounce 1.6s ease-in-out infinite; }

@media (max-width:900px){ .nx-hero{ padding:120px 20px 48px; } }

/* ============================================================
   NX LOGOS — dual-direction marquee
============================================================= */
.nx-logos{ position:relative; padding:34px 0; overflow:hidden; background:rgba(7,117,232,.05); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.nx-logos__row{ overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.nx-logos__row + .nx-logos__row{ margin-top:20px; }
.nx-logos__track{ display:inline-flex; align-items:center; gap:44px; width:max-content; }
.nx-logos__track img{ height:34px; width:auto; max-width:130px; object-fit:contain; opacity:.7; transition:opacity .2s ease; }
.nx-logos__track img:hover{ opacity:1; }
.nx-logos__row--a .nx-logos__track{ animation: nx-logos-ltr 58s linear infinite; }
.nx-logos__row--b .nx-logos__track{ animation: nx-logos-rtl 52s linear infinite; }
@keyframes nx-logos-ltr{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes nx-logos-rtl{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@media (prefers-reduced-motion: reduce){ .nx-logos__track{ animation:none; } }

/* ============================================================
   NX GALLERY — horizontal drag-scroll services showcase
============================================================= */
.nx-gallery{ position:relative; overflow:hidden; }
.nx-gallery__glow{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.nx-gallery__blob{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.16; }
.nx-gallery__blob--1{ width:420px; height:420px; background:var(--brand); top:-120px; left:-80px; animation: blob-drift-a 19s ease-in-out infinite; }
.nx-gallery__blob--2{ width:380px; height:380px; background:var(--brand-2); bottom:-140px; right:-100px; animation: blob-drift-b 23s ease-in-out infinite; }

.nx-gallery__track{
  position:relative; z-index:1;
  display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x proximity; padding:14px 6vw 44px;
  scrollbar-width:none; -ms-overflow-style:none; cursor:grab; user-select:none;
}
.nx-gallery__track::-webkit-scrollbar{ display:none; }
.nx-gallery__track.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.nx-gallery__card{
  flex:0 0 min(320px,78vw); scroll-snap-align:start;
  background:var(--surface); border:1px solid var(--line); border-radius:24px;
  padding:32px 28px; position:relative; overflow:hidden; isolation:isolate;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.nx-gallery__card.is-active{ border-color:rgba(7,117,232,.4); box-shadow:0 30px 60px -26px rgba(7,117,232,.4); }
.nx-gallery__icon{
  position:relative; z-index:1; width:58px; height:58px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); margin-bottom:22px; box-shadow:0 14px 26px -10px rgba(7,117,232,.5); font-size:1.5rem;
}
.nx-gallery__card h3{ position:relative; z-index:1; font-size:1.15rem; margin-bottom:10px; }
.nx-gallery__card p{ position:relative; z-index:1; color:var(--muted); font-size:.92rem; line-height:1.6; }
.nx-gallery__card--addon{ background:var(--surface-2); border-style:dashed; border-color:rgba(7,117,232,.4); }

.nx-gallery__nav{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:18px; margin-top:4px; }
.nx-gallery__dots{ display:flex; gap:8px; }
.nx-gallery__dots button{ width:8px; height:8px; border-radius:50%; border:none; background:var(--line); cursor:pointer; transition:all .25s ease; padding:0; }
.nx-gallery__dots button.is-active{ background:linear-gradient(90deg,var(--brand),var(--brand-2)); width:24px; border-radius:6px; }

@media (max-width:560px){ .nx-gallery__nav{ display:none; } }

/* ---- desktop: a calm, static two-column layout — no scrolling, no clutter ---- */
@media (min-width:860px){
  .nx-gallery__track{
    display:grid; grid-template-columns:repeat(2, 1fr); gap:28px;
    max-width:900px; margin:0 auto;
    overflow-x:visible; scroll-snap-type:none; cursor:default; padding:14px 24px 8px;
  }
  .nx-gallery__card{
    flex:none; padding:44px 40px;
    transition: transform .35s cubic-bezier(.2,.6,.2,1), border-color .3s ease, box-shadow .3s ease;
  }
  .nx-gallery__card:hover{
    transform:translateY(-6px);
    border-color:rgba(7,117,232,.35);
    box-shadow:0 28px 50px -24px rgba(7,117,232,.35);
  }
  .nx-gallery__card.is-active{ border-color:var(--line); box-shadow:none; }
  .nx-gallery__icon{ width:64px; height:64px; font-size:1.7rem; margin-bottom:26px; }
  .nx-gallery__card h3{ font-size:1.3rem; margin-bottom:12px; }
  .nx-gallery__card p{ font-size:.98rem; line-height:1.65; }
  .nx-gallery__card--addon{
    grid-column:1 / -1; display:flex; align-items:center; gap:26px; padding:30px 40px;
  }
  .nx-gallery__card--addon .nx-gallery__icon{ margin-bottom:0; flex-shrink:0; }
  .nx-gallery__nav{ display:none; }
}

/* ============================================================
   NX JOURNEY — interactive process stepper (replaces vertical timeline)
============================================================= */
.nx-journey{ position:relative; overflow:hidden; }
.nx-journey__layout{ position:relative; z-index:1; max-width:1080px; margin:0 auto; display:grid; grid-template-columns:.82fr 1.18fr; gap:44px; align-items:stretch; }
@media (max-width:860px){ .nx-journey__layout{ grid-template-columns:1fr; } }

.nx-journey__list{ display:flex; flex-direction:column; gap:2px; }
.nx-journey__item{
  display:flex; align-items:center; gap:16px; padding:15px 18px; border-radius:14px; cursor:pointer;
  border:1px solid transparent; background:transparent; text-align:left; width:100%; font-family:inherit;
  transition: background .25s ease, border-color .25s ease;
}
.nx-journey__item:hover{ background:rgba(255,255,255,.03); }
.nx-journey__item.is-active{ background:rgba(7,117,232,.1); border-color:rgba(7,117,232,.3); }
.nx-journey__item-num{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--muted); width:28px; flex-shrink:0; }
.nx-journey__item.is-active .nx-journey__item-num{
  background:linear-gradient(100deg,var(--brand),var(--brand-2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.nx-journey__item-title{ font-family:var(--font-display); font-weight:600; font-size:.98rem; color:var(--text); }
.nx-journey__item-bar{ margin-left:auto; width:3px; height:0; border-radius:3px; background:linear-gradient(180deg,var(--brand),var(--brand-2)); transition:height .3s ease; flex-shrink:0; }
.nx-journey__item.is-active .nx-journey__item-bar{ height:22px; }

.nx-journey__panel{
  position:relative; background:var(--surface); border:1px solid var(--line); border-radius:28px;
  padding:44px 40px; overflow:hidden; display:flex; flex-direction:column; justify-content:center;
}
.nx-journey__panel-inner{ position:relative; z-index:1; animation: nx-panel-in .45s cubic-bezier(.2,.7,.2,1); }
@keyframes nx-panel-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.nx-journey__panel-icon{
  width:62px; height:62px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:1.7rem;
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); margin-bottom:22px; box-shadow:0 16px 30px -12px rgba(7,117,232,.5);
}
.nx-journey__panel-step{ font-family:var(--font-display); color:var(--brand-2); font-weight:700; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px; }
.nx-journey__panel h3{ font-size:1.6rem; margin-bottom:14px; }
.nx-journey__panel p{ color:var(--muted); font-size:1rem; line-height:1.7; max-width:56ch; }
.nx-journey__panel-num{ position:absolute; top:-24px; right:6px; font-family:var(--font-display); font-weight:700; font-size:7rem; color:rgba(0,217,255,.06); line-height:1; pointer-events:none; z-index:0; }

.nx-journey__panel-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:26px; position:relative; z-index:1; }
.nx-journey__dots{ display:flex; gap:6px; }
.nx-journey__dots span{ width:6px; height:6px; border-radius:50%; background:var(--line); transition:all .3s ease; }
.nx-journey__dots span.is-active{ background:var(--brand-2); width:20px; border-radius:4px; }

.nx-journey__panel-nav{ display:flex; gap:10px; flex-shrink:0; }
.nx-journey__arrow{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--surface);
  color:var(--text); font-size:1rem; cursor:pointer; transition:all .2s ease; flex-shrink:0;
}
.nx-journey__arrow:hover{ background:var(--brand); border-color:var(--brand); color:#fff; transform:scale(1.08); }

@media (max-width:860px){
  .nx-journey__panel{ padding:30px 24px; }
  .nx-journey__panel-icon{ width:50px; height:50px; font-size:1.4rem; margin-bottom:16px; }
  .nx-journey__panel h3{ font-size:1.25rem; margin-bottom:10px; }
  .nx-journey__panel p{ font-size:.92rem; line-height:1.6; }
  .nx-journey__panel-num{ font-size:4.5rem; top:-10px; }
  .nx-journey__item{ padding:12px 14px; }
}
@media (max-width:560px){
  .nx-journey__panel{ padding:26px 20px; }
}

/* ============================================================
   NX CONSULT — apply-form section wrapper (keeps .quiz-* internals)
============================================================= */
.nx-consult{ position:relative; overflow:hidden; }
.nx-consult__inner{ position:relative; z-index:1; max-width:1100px; margin:0 auto; display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; }
@media (max-width:900px){ .nx-consult__inner{ grid-template-columns:1fr; gap:36px; } }
.nx-consult__copy h2{ font-size:var(--fs-h2); margin-bottom:16px; }
.nx-consult__copy p{ color:var(--muted); font-size:1.05rem; line-height:1.65; max-width:44ch; }

/* ============================================================
   NX FOOTER
============================================================= */
.nx-footer{ position:relative; overflow:hidden; background:var(--ink); padding:100px 24px 40px; text-align:center; }
.nx-footer__cta{ position:relative; z-index:1; font-size:clamp(2rem,5vw,3.4rem); margin-bottom:40px; }
.nx-footer__logo{ position:relative; z-index:1; height:52px; margin:0 auto 18px; }
.nx-footer__links{ position:relative; z-index:1; display:flex; justify-content:center; gap:14px; margin-bottom:32px; flex-wrap:wrap; }
.nx-footer__links a{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--text);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); padding:11px 22px; border-radius:100px;
  font-size:.9rem;
}
.nx-footer__links a:hover{ border-color:var(--brand-2); background:rgba(0,217,255,.08); }
.nx-footer__copy{ position:relative; z-index:1; font-size:.78rem; color:#7d89b3; }

/* Accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }