/* ============================================================
   REDESIGN PRESENTATION — Motion & Glass layer (v2.3)
   Everything here is progressive: content is fully visible
   without JS, and all motion stops under prefers-reduced-motion.
   ============================================================ */
:root{
  --glass:rgba(255,255,255,.08);
  --glass-line:rgba(255,255,255,.16);
  --glass-light:rgba(255,255,255,.72);
  --glass-light-line:rgba(91,46,224,.14);
  --violet:#9B6BFF;
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- scroll progress ---------- */
.m-progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:120;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--purple),var(--violet) 55%,var(--orange));pointer-events:none}

/* ---------- reveals: blur-to-sharp + stagger (still fail-open via .js) ---------- */
.js .reveal{filter:blur(6px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),filter .9s var(--ease-out)}
.js .reveal.in{filter:none}
.js .reveal.in>*{animation:m-rise .9s var(--ease-out) backwards}
.js .reveal.in>*:nth-child(2){animation-delay:.08s}
.js .reveal.in>*:nth-child(3){animation-delay:.16s}
.js .reveal.in>*:nth-child(4){animation-delay:.24s}
.js .reveal.in>*:nth-child(5){animation-delay:.32s}
.js .reveal.in>*:nth-child(n+6){animation-delay:.38s}
@keyframes m-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* split-heading lines (built by motion.js) */
.m-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.m-line>span{display:inline-block}

/* ---------- HERO: aurora + grid + stage ---------- */
.hero-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.hero-fx .aurora{position:absolute;border-radius:50%;opacity:.55;will-change:transform}
.hero-fx .a1{width:46vw;height:46vw;left:-12vw;top:-10vw;background:radial-gradient(circle,#5B2EE0 0,transparent 65%);animation:m-drift1 18s ease-in-out infinite alternate}
.hero-fx .a2{width:40vw;height:40vw;right:-10vw;top:4vw;background:radial-gradient(circle,#FF5A1F 0,transparent 62%);opacity:.38;animation:m-drift2 22s ease-in-out infinite alternate}
.hero-fx .a3{width:52vw;height:30vw;left:24vw;top:30vw;background:radial-gradient(circle,#2F6BFF 0,transparent 65%);opacity:.32;animation:m-drift3 26s ease-in-out infinite alternate}
@keyframes m-drift1{to{transform:translate(9vw,6vw) scale(1.15)}}
@keyframes m-drift2{to{transform:translate(-8vw,8vw) scale(.9)}}
@keyframes m-drift3{to{transform:translate(-10vw,-6vw) scale(1.2)}}
.hero-fx .grid-dots{position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.2px);background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 35%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 35%,#000 20%,transparent 75%)}
.hero-fx .beam{position:absolute;left:50%;top:-20%;width:1px;height:70%;background:linear-gradient(180deg,transparent,rgba(185,160,255,.6),transparent);transform:translateX(-50%) rotate(18deg);opacity:.5}

@keyframes m-shine{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.hero-stage{position:relative;max-width:1080px;margin:70px auto 0;perspective:1600px;z-index:1}
.stage-3d{position:relative;transform-style:preserve-3d;transform:rotateX(14deg) scale(.96);transform-origin:50% 100%;transition:transform .2s linear}
.deck-frame{position:relative;width:min(760px,88%);margin:0 auto;border-radius:18px;padding:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid var(--glass-line);
  box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04) inset;z-index:3}
.df-top{display:flex;align-items:center;gap:7px;padding:4px 6px 10px;color:#CFC9E8;font:500 12px 'JetBrains Mono',monospace;letter-spacing:.02em}
.df-top i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22)}
.df-top i:nth-child(1){background:#FF6B5A}.df-top i:nth-child(2){background:#FFC34D}.df-top i:nth-child(3){background:#3DDC84}
.df-top .df-file{margin-left:10px;opacity:.85}
.df-top .df-status{margin-left:auto;display:inline-flex;align-items:center;gap:8px;color:#fff}
.df-top .df-status::before{content:"";width:7px;height:7px;border-radius:50%;background:#3DDC84;animation:m-blink 1.6s ease-in-out infinite}
@keyframes m-ping{70%{box-shadow:0 0 0 8px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
.morph{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#0d0c14}
.morph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.morph .m-after-wrap{position:absolute;inset:0;overflow:hidden;transform:translateX(-100%);animation:m-wipe-o 9s cubic-bezier(.65,0,.35,1) infinite;will-change:transform}
.morph .m-after-wrap img{transform:translateX(100%);animation:m-wipe-i 9s cubic-bezier(.65,0,.35,1) infinite;will-change:transform}
.morph .scan-track{position:absolute;inset:0;pointer-events:none;animation:m-scan-t 9s cubic-bezier(.65,0,.35,1) infinite;will-change:transform,opacity}
.morph .scan{position:absolute;top:0;bottom:0;left:0;width:3px;background:linear-gradient(180deg,transparent,#fff,transparent);box-shadow:0 0 18px 4px rgba(155,107,255,.9),0 0 50px 12px rgba(91,46,224,.55)}
.morph .m-tag{position:absolute;top:12px;padding:5px 10px;border-radius:7px;font:600 11px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;z-index:2}
.morph .t-before{left:12px;background:rgba(15,14,22,.75);color:#E9E6F5;animation:m-tagb 9s infinite}
.morph .t-after{right:12px;background:var(--purple);color:#fff;animation:m-taga 9s infinite}
@keyframes m-wipe-o{0%,8%{transform:translateX(-100%)}42%,88%{transform:translateX(0)}100%{transform:translateX(-100%)}}
@keyframes m-wipe-i{0%,8%{transform:translateX(100%)}42%,88%{transform:translateX(0)}100%{transform:translateX(100%)}}
@keyframes m-scan-t{0%,8%{transform:translateX(0);opacity:1}42%{transform:translateX(100%);opacity:1}46%,100%{transform:translateX(100%);opacity:0}}
@keyframes m-tagb{0%,30%{opacity:1}42%,92%{opacity:0}100%{opacity:1}}
@keyframes m-taga{0%,34%{opacity:0}44%,88%{opacity:1}96%,100%{opacity:0}}
.df-bar{display:flex;align-items:center;gap:12px;padding:12px 6px 4px;color:#CFC9E8;font:500 11px 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase}
.df-bar .prog{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
.df-bar .prog i{display:block;height:100%;width:100%;transform-origin:0 50%;background:linear-gradient(90deg,var(--purple),var(--violet),var(--orange));animation:m-prog 9s cubic-bezier(.65,0,.35,1) infinite}
@keyframes m-prog{0%,8%{transform:scaleX(0)}42%,88%{transform:scaleX(1)}100%{transform:scaleX(0)}}

.stage-side{position:absolute;bottom:8%;width:34%;border-radius:14px;overflow:hidden;border:1px solid var(--glass-line);box-shadow:0 30px 80px rgba(0,0,0,.55);z-index:1;opacity:.85}
.stage-side img{display:block;width:100%;height:auto}
.stage-side.sl{left:0;transform:translateZ(-120px) rotateY(18deg) rotate(-4deg)}
.stage-side.sr{right:0;transform:translateZ(-120px) rotateY(-18deg) rotate(4deg)}

.chip{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;white-space:nowrap;
  background:rgba(22,20,34,.86);border:1px solid var(--glass-line);color:#fff;font:600 13px 'Instrument Sans',sans-serif;text-align:left;box-shadow:0 14px 40px rgba(0,0,0,.4);animation:m-float 7s ease-in-out infinite}
.chip small{display:block;font:500 11px 'Instrument Sans',sans-serif;color:#B9B7C9;margin-top:1px}
.chip .ci{flex:0 0 30px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(91,46,224,.35);border:1px solid rgba(185,160,255,.35)}
.chip .ci svg{width:16px;height:16px;fill:none;stroke:#E2D8FF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chip.c1{left:2%;top:12%}
.chip.c2{right:1%;top:6%;animation-delay:-2s}
.chip.c3{left:6%;bottom:16%;animation-delay:-4s}
.chip.c4{right:4%;bottom:22%;animation-delay:-1s}
.chip.c2 .ci{background:rgba(255,90,31,.3);border-color:rgba(255,140,100,.4)}
.chip.c4 .ci{background:rgba(61,220,132,.22);border-color:rgba(61,220,132,.4)}
@keyframes m-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.stage-lines{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
.stage-lines path{fill:none;stroke:rgba(185,160,255,.45);stroke-width:1.2;stroke-dasharray:5 7;animation:m-dash 2.6s linear infinite}
@keyframes m-dash{to{stroke-dashoffset:-48}}
.hero-stage-fade{position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(180deg,transparent,var(--hero-bg,#0B0A12));z-index:5;pointer-events:none}

/* ---------- glass logo marquee ---------- */
.logos.m-marquee .logo-grid{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mq{position:relative;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)}
.mq-track{display:flex;width:max-content;gap:14px;animation:m-mq 38s linear infinite}
.mq:hover .mq-track,.mq.paused .mq-track{animation-play-state:paused}
.mq-track span{display:inline-flex;align-items:center;padding:10px 18px;border-radius:99px;border:1px solid var(--line);background:var(--glass-light);
  font:600 15px 'Sora',sans-serif;color:#4E4E5A;white-space:nowrap}
@keyframes m-mq{to{transform:translateX(-50%)}}

/* ---------- kinetic services ticker ---------- */
.kinetic{padding:36px 0 30px;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg);position:relative}
.kin-row{display:flex;width:max-content;align-items:center;gap:34px;font-family:'Sora',sans-serif;font-weight:700;font-size:clamp(34px,5.4vw,72px);letter-spacing:-.03em;line-height:1.12;white-space:nowrap;will-change:transform}
.kin-row+.kin-row{margin-top:6px}
.kin-row .o{color:transparent;-webkit-text-stroke:1.4px #857EB8}
.kin-row .s{color:var(--ink)}
.kin-row .star{width:.5em;height:.5em;flex:0 0 auto;fill:var(--orange)}
.kin-row.r1{animation:m-kin 46s linear infinite}
.kin-row.r2{animation:m-kin 52s linear infinite reverse}
.kinetic.paused .kin-row{animation-play-state:paused}
@keyframes m-kin{to{transform:translateX(-50%)}}
.kin-pause{position:absolute;right:16px;top:10px;z-index:2;font:600 12px 'Instrument Sans',sans-serif;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:6px 12px;cursor:pointer}
.kin-pause:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- statement ink paragraph ---------- */
.statement{padding:120px 0 40px}
.statement p.ink{font-family:'Sora',sans-serif;font-weight:600;font-size:clamp(26px,3.4vw,46px);line-height:1.22;letter-spacing:-.025em;color:var(--ink);max-width:22em}
.statement p.ink .w{color:#8D8A9E;transition:color .25s}
.statement p.ink .w.on{color:var(--ink)}
.statement p.ink em{font-style:normal;background:linear-gradient(90deg,var(--purple),var(--violet));-webkit-background-clip:text;background-clip:text}
.statement p.ink em .w.on{color:transparent}

/* ---------- before/after compare slider ---------- */
.bax{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;border:1px solid #CFC3F7;box-shadow:0 18px 50px rgba(91,46,224,.16);user-select:none;-webkit-user-select:none;touch-action:pan-y;background:#fff;--p:50%}
.bax img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.bax .bax-after{clip-path:inset(0 0 0 var(--p))}
.bax .bax-handle{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(91,46,224,.25),0 0 24px rgba(91,46,224,.6);pointer-events:none}
.bax .bax-knob{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(255,255,255,.9);border:1px solid rgba(91,46,224,.3);
  display:grid;place-items:center;box-shadow:0 10px 30px rgba(21,21,26,.25);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.bax .bax-knob svg{width:22px;height:22px;stroke:var(--purple);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bax input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3}
.bax input[type=range]:focus-visible~.bax-handle .bax-knob{outline:3px solid var(--purple);outline-offset:3px}
.bax .bax-l{position:absolute;top:12px;z-index:2;padding:5px 10px;border-radius:7px;font:600 11px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
.bax .bax-lb{left:12px;background:rgba(21,21,26,.78);color:#fff}
.bax .bax-la{right:12px;background:var(--purple);color:#fff}
.bax-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;font-size:13px;color:var(--muted)}
.bax-tools button{font:600 13px 'Instrument Sans',sans-serif;color:var(--purple);background:none;border:0;cursor:pointer;padding:6px 0}
.bax-tools button:hover{text-decoration:underline}
.sbs.sbs-enh{display:none}

/* ---------- spotlight + tilt cards ---------- */
.m-spot{position:relative;isolation:isolate}
.m-spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;z-index:2;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(91,46,224,.12),transparent 45%)}
.m-spot:hover::after{opacity:1}
.dark .m-spot::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(185,160,255,.16),transparent 45%)}
.m-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);transition:transform .35s var(--ease-out),box-shadow .3s,border-color .3s}
.m-tilt:hover{box-shadow:0 24px 60px rgba(21,21,26,.14);border-color:#D6CCF7}

/* ---------- border beam on key CTAs ---------- */
.btn-beam{position:relative;isolation:isolate}
.btn-beam::before{content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-1;padding:2px;
  background:conic-gradient(from var(--ang,0deg),transparent 0 70%,#FFC7A8 80%,#fff 85%,#B9A0FF 90%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:m-beam 3.2s linear infinite}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes m-beam{to{--ang:360deg}}

/* ---------- stats band glass ---------- */
.stats-band{position:relative;overflow:hidden}
.stats-band::before{content:"";position:absolute;width:60vw;height:60vw;left:20vw;top:-30vw;border-radius:50%;background:radial-gradient(circle,rgba(91,46,224,.35),transparent 60%);animation:m-drift1 20s ease-in-out infinite alternate;pointer-events:none}
.stats-band .stats5 .stat{position:relative;border:1px solid var(--glass-line);border-radius:16px;padding:22px 20px;background:rgba(255,255,255,.04);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* ---------- pinned horizontal process ---------- */
.hs-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.hs-count{font-family:'Sora',sans-serif;font-weight:700;font-size:56px;letter-spacing:-.04em;line-height:1;color:var(--ink);display:none}
.hs-count small{font-size:16px;color:var(--muted);letter-spacing:0;margin-left:6px}
.hs-rail{display:none;height:3px;border-radius:3px;background:var(--line);margin-top:28px;overflow:hidden}
.hs-rail i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--purple),var(--violet),var(--orange))}
.method-grid .step{position:relative;overflow:hidden}
.method-grid .step .big-n{position:absolute;right:-6px;top:-22px;font-family:'Sora',sans-serif;font-weight:800;font-size:150px;line-height:1;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px #DCD3F8;pointer-events:none;z-index:0}
.method-grid .step>*{position:relative;z-index:1}
.hs-on .hs-count,.hs-on .hs-rail{display:block}
.hs-on .method-grid{display:flex;gap:24px;width:max-content;will-change:transform}
.hs-on .method-grid .step{width:min(520px,42vw);min-height:340px;padding:40px;border-radius:22px;box-shadow:var(--shadow)}
.hs-on .method-grid .step h3{font-size:26px;margin-top:70px}
.hs-on .method-grid .step p{font-size:17px;max-width:30ch}
.hs-on .method-grid .step .big-n{font-size:220px;top:-34px}
.hs-on .hs-viewport{overflow:visible}

/* ---------- CTA glass card ---------- */
#contact.cta .wrap{position:relative;overflow:hidden;border-radius:28px;padding:84px 40px;background:var(--ink-2);color:#fff;max-width:1120px;box-shadow:0 40px 100px rgba(21,21,26,.25)}
#contact.cta .wrap>*{position:relative;z-index:1}
#contact.cta .wrap::before{content:"";position:absolute;width:520px;height:520px;left:-120px;top:-220px;border-radius:50%;background:radial-gradient(circle,rgba(91,46,224,.55),transparent 65%);animation:m-drift1 16s ease-in-out infinite alternate}
#contact.cta .wrap::after{content:"";position:absolute;width:460px;height:460px;right:-120px;bottom:-240px;border-radius:50%;background:radial-gradient(circle,rgba(255,90,31,.4),transparent 65%);animation:m-drift2 18s ease-in-out infinite alternate}
#contact.cta h2{color:#fff}
#contact.cta p,#contact.cta .note{color:#C9C7D6}
#contact.cta .note a{color:#CDBBFF!important}
#contact.cta .btn-secondary{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#contact.cta .btn-secondary:hover{border-color:#fff}
#contact.cta .journey{color:#D9CCFF;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}

/* ---------- inner page heroes: soft aurora + grid ---------- */
.page-hero{position:relative;overflow:hidden;isolation:isolate}
.page-hero::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:120%;z-index:-1;pointer-events:none;
  background:radial-gradient(38% 50% at 12% 20%,rgba(91,46,224,.16),transparent 70%),radial-gradient(30% 40% at 88% 10%,rgba(255,90,31,.12),transparent 70%),radial-gradient(40% 40% at 60% 90%,rgba(47,107,255,.08),transparent 70%);
  animation:m-hero-soft 16s ease-in-out infinite alternate}
.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(91,46,224,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(91,46,224,.06) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 70% 30%,#000,transparent 75%);mask-image:radial-gradient(ellipse 60% 70% at 70% 30%,#000,transparent 75%)}
@keyframes m-hero-soft{to{transform:translate3d(3%,4%,0) scale(1.06)}}
.svc-hero-img{transform:perspective(1200px) rotateY(-8deg) rotateX(4deg);transition:transform .6s var(--ease-out);animation:m-float 8s ease-in-out infinite}
.svc-hero-img:hover{transform:perspective(1200px) rotateY(0) rotateX(0)}

/* ---------- responsive / safety ---------- */
@media (max-width:900px){
  .chip.c3,.chip.c4,.stage-side{display:none}
  .chip{font-size:12px;padding:8px 11px}
  .chip .ci{width:26px;height:26px;flex-basis:26px}
  .chip.c1{left:0;top:-4%}
  .chip.c2{right:0;top:auto;bottom:4%}
  .stage-lines{display:none}
  .deck-frame{width:100%}
  .stage-3d{transform:none}
  .hero-stage{margin-top:48px}
}
@media (max-width:520px){
  .chip small{display:none}
  .kin-pause{top:4px;right:8px}
}
@media (prefers-reduced-motion:reduce){
  .morph .m-after-wrap,.morph .m-after-wrap img{transform:none!important}
  .morph .scan-track,.morph .t-before{display:none}
  .morph .t-after{opacity:1}
  .df-bar .prog i{transform:none}
  .kin-row,.mq-track{animation:none!important}
  .mq,.kinetic{overflow-x:auto}
  .statement p.ink .w{color:var(--ink)}
  .stage-3d{transform:none}
  .js .reveal{filter:none}
  .m-tilt{transform:none!important}
}
@media print{.hero-fx,.chip,.stage-lines,.m-progress,.kinetic{display:none}}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hs-head .sec-head{margin-bottom:0}
.hs-head{margin-bottom:48px}
.hs-on .hs-head{margin-bottom:0}
.hs-on .hs-rail{margin:28px 0 40px}
.hero-dark.has-stage{padding-bottom:84px}
.hero-stage-fade{height:70px;bottom:-84px}
/* ---------- at-a-glance (AEO fact card) ---------- */
.glance{padding:40px 0 96px}
.glance-card{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:start;border:1px solid var(--glass-light-line);border-radius:24px;padding:40px;
  background:linear-gradient(135deg,rgba(91,46,224,.06),rgba(255,90,31,.04)),var(--bg);box-shadow:var(--shadow)}
.glance-card h2{font-size:clamp(26px,2.6vw,34px);margin-top:14px}
.glance-card>div>p{color:var(--muted);margin-top:12px}
.glance-dl{display:grid;grid-template-columns:1fr 1fr;gap:16px 26px}
.glance-dl div{border-top:1px solid var(--line);padding-top:12px}
.glance-dl dt{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--purple)}
.glance-dl dd{margin:6px 0 0;font-size:15px;color:var(--ink);line-height:1.5}
@media (max-width:900px){.glance-card{grid-template-columns:1fr;padding:26px;gap:22px}.glance-dl{grid-template-columns:1fr}}
.cmp th small.based{display:block;font:500 12px 'Instrument Sans',sans-serif;color:var(--muted);margin-top:3px}
.post .cmp .price{white-space:normal;font-size:14px}
.post .cmp{font-size:14px}
.post .cmp th,.post .cmp td{padding:14px 14px}
#method.hs-on{overflow:hidden}
.pin-spacer{overflow:hidden}

/* hero intro (CSS, no JS needed; headline is never hidden so LCP is not delayed) */
@media (prefers-reduced-motion:no-preference){
  .hero-dark h1{animation:m-h1 1.1s var(--ease-out) both}
  .hero-dark .hero-pill,.hero-dark .lede,.hero-dark .hero-cta,.hero-dark .hero-proof{animation:m-rise .9s var(--ease-out) backwards}
  .hero-dark .hero-pill{animation-delay:.05s}.hero-dark .lede{animation-delay:.15s}.hero-dark .hero-cta{animation-delay:.25s}.hero-dark .hero-proof{animation-delay:.35s}
  .deck-frame{animation:m-frame 1.3s var(--ease-out) .3s backwards}
  .chip{animation:m-chip .8s cubic-bezier(.34,1.56,.64,1) backwards,m-float 7s ease-in-out 1s infinite}
  .chip.c1{animation-delay:.8s,1s}.chip.c2{animation-delay:.95s,-1s}.chip.c3{animation-delay:1.1s,-3s}.chip.c4{animation-delay:1.25s,0s}
  .page-hero h1{animation:m-h1 1s var(--ease-out) both}
}
@keyframes m-h1{from{transform:translateY(28px);letter-spacing:-.05em}to{transform:none}}
@keyframes m-frame{from{opacity:0;transform:translateY(60px) rotateX(20deg)}}
@keyframes m-chip{from{opacity:0;transform:scale(.7)}}
@keyframes m-blink{50%{opacity:.35}}
@media (min-width:1024px) and (hover:hover){
  .deck-frame{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
  .chip{background:rgba(22,20,34,.6);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
}
@media (max-width:1023px){.hero-fx .aurora{animation:none}}
.m-off,.m-off *,.m-off::before,.m-off::after{animation-play-state:paused!important}