/* ============================================================
   ORBIT — flagship SaaS product template
   Dark aurora theme · GSAP/ScrollTrigger/Lenis · bespoke.
   ============================================================ */
:root{
  --bg:#05060e; --bg2:#080a16; --ink:#eef2ff; --mut:#8a97bd;
  --line:rgba(140,170,255,.14); --card:rgba(255,255,255,.035);
  --c1:#2b6bff; --c2:#22d3ee; --c3:#b74bf5; --accent:#f5397e;
  --grad:linear-gradient(100deg,var(--c1),var(--c2) 48%,var(--c3));
  --disp:'Space Grotesk',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif;
  --r:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;cursor:none}
@media (hover:none){body{cursor:auto}}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:rgba(43,107,255,.4);color:#fff}
.wrap{width:min(1180px,92vw);margin-inline:auto}
.eyebrow{font-family:var(--disp);font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--c2)}
em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- cursor ---------- */
.cursor,.cursor-ring{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;border-radius:50%;mix-blend-mode:screen}
.cursor{width:7px;height:7px;background:#cfe0ff;transition:width .25s,height .25s,background .25s}
.cursor-ring{width:34px;height:34px;border:1px solid rgba(160,190,255,.6);transition:width .3s,height .3s,border-color .3s,background .3s}
.cursor.hot{width:11px;height:11px;background:#fff}
.cursor-ring.hot{width:56px;height:56px;border-color:transparent;background:rgba(80,140,255,.18)}
@media (hover:none){.cursor,.cursor-ring{display:none}}

/* ---------- grain + vignette ---------- */
.grain,.vignette{position:fixed;inset:0;pointer-events:none;z-index:2}
.vignette{box-shadow:inset 0 0 240px 60px rgba(0,0,0,.75)}
.grain{opacity:.05;z-index:3;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:10000;background:var(--bg);display:grid;place-items:center}
.loader-inner{display:flex;align-items:baseline;gap:.5rem;font-family:var(--disp)}
.loader-num{font-size:clamp(3rem,10vw,7rem);font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.loader-word{font-size:1rem;letter-spacing:.4em;text-transform:uppercase;color:var(--mut)}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;
  padding:20px min(4vw,42px);transition:background .4s,backdrop-filter .4s,padding .4s}
.nav.solid{background:rgba(5,6,14,.72);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);padding-top:14px;padding-bottom:14px}
.brand{font-family:var(--disp);font-weight:700;font-size:1.4rem;letter-spacing:-.02em;display:flex;align-items:center;gap:.5rem}
.brand .orb{width:22px;height:22px;border-radius:50%;background:var(--grad);box-shadow:0 0 18px rgba(43,107,255,.7);position:relative}
.brand .orb::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--bg)}
.nav-links{display:flex;gap:30px;font-size:.94rem;color:var(--mut)}
.nav-links a{transition:color .25s}.nav-links a:hover{color:var(--ink)}
.nav-cta{font-family:var(--disp);font-weight:600;font-size:.9rem;padding:11px 22px;border-radius:999px;background:var(--grad);color:#fff;box-shadow:0 10px 30px -10px rgba(43,107,255,.8);will-change:transform}
.nav-burg{display:none;background:none;border:0;flex-direction:column;gap:5px;cursor:pointer}
.nav-burg span{width:24px;height:2px;background:var(--ink);display:block}
@media(max-width:820px){.nav-links,.nav-cta{display:none}.nav-burg{display:flex}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.orbit-gl{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;opacity:.9;
  -webkit-mask-image:radial-gradient(130% 115% at 50% 46%,#000 40%,transparent 92%);
  mask-image:radial-gradient(130% 115% at 50% 46%,#000 40%,transparent 92%)}
.hero-scrim{position:absolute;inset:0;z-index:1;background:
  radial-gradient(72% 54% at 50% 46%, rgba(5,6,14,.58), transparent 72%),
  radial-gradient(120% 90% at 50% 0%,transparent 40%,rgba(5,6,14,.5) 100%),
  linear-gradient(180deg,transparent 55%,var(--bg) 100%)}
.hero-inner{position:relative;z-index:2;width:min(1180px,92vw);margin-inline:auto;padding-top:12vh}
.hero-eyebrow{opacity:0;transform:translateY(10px);display:inline-block;margin-bottom:22px;
  padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03);backdrop-filter:blur(6px)}
.hero h1{font-family:var(--disp);font-weight:700;letter-spacing:-.03em;line-height:.98;
  font-size:clamp(2.7rem,8.4vw,7rem)}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln>span{display:block}
.hero-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:34px}
.hero-foot p{opacity:0;max-width:34em;color:var(--mut);font-size:1.08rem}
.hero-cta{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-family:var(--disp);font-weight:600;
  padding:15px 30px;border-radius:999px;background:var(--grad);color:#fff;box-shadow:0 16px 44px -14px rgba(80,120,255,.85);will-change:transform}
.hero-cta svg{width:18px;height:18px}
.scroll-cue{font-family:var(--disp);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mut);display:flex;align-items:center;gap:10px}
.scroll-cue i{width:1px;height:34px;background:linear-gradient(var(--c2),transparent);display:block;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ---------- generic section ---------- */
.section{position:relative;padding:clamp(80px,12vh,150px) 0;z-index:4}
[data-fade]{opacity:0;transform:translateY(28px)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:52px;flex-wrap:wrap}
.sec-head h2,.section h2{font-family:var(--disp);font-weight:700;letter-spacing:-.02em;line-height:1.03;font-size:clamp(2rem,4.6vw,3.4rem)}
.section .lead{color:var(--mut);font-size:1.1rem;max-width:34em;margin-top:14px}

/* ---------- manifesto ---------- */
.manifesto p{font-family:var(--disp);font-weight:600;letter-spacing:-.02em;line-height:1.28;font-size:clamp(1.5rem,3.7vw,2.9rem)}
.manifesto .word{opacity:.15;transition:opacity .3s}
.manifesto .word.on{opacity:1}

/* ---------- signature: scroll-assembled app window ---------- */
.showcase{position:relative}
.showcase .stage{position:relative;height:100svh;display:grid;place-items:center}
.app{position:relative;width:min(1060px,92vw);aspect-ratio:16/10;border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,#0c1024,#070912);border:1px solid var(--line);
  box-shadow:0 50px 120px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.02) inset;display:grid;
  grid-template-columns:210px 1fr;grid-template-rows:52px 1fr}
.app-top{grid-column:1/3;display:flex;align-items:center;gap:8px;padding:0 18px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.app-top .dot{width:11px;height:11px;border-radius:50%}
.app-top .d1{background:#ff5f57}.app-top .d2{background:#febc2e}.app-top .d3{background:#28c840}
.app-top .crumb{margin-left:16px;font-size:.82rem;color:var(--mut);font-family:var(--disp)}
.app-top .pill{margin-left:auto;font-size:.72rem;color:var(--c2);border:1px solid var(--line);padding:5px 12px;border-radius:999px}
.app-side{border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:5px;background:rgba(255,255,255,.01)}
.app-side .s-logo{display:flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:700;margin-bottom:12px;font-size:.98rem}
.app-side .s-logo .orb{width:16px;height:16px;border-radius:50%;background:var(--grad)}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;font-size:.86rem;color:var(--mut)}
.nav-item.active{background:rgba(80,130,255,.14);color:var(--ink)}
.nav-item .ic{width:15px;height:15px;border-radius:4px;background:linear-gradient(135deg,var(--c1),var(--c3));opacity:.85;flex:none}
.app-board{padding:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-content:start;overflow:hidden}
.col{display:flex;flex-direction:column;gap:10px}
.col h5{font-family:var(--disp);font-size:.8rem;color:var(--mut);letter-spacing:.04em;display:flex;justify-content:space-between}
.tk{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
.tk .bar{height:7px;border-radius:4px;background:rgba(255,255,255,.12)}
.tk .bar.s{width:60%}.tk .bar.g{background:var(--grad);width:80%}
.tk .row{display:flex;align-items:center;gap:6px}
.tk .av{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--c2),var(--c3))}
.tk .tag{font-size:.62rem;color:var(--c2);border:1px solid var(--line);padding:2px 8px;border-radius:999px}
.app-cursor{position:absolute;z-index:5;width:20px;height:20px;pointer-events:none;left:44%;top:58%;opacity:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
@media(max-width:820px){.app{grid-template-columns:1fr;grid-template-rows:48px 1fr}.app-side{display:none}.app-board{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.app-board{grid-template-columns:1fr}.app-board .col:nth-child(3){display:none}}

/* ---------- bento ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.b-card{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;
  min-height:200px;display:flex;flex-direction:column;justify-content:space-between;transition:border-color .3s,transform .3s}
.b-card:hover{border-color:rgba(120,170,255,.4);transform:translateY(-4px)}
.b-card::before{content:"";position:absolute;width:200px;height:200px;right:-60px;top:-60px;border-radius:50%;
  background:radial-gradient(circle,rgba(43,107,255,.25),transparent 70%);opacity:.7;pointer-events:none}
.b-card.wide{grid-column:span 4}.b-card.mid{grid-column:span 3}.b-card.tall{grid-column:span 2;min-height:420px}
.b-card.sm{grid-column:span 2}
.b-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(43,107,255,.14);color:var(--c2);margin-bottom:auto}
.b-ic svg{width:24px;height:24px}
.b-card h3{font-family:var(--disp);font-size:1.28rem;margin:18px 0 8px;letter-spacing:-.01em}
.b-card p{color:var(--mut);font-size:.96rem}
.b-card .big{font-family:var(--disp);font-weight:700;font-size:clamp(2.4rem,5vw,4rem);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
@media(max-width:900px){.bento{grid-template-columns:repeat(2,1fr)}.b-card.wide,.b-card.mid,.b-card.tall,.b-card.sm{grid-column:span 2;min-height:200px}}
@media(max-width:560px){.bento{grid-template-columns:1fr}.b-card,.b-card.wide,.b-card.mid,.b-card.tall,.b-card.sm{grid-column:span 1}}

/* ---------- horizontal pinned ---------- */
.h-scroll{position:relative}
.h-pin{height:100svh;display:flex;align-items:center;overflow:hidden}
.h-track{display:flex;gap:28px;padding:0 6vw;will-change:transform}
.h-intro{flex:none;width:min(420px,80vw);align-self:center}
.h-intro h2{font-family:var(--disp);font-weight:700;font-size:clamp(2rem,4vw,3rem);line-height:1.02}
.h-card{flex:none;width:min(440px,80vw)}
.h-figure{position:relative;height:62vh;border-radius:var(--r);border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(160deg,#0b0f22,#070912);padding:30px;display:flex;flex-direction:column;justify-content:flex-end}
.h-num{position:absolute;top:22px;left:26px;font-family:var(--disp);font-weight:700;font-size:1.1rem;color:var(--c2)}
.h-figure::before{content:"";position:absolute;width:260px;height:260px;right:-70px;top:-40px;border-radius:50%;background:radial-gradient(circle,rgba(183,75,245,.3),transparent 70%)}
.cap-t{display:block;font-family:var(--disp);font-size:1.5rem;font-weight:600;margin-bottom:8px}
.cap-d{display:block;color:var(--mut);font-size:.98rem}
.h-progress{position:absolute;left:6vw;right:6vw;bottom:36px;height:2px;background:var(--line);z-index:5}
/* mobile: no horizontal pin — stack the capability cards as a normal list */
@media (max-width:820px){
  .h-pin{height:auto;display:block;overflow:visible;padding:8px 0}
  .h-track{flex-wrap:wrap;transform:none!important;gap:18px;padding:0 6vw}
  .h-intro{width:100%;margin-bottom:6px}
  .h-card{width:100%}
  .h-figure{height:auto;min-height:280px}
  .h-progress{display:none}
}
.h-progress i{display:block;height:100%;width:0;background:var(--grad)}

/* ---------- stats ---------- */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat h3{font-family:var(--disp);font-weight:700;font-size:clamp(2.4rem,5vw,3.6rem);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat p{color:var(--mut);margin-top:4px}
@media(max-width:720px){.stats-grid{grid-template-columns:1fr 1fr}}

/* ---------- feature statement ---------- */
.feature{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.feature-fig{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(150deg,#0b1024,#070912);display:grid;place-items:center}
.feature-fig .glyph{font-size:clamp(4rem,10vw,8rem);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.feature-fig .mask{position:absolute;inset:0;background:var(--bg);transform-origin:right}
.tag-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.tag-row span{font-size:.82rem;color:var(--mut);border:1px solid var(--line);padding:7px 14px;border-radius:999px}
@media(max-width:820px){.feature{grid-template-columns:1fr}}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding:26px 0;background:var(--bg2)}
.marquee-in{display:flex;gap:60px;width:max-content;font-family:var(--disp);font-weight:700;font-size:clamp(1.6rem,4vw,3rem);color:transparent;-webkit-text-stroke:1px rgba(160,190,255,.35)}
.marquee-in span{display:inline-block}

/* ---------- cta ---------- */
.cta{text-align:center}
.cta h2{font-family:var(--disp);font-weight:700;font-size:clamp(2.4rem,7vw,5rem);line-height:1;letter-spacing:-.02em}
.cta a.magnetic{display:inline-flex;align-items:center;gap:12px;margin-top:34px;font-family:var(--disp);font-weight:600;font-size:1.05rem;
  padding:18px 40px;border-radius:999px;background:var(--grad);color:#fff;box-shadow:0 20px 60px -18px rgba(80,120,255,.9);will-change:transform}
.cta a svg{width:20px;height:20px}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:60px min(4vw,42px) 34px;position:relative;z-index:4}
.foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:40px}
.foot-brand{font-family:var(--disp);font-weight:700;font-size:clamp(3rem,9vw,6rem);line-height:.85;letter-spacing:-.03em}
.foot-cols{display:flex;gap:60px;flex-wrap:wrap}
.foot-col h4{font-family:var(--disp);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--c2);margin-bottom:14px}
.foot-col a,.foot-col p{display:block;color:var(--mut);font-size:.94rem;margin-bottom:8px;transition:color .25s}
.foot-col a:hover{color:var(--ink)}
.foot-bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:22px;color:var(--mut);font-size:.85rem}

.reveal-up{opacity:0;transform:translateY(30px)}

/* ---------- bento card internals ---------- */
.mini-board{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}
.mini-board span{height:46px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
.mini-board span:nth-child(1){background:linear-gradient(135deg,rgba(43,107,255,.4),transparent)}
.mini-board span:nth-child(4){background:linear-gradient(135deg,rgba(34,211,238,.4),transparent)}
.mini-board span:nth-child(5){background:linear-gradient(135deg,rgba(183,75,245,.4),transparent)}
.vortex{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;margin-bottom:auto;
  background:#04050c;display:grid;place-items:center}
.vortex::before{content:"";position:absolute;width:150%;aspect-ratio:1;border-radius:50%;
  background:conic-gradient(from 0deg,transparent,rgba(43,107,255,.7),rgba(34,211,238,.6),rgba(183,75,245,.7),transparent 85%);
  filter:blur(6px);animation:spin 7s linear infinite;mask:radial-gradient(closest-side,transparent 24%,#000 30%,#000 62%,transparent 70%);
  -webkit-mask:radial-gradient(closest-side,transparent 24%,#000 30%,#000 62%,transparent 70%)}
.vortex .bell{position:relative;z-index:2;font-size:1.4rem;filter:drop-shadow(0 0 8px rgba(0,0,0,.8))}
@keyframes spin{to{transform:rotate(360deg)}}
.office{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}
.office i{height:46px;border-radius:8px;background:linear-gradient(135deg,#0e1430,#1a2350);border:1px solid var(--line);position:relative;overflow:hidden}
.office i::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);
  background:linear-gradient(135deg,var(--c2),var(--c3))}
.office i:nth-child(2)::after{background:linear-gradient(135deg,var(--c1),var(--c2))}
.office i:nth-child(3)::after{background:linear-gradient(135deg,var(--c3),var(--c1))}

/* ---------- CTA glowing orbit ring ---------- */
.cta{position:relative}
.cta-orbit{position:absolute;left:50%;top:-40px;transform:translateX(-50%);width:min(380px,80vw);aspect-ratio:1;pointer-events:none;z-index:-1;opacity:.9}
.cta-orbit .ring{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent,var(--c1),var(--c2),var(--c3),transparent 80%);
  mask:radial-gradient(closest-side,transparent 68%,#000 70%);-webkit-mask:radial-gradient(closest-side,transparent 68%,#000 70%);
  animation:spin 12s linear infinite;filter:blur(2px)}
.cta-orbit .core{position:absolute;inset:36%;border-radius:50%;background:radial-gradient(circle,rgba(43,107,255,.55),transparent 70%);filter:blur(14px)}
.cta a.magnetic{position:relative;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 20px 60px -18px rgba(80,120,255,.9),0 0 60px -6px rgba(43,107,255,.5)}

/* ============================================================
   Real imagery + animations (added)
   ============================================================ */
/* image feature cards */
.b-card.media{padding:0;overflow:hidden}
.b-card.media .b-shot{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;perspective:800px}
.b-card.media.tall .b-shot{aspect-ratio:auto;flex:1}
.b-shot img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.05);transition:transform .7s cubic-bezier(.2,.7,.2,1);will-change:transform}
.b-card.media:hover .b-shot img{transform:scale(1.11)}
.b-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(5,6,14,.55))}
.b-shot.kenburns img{animation:kenburns 16s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.06) translate(0,0)}to{transform:scale(1.16) translate(-2.5%,-2%)}}
.b-shot .play{position:absolute;left:50%;top:50%;width:56px;height:56px;transform:translate(-50%,-50%);border-radius:50%;
  background:rgba(255,255,255,.14);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.4);display:grid;place-items:center;z-index:2}
.b-shot .play::before{content:"";border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.b-shot .play::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(255,255,255,.35);animation:playPulse 2.2s ease-out infinite}
@keyframes playPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.b-card.media .b-txt{padding:20px 24px 24px}
.b-card.media h3{margin:0 0 8px}

/* electric moving border on tiles */
@property --elecA{syntax:'<angle>';inherits:false;initial-value:0deg}
.elec{position:relative;isolation:isolate}
.elec::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:3;pointer-events:none;
  background:conic-gradient(from var(--elecA),transparent 0 62%,#38bdf8 74%,#a855f7 84%,#22d3ee 92%,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,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:elecSpin 3.6s linear infinite;filter:drop-shadow(0 0 6px rgba(56,189,248,.6))}
@keyframes elecSpin{to{--elecA:360deg}}
@media (prefers-reduced-motion:reduce){.elec::after{animation:none}}

/* CTA orbital clock (real image + ticks + sweeping hand) */
.cta-clock{position:relative;width:min(300px,72vw);aspect-ratio:1;margin:0 auto 8px;display:block}
.cta-clock .clock-glow{position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(circle,rgba(43,107,255,.5),transparent 66%);filter:blur(24px);animation:clockPulse 4.5s ease-in-out infinite}
@keyframes clockPulse{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1.06)}}
.cta-clock .clock-core{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain;border-radius:50%;animation:spinSlow 44s linear infinite;filter:drop-shadow(0 0 18px rgba(80,120,255,.5))}
@keyframes spinSlow{to{transform:rotate(360deg)}}
.cta-clock .clock-ticks{position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(180,210,255,.55) 0 0.5deg,transparent 0.5deg 6deg);
  -webkit-mask:radial-gradient(closest-side,transparent 88%,#000 89%);mask:radial-gradient(closest-side,transparent 88%,#000 89%);
  animation:spinSlowRev 60s linear infinite}
@keyframes spinSlowRev{to{transform:rotate(-360deg)}}
.cta-clock .clock-hand{position:absolute;left:50%;top:50%;width:2px;height:44%;background:linear-gradient(var(--c2),transparent);
  transform-origin:bottom center;transform:translate(-50%,-100%);border-radius:2px;box-shadow:0 0 10px var(--c2);animation:sweep 6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes sweep{to{transform:translate(-50%,-100%) rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cta-clock .clock-core,.cta-clock .clock-ticks,.cta-clock .clock-hand,.cta-clock .clock-glow{animation:none}}

/* ============================================================
   Trusted-by logo wall + animated dashboard (enterprise)
   ============================================================ */
.logos{text-align:center;padding:46px 0 6px}
.logos-label{font-family:var(--disp);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin-bottom:26px}
.logos-row{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(26px,5vw,64px);align-items:center}
.logo-word{font-family:var(--disp);font-weight:700;font-size:clamp(1.05rem,2.4vw,1.7rem);letter-spacing:.03em;
  color:rgba(180,196,230,.45);filter:grayscale(1);transition:color .35s,filter .35s,opacity .35s}
.logo-word:hover{color:var(--ink);filter:none}

.dash-panel{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(16,22,44,.9),rgba(8,11,24,.92));
  border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:var(--shadow)}
.dash-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
@media(max-width:720px){.dash-kpis{grid-template-columns:1fr 1fr}}
.kpi{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.kpi-l{font-size:.8rem;color:var(--mut)}
.kpi-v{font-family:var(--disp);font-weight:700;font-size:clamp(1.6rem,3vw,2.2rem);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.kpi-d{font-size:.76rem;color:var(--mut)}
.kpi-d.up{color:#34d399}
.dash-chart{position:relative;height:clamp(190px,26vw,250px);border-radius:14px;background:rgba(255,255,255,.02);border:1px solid var(--line);overflow:hidden}
.dash-line{position:absolute;inset:0;width:100%;height:72%}
.dash-stroke{filter:drop-shadow(0 0 6px rgba(34,211,238,.6))}
.dash-bars{position:absolute;left:0;right:0;bottom:0;height:36%;display:flex;align-items:flex-end;gap:2.2%;padding:0 4%}
.dash-bars i{flex:1;height:var(--h);border-radius:5px 5px 0 0;transform:scaleY(0);transform-origin:bottom;
  background:linear-gradient(180deg,var(--c1),rgba(43,107,255,.15))}
@media (prefers-reduced-motion:reduce){.dash-bars i{transform:none}}

/* ============================================================
   Built-in product UI mockups (no external images, no emoji)
   ============================================================ */
.ui-frame{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:16px;
  aspect-ratio:16/9;padding:14px;background:linear-gradient(160deg,#0b1024,#070912)}
.ui-frame.center{display:grid;place-items:center;padding:10px}
.b-card h3{margin:2px 0 8px}

/* kanban */
.ui-kanban{display:flex;gap:9px;height:100%}
.kb-col{flex:1;display:flex;flex-direction:column;gap:7px;min-width:0}
.kb-h{font-size:.6rem;color:var(--mut);font-family:var(--disp);letter-spacing:.04em;text-transform:uppercase}
.kb-card{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:6px}
.kb-tag{width:32px;height:6px;border-radius:4px;display:block}
.kb-tag.c1{background:linear-gradient(90deg,#2b6bff,#22d3ee)}
.kb-tag.c2{background:linear-gradient(90deg,#b74bf5,#22d3ee)}
.kb-ln{height:5px;border-radius:3px;background:rgba(255,255,255,.14)}
.kb-ln.s{width:58%}
.kb-ln.g{background:linear-gradient(90deg,#2b6bff,#b74bf5);width:82%}
.kb-avs{display:flex}
.kb-avs i{width:15px;height:15px;border-radius:50%;background:linear-gradient(135deg,#22d3ee,#b74bf5);border:2px solid #0a0e20;margin-left:-5px}
.kb-avs i:first-child{margin-left:0}

/* donut 10->1 */
.ui-donut{position:relative;width:min(130px,42vw);aspect-ratio:1}
.ui-donut svg{width:100%;height:100%;transform:rotate(-90deg)}
.don-bg{fill:none;stroke:rgba(255,255,255,.09);stroke-width:11}
.don-fg{fill:none;stroke:#22d3ee;stroke-width:11;stroke-linecap:round;stroke-dasharray:301.6;stroke-dashoffset:301.6;
  filter:drop-shadow(0 0 6px rgba(34,211,238,.7));animation:donFill 1.7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes donFill{to{stroke-dashoffset:36}}
.don-c{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:1.5rem;color:var(--ink)}
.don-c b{color:var(--c2);font-weight:400;margin:0 3px}

/* bell (svg, not emoji) */
.vortex .bell-ic{position:relative;z-index:2;width:34px;height:34px;filter:drop-shadow(0 0 8px rgba(0,0,0,.85))}
.vortex .ping{position:absolute;z-index:1;width:30px;height:30px;border-radius:50%;border:2px solid rgba(180,210,255,.55);animation:bellPing 2.1s ease-out infinite}
@keyframes bellPing{0%{transform:scale(.55);opacity:.8}100%{transform:scale(2.1);opacity:0}}

/* virtual office grid */
.ui-office{display:grid;grid-template-columns:1fr 1fr;gap:8px;height:100%}
.vo{position:relative;border-radius:9px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(135deg,#12183a,#0a0e20);display:grid;place-items:center}
.vo::after{content:"";width:36%;aspect-ratio:1;border-radius:50%}
.vo.a1::after{background:linear-gradient(135deg,#2b6bff,#22d3ee)}
.vo.a2::after{background:linear-gradient(135deg,#b74bf5,#2b6bff)}
.vo.a3::after{background:linear-gradient(135deg,#22d3ee,#34d399)}
.vo.a4::after{background:linear-gradient(135deg,#f59e0b,#b74bf5)}
.vo .live{position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 8px #34d399;animation:voLive 2s ease-in-out infinite}
@keyframes voLive{0%,100%{opacity:1}50%{opacity:.3}}

/* mini chart (dashboards card) */
.ui-mini-chart{position:relative;height:100%}
.mc-svg{position:absolute;left:0;top:4%;width:100%;height:64%}
.mc-line{fill:none;stroke:#22d3ee;stroke-width:3;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 5px rgba(34,211,238,.6))}
.mc-bars{position:absolute;left:0;right:0;bottom:0;height:46%;display:flex;align-items:flex-end;gap:6%;padding:0 2%}
.mc-bars i{flex:1;height:var(--h);border-radius:4px 4px 0 0;background:linear-gradient(180deg,#2b6bff,rgba(43,107,255,.15))}

/* feature-fig app window */
.feature-fig .glyph{display:none}
.ff-window{width:88%;background:linear-gradient(160deg,#0b1024,#070912);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 30px 70px -30px rgba(0,0,0,.85)}
.ff-bar{display:flex;gap:6px;padding:12px 14px;border-bottom:1px solid var(--line)}
.ff-bar i{width:10px;height:10px;border-radius:50%}
.ff-bar i:nth-child(1){background:#ff5f57}.ff-bar i:nth-child(2){background:#febc2e}.ff-bar i:nth-child(3){background:#28c840}
.ff-body{display:grid;grid-template-columns:66px 1fr;min-height:190px}
.ff-side{border-right:1px solid var(--line);padding:14px 10px;display:flex;flex-direction:column;gap:10px}
.ff-side span{height:9px;border-radius:5px;background:rgba(255,255,255,.1)}
.ff-side span:first-child{background:linear-gradient(90deg,#2b6bff,#22d3ee)}
.ff-main{position:relative;padding:16px}
.ff-chart{width:100%;height:66%}
.ff-line{fill:none;stroke:#22d3ee;stroke-width:2.5;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 5px rgba(34,211,238,.5))}
.ff-cards{display:flex;gap:8px;margin-top:12px}
.ff-cards span{flex:1;height:26px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid var(--line)}

/* KPI sparklines (charts not numbers) */
.kpi-spark{width:100%;height:34px;margin:8px 0 6px}
.kpi-spark polyline{fill:none;stroke:#22d3ee;stroke-width:2.5;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 4px rgba(34,211,238,.55))}
.kpi-mini-bars{display:flex;align-items:flex-end;gap:5px;height:34px;margin:8px 0 6px}
.kpi-mini-bars i{flex:1;height:var(--h);border-radius:3px 3px 0 0;background:linear-gradient(180deg,#2b6bff,rgba(43,107,255,.2))}

/* brighter, thicker electric border (more visible) */
.elec::after{padding:2px;
  background:conic-gradient(from var(--elecA),transparent 0 55%,#38bdf8 66%,#a855f7 78%,#22d3ee 88%,#38bdf8 96%,transparent 100%);
  filter:drop-shadow(0 0 8px rgba(56,189,248,.85)) drop-shadow(0 0 14px rgba(168,85,247,.5));
  animation-duration:3.2s}

/* ============================================================
   Ambient page glow so scrolling never shows pure-black voids
   ============================================================ */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 44% at 12% 18%, rgba(43,107,255,.13), transparent 62%),
    radial-gradient(52% 42% at 88% 64%, rgba(183,75,245,.11), transparent 62%),
    radial-gradient(60% 40% at 50% 108%, rgba(34,211,238,.09), transparent 60%);}
/* lift card visibility so they don't read as black boxes */
.b-card{background:rgba(255,255,255,.05)}
.h-figure{background:linear-gradient(160deg,#0e1430,#0a0e22)}
.app{background:linear-gradient(180deg,#0e1330,#0a0e20)}

/* ============================================================
   Hero aurora backdrop behind the alien Core (also the fallback
   if WebGL is unavailable). Cheap animated radial gradients.
   ============================================================ */
/* the live caustic background (fixed, page-wide) carries the hero now;
   the CSS aurora only shows as a gentle fallback if WebGL is unavailable */
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(42% 40% at 30% 32%, rgba(43,107,255,.14), transparent 60%),
    radial-gradient(40% 38% at 72% 42%, rgba(183,75,245,.12), transparent 60%),
    radial-gradient(46% 40% at 50% 78%, rgba(34,211,238,.08), transparent 62%);
  filter:blur(12px); animation: heroAur 18s ease-in-out infinite; }
@keyframes heroAur{
  0%,100%{ transform:translate3d(0,0,0) scale(1); opacity:.7 }
  50%    { transform:translate3d(0,-2%,0) scale(1.08); opacity:.85 }
}
.hero-scrim, .hero-inner{ z-index:2 }
@media (prefers-reduced-motion:reduce){ .hero::after{ animation:none } }

/* ============================================================
   HERO REBUILD — Huly-caliber: pixel-perfect product UI lead,
   magenta accent, refined split layout. The 3D Core is now a
   quiet ambient glow behind, not a dominating blob.
   ============================================================ */
.hero-split{ display:grid; grid-template-columns:1.02fr 1.15fr; align-items:center; gap:clamp(24px,4vw,64px);
  padding-top:14vh; padding-bottom:8vh; }
.hero-copy{ position:relative; z-index:3; }
.hero-eyebrow{ color:var(--accent) !important; }
.hero-sub{ margin-top:26px; max-width:30em; color:var(--mut); font-size:1.12rem; opacity:0; }
.hero-sub b{ color:var(--ink); font-weight:600; }
.hero-actions{ display:flex; align-items:center; gap:16px; margin-top:30px; opacity:0; }
.hero-ghost{ font-family:var(--disp); font-weight:600; font-size:.95rem; color:var(--ink);
  padding:13px 22px; border-radius:999px; border:1px solid var(--line); transition:border-color .25s,background .25s; }
.hero-ghost:hover{ border-color:rgba(160,190,255,.5); background:rgba(255,255,255,.04); }
.hero-meta{ margin-top:26px; font-size:.9rem; color:var(--mut); display:flex; align-items:center; gap:8px; opacity:0; }
.hero-meta svg{ width:16px; height:16px; color:#ffd23d; }
.hero-meta b{ color:var(--ink); font-weight:700; }
/* keep the intro reveal working: fade these in with the h1 lines */
.is-in .hero-sub, .is-in .hero-actions, .is-in .hero-meta{ opacity:1; transition:opacity .8s ease .3s; }
.hero-split .scroll-cue{ position:absolute; left:0; bottom:5vh; z-index:3; }

/* --- the floating pixel-perfect UI --- */
.hero-ui{ position:relative; z-index:3; perspective:1600px; }
.hui-win{ position:relative; border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg,#0c1122,#0a0e1c);
  border:1px solid rgba(150,180,255,.16);
  box-shadow:0 50px 120px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.02) inset,
             0 0 90px -30px rgba(43,107,255,.5);
  transform:rotateY(-11deg) rotateX(5deg) rotateZ(.4deg); transform-style:preserve-3d;
  animation:huiFloat 7s ease-in-out infinite; }
@keyframes huiFloat{ 0%,100%{ transform:rotateY(-11deg) rotateX(5deg) translateY(0) }
  50%{ transform:rotateY(-8deg) rotateX(4deg) translateY(-12px) } }
.hui-bar{ display:flex; align-items:center; gap:7px; padding:12px 14px;
  background:rgba(255,255,255,.03); border-bottom:1px solid rgba(150,180,255,.1); }
.hui-bar i{ width:11px; height:11px; border-radius:50%; }
.hui-bar i:nth-child(1){ background:#ff5f57 } .hui-bar i:nth-child(2){ background:#febc2e } .hui-bar i:nth-child(3){ background:#28c840 }
.hui-crumb{ margin-left:10px; font-size:.78rem; color:var(--mut); }
.hui-k{ margin-left:auto; font-size:.72rem; color:var(--mut); padding:4px 9px; border-radius:7px;
  border:1px solid var(--line); background:rgba(255,255,255,.03); }
.hui-body{ display:grid; grid-template-columns:118px 1fr; min-height:300px; }
.hui-side{ padding:16px 12px; border-right:1px solid rgba(150,180,255,.08); display:flex; flex-direction:column; gap:11px; background:rgba(0,0,0,.14); }
.hui-brand{ display:flex; align-items:center; gap:8px; font-family:var(--disp); font-weight:700; font-size:.92rem; margin-bottom:6px; }
.hui-brand b{ width:16px; height:16px; border-radius:50%; background:var(--grad); box-shadow:0 0 12px rgba(43,107,255,.7); }
.hui-nav{ height:9px; border-radius:5px; background:rgba(160,185,255,.13); }
.hui-nav:nth-child(2){ width:78% } .hui-nav:nth-child(3){ width:62% } .hui-nav:nth-child(4){ width:70% } .hui-nav:nth-child(5){ width:54% } .hui-nav:nth-child(6){ width:66% }
.hui-nav.on{ width:88%; background:linear-gradient(90deg,rgba(43,107,255,.5),rgba(34,211,238,.3)); }
.hui-board{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:16px 14px; }
.hui-col h6{ font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--mut); font-weight:700; margin-bottom:10px; display:flex; gap:6px; }
.hui-col h6 span{ color:rgba(160,185,255,.6); }
.hui-card{ background:rgba(255,255,255,.045); border:1px solid rgba(150,180,255,.1); border-radius:10px;
  padding:10px; margin-bottom:10px; display:flex; flex-direction:column; gap:7px;
  box-shadow:0 8px 20px -12px rgba(0,0,0,.7); }
.ct{ align-self:flex-start; font-size:.64rem; font-weight:700; padding:3px 8px; border-radius:6px; color:#fff; letter-spacing:.02em; }
.ct.pink{ background:rgba(245,57,126,.9) } .ct.blue{ background:rgba(43,107,255,.9) } .ct.green{ background:rgba(40,200,120,.9) }
.cl{ height:7px; border-radius:4px; background:rgba(200,215,255,.22); }
.cl.s{ width:60% } .cl:not(.s){ width:88% }
.cav{ display:flex; margin-top:2px; }
.cav i{ width:18px; height:18px; border-radius:50%; border:2px solid #0b0f1e; background:linear-gradient(135deg,#4b7bff,#a24bf5); }
.cav i+i{ margin-left:-7px; background:linear-gradient(135deg,#22d3ee,#2b6bff); }
/* floating cards for depth */
.hui-float{ position:absolute; border-radius:14px; padding:12px 14px;
  background:rgba(14,18,34,.92); border:1px solid rgba(150,180,255,.18);
  box-shadow:0 30px 70px -24px rgba(0,0,0,.9); backdrop-filter:blur(8px); z-index:4; }
.hui-cal{ right:-6%; top:-7%; animation:huiFloat 6s ease-in-out infinite .4s; }
.fl-h{ display:block; font-size:.7rem; font-weight:700; color:var(--ink); margin-bottom:8px; }
.fl-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
.fl-grid i{ width:14px; height:14px; border-radius:4px; background:rgba(160,185,255,.14); }
.fl-grid i.on{ background:var(--accent) } .fl-grid i.on2{ background:var(--c1) }
.hui-chat{ left:-9%; bottom:-6%; display:flex; align-items:center; gap:10px; animation:huiFloat 6.6s ease-in-out infinite .9s; }
.fl-av{ width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#f5397e,#b74bf5); flex:0 0 auto; }
.fl-lines{ display:flex; flex-direction:column; gap:5px; }
.fl-lines span{ height:7px; width:74px; border-radius:4px; background:rgba(200,215,255,.28); }
.fl-lines span.sm{ width:44px; }

@media (prefers-reduced-motion:reduce){ .hui-win,.hui-float{ animation:none } }
@media (max-width:960px){
  .hero-split{ grid-template-columns:1fr; padding-top:15vh; gap:38px; }
  .hero-ui{ max-width:520px; margin:0 auto; }
  .hui-win{ transform:rotateY(-6deg) rotateX(3deg); }
  .hero-split .scroll-cue{ display:none; }
}
@media (max-width:640px){
  .hero h1{ font-size:clamp(2rem,9vw,2.7rem); }
  .hero-sub{ font-size:1.02rem; }
}
@media (max-width:520px){
  .hui-cal{ right:-2%; top:-5% } .hui-chat{ left:-2%; bottom:-4% }
  .hui-body{ grid-template-columns:96px 1fr; min-height:260px; }
}

/* ============================================================
   WHAT WE OFFER — Pixel-Point-style pixel-art feature tiles
   ============================================================ */
.offer-title{ font-family:var(--disp); font-weight:700; letter-spacing:-.02em; line-height:1.08;
  font-size:clamp(1.8rem,4.2vw,3rem); max-width:16ch; margin-bottom:56px; }
em.mag{ background:none; -webkit-text-fill-color:initial; color:var(--accent); }
.offer-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,32px); }
/* each tile is a glass card with its OWN coloured spotlight + an orbital-ring motif */
.offer-cell{ position:relative; isolation:isolate; overflow:hidden; padding:30px 26px 32px; border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  border:1px solid var(--line); transition:transform .45s cubic-bezier(.2,.7,.2,1), border-color .4s; }
.offer-cell::before{ content:""; position:absolute; z-index:-1; left:50%; top:-24%; width:78%; aspect-ratio:1;
  transform:translateX(-50%); border-radius:50%; background:var(--sp,#2b6bff); filter:blur(52px);
  opacity:.30; transition:opacity .45s, transform .55s cubic-bezier(.2,.7,.2,1); }
.offer-cell::after{ content:""; position:absolute; z-index:-1; right:-46px; top:-46px; width:150px; height:150px;
  border-radius:50%; border:1px solid var(--sp,#2b6bff); opacity:.16;
  box-shadow:0 0 0 18px rgba(255,255,255,.02) inset; transition:opacity .4s, transform .6s; }
.offer-cell:hover{ transform:translateY(-6px); border-color:var(--sp,#2b6bff); }
.offer-cell:hover::before{ opacity:.52; transform:translateX(-50%) scale(1.16); }
.offer-cell:hover::after{ opacity:.4; transform:rotate(40deg) scale(1.08); }
/* a distinct spotlight colour per tile */
.offer-cell:nth-child(1){ --sp:#22d3ee } .offer-cell:nth-child(2){ --sp:#7c8cff }
.offer-cell:nth-child(3){ --sp:#f5397e } .offer-cell:nth-child(4){ --sp:#2b6bff }
.offer-cell:nth-child(5){ --sp:#4be3c0 } .offer-cell:nth-child(6){ --sp:#b74bf5 }
.pxi{ display:inline-block; width:60px; height:60px; margin-bottom:20px;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.5)); transition:transform .4s cubic-bezier(.2,.7,.2,1); }
.pxi svg{ width:100%; height:100%; display:block; }
.pxi .bg{ fill:#0b0b0d; }
.offer-cell:hover .pxi{ transform:translateY(-5px) rotate(-2deg); }
.offer-cell h3{ font-family:var(--disp); font-weight:700; font-size:1.18rem; letter-spacing:-.01em; margin-bottom:9px; }
.offer-cell p{ color:var(--mut); font-size:1rem; line-height:1.6; max-width:32ch; }
@media (max-width:900px){ .offer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .offer-grid{ grid-template-columns:1fr; gap:30px; } .offer-title{ margin-bottom:36px; } }

/* ============================================================
   SOCIAL PROOF — big rounded star-count cards
   ============================================================ */
.proof-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.proof-card{ position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center;
  min-height:230px; border-radius:22px; text-align:center; padding:30px 24px;
  background:#0a0b12; border:1px solid rgba(150,180,255,.12); overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.7,.2,1), border-color .3s; }
.proof-card::after{ content:""; position:absolute; right:-30%; bottom:-40%; width:75%; height:80%;
  background:linear-gradient(135deg,rgba(43,107,255,.55),rgba(183,75,245,.35)); transform:skewX(-18deg);
  filter:blur(6px); opacity:.5; transition:opacity .4s; }
.proof-card:hover{ transform:translateY(-6px); border-color:rgba(56,189,248,.4); }
.proof-card:hover::after{ opacity:.85; }
.pc-star{ position:absolute; top:16px; left:18px; z-index:2; display:inline-flex; align-items:center; gap:6px;
  font-size:.82rem; font-weight:700; color:#ffd23d; }
.pc-star svg{ width:15px; height:15px; }
.pc-logo{ position:relative; z-index:2; font-family:var(--disp); font-weight:700; font-size:clamp(1.5rem,3vw,2rem);
  letter-spacing:-.01em; color:#eef2ff; }
.pc-logo b{ font-weight:800; }
.pc-cap{ position:relative; z-index:2; margin-top:12px; color:var(--mut); font-size:.92rem; }
@media (max-width:860px){ .proof-grid{ grid-template-columns:1fr; } .proof-card{ min-height:170px; } }

/* ============================================================
   PROCESS — the magic, numbered 1–6 (pink numerals)
   ============================================================ */
.proc-title{ font-family:var(--disp); font-weight:700; letter-spacing:-.02em; line-height:1.1;
  font-size:clamp(1.9rem,4.4vw,3.1rem); max-width:18ch; margin-bottom:56px; }
.proc-list{ display:grid; grid-template-columns:1fr 1fr; gap:44px 64px; }
.proc-step{ display:flex; gap:20px; align-items:flex-start; }
.proc-n{ font-family:var(--disp); font-weight:800; font-size:1.6rem; color:var(--accent); line-height:1; flex:0 0 auto; min-width:38px; }
.proc-body h3{ font-family:var(--disp); font-weight:700; font-size:1.5rem; letter-spacing:-.01em; margin-bottom:10px; }
.proc-body p{ color:var(--mut); font-size:1.02rem; line-height:1.62; max-width:40ch; }
@media (max-width:820px){ .proc-list{ grid-template-columns:1fr; gap:30px; } }

/* ============================================================
   TECH STACK — Next.js diagram
   ============================================================ */
.stack-diagram{ display:flex; flex-direction:column; align-items:center; }
.stk-core{ position:relative; width:min(760px,100%); border-radius:20px; padding:52px 24px 60px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  background:radial-gradient(120% 120% at 50% 20%, rgba(43,107,255,.12), transparent 70%), #0a0d18;
  border:1px solid rgba(150,180,255,.12); overflow:hidden; }
.stk-core::before{ content:""; position:absolute; inset:0; z-index:0;
  background-image:radial-gradient(circle, rgba(120,160,255,.55) 1px, transparent 1.4px);
  background-size:26px 26px; opacity:.14; }
.stk-N{ position:relative; z-index:1; font-family:var(--disp); font-weight:700; font-size:clamp(3.2rem,8vw,5.6rem);
  line-height:.9; background:linear-gradient(180deg,#fff,#7f93b5); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stk-core-label{ position:relative; z-index:1; color:var(--mut); font-size:.95rem; letter-spacing:.02em; }
.stk-wires{ width:min(760px,100%); height:64px; margin-top:-6px; display:block; }
.stk-branches{ display:grid; grid-template-columns:1fr 1fr; gap:22px; width:min(760px,100%); }
.stk-branch{ background:#0a0b12; border:1px dashed rgba(150,180,255,.2); border-radius:16px; padding:18px; }
.stk-tag{ display:inline-block; font-family:var(--disp); font-size:.72rem; letter-spacing:.06em; color:var(--mut);
  background:rgba(255,255,255,.04); border:1px solid var(--line); padding:5px 11px; border-radius:8px; margin-bottom:16px; }
.stk-chips{ display:flex; flex-direction:column; gap:10px; }
.stk-chip{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:.98rem;
  background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:10px; padding:11px 14px;
  transition:transform .25s, border-color .25s; }
.stk-chip:hover{ transform:translateX(4px); border-color:rgba(56,189,248,.4); }
.stk-chip i{ width:14px; height:14px; border-radius:4px; flex:0 0 auto; }
.ci-pay{ background:#f5397e } .ci-con{ background:#2b6bff } .ci-san{ background:linear-gradient(135deg,#f03e2f,#ff9b8a) }
.stk-md{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; height:calc(100% - 44px); justify-content:center;
  background:linear-gradient(135deg,rgba(43,107,255,.9),rgba(70,90,200,.85)); border-radius:12px; padding:18px 16px; color:#fff; }
.stk-md b{ font-family:var(--disp); font-weight:800; font-size:1.7rem; letter-spacing:.02em; display:inline-flex; align-items:center; }
.stk-md b span{ font-size:1.2rem; margin:0 1px; opacity:.9; }
.stk-md-cap{ font-size:.9rem; color:rgba(255,255,255,.82); }
@media (max-width:560px){ .stk-branches{ grid-template-columns:1fr; } .stk-wires{ display:none; } }

/* ============================================================
   HERO — centered over the orbital field (distinct from Meridian)
   ============================================================ */
.hero{ text-align:left; }
.hero-centered{ position:relative; z-index:2; width:min(1000px,92vw); margin-inline:auto;
  display:flex; flex-direction:column; align-items:center; text-align:center; padding-top:8vh; }
.hero-centered .hero-eyebrow{ margin-bottom:24px; }
.hero-centered h1{ font-size:clamp(2.3rem,6.6vw,5.4rem); line-height:1.0; }
.hero-centered h1 em{ font-style:normal; }
.hero-centered .hero-sub{ margin:26px auto 0; max-width:54ch; color:var(--mut); font-size:clamp(1rem,1.2vw,1.16rem); opacity:0; }
.hero-centered .hero-sub b{ color:var(--ink); font-weight:600; }
.hero-centered .hero-actions{ display:flex; gap:16px; justify-content:center; margin-top:32px; flex-wrap:wrap; opacity:0; }
.hero-centered .hero-meta{ display:inline-flex; align-items:center; gap:8px; justify-content:center; margin-top:26px;
  font-size:.9rem; color:var(--mut); opacity:0; }
.hero-centered .hero-meta svg{ width:16px; height:16px; color:#ffd23d; }
.hero-centered .hero-meta b{ color:var(--ink); font-weight:700; }
.hero-centered .hero-ghost{ font-family:var(--disp); font-weight:600; font-size:.95rem; color:var(--ink);
  padding:15px 26px; border-radius:12px; border:1px solid var(--line2, rgba(255,255,255,.16)); background:rgba(255,255,255,.03);
  transition:border-color .25s, background .25s; }
.hero-centered .hero-ghost:hover{ border-color:rgba(160,190,255,.5); background:rgba(255,255,255,.06); }
.hero-centered .scroll-cue{ position:static; margin-top:46px; }
.is-in .hero-centered .hero-sub, .is-in .hero-centered .hero-actions, .is-in .hero-centered .hero-meta{ opacity:1; transition:opacity .8s ease .3s; }
@media (max-width:640px){
  .hero-centered{ padding-top:12vh; }
  .hero-centered h1{ font-size:clamp(2rem,8.6vw,2.8rem); }
}