@font-face{font-family:'Manrope';src:url('fonts/manrope.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:'DM Sans';src:url('fonts/dmsans.woff2') format('woff2');font-weight:100 1000;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('fonts/jakarta-600.woff2') format('woff2');font-weight:600;font-display:swap}

:root{
  --bg:#070E1B;--surf:#0F1B30;--surf-hi:#16263F;
  --ink:#FFFFFF;--ink2:#93A2BE;
  --rule:#253550;--rule-hi:#344B6A;
  --accent:#4E86FF;--accent-hi:#7BA6FF;
  --fill:#1452F5;--fill-hover:#2B66FF;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:'Manrope',sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;height:auto}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hi)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px;border-radius:6px}
h1,h2,p{margin:0}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.page{min-height:100vh;background:var(--bg);overflow-x:hidden}
.wrap{max-width:1200px;margin:0 auto;padding-left:24px;padding-right:24px}

/* Header */
.site-header{position:sticky;top:0;z-index:10;background:rgba(7,14,27,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.site-header .wrap{padding-top:14px;padding-bottom:14px;display:flex;align-items:center;gap:24px}
.lockup{display:flex;align-items:center;gap:10px;color:var(--ink)}
.lockup:hover{color:var(--ink)}
.lockup svg{flex:none;margin-top:3px}
.wordmark{font:600 24px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:-0.035em;white-space:nowrap}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:24px}
.nav-link{font:600 15px/1 Manrope,sans-serif;color:var(--ink2)}
.nav-link:hover{color:var(--ink)}
.btn-pill{height:44px;padding:0 20px;border-radius:999px;background:var(--fill);color:var(--ink);display:inline-flex;align-items:center;font:700 15px/1 Manrope,sans-serif;white-space:nowrap}
.btn-pill:hover,.btn-lg:hover{background:var(--fill-hover);color:var(--ink)}

/* Narrow screens: the Features link goes first, then the header button shortens,
   then the header tightens. The wordmark never wraps. */
@media (max-width:579px){.nav-link{display:none}}
@media (max-width:489px){.btn-pill .long{display:none}}
@media (max-width:419px){
  .site-header .wrap{gap:10px;padding-left:16px;padding-right:16px}
  .site-header .wordmark{font-size:20px}
  .site-header .lockup svg{width:26px;height:26px;margin-top:2px}
  .btn-pill{height:40px;padding:0 14px;font-size:13px}
}
@media (max-width:339px){.site-header .wordmark{font-size:19px}}

/* Hero */
.hero{position:relative}
.hero-glow{position:absolute;inset:0;background:radial-gradient(50% 60% at 72% 45%,rgba(78,134,255,.2),rgba(78,134,255,0) 75%);pointer-events:none}
.hero-grid{position:relative;padding-top:clamp(56px,9vw,120px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:56px;align-items:center}
.hero h1{font:600 clamp(44px,7vw,80px)/0.98 Manrope,sans-serif;letter-spacing:-0.035em;text-wrap:balance}
.hero-sub{margin-top:28px;max-width:520px;font:400 clamp(18px,2vw,21px)/1.55 Manrope,sans-serif;color:var(--ink2);text-wrap:pretty}
.cta-row{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.btn-lg{height:56px;padding:0 28px;border-radius:14px;background:var(--fill);color:var(--ink);display:inline-flex;align-items:center;font:700 17px/1 Manrope,sans-serif;box-shadow:0 8px 20px -8px rgba(20,82,245,.45)}
.cta-note{font:400 15px/1.5 Manrope,sans-serif;color:var(--ink2)}
.hero-phone{display:flex;justify-content:center;align-self:end}
.hero-phone img{width:100%;max-width:400px;margin-bottom:-120px}

/* Features */
.features{position:relative;z-index:1;background:var(--bg);border-top:1px solid var(--rule)}
.features > .wrap{padding-top:clamp(80px,10vw,140px);padding-bottom:clamp(80px,10vw,140px);display:flex;flex-direction:column;gap:clamp(96px,12vw,160px)}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:56px;align-items:center}
.overline{font:700 12px/1.4 Manrope,sans-serif;letter-spacing:1.44px;text-transform:uppercase;color:var(--ink2)}
.row h2{margin-top:16px;font:600 clamp(32px,4.4vw,52px)/1.02 Manrope,sans-serif;letter-spacing:-0.03em;text-wrap:balance}
.body{margin-top:20px;max-width:480px;font:400 18px/1.6 Manrope,sans-serif;color:var(--ink2);text-wrap:pretty}
.phone{display:flex;justify-content:center;height:clamp(460px,52vw,640px);overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent);mask-image:linear-gradient(180deg,#000 80%,transparent)}
.phone img{width:100%;max-width:380px;align-self:flex-start}
.phone-pair{gap:16px;height:clamp(420px,46vw,560px);-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent);mask-image:linear-gradient(180deg,#000 78%,transparent)}
.phone-pair img{width:48%;max-width:280px}
.phone-pair img + img{margin-top:48px}

.chips{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px}
.chip{height:40px;padding:0 16px;border-radius:999px;background:var(--surf);border:1px solid var(--rule);display:inline-flex;align-items:center;font:700 14px/1 Manrope,sans-serif}

/* Video — a poster that swaps to the YouTube player on click */
.video-block{text-align:center}
.video-block h2{margin-top:16px;font:600 clamp(32px,4.4vw,52px)/1.02 Manrope,sans-serif;letter-spacing:-0.03em;text-wrap:balance}
.video{position:relative;margin:40px auto 0;max-width:960px;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:var(--surf);border:1px solid var(--rule);box-shadow:0 24px 60px -30px rgba(78,134,255,.35)}
.video-poster,.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.video-poster img{width:100%;height:100%;object-fit:cover}
.video-poster:focus-visible{outline-offset:-4px;border-radius:20px}
.play{position:absolute;left:24px;bottom:24px;height:52px;padding:0 22px 0 16px;border-radius:999px;background:var(--fill);color:var(--ink);display:inline-flex;align-items:center;gap:8px;font:700 16px/1 Manrope,sans-serif;box-shadow:0 8px 24px -8px rgba(20,82,245,.6);transition:background .15s}
.video-poster:hover .play{background:var(--fill-hover)}
@media (max-width:480px){.video{border-radius:14px}.play{left:12px;bottom:12px;height:44px;padding:0 16px 0 12px;font-size:14px}.play svg{width:22px;height:22px}}
@media (prefers-reduced-motion:reduce){.play{transition:none}}

/* Globe */
.globe{width:100%;max-width:600px;aspect-ratio:1/1;justify-self:center}
.globe img{width:100%;height:100%}

/* Footer */
.site-footer{border-top:1px solid var(--rule)}
.site-footer .wrap{padding-top:40px;padding-bottom:40px;display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px}
.site-footer .lockup svg{margin-top:2px}
.site-footer .wordmark{font-size:20px}
.foot-links{margin-left:auto;display:flex;flex-wrap:wrap;gap:12px 28px}
.foot-links a{font:600 14px/1.5 Manrope,sans-serif;color:var(--ink2)}
.foot-links a:hover{color:var(--ink)}
.small{width:100%;font:400 13px/1.5 Manrope,sans-serif;color:var(--ink2)}