/* acnetech */

:root{
  --c-ink:       #091F5B;
  --c-blue:      #344EAD;
  --c-haze:      #B0D6F9;
  --c-parch:     #F9F2E8;
  --c-paper:    #F9F9F9;
  --c-beige:    #E8DFCE;
  --c-mist:     #EFEFEF;
  --c-text:    #1E1E2E;
  --c-text-2:  #5b5b6b;

  --f-display: "Funnel Display","Manrope",system-ui,sans-serif;
  --f-body:    "Manrope","Inter",system-ui,sans-serif;
  --f-mono:    "Geist Mono","JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;

  --r-xs: 6px;  --r-s: 10px;  --r-m: 16px;  --r-l: 22px;  --r-xl: 28px;
  --shadow-1: 0 1px 0 rgba(9,31,91,.04), 0 6px 24px -8px rgba(9,31,91,.18);
  --shadow-2: 0 1px 0 rgba(9,31,91,.05), 0 18px 60px -12px rgba(9,31,91,.32);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,.84,.34,1);

  --w-max: 1240px;
  --pad-x: clamp(20px, 4vw, 56px);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
}
body{
  font-family: var(--f-body);
  color: var(--c-text);
  background: var(--c-paper);
  font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  width: 100%;
  position: relative;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font: inherit; }
::selection{ background: var(--c-ink); color: var(--c-paper); }

.skip-link{ position:absolute; left:-9999px; }
.skip-link:focus{ left:16px; top:16px; background:var(--c-ink); color:#fff; padding:10px 14px; border-radius:8px; z-index:1000; }

/* ---------- typography ---------- */
.display{
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(40px, 7.4vw, 108px);
  line-height: .96;
  letter-spacing: -.025em;
  margin: 0 0 24px;
  color: var(--c-ink);
}
.display .line{ display:block; overflow:hidden; }
.display .word{ display:inline-block; will-change: transform, opacity; }
.display .ink{
  background: linear-gradient(105deg, var(--c-ink) 0%, var(--c-blue) 55%, var(--c-ink) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: shine 7s linear infinite;
}
@keyframes shine{ to{ background-position: -220% 0; } }

.h2{
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 56px);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 0 0 14px;
  color: var(--c-ink);
}
.h2 .ink{ color: var(--c-blue); font-style: italic; font-weight: 600; }

.lede{
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--c-text);
  max-width: 56ch;
  margin: 0 0 24px;
}
.muted{ color: var(--c-text-2); }
.footnote{ font-family: var(--f-mono); font-size: 11px; letter-spacing: .02em; color: var(--c-text-2); margin: 12px 0 0; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-blue);
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(176,214,249,.42);
  border: 1px solid rgba(52,78,173,.18);
  margin-bottom: 18px;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background: var(--c-blue); animation: pulse 1.6s ease-in-out infinite; }
.eyebrow--center{ display:inline-flex; }
@keyframes pulse{ 50%{ box-shadow:0 0 0 6px rgba(52,78,173,.18);} }

.section__head{
  text-align:center;
  max-width: 880px;
  margin: 0 auto clamp(40px, 7vw, 80px);
  padding: 0 var(--pad-x);
}
.tm{ font-size: .55em; vertical-align: super; letter-spacing: 0; font-weight: 500; opacity:.9; }

/* ---------- buttons ---------- */
.cta{
  position:relative;
  display: inline-flex; align-items:center; gap:10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--f-mono); font-size: 13px; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
  cursor: pointer; border: 1px solid transparent;
  white-space: nowrap;
}
.cta--solid{ background: var(--c-ink); color: var(--c-paper); box-shadow: 0 8px 24px -10px rgba(9,31,91,.6), inset 0 1px 0 rgba(255,255,255,.08); }
.cta--solid:hover{ transform: translateY(-2px); background: var(--c-blue); box-shadow: 0 14px 30px -10px rgba(9,31,91,.55); }
.cta--ghost{ background: rgba(255,255,255,.55); color: var(--c-ink); border-color: rgba(9,31,91,.18); backdrop-filter: blur(8px); }
.cta--ghost:hover{ background: var(--c-ink); color: var(--c-paper); transform: translateY(-2px); }
.cta--big{ padding: 18px 28px; font-size: 14px; }

/* stage */
.stage{
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
  width: 100vw; height: 100vh; height: 100svh;
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(176,214,249,.6), transparent 60%),
    radial-gradient(900px 600px at -10% 60%, rgba(232,223,206,.6), transparent 60%),
    var(--c-paper);
}
.stage canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.stage__grain{
  position:absolute; inset:0;
  background-image:
    repeating-radial-gradient(circle at 12% 24%, rgba(9,31,91,.025) 0 1px, transparent 1px 4px),
    repeating-radial-gradient(circle at 70% 70%, rgba(52,78,173,.02) 0 1px, transparent 1px 5px);
  mix-blend-mode: multiply; opacity:.7;
}
.stage__vignette{ position:absolute; inset:0; background: radial-gradient(ellipse at center, transparent 50%, rgba(9,31,91,.06) 100%); }

/* nav */
.nav{
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  display:flex; align-items:center; gap: clamp(12px, 2vw, 28px);
  padding: 10px 14px 10px 18px;
  border-radius: 999px;
  background: rgba(249,249,249,.78);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(9,31,91,.08);
  box-shadow: var(--shadow-1);
  z-index: 50;
  max-width: calc(100vw - 24px);
}
.nav__brand{ display:flex; align-items:center; gap:10px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; color: var(--c-ink); }
.nav__brand em{ font-style: normal; opacity:.4; }
.nav__brand strong{ font-weight: 600; }
.nav__links{ display:flex; gap: 22px; }
.nav__links a{ font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; color: var(--c-text); text-transform: uppercase; transition: color .25s; }
.nav__links a:hover{ color: var(--c-blue); }
.nav__cta{ padding: 9px 14px; font-size: 11px; }
@media (max-width: 820px){ .nav__links{ display:none; } }

/* hero */
.hero{
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(110px, 14vh, 160px) var(--pad-x) clamp(60px, 8vh, 100px);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 4vw, 80px);
  align-items: center;
  z-index: 1;
}
.hero__bg{ position:absolute; inset:0; pointer-events:none; z-index:-1; overflow:hidden; }
.hero__bg .orb{ position:absolute; width: 70vmin; height: 70vmin; filter: blur(10px); opacity:.9; }
.hero__bg .orb--a{ top: -10vmin; right: -10vmin; animation: drift1 22s ease-in-out infinite alternate; }
.hero__bg .orb--b{ bottom: -25vmin; left: -10vmin; animation: drift2 28s ease-in-out infinite alternate; }
@keyframes drift1{ to{ transform: translate3d(-30px,30px,0) scale(1.08);} }
@keyframes drift2{ to{ transform: translate3d(40px,-20px,0) scale(1.1);} }

.hero__copy{ position: relative; }
.hero__ctaRow{ display:flex; flex-wrap:wrap; gap: 12px; margin-top: 6px; }

.trustline{
  list-style:none; padding:0; margin: 26px 0 0;
  display:flex; flex-wrap: wrap; gap: 14px 22px;
}
.trustline li{
  display:flex; align-items:center; gap:8px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em;
  color: var(--c-blue); text-transform: uppercase;
}

/* hero product 3D tube — CSS 3D card */
.hero__product{
  position: relative;
  perspective: 1600px;
  aspect-ratio: 1/1.05;
  display:grid; place-items:center;
}
.tube{
  position: relative;
  width: min(86%, 520px);
  aspect-ratio: 1/1;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx,-6deg)) rotateY(var(--ry,18deg));
  transition: transform .15s linear;
  will-change: transform;
}
.tube__face{
  position: absolute; inset: 0;
  border-radius: var(--r-l);
  overflow: hidden;
  backface-visibility: hidden;
}
.tube__face img{
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 30px 50px rgba(9,31,91,.25));
}
.tube__face--front{ transform: translateZ(40px); background: linear-gradient(180deg, transparent, rgba(176,214,249,.18)); }
.tube__face--back { transform: translateZ(-40px) rotateY(180deg); }
.tube__face--left { transform: rotateY(-90deg) translateZ(40px); width: 80px; left: -40px;
  background: linear-gradient(90deg, #091F5B 0%, #344EAD 100%); border-radius: 0; }
.tube__face--right{ transform: rotateY( 90deg) translateZ(40px); width: 80px; right: -40px;
  background: linear-gradient(-90deg, #091F5B 0%, #344EAD 100%); border-radius: 0; }
.tube__shadow{
  position:absolute; left: 8%; right: 8%; bottom: -4%;
  height: 60px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(9,31,91,.35), transparent 60%);
  filter: blur(14px);
  transform: translateZ(-60px);
}
.tube__halo{
  position:absolute; inset: -18%;
  background: conic-gradient(from 0turn, transparent 0 35%, rgba(176,214,249,.7) 50%, transparent 65% 100%);
  filter: blur(40px); opacity:.55;
  border-radius: 50%;
  animation: halo 12s linear infinite;
  z-index:-1;
}
@keyframes halo{ to{ transform: rotate(1turn); } }

.hero__hint{
  position:absolute; bottom: 12px; right: 12px;
  display:flex; align-items:center; gap:8px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-blue); opacity:.7;
}
.hero__hint svg{ animation: spin 6s linear infinite; }
@keyframes spin{ to{ transform: rotate(1turn); } }

@media (max-width: 920px){
  .hero{ grid-template-columns: 1fr; padding-top: 130px; }
  .hero__product{ order: -1; aspect-ratio: 1/1; }
  .trustline{ font-size: 10px; }
}

/* pain */
.pain{
  position: relative;
  min-height: 240vh;
  padding: 0 var(--pad-x);
  z-index: 1;
  overflow: clip;
}
.pain__deck{
  position: sticky;
  top: 0;
  height: 100vh; height: 100svh;
  display: grid; place-items: center;
  perspective: 1200px;
  transform-style: preserve-3d;
  overflow: hidden;
}
.pain__phrase{
  position: absolute;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(28px, 5.4vw, 76px);
  letter-spacing: -.02em;
  line-height: 1.04;
  color: var(--c-ink);
  text-align: center;
  margin: 0;
  max-width: min(92vw, 980px);
  padding: 0 8px;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  opacity: 0;
}
/* first phrase visible on entry as fallback before JS wires up */
.pain__phrase:first-child{ opacity: 1; }
.js-ready .pain__phrase{ /* let JS take over */ }
.pain__phrase--accent{ color: var(--c-blue); font-style: italic; font-weight: 600; }
.pain__phrase--brand{
  background: linear-gradient(105deg, var(--c-ink), var(--c-blue));
  -webkit-background-clip:text; background-clip:text; color: transparent;
  font-size: clamp(56px, 12vw, 180px);
  letter-spacing: -.04em;
}
.pain__phrase--brand .tm{ background: none; -webkit-text-fill-color: var(--c-blue); color: var(--c-blue); }

/* before */
.ba{
  position: relative; z-index: 1;
  min-height: 180vh;
  padding: 0;
  overflow: hidden;
}

/* zoom */
.zoom{
  position: relative; z-index: 1;
  min-height: 200vh;
  overflow: clip;
}
.zoom__stage{
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  min-height: 580px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center; justify-items: center;
  gap: clamp(14px, 2vh, 24px);
  overflow: hidden;
  padding: clamp(80px, 10vh, 120px) var(--pad-x) clamp(28px, 4vh, 48px);
}
.zoom__crop{
  position: relative;
  align-self: center;
  width: min(68vw, 440px);
  aspect-ratio: 1 / 1;
  max-height: 52vh;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 40px 100px -20px rgba(9,31,91,.45);
  background: var(--c-paper);
  transform: scale(var(--z, 1)) translate3d(var(--tx,0px), var(--ty,0px), 0);
  transform-origin: center center;
  will-change: transform;
  transition: transform .12s linear;
  z-index: 1;
}
@media (max-width: 720px){
  .zoom__crop{ width: min(78vw, 360px); max-height: 46vh; }
}
.zoom__crop img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  transform: scale(1.02);
}
.zoom__rings{
  position:absolute; inset: -2%;
  pointer-events: none;
}
.zoom__rings::before,
.zoom__rings::after{
  content:""; position:absolute; inset: 0;
  border: 1.5px dashed rgba(52,78,173,.5);
  border-radius: 50%;
  animation: zoomRing 16s linear infinite;
}
.zoom__rings::after{ inset: 4%; border-color: rgba(176,214,249,.65); animation-direction: reverse; animation-duration: 24s; }
@keyframes zoomRing{ to{ transform: rotate(1turn); } }

.zoom__labels{
  position: absolute; inset: 0; pointer-events: none;
}
.zoom__pin{
  position: absolute;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 12px; border-radius: 999px;
  background: rgba(9,31,91,.88); color: var(--c-paper);
  white-space: nowrap;
  opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.zoom__pin.is-in{ opacity: 1; transform: none; }
.zoom__pin--top   { top: 8%;  left: 50%; transform: translateX(-50%) translateY(10px); }
.zoom__pin--top.is-in   { transform: translateX(-50%); }
.zoom__pin--left  { top: 50%; left: 4%; transform: translateY(10px); }
.zoom__pin--right { top: 50%; right: 4%; }
.zoom__pin--bot   { bottom: 6%; left: 50%; transform: translateX(-50%) translateY(10px); }
.zoom__pin--bot.is-in{ transform: translateX(-50%); }
.zoom__pin i{ display:inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--c-haze); margin-right: 6px; vertical-align: middle; }

.zoom__caption{
  position: relative;
  align-self: start;
  justify-self: center;
  text-align: center;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-blue);
  z-index: 3;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(249,249,249,.85);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid rgba(9,31,91,.1);
  max-width: 92vw;
}
.zoom__caption b{
  display:block;
  font-family: var(--f-display); font-weight: 700; font-size: clamp(20px, 3vw, 34px); letter-spacing: -.02em;
  color: var(--c-ink); margin-top: 3px; line-height: 1.1;
}
.zoom__labels{
  position: relative;
  align-self: end; justify-self: center;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  max-width: min(92vw, 720px);
  inset: auto;
}
.zoom__labels .zoom__pin{
  position: static;
  top: auto; left: auto; right: auto; bottom: auto;
  transform: translateY(8px);
}
.zoom__labels .zoom__pin.is-in{ transform: none; }

/* hero magnifier loupe */
.loupe{
  position: absolute;
  width: 180px; height: 180px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.9);
  box-shadow: 0 12px 40px -10px rgba(9,31,91,.45), inset 0 0 0 1px rgba(9,31,91,.15);
  pointer-events: none;
  background-repeat: no-repeat;
  background-color: var(--c-paper);
  opacity: 0; transform: scale(.6);
  transition: opacity .2s, transform .25s var(--ease-out);
  z-index: 4;
  mix-blend-mode: normal;
}
.loupe.is-on{ opacity: 1; transform: scale(1); }
.loupe::after{
  content:"";
  position:absolute; inset:0;
  border-radius:50%;
  box-shadow: inset 0 0 30px rgba(9,31,91,.18);
}
@media (pointer: coarse){ .loupe{ display:none; } }
.ba__stage{
  position: relative;
  height: 180vh;
}
.ba__pinwrap{
  position: sticky;
  top: 0;
  height: 100vh; height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(14px, 2vh, 24px);
  padding: clamp(70px, 8vh, 110px) var(--pad-x) clamp(20px, 4vh, 40px);
  perspective: 1800px;
}
.ba__card{
  position: relative;
  width: min(82vw, 560px);
  aspect-ratio: 1/1;
  max-height: 64vh;
  border-radius: var(--r-xl);
  transform-style: preserve-3d;
  transform: rotateY(var(--baR, 0deg));
  box-shadow: var(--shadow-2);
  will-change: transform;
}
.ba__scrollhint{
  display:flex; align-items: center; gap: 14px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-blue);
}
.ba__degbadge{
  display:inline-flex; align-items: baseline; gap: 1px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--c-ink); color: var(--c-paper);
  font-family: var(--f-display); font-size: 16px; font-weight: 700; letter-spacing: -.02em;
  min-width: 64px; justify-content: center;
}
.ba__degbadge b{ font-variant-numeric: tabular-nums; }
.ba__nudge{ opacity: .8; animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge{ 0%,100%{ transform: translateY(0); opacity: .8; } 50%{ transform: translateY(3px); opacity: 1; } }
.ba__face{
  position: absolute; inset:0;
  border-radius: var(--r-xl);
  overflow: hidden;
  backface-visibility: hidden;
}
.ba__face img{ width:100%; height:100%; object-fit: cover; }
.ba__face--before{ background: linear-gradient(135deg, var(--c-haze), var(--c-paper)); }
.ba__face--after { background: linear-gradient(135deg, var(--c-paper), var(--c-beige)); transform: rotateY(180deg); }
.ba__pin{
  position: absolute; left: 20px; top: 20px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em;
  padding: 8px 12px; border-radius: 999px;
  background: rgba(9,31,91,.86); color: var(--c-paper);
  backdrop-filter: blur(6px);
}
.ba__pin--alt{ background: rgba(176,214,249,.95); color: var(--c-ink); }

/* legacy ba range slider removed — replaced by scrollytelling */

/* science */
.sci{
  position: relative; z-index: 1;
  padding: clamp(80px, 12vh, 140px) var(--pad-x);
  max-width: var(--w-max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.sci__stats{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0 0; padding:0; }
.sci__stats div{
  background: rgba(255,255,255,.55); backdrop-filter: blur(6px);
  border: 1px solid rgba(9,31,91,.08);
  border-radius: var(--r-m); padding: 18px;
}
.sci__stats dt{
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px);
  color: var(--c-ink); line-height: 1; letter-spacing: -.02em;
}
.sci__stats dd{ font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-2); margin: 6px 0 0; }

.sci__visual{
  position: relative;
  aspect-ratio: 1/1;
  display:grid; place-items:center;
}
.sci__photo{
  position: relative;
  width: 100%; max-width: 480px;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
  z-index: 1;
}

/* orbit rings (cylindrical animation) */
.orbit{
  position: absolute; inset: -8%;
  pointer-events: none;
  display:grid; place-items: center;
}
.orbit__ring{
  position:absolute; border-radius: 50%;
  border: 1px dashed rgba(52,78,173,.45);
  transform-style: preserve-3d;
}
.orbit__ring--1{ width: 60%; height: 60%; transform: rotateX(72deg); animation: ring 14s linear infinite; }
.orbit__ring--2{ width: 78%; height: 78%; transform: rotateX(64deg) rotateZ(15deg); animation: ring 22s linear infinite reverse; }
.orbit__ring--3{ width: 96%; height: 96%; transform: rotateX(56deg) rotateZ(-30deg); animation: ring 32s linear infinite; }
.orbit__ring .atom{
  position:absolute; top: 50%; left: -6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--c-blue);
  box-shadow: 0 0 24px var(--c-blue), 0 0 4px var(--c-paper) inset;
}
.orbit__ring--2 .atom:nth-child(2){ left: auto; right: -6px; background: var(--c-ink); }
.orbit__ring--3 .atom:nth-child(2){ left: 50%; top: -6px; background: var(--c-haze); box-shadow: 0 0 24px var(--c-haze); }
.orbit__ring--3 .atom:nth-child(3){ left: 50%; bottom: -6px; top: auto; background: var(--c-blue); }
.orbit__nucleus{
  position:absolute; display:grid; place-items:center;
  animation: nucleus 6s ease-in-out infinite alternate;
}
@keyframes ring{ to{ transform: rotateX(72deg) rotateZ(360deg); } }
@keyframes nucleus{ to{ transform: scale(1.18); } }

@media (max-width: 820px){
  .sci{ grid-template-columns: 1fr; }
  .sci__visual{ order: -1; }
}

/* glyph */
.pillars{
  position: relative; z-index: 1;
  padding: clamp(80px, 12vh, 140px) var(--pad-x);
  max-width: var(--w-max); margin: 0 auto;
}
.pillars__grid{
  list-style: none; padding:0; margin:0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.pillar{
  position: relative;
  padding: 28px 24px 26px;
  background: var(--c-paper);
  border: 1px solid rgba(9,31,91,.08);
  border-radius: var(--r-l);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
  will-change: transform;
  overflow: hidden;
}
.pillar::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(450px 200px at var(--mx,50%) var(--my,0%), rgba(176,214,249,.55), transparent 60%);
  opacity: 0; transition: opacity .4s;
  pointer-events: none;
}
.pillar:hover{ transform: translateY(-6px); box-shadow: var(--shadow-2); border-color: rgba(52,78,173,.25); }
.pillar:hover::before{ opacity: 1; }
.pillar__glyph{
  width: 76px; height: 76px;
  margin-bottom: 18px;
  border-radius: 18px;
  display:grid; place-items:center;
  background: linear-gradient(180deg, var(--c-haze) 0%, rgba(176,214,249,0) 100%);
  border: 1px solid rgba(52,78,173,.18);
}
.pillar__glyph svg{ width: 50px; height: 50px; transition: transform .8s var(--ease); }
.pillar:hover .pillar__glyph svg{ transform: rotate(8deg) scale(1.05); }
.pillar h3{ font-family: var(--f-display); font-size: 22px; letter-spacing: -.01em; line-height: 1.15; color: var(--c-ink); margin: 0 0 8px; }
.pillar p{ font-size: 14.5px; color: var(--c-text-2); margin: 0; }

@media (max-width: 920px){ .pillars__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .pillars__grid{ grid-template-columns: 1fr; } }

/* brand */
.ticker{
  position: relative; z-index: 1;
  overflow: hidden;
  border-top: 1px solid rgba(9,31,91,.1);
  border-bottom: 1px solid rgba(9,31,91,.1);
  padding: 22px 0;
  background:
    linear-gradient(180deg, rgba(176,214,249,.18) 0%, rgba(176,214,249,0) 100%),
    var(--c-paper);
}
.ticker__track{
  display: inline-flex; gap: 28px;
  white-space: nowrap;
  animation: ticker 32s linear infinite;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(22px, 3vw, 38px);
  letter-spacing: -.01em;
  color: var(--c-ink);
}
.ticker__track span:nth-child(even){ color: var(--c-blue); }
@keyframes ticker{ to{ transform: translateX(-50%); } }

/* how */
.how{
  position: relative; z-index: 1;
  padding: clamp(80px, 12vh, 140px) var(--pad-x);
  max-width: var(--w-max); margin: 0 auto;
}
.how__steps{
  list-style: none; padding:0; margin:0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  counter-reset: step;
}
.how__step{
  position: relative;
  padding: 28px 24px 30px;
  border-radius: var(--r-l);
  background: linear-gradient(180deg, var(--c-paper) 0%, var(--c-mist) 100%);
  border: 1px solid rgba(9,31,91,.06);
}
.how__num{ display:inline-flex; color: var(--c-blue); margin-bottom: 14px; }
.how__step h3{ font-family: var(--f-display); font-size: 22px; color: var(--c-ink); margin: 0 0 6px; letter-spacing: -.01em; }
.how__step p{ margin: 0; font-size: 14.5px; color: var(--c-text); }
.how__warn{
  margin: 28px 0 0;
  padding: 16px 20px;
  background: var(--c-parch);
  border: 1px dashed rgba(9,31,91,.18);
  border-radius: var(--r-m);
  font-size: 13px; color: var(--c-text-2); font-family: var(--f-mono); line-height: 1.6;
}
.how__warn b{ font-family: var(--f-body); color: var(--c-ink); }

@media (max-width: 820px){ .how__steps{ grid-template-columns: 1fr; } }

/* counters */
.counters{
  position: relative; z-index: 1;
  padding: clamp(60px, 8vh, 100px) var(--pad-x);
  max-width: var(--w-max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.counter{
  text-align: center;
  padding: 26px 14px;
  background: linear-gradient(180deg, rgba(176,214,249,.2), transparent);
  border: 1px solid rgba(9,31,91,.08);
  border-radius: var(--r-m);
}
.counter b{
  display:block; font-family: var(--f-display); font-weight: 700;
  font-size: clamp(34px, 4.4vw, 56px); color: var(--c-ink);
  letter-spacing: -.02em; line-height: 1;
}
.counter span{ font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; color: var(--c-text-2); text-transform: uppercase; }
@media (max-width: 820px){ .counters{ grid-template-columns: repeat(2,1fr); } }

/* buy */
.buy{
  position: relative; z-index: 1;
  padding: clamp(80px, 12vh, 140px) var(--pad-x);
}
.buy__panel{
  max-width: var(--w-max);
  margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(20px, 4vw, 60px);
  align-items: center;
  padding: clamp(28px, 4vw, 56px);
  border-radius: var(--r-xl);
  background:
    radial-gradient(700px 400px at 100% 0%, rgba(176,214,249,.55), transparent 60%),
    linear-gradient(180deg, var(--c-paper), var(--c-mist));
  border: 1px solid rgba(9,31,91,.08);
  box-shadow: var(--shadow-2);
}
.buy__media{ position: relative; aspect-ratio: 1/1; display:grid; place-items:center; }
.buy__media img{ max-width: 90%; filter: drop-shadow(0 30px 50px rgba(9,31,91,.3)); animation: float 6s ease-in-out infinite; }
@keyframes float{ 50%{ transform: translateY(-12px) rotate(-2deg); } }
.buy__priceRow{ display:flex; align-items: baseline; gap: 14px; margin: 6px 0 22px; flex-wrap: wrap; }
.buy__price{ font-family: var(--f-display); font-weight: 700; font-size: clamp(40px, 5vw, 64px); color: var(--c-ink); letter-spacing: -.02em; line-height: 1; }
.buy__priceMeta{ font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-2); }
.buy__bullets{ list-style:none; padding:0; margin: 18px 0 0; display: grid; gap: 10px; }
.buy__bullets li{ display:flex; align-items:center; gap: 10px; font-size: 14px; color: var(--c-text); }
.buy__bullets li svg{ color: var(--c-blue); flex: none; }

@media (max-width: 820px){ .buy__panel{ grid-template-columns: 1fr; } }

/* faq */
.faq{ position: relative; z-index: 1; padding: clamp(80px, 12vh, 140px) var(--pad-x); max-width: 940px; margin: 0 auto; }
.faq__list{ display: grid; gap: 12px; }
.qa{
  background: var(--c-paper);
  border: 1px solid rgba(9,31,91,.08);
  border-radius: var(--r-m);
  padding: 4px 22px;
  transition: border-color .3s, background .3s;
}
.qa[open]{ border-color: rgba(52,78,173,.3); background: var(--c-parch); }
.qa summary{
  list-style: none;
  display:flex; align-items: center; justify-content: space-between; gap: 16px;
  cursor: pointer;
  padding: 18px 0;
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(17px, 1.5vw, 21px);
  color: var(--c-ink);
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary i{
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--c-ink); position: relative; flex: none;
  transition: transform .35s var(--ease), background .35s;
}
.qa summary i::before,
.qa summary i::after{
  content: ""; position: absolute; inset: 0;
  margin: auto; background: var(--c-paper);
}
.qa summary i::before{ width: 10px; height: 2px; top: 0; bottom: 0; }
.qa summary i::after{  width: 2px; height: 10px; left: 0; right: 0; transition: transform .35s; }
.qa[open] summary i{ background: var(--c-blue); transform: rotate(180deg); }
.qa[open] summary i::after{ transform: scaleY(0); }
.qa p{ margin: 0 0 18px; color: var(--c-text-2); font-size: 15px; line-height: 1.65; max-width: 70ch; }

/* footer */
.foot{
  position: relative; z-index: 1;
  padding: 60px var(--pad-x) 120px;
  border-top: 1px solid rgba(9,31,91,.08);
  background: linear-gradient(180deg, transparent, rgba(232,223,206,.4));
}
.foot__row{ max-width: var(--w-max); margin: 0 auto; display:grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: start; }
.foot__brand{ display:flex; align-items:center; gap: 10px; font-family: var(--f-mono); font-size: 13px; color: var(--c-ink); }
.foot__brand em{ font-style: normal; opacity:.4; }
.foot__legal{ font-family: var(--f-mono); font-size: 11px; color: var(--c-text-2); margin: 0; max-width: 70ch; line-height: 1.65; }
.foot__legal b{ color: var(--c-ink); font-family: var(--f-body); }
.foot__links{ display:flex; flex-wrap: wrap; gap: 14px; justify-content: end; }
.foot__links a{ font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text); }
.foot__links a:hover{ color: var(--c-blue); }
@media (max-width: 820px){ .foot__row{ grid-template-columns: 1fr; } .foot__links{ justify-content: start; } }

/* sticky */
.dock{
  position: fixed; left: 50%; bottom: 14px;
  transform: translate(-50%, 200%);
  display:flex; align-items:center; gap: 14px;
  padding: 8px 10px 8px 12px;
  background: rgba(249,249,249,.92);
  backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(9,31,91,.1);
  border-radius: 999px;
  box-shadow: var(--shadow-2);
  z-index: 60;
  max-width: calc(100vw - 24px);
  transition: transform .55s var(--ease);
}
.dock.is-shown{ transform: translate(-50%, 0); }
.dock img{ width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--c-mist); }
.dock__copy{ display:flex; flex-direction: column; line-height: 1.15; padding-right: 4px; }
.dock__copy b{ font-family: var(--f-display); font-size: 13px; color: var(--c-ink); font-weight: 700; }
.dock__copy span{ font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--c-text-2); }
.dock .cta{ padding: 10px 14px; font-size: 11px; }
@media (max-width: 480px){ .dock__copy span{ display:none; } }

/* ---------- reveal helpers ---------- */
.reveal{ opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); will-change: opacity, transform; }
.reveal.is-in{ opacity: 1; transform: none; }
.reveal--up   { transform: translateY(40px); }
.reveal--down { transform: translateY(-30px); }
.reveal--left { transform: translateX(40px); }
.reveal--right{ transform: translateX(-40px); }
.reveal.is-in.reveal--up,
.reveal.is-in.reveal--down,
.reveal.is-in.reveal--left,
.reveal.is-in.reveal--right{ transform: none; }

/* hero words mask */
.display .word{ opacity: 0; transform: translateY(110%) rotate(2deg); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--d, 0s); }
.display.is-in .word{ opacity: 1; transform: none; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
  html{ scroll-behavior: auto; }
}

/* ============================================================
   LEAD CAPTURE MODAL — 15% FLAT OFF
   ============================================================ */
.lead{
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: clamp(16px, 3vw, 32px);
  opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ease);
}
.lead.is-open{ opacity: 1; pointer-events: auto; }
.lead__scrim{
  position: absolute; inset: 0;
  background: rgba(9,31,91,.55);
  backdrop-filter: blur(6px) saturate(1.2);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
}
.lead__panel{
  position: relative; z-index: 1;
  width: min(100%, 880px);
  display: grid; grid-template-columns: .9fr 1.1fr;
  background: var(--c-paper);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(9,31,91,.55);
  transform: scale(.94) translateY(20px);
  transition: transform .55s var(--ease-out);
}
.lead.is-open .lead__panel{ transform: none; }
.lead__x{
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  display:grid; place-items:center;
  background: rgba(255,255,255,.7); color: var(--c-ink);
  border: 1px solid rgba(9,31,91,.12);
  cursor: pointer; z-index: 2;
  transition: background .25s, transform .25s;
}
.lead__x:hover{ background: var(--c-ink); color: var(--c-paper); transform: rotate(90deg); }

.lead__art{
  position: relative;
  background:
    radial-gradient(800px 600px at 30% 30%, rgba(176,214,249,.9), transparent 70%),
    linear-gradient(160deg, var(--c-paper), var(--c-beige));
  display:grid; place-items:center;
  overflow: hidden;
}
.lead__art svg{ width: 80%; max-width: 320px; height: auto; animation: leadOrbit 12s ease-in-out infinite alternate; }
@keyframes leadOrbit{ to{ transform: rotate(8deg) scale(1.05); } }

.lead__body{ padding: clamp(24px, 3vw, 38px); }
.lead__title{
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(26px, 3.4vw, 38px);
  letter-spacing: -.02em; line-height: 1.08;
  color: var(--c-ink); margin: 8px 0 12px;
}
.lead__title .ink{
  background: linear-gradient(105deg, var(--c-ink), var(--c-blue));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lead__lede{ font-size: 15px; color: var(--c-text); margin: 0 0 22px; line-height: 1.55; }
.lead__lede em{ font-style: italic; color: var(--c-blue); font-weight: 600; }

.lead__form{ display: grid; gap: 12px; }
.lead__field{ display: grid; gap: 6px; }
.lead__field > span{
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-blue);
}
.lead__field input{
  width: 100%; padding: 14px 16px; font: inherit; font-size: 16px; /* prevents iOS zoom */
  background: var(--c-paper); color: var(--c-text);
  border: 1.5px solid rgba(9,31,91,.16);
  border-radius: 12px;
  transition: border-color .25s, box-shadow .25s, background .25s;
  outline: none;
}
.lead__field input:focus{
  border-color: var(--c-blue);
  box-shadow: 0 0 0 4px rgba(52,78,173,.16);
  background: #fff;
}
.lead__phone{
  display: grid; grid-template-columns: auto 1fr; align-items: stretch;
  border: 1.5px solid rgba(9,31,91,.16);
  border-radius: 12px; overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
  background: var(--c-paper);
}
.lead__phone:focus-within{ border-color: var(--c-blue); box-shadow: 0 0 0 4px rgba(52,78,173,.16); }
.lead__phone em{
  font-style: normal;
  display:flex; align-items:center; padding: 0 14px;
  background: rgba(9,31,91,.06);
  font-family: var(--f-mono); font-size: 14px; color: var(--c-ink); letter-spacing: .03em;
  border-right: 1px solid rgba(9,31,91,.12);
}
.lead__phone input{ border: none; border-radius: 0; box-shadow: none !important; background: transparent; }
.lead__phone input:focus{ background: transparent; border: none; box-shadow: none; }

.lead__submit{ margin-top: 8px; justify-content: center; width: 100%; }
.lead__submit[disabled]{ opacity:.6; pointer-events: none; }
.lead__terms{
  margin: 14px 0 0;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--c-text-2); line-height: 1.6;
}
.lead__terms a{ color: var(--c-blue); text-decoration: underline; text-underline-offset: 2px; }

.lead__success{ text-align: center; padding: 16px 4px; }
.lead__success svg{ margin: 0 auto 12px; }
.lead__success h4{ font-family: var(--f-display); font-size: 26px; color: var(--c-ink); margin: 0 0 10px; letter-spacing: -.01em; }
.lead__codeWrap{ font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-2); margin: 0 0 6px; }
.lead__code{
  display:inline-block;
  margin-left: 8px;
  font-family: var(--f-mono); font-size: 16px; letter-spacing: .14em;
  padding: 8px 14px; border-radius: 8px;
  background: var(--c-ink); color: var(--c-paper);
  border: 0; cursor: copy;
  transition: background .2s, transform .2s;
}
.lead__code:hover{ background: var(--c-blue); transform: translateY(-1px); }
.lead__success .cta{ margin-top: 18px; width: 100%; justify-content: center; }

@media (max-width: 720px){
  .lead__panel{ grid-template-columns: 1fr; max-height: calc(100vh - 32px); overflow: auto; }
  .lead__art{ aspect-ratio: 5/2; }
  .lead__art svg{ max-width: 200px; }
}

/* ============================================================
   HYPERREALISTIC ACNE CURSOR
   ============================================================ */
.acne-cursor{
  position: fixed;
  top: 0; left: 0;
  width: 56px; height: 56px;
  margin: -28px 0 0 -28px;  /* center on hotspot */
  pointer-events: none;
  z-index: 9998;
  will-change: transform, opacity;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0) scale(.7);
  transition: opacity .25s var(--ease), filter .35s var(--ease);
  filter: drop-shadow(0 4px 10px rgba(122,42,26,.35));
}
.acne-cursor svg{ width:100%; height:100%; display:block; }

/* breathing pulse — subtle skin throb */
.acne-cursor__head{ transform-origin: 48px 43px; animation: acnePulse 1.9s ease-in-out infinite; }
.acne-cursor__bump{ transform-origin: 48px 46px; animation: acneBump  3.4s ease-in-out infinite; }
@keyframes acnePulse{
  0%, 100% { transform: scale(1);     filter: brightness(1); }
  50%      { transform: scale(1.07);  filter: brightness(1.08); }
}
@keyframes acneBump{
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.025); }
}

/* live state — only after JS confirms a fine pointer */
html.acne-on, html.acne-on *{ cursor: none !important; }
html.acne-on input, html.acne-on textarea, html.acne-on select,
html.acne-on [contenteditable="true"]{ cursor: text !important; }
html.acne-on .acne-cursor{ opacity: 1; }

/* hover state on interactive: pop + redden */
.acne-cursor.is-hot{
  filter: drop-shadow(0 6px 14px rgba(193,75,58,.55)) saturate(1.18);
}
.acne-cursor.is-hot svg{ transform: scale(1.18); transition: transform .25s var(--ease); }
.acne-cursor.is-press svg{ transform: scale(.92); transition: transform .12s var(--ease); }
.acne-cursor svg{ transition: transform .35s var(--ease); }

/* never disable native cursor on touch / coarse pointers */
@media (pointer: coarse){ .acne-cursor{ display: none !important; } html.acne-on *{ cursor: auto !important; } }
@media (prefers-reduced-motion: reduce){
  .acne-cursor__head, .acne-cursor__bump{ animation: none; }
}