/* Self-hosted General Sans (hero font) — no CDN dependency, so it always loads
   (Fontshare CDN was failing/flashing in Safari -> giant fallback font). */
@font-face{font-family:'General Sans';src:url('../fonts/general-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('../fonts/general-sans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('../fonts/general-sans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('../fonts/general-sans-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
/* Self-hosted Orbitron (variable) — kept only for the hero ticker so the hero stays untouched */
@font-face{font-family:'Orbitron';src:url('../fonts/orbitron-var.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
/* Self-hosted Inter (variable, all weights in one file) — site-wide text font (Inter Black for headings) */
@font-face{font-family:'Inter';src:url('../fonts/inter-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

/* smooth page load-in + crossfade-out on navigation (seamless page transitions) */
@keyframes pageIn{from{opacity:0}to{opacity:1}}
html.js body{animation:pageIn .42s ease backwards}
body.is-leaving{animation:none;opacity:0;transition:opacity .3s ease}
@media (prefers-reduced-motion:reduce){html.js body{animation:none}body.is-leaving{transition:none}}

/* The hero (start page) keeps its original fonts: title/eyebrow = General Sans, ticker = Orbitron.
   Everything else on the site uses Inter (Black for headings). */
.hero__marquee{font-family:'Orbitron','Helvetica Neue',Helvetica,Arial,sans-serif}

/* =====================================================================
   CLIPEASE — cinematic clipping-agency site
   Design system + sections + motion base states
   ===================================================================== */

:root{
  /* palette */
  --bg:#08080a;
  --bg-2:#0d0d11;
  --bg-3:#121218;
  --paper:#ffffff;
  --paper-2:#f3f5fb;
  --card:#ffffff;
  --ink:#0b0c11;
  --ink-soft:#3a3d49;

  --gold:#C6A042;
  --gold-2:#C6A042;
  --gold-deep:#C6A042;
  --blue:#C6A042;
  --blue-2:#C6A042;
  --red:#c5453f;
  --green:#2f7d4f;

  --on-dark:#f4f5fa;
  --on-dark-mut:rgba(244,245,250,.58);
  --on-dark-faint:rgba(244,245,250,.12);
  --line-dark:rgba(255,255,255,.10);
  --line-dark-2:rgba(255,255,255,.06);

  --on-light:#0b0c11;
  --on-light-mut:#5a5f70;
  --line-light:rgba(16,18,34,.10);
  --line-light-2:rgba(16,18,34,.06);

  /* BL Melody is a licensed Boulevard LAB font (no free webfont). Closest license-clean
     match = a Helvetica-Neue-led Swiss stack; add BL Melody first if you license the .woff2. */
  --font-ui:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-disp:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-mono:'Inter',ui-monospace,Menlo,monospace;

  --maxw:1240px;
  --pad:clamp(20px,5vw,80px);
  --r:18px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}

body{
  font-family:var(--font-ui);
  background:var(--bg);
  color:var(--on-dark);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
body.is-loading{overflow:hidden;height:100vh}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--gold);color:#000}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);position:relative}

/* ---------- type ---------- */
.display{
  font-family:var(--font-disp);
  font-weight:900;
  letter-spacing:-.03em;
  line-height:.96;
  font-size:clamp(1.8rem,6.2vw,5.6rem);
}
.eyebrow{
  font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--on-dark-mut);display:flex;align-items:center;gap:.6em;margin-bottom:1.4rem;
}
[data-theme="light"] .eyebrow{color:var(--on-light-mut)}
.eyebrow--center{justify-content:center;text-align:center}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold)}
.gold{color:var(--gold)}
[data-theme="light"] .gold{color:var(--gold-deep)}

.pill{
  display:inline-block;padding:.5em 1.1em;border-radius:100px;font-size:.74rem;font-weight:600;
  letter-spacing:.04em;background:#0b0c11;color:#fff;margin-bottom:1.6rem;
}
.pill--dark{background:rgba(255,255,255,.08);border:1px solid var(--line-dark)}

/* ---------- buttons ---------- */
.btn{
  --bg:#fff;--fg:#0b0c11;
  display:inline-flex;align-items:center;gap:.55em;
  padding:.85em 1.4em;border-radius:100px;font-weight:600;font-size:.92rem;
  background:var(--bg);color:var(--fg);position:relative;overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .3s,color .3s;
  will-change:transform;border:1px solid transparent;white-space:nowrap;
}
.btn svg{transition:transform .4s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:translate(2px,-2px)}
.btn--lg{padding:1.05em 1.8em;font-size:1rem}
.btn--primary{--bg:linear-gradient(120deg,var(--gold-2),var(--gold));--fg:#1a1407;box-shadow:0 10px 30px -8px rgba(198,160,66,.5)}
.btn--primary:hover{box-shadow:0 18px 44px -10px rgba(198,160,66,.75)}
.btn--ghost{--bg:transparent;--fg:var(--on-dark);border-color:var(--line-dark)}
[data-theme="light"] .btn--ghost{--fg:var(--on-light);border-color:var(--line-light)}
.btn--ghost:hover{background:rgba(255,255,255,.06)}
.btn--dark{--bg:#0b0c11;--fg:#fff}
.btn--line{--bg:transparent;--fg:var(--on-light);border-color:var(--line-light)}
[data-theme="dark"] .btn--line{--fg:var(--on-dark);border-color:var(--line-dark)}

/* =====================================================================
   PRELOADER
   ===================================================================== */
.preloader{position:fixed;inset:0;z-index:9999;background:var(--bg);
  display:grid;place-items:center;overflow:hidden}
.preloader__inner{text-align:center;width:min(80vw,420px)}
.preloader__brand{
  font-family:var(--font-disp);font-weight:900;letter-spacing:.02em;
  font-size:clamp(2rem,7vw,3.4rem);
  background:linear-gradient(100deg,var(--gold-deep),var(--gold-2),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:inline-block;
}
.preloader__bar{height:2px;background:var(--on-dark-faint);margin:1.6rem 0 .8rem;border-radius:2px;overflow:hidden}
.preloader__fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-deep),var(--gold-2));box-shadow:0 0 14px var(--gold)}
.preloader__count{font-family:var(--font-mono);font-size:.8rem;color:var(--on-dark-mut);letter-spacing:.1em}
.preloader__count i{opacity:.5}
.preloader__tag{margin-top:1rem;font-size:.62rem;letter-spacing:.32em;color:var(--on-dark-faint);text-transform:uppercase}


/* =====================================================================
   SCROLL RAIL
   ===================================================================== */
.scroll-rail{position:fixed;top:0;left:0;right:0;height:2px;z-index:8000;background:transparent}
.scroll-rail__fill{display:block;height:100%;width:0;transform-origin:left;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-2),var(--gold));box-shadow:0 0 12px var(--gold)}

/* =====================================================================
   NAV
   ===================================================================== */
.nav{position:fixed;top:0;left:0;right:0;z-index:7000;padding:18px var(--pad);
  transition:transform .5s var(--ease),background .4s,border-color .4s;
  border-bottom:1px solid transparent}
.nav.is-stuck{background:rgba(8,8,10,.92);border-bottom-color:var(--line-dark);padding-top:12px;padding-bottom:12px}
.nav.is-light.is-stuck{background:rgba(244,246,251,.8);border-bottom-color:var(--line-light)}
.nav.is-hidden{transform:translateY(-110%)}
.nav__inner{max-width:1500px;margin:0 auto;display:flex;align-items:center;gap:1.2rem}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--on-dark);font-weight:900;letter-spacing:.04em;z-index:2}
.nav.is-light .brand,.nav.is-light .nav__link{color:var(--on-light)}
.brand__mark{color:var(--gold);display:grid;place-items:center}
.brand__word{font-family:var(--font-disp);font-weight:900;font-size:1.12rem;letter-spacing:.04em}
.brand--lg .brand__word{font-size:clamp(2.4rem,7vw,4.6rem);letter-spacing:-.02em}
.brand__img{display:block;width:30px;height:30px;object-fit:contain}
.brand--markonly .brand__img{width:42px;height:42px}
.brand--lg .brand__img{width:clamp(42px,6vw,66px);height:auto}
.preloader__mark::before{content:"";display:block;width:74px;height:74px;margin:0 auto 18px;background:url(../media/clipease-logo.png) center/contain no-repeat}

.nav__links{display:flex;align-items:center;gap:.4rem;margin-left:auto}
.nav__link{position:relative;color:var(--on-dark);font-size:.9rem;font-weight:500;padding:.5em .85em;border-radius:100px;
  display:inline-flex;align-items:center;gap:.4em;transition:color .25s,background .25s;opacity:.86}
.nav__link:hover{opacity:1;background:rgba(255,255,255,.06)}
.nav.is-light .nav__link:hover{background:rgba(16,18,34,.05)}
.nav__chev{transition:transform .3s var(--ease);opacity:.6}
.nav__item{position:relative}
.nav__item.is-open .nav__chev{transform:rotate(180deg)}
.nav__cta{margin-left:.4rem}

/* mega */
.mega{position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,12px);
  width:min(620px,86vw);background:rgba(16,16,20,.86);backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid var(--line-dark);border-radius:20px;padding:14px;
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),transform .35s var(--ease);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.8);z-index:50}
.nav.is-light .mega{background:rgba(255,255,255,.92);border-color:var(--line-light);box-shadow:0 40px 80px -30px rgba(20,22,40,.25)}
.nav__item.is-open .mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mega--narrow{width:min(380px,86vw);left:auto;right:0;transform:translate(0,12px)}
.nav__item.is-open .mega--narrow{transform:translate(0,0)}
.mega__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mega__grid--col{grid-template-columns:1fr}
.mega__card{display:block;padding:14px;border-radius:14px;border:1px solid transparent;transition:background .25s,border-color .25s,transform .25s}
.mega__card:hover{background:rgba(255,255,255,.05);border-color:var(--line-dark);transform:translateY(-2px)}
.nav.is-light .mega__card:hover{background:rgba(198,160,66,.05);border-color:rgba(198,160,66,.2)}
.mega__ico{display:block;width:34px;height:34px;border-radius:10px;margin-bottom:10px;
  background:linear-gradient(135deg,var(--blue),var(--blue-2));position:relative;overflow:hidden}
.mega__ico::after{content:"";position:absolute;inset:0;z-index:0;background:
  radial-gradient(circle at 30% 30%,rgba(255,255,255,.5),transparent 60%)}
/* dropdown icons get the same section-relevant gold animations as the service cards (scaled to 34px) */
.mega__ico[data-i]{display:grid;place-items:center}
.mega__ico i{position:relative;z-index:2}
.mega__ico[data-i="camp"] i:nth-child(1){width:0;height:0;border-left:10px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;animation:svcPulse 1.6s ease-in-out infinite}
.mega__ico[data-i="camp"] i:nth-child(2){position:absolute;top:7px;bottom:7px;width:1.5px;background:#fff;box-shadow:0 0 6px rgba(255,255,255,.85);animation:megaScan 2s ease-in-out infinite}
@keyframes megaScan{0%{left:9px;opacity:0}22%{opacity:1}78%{opacity:1}100%{left:25px;opacity:0}}
.mega__ico[data-i="logo"]{perspective:140px}
.mega__ico[data-i="logo"] i{width:15px;height:15px;border-radius:4px;border:2px solid #fff;animation:svcFlip 2.8s ease-in-out infinite}
.mega__ico[data-i="logo"] i::after{content:"";position:absolute;inset:3px;border-radius:2px;background:#fff;opacity:.85}
.mega__ico[data-i="music"]{display:flex;align-items:flex-end;justify-content:center;gap:2px;padding-bottom:8px}
.mega__ico[data-i="music"] i{width:3px;border-radius:2px;background:#fff;transform-origin:bottom;animation:svcEq .9s ease-in-out infinite}
.mega__ico[data-i="music"] i:nth-child(1){height:14px}
.mega__ico[data-i="music"] i:nth-child(2){height:20px;animation-delay:.16s}
.mega__ico[data-i="music"] i:nth-child(3){height:10px;animation-delay:.32s}
.mega__ico[data-i="music"] i:nth-child(4){height:17px;animation-delay:.48s}
.mega__ico[data-i="pod"] i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%}
.mega__ico[data-i="pod"] i:nth-child(1){width:6px;height:6px;background:#fff}
.mega__ico[data-i="pod"] i:nth-child(2),.mega__ico[data-i="pod"] i:nth-child(3){border:1.5px solid rgba(255,255,255,.9);animation:megaRing 1.9s ease-out infinite}
.mega__ico[data-i="pod"] i:nth-child(3){animation-delay:.95s}
@keyframes megaRing{0%{width:6px;height:6px;opacity:.9}100%{width:32px;height:32px;opacity:0}}
@media (prefers-reduced-motion:reduce){.mega__ico[data-i] i{animation:none}}
.mega__t{display:block;font-weight:600;font-size:.95rem;margin-bottom:.2rem;color:var(--on-dark)}
.nav.is-light .mega__t{color:var(--on-light)}
.mega__d{display:block;font-size:.8rem;color:var(--on-dark-mut);line-height:1.5}
.nav.is-light .mega__d{color:var(--on-light-mut)}

.nav__burger{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line-dark);
  flex-direction:column;align-items:center;justify-content:center;gap:5px;margin-left:auto}
.nav__burger span{width:18px;height:1.6px;background:currentColor;color:var(--on-dark);transition:transform .3s,opacity .3s}
.nav.is-light .nav__burger{color:var(--on-light);border-color:var(--line-light)}
body.menu-open .nav__burger span:nth-child(1){transform:translateY(3.3px) rotate(45deg)}
body.menu-open .nav__burger span:nth-child(2){transform:translateY(-3.3px) rotate(-45deg)}

.mobile-menu{position:fixed;inset:0;z-index:6500;background:rgba(10,11,14,.9);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  display:flex;flex-direction:column;gap:11px;justify-content:flex-start;
  padding:calc(86px + env(safe-area-inset-top,0px)) 18px calc(26px + env(safe-area-inset-bottom,0px));
  overflow-y:auto;overscroll-behavior:contain;
  transform:translateY(-100%);transition:transform .5s var(--ease);}
.mobile-menu a{font-family:var(--font-disp);font-weight:600;font-size:1.16rem;letter-spacing:-.005em;
  color:#fff;padding:15px 20px;border-radius:16px;border-bottom:0;flex:none;
  display:flex;align-items:center;justify-content:space-between;text-decoration:none;
  background:linear-gradient(150deg,rgba(255,255,255,.11),rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .25s,transform .25s;}
.mobile-menu a::after{content:"↗";font-size:.92rem;opacity:.45;font-weight:400;}
.mobile-menu a:active{background:linear-gradient(150deg,rgba(255,255,255,.18),rgba(255,255,255,.08));transform:scale(.985);}
.mobile-menu a.btn--primary{margin-top:6px;align-self:auto;justify-content:center;font-weight:700;font-size:1.1rem;
  color:#15161d;background:linear-gradient(135deg,#f2db8d,#e0b94e 55%,#C6A042);border:0;
  box-shadow:0 16px 40px -16px rgba(198,160,66,.7);}
.mobile-menu a.btn--primary::after{content:"";}
body.menu-open .mobile-menu{transform:translateY(0)}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{position:relative;height:100vh;min-height:680px;overflow:hidden;isolation:isolate;color:var(--on-light);background:transparent;z-index:5}
.hero::before{content:none}
/* the hero is split into two halves that slide straight apart on scroll
   (a clean cut from the middle — no white flash, no blur) */
.hero__leaf{position:absolute;left:0;right:0;height:50%;overflow:hidden;will-change:transform;z-index:1}
.hero__leaf--top{top:0}
.hero__leaf--bot{bottom:0}
.hero__face{position:absolute;left:0;right:0;height:200%}
.hero__leaf--top .hero__face{top:0}
.hero__leaf--bot .hero__face{bottom:0}
/* clean white hero backdrop with a subtle warm radial for depth */
.hero__bg2{position:absolute;inset:0;z-index:0;background:#ffffff}
/* the "cut": a panel that opens from the centre line on scroll, with the next section starting inside it */
.hero__reveal{position:absolute;inset:0;z-index:6;background:var(--bg);color:var(--on-dark);
  display:grid;place-items:center;text-align:center;padding:0 6vw;
  clip-path:inset(calc((50 - var(--cut,0)) * 1%) 0px calc((50 - var(--cut,0)) * 1%) 0px);will-change:clip-path}
.hero__reveal-inner{display:flex;flex-direction:column;align-items:center;gap:clamp(20px,6vh,60px);line-height:1}
.hero__rk{font-family:var(--font-disp);font-weight:900;letter-spacing:.04em;text-transform:uppercase;
  font-size:clamp(2.2rem,7vw,5.2rem);color:#fff}
.hero__rt{font-family:var(--font-disp);font-weight:900;letter-spacing:-.01em;
  font-size:clamp(2.8rem,9.5vw,7rem);color:var(--gold)}
.hero__veil{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,rgba(247,242,233,.68) 0%,rgba(247,242,233,.2) 33%,transparent 55%),linear-gradient(180deg,transparent 70%,rgba(40,28,16,.2))}
.hero__content{position:absolute;z-index:3;inset:0;display:flex;flex-direction:column;justify-content:center;
  max-width:none;margin:0 auto;padding:0 clamp(10px,1.5vw,26px) 0 calc(clamp(10px,1.5vw,26px) + min(3cm,8vw));pointer-events:none}
.hero__content a{pointer-events:auto}
.hero__kick{font-family:'General Sans',-apple-system,system-ui,sans-serif;font-size:clamp(13px,1.45vw,20px);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 clamp(14px,2vh,26px) .1em}
.hero__eyebrow{font-size:clamp(.7rem,1.1vw,.82rem);font-weight:700;letter-spacing:.34em;text-transform:uppercase;
  color:#5c4a2c;display:flex;align-items:center;gap:.7em;margin-bottom:1.1rem}
.hero__eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 14px rgba(198,160,66,.55)}
.hero__title{font-family:'General Sans',-apple-system,system-ui,sans-serif;font-weight:600;letter-spacing:-.03em;line-height:.86;
  font-size:clamp(3.5rem,min(13.3vw,30vh),24rem);text-transform:uppercase}
.hero__title .line{display:block;white-space:nowrap;color:var(--gold);-webkit-text-fill-color:var(--gold)}
.hero__title .l1,.hero__title .l2,.hero__title .l3,.hero__title .l4{margin-left:0}
.hero__title em{font-style:normal;color:var(--gold);-webkit-text-fill-color:var(--gold)}
.hero__micro{margin-top:1rem;font-size:.82rem;color:#6a5c48}
.hero__scroll{position:absolute;bottom:96px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.7rem;font-size:.6rem;letter-spacing:.34em;color:var(--on-light-mut)}
.hero__scroll i{width:1px;height:46px;background:linear-gradient(var(--gold),transparent);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;top:0;left:0;width:100%;height:40%;background:var(--gold);animation:scrolldot 2.2s var(--ease) infinite}
@keyframes scrolldot{0%{transform:translateY(-100%)}60%,100%{transform:translateY(280%)}}

.hero__marquee{position:absolute;bottom:0;left:0;right:0;z-index:4;padding:16px 0;
  border-top:1px solid rgba(40,28,16,.12);background:linear-gradient(transparent,rgba(245,239,230,.62));overflow:hidden}
.marquee{display:flex;gap:1.4rem;white-space:nowrap;width:max-content;font-size:.74rem;font-weight:700;
  letter-spacing:.22em;color:var(--on-light-mut)}
.marquee b{color:var(--gold)}
.marquee__sep{color:var(--gold);opacity:.55}

/* =====================================================================
   SECTION SHELL
   ===================================================================== */
section[data-theme]{position:relative;padding:clamp(80px,11vh,160px) 0}
section[data-theme="light"]{background:var(--paper);color:var(--on-light)}
section[data-theme="dark"]{background:var(--bg);color:var(--on-dark)}
.hero[data-theme]{padding:0;background:transparent}

/* =====================================================================
   SYSTEM / VIDEO
   ===================================================================== */
.system{background:linear-gradient(180deg,var(--bg),var(--bg-2));text-align:center}
.system .eyebrow{color:var(--gold-2);display:block;text-align:center;line-height:1.6}
.system__title{margin:1rem auto 2.6rem;max-width:none;font-size:clamp(1.35rem,3.5vw,2.8rem)}
.video{position:relative;max-width:860px;margin:0 auto;border-radius:22px}
.video__frame{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line-dark);
  background:#0c0c10;aspect-ratio:16/9;box-shadow:0 60px 120px -50px rgba(0,0,0,.9)}
.video__glow{position:absolute;inset:-2px;border-radius:22px;z-index:-1;
  background:conic-gradient(from 180deg,var(--gold),var(--blue),var(--gold-2),var(--gold));filter:blur(40px);opacity:.4}
.video__poster{position:absolute;inset:0;background:
  radial-gradient(80% 120% at 50% 120%,rgba(198,160,66,.35),transparent 60%),
  radial-gradient(70% 90% at 50% -20%,rgba(194,161,78,.25),transparent 60%),#0a0a0e;
  display:grid;place-items:center}
.video__bars{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;opacity:.5}
.video__bars i{width:5px;height:18%;background:linear-gradient(var(--gold-2),var(--blue));border-radius:4px;
  animation:eq 1.4s var(--ease-soft) infinite alternate}
.video__bars i:nth-child(2n){animation-duration:1s}
.video__bars i:nth-child(3n){animation-duration:1.7s;height:42%}
.video__bars i:nth-child(4n){height:60%}
.video__bars i:nth-child(5n){height:30%}
@keyframes eq{to{transform:scaleY(2.6)}}
.video__play{position:relative;z-index:2;width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.95);color:#0b0c11;
  display:grid;place-items:center;box-shadow:0 20px 50px -10px rgba(0,0,0,.6);transition:transform .4s var(--ease)}
.video__play::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(255,255,255,.4);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.5);opacity:0}}
.video__play:hover{transform:scale(1.08)}
.video__time{position:absolute;left:18px;bottom:16px;font-family:var(--font-mono);font-size:.78rem;color:#fff;z-index:2}
.video__tag{position:absolute;right:18px;top:16px;font-size:.62rem;letter-spacing:.2em;color:var(--on-dark-mut);z-index:2}
.system__caption{font-family:var(--font-disp);font-weight:900;font-size:clamp(1.4rem,3vw,2.4rem);margin:3rem auto 1rem;max-width:30ch;line-height:1.25}
.system__body{max-width:62ch;margin:0 auto;color:var(--on-dark-mut);font-size:1.02rem}

/* =====================================================================
   HOW IT WORKS
   ===================================================================== */
.how__title{margin:.6rem 0 1.2rem}
.how__sub{max-width:60ch;color:var(--on-light-mut);font-size:1.05rem;margin-bottom:3rem}
.how__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:stretch}
.how__panel{background:var(--card);border:1px solid var(--line-light);border-radius:24px;padding:26px;box-shadow:0 30px 60px -40px rgba(20,22,40,.3)}
.tabs{display:flex;gap:8px;background:var(--paper-2);padding:5px;border-radius:14px;margin-bottom:18px;flex-wrap:wrap}
.tab{flex:1;min-width:140px;padding:.7em 1em;border-radius:10px;font-size:.84rem;font-weight:500;color:var(--on-light-mut);transition:all .3s var(--ease)}
.tab.is-active{background:var(--card);color:var(--on-light);box-shadow:0 6px 18px -8px rgba(20,22,40,.25);font-weight:600}
.how__label{display:block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);font-weight:700;margin-bottom:.8rem}
.tab-body{display:none}
.tab-body.is-active{display:block;animation:fadeUp .5s var(--ease)}
.tab-body p{color:var(--on-light-mut);font-size:.98rem}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}
.chip{padding:.5em 1em;border-radius:100px;font-size:.8rem;font-weight:500;background:var(--paper-2);
  border:1px solid var(--line-light);color:var(--on-light);display:inline-flex;align-items:center;gap:.5em}
.chip::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--blue)}
.chip[data-net="tiktok"]::before{background:#000}
.chip[data-net="reels"]::before{background:linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7)}
.chip[data-net="shorts"]::before{background:#ff0033}
.how__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}

.how__loop{border-radius:24px;overflow:hidden;position:relative;min-height:420px;
  background:radial-gradient(120% 120% at 80% 0,#1b1d2b,#0a0a0e);border:1px solid var(--line-dark);color:#fff;
  box-shadow:0 40px 80px -40px rgba(10,12,30,.6)}
.loop__media{position:relative;z-index:2;padding:30px;height:100%;display:flex;flex-direction:column}
.loop__label{font-size:.64rem;letter-spacing:.2em;color:var(--on-dark-mut);text-transform:uppercase}
.loop__media h4{font-family:var(--font-disp);font-weight:900;font-size:1.5rem;margin:.5rem 0 1.6rem;max-width:14ch}
.loop__steps{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:auto}
.loop__steps li{display:flex;gap:12px;align-items:baseline;font-size:.95rem;color:var(--on-dark);padding-bottom:14px;border-bottom:1px solid var(--line-dark-2)}
.loop__steps b{font-family:var(--font-mono);color:var(--gold);font-size:.8rem}
.loop__orbit{position:absolute;top:20px;right:20px;width:130px;height:130px}
.loop__orbit span,.loop__orbit i{position:absolute;border-radius:50%}
.loop__orbit i{inset:0;border:1px solid var(--line-dark);width:130px;height:130px}
.loop__orbit span{width:12px;height:12px;background:var(--gold);top:50%;left:50%;margin:-6px;
  box-shadow:0 0 14px var(--gold);transform-origin:0 0;animation:orbit 7s linear infinite}
.loop__orbit span:nth-child(2){background:var(--blue-2);box-shadow:0 0 14px var(--blue);animation-duration:11s;animation-delay:-3s}
.loop__orbit span:nth-child(3){background:#fff;width:7px;height:7px;margin:-3.5px;animation-duration:5s;animation-delay:-1s}
@keyframes orbit{from{transform:rotate(0) translateX(58px)}to{transform:rotate(360deg) translateX(58px)}}

/* =====================================================================
   STATS
   ===================================================================== */
.stats{text-align:center;overflow:hidden}
.stats__bg{position:absolute;inset:0;background:
  radial-gradient(60% 60% at 50% 40%,rgba(194,161,78,.16),transparent 70%);pointer-events:none}
.stats__hero{margin:1.4rem 0 3.4rem}
.stats__num{display:block;font-family:var(--font-disp);font-weight:900;letter-spacing:-.04em;line-height:1;
  font-size:clamp(2.6rem,12vw,9.5rem);
  background:linear-gradient(180deg,#fff 10%,var(--gold-2) 55%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.stats__numlabel{display:block;margin-top:1rem;font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;color:var(--on-dark-mut)}
.stats__row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border-top:1px solid var(--line-dark);padding-top:2.6rem}
.stat__k{display:block;font-family:var(--font-disp);font-weight:900;font-size:clamp(1.4rem,3.2vw,2.6rem);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat__k--word{color:var(--gold-2)}
.stat__l{display:block;margin-top:.5rem;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-mut)}

/* =====================================================================
   SHORT-FORM
   ===================================================================== */
.shortform__head{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:end;margin-bottom:3.4rem}
.shortform__head .display{font-size:clamp(2rem,5vw,4.2rem)}
.shortform__list{list-style:none;display:flex;flex-direction:column;gap:.8rem}
.shortform__list li{position:relative;padding-left:1.8em;color:var(--on-light-mut);font-size:1rem}
.shortform__list li::before{content:"";position:absolute;left:0;top:.5em;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,var(--gold-2),var(--gold-deep))}
.shortform__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sfc{background:var(--card);border:1px solid var(--line-light);border-radius:22px;padding:24px;
  box-shadow:0 24px 50px -38px rgba(20,22,40,.35);min-height:300px;display:flex;flex-direction:column}
.sfc h3{font-weight:700;font-size:1.12rem;margin:auto 0 .5rem}
.sfc p{font-size:.9rem;color:var(--on-light-mut)}
.sfc__phones,.sfc__wave,.sfc__scale{height:150px;border-radius:14px;background:var(--paper-2);position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;gap:8px}
.sfc__phones i{width:34px;height:78px;border-radius:8px;position:relative;box-shadow:0 10px 24px -8px rgba(20,22,40,.4)}
.sfc__phones .p1{background:linear-gradient(160deg,#6a5cff,#3b2fb0);transform:rotate(-9deg) translateY(6px)}
.sfc__phones .p2{background:linear-gradient(160deg,#C6A042,#1c2f9c);transform:translateY(-6px);z-index:2}
.sfc__phones .p3{background:linear-gradient(160deg,#39c08a,#1d6a4a);transform:rotate(9deg) translateY(6px)}
.sfc__phones i::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  border-left:8px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent;opacity:.9}
.sfc__wave{gap:4px}
.sfc__wave span{width:5px;height:30%;background:var(--blue);border-radius:4px;animation:eq 1.3s var(--ease-soft) infinite alternate}
.sfc__wave span:nth-child(2n){background:var(--gold);animation-duration:.9s}
.sfc__wave span:nth-child(3n){height:60%;animation-duration:1.6s}
.sfc__wave span:nth-child(odd){height:46%}
.sfc__scale i{width:14px;height:14px;border-radius:4px;background:var(--paper);border:1.5px solid var(--blue)}
.sfc__scale i:nth-child(2){background:var(--blue);opacity:.5}
.sfc__scale i:nth-child(3){background:var(--blue);opacity:.75}
.sfc__scale b{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--blue-2));
  display:grid;place-items:center;box-shadow:0 12px 28px -8px rgba(198,160,66,.6)}
.sfc__scale b::after{content:"";border-left:12px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px}

/* =====================================================================
   BUILD / EDITS ENGINEERED
   ===================================================================== */
.build__head{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:end;margin:1rem 0 3rem}
.build__head .display{font-size:clamp(2rem,5vw,4.2rem)}
.build__head p{color:var(--on-dark-mut);font-size:1.02rem;align-self:end}
.build__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.bcard{background:linear-gradient(180deg,var(--bg-3),var(--bg-2));border:1px solid var(--line-dark);border-radius:18px;
  padding:20px;min-height:230px;display:flex;flex-direction:column;transition:transform .5s var(--ease),border-color .4s,background .4s;position:relative;overflow:hidden}
.bcard:hover{transform:translateY(-6px);border-color:rgba(194,161,78,.4)}
.bcard::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s;
  background:radial-gradient(80% 60% at 50% 0,rgba(194,161,78,.14),transparent 70%)}
.bcard:hover::after{opacity:1}
.bcard__viz{height:96px;border-radius:12px;background:#0a0a0e;border:1px solid var(--line-dark-2);margin-bottom:auto;position:relative;overflow:hidden}
.bcard h4{font-weight:700;font-size:1.04rem;margin:1.2rem 0 .3rem}
.bcard p{font-size:.84rem;color:var(--on-dark-mut)}
/* per-card mini visuals */
.bcard__viz::before,.bcard__viz::after{content:""}
.bcard[data-i="beat"] .bcard__viz{background:repeating-linear-gradient(90deg,var(--blue) 0 3px,transparent 3px 9px) center/100% 60% no-repeat,#0a0a0e}
.bcard[data-i="speed"] .bcard__viz::before{position:absolute;inset:0;background:
  linear-gradient(90deg,transparent,rgba(198,160,66,.6));clip-path:polygon(0 50%,70% 20%,70% 38%,100% 38%,100% 62%,70% 62%,70% 80%)}
.bcard[data-i="motion"] .bcard__viz{background:linear-gradient(135deg,rgba(198,160,66,.25),transparent),#0a0a0e}
.bcard[data-i="motion"] .bcard__viz::before{position:absolute;left:14px;top:30px;width:50%;height:6px;border-radius:4px;background:var(--blue)}
.bcard[data-i="motion"] .bcard__viz::after{position:absolute;left:14px;top:48px;width:30%;height:6px;border-radius:4px;background:var(--gold)}
.bcard[data-i="film"] .bcard__viz{background:repeating-linear-gradient(90deg,#16161e 0 14px,#0a0a0e 14px 16px);}
.bcard[data-i="film"] .bcard__viz::before{position:absolute;inset:0;border-top:2px solid var(--gold);border-bottom:2px solid var(--gold);top:30%;bottom:30%}
.bcard[data-i="culture"] .bcard__viz::before{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34px;height:60px;border-radius:7px;border:2px solid var(--blue-2)}
.bcard[data-i="hook"] .bcard__viz::before{position:absolute;inset:18px;border-left:2px solid var(--gold);}
.bcard[data-i="hook"] .bcard__viz::after{position:absolute;left:24px;top:24px;width:40%;height:6px;background:var(--blue);box-shadow:0 16px 0 rgba(198,160,66,.5),0 32px 0 rgba(198,160,66,.3)}
.bcard[data-i="sound"] .bcard__viz{background:radial-gradient(circle at 50% 50%,rgba(198,160,66,.3),transparent 60%),#0a0a0e}
.bcard[data-i="sound"] .bcard__viz::before{position:absolute;left:50%;top:50%;width:30px;height:30px;border:2px solid var(--gold);border-radius:50%;transform:translate(-50%,-50%)}
.bcard[data-i="sound"] .bcard__viz::after{position:absolute;left:50%;top:50%;width:54px;height:54px;border:1px solid rgba(194,161,78,.4);border-radius:50%;transform:translate(-50%,-50%)}
.bcard[data-i="color"] .bcard__viz{background:linear-gradient(90deg,#e0556a,#e8b04b 30%,#3ec88a 60%,#C6A042 85%,#9b5bff);opacity:.85}

/* =====================================================================
   CASE STUDY
   ===================================================================== */
.case{background:linear-gradient(180deg,var(--bg-2),var(--bg))}
.case__top{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:start}
.case__title{margin:.6rem 0 1rem;font-size:clamp(1.7rem,5vw,4rem)}
.case__lead{font-size:1.2rem;color:var(--on-dark-mut);margin-bottom:1.8rem}
.case__body{display:flex;flex-direction:column;gap:1rem;color:var(--on-dark-mut);max-width:60ch}
.case__kicker{color:var(--on-dark);border-left:2px solid var(--gold);padding-left:1.2rem}
.case__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:2rem}
.snap{position:sticky;top:110px}
.snap__card{border-radius:24px;padding:24px;color:#fff;position:relative;overflow:hidden;
  background:radial-gradient(120% 120% at 70% 0,#e3bd63,#7a571c);
  box-shadow:0 50px 100px -40px rgba(150,110,35,.55);aspect-ratio:5/6;display:flex;flex-direction:column;isolation:isolate}
.snap__card::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(60% 60% at 50% 40%,rgba(255,255,255,.12),transparent 70%);mix-blend-mode:overlay}
.snap__chip{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.snap__scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(26,18,2,.5) 0%,transparent 30%,transparent 50%,rgba(18,12,1,.92) 100%)}
.snap__top,.snap__meta,.snap__gen{position:relative;z-index:3}
.snap__reach{z-index:3}
.snap__meta{display:flex;flex-direction:column;gap:.1rem;margin-top:auto}
.snap__l{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.snap__v{font-weight:700;font-size:1.1rem}
.snap__reach{position:absolute;right:18px;bottom:64px;text-align:right;background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:8px 12px}
.snap__reach span{display:block;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.snap__reach b{font-size:1.2rem;font-weight:900}
.snap__reach i{font-size:.7rem;opacity:.8;font-style:normal}
.snap__gen{margin-top:.8rem;font-size:.8rem;opacity:.85}
/* animated analytics widget inside the Campaign Snapshot card (0 -> 2.01B+ views) */
.snap__an{position:relative;z-index:3;margin-top:16px;padding:13px 15px 12px;border-radius:14px;
  background:rgba(14,10,1,.5);border:1px solid rgba(255,255,255,.18)}
.snap__an-top{display:flex;justify-content:space-between;align-items:center}
.snap__an-lbl{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;opacity:.82}
.snap__an-live{display:flex;align-items:center;gap:5px;font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:#ffe2b2}
.snap__an-live i{width:6px;height:6px;border-radius:50%;background:#79f2a6;box-shadow:0 0 8px #79f2a6;animation:snapLive 1.5s ease-in-out infinite}
@keyframes snapLive{0%,100%{opacity:.35;transform:scale(.75)}50%{opacity:1;transform:scale(1.15)}}
.snap__an-num{display:block;font-family:var(--font-disp);font-weight:900;letter-spacing:-.02em;
  font-size:2rem;line-height:1;margin:.32rem 0 .55rem;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.snap__an-chart{position:relative;height:52px}
.snap__an-chart svg{display:block;width:100%;height:100%;overflow:visible}
.snap__an-area{fill:url(#snapFill)}
.snap__an-line{fill:none;stroke:#ffe2b2;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 5px rgba(255,205,130,.75))}
@media (prefers-reduced-motion:reduce){.snap__an-live i{animation:none}}
.case__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:4rem 0 0;
  background:rgba(255,255,255,.03);border:1px solid var(--line-dark);border-radius:20px;padding:28px}
.cstat__k{display:block;font-family:var(--font-disp);font-weight:900;font-size:clamp(1.3rem,3vw,2.3rem);color:var(--blue-2);font-variant-numeric:tabular-nums}
.cstat__k--word{color:var(--gold-2)}
.cstat__l{display:block;margin-top:.4rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-mut)}

.signal{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;margin-top:24px;
  background:rgba(255,255,255,.03);border:1px solid var(--line-dark);border-radius:20px;padding:30px}
.signal__tag{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-mut);display:block;margin-bottom:1rem}
.signal__left h3{font-family:var(--font-disp);font-weight:900;font-size:1.4rem;margin-bottom:1.8rem;max-width:22ch}
.meter{margin-bottom:1.3rem}
.meter__head{display:flex;align-items:baseline;gap:.6rem;font-size:.86rem;margin-bottom:.5rem}
.meter__head i{font-style:normal;color:var(--on-dark-mut);font-size:.78rem}
.meter__head b{margin-left:auto;font-family:var(--font-mono);color:var(--gold-2)}
.meter__track{height:6px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.meter__track span{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--blue),var(--blue-2))}
.signal__right{border-left:1px solid var(--line-dark);padding-left:30px}
.score{display:flex;align-items:baseline;gap:.3rem;margin-bottom:.6rem}
.score__num{font-family:var(--font-disp);font-weight:900;font-size:3.6rem;color:#15161d;line-height:1}
.score__out{color:var(--on-dark-mut);font-size:1.2rem}
.score__desc{font-size:.84rem;color:var(--on-dark-mut);margin-bottom:1.6rem}
.signal__why{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2);font-weight:700;display:block;margin-bottom:.8rem}
.why{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.why li{position:relative;padding-left:1.4em;font-size:.86rem;color:var(--on-dark-mut)}
.why li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--blue-2);box-shadow:0 0 10px var(--blue)}

/* =====================================================================
   CLIENTS 3D WALL
   ===================================================================== */
.clients{overflow:hidden;background:radial-gradient(120% 80% at 50% 30%,#13131a,#06060a)}
.clients__head{text-align:center;margin-bottom:2rem;z-index:3}
.clients__stage{position:relative;height:min(78vh,720px);perspective:1400px;perspective-origin:50% 45%;overflow:hidden}
.cwall{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(40deg) rotateZ(24deg);will-change:transform}
.cwall__track{position:absolute;top:0;left:0;right:0;transform-style:preserve-3d;will-change:transform;
  display:grid;grid-template-columns:repeat(6,1fr);gap:22px;padding:0 6vw}
.ccard{aspect-ratio:.66;border-radius:16px;position:relative;overflow:hidden;transform-style:preserve-3d;
  box-shadow:0 30px 50px -20px rgba(0,0,0,.7);display:flex;flex-direction:column;justify-content:space-between;padding:14px;
  color:#fff;will-change:transform}
.ccard::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 30% 25%,rgba(255,255,255,.35),transparent 60%);mix-blend-mode:overlay}
.ccard__ic{position:relative;width:30px;height:30px;display:grid;place-items:center}
.ccard__ic svg{width:23px;height:23px;position:relative;z-index:2}
.ccard__pulse{position:absolute;left:50%;top:42%;width:26px;height:26px;transform:translate(-50%,-50%);border-radius:50%;
  border:1.6px solid rgba(255,255,255,.6);animation:cpulse 2.4s ease-out infinite}
@keyframes cpulse{0%{transform:translate(-50%,-50%) scale(.5);opacity:.85}80%,100%{transform:translate(-50%,-50%) scale(2);opacity:0}}
.ccard__name{font-weight:900;font-size:.92rem;letter-spacing:-.01em;line-height:1.1}
.ccard__tag{font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.clients__stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 80% at 50% 50%,transparent 40%,#06060a 92%)}

/* =====================================================================
   COMPARE
   ===================================================================== */
.compare__title{text-align:center;margin:0 auto 3rem;white-space:nowrap;font-size:clamp(1.35rem,5vw,4rem)}
.compare__grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:920px;margin:0 auto}
.cmp{border-radius:24px;padding:30px;position:relative;overflow:hidden}
.cmp--us{background:linear-gradient(180deg,#101015,#0a0a0e);border:1px solid rgba(194,161,78,.35);color:#fff;
  box-shadow:0 40px 80px -40px rgba(194,161,78,.25)}
.cmp--them{background:linear-gradient(180deg,#16161b,#0c0c10);border:1px solid var(--line-dark);color:var(--on-dark-mut)}
.cmp__badge{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:1.4rem;color:var(--gold);
  background:rgba(194,161,78,.12);border:1px solid rgba(194,161,78,.3)}
.cmp__badge--mut{color:var(--on-dark-mut);background:rgba(255,255,255,.05);border-color:var(--line-dark);font-size:1.2rem}
.cmp__badge--logo img{display:block;width:30px;height:30px;object-fit:contain}
.cmp h3{font-family:var(--font-disp);font-weight:900;font-size:1.5rem;margin-bottom:1.4rem}
.cmp--us h3{color:#fff}
.cmp ul{list-style:none;display:flex;flex-direction:column;gap:1rem}
.cmp li{display:flex;align-items:center;gap:.8rem;font-size:.98rem}
.cmp--us li{color:var(--on-dark)}
.cmp i.ok,.cmp i.no{width:22px;height:22px;border-radius:50%;flex:none;position:relative}
.cmp i.ok{background:rgba(63,170,110,.16)}
.cmp i.ok::after{content:"";position:absolute;left:7px;top:5px;width:5px;height:9px;border:2px solid var(--green);border-top:0;border-left:0;transform:rotate(42deg)}
.cmp i.no{background:rgba(255,255,255,.05)}
.cmp i.no::after,.cmp i.no::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:1.6px;background:var(--on-dark-mut);transform:translate(-50%,-50%) rotate(45deg)}
.cmp i.no::before{transform:translate(-50%,-50%) rotate(-45deg)}

/* =====================================================================
   LAUNCH / CHECKLIST
   ===================================================================== */
.launch__title{margin-bottom:.6rem;max-width:none}
.launch__sub{color:var(--on-light-mut);font-size:1.05rem;margin-bottom:3rem}
.launch__grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.launch__col{background:var(--card);border:1px solid var(--line-light);border-radius:24px;padding:28px;box-shadow:0 30px 60px -44px rgba(20,22,40,.3)}
.stay{display:flex;flex-direction:column;gap:18px;margin:1.4rem 0 2rem}
.stay__item{padding-left:0}
.stay__ico{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;margin-bottom:.7rem;
  background:linear-gradient(135deg,rgba(198,160,66,.12),rgba(198,160,66,.04));border:1px solid rgba(198,160,66,.2);position:relative}
.stay__ico::after{content:"";width:16px;height:16px;border-radius:5px;background:linear-gradient(135deg,var(--blue),var(--blue-2));animation:goldGlow 2.8s ease-in-out infinite}
@keyframes goldGlow{0%,100%{box-shadow:0 0 0 0 rgba(198,160,66,0);transform:scale(1)}50%{box-shadow:0 0 16px 1px rgba(198,160,66,.55);transform:scale(1.08)}}
/* sweeping gold shine on the dropdown + about-page gold blocks */
.mega__ico::before,.vcard .viz::before{content:"";position:absolute;top:0;left:-60%;width:55%;height:100%;z-index:1;pointer-events:none;background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);animation:goldSheen 3.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.stay__ico::after,.mega__ico::before,.vcard .viz::before{animation:none}}
.stay__item h4{font-weight:700;font-size:1.05rem;margin-bottom:.2rem}
.stay__item p{color:var(--on-light-mut);font-size:.92rem}
.launch__cta{display:flex;gap:10px;flex-wrap:wrap}
.check-block{margin-top:1.6rem}
.check-block h5{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:.9rem}
.chk{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.chk li{position:relative;padding-left:1.8em;font-size:.94rem;color:var(--on-light)}
.chk li::before{content:"";position:absolute;left:0;top:.35em;width:16px;height:16px;border-radius:50%;background:rgba(63,170,110,.16)}
.chk li::after{content:"";position:absolute;left:5px;top:.55em;width:4px;height:8px;border:2px solid var(--green);border-top:0;border-left:0;transform:rotate(42deg)}

/* ===== HOW: dark, with the SAME animated grid background as the Process section ===== */
.how{position:relative;overflow:hidden;background:radial-gradient(130% 90% at 50% -10%,#16120b 0%,#0a0a0c 56%)}
.how > .wrap{position:relative;z-index:2}
.how .how__sub{color:var(--on-dark-mut)}
.how .how__panel{background:rgba(18,16,11,.82);border-color:var(--line-dark);box-shadow:0 36px 70px -46px rgba(0,0,0,.7)}
.how .how__loop{background:rgba(15,16,24,.82);border-color:var(--line-dark)}
.how .tabs{background:rgba(255,255,255,.05)}
.how .tab{color:var(--on-dark-mut)}
.how .tab.is-active{background:rgba(255,255,255,.14);color:var(--on-dark);box-shadow:none}
.how .tab-body p{color:var(--on-dark-mut)}
.how .chip{background:rgba(255,255,255,.06);color:var(--on-dark-mut);border:1px solid var(--line-dark)}

/* ===== LAUNCH: dark theme (matches the surrounding sections) ===== */
.launch .launch__sub{color:var(--on-dark-mut)}
.launch .launch__col{background:rgba(255,255,255,.035);border-color:var(--line-dark);
  box-shadow:0 36px 70px -46px rgba(0,0,0,.7)}
.launch .stay__item h4{color:var(--on-dark)}
.launch .stay__item p{color:var(--on-dark-mut)}
.launch .chk li{color:var(--on-dark)}

/* =====================================================================
   SERVICES
   ===================================================================== */
.services .display{margin:.6rem 0 2.6rem}
.svc__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.svc{background:var(--card);border:1px solid var(--line-light);border-radius:22px;padding:26px;position:relative;overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);min-height:200px;display:flex;flex-direction:column}
.svc:hover{transform:translateY(-6px);box-shadow:0 40px 70px -40px rgba(20,22,40,.4)}
.svc__tag{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-light-mut);
  border:1px solid var(--line-light);border-radius:100px;padding:.3em .9em;align-self:flex-start}
.svc__viz{width:54px;height:54px;border-radius:14px;margin:1.4rem 0 auto;background:linear-gradient(135deg,var(--blue),var(--blue-2));position:relative;overflow:hidden;display:grid;place-items:center}
.svc__viz::after{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.5),transparent 60%);pointer-events:none}
/* a gold shine sweeps across every service block */
.svc__viz::before{content:"";position:absolute;top:0;left:-60%;width:55%;height:100%;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);animation:goldSheen 3.4s ease-in-out infinite}
@keyframes goldSheen{0%{left:-60%}55%,100%{left:130%}}
.svc__viz i{position:relative;z-index:2}
/* CLIPPING CAMPAIGNS — play head + scrubbing scan line */
.svc__viz[data-i="camp"] i:nth-child(1){width:0;height:0;border-left:15px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;animation:svcPulse 1.6s ease-in-out infinite}
.svc__viz[data-i="camp"] i:nth-child(2){position:absolute;top:9px;bottom:9px;width:2px;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.85);animation:svcScan 2s ease-in-out infinite}
@keyframes svcPulse{0%,100%{transform:scale(.9)}50%{transform:scale(1.12)}}
@keyframes svcScan{0%{left:13px;opacity:0}22%{opacity:1}78%{opacity:1}100%{left:42px;opacity:0}}
/* LOGO CAMPAIGNS — flipping badge / stamp */
.svc__viz[data-i="logo"]{perspective:200px}
.svc__viz[data-i="logo"] i{width:22px;height:22px;border-radius:6px;border:2.5px solid #fff;animation:svcFlip 2.8s ease-in-out infinite}
.svc__viz[data-i="logo"] i::after{content:"";position:absolute;inset:5px;border-radius:3px;background:#fff;opacity:.85}
@keyframes svcFlip{0%,100%{transform:rotateY(0)}50%{transform:rotateY(180deg)}}
/* MUSIC CAMPAIGNS — bouncing equalizer bars */
.svc__viz[data-i="music"]{display:flex;align-items:flex-end;justify-content:center;gap:3px;padding-bottom:15px}
.svc__viz[data-i="music"] i{width:4px;border-radius:2px;background:#fff;transform-origin:bottom;animation:svcEq .9s ease-in-out infinite}
.svc__viz[data-i="music"] i:nth-child(1){height:24px;animation-delay:0s}
.svc__viz[data-i="music"] i:nth-child(2){height:32px;animation-delay:.16s}
.svc__viz[data-i="music"] i:nth-child(3){height:16px;animation-delay:.32s}
.svc__viz[data-i="music"] i:nth-child(4){height:28px;animation-delay:.48s}
@keyframes svcEq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
/* PODCAST CAMPAIGNS — mic dot + broadcasting rings */
.svc__viz[data-i="pod"] i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%}
.svc__viz[data-i="pod"] i:nth-child(1){width:9px;height:9px;background:#fff}
.svc__viz[data-i="pod"] i:nth-child(2),.svc__viz[data-i="pod"] i:nth-child(3){border:2px solid rgba(255,255,255,.9);animation:svcRing 1.9s ease-out infinite}
.svc__viz[data-i="pod"] i:nth-child(3){animation-delay:.95s}
@keyframes svcRing{0%{width:10px;height:10px;opacity:.9}100%{width:50px;height:50px;opacity:0}}
@media (prefers-reduced-motion:reduce){
  .svc__viz::before,.svc__viz[data-i] i{animation:none}
}
.svc h3{font-weight:700;font-size:1.2rem;margin:1.2rem 0 .3rem}
.svc p{font-size:.92rem;color:var(--on-light-mut)}
.svc__go{position:absolute;right:24px;bottom:24px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--paper-2);transition:transform .4s var(--ease),background .3s}
.svc:hover .svc__go{transform:translate(3px,-3px);background:var(--blue);color:#fff}

/* =====================================================================
   CONTACT
   ===================================================================== */
.contact{text-align:center;background:radial-gradient(120% 80% at 50% 0,#101016,#06060a)}
.contact .pill{display:inline-block}
.contact__title{font-size:clamp(2.4rem,6vw,5rem);margin:.6rem 0 1.6rem}
.contact__sub{max-width:46ch;margin:0 auto 3rem;color:var(--on-dark-mut)}
.contact__panel{max-width:560px;margin:0 auto;background:linear-gradient(180deg,#0e0e13,#08080c);
  border:1px solid var(--line-dark);border-radius:26px;padding:28px;box-shadow:0 60px 120px -50px rgba(0,0,0,.8)}
.contact__note{font-size:.92rem;color:var(--on-dark-mut);padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line-dark)}
.cal{background:#fff;border-radius:18px;padding:18px;color:#0b0c11}
.cal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cal__head span{font-weight:700}
.cal__head button{width:30px;height:30px;border-radius:8px;color:var(--blue);font-size:1.1rem;transition:background .2s}
.cal__head button:hover{background:var(--paper-2)}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;text-align:center}
.cal__dow{font-size:.62rem;letter-spacing:.06em;color:var(--on-light-mut);padding:.4em 0;font-weight:600}
.cal__day{aspect-ratio:1;display:grid;place-items:center;border-radius:9px;font-size:.84rem;font-weight:500;transition:all .2s;position:relative}
.cal__day.is-avail{color:var(--blue);background:rgba(198,160,66,.08);cursor:pointer}
.cal__day.is-avail:hover{background:var(--blue);color:#fff;transform:scale(1.08)}
.cal__day.is-avail::after{content:"";position:absolute;bottom:5px;width:4px;height:4px;border-radius:50%;background:currentColor}
.cal__day.is-mut{color:#c2c6d2}
.cal__day.is-sel{background:var(--blue)!important;color:#fff!important;transform:scale(1.06)}
.cal__day.is-sel::after{background:#fff!important}
.contact__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:2.6rem 0 0}

/* =====================================================================
   FAQ
   ===================================================================== */
.faq .display{margin:.6rem 0 2.4rem}
/* FAQ now uses the site font (Orbitron) — inherits via --font-ui/--font-disp */
/* FAQ title sized so it always sits on 2 lines (was wrapping to 4 on mobile) */
#faq .display{font-size:clamp(1.3rem,4.6vw,4rem);line-height:1.06}
/* long statement titles capped so they sit on 2 rows (roster + launch) */
.roster .display,.launch__title{font-size:clamp(1.45rem,4.6vw,4.2rem);line-height:1.06}
.faq__list{max-width:820px;border-top:1px solid var(--line-light)}
.qa{border-bottom:1px solid var(--line-light)}
.qa summary{list-style:none;cursor:pointer;padding:1.4rem 0;display:flex;align-items:center;gap:1rem;
  font-weight:600;font-size:clamp(1.05rem,2vw,1.3rem);transition:color .3s}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--blue)}
.qa summary i{margin-left:auto;width:24px;height:24px;position:relative;flex:none}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;transition:transform .35s var(--ease)}
.qa summary i::before{width:14px;height:2px;transform:translate(-50%,-50%)}
.qa summary i::after{width:2px;height:14px;transform:translate(-50%,-50%)}
.qa[open] summary i::after{transform:translate(-50%,-50%) scaleY(0)}
.qa[open] summary{color:var(--blue)}
.qa__body{overflow:hidden;max-height:0;transition:max-height .5s var(--ease)}
.qa__body p{padding:0 0 1.5rem;color:var(--on-light-mut);max-width:64ch}

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer{position:relative;background:var(--bg);padding:0 0 36px;overflow:hidden;border-top:1px solid var(--line-dark)}
.footer__glow{position:absolute;top:-34%;left:50%;transform:translateX(-50%);width:80vw;max-width:1100px;height:440px;
  background:radial-gradient(closest-side,rgba(198,160,66,.15),transparent 70%);pointer-events:none}
/* closing CTA band */
.footer__cta{position:relative;display:flex;justify-content:space-between;align-items:center;gap:2rem 3rem;flex-wrap:wrap;
  padding:clamp(48px,6.5vw,88px) 0;border-bottom:1px solid var(--line-dark)}
.footer__cta-title{font-family:var(--font-disp);font-weight:900;letter-spacing:-.01em;line-height:1.04;
  font-size:clamp(1.55rem,3.4vw,2.9rem);color:#fff;max-width:20ch;margin-top:.5rem}
.footer__cta-actions{display:flex;gap:1rem;flex-wrap:wrap}
/* top row */
.footer__top{display:grid;grid-template-columns:1.3fr 1.7fr;gap:40px;margin:3rem 0 2.4rem}
.footer__brandcol p{color:var(--on-dark-mut);max-width:34ch;margin:1.2rem 0 1.6rem}
.footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.footer__col h6{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2);margin-bottom:1rem}
.footer__col a{display:block;color:var(--on-dark-mut);font-size:.92rem;padding:.3rem 0;transition:color .25s}
.footer__col a:hover{color:#fff}
.footer__social{display:flex;gap:1.2rem;flex-wrap:wrap}
.footer__social a{color:var(--on-dark-mut);font-size:.9rem;transition:color .25s}
.footer__social a:hover{color:var(--gold)}
/* big moving wordmark — gold ghost outline */
.footer__wordmark{font-family:var(--font-disp);font-weight:900;letter-spacing:-.02em;
  font-size:clamp(2.2rem,11vw,9rem);line-height:1.04;margin:1.5rem 0;overflow:hidden;white-space:nowrap}
.footer__mq{display:inline-block;white-space:nowrap;width:max-content;will-change:transform;
  color:transparent;-webkit-text-stroke:2px rgba(198,160,66,.45);text-stroke:2px rgba(198,160,66,.45)}
.footer__base{display:flex;justify-content:space-between;align-items:center;gap:1rem 2rem;flex-wrap:wrap;
  border-top:1px solid var(--line-dark);padding-top:24px;font-size:.82rem;color:var(--on-dark-mut)}
.footer__legal{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
.footer__legal a{color:var(--on-dark-mut);transition:color .25s}
.footer__legal a:hover{color:var(--gold)}

/* =====================================================================
   REVEAL BASE STATES (gated on html.js so no-JS shows content)
   ===================================================================== */
html.js [data-reveal]{opacity:0;transform:translateY(34px)}
html.js [data-split] > span,html.js [data-split-lines] .line-inner{will-change:transform}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1080px){
  .how__grid,.shortform__head,.build__head,.case__top,.signal,.launch__grid,.footer__top,.contact__panel{grid-template-columns:1fr}
  .build__grid{grid-template-columns:repeat(2,1fr)}
  .snap{position:relative;top:0;max-width:360px}
  .signal__right{border-left:0;border-top:1px solid var(--line-dark);padding-left:0;padding-top:24px}
  .cwall__track{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:780px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:flex}
  .stats__row,.case__stats,.shortform__cards,.svc__grid,.compare__grid,.footer__cols{grid-template-columns:1fr 1fr}
  .build__grid{grid-template-columns:1fr 1fr}
  .hero__title .l2{margin-left:.4em}
  .cwall__track{grid-template-columns:repeat(3,1fr);gap:16px}
  .system__title br{display:none}
}
@media (max-width:520px){
  .stats__row,.case__stats,.shortform__cards,.compare__grid,.svc__grid,.footer__cols,.build__grid{grid-template-columns:1fr}
  .footer__cols{grid-template-columns:1fr 1fr}
  .cwall__track{grid-template-columns:repeat(2,1fr)}
}

/* short laptop viewports: keep the whole hero (eyebrow → micro) on screen */
@media (max-height:760px) and (min-width:781px){
  .hero__eyebrow{margin-bottom:.8rem}
  .hero__scroll{bottom:74px}
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html.js [data-reveal]{opacity:1;transform:none}
}

/* =====================================================================
   MULTI-PAGE  ·  about / work / case studies / clippers / contact
   ===================================================================== */
.page-hero{position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(128px,19vh,208px) 0 clamp(56px,8vh,104px)}
.page-hero[data-theme="dark"]{background:radial-gradient(120% 95% at 50% -5%,#15151e,#06060a);color:var(--on-dark)}
.page-hero[data-theme="light"]{background:var(--paper);color:var(--on-light)}
.page-hero__grid{position:absolute;inset:0;z-index:-1;opacity:.6;
  background-image:linear-gradient(var(--line-dark) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark) 1px,transparent 1px);
  background-size:62px 62px;-webkit-mask-image:radial-gradient(78% 70% at 50% 26%,#000,transparent 82%);mask-image:radial-gradient(78% 70% at 50% 26%,#000,transparent 82%)}
.page-hero[data-theme="light"] .page-hero__grid{background-image:linear-gradient(var(--line-light) 1px,transparent 1px),linear-gradient(90deg,var(--line-light) 1px,transparent 1px)}
.page-hero__glow{position:absolute;z-index:-1;width:64vw;height:64vw;max-width:900px;max-height:900px;border-radius:50%;left:50%;top:-16%;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(198,160,66,.2),transparent 60%);filter:blur(20px);animation:floatglow 15s ease-in-out infinite alternate}
@keyframes floatglow{to{transform:translateX(-50%) translateY(46px) scale(1.12)}}
.page-hero__inner{text-align:center;max-width:1000px;margin:0 auto;position:relative}
.page-hero h1{font-family:var(--font-disp);font-weight:900;letter-spacing:-.03em;line-height:.96;font-size:clamp(2.6rem,7vw,5.8rem);margin:1rem auto 1.4rem}
.page-hero[data-theme="dark"] h1{color:#fff}
.page-hero .lead{max-width:62ch;margin:0 auto 2.2rem;font-size:clamp(1rem,1.5vw,1.2rem)}
.page-hero[data-theme="dark"] .lead{color:var(--on-dark-mut)}
.page-hero[data-theme="light"] .lead{color:var(--on-light-mut)}
/* book-a-call page: animated white cube wall behind the WHOLE page */
.cube-bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none}
.cube-page{background:#fff}
.cube-page::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:rgba(241,236,226,.34)}
.cube-page main{position:relative;z-index:1}
.cube-page .page-hero[data-theme],.cube-page .section--dark,.cube-page .section--light{background:transparent}
.page-hero--cubes{min-height:74vh;display:flex;align-items:center}
.page-hero--cubes::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 54% at 50% 46%,rgba(244,240,232,.66),rgba(244,240,232,.1) 62%,transparent 80%)}
.page-hero--cubes .page-hero__inner{position:relative;z-index:2;width:100%}
.page-hero--cubes h1{color:#15110a;text-shadow:0 2px 18px rgba(246,243,236,.8)}
.page-hero--cubes .lead{color:#42392b;text-shadow:0 1px 12px rgba(246,243,236,.7)}
.page-hero--cubes .pill{background:rgba(20,16,8,.06);border:1px solid rgba(20,16,8,.2);color:#3a3327}
/* booking + FAQ panels float as cards on the white cubes; loose text goes dark */
.cube-page .contact__note{color:#33301f}
.cube-page #faq .qa{border-bottom-color:rgba(20,16,8,.16)}
.cube-page #faq .faq__list{border-top-color:rgba(20,16,8,.16)}
.cube-page #faq .display,.cube-page #faq .qa summary{color:#16120a}
.cube-page #faq .qa__body p{color:#48402f}
.cube-page #faq .eyebrow{color:#6a5c33}
/* home "Book a call" section: same white cube wall behind it */
.contact--cubes{position:relative;background:transparent}
.contact--cubes > .wrap{position:relative;z-index:2}
.contact--cubes .contact__title{color:#15110a;text-shadow:0 2px 18px rgba(246,243,236,.82)}
.contact--cubes .contact__sub{color:#42392b;text-shadow:0 1px 10px rgba(246,243,236,.72)}
.contact--cubes .pill--dark{background:rgba(20,16,8,.06);border-color:rgba(20,16,8,.2);color:#3a3327}
.contact--cubes .hero__micro{color:#4a4234}
.contact--cubes .btn--ghost{border-color:rgba(20,16,8,.28);color:#241f15}
/* about page: BLACK cube wall behind the dark sections only */
.cube-dark{background:#08080a}
.cube-dark main{position:relative;z-index:1}
.cube-dark::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:rgba(8,8,12,.36)}
.cube-dark .page-hero[data-theme="dark"],.cube-dark .section--dark{background:transparent}
/* light home sections (services + FAQ) sitting on the white cube wall */
/* HOME: ONE cube wall shared by the 3 consecutive light sections (services / book / faq).
   A sticky viewport-height canvas = one seamless animation, scoped to THIS zone only
   (no full-page bg, nothing behind the hero or the dark sections). */
/* the 3 light sections (services / book-a-call / FAQ) share a plain light background — the
   cube wall was removed; this matches the rest of the site's light sections (--paper) */
.cube-zone{position:relative;background:var(--paper)}
.cube-zone > section{position:relative;z-index:1}
.seccubes{position:relative}
.cube-zone .seccubes,.cube-zone .contact--cubes{background:transparent}
.seccubes > .wrap{position:relative;z-index:2}
.seccubes .display{text-shadow:0 2px 18px rgba(245,241,233,.78)}
.seccubes .svc{box-shadow:0 28px 64px -36px rgba(20,16,8,.6)}
.seccubes .faq__list{background:rgba(245,242,235,.92);border-radius:20px;padding:clamp(4px,1.4vw,18px) clamp(14px,2.4vw,30px);
  box-shadow:0 32px 80px -54px rgba(20,16,8,.5)}

/* ===== Founder card (about page) ===== */
.founder{display:grid;grid-template-columns:340px 1fr;gap:clamp(24px,4vw,52px);align-items:center;max-width:1000px;margin:0 auto;
  background:linear-gradient(180deg,#101015,#0a0a0e);border:1px solid rgba(194,161,78,.32);border-radius:24px;
  padding:clamp(20px,3vw,34px);box-shadow:0 44px 96px -50px rgba(194,161,78,.3)}
.founder__photo{width:100%;aspect-ratio:4/5;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(150deg,#e3bd63,#7a571c)}
.founder__photo img{width:100%;height:100%;object-fit:cover;object-position:center 16%;display:block}
.founder__role{display:inline-block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2);font-weight:700;margin-bottom:.5rem}
.founder__name{font-family:var(--font-disp);font-weight:900;font-size:clamp(1.7rem,3.6vw,2.7rem);color:#fff;margin:0 0 1rem;letter-spacing:-.01em}
.founder__bio{color:var(--on-dark-mut);line-height:1.7;max-width:56ch;margin:0 0 1.6rem}
.founder__stats{display:flex;flex-wrap:wrap;gap:1.8rem}
.founder__stats div{display:flex;flex-direction:column;gap:.15rem}
.founder__stats b{font-family:var(--font-disp);font-weight:900;font-size:1.5rem;color:var(--gold-2);font-variant-numeric:tabular-nums}
.founder__stats span{font-size:.76rem;color:var(--on-dark-mut);letter-spacing:.03em}
@media (max-width:760px){ .founder{grid-template-columns:1fr} .founder__photo{max-width:300px;margin:0 auto} }
.page-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.section{padding:clamp(68px,10vh,136px) 0;position:relative}
.section--light{background:var(--paper);color:var(--on-light)}
.section--paper2{background:#fff;color:var(--on-light)}
.section--dark{background:var(--bg);color:var(--on-dark)}
.sec-head{max-width:780px;margin:0 auto 3rem;text-align:center}
.sec-head .display{margin:.6rem 0}
.sec-head p{color:var(--on-light-mut);font-size:1.05rem}
.section--dark .sec-head p{color:var(--on-dark-mut)}

/* word-scrub headline */
.words{font-family:var(--font-disp);font-weight:900;letter-spacing:-.02em;line-height:1.08;font-size:clamp(1.7rem,4.4vw,3.4rem);max-width:20ch}
.words.center{margin:0 auto;text-align:center}

/* stat strip */
.statstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:2.4rem 0;border-top:1px solid var(--line-light);border-bottom:1px solid var(--line-light)}
.section--dark .statstrip,.page-hero[data-theme="dark"] .statstrip{border-color:var(--line-dark)}
.statstrip .s-k{font-family:var(--font-disp);font-weight:900;font-size:clamp(1.5rem,3.4vw,2.7rem);color:var(--blue);font-variant-numeric:tabular-nums}
.section--dark .statstrip .s-k,.page-hero[data-theme="dark"] .statstrip .s-k{color:var(--gold-2)}
.statstrip .s-l{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-light-mut);margin-top:.4rem}
.section--dark .statstrip .s-l,.page-hero[data-theme="dark"] .statstrip .s-l{color:var(--on-dark-mut)}

/* value / principle cards */
.vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.vcard{background:var(--card);border:1px solid var(--line-light);border-radius:20px;padding:24px;min-height:208px;display:flex;flex-direction:column;transition:transform .5s var(--ease),box-shadow .5s}
.vcard:hover{transform:translateY(-6px);box-shadow:0 30px 60px -42px rgba(20,22,40,.4)}
.section--dark .vcard{background:var(--bg-3);border-color:var(--line-dark)}
.vcard .vnum{font-family:var(--font-mono);color:var(--gold-deep);font-size:.82rem}
.section--dark .vcard .vnum{color:var(--gold-2)}
.vcard .viz{width:44px;height:44px;border-radius:12px;margin:auto 0 1rem;background:linear-gradient(135deg,var(--blue),var(--blue-2));position:relative;overflow:hidden}
.vcard .viz::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.55),transparent 60%)}
.vcard h3{font-weight:700;font-size:1.12rem;margin:0 0 .35rem}
.vcard p{font-size:.9rem;color:var(--on-light-mut)}
.section--dark .vcard p{color:var(--on-dark-mut)}

/* leadership / quote band */
.band{background:linear-gradient(135deg,#0c0c12,#06060a);border:1px solid var(--line-dark);border-radius:26px;padding:clamp(30px,5vw,60px);color:#fff;position:relative;overflow:hidden}
.band::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 100% 0,rgba(198,160,66,.16),transparent 60%)}
.band .display{position:relative}
.band .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:1.6rem;position:relative}
.band .tags span{padding:.45em 1em;border-radius:100px;border:1px solid var(--line-dark);font-size:.78rem;color:var(--on-dark-mut)}

/* ---- WORK: sticky stacked panels ---- */
.stack{position:relative;display:flex;flex-direction:column;gap:22px}
.stack__panel{position:sticky;top:92px;border-radius:26px;overflow:hidden;color:#fff;
  background:linear-gradient(135deg,#10101a,#0a0a10);border:1px solid var(--line-dark);
  display:grid;grid-template-columns:1.05fr .95fr;gap:30px;padding:clamp(26px,3.6vw,46px);min-height:60vh;
  box-shadow:0 -16px 70px -34px rgba(0,0,0,.85)}
.stack__panel .accent{color:var(--gold-2)}
.stack__l{display:flex;flex-direction:column}
.stack__num{font-family:var(--font-mono);font-size:.82rem;color:var(--gold-2)}
.stack__t{font-family:var(--font-disp);font-weight:900;font-size:clamp(1.7rem,3.8vw,3rem);margin:.5rem 0 1rem;letter-spacing:-.02em}
.stack__d{color:var(--on-dark-mut);max-width:46ch}
.stack__list{list-style:none;margin-top:auto;display:flex;flex-direction:column;gap:.7rem;padding-top:1.4rem}
.stack__list li{display:flex;gap:.7rem;align-items:center;font-size:.95rem;color:var(--on-dark)}
.stack__list li::before{content:"";width:18px;height:18px;border-radius:6px;background:linear-gradient(135deg,var(--gold),var(--gold-deep));flex:none}
.stack__viz{border-radius:18px;background:#070709;border:1px solid var(--line-dark);position:relative;overflow:hidden;min-height:240px;display:grid;place-items:center}
.stack__viz .ring{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.08)}
.stack__viz .mic{width:70px;height:92px;opacity:.9;color:#fff;z-index:2}
.stack__chip{position:absolute;top:16px;left:16px;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-mut)}

/* ---- CASE STUDIES: filters + grid ---- */
.filters{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:2.6rem}
.filter{padding:.6em 1.25em;border-radius:100px;border:1px solid var(--line-light);font-size:.86rem;font-weight:500;background:var(--card);color:var(--on-light);transition:all .25s var(--ease)}
.filter.is-active{background:#0b0c11;color:#fff;border-color:#0b0c11}
.cs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cs-card{border-radius:20px;overflow:hidden;background:var(--card);border:1px solid var(--line-light);transition:transform .5s var(--ease),box-shadow .5s,opacity .4s;cursor:pointer;will-change:transform}
.cs-card:hover{transform:translateY(-6px);box-shadow:0 36px 64px -40px rgba(20,22,40,.42)}
.cs-card__art{aspect-ratio:5/4;color:#fff;position:relative;overflow:hidden;background:linear-gradient(150deg,var(--c1,#C6A042),var(--c2,#7a5d24))}
.cs-card__art::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 30% 25%,rgba(255,255,255,.28),transparent 60%);mix-blend-mode:overlay}
.cs-card__cat{position:absolute;top:14px;left:14px;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85);z-index:2}
.cs-card__views{position:absolute;bottom:14px;right:14px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:.3em .7em;font-size:.8rem;font-weight:700;z-index:2}
/* animated growth-chart art (one per client, instead of a static card) */
.cs-card__chart{position:absolute;left:0;right:0;bottom:0;height:64%;display:flex;align-items:flex-end;justify-content:center;gap:5px;padding:0 11% 15%;z-index:1}
.cs-card__chart i{flex:1;max-width:17px;background:linear-gradient(180deg,#fff,rgba(255,255,255,.5));border-radius:3px 3px 0 0;
  transform:scaleY(0);transform-origin:bottom;animation:csGrow 3.8s cubic-bezier(.45,0,.2,1) infinite;box-shadow:0 0 12px rgba(255,255,255,.22)}
@keyframes csGrow{0%{transform:scaleY(0)}22%,66%{transform:scaleY(1)}88%,100%{transform:scaleY(0)}}
.cs-card__body{padding:18px 18px 20px}
.cs-card__name{font-weight:700;font-size:1.12rem}
.cs-card__brief{color:var(--on-light-mut);font-size:.9rem;line-height:1.55;margin-top:.5rem}
.cs-card.is-hidden{display:none}
@media (prefers-reduced-motion:reduce){.cs-card__chart i{animation:none;transform:scaleY(1)}}

/* ---- CLIPPERS: earnings calculator + steps ---- */
.calc{background:var(--card);border:1px solid var(--line-light);border-radius:26px;padding:clamp(26px,4vw,42px);max-width:720px;margin:0 auto;box-shadow:0 50px 90px -56px rgba(20,22,40,.45);text-align:center}
.calc__label{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-light-mut)}
.calc__out{font-family:var(--font-disp);font-weight:900;font-size:clamp(2.6rem,7vw,4.6rem);color:var(--blue);font-variant-numeric:tabular-nums;line-height:1;margin:.4rem 0}
.calc__views{color:var(--on-light-mut);margin-bottom:2rem}
.calc__views b{color:var(--on-light)}
.calc input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:10px;border-radius:10px;background:linear-gradient(90deg,var(--blue),var(--blue-2));outline:none;cursor:pointer}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid var(--blue);box-shadow:0 8px 18px -4px rgba(198,160,66,.55)}
.calc__row{display:flex;justify-content:space-between;font-size:.78rem;color:var(--on-light-mut);margin-top:.7rem}
.calc__note{margin-top:1.6rem;font-size:.82rem;color:var(--on-light-mut)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
.step{background:var(--card);border:1px solid var(--line-light);border-radius:20px;padding:26px;position:relative;min-height:190px;display:flex;flex-direction:column}
.section--dark .step{background:var(--bg-3);border-color:var(--line-dark)}
.step::before{counter-increment:s;content:"0" counter(s);font-family:var(--font-mono);color:var(--gold-deep);font-size:.9rem}
.section--dark .step::before{color:var(--gold-2)}
.step h3{margin:auto 0 .35rem;font-size:1.12rem;font-weight:700}
.step p{font-size:.88rem;color:var(--on-light-mut)}
.section--dark .step p{color:var(--on-dark-mut)}
.feed{display:flex;gap:14px;flex-wrap:nowrap;width:max-content}
.feed__clip{width:150px;height:264px;border-radius:16px;flex:none;position:relative;overflow:hidden;box-shadow:0 20px 40px -22px rgba(0,0,0,.6);display:flex;align-items:flex-end;padding:12px}
.feed__clip span{font-size:.74rem;font-weight:700;color:#fff;position:relative;z-index:2}
.feed__clip::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.feed-mask{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}

/* ---- CONTACT: form ---- */
.cform{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:680px;margin:0 auto;text-align:left}
.field{display:flex;flex-direction:column;gap:.45rem}
.field--full{grid-column:1/-1}
.field label{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-mut)}
.field input,.field textarea,.field select{padding:.9em 1.05em;border-radius:12px;border:1px solid var(--line-dark);background:rgba(255,255,255,.04);font:inherit;color:#fff;transition:border-color .25s,box-shadow .25s,background .25s}
.field textarea{resize:vertical;min-height:110px}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.35)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--blue-2);box-shadow:0 0 0 4px rgba(198,160,66,.16);background:rgba(255,255,255,.06)}
.cform .form-note{grid-column:1/-1;font-size:.8rem;color:var(--on-dark-mut)}
.form-sent{text-align:center;color:var(--gold-2);font-weight:600;padding:1rem;display:none}
/* single-column intake form (matches the reference) + styled selects */
.cform--stack{grid-template-columns:1fr;max-width:none}
.field select{appearance:none;-webkit-appearance:none;padding-right:2.6em;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23c6a042' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.05em center}
.field select option{background:#14141a;color:#fff}
.field select:has(option[value=""]:checked){color:rgba(255,255,255,.5)}
.contact-cols{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:start}
.contact-options{display:flex;flex-direction:column;gap:12px}
.copt{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:16px;border:1px solid var(--line-dark);background:rgba(255,255,255,.03);transition:border-color .25s,transform .4s}
.copt:hover{border-color:rgba(198,160,66,.4);transform:translateX(4px)}
.copt .ic{width:38px;height:38px;border-radius:11px;flex:none;background:linear-gradient(135deg,var(--gold),var(--gold-deep));display:grid;place-items:center;color:#0b0c11;font-weight:900}
.copt h4{font-size:1rem;font-weight:700;color:#fff}
.copt p{font-size:.85rem;color:var(--on-dark-mut)}

@media (max-width:980px){
  .vgrid,.steps{grid-template-columns:repeat(2,1fr)}
  .cs-grid{grid-template-columns:repeat(2,1fr)}
  .stack__panel{grid-template-columns:1fr}
  .contact-cols{grid-template-columns:1fr}
}
@media (max-width:560px){
  .vgrid,.steps,.cs-grid,.statstrip,.cform{grid-template-columns:1fr}
  .statstrip{grid-template-columns:1fr 1fr}
}

/* ---- CASE STUDIES hero (isometric wall) ---- */
.cs-hero{position:relative;min-height:90vh;background:radial-gradient(120% 90% at 50% 18%,#13131b,#06060a);overflow:hidden;display:flex;align-items:flex-end;padding:0 0 clamp(44px,7vh,96px)}
.cs-hero .clients__stage{position:absolute;inset:0;height:100%;perspective:1500px;perspective-origin:50% 40%}
.cs-hero .cwall{transform:rotateX(46deg) rotateZ(30deg)}
.cs-hero .cwall__track{grid-template-columns:repeat(6,1fr);padding:9vh 5vw}
.cs-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 80% at 50% 60%,transparent 40%,#06060a 92%)}
.cs-hero__overlay{position:relative;z-index:3;width:100%;text-align:left}
.cs-hero__overlay h1{font-family:var(--font-disp);font-weight:900;font-size:clamp(2.8rem,10vw,7.4rem);letter-spacing:-.03em;color:#fff;line-height:.92;margin-top:.6rem}
.cs-badge{display:inline-flex;align-items:center;gap:.6em;background:rgba(255,255,255,.08);border:1px solid var(--line-dark);padding:.55em 1.05em;border-radius:100px;font-size:.85rem;color:#fff}
.cs-badge b{color:var(--gold-2)}
@media (max-width:760px){ .cs-hero .cwall__track{grid-template-columns:repeat(4,1fr)} }

/* =====================================================================
   CLIENT SHOWCASE + DETAIL PANEL  (homepage "scaled by Clipease")
   ===================================================================== */
#clients .cwall__track{grid-template-columns:repeat(6,1fr);gap:14px;padding:0 4vw}
.ccard--show{aspect-ratio:.62;cursor:pointer;transition:filter .3s;padding:11px;border-radius:13px}
.ccard--show .ccard__body{margin-top:auto}
.ccard--show .ccard__ic{width:24px;height:24px}
.ccard--show .ccard__ic svg{width:17px;height:17px}
.ccard--show .ccard__pulse{width:20px;height:20px}
.ccard--show .ccard__name{font-size:.74rem}
.ccard__stat{font-size:.54rem;font-weight:600;opacity:.85;margin-top:.18rem;line-height:1.25}
.ccard__open{font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s;margin-top:.4rem;font-weight:700}
.ccard--show:hover{filter:brightness(1.1)}
.ccard--show:hover .ccard__open{opacity:.96;transform:none}
@media (max-width:900px){ #clients .cwall__track{grid-template-columns:repeat(4,1fr)} }
@media (max-width:560px){ #clients .cwall__track{grid-template-columns:repeat(3,1fr)} }

.cdetail{position:fixed;inset:0;z-index:9500;display:none;align-items:center;justify-content:center;padding:clamp(14px,4vw,48px)}
.cdetail.is-open{display:flex}
.cdetail__backdrop{position:absolute;inset:0;background:rgba(2,2,4,.8);backdrop-filter:blur(16px) saturate(1.1)}
.cdetail__panel{position:relative;width:min(1060px,96vw);max-height:92vh;overflow:auto;border-radius:26px;color:#fff;
  background:linear-gradient(160deg,#13110b,#070707);border:1px solid rgba(198,160,66,.3);
  box-shadow:0 60px 150px -40px rgba(0,0,0,.92),0 0 90px -44px rgba(198,160,66,.45);
  padding:clamp(26px,3.4vw,48px);transform-style:preserve-3d}
.cdetail__close{position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.07);
  border:1px solid var(--line-dark);color:#fff;font-size:1rem;display:grid;place-items:center;transition:background .25s,transform .35s;z-index:3}
.cdetail__close:hover{background:rgba(255,255,255,.15);transform:rotate(90deg)}
.cdetail__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3vw,52px);align-items:center}
.cdetail__tag{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2)}
.cdetail__name{font-family:var(--font-disp);font-weight:900;font-size:clamp(2.2rem,5vw,3.8rem);letter-spacing:-.02em;line-height:1;margin:.6rem 0 .9rem;
  background:linear-gradient(118deg,#fff 20%,var(--gold-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.cdetail__blurb{color:var(--on-dark-mut);font-size:1rem;line-height:1.6;max-width:48ch;margin-bottom:1.9rem}
.cdetail__big{display:flex;gap:34px;margin-bottom:1.9rem}
.cbig__k{display:block;font-family:var(--font-disp);font-weight:900;font-size:clamp(1.9rem,3.6vw,3rem);color:var(--gold-2);font-variant-numeric:tabular-nums;line-height:1}
.cbig__l{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-mut);margin-top:.5rem;display:block}
.cdetail__right{background:rgba(255,255,255,.03);border:1px solid var(--line-dark);border-radius:18px;padding:24px}
.cchart{margin-bottom:24px}
.cchart__t{font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--on-dark-mut);display:block;margin-bottom:14px}
.cchart__plot{position:relative;height:130px}
.cchart__bars{position:absolute;inset:0;display:flex;align-items:flex-end;gap:6px}
.cchart__bars i{flex:1;height:0;align-self:flex-end;border-radius:5px 5px 0 0;
  background:linear-gradient(180deg,var(--gold-2),rgba(198,160,66,.25))}
.cchart__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.cchart__line{fill:none;stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 7px rgba(255,255,255,.6))}
.cchart__area{fill:rgba(255,255,255,.09)}
.cplat__row{display:grid;grid-template-columns:58px 1fr;align-items:center;gap:12px;margin-bottom:11px;font-size:.82rem;color:var(--on-dark-mut)}
.cplat__bar{height:9px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden}
.cplat__bar i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,var(--gold-deep),var(--gold-2))}
body.cdetail-open{overflow:hidden}
@media (max-width:760px){ .cdetail__grid{grid-template-columns:1fr} .cchart__plot{height:96px} .cdetail__panel{max-height:90vh} }

/* =====================================================================
   ROSTER — moving client cards with animated 3D icons
   ===================================================================== */
.roster{padding:clamp(44px,6vh,84px) 0;overflow:hidden}
.roster .sec-head{margin-bottom:2.2rem;max-width:1080px}
.roster__rail{margin:11px 0}
.roster__track{display:flex;gap:18px;width:max-content;will-change:transform}
.rcard{flex:none;width:168px;height:256px;border-radius:18px;padding:16px;color:#fff;position:relative;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 26px 48px -24px rgba(0,0,0,.7)}
.rcard::after{content:"";position:absolute;inset:0;background:radial-gradient(62% 55% at 26% 16%,rgba(255,255,255,.28),transparent 60%);mix-blend-mode:overlay;pointer-events:none}
.rcard__meta{margin-top:auto;position:relative;z-index:2}
.rcard__name{font-weight:900;font-size:1.04rem;letter-spacing:-.01em}
.rcard__stat{font-size:.64rem;opacity:.86;margin-top:.22rem}
.rico{position:relative;width:58px;height:58px;margin:8px auto 0;display:grid;place-items:center;z-index:2}
/* cube */
.rico--cube{perspective:220px}
.cube{position:relative;width:32px;height:32px;transform-style:preserve-3d;animation:rcube 6s linear infinite}
.cube i{position:absolute;width:32px;height:32px;background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.9)}
.cube i:nth-child(1){transform:rotateY(0) translateZ(16px)}
.cube i:nth-child(2){transform:rotateY(90deg) translateZ(16px)}
.cube i:nth-child(3){transform:rotateY(180deg) translateZ(16px)}
.cube i:nth-child(4){transform:rotateY(270deg) translateZ(16px)}
.cube i:nth-child(5){transform:rotateX(90deg) translateZ(16px)}
.cube i:nth-child(6){transform:rotateX(-90deg) translateZ(16px)}
@keyframes rcube{0%{transform:rotateX(-22deg) rotateY(0)}100%{transform:rotateX(-22deg) rotateY(360deg)}}
/* coin */
.coin{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#fff,rgba(255,255,255,.45));box-shadow:0 0 18px rgba(255,255,255,.4);animation:rcoin 3.4s linear infinite}
@keyframes rcoin{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}
/* orb */
.orb{width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#fff,rgba(255,255,255,.3) 60%,transparent);animation:rorb 2.4s ease-in-out infinite}
@keyframes rorb{0%,100%{transform:scale(.82);filter:brightness(1)}50%{transform:scale(1.12);filter:brightness(1.5)}}
/* rings */
.rico--rings{perspective:220px}
.rico--rings i{position:absolute;inset:8px;border:2px solid rgba(255,255,255,.85);border-radius:50%}
.rico--rings i:nth-child(1){animation:rring1 4s linear infinite}
.rico--rings i:nth-child(2){animation:rring2 5.2s linear infinite}
.rico--rings i:nth-child(3){inset:15px;border-color:rgba(255,255,255,.5);animation:rring1 3.2s linear infinite reverse}
@keyframes rring1{0%{transform:rotateX(68deg) rotateZ(0)}100%{transform:rotateX(68deg) rotateZ(360deg)}}
@keyframes rring2{0%{transform:rotateY(68deg) rotateZ(0)}100%{transform:rotateY(68deg) rotateZ(360deg)}}
/* bars */
.rico--bars{display:flex;align-items:flex-end;gap:4px;height:42px}
.rico--bars i{width:6px;height:100%;background:#fff;border-radius:3px;transform-origin:bottom;animation:rbar 1s ease-in-out infinite alternate}
.rico--bars i:nth-child(2){animation-duration:.66s}
.rico--bars i:nth-child(3){animation-duration:1.3s}
.rico--bars i:nth-child(4){animation-duration:.85s}
@keyframes rbar{0%{transform:scaleY(.22)}100%{transform:scaleY(1)}}
/* play */
.rico--play{perspective:200px}
.rico--play i{width:0;height:0;border-left:30px solid #fff;border-top:17px solid transparent;border-bottom:17px solid transparent;animation:rplay 3.6s linear infinite}
@keyframes rplay{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}
/* diamond */
.dia{width:32px;height:32px;background:linear-gradient(135deg,#fff,rgba(255,255,255,.4));animation:rdia 5s linear infinite}
@keyframes rdia{0%{transform:rotate3d(1,1,0,0deg)}100%{transform:rotate3d(1,1,0,360deg)}}
/* wave */
.rico--wave{display:flex;align-items:center;gap:5px;height:36px}
.rico--wave i{width:7px;height:7px;border-radius:50%;background:#fff;animation:rwave 1.2s ease-in-out infinite}
.rico--wave i:nth-child(2){animation-delay:.12s}
.rico--wave i:nth-child(3){animation-delay:.24s}
.rico--wave i:nth-child(4){animation-delay:.36s}
.rico--wave i:nth-child(5){animation-delay:.48s}
@keyframes rwave{0%,100%{transform:translateY(8px);opacity:.5}50%{transform:translateY(-8px);opacity:1}}
/* burst */
.rico--burst{animation:rburst 6.5s linear infinite}
.rico--burst i{position:absolute;inset:0;margin:auto;background:#fff;border-radius:3px}
.rico--burst i:nth-child(1){width:7px;height:46px}
.rico--burst i:nth-child(2){width:46px;height:7px}
@keyframes rburst{0%{transform:rotate(0) scale(.85)}50%{transform:rotate(180deg) scale(1.12)}100%{transform:rotate(360deg) scale(.85)}}
@media (max-width:640px){ .rcard{width:142px;height:220px} }

/* =====================================================================
   PROCESS — scroll-stepped timeline
   ===================================================================== */
.proc{padding:clamp(60px,9vh,120px) 0;background:var(--paper);color:var(--ink)}
.proc__head{text-align:center;max-width:760px;margin:0 auto}
.proc__title{font-size:clamp(1.9rem,4.6vw,3.4rem);line-height:1.05;margin-top:1rem}
.proc__sub{color:var(--on-light-mut);margin-top:1rem;font-size:1.04rem;line-height:1.6}
.proc__timeline{position:relative;max-width:1000px;margin:clamp(36px,6vh,76px) auto 0;padding:6px 0}
.proc__line{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:2px;background:var(--line-light);overflow:hidden;border-radius:2px}
.proc__line-fill{position:absolute;inset:0;background:var(--gold);transform:scaleY(0);transform-origin:top}
.proc__step{position:relative;width:50%;box-sizing:border-box;margin:clamp(24px,5vh,60px) 0}
.proc__step--right{margin-left:50%;padding-left:48px}
.proc__step--left{margin-right:50%;padding-right:48px;text-align:right}
.proc__node{position:absolute;top:30px;width:16px;height:16px;border-radius:50%;background:var(--ink);border:3px solid var(--paper);box-shadow:0 0 0 2px var(--line-light);z-index:2;transition:background .45s,box-shadow .45s,transform .45s}
.proc__step--right .proc__node{left:-8px}
.proc__step--left .proc__node{right:-8px}
.proc__step.is-on .proc__node{background:var(--gold);box-shadow:0 0 0 5px rgba(198,160,66,.26);transform:scale(1.12)}
.proc__card{background:var(--card);border-radius:18px;padding:clamp(22px,2.4vw,32px);box-shadow:0 30px 60px -34px rgba(16,18,34,.42);border:1px solid var(--line-light-2)}
.proc__step--left .proc__card{display:inline-block;text-align:left;max-width:100%}
.proc__ico{display:grid;place-items:center;width:48px;height:48px;border-radius:13px;background:var(--ink);color:#fff;margin-bottom:1.1rem}
.proc__step--left .proc__ico{margin-left:auto}
.proc__card h3{font-size:1.04rem;font-weight:900;text-transform:uppercase;letter-spacing:.03em;margin-bottom:.6rem}
.proc__card p{color:var(--on-light-mut);line-height:1.62;font-size:.96rem}
@media (max-width:760px){
  .proc__line{left:18px;transform:none}
  .proc__step,.proc__step--right,.proc__step--left{width:100%;margin-left:0;margin-right:0;text-align:left;padding:0 0 0 48px}
  .proc__step--left .proc__card{display:block}
  .proc__step--left .proc__ico{margin-left:0}
  .proc__step--right .proc__node,.proc__step--left .proc__node{left:10px;right:auto}
}

/* =====================================================================
   PROCESS — futuristic background + enhanced timeline animation
   ===================================================================== */
.proc{position:relative;overflow:hidden}
.proc .wrap{position:relative;z-index:1}
.proc__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
/* receding perspective grid (tech floor) */
.proc__grid{position:absolute;left:50%;bottom:-12%;width:200%;height:72%;
  transform:translateX(-50%) perspective(540px) rotateX(63deg);transform-origin:bottom center;
  background-image:linear-gradient(rgba(198,160,66,.20) 1px,transparent 1px),linear-gradient(90deg,rgba(198,160,66,.20) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:linear-gradient(transparent,#000 55%,transparent);mask-image:linear-gradient(transparent,#000 55%,transparent);
  animation:procGrid 5.5s linear infinite}
@keyframes procGrid{from{background-position:0 0}to{background-position:0 48px}}
/* drifting gold light orbs */
.proc__orb{position:absolute;border-radius:50%;filter:blur(54px);opacity:.5;
  background:radial-gradient(circle,rgba(198,160,66,.55),transparent 70%)}
.proc__orb--1{width:340px;height:340px;left:-70px;top:6%;animation:procFloat1 15s ease-in-out infinite}
.proc__orb--2{width:280px;height:280px;right:-50px;top:46%;animation:procFloat2 19s ease-in-out infinite}
@keyframes procFloat1{0%,100%{transform:translate(0,0)}50%{transform:translate(44px,38px)}}
@keyframes procFloat2{0%,100%{transform:translate(0,0)}50%{transform:translate(-52px,-34px)}}
/* vertical scan beam */
.proc__scan{position:absolute;left:0;right:0;height:150px;top:-150px;
  background:linear-gradient(180deg,transparent,rgba(198,160,66,.12),transparent);animation:procScan 7s linear infinite}
@keyframes procScan{from{top:-150px}to{top:100%}}
/* timeline: glowing fill edge + traveling comet */
.proc__line-fill{box-shadow:0 0 12px 1px rgba(198,160,66,.6)}
.proc__line::after{content:"";position:absolute;left:50%;top:0;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;
  background:#fff;box-shadow:0 0 14px 5px rgba(198,160,66,.85),0 0 4px 1px rgba(255,255,255,.9);
  animation:procComet 3.6s linear infinite}
@keyframes procComet{0%{top:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:100%;opacity:0}}
/* node: ripple + glow when active */
.proc__node::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(198,160,66,.7);opacity:0}
.proc__step.is-on .proc__node{box-shadow:0 0 0 5px rgba(198,160,66,.26),0 0 20px 3px rgba(198,160,66,.55)}
.proc__step.is-on .proc__node::after{animation:procRipple 1.9s ease-out infinite}
@keyframes procRipple{0%{transform:scale(.7);opacity:.85}100%{transform:scale(2.7);opacity:0}}
/* cards: top accent line + shimmer sweep on activate */
.proc__card{position:relative;overflow:hidden}
.proc__card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;opacity:0;transition:opacity .5s;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.proc__step.is-on .proc__card::before{opacity:.95}
.proc__card::after{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-130%);
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.20) 50%,transparent 58%)}
.proc__step.is-on .proc__card::after{animation:procShimmer 1.7s ease-out .15s}
@keyframes procShimmer{to{transform:translateX(130%)}}
@media (prefers-reduced-motion:reduce){
  .proc__grid,.proc__orb--1,.proc__orb--2,.proc__scan,.proc__line::after,
  .proc__step.is-on .proc__node::after,.proc__step.is-on .proc__card::after{animation:none}
}

/* PROCESS — dark futuristic theme overrides (cards stay white & pop) */
.proc[data-theme]{background:radial-gradient(130% 90% at 50% -10%,#16120b 0%,#0a0a0c 56%)}
.proc__sub{color:var(--on-dark-mut)}
.proc__card h3{color:var(--ink)}
.proc__line{background:rgba(255,255,255,.12)}
.proc__node{border-color:#0a0a0c;box-shadow:0 0 0 2px rgba(255,255,255,.14)}
.proc .pill{background:rgba(198,160,66,.14);color:var(--gold);border:1px solid rgba(198,160,66,.42)}
.proc__grid{background-image:linear-gradient(rgba(198,160,66,.30) 1px,transparent 1px),linear-gradient(90deg,rgba(198,160,66,.30) 1px,transparent 1px)}
.proc__orb{opacity:.7}

/* =====================================================================
   GLOBAL — rotating 3D globe section
   ===================================================================== */
.globe{position:relative;height:100vh;min-height:640px;overflow:hidden;background:var(--bg);color:var(--on-dark);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:clamp(60px,10vh,130px) 0;text-align:center}
/* globe canvas is a FULL-section background; a radial vignette fades its glow into the
   black before any edge, so it blends into the page with no visible box */
.globe__stage{position:absolute;inset:0;z-index:1;pointer-events:none;transform-origin:center center;will-change:transform,opacity}
.globe__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.globe__stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(72% 58% at 50% 50%,transparent 54%,var(--bg) 94%)}
.globe__labels{position:absolute;inset:0;z-index:2;pointer-events:none}
.globe__kicker{position:relative;z-index:2;font-family:var(--font-disp);font-weight:900;letter-spacing:.04em;
  text-transform:uppercase;font-size:clamp(2.2rem,7vw,5.2rem);line-height:1;color:var(--on-dark);text-shadow:0 4px 40px #000,0 2px 16px #000}
.globe__foot{position:relative;z-index:2;width:100%}
.globe__pin{position:absolute;top:0;left:0;padding:3px 8px;border:1px solid rgba(198,160,66,.5);border-radius:7px;
  background:rgba(10,10,14,.72);color:var(--gold);font-size:.58rem;font-weight:700;letter-spacing:.04em;
  white-space:nowrap;box-shadow:0 0 14px rgba(198,160,66,.18);will-change:transform,opacity}
.globe__title{position:relative;z-index:2;font-family:var(--font-disp);font-weight:900;letter-spacing:-.01em;text-transform:uppercase;
  font-size:clamp(2.8rem,9.5vw,7rem);line-height:.92;text-shadow:0 6px 50px #000,0 2px 12px rgba(0,0,0,.7)}
.globe__sub{position:relative;z-index:2;color:var(--on-dark-mut);max-width:46ch;margin:1.4rem auto 0;font-size:1.04rem;line-height:1.6;text-shadow:0 2px 18px #000}
.globe__note{position:relative;z-index:2;color:rgba(244,245,250,.42);max-width:52ch;margin:.7rem auto 0;font-size:.82rem;letter-spacing:.02em}
/* side labels + connector lines */
.globe__side{position:absolute;z-index:4;display:flex;align-items:center;gap:0;white-space:nowrap}
.globe__side b{padding:8px 12px;border:1px solid rgba(198,160,66,.45);border-radius:9px;background:rgba(10,10,14,.72);
  color:var(--gold);font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 0 18px rgba(198,160,66,.15)}
.globe__side i{position:relative;height:1px;width:clamp(26px,5vw,70px);background:linear-gradient(90deg,var(--gold),transparent)}
.globe__side--tr i,.globe__side--br i{background:linear-gradient(90deg,transparent,var(--gold))}
.globe__side i::after{content:"";position:absolute;top:50%;width:6px;height:6px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 10px var(--gold);transform:translateY(-50%)}
.globe__side--l i::after{right:-1px}
.globe__side--tr i::after,.globe__side--br i::after{left:-1px}
.globe__side--l{left:3vw;top:50%;transform:translateY(-50%)}
.globe__side--tr{right:3vw;top:30%}
.globe__side--br{right:3vw;top:70%}
@media (max-width:900px){
  .globe__side{display:none}
}

/* =====================================================================
   CLIPEASE ARCADE — hidden client-exclusive zombie game (opened from logo)
   ===================================================================== */
.cg{position:fixed;inset:0;z-index:100000;background:#070708;display:flex;align-items:center;justify-content:center;overflow:hidden;font-family:var(--font-ui)}
.cg__close{position:absolute;top:18px;right:20px;z-index:6;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:1rem;cursor:pointer;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center}
.cg__close:hover{background:rgba(255,255,255,.18)}
.cg__gate{position:relative;text-align:center;max-width:440px;margin:20px;padding:40px 32px;color:#fff;
  background:radial-gradient(120% 100% at 50% 0,#19140a,#0a0a0c);border:1px solid rgba(198,160,66,.28);border-radius:24px;box-shadow:0 50px 120px -40px rgba(0,0,0,.85)}
.cg__kspr{display:inline-block;font-size:.6rem;letter-spacing:.34em;font-weight:900;color:#0a0a0c;background:var(--gold);padding:5px 13px;border-radius:100px;margin-bottom:18px}
.cg__lock{font-size:2.6rem;line-height:1;margin-bottom:8px}
.cg__title{font-family:var(--font-disp);font-weight:600;font-size:2rem;letter-spacing:-.01em;color:var(--gold);margin:0 0 10px}
.cg__sub{font-size:.95rem;line-height:1.55;color:rgba(255,255,255,.72);margin:0 0 22px}
.cg__sub b{color:#fff}
.cg__form{display:flex;gap:10px;justify-content:center}
.cg__input{flex:1;max-width:230px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);border-radius:12px;
  padding:13px 16px;color:#fff;font-size:1.05rem;letter-spacing:.3em;text-align:center;outline:none}
.cg__input::placeholder{letter-spacing:.18em;color:rgba(255,255,255,.4)}
.cg__input:focus{border-color:var(--gold)}
.cg__enter{background:var(--gold);color:#0a0a0c;font-weight:700;border:none;border-radius:12px;padding:0 22px;cursor:pointer;font-size:.95rem;transition:filter .2s}
.cg__enter:hover{filter:brightness(1.08)}
.cg__err{margin:14px 0 0;color:#ff7a7a;font-size:.85rem;min-height:1em;opacity:0;transition:opacity .2s}
.cg__err.show{opacity:1}
.cg--shake{animation:cgShake .4s}
@keyframes cgShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}
.cg__stage{position:absolute;inset:0}
.cg__stage canvas{display:block;width:100%;height:100%;cursor:none;touch-action:none}
.cg__hud{position:absolute;top:0;left:0;right:0;padding:16px 20px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;pointer-events:none}
.cg__hud-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cg__pill{background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:.72rem;letter-spacing:.12em;font-weight:700;padding:7px 12px;border-radius:100px}
.cg__pill b{color:var(--gold)}
.cg__hp{display:block;width:170px;height:13px;border-radius:100px;background:rgba(255,255,255,.12);overflow:hidden;border:1px solid rgba(255,255,255,.16)}
.cg__hp i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff5a4a,#ffd86b);transition:width .12s linear}
.cg__hp i.cg__hp--god{background:linear-gradient(90deg,#ffd86b,#c6a042);box-shadow:0 0 10px rgba(255,216,107,.7)}
.cg__weaps{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.cg__weap{background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.6);font-size:.7rem;font-weight:700;letter-spacing:.05em;padding:7px 10px;border-radius:10px}
.cg__weap.on{color:#0a0a0c;background:var(--gold);border-color:var(--gold)}
.cg__hint{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:rgba(255,255,255,.5);font-size:.74rem;letter-spacing:.04em;pointer-events:none}
.cg__banner{position:absolute;top:44%;left:0;right:0;text-align:center;font-family:var(--font-disp);font-weight:700;
  font-size:clamp(2rem,7vw,4.5rem);color:var(--gold);opacity:0;transition:opacity .3s;pointer-events:none;text-shadow:0 6px 36px rgba(0,0,0,.7)}
.cg__banner.show{opacity:.92}
.cg__over{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(5,5,7,.8);color:#fff;text-align:center;padding:20px}
.cg__over[hidden],.cg__stage[hidden]{display:none}
.cg__over h3{font-family:var(--font-disp);font-weight:700;font-size:clamp(2.4rem,8vw,5rem);color:#ff5a4a;margin:0}
.cg__over p{color:rgba(255,255,255,.82);margin:0}
.cg__over b{color:var(--gold)}
@media (prefers-reduced-motion:reduce){.cg--shake{animation:none}}

/* =====================================================================
   "WHAT IS CLIPPING?" article page
   ===================================================================== */
.prose{max-width:72ch;margin:0 auto;font-size:1.06rem;line-height:1.75;color:var(--on-light-mut)}
.section--dark .prose{color:var(--on-dark-mut)}
.prose p{margin:0 0 1.1rem}
.prose strong{font-weight:700;color:var(--on-light)}
.section--dark .prose strong{color:#fff}
.clip-steps{margin:1.6rem auto 0;padding:0;list-style:none;counter-reset:cs;display:grid;gap:1rem;max-width:72ch}
.clip-steps li{position:relative;padding-left:3rem;counter-increment:cs}
.clip-steps li::before{content:counter(cs);position:absolute;left:0;top:-2px;width:2rem;height:2rem;border-radius:50%;
  display:grid;place-items:center;font-weight:900;font-size:.85rem;color:#0a0a0c;background:var(--gold)}
.clip-flow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem;margin:0 auto 2.6rem;max-width:940px}
.clip-flow span{background:rgba(198,160,66,.1);border:1px solid rgba(198,160,66,.4);color:var(--gold-deep,#9c7b2e);
  font-weight:700;font-size:.82rem;padding:.62em 1.05em;border-radius:100px;white-space:nowrap}
.section--dark .clip-flow span{color:var(--gold-2);background:rgba(198,160,66,.12)}
.clip-flow b{color:var(--gold);font-size:1.05rem}
.clip-2col{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:1rem}
.clip-card{background:var(--card,rgba(255,255,255,.04));border:1px solid var(--line-dark);border-radius:20px;padding:28px}
.clip-card h3{font-size:1.25rem;margin:0 0 .8rem;color:var(--on-dark)}
.clip-card>p{color:var(--on-dark-mut);margin:0 0 1rem;line-height:1.65}
.clip-list{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.clip-list li{position:relative;padding-left:1.4rem;color:var(--on-dark-mut);line-height:1.6}
.clip-list li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.clip-list strong{color:#fff;font-weight:700}
.clip-table-wrap{overflow-x:auto;border-radius:18px;border:1px solid var(--line-light);max-width:1000px;margin:0 auto}
.clip-table{width:100%;border-collapse:collapse;min-width:680px;font-size:.95rem}
.clip-table th{text-align:left;padding:15px 18px;background:rgba(198,160,66,.12);color:var(--gold-deep,#9c7b2e);
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.72rem;border-bottom:1px solid var(--line-light)}
.clip-table td{padding:15px 18px;border-bottom:1px solid var(--line-light);color:var(--on-light-mut);vertical-align:top;line-height:1.5}
.clip-table tbody tr:last-child td{border-bottom:none}
.clip-table td strong{color:var(--on-light)}
@media (max-width:760px){ .clip-2col{grid-template-columns:1fr} }

/* ============================================================
   ANIMATED GOLD AURORA BACKGROUND  (Luminous-Labs style, in gold)
   ============================================================ */
html{background:#ffffff}
#aurora{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#ffffff}
#aurora i{position:absolute;display:block;border-radius:50%;filter:blur(82px) saturate(1.25);opacity:1;will-change:transform}
#aurora .g1{display:none}
#aurora .g2{display:none}
#aurora .g3{display:none}
#aurora .g4{display:none}
#aurora .g5{display:none}
@keyframes aur1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-3vw,5vh) scale(1.06)}}
@keyframes aur2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5vw,-5vh) scale(1.1)}}
@keyframes aur3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6vw,-6vh) scale(1.07)}}
@keyframes aur4{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(7vw,-6vh) scale(1.1)}}
@keyframes aur5{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5vw,7vh) scale(1.06)}}
@media (prefers-reduced-motion: reduce){ #aurora i{animation:none} }
/* keep all page content above the aurora */
body > main, body > footer, .site-footer{position:relative;z-index:1}
/* LIGHT sections + hero flow the aurora through (transparent) */
section[data-theme="light"]:not(.hero){background:transparent !important}
.hero, .hero[data-theme="light"]{background:transparent !important}

/* ============================================================
   LIGHT-AURORA conversion of all NON-hero sections
   (hero is data-theme="light" + untouched; these flip dark -> light on the aurora)
   ============================================================ */
section[data-theme="dark"]{
  background:transparent !important;
  --on-dark:#15161d; --on-dark-mut:#4a4e5b; --on-dark-faint:rgba(21,22,29,.42);
  --line-dark:rgba(21,22,29,.10); --line-dark-2:rgba(21,22,29,.07);
  color:#15161d;
}
section[data-theme="dark"] h1,section[data-theme="dark"] h2,section[data-theme="dark"] h3,
section[data-theme="dark"] h4,section[data-theme="dark"] .display,section[data-theme="dark"] .h2{color:#15161d}
section[data-theme="dark"] .pill--dark{background:rgba(21,22,29,.06);border-color:rgba(21,22,29,.12);color:#15161d}
/* solid/dark cards -> light glass cards (like the reference) */
section[data-theme="dark"] .band{background:rgba(255,255,255,.52) !important;border:1px solid rgba(21,22,29,.08) !important;color:#15161d;backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
section[data-theme="dark"] .band::after{opacity:.45}
section[data-theme="dark"] .vcard,
section[data-theme="dark"] .step,
section[data-theme="dark"] .launch__col,
section[data-theme="dark"] .copt,
section[data-theme="dark"] .mega__card,
section[data-theme="dark"] .cmp,
section[data-theme="dark"] .how .tabs,
section[data-theme="dark"] .bcard,
section[data-theme="dark"] .stack{background:rgba(255,255,255,.52) !important;border-color:rgba(21,22,29,.08) !important;backdrop-filter:blur(12px) saturate(1.15);-webkit-backdrop-filter:blur(12px) saturate(1.15)}
/* small translucent-white chips/tracks: re-tint for the light bg */
section[data-theme="dark"] .chip,
section[data-theme="dark"] .how .chip,
section[data-theme="dark"] .cmp__badge--mut,
section[data-theme="dark"] .filter{background:rgba(21,22,29,.05) !important;color:#4a4e5b !important;border-color:rgba(21,22,29,.10) !important}
section[data-theme="dark"] .meter__track{background:rgba(21,22,29,.08) !important}
section[data-theme="dark"] .bcard__viz,
section[data-theme="dark"] .stack__viz{background:rgba(255,255,255,.42) !important;border-color:rgba(21,22,29,.08) !important}

/* ============================================================
   AURORA + APPLE GLASS extended to ALL pages (about/work/contact/etc.)
   ============================================================ */
.page-hero[data-theme="dark"], .page-hero[data-theme="light"],
.section--dark, .section--light, .cube-dark{background:transparent !important}
.page-hero[data-theme="dark"], .section--dark{
  --on-dark:#16171e; --on-dark-mut:#4a4e5b; --on-dark-faint:rgba(22,23,30,.42);
  --line-dark:rgba(22,23,30,.10); --line-dark-2:rgba(22,23,30,.07); color:#16171e;
}
.page-hero[data-theme="dark"] h1,.page-hero[data-theme="dark"] h2,.page-hero[data-theme="dark"] h3,.page-hero[data-theme="dark"] .lead,
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4,.section--dark .display{color:#16171e}
.page-hero[data-theme="dark"] .lead,.section--dark p,.section--dark li{color:#4a4e5b}
/* apple frosted-glass cards within the converted (non-hero) sections */
.section--dark .band,.section--dark .vcard,.section--dark .step,.section--dark .bcard,.section--dark .stack,
.section--dark .mega__card,.section--dark .copt,.section--dark .launch__col,.section--dark .cmp,.section--dark .card,
.section--dark .tile,.section--dark .glass,.section--dark .panel,
.page-hero[data-theme="dark"] .card,.page-hero[data-theme="dark"] .glass,.page-hero[data-theme="dark"] .tile,.page-hero[data-theme="dark"] .panel{
  background:rgba(255,255,255,.5) !important;border:1px solid rgba(22,23,30,.08) !important;color:#16171e;
  backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25)}
.section--dark .chip,.section--dark .filter,
.section--dark .field input,.section--dark .field textarea,.section--dark .field select{
  background:rgba(22,23,30,.05) !important;color:#16171e !important;border-color:rgba(22,23,30,.10) !important}
/* hide the dark 3D-cube canvas backgrounds so the gold aurora shows on every page */
canvas.cube-bg, .cube-bg{display:none !important}
body.cube-dark{background:transparent !important}
/* catch stragglers on inner pages (scoped — never the homepage .hero) */
.founder, .section--dark .member, .section--dark .person, .section--dark .profile,
.section--dark .feature, .section--dark .well, .section--dark .surface, .section--dark .box{
  background:rgba(255,255,255,.5) !important;border:1px solid rgba(22,23,30,.08) !important;color:#16171e;
  backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25)}
.page-hero[data-theme="dark"] .statstrip, .section--dark .statstrip{background:transparent !important;border-color:rgba(22,23,30,.12) !important}
.page-hero[data-theme="dark"] .page-hero__glow{display:none !important}
.page-hero[data-theme="dark"] .page-hero__grid{opacity:.28 !important}
/* light-section cards (services, FAQ, etc.) -> apple frosted glass so the aurora shows through */
.svc, .faq__list, .faq, .seccubes .card, .seccubes .panel, .svc-card, .service-card,
.contact__panel, .pricing-card, .plan{
  background:rgba(255,255,255,.5) !important;border:1px solid rgba(22,23,30,.08) !important;
  backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25)}
.faq__item{background:transparent !important}
/* the light "cube-zone" wrapper was solid white — let the aurora show through it */
.cube-zone, .cube-zone::before, .cube-zone::after{background:transparent !important}
.cube-zone canvas:not(.globe__canvas), .cube-zone .cube-bg{display:none !important}
/* the globe lives inside .cube-zone now (it sits before the FAQ) — keep its WebGL canvas visible */
#global .globe__canvas{ display:block !important; }

/* ===== cleaner neutral Apple-glass frost on all cards ===== */
.svc, .faq__list, .vcard, .step, .launch__col, .copt, .mega__card, .cmp, .bcard, .stack, .band,
.seccubes .card, .seccubes .panel, .contact__panel, .pricing-card, .plan,
.section--dark .band, .section--dark .vcard, .section--dark .step, .section--dark .bcard,
.section--dark .stack, .section--dark .mega__card, .section--dark .copt, .section--dark .launch__col,
.section--dark .cmp, .section--dark .card, .section--dark .glass, .section--dark .tile, .section--dark .panel,
.page-hero[data-theme="dark"] .card, .page-hero[data-theme="dark"] .glass,
.page-hero[data-theme="dark"] .tile, .page-hero[data-theme="dark"] .panel{
  background:rgba(255,255,255,.56) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.04) brightness(1.03) !important;
  backdrop-filter:blur(16px) saturate(1.04) brightness(1.03) !important;
  border:1px solid rgba(255,255,255,.55) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), 0 20px 50px -22px rgba(50,38,10,.28) !important;
}
/* CAMPAIGN SNAPSHOT card -> transparent dark Apple glass (gold arc glows through, white text stays readable) */
.snap__card{
  background:rgba(22,16,5,.34) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.4) brightness(1.05) !important;
  backdrop-filter:blur(16px) saturate(1.4) brightness(1.05) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 34px 80px -34px rgba(40,28,6,.55) !important;
}
/* case-study cards: each client photo fills the art (icon) as background; scrim keeps chart + labels legible, motion unchanged */
.cs-card__art--photo{background-size:cover !important;background-position:center top !important;background-repeat:no-repeat !important}
.cs-card__art--photo::after{background:linear-gradient(180deg,rgba(8,6,3,.42) 0%,rgba(8,6,3,.02) 26%,rgba(8,6,3,.12) 50%,rgba(8,6,3,.80) 100%) !important;mix-blend-mode:normal !important}
.cs-card__art--photo .cs-card__chart{opacity:.6}
/* homepage roster showcase: each client photo fills the whole card */
.ccard--photo{background-size:cover !important;background-position:center top !important;background-repeat:no-repeat !important}
.ccard--photo::after{background:linear-gradient(180deg,rgba(8,6,3,.12) 0%,rgba(8,6,3,0) 34%,rgba(8,6,3,.74) 100%) !important;mix-blend-mode:normal !important;z-index:1}
.ccard--photo .ccard__ic{display:none !important}
.ccard--photo .ccard__body{position:relative;z-index:2}
.ccard--photo .ccard__name,.ccard--photo .ccard__stat{text-shadow:0 1px 10px rgba(0,0,0,.55)}
/* ============ Apple "liquid glass" on all content cards (reference look) ============ */
.proc__card, .how__panel, .how__loop,
.svc, .faq__list, .vcard, .step, .launch__col, .copt, .mega__card, .cmp, .bcard, .stack, .band,
.seccubes .card, .seccubes .panel, .contact__panel, .pricing-card, .plan,
.section--dark .band, .section--dark .vcard, .section--dark .step, .section--dark .bcard,
.section--dark .stack, .section--dark .mega__card, .section--dark .copt, .section--dark .launch__col,
.section--dark .cmp, .section--dark .card, .section--dark .glass, .section--dark .tile, .section--dark .panel{
  /* white frosted glass — no golden tint */
  background:linear-gradient(135deg,rgba(255,255,255,.68),rgba(255,255,255,.5)) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.25) !important;
  backdrop-filter:blur(16px) saturate(1.25) !important;
  border:1px solid rgba(255,255,255,.35) !important;
  border-radius:28px !important;
  box-shadow:0 8px 32px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.4) !important;
  position:relative;
}
/* diagonal specular streak — the light-catch that reads as real glass */
.proc__card::before, .how__panel::before, .how__loop::before, .svc::before, .faq__list::before,
.vcard::before, .step::before, .bcard::before, .stack::before, .band::before, .contact__panel::before,
.launch__col::before, .copt::before, .mega__card::before, .cmp::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:linear-gradient(118deg,transparent 0 39%,rgba(255,255,255,.24) 47%,rgba(255,255,255,.04) 53%,transparent 61% 100%);
}
.proc__card > *, .how__panel > *, .how__loop > *, .svc > *, .faq__list > *, .vcard > *, .step > *,
.bcard > *, .stack > *, .band > *, .contact__panel > *, .launch__col > *, .copt > *, .mega__card > *, .cmp > *{
  position:relative;z-index:1;
}
/* the two previously-dark "how" cards now read on light glass */
.how__panel .tabs{background:rgba(20,22,34,.06) !important}
.how__panel .tab{color:rgba(21,22,29,.5) !important}
.how__panel .tab.is-active{background:rgba(255,255,255,.7) !important;color:#15161d !important;box-shadow:0 6px 16px -8px rgba(20,22,40,.25) !important}
.how__panel .tab-body p{color:rgba(21,22,29,.82) !important}
.how__panel .chip{background:rgba(20,22,34,.06) !important;color:rgba(21,22,29,.78) !important;border:1px solid rgba(20,22,34,.1) !important}
.how__panel .btn--line, .how__loop .btn--line{color:#15161d !important;border-color:rgba(20,22,34,.22) !important}
.how__loop .loop__label{color:rgba(21,22,29,.55) !important}
.how__loop h4{color:#15161d !important}
.how__loop .loop__steps li{color:rgba(21,22,29,.85) !important;border-bottom-color:rgba(20,22,34,.12) !important}
/* ===================== ONE unified gold + white background on EVERY page/section ===================== */
.section--dark, .section--light, .section--paper2, .section--paper,
.page-hero, .page-hero[data-theme="dark"], .page-hero[data-theme="light"],
.globe, .stats,
section[data-theme="dark"]:not(.hero), section[data-theme="light"]:not(.hero){
  background:transparent !important;
}
body, body.cube-dark{ background:transparent !important; }
/* dark backdrops / canvases off — keep it clean gold + white that mixes with the aurora */
.page-hero__glow, .stats__bg, .cube-bg, canvas.cube-bg{ display:none !important; }
.globe__stage::after, .globe__stage::before{ display:none !important; }
.page-hero__grid{ opacity:.14 !important; }
/* readable dark text in any formerly-dark area */
.section--dark, .section--paper2, .globe, .page-hero[data-theme="dark"], section[data-theme="dark"]:not(.hero){
  --on-dark:#16171e; --on-dark-mut:#565a6c; --on-dark-faint:rgba(22,23,30,.42);
  --line-dark:rgba(22,23,30,.10); --line-dark-2:rgba(22,23,30,.07);
  color:#16171e;
}
.globe__kicker, .globe__sub, .globe__side b{ color:#3a3d49 !important; }
.globe__side i{ background:rgba(20,22,34,.18) !important }
/* the dark cube-page veil that muddied inner pages — gone, so the gold aurora reads clean */
.cube-dark::after, .cube-dark::before{ display:none !important; }
/* globe section is now a clean statement on the gold-white bg — keep its subline visible */
.globe__sub{opacity:1 !important;visibility:visible !important;color:#3a3d49 !important;max-width:560px;margin-left:auto;margin-right:auto}
.globe{min-height:560px !important}
/* ===================== interactive cloud-glass nav island ===================== */
.nav, .nav.is-stuck, .nav.is-light.is-stuck{ background:transparent !important; border-bottom-color:transparent !important; }
.nav__inner{
  background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.26)) !important;
  -webkit-backdrop-filter:blur(16px) saturate(185%);
  backdrop-filter:blur(16px) saturate(185%);
  border:1px solid rgba(255,255,255,.55);
  border-radius:100px;
  padding:.5rem .6rem .5rem 1.1rem;
  box-shadow:0 16px 40px -16px rgba(30,24,8,.34), inset 0 1px 0 rgba(255,255,255,.75);
  position:relative; overflow:hidden;
}
/* cursor-following spotlight on the glass */
.nav__inner::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(130px 130px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.65), rgba(255,255,255,0) 68%);
  opacity:0; transition:opacity .35s ease;
}
.nav__inner:hover::before{ opacity:1; }
.nav__inner > *{ position:relative; z-index:1; }
/* dark text on the light glass (site is gold-and-white now) */
.nav .brand, .nav__link, .nav.is-light .brand, .nav.is-light .nav__link{ color:#15161d !important; }
.nav__chev{ opacity:.55; }
.nav__burger{ margin-left:auto; color:#15161d !important; }
/* interactive hover pills on the links */
.nav__link{ opacity:.8; transition:color .25s, background .25s, box-shadow .25s, opacity .25s; }
.nav__link:hover, .nav.is-light .nav__link:hover{
  opacity:1; background:rgba(255,255,255,.62) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 5px 16px -7px rgba(30,24,8,.32);
}
.nav__link.is-active{ background:rgba(255,255,255,.5) !important; opacity:1; }
/* ===================== bring back the globe — glowing gold globe in a contained warm orb ===================== */
.globe__canvas{ display:block !important; }
/* soft white glow behind the globe so the gold continents pop on the light section */
#global.globe{
  background:radial-gradient(46% 40% at 50% 47%,
    rgba(255,250,240,.92) 0%, rgba(255,247,232,.45) 40%, rgba(255,247,232,0) 64%) !important;
}
/* dark text reads on the light section */
.globe__kicker{ color:#1b1c24 !important; }
.globe__sub{ color:rgba(27,28,36,.74) !important; }
.globe__side b{ color:#1b1c24 !important; }
.globe__side i{ background:rgba(20,22,34,.2) !important; }
/* ===================== mobile + visibility fixes ===================== */
/* darker body text so it fully reads on the gold glass */
:root{ --on-light-mut:#3f4453; }
.svc p, .vcard p, .step p, .stack p, .proc__card p, .cs-card__brief, .mega__d,
.section--light p, .section--dark p, .tab-body p{ color:#363b49 !important; }
/* contact form fields were white-on-dark — flip to dark for the light section */
.field input, .field textarea, .field select{ color:#15161d !important; background:rgba(255,255,255,.5) !important; border-color:rgba(20,22,34,.16) !important; }
.field input::placeholder, .field textarea::placeholder{ color:rgba(20,22,34,.45) !important; }
.field label{ color:#3f4453 !important; }
/* nav burger -> visible black on the light cloud-glass */
.nav__burger{ color:#15161d !important; border-color:rgba(20,22,34,.22) !important; }
.nav__burger span{ background:#15161d !important; }
/* service-card arrow shouldn't overlap the text */
.svc__go{ background:rgba(255,255,255,.7) !important; color:#15161d; }
@media (max-width:760px){
  .svc{ padding-bottom:66px; }
  .svc__go{ right:16px; bottom:16px; width:30px; height:30px; }
  /* slimmer, tighter cloud-glass nav so it doesn't look oversized on mobile */
  .nav{ padding:10px 12px !important; }
  .nav__inner{ padding:.28rem .4rem .28rem .7rem !important; border-radius:44px !important; }
  .brand--markonly .brand__img{ width:34px !important; height:34px !important; }
  .nav__burger{ width:36px; height:36px; }
}
/* the glass `.svc > *` rule had forced the arrow into flow — keep it pinned bottom-right */
.svc__go{ position:absolute !important; z-index:3 !important; }
/* globe: softer glow that blends into the section; hide side labels on small screens */
#global.globe{ background:radial-gradient(54% 46% at 50% 47%, rgba(255,250,240,.85) 0%, rgba(255,248,234,.36) 38%, rgba(255,248,234,0) 68%) !important; }
@media (max-width:760px){ .globe__side{ display:none !important; } }
/* ===================== mobile smoothness: lighter GPU load ===================== */
@media (max-width:760px){
  /* drop the heavy 82px-blur aurora shimmer (the base gold gradient stays) */
  #aurora i{ display:none !important; }
  /* lighter frosted blur on glass so scrolling stays smooth on phones */
  .nav__inner, .svc, .faq__list, .vcard, .step, .proc__card, .how__panel, .how__loop, .band,
  .cmp, .bcard, .stack, .mega__card, .copt, .launch__col, .snap__card,
  .seccubes .card, .seccubes .panel, .contact__panel{
    -webkit-backdrop-filter: blur(11px) saturate(150%) !important;
    backdrop-filter: blur(11px) saturate(150%) !important;
  }
  /* cursor spotlight isn't needed on touch */
  .nav__inner::before{ display:none !important; }
}
/* ===================== globe: golden touch + everything fully visible ===================== */
/* WE ARE / GLOBAL. — replace the muddy black shadow with a soft light glow on the light bg */
.globe__kicker{ color:#181a22 !important; text-shadow:0 2px 26px rgba(255,249,236,.95), 0 1px 6px rgba(255,249,236,.8) !important; }
.globe__title{ text-shadow:0 2px 26px rgba(255,249,236,.9), 0 1px 8px rgba(214,168,52,.35) !important; }
.globe__sub{ text-shadow:none !important; }
/* side-label pills: light text on the dark pill (were dark-on-dark = invisible) */
.globe__side b{ color:#f3e7ca !important; background:rgba(26,19,8,.85) !important; border-color:rgba(198,160,66,.6) !important; }
.globe__pin{ color:#f3e7ca !important; }
/* a warm golden halo around the globe (cream center so the dots read, gold ring = golden touch) */
#global.globe{
  background:radial-gradient(54% 46% at 50% 47%,
    rgba(255,255,255,.96) 0%, rgba(255,255,255,.6) 38%, rgba(255,255,255,0) 70%) !important;
}
/* let the nav dropdown menus (Work With Us / Contact) escape the glass pill */
.nav__inner{ overflow:visible !important; }
/* founder hero: darker, fully readable bio + stat labels */
.founder__bio{ color:#363b49 !important; }
.founder__stats span{ color:#4a4e5b !important; }
/* ===================== nav mega dropdown: clean light glass, fully readable ===================== */
.mega, .nav.is-light .mega{
  background:rgba(255,255,255,.8) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.4) !important;
  backdrop-filter:blur(16px) saturate(1.4) !important;
  border:1px solid rgba(255,255,255,.6) !important;
  box-shadow:0 30px 72px -28px rgba(40,30,10,.4) !important;
}
/* cards sit transparent on the dropdown — no heavy glass, no sheen streak */
.mega__card, .nav.is-light .mega__card{
  background:transparent !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  border:1px solid transparent !important; box-shadow:none !important;
}
.mega__card::before{ display:none !important; }
.mega__card:hover, .nav.is-light .mega__card:hover{ background:rgba(198,160,66,.12) !important; border-color:rgba(198,160,66,.28) !important; }
/* dark, readable text */
.mega__t, .nav.is-light .mega__t{ color:#15161d !important; }
.mega__d, .nav.is-light .mega__d{ color:#3a3f4e !important; }
/* dark showcase cards (work page) + any dark surface: light, readable text */
.stack__panel .stack__t{ color:#fff !important; }
.stack__panel .stack__d{ color:rgba(255,255,255,.76) !important; }
.stack__panel .stack__list li{ color:rgba(255,255,255,.92) !important; }
.stack__panel .stack__num, .stack__panel .stack__chip{ color:#e9c85c !important; }
/* ===================== client popup: photo profile card + readable text ===================== */
.cdetail__grid{ align-items:stretch !important; grid-template-columns:0.92fr 1.08fr !important; }
.cdetail__photo{ position:relative; border-radius:20px; overflow:hidden; min-height:380px; background:linear-gradient(150deg,#1c1c24,#0a0a0f); }
.cdetail__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cdetail__photomark{ position:absolute; top:16px; left:16px; z-index:2; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.82); background:rgba(8,8,12,.4); padding:5px 11px; border-radius:8px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.cdetail__cap{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:22px; background:linear-gradient(to top, rgba(6,6,10,.95), rgba(6,6,10,.4) 55%, transparent); }
.cdetail__cat{ font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-2); }
.cdetail__cap .cdetail__name{ margin:.35rem 0 0 !important; font-size:clamp(1.9rem,4vw,3rem) !important; color:#fff !important; }
.cdetail__blurb{ color:rgba(255,255,255,.78) !important; }
@media (max-width:760px){ .cdetail__grid{ grid-template-columns:1fr !important; } .cdetail__photo{ min-height:240px; } }
/* footer credit -> Kspr Labs link */
.footer__credit{ color:var(--on-dark-mut); }
.footer__credit a{ color:inherit; transition:opacity .25s; }
.footer__credit a:hover{ opacity:.7; text-decoration:underline; }
/* ===================== client popup: light persona layout ===================== */
.cdetail__backdrop{ background:rgba(20,20,28,.5) !important; -webkit-backdrop-filter:blur(10px) !important; backdrop-filter:blur(10px) !important; }
.cdetail__panel{ background:#f1f1f4 !important; color:#15161d !important; border:none !important; box-shadow:0 50px 130px -40px rgba(20,22,40,.55) !important; padding:clamp(18px,2.6vw,36px) !important; }
.cdetail__close{ background:#fff !important; color:#15161d !important; border:1px solid rgba(20,22,40,.08) !important; box-shadow:0 8px 22px -10px rgba(20,22,40,.25); }
.cdetail__grid{ grid-template-columns:0.92fr 1.12fr !important; align-items:stretch !important; gap:clamp(14px,1.8vw,24px) !important; }
/* photo card */
.cdetail__photo{ position:relative; border-radius:22px; overflow:hidden; min-height:440px; background:linear-gradient(150deg,#dadade,#b6b6bd) !important; }
.cdetail__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cdetail__cap{ position:absolute; left:16px; right:16px; bottom:16px; top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; border-radius:16px; background:rgba(18,18,22,.5) !important; -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2); }
.cdetail__cap-t{ display:flex; flex-direction:column; }
.cdetail__cap .cdetail__name{ margin:0 !important; font-size:1.4rem !important; font-weight:700 !important; color:#fff !important; letter-spacing:-.01em; line-height:1.05; }
.cdetail__cat{ font-size:.82rem; color:rgba(255,255,255,.7); margin-top:3px; }
.cdetail__mark{ color:rgba(255,255,255,.92); flex:none; }
.cdetail__mark svg{ width:30px; height:30px; display:block; }
/* white info cards */
.cdetail__cards{ display:flex; flex-direction:column; gap:13px; }
.cdetail__card{ background:#fff; border-radius:18px; padding:18px 22px; box-shadow:0 16px 44px -26px rgba(20,22,40,.2); }
.cdetail__ch{ display:flex; align-items:center; gap:11px; font-weight:600; font-size:1.04rem; color:#15161d; margin-bottom:13px; }
.cdetail__ico{ width:34px; height:34px; border-radius:10px; background:rgba(198,160,66,.14); color:#9a6f1e; display:grid; place-items:center; flex:none; }
.cdetail__ico svg{ width:18px; height:18px; }
.cdetail__blurb{ color:#42475a !important; font-size:.95rem !important; line-height:1.6; margin:0 !important; max-width:none !important; }
/* numbers + chart on light */
.cdetail__big{ display:flex; gap:34px; margin-bottom:14px !important; }
.cbig__k{ color:#15161d !important; }
.cbig__l{ color:#6a6f80 !important; }
.cchart{ background:none !important; border:none !important; padding:0 !important; }
.cchart__t{ display:none !important; }
.cchart__bars i{ background:linear-gradient(180deg,#C6A042,#ecd28d) !important; }
.cchart__line{ stroke:#9a6f1e !important; }
.cchart__area{ fill:rgba(198,160,66,.12) !important; }
/* platforms on light */
.cplat__row{ color:#42475a !important; }
.cplat__bar{ background:rgba(20,22,40,.08) !important; }
.cplat__bar i{ background:linear-gradient(90deg,#C6A042,#ecd28d) !important; }
.cdetail__cta{ margin-top:2px; align-self:flex-start; }
@media (max-width:760px){ .cdetail__grid{ grid-template-columns:1fr !important; } .cdetail__photo{ min-height:300px; } }
/* ===================== popup: blue analytics accents (no gold), like the reference ===================== */
.cdetail__ico{ background:#f0f0f2 !important; color:#15161d !important; }
.cchart__bars i{ background:linear-gradient(180deg,#15161d,#54586a) !important; }
.cchart__line{ stroke:#15161d !important; }
.cchart__area{ fill:rgba(20,22,30,.08) !important; }
.cplat__bar i{ background:linear-gradient(90deg,#15161d,#54586a) !important; }
.cdetail__cta{ background:#15161d !important; color:#fff !important; box-shadow:0 12px 28px -12px rgba(20,22,30,.5) !important; }
.cdetail__cta:hover{ background:#000 !important; }
/* founder name on ONE line */
.founder__name{ font-size:clamp(1.3rem,3vw,2.15rem) !important; white-space:nowrap !important; }
/* ===================== FAQ — card accordion (like the reference) ===================== */
#faq .wrap{ text-align:center; }
#faq .eyebrow{
  display:inline-flex; align-items:center; gap:8px; width:max-content;
  margin:0 auto 1.1rem; padding:7px 16px 7px 14px; border-radius:999px;
  background:#f0f0f2; border:1px solid rgba(20,22,40,.08);
  color:#15161d !important; font-size:.7rem; letter-spacing:.16em; font-weight:700;
}
#faq .eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:#15161d; flex:none; }
#faq .display{ text-align:center; }
#faq .faq__list, .faq .faq__list{
  background:transparent !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  border:none !important; border-radius:0 !important; box-shadow:none !important; padding:0 !important;
  max-width:920px; margin:0 auto !important; text-align:left;
  display:flex; flex-direction:column; gap:14px; counter-reset:faq;
}
#faq .faq__list::before, .faq .faq__list::before{ display:none !important; content:none !important; }
.qa{
  counter-increment:faq;
  background:#f3f3f5 !important; border:1px solid transparent !important;
  border-radius:20px !important; overflow:hidden;
  transition:background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.qa[open]{
  background:#fff !important; border-color:rgba(108,118,232,.45) !important;
  box-shadow:0 26px 60px -30px rgba(20,22,50,.3) !important;
}
.qa summary{
  padding:21px clamp(18px,2vw,26px) !important; gap:16px !important;
  color:#15161d !important; font-size:clamp(1rem,1.35vw,1.12rem) !important; font-weight:500 !important;
}
.qa summary:hover, .qa[open] summary{ color:#15161d !important; }
.qa summary::before{
  content:counter(faq); flex:none; width:26px; height:26px; border-radius:50%;
  background:#fff; border:1px solid rgba(20,22,40,.12); display:grid; place-items:center;
  font-size:.74rem; font-weight:600; color:#6a6f80;
}
.qa[open] summary::before{ background:#f3f3f5; }
.qa summary i{
  margin-left:auto !important; flex:none; width:44px !important; height:44px !important;
  border-radius:50%; background:#15161d !important; display:block;
  transition:transform .35s var(--ease), background .35s var(--ease);
}
.qa summary i::before, .qa summary i::after{ background:#fff !important; }
.qa summary i::before{ width:14px !important; height:2px !important; transform:translate(-50%,-50%) !important; }
.qa summary i::after{ width:2px !important; height:14px !important; transform:translate(-50%,-50%) !important; }
.qa[open] summary i{ background:#fff !important; border:1px solid rgba(20,22,40,.14); transform:rotate(45deg) !important; }
.qa[open] summary i::before, .qa[open] summary i::after{ background:#15161d !important; }
.qa[open] summary i::after{ transform:translate(-50%,-50%) !important; }
.qa__body p{
  padding:0 clamp(18px,2vw,26px) 22px calc(clamp(18px,2vw,26px) + 42px) !important;
  color:#5a5f70 !important; max-width:none;
}
.qa__body p + p{ margin-top:10px; }
.faq__more{ text-align:center; margin-top:34px; }
.faq__more p{ color:#6a6f80; font-size:.95rem; margin:0 0 8px; }
.faq__contact{ display:inline-flex; align-items:center; gap:9px; color:#15161d; font-weight:600;
  text-decoration:underline; text-underline-offset:3px; }
.faq__contact span{ width:24px; height:24px; border-radius:50%; border:1px solid rgba(20,22,40,.22);
  display:grid; place-items:center; color:#15161d; }
.cube-page #faq .display, .cube-page #faq .qa summary{ color:#15161d !important; }
.cube-page #faq .qa__body p{ color:#5a5f70 !important; }
/* ===================== mobile: card grids must collapse (fixes word-per-line wrapping) ===================== */
/* inline grid-template-columns on some .vgrid blocks was overriding the responsive rules; force them */
@media (max-width:980px){
  .vgrid{ grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:620px){
  .vgrid, .steps, .cs-grid, .cform{ grid-template-columns:1fr !important; }
}
/* ===================== popup: make the panel reliably scrollable (mobile fix) ===================== */
.cdetail__panel{ -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y; }
/* ===================== desktop popup: fit all info in ONE view, no scroll (mobile keeps scroll) ===================== */
@media (min-width:761px){
  .cdetail__panel{ max-height:94vh !important; padding:22px clamp(20px,2vw,30px) !important; }
  .cdetail__cards{ gap:10px !important; }
  .cdetail__card{ padding:13px 18px !important; }
  .cdetail__ch{ margin-bottom:8px !important; font-size:1rem !important; }
  .cdetail__ico{ width:30px !important; height:30px !important; }
  .cdetail__ico svg{ width:16px !important; height:16px !important; }
  .cdetail__blurb{ font-size:.9rem !important; line-height:1.46 !important; }
  .cdetail__big{ margin-bottom:8px !important; gap:28px !important; }
  .cbig__k{ font-size:2rem !important; }
  .cbig__l{ margin-top:.3rem !important; }
  .cchart__plot{ height:82px !important; }
  .cchart{ margin-bottom:2px !important; }
  .cplat__row{ margin-bottom:8px !important; }
  .cdetail__cta{ margin-top:2px !important; padding:13px 22px !important; }
}
/* ===================== footer: big gold "Clipease" wordmark (Resend-style banner, brand gold + type) ===================== */
.footer__wordmark-wrap{ position:relative; width:100%; overflow:hidden; line-height:.78; text-align:center;
  margin:clamp(14px,3vw,46px) 0 clamp(18px,3.4vw,50px); }
/* the real 3D glass canvas overlays the CSS fallback wordmark; CSS text defines the height */
.footer__3d{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1; }
.footer__wordmark-wrap.is-3d .footer__wordmark{ visibility:hidden; }
.footer__wordmark{ position:relative; display:inline-block; font-family:'General Sans',-apple-system,system-ui,sans-serif;
  font-weight:600; letter-spacing:-.035em; line-height:.78; white-space:nowrap;
  font-size:clamp(3.6rem,21vw,21rem); margin:0;
  /* dark 3D glass: graphite top -> black body -> faint cool refraction at the base */
  background:linear-gradient(179deg,#45464c 0%,#26272c 15%,#0d0d10 45%,#000 70%,#181b22 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.05);
  filter:drop-shadow(0 2px 1px rgba(255,255,255,.16)) drop-shadow(0 20px 44px rgba(0,0,0,.9)); user-select:none; }
/* glassy top sheen overlaid on the letters */
.footer__wordmark::after{ content:attr(data-text); position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(208,220,255,.6) 0%,rgba(170,188,232,.13) 16%,transparent 40%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  pointer-events:none; }
/* ===================== hero: stagger the title lines like the reference (desktop only) ===================== */
@media (min-width:761px){
  .hero__title .l1{ margin-left:.4em !important; }
  .hero__title .l2{ margin-left:2.5em !important; }
  .hero__title .l3{ margin-left:0 !important; }
}
/* ===================== footer — Converto-style dark card + golden wordmark ===================== */
.footer{ background:#0c0d0f !important; padding:clamp(34px,6vw,84px) clamp(14px,4vw,46px) clamp(34px,6vw,84px) !important; }
.footer .footer__glow{ display:none !important; }
.footer__card{ position:relative; max-width:1180px; margin:0 auto; background:#0c0d0f;
  border:1px solid rgba(255,255,255,.06); border-radius:26px; overflow:hidden;
  padding:clamp(30px,3.6vw,56px) clamp(24px,3.2vw,52px) 0; }
.footer__main{ display:grid; grid-template-columns:1.35fr 2.1fr; gap:clamp(28px,4vw,56px); align-items:start; }
.footer__brandword{ display:inline-block; font-family:var(--font-disp); font-weight:900; letter-spacing:-.01em;
  font-size:clamp(1.5rem,2.4vw,2.15rem); color:#fff; line-height:1; }
.footer__brandcol p{ color:rgba(255,255,255,.5); font-size:.92rem; line-height:1.65; max-width:34ch; margin:1rem 0 0; }
.footer__cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.footer__col h6{ font-size:.95rem; font-weight:600; color:#fff; margin:0 0 1.1rem; letter-spacing:0; text-transform:none; }
.footer__col a{ display:block; color:rgba(255,255,255,.5); font-size:.9rem; margin:0 0 .75rem; transition:color .2s; }
.footer__col a:hover{ color:var(--gold-2); }
.footer__base{ display:flex; justify-content:space-between; align-items:center; gap:.6rem 1.4rem; flex-wrap:wrap;
  border:0 !important; margin:clamp(34px,5vw,68px) 0 0 !important; padding:0 0 clamp(18px,2.2vw,28px) !important;
  font-size:.85rem; color:rgba(255,255,255,.42); }
.footer__base > span:first-child{ color:rgba(255,255,255,.42); }
.footer__base .footer__credit{ color:rgba(255,255,255,.42) !important; }
.footer__base .footer__credit a{ color:rgba(255,255,255,.42) !important; text-decoration:none; }
.footer__base .footer__credit a:hover{ color:var(--gold-2) !important; }
/* big golden wordmark across the bottom, bottom edge bleeding into the card */
.footer{ position:relative; }
.footer__card{ z-index:1; }
.footer::after{ content:"CLIPEASE"; position:absolute; left:50%; bottom:0; transform:translate(-50%,34%);
  font-family:var(--font-disp); font-weight:900; letter-spacing:.005em; line-height:.7; white-space:nowrap;
  font-size:20vw; color:rgba(255,255,255,.022); pointer-events:none; z-index:0; }
.footer__wordmark-wrap{ position:relative; width:100%; margin:0 !important; padding:0; overflow:hidden;
  line-height:.72; text-align:center; pointer-events:none; }
.footer__wordmark{ display:block; position:static; font-family:var(--font-disp); font-weight:900;
  letter-spacing:-.005em; line-height:.72; white-space:nowrap; margin:0 !important;
  font-size:clamp(3.4rem,15vw,15.5rem); transform:translateY(.1em);
  background:radial-gradient(125% 135% at 50% 16%, #f4db8d 0%, #ddb955 28%, #C6A042 50%, #6f5320 82%, #34280f 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
  -webkit-text-stroke:0 !important; filter:none !important; }
.footer__wordmark::after{ display:none !important; content:none !important; }
@media (max-width:860px){
  .footer__main{ grid-template-columns:1fr; gap:30px; }
  .footer__cols{ grid-template-columns:repeat(2,1fr); gap:26px 18px; }
  .footer__base{ flex-direction:column; align-items:flex-start; }
  .footer__wordmark{ font-size:17vw; }
}
/* ===================== WE ARE GLOBAL — white section (same as others); words split apart & the globe opens up inside ===================== */
#global.globe{ background:#ffffff !important; }
/* dark disc behind the globe so the glowing dotted net still reads on the white section (scales with the globe).
   override the white-ification rule that hides .globe__stage::before */
#global .globe__stage::before{ content:"" !important; display:block !important; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(42vmin,400px); height:min(42vmin,400px); border-radius:50%; z-index:0; pointer-events:none;
  background:radial-gradient(circle, rgba(8,10,18,0.97) 0%, rgba(8,10,18,0.9) 42%, rgba(8,10,18,0.5) 64%, rgba(8,10,18,0) 82%) !important; }
#global .globe__kicker{ color:#15161d !important; text-shadow:none !important; position:relative; z-index:6; }
#global .globe__foot, #global .globe__title{ position:relative; z-index:6; }
#global .globe__title, #global .globe__title .gold{ text-shadow:none !important; }
#global .globe__sub{ color:#5a5f70 !important; text-shadow:none !important; }
/* side labels -> clean white pills with gold connectors (read on white) */
#global .globe__side b{ color:#15161d !important; background:#ffffff !important; border-color:rgba(20,22,40,.1) !important; box-shadow:0 10px 26px -14px rgba(20,22,40,.3) !important; }
#global .globe__side i{ background:linear-gradient(90deg, rgba(198,160,66,.85), transparent) !important; }
#global .globe__side--tr i, #global .globe__side--br i{ background:linear-gradient(90deg, transparent, rgba(198,160,66,.85)) !important; }
#global .globe__side i::after{ background:#C6A042 !important; }
/* country pins stay legible over both the dark disc and white */
#global .globe__pin{ color:#eef1ff !important; border-color:rgba(120,150,240,.5) !important; background:rgba(11,15,26,.66) !important; }
/* ===================== "Book a call" button — black pill + gold knob, hover fills gold + phone ===================== */
.btn--call{ position:relative; display:inline-flex; align-items:center; gap:.62em; height:48px; padding:5px 22px 5px 5px;
  border-radius:999px; background:#101116; overflow:hidden; isolation:isolate; text-decoration:none;
  box-shadow:0 10px 26px -14px rgba(0,0,0,.5); }
.btn--call__knob{ flex:none; width:48px; height:38px; border-radius:999px; display:grid; place-items:center;
  background:linear-gradient(135deg,#f0d488 0%,#e0b94e 45%,#C6A042 100%); color:#15161d; z-index:1;
  transition:width .35s var(--ease); }
.btn--call__knob svg{ width:16px; height:16px; }
.btn--call__txt{ color:#fff; font-weight:600; font-size:.98rem; white-space:nowrap; z-index:1; letter-spacing:.01em; }
.btn--call__fill{ position:absolute; inset:0; display:grid; place-items:center; z-index:2; color:#15161d;
  background:linear-gradient(135deg,#f2db8d 0%,#e0b94e 45%,#C6A042 100%);
  opacity:0; transform:scale(.97); transition:opacity .3s var(--ease), transform .3s var(--ease); }
.btn--call__fill svg{ width:22px; height:22px; }
.btn--call:hover .btn--call__fill{ opacity:1; transform:scale(1); }
.nav__cta.btn--call{ height:44px; }
.nav__cta.btn--call .btn--call__knob{ width:42px; height:34px; }
.nav__cta.btn--call .btn--call__txt{ font-size:.92rem; }
@media (max-width:760px){ .nav__cta.btn--call{ display:none; } }
/* ===================== contact options — stacked colorful icon pills (DesignerMarvan style) ===================== */
.optstack{ display:flex; flex-direction:column; gap:12px; perspective:1000px; }
.optpill{ display:flex; align-items:center; gap:14px; padding:12px 24px 12px 12px; border-radius:999px;
  background:#fff; box-shadow:0 22px 44px -28px rgba(20,22,40,.4); text-decoration:none;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), opacity .4s var(--ease); transform-origin:center left; }
.optpill__ic{ flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:linear-gradient(140deg, var(--c1), var(--c2)); box-shadow:0 8px 18px -8px var(--c2); }
.optpill__t{ font-family:var(--font-disp); font-weight:600; font-size:1.1rem; color:#15161d; letter-spacing:-.01em; }
.optpill:not(.optpill--on){ opacity:.6; transform:scale(.95); }
.optpill:nth-child(1){ transform:scale(.95) rotate(-1.2deg); }
.optpill:nth-child(3){ transform:scale(.95) rotate(1.2deg); }
.optpill--on{ opacity:1; transform:scale(1.04); box-shadow:0 30px 56px -26px rgba(20,22,40,.5); }
.optpill:hover{ opacity:1; transform:scale(1.05) rotate(0); box-shadow:0 30px 56px -24px rgba(20,22,40,.5); }
/* ===================== contact page — huge CONTACT wordmark (Pienso style, black on white) ===================== */
.contact-hero{ background:#ffffff !important; padding:clamp(70px,11vh,150px) 0 clamp(20px,3vw,40px); overflow:hidden; }
.contact-hero__word{ font-family:var(--font-disp); font-weight:900; letter-spacing:-.035em; line-height:.8;
  font-size:clamp(3.4rem,20.5vw,19rem); color:#15161d; text-align:center; white-space:nowrap; margin:0; }
.contact-hero__sub{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:1rem; margin-top:clamp(18px,3vw,40px); }
.contact-hero__sub .lead{ max-width:60ch; }
.contact-hero h1.contact-hero__word{ font-size:clamp(3.4rem,20.5vw,19rem) !important; line-height:.8 !important; color:#15161d !important; margin:0 !important; text-transform:none !important; }
/* ===================== process — winding S-curve path with dots (Instagram-carousel style) ===================== */
.proc__curvewrap{ position:relative; max-width:760px; margin:clamp(34px,5vw,66px) auto 0; height:clamp(620px,80vw,820px); }
.proc__curve{ position:absolute; inset:0; width:100%; height:100%; z-index:0; overflow:visible; }
.proc__curve-line{ stroke:var(--gold); stroke-width:5; fill:none; stroke-linecap:round; vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 18px rgba(198,160,66,.5)); }
.proc__cstep{ position:absolute; left:0; right:0; top:var(--top); transform:translateY(-50%); display:flex; align-items:center; gap:22px; z-index:1; }
.proc__cdot{ flex:none; width:34px; height:34px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 0 9px rgba(198,160,66,.14), 0 0 24px rgba(198,160,66,.6); }
.proc__ctext{ max-width:min(300px,42%); }
.proc__ctext h3{ font-family:var(--font-disp); font-weight:900; font-size:clamp(1.3rem,2.4vw,1.7rem); color:#fff; margin:0 0 .45rem; }
.proc__ctext p{ color:var(--on-dark-mut); font-size:clamp(.92rem,1.3vw,1.02rem); line-height:1.5; margin:0; }
.proc__ctext b{ color:var(--gold-2); font-weight:700; }
/* right-bend steps: dot near the right, label to its left (right-aligned) */
.proc__cstep--r{ justify-content:flex-end; padding-right:4%; flex-direction:row; text-align:right; }
.proc__cstep--r .proc__ctext{ order:0; } .proc__cstep--r .proc__cdot{ order:1; }
/* left-bend steps: dot near the left, label to its right */
.proc__cstep--l{ justify-content:flex-start; padding-left:4%; text-align:left; }
@media (max-width:620px){
  .proc__curve-line{ stroke-width:4; }
  .proc__cdot{ width:26px; height:26px; }
  .proc__cstep--r{ padding-right:2%; } .proc__cstep--l{ padding-left:2%; }
  .proc__ctext{ max-width:48%; }
}
/* process curve sits on the white section -> dark curve + dots + text like the reference (black on white) */
.proc__curve-line{ stroke:#15161d !important; filter:none !important; }
.proc__cdot{ background:#15161d !important; box-shadow:0 0 0 8px rgba(20,22,40,.07) !important; }
.proc__ctext h3{ color:#15161d !important; }
.proc__ctext p{ color:#42475a !important; }
.proc__ctext b{ color:#9a6f1e !important; }
/* process curve — position dots on the bends and labels in the outer margins (no overlap) */
.proc__cstep{ display:block !important; padding:0 !important; }
.proc__cstep .proc__cdot{ position:absolute; top:50%; transform:translateY(-50%); }
.proc__cstep .proc__ctext{ position:absolute; top:50%; transform:translateY(-50%); max-width:34% !important; }
.proc__cstep--r .proc__cdot{ left:auto; right:21%; }
.proc__cstep--r .proc__ctext{ right:33%; left:auto; text-align:right; }
.proc__cstep--l .proc__cdot{ left:21%; right:auto; }
.proc__cstep--l .proc__ctext{ left:33%; right:auto; text-align:left; }
@media (max-width:620px){
  .proc__cstep .proc__ctext{ max-width:42% !important; }
  .proc__cstep--r .proc__ctext{ right:26%; } .proc__cstep--l .proc__ctext{ left:26%; }
  .proc__cstep--r .proc__cdot{ right:14%; } .proc__cstep--l .proc__cdot{ left:14%; }
}
/* ===================== contact — REACH US green form box (Pienso style) ===================== */
.reachus-sec{ background:#ffffff; padding:0 clamp(14px,4vw,46px) clamp(50px,7vw,100px); }
.reachbox{ position:relative; max-width:1000px; margin:clamp(-110px,-9vw,-40px) auto 0; z-index:3;
  background:#1a7a3c; border-radius:22px; color:#fff; padding:clamp(26px,3.6vw,52px); overflow:hidden; }
.reachbox__label{ display:block; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.66); font-weight:600; }
.reachform__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,64px); margin-top:clamp(22px,3vw,40px); align-items:start; }
.reachform__col{ display:flex; flex-direction:column; gap:clamp(16px,2vw,26px); }
.rfield input, .rfield textarea{ width:100%; background:transparent; border:0; border-bottom:1.5px solid rgba(255,255,255,.42);
  color:#fff; font-size:1.05rem; padding:11px 2px; outline:none; font-family:inherit; transition:border-color .25s; }
.rfield input::placeholder, .rfield textarea::placeholder{ color:rgba(255,255,255,.82); }
.rfield input:focus, .rfield textarea:focus{ border-bottom-color:#fff; }
.rfield--msg textarea{ min-height:128px; resize:vertical; line-height:1.5; }
.rcheck{ display:flex; align-items:flex-start; gap:11px; font-size:.84rem; color:rgba(255,255,255,.85); margin-top:6px; line-height:1.45; cursor:pointer; }
.rcheck input{ width:18px; height:18px; accent-color:#0b3d1d; margin-top:1px; flex:none; }
.rnote{ font-size:.76rem; color:rgba(255,255,255,.68); line-height:1.55; margin:0; }
.rnote a{ color:#fff; text-decoration:underline; }
.reachsend{ display:inline-flex; align-items:center; gap:14px; align-self:flex-start; margin-top:4px;
  background:#fff; color:#15161d; border:0; border-radius:999px; padding:11px 14px 11px 30px;
  font-family:var(--font-disp); font-weight:600; font-size:1.1rem; cursor:pointer; transition:transform .25s; }
.reachsend:hover{ transform:translateY(-2px); }
.reachsend__ic{ width:34px; height:34px; border-radius:50%; background:#15161d; color:#fff; display:grid; place-items:center; font-size:1rem; }
.reachus-sec__opts{ max-width:1000px; margin:clamp(28px,4vw,52px) auto 0; flex-direction:row; flex-wrap:wrap; justify-content:center; }
.reachus-sec__opts .optpill{ flex:1; min-width:230px; }
.reachus-sec .form-sent{ display:none; color:#fff; font-size:1.05rem; font-weight:600; }
@media (max-width:760px){ .reachform__grid{ grid-template-columns:1fr; } .reachus-sec__opts .optpill{ flex:1 1 100%; transform:none !important; } }
/* ===================== contact REACH US box -> white Apple liquid glass ===================== */
.reachbox{
  background:linear-gradient(135deg,rgba(255,255,255,.7),rgba(255,255,255,.46)) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.4) !important; backdrop-filter:blur(16px) saturate(1.4) !important;
  border:1px solid rgba(255,255,255,.55) !important; color:#15161d !important;
  box-shadow:0 34px 90px -44px rgba(20,22,40,.42), inset 0 1px 0 rgba(255,255,255,.65) !important;
}
.reachbox__label{ color:#6a6f80 !important; }
.rfield input, .rfield textarea{ color:#15161d !important; border-bottom-color:rgba(20,22,40,.22) !important; }
.rfield input::placeholder, .rfield textarea::placeholder{ color:rgba(20,22,40,.45) !important; }
.rfield input:focus, .rfield textarea:focus{ border-bottom-color:#15161d !important; }
.rcheck{ color:#42475a !important; }
.rcheck input{ accent-color:#15161d !important; }
.rnote{ color:#6a6f80 !important; }
.rnote a{ color:#15161d !important; }
.reachsend{ background:#15161d !important; color:#fff !important; }
.reachsend:hover{ background:#000 !important; }
.reachsend__ic{ background:#fff !important; color:#15161d !important; }
.reachus-sec .form-sent{ color:#15161d !important; }
/* ===================== gold .viz icon blocks — dissolve out (7 different animations) ===================== */
.viz--out{ pointer-events:none; overflow:hidden; will-change:transform,opacity,height; }
.viz--out-0{ animation:vizo0 .72s cubic-bezier(.5,0,.75,.1) forwards; }
@keyframes vizo0{ 55%{ transform:scale(0) rotate(200deg); opacity:0; } 100%{ transform:scale(0) rotate(200deg); opacity:0; height:0; margin-top:0; margin-bottom:0; } }
.viz--out-1{ animation:vizo1 .72s cubic-bezier(.5,0,.75,.1) forwards; }
@keyframes vizo1{ 55%{ transform:translateY(-42px) scale(.5); opacity:0; } 100%{ transform:translateY(-42px) scale(.5); opacity:0; height:0; margin-top:0; margin-bottom:0; } }
.viz--out-2{ animation:vizo2 .72s ease-in forwards; }
@keyframes vizo2{ 50%{ transform:scale(1.7); opacity:0; filter:blur(10px); } 100%{ transform:scale(1.7); opacity:0; height:0; margin-top:0; margin-bottom:0; } }
.viz--out-3{ animation:vizo3 .72s ease-in forwards; }
@keyframes vizo3{ 55%{ transform:perspective(420px) rotateY(92deg); opacity:0; } 100%{ transform:perspective(420px) rotateY(92deg); opacity:0; height:0; margin-top:0; margin-bottom:0; } }
.viz--out-4{ animation:vizo4 .72s cubic-bezier(.5,0,.75,.1) forwards; }
@keyframes vizo4{ 55%{ transform:translateX(56px) rotate(-32deg); opacity:0; } 100%{ transform:translateX(56px) rotate(-32deg); opacity:0; height:0; margin-top:0; margin-bottom:0; } }
.viz--out-5{ animation:vizo5 .72s ease-in-out forwards; }
@keyframes vizo5{ 55%{ transform:scaleY(0); opacity:0; } 100%{ transform:scaleY(0); opacity:0; height:0; margin-top:0; margin-bottom:0; } }
.viz--out-6{ animation:vizo6 .72s cubic-bezier(.5,0,.75,.1) forwards; }
@keyframes vizo6{ 55%{ transform:translateY(46px) rotate(28deg); opacity:0; } 100%{ transform:translateY(46px) rotate(28deg); opacity:0; height:0; margin-top:0; margin-bottom:0; } }
/* ===================== compare — two-card module (light + dark orbit) ===================== */
.compare{ background:#ececee !important; }
.cmp2{ max-width:1060px; margin:0 auto; background:#fff; border-radius:30px; padding:14px;
  box-shadow:0 50px 120px -50px rgba(20,22,40,.4); }
.cmp2__grid{ display:grid; grid-template-columns:1fr 1.06fr; gap:14px; }
.cmp2__card{ border-radius:22px; padding:clamp(24px,2.6vw,38px); display:flex; flex-direction:column; min-height:430px; }
.cmp2__card--light{ background:#f5f5f7; border:1px solid rgba(20,22,40,.06); }
.cmp2__card--dark{ background:linear-gradient(160deg,#1c1d20,#0e0f12); border:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; }
.cmp2__h{ font-family:var(--font-disp); font-weight:600; font-size:clamp(1.4rem,2vw,1.7rem); line-height:1.18; letter-spacing:-.01em; color:#15161d; margin:0; }
.cmp2__mut{ color:#9a9ca6; }
.cmp2__h--on{ color:#fff; }
.cmp2__p{ color:#5a5f70; font-size:.96rem; line-height:1.6; margin:1rem 0 0; max-width:40ch; }
.cmp2__p--on{ color:rgba(255,255,255,.6); }
.cmp2__tags{ display:flex; flex-wrap:wrap; gap:9px; margin:auto 0 1.4rem; }
.cmp2__tag{ background:#fff; border:1px solid rgba(20,22,40,.1); border-radius:999px; padding:8px 16px; font-size:.86rem; color:#42475a; box-shadow:0 6px 16px -10px rgba(20,22,40,.25); }
.cmp2__cta{ display:inline-flex; align-items:center; gap:11px; align-self:flex-start; background:#15161d; color:#fff; border-radius:999px; padding:13px 24px 13px 16px; font-weight:600; font-size:1rem; text-decoration:none; transition:transform .25s; }
.cmp2__cta:hover{ transform:translateY(-2px); }
.cmp2__spin{ width:20px; height:20px; border-radius:50%; border:2px solid rgba(255,255,255,.25); border-top-color:#a6e35a; animation:cmpspin 1s linear infinite; flex:none; }
@keyframes cmpspin{ to{ transform:rotate(360deg); } }
/* orbit diagram */
.cmp2__orbit{ position:relative; flex:1; margin:clamp(20px,2.4vw,32px) 0; border:1px solid rgba(255,255,255,.08); border-radius:14px; overflow:hidden; min-height:170px; }
.cmp2__orbit-bg{ position:absolute; inset:0; width:100%; height:100%; }
.cmp2__orbit-bg line, .cmp2__orbit-bg circle{ stroke:rgba(255,255,255,.09); stroke-width:1; fill:none; }
.cmp2__node{ position:absolute; transform:translate(-50%,-50%); background:rgba(18,20,24,.7); border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:6px 14px; font-size:.8rem; color:rgba(255,255,255,.78); white-space:nowrap; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.cmp2__node--on{ color:#bdf07a; border-color:rgba(166,227,90,.5); background:rgba(40,55,20,.5); }
.cmp2__ring{ position:absolute; left:25%; top:50%; width:128px; height:128px; transform:translate(-50%,-50%); border-radius:50%; border:1.5px dashed rgba(166,227,90,.55); animation:cmpspin 14s linear infinite; pointer-events:none; }
.cmp2__foot{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.cmp2__badge{ display:inline-flex; align-items:center; gap:8px; background:rgba(63,185,80,.1); border:1px solid rgba(63,185,80,.28); border-radius:999px; padding:9px 16px; font-size:.86rem; color:#e7f6e9; }
.cmp2__more{ display:inline-flex; align-items:center; gap:9px; background:#fff; color:#15161d; border-radius:999px; padding:10px 18px; font-weight:600; font-size:.92rem; text-decoration:none; transition:transform .25s; }
.cmp2__more:hover{ transform:translateY(-2px); }
@media (max-width:820px){ .cmp2__grid{ grid-template-columns:1fr; } .cmp2__card{ min-height:0; } }
.compare#compare{ background:#ececee !important; padding-top:clamp(60px,8vh,120px) !important; padding-bottom:clamp(60px,8vh,120px) !important; }
/* ===================== compare — restored Clipease vs Others info, gold accents, white bg ===================== */
.compare#compare{ background:#ffffff !important; }
.compare .compare__title{ text-align:center; margin:0 auto clamp(30px,4.5vw,58px); }
.cmp2__chip{ width:48px; height:48px; border-radius:14px; display:grid; place-items:center; margin:0 0 1.5rem; flex:none; }
.cmp2__chip--logo{ background:linear-gradient(135deg,#f0d488,#C6A042); box-shadow:0 12px 26px -12px rgba(198,160,66,.6); }
.cmp2__chip--mut{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.4); }
.cmp2__name{ font-family:var(--font-disp); font-weight:900; font-size:1.55rem; letter-spacing:-.01em; color:#15161d; margin:0 0 1.5rem; }
.cmp2__name--on{ color:#fff; }
.cmp2__cl{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:clamp(.9rem,1.4vw,1.15rem); }
.cmp2__cl li{ display:flex; align-items:center; gap:14px; font-size:1.04rem; color:#15161d; }
.cmp2__cl--on li{ color:rgba(255,255,255,.6); }
.cmp2__tick{ width:24px; height:24px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:rgba(198,160,66,.16); color:#9a6f1e; }
.cmp2__cross{ width:24px; height:24px; flex:none; display:grid; place-items:center; color:rgba(255,255,255,.34); }
/* ===================== restyle service / vcard / how cards to match the compare cards ===================== */
.svc, .vcard, .how__panel, .how__loop{
  background:#f5f5f7 !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  border:1px solid rgba(20,22,40,.07) !important; border-radius:22px !important;
  box-shadow:0 28px 58px -40px rgba(20,22,40,.22) !important; }
.svc::before, .vcard::before, .how__panel::before, .how__loop::before{ display:none !important; content:none !important; }
.svc{ padding:clamp(22px,2.4vw,30px) !important; }
.svc h3, .vcard h3{ letter-spacing:-.01em; }
.svc p, .vcard p{ color:#5a5f70 !important; }
.svc__tag{ color:#9a9ca6 !important; }
.svc__go{ color:#15161d !important; }
/* clean flat gold chip icons (no gloss / no sheen) */
.svc__viz{ background:linear-gradient(135deg,#f2db8d 0%,#e0b94e 45%,#C6A042 100%) !important;
  border-radius:14px !important; box-shadow:0 12px 26px -13px rgba(198,160,66,.55) !important; }
.svc__viz::after{ display:none !important; }
/* ===================== system — "create once, reach millions" hero copy ===================== */
.system__title{ font-size:clamp(2.5rem,6.4vw,5.4rem); line-height:1.02; letter-spacing:-.025em; }
.gold--shine{ background:linear-gradient(95deg,#9a6f1e 0%,#f2db8d 28%,#C6A042 50%,#f2db8d 72%,#9a6f1e 100%) !important;
  background-size:220% auto !important; -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important; animation:goldShine 4.5s linear infinite; }
@keyframes goldShine{ 0%{ background-position:0% 50% } 100%{ background-position:220% 50% } }
.system__body--lead{ font-size:clamp(1.06rem,1.55vw,1.34rem); line-height:1.66; max-width:790px;
  margin:clamp(30px,3.6vw,50px) auto 0; text-align:center; color:#3a3f4d; }
.system__punch{ max-width:790px; margin:clamp(14px,1.6vw,22px) auto 0; text-align:center;
  font-family:var(--font-disp); font-weight:700; font-size:clamp(1.2rem,2.1vw,1.85rem);
  letter-spacing:-.012em; color:#15161d; }
.system__punch .gold{ color:#C6A042; }
/* ===================== "we are global" — heavy/tight/lowercase stacked lockup + tilted gold pill (reference structure, brand colors) ===================== */
#global .globe__kicker--stack{ display:flex; flex-direction:column; align-items:center; gap:0;
  text-transform:lowercase; font-weight:900; letter-spacing:-.05em; line-height:.8;
  font-size:clamp(2.6rem,8.5vw,6.4rem); }
#global .globe__kicker--stack span{ display:block; }
#global .globe__title{ text-transform:lowercase; letter-spacing:-.04em; }
#global .globe__title .globe__pill{ display:inline-block; color:var(--gold) !important;
  -webkit-text-fill-color:var(--gold); background:none !important; transform:none; padding:0;
  border-radius:0; box-shadow:none !important; line-height:1; text-shadow:none !important; }
/* hero: the rotating final word (CONVERT -> GROW -> SCALE -> ...) */
.hero__cycle{ display:inline-block; perspective:700px; will-change:transform,opacity; }
.hero__ltr{ display:inline-block; transform-origin:50% 100%; backface-visibility:hidden; will-change:transform,opacity; }
/* ===================== contact intake form — full fields, classier glass card, scrollable inside ===================== */
/* desktop: a normal, full-height form that the PAGE scrolls (no inner-scroll trap).
   The fixed-height card + inner scroll is applied only on mobile (see the @media block below). */
.reachbox{ display:flex; flex-direction:column;
  background:linear-gradient(150deg,rgba(255,255,255,.74),rgba(255,255,255,.5)) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.5) !important; backdrop-filter:blur(16px) saturate(1.5) !important;
  border:1px solid rgba(255,255,255,.6) !important;
  box-shadow:0 44px 110px -50px rgba(20,22,40,.5), inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(255,255,255,.06) !important; }
.reachform{ display:flex; flex-direction:column; min-height:0; margin-top:clamp(16px,2.2vw,26px) !important; }
.reachform__scroll{ padding:2px clamp(6px,1.1vw,14px) 6px 2px; scrollbar-width:thin; scrollbar-color:rgba(20,22,40,.22) transparent; }
.reachform__scroll::-webkit-scrollbar{ width:8px; }
.reachform__scroll::-webkit-scrollbar-thumb{ background:rgba(20,22,40,.2); border-radius:99px; }
.reachform__scroll::-webkit-scrollbar-track{ background:transparent; }
.reachform__grid2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.5vw,18px); }
.reachform__grid2 .rfield{ display:flex; flex-direction:column; gap:7px; min-width:0; margin:0; }
.reachform__grid2 .rfield--full{ grid-column:1 / -1; }
.reachform__grid2 .rfield label{ font-size:.82rem; font-weight:600; color:#3a3f4d; }
.rfield__opt{ color:#9aa0b0; font-weight:500; }
.reachform__grid2 .rfield input,
.reachform__grid2 .rfield select,
.reachform__grid2 .rfield textarea{
  width:100%; background:rgba(255,255,255,.5) !important; border:1px solid rgba(20,22,40,.14) !important;
  border-bottom:1px solid rgba(20,22,40,.14) !important; border-radius:13px !important; color:#15161d !important;
  font-family:inherit; font-size:1rem; padding:13px 15px !important; outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s; -webkit-appearance:none; appearance:none; }
.reachform__grid2 .rfield input::placeholder,
.reachform__grid2 .rfield textarea::placeholder{ color:rgba(20,22,40,.4) !important; }
.reachform__grid2 .rfield input:focus,
.reachform__grid2 .rfield select:focus,
.reachform__grid2 .rfield textarea:focus{ border-color:var(--gold) !important;
  background:rgba(255,255,255,.85) !important; box-shadow:0 0 0 3px rgba(198,160,66,.16) !important; }
.reachform__grid2 .rfield textarea{ min-height:104px; resize:vertical; line-height:1.5; }
.rselect{ position:relative; }
.rselect::after{ content:""; position:absolute; right:16px; top:50%; width:9px; height:9px; pointer-events:none;
  border-right:2px solid #6a6f80; border-bottom:2px solid #6a6f80; transform:translateY(-68%) rotate(45deg); }
.reachform__grid2 .rfield select{ cursor:pointer; padding-right:38px !important; }
.reachform .reachsend{ align-self:stretch; justify-content:center; gap:12px; margin-top:clamp(14px,1.8vw,20px) !important;
  padding:15px 24px !important; border-radius:14px !important; font-size:1.06rem; }
.reachform .reachsend__ic{ width:30px; height:30px; }
@media (max-width:680px){
  .reachform__grid2{ grid-template-columns:1fr; }
  /* tight space on phones -> the card fits the screen, the questions scroll INSIDE it, submit stays pinned */
  .reachbox{ max-height:min(82vh,720px); padding:clamp(20px,5vw,30px) !important; }
  .reachform{ flex:1; }
  .reachform__scroll{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch; touch-action:pan-y; }
}
/* ===================== mobile performance — lighter backdrop-filter on the heaviest / most-repainted glass (the nav re-blurs every scroll frame). Bg is light, so visually near-identical but much cheaper GPU paint. ===================== */
@media (max-width:680px){
  .nav__inner{ -webkit-backdrop-filter:blur(11px) saturate(160%) !important; backdrop-filter:blur(11px) saturate(160%) !important; }
  .reachbox{ -webkit-backdrop-filter:blur(16px) saturate(1.4) !important; backdrop-filter:blur(16px) saturate(1.4) !important; }
  .mobile-menu{ -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2); }
  /* stop the heavy decorative background FX on mobile — constant GPU/compositor work, barely visible on a phone */
  .proc__orb, .proc__scan, .proc__grid{ animation:none !important; }
  .proc__orb{ filter:blur(28px) !important; }
  /* lighter offscreen-icon shimmer loops (the mega menu lives offscreen on mobile anyway) */
  .mega__ico::before, .vcard .viz::before, .svc__viz::before{ animation:none !important; }
}