:root{
  --bg:#0a1220; --bg-2:#0d1726; --card:#13213a; --card-2:#172a47;
  --ink:#e8edf5; --ink-2:#b3c0cd; --ink-3:#8090a8;
  --line:#24385a; --line-soft:rgba(255,255,255,.08);
  --accent:#22c1a6; --accent-2:#3fd9be; --accent-soft:rgba(34,193,166,.12); --accent-ink:#04211c;
  --light:#eef3f2; --light-ink:#0d1726; --light-ink-2:#3b4b61; --light-line:#cfdcd9; --light-accent:#0a8f82;
  --display:"Inter Tight",system-ui,sans-serif;
  --sans:"Inter",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg-2);color:var(--ink);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
h1,h2,h3,h4{font-family:var(--display);color:#fff;letter-spacing:-.025em}
.eyebrow{font:500 12.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;border-radius:10px;font:600 15px var(--sans);text-decoration:none;transition:transform .15s,background .15s,border-color .15s,box-shadow .15s;white-space:nowrap}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 8px 28px -8px rgba(34,193,166,.6)}
.btn-primary:hover{background:var(--accent-2);transform:translateY(-1px)}
.btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.25)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-2)}
.btn-sm{padding:9px 18px;font-size:14px}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(10,18,32,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft)}
.nav .wrap{display:flex;align-items:center;gap:32px;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font:700 19px var(--display);letter-spacing:-.01em}
.brand img{width:40px;height:40px}
.nav ul{display:flex;gap:28px;list-style:none;margin:0 0 0 auto;padding:0}
.nav ul a{color:var(--ink-2);text-decoration:none;font-size:15px;font-weight:500}
.nav ul a:hover{color:#fff}

/* hero */
.hero{position:relative;overflow:hidden;text-align:center;padding:110px 0 64px;
  background:radial-gradient(900px 480px at 50% -5%,rgba(34,193,166,.20) 0%,transparent 65%),linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(ellipse at 50% 0%,#000 0%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 0%,transparent 70%)}
.hero .wrap{position:relative}
.hero h1{font-weight:800;font-size:clamp(40px,6.6vw,84px);line-height:1.02;letter-spacing:-.04em;margin:22px auto 24px;max-width:20ch;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lead{font-size:clamp(17px,1.6vw,20px);color:var(--ink-2);max-width:60ch;margin:0 auto 36px}
.ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.facts{list-style:none;padding:28px 0 0;margin:80px 0 0;border-top:1px solid var(--line-soft);display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:left}
.facts li{position:relative;padding-left:18px;font-size:14.5px;color:var(--ink-2)}
.facts li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--accent)}

/* viewer */
.viewer-section{padding:24px 0 120px}
.viewer{background:linear-gradient(180deg,var(--card) 0%,#101d33 100%);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 40px 120px -40px rgba(0,0,0,.8)}
.viewer-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;padding:36px 36px 24px}
.viewer-head h2{font-size:clamp(28px,3vw,38px);margin:10px 0 0}
.viewer-head p{color:var(--ink-2);max-width:42ch;margin:0;font-size:15px}
.tabs{display:flex;gap:4px;padding:0 28px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;color:var(--ink-3);font:500 15px var(--sans);padding:14px 16px;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s}
.tab:hover{color:#fff}
.tab.is-active{color:#fff;border-bottom-color:var(--accent)}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:6px}
.panel{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:40px;align-items:center;padding:36px}
.panel[hidden]{display:none}
.panel.is-active .shot{animation:screen-in .5s cubic-bezier(.2,.7,.2,1)}
@keyframes screen-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.shot{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:0 24px 60px -24px rgba(0,0,0,.75);cursor:zoom-in;position:relative}
.panel-copy h3{font-size:clamp(22px,2.2vw,28px);line-height:1.2;margin:0 0 14px}
.panel-copy p{color:var(--ink-2);margin:0}

/* sections */
section{padding:120px 0}
.sec-head{max-width:700px;margin-bottom:56px}
.sec-head h2{font-weight:800;font-size:clamp(32px,4vw,48px);line-height:1.08;margin:14px 0 16px}
.sec-head p{font-size:18px;color:var(--ink-2);margin:0}

/* light method */
.light{background:var(--light);color:var(--light-ink)}
.light h2,.light h4{color:var(--light-ink)}
.light .eyebrow{color:var(--light-accent)}
.light .sec-head p{color:var(--light-ink-2)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.steps li{border-top:2px solid var(--light-accent);padding-top:22px}
.steps span{font:500 13px var(--mono);color:var(--light-accent)}
.steps h4{font-size:20px;margin:10px 0 8px}
.steps p{margin:0;color:var(--light-ink-2);font-size:15px}

/* modules */
.modules{background:var(--bg);border-bottom:1px solid var(--line-soft)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.mod{background:var(--bg-2);padding:34px 30px;transition:background .2s}
.mod:hover{background:var(--card)}
.ic{width:42px;height:42px;border-radius:10px;background:var(--accent-soft);display:grid;place-items:center;margin-bottom:20px}
.ic svg{width:21px;height:21px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mod h4{font-size:19px;margin:0 0 8px}
.mod p{margin:0;color:var(--ink-2);font-size:15px}

/* editions */
.editions{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:40px}
.tag{display:inline-block;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:6px;background:var(--accent-soft);color:var(--accent);margin-bottom:18px}
.card h3{font-size:26px;margin:0 0 12px}
.card p{color:var(--ink-2);margin:0 0 20px}
.card ul{margin:0;padding-left:18px;display:grid;gap:6px}

/* cta */
.cta-section{padding-top:0}
.cta{text-align:center;border-radius:22px;padding:80px 32px;background:var(--line)}
.cta h2{font-weight:800;font-size:clamp(32px,4.5vw,56px);line-height:1.05;margin:0 0 16px}
.cta p{color:var(--ink-2);font-size:18px;max-width:52ch;margin:0 auto 32px}
.cta small{display:block;margin-top:16px;color:var(--ink-3);font-size:14px}

/* footer */
footer{background:var(--bg);padding:56px 0 48px;color:var(--ink-3);font-size:14px;border-top:1px solid var(--line-soft)}
footer .top{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid var(--line);margin-bottom:24px}
footer .brand img{width:32px;height:32px}
footer nav{display:flex;gap:24px;flex-wrap:wrap}
footer nav a{text-decoration:none;color:var(--ink-2)}
footer nav a:hover{color:var(--accent)}
.legal{max-width:80ch;line-height:1.55;margin:0}


/* ---------- motion ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:50;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--accent),#7ef0dc)}

/* aurora and drifting grid */
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.45;pointer-events:none}
.orb-a{width:520px;height:520px;left:8%;top:-120px;background:#1aa892;animation:drift-a 18s ease-in-out infinite alternate}
.orb-b{width:460px;height:460px;right:6%;top:120px;background:#1d4f86;animation:drift-b 22s ease-in-out infinite alternate}
@keyframes drift-a{to{transform:translate(120px,80px) scale(1.15)}}
@keyframes drift-b{to{transform:translate(-140px,-40px) scale(.9)}}
.hero::before{animation:grid-move 30s linear infinite}
@keyframes grid-move{to{background-position:56px 56px,56px 56px}}

/* heading words */
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(.45em) rotate(2deg);filter:blur(8px);animation:word-in .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i) * 80ms + 150ms)}
@keyframes word-in{to{opacity:1;transform:none;filter:none}}
.hero h1 em.w{background:linear-gradient(90deg,#22c1a6 0%,#8ff5e2 25%,#22c1a6 50%,#8ff5e2 75%,#22c1a6 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:word-in .9s cubic-bezier(.2,.7,.2,1) forwards,shimmer 7s linear infinite;animation-delay:calc(var(--i) * 80ms + 150ms),1.2s}
@keyframes shimmer{to{background-position:-200% 0}}
.hero-in{opacity:0;transform:translateY(18px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--d) * 90ms + 200ms)}
@keyframes rise{to{opacity:1;transform:none}}

/* hero stage: tilted screen that straightens on scroll and follows the cursor */
.stage{margin:72px auto 0;max-width:1080px;perspective:1600px}
.stage-tilt{position:relative;transform:rotateX(var(--rx,18deg)) rotateY(var(--ry,0deg)) scale(var(--sc,.94));transform-style:preserve-3d;transition:transform .2s ease-out;will-change:transform}
.stage-frame{border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#0a1520;box-shadow:0 60px 140px -40px rgba(0,0,0,.85),0 0 0 1px rgba(34,193,166,.12),0 0 80px -20px rgba(34,193,166,.35)}
.stage-frame .bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#101c30;border-bottom:1px solid var(--line);text-align:left}
.stage-frame .bar i{width:11px;height:11px;border-radius:50%;background:#2a3e5c}
.stage-frame .bar span{margin-left:12px;font:500 12px var(--mono);color:#7d93a8}
.chip{position:absolute;display:flex;flex-direction:column;gap:2px;text-align:left;padding:12px 16px;border-radius:12px;background:rgba(19,33,58,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(34,193,166,.35);box-shadow:0 20px 50px -20px rgba(0,0,0,.8);transform:translateZ(60px);animation:float 6s ease-in-out infinite}
.chip b{font:600 13px var(--sans);color:#fff}
.chip span{font:500 12.5px var(--mono);color:var(--accent-2)}
.chip-a{left:-28px;top:30%}
.chip-b{right:-28px;top:62%;animation-delay:-3s}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -12px}}

/* stagger children */
.js .stagger>*{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--k,0) * 90ms)}
.js .stagger.in>*{opacity:1;transform:none}
.js .facts.stagger.in>*{transition-delay:calc(var(--k,0) * 90ms + 900ms)}

/* step lines draw in */
.steps li{border-top:0;position:relative}
.steps li::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--light-accent);transform:scaleX(0);transform-origin:0 50%;transition:transform 1s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--k,0) * 150ms + 200ms)}
.steps.in li::before{transform:scaleX(1)}

/* cursor spotlight on cards */
.spot{position:relative;isolation:isolate}
.spot::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(34,193,166,.16),transparent 60%)}
.spot:hover::before{opacity:1}
.spot:hover .ic{transform:translateY(-3px) rotate(-6deg)}
.ic{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.card{transition:transform .3s,border-color .3s}
.card:hover{transform:translateY(-4px);border-color:rgba(34,193,166,.45)}

/* button shine */
.shine{position:relative;overflow:hidden}
.shine::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .6s ease}
.shine:hover::after{left:130%}

/* tabs: auto-advance progress */
.tab{position:relative}
.tab .tp{position:absolute;left:0;bottom:-2px;height:2px;width:100%;background:var(--accent-2);transform:scaleX(0);transform-origin:0 50%}
.tab.is-active .tp{animation:tab-progress var(--tab-ms,6000ms) linear forwards}
.viewer.paused .tab.is-active .tp,.viewer.stopped .tab.is-active .tp{animation-play-state:paused}
.viewer.stopped .tab .tp{display:none}
@keyframes tab-progress{to{transform:scaleX(1)}}
.panel.is-active .panel-copy{animation:copy-in .6s .1s cubic-bezier(.2,.7,.2,1) both}
@keyframes copy-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.shot img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.shot:hover img{transform:scale(1.03)}

/* cta: rotating light ring */
.cta{position:relative;overflow:hidden;isolation:isolate}
.cta-ring{position:absolute;left:50%;top:50%;width:200%;aspect-ratio:1;z-index:-2;translate:-50% -50%;background:conic-gradient(from 0deg,transparent 0 50%,rgba(63,217,190,1) 72%,transparent 88%,transparent 0);animation:spin 7s linear infinite}
.cta::before{content:"";position:absolute;inset:2px;border-radius:20px;z-index:-1;background:radial-gradient(700px 320px at 50% 0%,rgba(34,193,166,.22) 0%,transparent 70%),var(--card)}
@keyframes spin{to{rotate:360deg}}

/* reveal */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal,.js .stagger>*,.hero-in,.hero h1 .w{opacity:1!important;transform:none!important;filter:none!important}
  .steps li::before{transform:none}
  .stage-tilt{transform:none!important}
  .tab .tp{display:none}
}

@media (max-width:960px){
  .nav ul{display:none}
  .nav .btn{margin-left:auto}
  .facts{grid-template-columns:1fr 1fr}
  .viewer-head{flex-direction:column;align-items:flex-start;gap:12px}
  .panel{grid-template-columns:1fr;gap:24px}
  .steps{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:1fr 1fr}
  .editions{grid-template-columns:1fr}
  section{padding:88px 0}
}
@media (max-width:600px){
  .wrap{padding:0 16px}
  .hero{padding:72px 0 48px}
  .facts,.steps,.grid{grid-template-columns:1fr}
  .viewer-head,.panel{padding:24px 18px}
  .tabs{padding:0 10px}
    .card{padding:28px}
  .cta{padding:56px 20px}
  .chip{display:none}
  .stage{margin-top:48px}
}

/* request form */
.demo{width:min(680px,calc(100% - 32px));max-height:calc(100% - 32px);padding:0;border:1px solid var(--line);border-radius:18px;background:var(--card);color:var(--ink);box-shadow:0 40px 120px -20px rgba(0,0,0,.85);overflow:auto}
.demo::backdrop{background:rgba(4,10,20,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.demo[open]{animation:demo-in .35s cubic-bezier(.2,.7,.2,1)}
@keyframes demo-in{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.demo-form{padding:32px;display:grid;gap:20px}
.demo-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.demo-head h2{font-size:28px;margin:0 0 6px}
.demo-head p{margin:0;color:var(--ink-2);font-size:15px}
.demo-close{flex:none;width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--ink-2);cursor:pointer;display:grid;place-items:center}
.demo-close svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.demo-close:hover{color:#fff;border-color:var(--accent)}
.demo-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.field{display:grid;gap:6px;min-width:0}
.field-wide{grid-column:1/-1}
.field label{font:500 13px var(--sans);color:var(--ink-2)}
.field label span{color:var(--ink-3);font-weight:400}
.field input,.field select,.field textarea{width:100%;font:15px var(--sans);color:#fff;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:11px 12px;transition:border-color .15s,box-shadow .15s}
.field textarea{resize:vertical;min-height:84px}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field input:user-invalid,.field select:user-invalid{border-color:#ff6b61}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-2)}
.consent input{margin-top:3px;accent-color:var(--accent);width:16px;height:16px;flex:none}
.consent a,.demo-note a,.cta small a{color:var(--accent-2)}
.demo-submit{width:100%;border:0;cursor:pointer;font-size:16px;padding:14px}
.demo-submit[disabled]{opacity:.6;cursor:wait}
.demo-note{margin:-6px 0 0;text-align:center;font-size:13px;color:var(--ink-3)}
.demo-msg:empty{display:none}
.demo-msg{padding:12px 14px;border-radius:10px;font-size:14px}
.demo-msg.ok{background:rgba(79,207,134,.12);border:1px solid rgba(79,207,134,.4);color:#c8f2d9}
.demo-msg.err{background:rgba(255,107,97,.1);border:1px solid rgba(255,107,97,.4);color:#ffd0cc}
@media (max-width:600px){.demo-form{padding:22px}.demo-fields{grid-template-columns:1fr}}

/* enlarged screen */
.lightbox{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:max(24px,env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px));background:rgba(4,10,20,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:zoom-out;opacity:0;transition:opacity .25s ease}
.lightbox[hidden]{display:none}
.lightbox.open{opacity:1}
.lightbox img{max-width:min(1600px,100%);max-height:100%;width:auto;height:auto;border-radius:12px;border:1px solid var(--line);box-shadow:0 40px 120px -20px rgba(0,0,0,.9);transform:scale(.94);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.lightbox.open img{transform:none}
body.no-scroll{overflow:hidden}