*{box-sizing:border-box}
:root{
  --bg:#07121d;
  --bg2:#0b1e2d;
  --panel:#102a38;
  --panel2:#183846;
  --text:#f4f8ff;
  --muted:#a9bfd0;
  --blue:#2d67ff;
  --cyan:#17b9e7;
  --green:#36df78;
  --line:rgba(185,218,236,.15);
  --radius:28px;
}
html{scroll-behavior:smooth}
body{
  margin:0;background:
  radial-gradient(circle at 50% 15%,rgba(20,105,150,.18),transparent 35%),
  linear-gradient(180deg,#07121d 0%,#08141f 45%,#06111b 100%);
  color:var(--text);font-family:Inter,system-ui,sans-serif;overflow-x:hidden;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.25;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:80px 80px;mask-image:linear-gradient(to bottom,#000,transparent 90%);
}
a{color:inherit;text-decoration:none}
.scroll-progress{position:fixed;z-index:100;top:0;left:0;width:100%;height:3px;background:transparent}
.scroll-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan),var(--green));box-shadow:0 0 15px rgba(23,185,231,.7)}
.site-header{
  position:fixed;z-index:90;top:0;left:0;right:0;height:74px;padding:0 5vw;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(5,15,24,.58);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand-mark{display:grid;place-items:center;width:39px;height:30px;border-radius:9px;background:linear-gradient(135deg,#ee3340,#2467c8);font-size:12px;font-weight:800;box-shadow:0 0 22px rgba(45,103,255,.25)}
nav{display:flex;gap:32px;color:#b9cada;font-size:14px}
nav a{transition:.25s}nav a:hover{color:#fff}
.header-cta{padding:10px 16px;border:1px solid rgba(255,255,255,.18);border-radius:999px;font-size:13px;font-weight:700;background:rgba(255,255,255,.04)}
.section{min-height:100vh;position:relative}
.hero{display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:2vw;padding:120px 5vw 80px;max-width:1500px;margin:auto}
.hero-copy{position:relative;z-index:3;max-width:650px}
.eyebrow{font-size:11px;letter-spacing:.18em;font-weight:800;color:#7edcf2;margin-bottom:20px}
.pulse-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green);margin-right:8px}
h1{font-size:clamp(48px,6vw,88px);line-height:.98;letter-spacing:-.055em;margin:0 0 26px}
h1 span,h2 span{background:linear-gradient(90deg,#4386ff,#15c4e8,#42df7b);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-lead{max-width:590px;color:var(--muted);font-size:18px;line-height:1.7}
.hero-actions{display:flex;gap:12px;margin:30px 0 35px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:14px;padding:14px 21px;border-radius:999px;font-weight:700;font-size:14px;border:1px solid rgba(255,255,255,.16);transition:transform .25s,box-shadow .25s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(100deg,#2655e8,#0e9fba);box-shadow:0 15px 45px rgba(26,117,224,.22)}
.btn-ghost{background:rgba(255,255,255,.04);color:#d5e1ea}
.btn-large{padding:17px 26px}
.hero-stats{display:flex;gap:35px}
.hero-stats div{display:flex;flex-direction:column;gap:4px}
.hero-stats strong{font-size:20px}.hero-stats span{font-size:11px;color:#7891a3;text-transform:uppercase;letter-spacing:.12em}
.hero-art{position:relative;min-width:0}
.hero-image-wrap{
  position:relative;border-radius:28px;overflow:hidden;border:1px solid rgba(125,214,255,.22);
  box-shadow:0 30px 100px rgba(0,0,0,.55),0 0 70px rgba(18,131,193,.12);
  transform:perspective(1400px) rotateY(-5deg) rotateX(2deg);
}
.hero-image-wrap img{display:block;width:100%;height:auto}
.orbit{position:absolute;border:1px solid rgba(43,178,226,.14);border-radius:50%;pointer-events:none}
.orbit-a{width:120%;height:70%;left:-10%;top:16%;transform:rotate(-12deg)}
.orbit-b{width:95%;height:95%;left:3%;top:-3%;border-color:rgba(66,223,123,.08)}
.scroll-hint{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:9px;color:#668294;font-size:9px;letter-spacing:.2em}
.scroll-hint i{width:1px;height:38px;background:linear-gradient(var(--cyan),transparent);animation:scroll 1.6s infinite}
@keyframes scroll{50%{transform:translateY(8px);opacity:.4}}

.story{position:relative;padding:10vh 5vw 0}
.story-intro{max-width:900px;margin:0 auto 15vh;text-align:center}
.story-intro h2,.plus-card h2,.download h2{font-size:clamp(42px,5.5vw,76px);line-height:1.02;letter-spacing:-.05em;margin:0 0 22px}
.story-intro p{color:var(--muted);font-size:18px}
.story-step{
  min-height:110vh;max-width:1250px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:8vw;
  position:relative;padding:12vh 0;
}
.step-copy{max-width:500px}
.step-number{font-size:11px;color:#6b8798;letter-spacing:.18em;font-weight:800;margin-bottom:20px}
.feature-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;font-size:24px;color:#72a7ff;background:rgba(45,103,255,.12);border:1px solid rgba(83,139,255,.2);margin-bottom:22px}
.feature-icon.sparkle{color:#55e8c0;background:rgba(44,218,154,.08)}
.feature-icon.globe{color:#57d8ff;background:rgba(23,185,231,.09)}
.step-copy h3{font-size:clamp(35px,4vw,58px);line-height:1.02;letter-spacing:-.04em;margin:0 0 20px}
.step-copy p{font-size:17px;line-height:1.75;color:var(--muted)}
.step-copy ul{padding:0;margin:26px 0 0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;color:#c8d8e4;font-size:13px}
.step-copy li:before{content:"✓";color:var(--green);margin-right:8px}
.device-stage{height:760px;display:grid;place-items:center;position:relative}
.device-stage:before{content:"";position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(28,139,211,.18),transparent 65%);filter:blur(10px)}
.phone{
  position:relative;width:min(340px,70vw);padding:10px;border-radius:44px;background:#02070b;
  border:1px solid rgba(255,255,255,.28);box-shadow:0 35px 80px rgba(0,0,0,.62),0 0 55px rgba(33,144,218,.18);
  transform:rotate(5deg) translateY(0);transition:transform .8s cubic-bezier(.2,.8,.2,1)
}
.phone-ai{transform:rotate(-5deg)}
.phone img{display:block;width:100%;border-radius:35px}
.phone-speaker{position:absolute;z-index:2;top:18px;left:50%;transform:translateX(-50%);width:88px;height:20px;border-radius:20px;background:#02070b}
.device-shadow{position:absolute;width:240px;height:35px;border-radius:50%;background:rgba(0,0,0,.5);filter:blur(20px);bottom:105px}
.story-step.is-active .phone{transform:rotate(0deg) translateY(-10px) scale(1.02)}
.quote-card{margin-top:28px;padding:20px;border-radius:18px;background:linear-gradient(135deg,rgba(21,71,128,.34),rgba(16,49,66,.55));border:1px solid rgba(75,172,234,.18)}
.quote-card span{display:block;color:#58d7f5;font-size:10px;font-weight:800;letter-spacing:.16em;margin-bottom:9px}.quote-card strong{font-size:15px;line-height:1.5}
.language-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:25px}.language-pills span{padding:9px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.035);font-size:12px;color:#c6d5df}

.plus-section{display:grid;place-items:center;padding:12vh 5vw}
.plus-card{position:relative;width:min(1100px,100%);overflow:hidden;border-radius:36px;padding:clamp(35px,6vw,80px);background:linear-gradient(135deg,rgba(14,45,62,.9),rgba(7,25,37,.95));border:1px solid rgba(107,204,242,.18);box-shadow:0 40px 100px rgba(0,0,0,.35)}
.plus-glow{position:absolute;width:500px;height:500px;border-radius:50%;right:-180px;top:-230px;background:radial-gradient(circle,rgba(48,222,121,.18),transparent 65%);pointer-events:none}
.plus-card>p{max-width:650px;color:var(--muted);font-size:17px;line-height:1.7}
.plus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:45px}
.plus-grid div{padding:22px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid var(--line)}
.plus-grid span{display:block;color:#5ddbf5;font-size:10px;font-weight:800;letter-spacing:.15em;margin-bottom:16px}
.plus-grid strong{display:block;font-size:15px;margin-bottom:7px}.plus-grid small{color:#7f99a9;line-height:1.5}

.download{display:grid;place-items:center;text-align:center;padding:14vh 5vw;overflow:hidden}
.download-bg{position:absolute;inset:0;background:radial-gradient(circle at center,rgba(30,143,202,.17),transparent 35%),radial-gradient(circle at 70% 60%,rgba(45,103,255,.12),transparent 25%)}
.download-content{position:relative;max-width:800px}.download-content p{color:var(--muted);font-size:18px;line-height:1.7;max-width:620px;margin:0 auto 30px}.download-content small{display:block;color:#617b8d;font-size:11px;margin-top:15px}
footer{padding:25px 5vw;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#688092;font-size:12px}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:none}
.delay-1{transition-delay:.12s}

@media(max-width:900px){
  nav{display:none}.site-header{padding:0 20px}.header-cta{padding:9px 12px}
  .hero{grid-template-columns:1fr;padding:115px 20px 80px;text-align:center}
  .hero-copy{margin:auto}.hero-lead{margin:auto}.hero-actions{justify-content:center}.hero-stats{justify-content:center}
  .hero-image-wrap{margin-top:35px;transform:none}.scroll-hint{display:none}
  .story{padding-left:20px;padding-right:20px}.story-step{grid-template-columns:1fr;gap:25px;min-height:auto;padding:90px 0}
  .story-step:nth-of-type(3){display:flex;flex-direction:column-reverse}.step-copy{max-width:650px;margin:auto;text-align:center}
  .step-copy ul{max-width:500px;margin-left:auto;margin-right:auto}.language-pills{justify-content:center}
  .device-stage{height:570px}.phone{width:min(310px,72vw)}
  .plus-grid{grid-template-columns:1fr}.plus-card{text-align:center}
}
@media(max-width:520px){
  h1{font-size:44px}.hero-lead,.story-intro p,.step-copy p,.plus-card>p,.download-content p{font-size:15px}
  .hero-stats{gap:17px}.hero-stats strong{font-size:17px}.hero-stats span{font-size:9px}
  .story-intro h2,.plus-card h2,.download h2{font-size:40px}
  .device-stage{height:500px}.phone{width:270px}.device-stage:before{width:360px;height:360px}
  footer{flex-direction:column;gap:12px}
}