:root{
  /* Neon blue primary + brighter deep background */
  --bg:#0b1834;
  --panel:#10254a;
  --panel2:#12315d;
  --stroke:#1b2d53;
  --muted:#b1c7dd;
  --text:#f3f9ff;
  --neon:#00e4ff;
  --neon-2:#69f2ff;
  --neon-3:#8a2be2;
  --r:16px;
  --shadow:0 16px 44px rgba(0,0,0,.45);
  --glow:0 0 40px rgba(0,228,255,.32);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.7;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--neon);text-decoration:none}
a:hover{color:var(--neon-2)}
.container{width:92%;max-width:1180px;margin-inline:auto}
h1,h2,h3{font-family:"Space Grotesk",Inter,sans-serif;letter-spacing:.2px}
h1{font-weight:700;font-size:clamp(2.8rem,4.6vw,4.2rem);line-height:1.06;margin:0 0 10px}
h2{font-weight:700;font-size:clamp(1.9rem,2.9vw,2.6rem);margin:0 0 12px}
h3{font-weight:600;font-size:clamp(1.08rem,1.6vw,1.2rem);margin:0 0 8px}

/* progress */
.progress{position:fixed;inset:0 auto auto 0;height:3px;width:0;background:linear-gradient(90deg,var(--neon),var(--neon-3));z-index:1200}

/* Aurora Canvas + overlays */
#aurora{position:fixed;inset:0;z-index:-2}
.bg-overlays{position:fixed;inset:0;z-index:-1;pointer-events:none}
.grid{position:absolute;inset:-12% -12% 50% -12%;background:
  linear-gradient(#174579 1px, transparent 1px) 0 0/ 60px 60px,
  linear-gradient(90deg,#174579 1px, transparent 1px) 0 0/ 60px 60px;opacity:.14;
  transform:skewY(-7deg) translateY(-3%);filter:blur(.4px)}
.grain{position:absolute;inset:-50% -50%;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/><feComponentTransfer><feFuncA type="table" tableValues="0 0 0 .08"/></feComponentTransfer></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');opacity:.22;mix-blend-mode:soft-light;animation:grain 8s steps(10) infinite}
@keyframes grain{to{transform:translate3d(-10%,10%,0)}}

/* Header */
.header{display:flex;align-items:center;justify-content:space-between;padding:16px 0;position:sticky;top:0;background:linear-gradient(180deg,rgba(11,24,52,.84),rgba(11,24,52,.6),transparent);backdrop-filter:blur(12px);border-bottom:1px solid #10365f;z-index:1000}
.brand img{display:block;height:auto;max-height:50px;width:auto;object-fit:contain;image-rendering:auto}
.nav{display:flex;gap:24px}
.nav .lnk{color:#c3d7ea;padding:10px;border-radius:10px}
.nav .lnk:hover{color:#f0f7ff;background:#0f2c53}
.btn{display:inline-block;padding:12px 22px;border-radius:999px;font-weight:800;letter-spacing:.2px;border:1px solid transparent;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.btn.cta{background:var(--neon);color:#041723;box-shadow:var(--glow), var(--shadow)}
.btn.cta:hover{background:var(--neon-2);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--neon);border:1px solid var(--neon)}
.btn.ghost:hover{background:var(--neon);color:#041723}
.lnk.more{color:#e3f8ff;text-decoration:underline}
.float-cta{position:fixed;right:18px;bottom:18px;background:linear-gradient(90deg,#1bd1ff,#78f0ff);color:#001725;padding:12px 18px;border-radius:999px;font-weight:900;border:1px solid #4ae0ff;box-shadow:0 16px 40px rgba(0,0,0,.45);z-index:1100;transition:opacity .2s ease, transform .2s ease}
.float-cta.hide{opacity:0;pointer-events:none;transform:translateY(10px)}
.float-cta i{margin-right:8px}

/* Hero */
.hero{min-height:86vh;display:grid;grid-template-columns:1.05fr .95fr;gap:66px;align-items:center;padding:94px 0}
.title{background:linear-gradient(90deg,var(--neon),#69f2ff 60%,#effbff);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:#c3d7ea;max-width:720px}
.actions{display:flex;gap:14px;margin:16px 0 10px}
.trust{display:flex;flex-wrap:wrap;gap:16px;list-style:none;padding:0;margin:14px 0 0;color:#e1f3ffcc}
.trust i{color:var(--neon);margin-right:8px}

/* Phone demo */
.hero-demo{position:relative;perspective:1200px}
#tiltZone:hover .phone{transform:rotateY(6deg) rotateX(2deg)}
.phone{transition:transform .45s ease;transform-style:preserve-3d;width:min(380px,82vw);height:700px;background:linear-gradient(180deg,#17386c,#123159);border:1px solid #1a4a7a;border-radius:28px;box-shadow:0 30px 80px rgba(0,0,0,.52),0 0 70px rgba(0,228,255,.22);display:grid;grid-template-rows:24px auto 1fr auto;position:relative}
.notch{height:24px;background:radial-gradient(80% 120% at 50% -20%,#0b1834,transparent);border-bottom:1px solid #1a3f69;border-top-left-radius:28px;border-top-right-radius:28px}
.status{display:flex;justify-content:space-between;align-items:center;color:#d1ecff;font-weight:700;letter-spacing:.4px;padding:4px 12px}
.status .time{font-variant-numeric:tabular-nums}
.status .stats{display:flex;gap:8px}
.status .bars,.status .wifi,.status .battery{display:inline-block;width:16px;height:10px;background:linear-gradient(180deg,#d1ecff,#8acfff);opacity:.8;border-radius:2px}
.screen{margin:10px;border-radius:22px;background:linear-gradient(180deg,#0a1c38,#08172d);overflow:hidden;display:grid;place-items:center;box-shadow:inset 0 0 30px rgba(0,0,0,.45);position:relative;padding:14px}
.waves{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.waves span{position:absolute;width:44%;height:44%;border-radius:999px;border:2px solid var(--neon-2);opacity:.55;animation:ring 2s ease-out infinite}
.waves span:nth-child(2){animation-delay:.3s}
.waves span:nth-child(3){animation-delay:.6s}
.waves span:nth-child(4){animation-delay:.9s}
@keyframes ring{from{transform:scale(.55);opacity:.6}to{transform:scale(1.7);opacity:0}}
#phone.ringing{animation:shake .6s linear infinite}
@keyframes shake{10%{transform:translateX(1px) rotate(.3deg)} 20%{transform:translateX(-1px) rotate(-.3deg)} 30%{transform:translateX(1px) rotate(.3deg)} 40%{transform:translateX(-1px) rotate(-.3deg)} 50%{transform:translateX(0)}}
.state{display:grid;place-items:center;gap:12px;color:#cfefff;animation:fade .45s ease;text-align:center;padding:10px}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.hidden{display:none}
.state .big{font-size:42px}
.state .success{color:#6bf58c;text-shadow:0 0 16px rgba(107,245,140,.25)}
.caller{display:flex;gap:12px;align-items:center;background:#0f2343cc;border:1px solid #1a3d63;border-radius:14px;padding:12px}
.avatar{width:48px;height:48px;border-radius:999px;background:conic-gradient(from 0deg,var(--neon-2),#effbff,var(--neon-2))}
.meta h4{margin:0 0 4px;font-family:"Space Grotesk",Inter,sans-serif}
.meta p{margin:0;color:#bcd4ea}
.actions-accept{display:flex;gap:18px;margin-top:10px}
.btn-accept,.btn-decline{width:60px;height:60px;border-radius:999px;border:1px solid transparent;display:grid;place-items:center;font-size:18px;cursor:pointer;box-shadow:var(--shadow)}
.btn-accept{background:#2cf59a;color:#00321f;border-color:#58ffc1}
.btn-decline{background:#ff5a5a;color:#330000;border-color:#ff9090}
.btn-accept:hover,.btn-decline:hover{filter:brightness(1.07)}
.ring-toggle{margin-top:4px}
.btn.ring{background:#0f2a4e;color:#d6ecff;border:1px solid #1e4a7c;padding:8px 12px;border-radius:999px}
.btn.ring:hover{background:#12335f}
.sms{display:grid;gap:8px;width:88%}
.bubble{max-width:100%;display:inline-block;padding:10px 12px;border-radius:14px;box-shadow:0 10px 24px rgba(0,0,0,.35);animation:sms .35s ease}
@keyframes sms{from{transform:translateY(6px);opacity:0}to{transform:translateY(0);opacity:1}}
.bubble.out{justify-self:end;background:#0f2a4e;border:1px solid #1c4a7a;color:#d6ecff}
.bubble.in{justify-self:start;background:#133a6b;border:1px solid #1e4a7c;color:#e8f6ff}
.typing{justify-self:start;display:inline-flex;gap:6px;padding:8px 12px;border-radius:14px;background:#102b55;border:1px solid #1c4a7a}
.typing span{width:6px;height:6px;border-radius:999px;background:#d6ecff;opacity:.4;animation:dot 1s infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes dot{50%{opacity:1;transform:translateY(-2px)}}

/* Replay button */
.replay{position:absolute;bottom:10px;right:10px;background:#0f274f;border:1px solid #1c4d80;color:#e5f6ff;border-radius:999px;padding:8px 12px;cursor:pointer}
.replay:hover{background:#12315d}

/* Sections */
.section{padding:100px 0}
.intro{color:#cde5f7;max-width:840px}

/* Pipeline rail */
.pipeline{position:relative;margin-top:8px}
.rail{position:absolute;left:0;right:0;top:-6px;height:4px;background:#123b6c;border-radius:999px;overflow:hidden}
.rail .dot{position:absolute;left:-10%;top:-6px;width:16px;height:16px;border-radius:999px;background:radial-gradient(circle at 35% 35%,#fff, var(--neon));box-shadow:0 0 20px var(--neon);animation:trail 7s linear infinite}
@keyframes trail{from{left:-10%}to{left:100%}}
.stages{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stage{background:linear-gradient(180deg,rgba(22,46,86,.85),rgba(14,26,50,.85));border:1px solid #1a4a7a;border-radius:16px;padding:22px;box-shadow:var(--shadow)}
.stage .icn{font-size:20px;color:var(--neon);margin-bottom:6px}

/* Included */
.included-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:10px}
.inc{background:#0f274f;border:1px solid #1c4d80;border-radius:12px;padding:12px 14px;color:#e5f6ff;display:flex;gap:10px;align-items:flex-start;box-shadow:var(--shadow)}
.inc i{color:#88f1ff;margin-top:2px}
.cta-row{margin-top:14px}

/* Packages */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:linear-gradient(180deg,rgba(22,46,86,.85),rgba(14,26,50,.85));border:1px solid #1a4a7a;border-radius:16px;padding:22px;box-shadow:var(--shadow);position:relative;transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 26px 70px rgba(0,0,0,.6),0 0 34px rgba(0,228,255,.25);border-color:#2ea7d6}
.badge{position:absolute;top:12px;right:-10px;background:linear-gradient(90deg,#21d4ff,#7cf3ff);color:#001624;padding:6px 12px;border-radius:999px;font-weight:900;border:1px solid #4ae0ff}
.badge.alt{background:linear-gradient(90deg,#8a2be2,#59f2ff);color:#001624;border-color:#8a62ff}
.subt{color:#d3e9ff;margin:-4px 0 8px}
.list{margin:0 0 8px 18px}
.out{color:#eaf9ffbf}

/* Proof — flowing horizontal carousel */
.proof-flow{position:relative;border:1px solid #1c4d80;border-radius:16px;background:#0b1f3e;overflow:hidden}
.proof-flow::before,.proof-flow::after{content:"";position:absolute;top:0;bottom:0;width:100px;z-index:2;pointer-events:none}
.proof-flow::before{left:0;background:linear-gradient(90deg,#0b1f3e,transparent)}
.proof-flow::after{right:0;background:linear-gradient(270deg,#0b1f3e,transparent)}
.belt{display:flex;gap:10px;animation:scroll 28s linear infinite;will-change:transform}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.tile{min-width:260px;max-width:260px;border-radius:12px;overflow:hidden;border:1px solid #1a4a7a;background:#0f274f;box-shadow:var(--shadow);position:relative}
.tile img{width:100%;height:160px;object-fit:cover;display:block;cursor:zoom-in;filter:saturate(1.05)}
.cap{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,transparent,#0b1f3ecc);font-size:.86rem;color:#cfe7ff;padding:6px 10px}

.proof-flow:hover .belt{animation-play-state:paused}

/* Lightbox */
dialog#lightbox{border:0;border-radius:14px;padding:0;background:#0a1426;box-shadow:0 30px 80px rgba(0,0,0,.6);max-width:min(1000px,92vw)}
dialog::backdrop{background:rgba(0,0,0,.65)}
.lightbox-close{position:absolute;right:10px;top:10px;background:#0d2036;border:1px solid #1f3c66;border-radius:8px;color:#cfe7ff;padding:8px 10px;cursor:pointer}

/* Book */
.bullets{color:#cfe7ff;margin:10px 0 10px 18px}
.book-actions{display:flex;justify-content:center;margin:6px 0 12px}
.btn.big{padding:16px 26px;font-size:1.05rem}
.reassure{color:#d4ebff;text-align:center}

/* FAQ */
.faq details{border-bottom:1px solid #1a4a7a;padding:12px 0}
.faq summary{cursor:pointer;font-weight:800;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq .answer{color:#d9e8fb;padding:6px 0 10px}

/* Footer */
.foot{padding:24px 0;border-top:1px solid #10365f;background:#0b1d3b;color:#d1e6fb;text-align:center}

/* Reveal */
.reveal{opacity:0;transform:translateY(18px) scale(.995);filter:blur(6px);transition:opacity .6s ease, transform .6s ease, filter .6s ease}
.reveal.in{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}

@media (max-width:1040px){
  .hero{grid-template-columns:1fr}
  .stages{grid-template-columns:1fr 1fr}
  .included-grid{grid-template-columns:1fr 1fr}
  .cards-3{grid-template-columns:1fr}
}
@media (max-width:640px){
  .included-grid{grid-template-columns:1fr}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .belt{animation:none}
}

.brand:hover img{filter:drop-shadow(0 0 6px rgba(0,228,255,.24))}

.header{padding:16px 0}