:root { --night:#14123A; --night2:#1E1B57; --indigo:#6366F1; --cyan:#22D3EE; --mist:#E8EAFE; --dim:#B9BDEB; --gutter:clamp(16px,5vw,72px); color-scheme:dark; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:clip; background:var(--night); color:var(--mist); font:400 clamp(1.02rem,.97rem + .25vw,1.2rem)/1.55 Archivo,"Helvetica Neue",system-ui,sans-serif; }
a { color:inherit; text-underline-offset:4px; }
:focus-visible { outline:3px solid var(--cyan); outline-offset:3px; }
img { display:block; max-width:100%; height:auto; }
.top { position:absolute; inset:0 0 auto; z-index:3; display:flex; justify-content:space-between; align-items:center; padding:20px var(--gutter); }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; text-decoration:none; }
h1,h2 { font-stretch:115%; font-weight:800; margin:0; text-wrap:balance; }
.hero { min-height:100svh; padding:96px var(--gutter) 48px; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:32px; align-items:center;
  background:
    linear-gradient(transparent 0 calc(100% - 1px), rgba(99,102,241,.13) 0) 0 0/100% 64px,
    linear-gradient(90deg, transparent 0 calc(100% - 1px), rgba(99,102,241,.13) 0) 0 0/64px 100%,
    radial-gradient(70% 70% at 75% 45%, #2C2890 0%, var(--night) 70%); }
h1 { font-size:clamp(2.7rem,6.4vw,6.2rem); line-height:.98; letter-spacing:-.02em; }
.copy p { max-width:46ch; color:var(--dim); margin:1.1em 0 1.4em; }
.copy .meta { font-size:.88rem; margin:1em 0 0; }
.button { display:inline-block; padding:.85em 1.6em; border-radius:999px; background:var(--cyan); color:#07102E; font-weight:700; text-decoration:none; transition:background-color .2s,transform .2s; }
.button:hover { background:#fff; transform:translateY(-2px); }
.stage { perspective:1400px; display:flex; justify-content:center; }
.phone { width:min(100%,340px); padding:10px; border-radius:42px; background:linear-gradient(145deg,#4a48b0,#0c0b2a 60%); transform:rotateY(-20deg) rotateX(9deg) rotateZ(3deg); transform-style:preserve-3d;
  box-shadow:-34px 46px 80px rgba(3,3,30,.75), 0 0 0 1px rgba(255,255,255,.14) inset; }
.phone img { border-radius:32px; }
.features { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(20px,3vw,44px); padding:clamp(56px,9vh,110px) var(--gutter); background:var(--night2); }
.features h2 { font-size:1.3rem; color:var(--cyan); margin-bottom:.4em; }
.features p { margin:0; color:var(--dim); }
.setup { padding:clamp(56px,9vh,110px) var(--gutter); }
.setup h2,.trust h2,.download h2 { font-size:clamp(1.8rem,3.4vw,3rem); line-height:1.05; }
.setup ol { max-width:68ch; padding-left:1.4em; margin:1.2em 0 0; }
.setup li { margin-bottom:.8em; color:var(--dim); }
.setup strong { color:var(--mist); }
.trust { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,5vw,72px); padding:clamp(56px,9vh,110px) var(--gutter); background:var(--night2); }
.trust h2 { font-size:clamp(1.5rem,2.4vw,2.1rem); }
.trust p { color:var(--dim); max-width:56ch; }
.download { padding:clamp(56px,9vh,110px) var(--gutter); text-align:center; }
.download .button { margin-top:1.1em; }
footer { padding:24px var(--gutter) 36px; color:var(--dim); font-size:.86rem; border-top:1px solid rgba(255,255,255,.1); }
@media (max-width:860px) {
  .hero { grid-template-columns:1fr; padding-top:84px; }
  .phone { width:min(74vw,290px); }
  .features { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .trust { grid-template-columns:1fr; }
}
@media (max-width:480px) { .features { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } .button:hover { transform:none; } }