:root { --navy:#031d37; --deep:#021427; --aqua:#25e0de; --gold:#ffbc45; --cream:#fff8df; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:white; background:var(--deep); font-family:-apple-system,BlinkMacSystemFont,"Avenir Next","Segoe UI",sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.35; background-image:radial-gradient(rgba(255,255,255,.18) .7px,transparent .7px); background-size:7px 7px; mix-blend-mode:soft-light; }
.hero { min-height:100svh; overflow:hidden; position:relative; display:flex; flex-direction:column; background:radial-gradient(circle at 73% 45%,#0b7893 0,rgba(5,76,101,.55) 22%,transparent 46%),linear-gradient(135deg,#062d51 0%,#02172b 55%,#020f20 100%); }
.hero::after { content:""; position:absolute; inset:auto -10% -38% 18%; height:65%; transform:rotate(-7deg); background:repeating-radial-gradient(ellipse at center,transparent 0 18px,rgba(68,238,235,.09) 20px 22px); opacity:.7; }
.glow { position:absolute; border-radius:50%; filter:blur(80px); opacity:.25; }
.glow-one { width:360px;height:360px;background:#13e8d8;right:7%;top:17%; }.glow-two { width:260px;height:260px;background:#007de8;left:-8%;bottom:-5%; }
.nav { width:min(1180px,calc(100% - 56px)); margin:0 auto; height:96px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:5; }
.brand { color:white;text-decoration:none;display:flex;align-items:center;gap:13px;font-family:"Avenir Next",system-ui,sans-serif;font-weight:800;font-size:20px;letter-spacing:-.4px; }
.brand img { width:46px;height:46px;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.35); }
.nav-links { display:flex;gap:34px; }.nav-links a { color:rgba(255,255,255,.72);text-decoration:none;font-size:14px;font-weight:600;transition:.2s; }.nav-links a:hover { color:white; }
.hero-content { width:min(1180px,calc(100% - 56px)); margin:auto; display:grid;grid-template-columns:1.04fr .96fr;align-items:center;gap:60px;position:relative;z-index:2;padding:24px 0 42px; }
.copy { padding-bottom:18px; }.eyebrow { color:#8af7ef;text-transform:uppercase;letter-spacing:3px;font-size:12px;font-weight:800;display:flex;align-items:center;gap:10px;margin-bottom:22px; }.eyebrow span { width:28px;height:2px;background:var(--aqua); }
h1 { font-family:"Arial Black","Avenir Next",system-ui,sans-serif;font-size:clamp(52px,6.2vw,86px);line-height:.93;letter-spacing:-5px;margin:0 0 27px;text-transform:uppercase;font-weight:900;text-shadow:0 8px 32px rgba(0,0,0,.3); }
h1 em { font-style:normal;color:var(--aqua); }.lead { max-width:570px;font-size:19px;line-height:1.55;color:rgba(255,255,255,.75);margin:0 0 30px; }
.actions { display:flex;align-items:center;gap:20px;margin-bottom:42px; }.app-store { display:flex;align-items:center;gap:11px;background:#fff;color:#071322;text-decoration:none;border-radius:14px;padding:10px 20px 11px;box-shadow:0 12px 30px rgba(0,0,0,.28);transition:transform .2s,box-shadow .2s; }.app-store:hover { transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,0,0,.35); }.app-store svg { width:27px;height:32px; }.app-store span { font-size:20px;font-weight:700;line-height:1; }.app-store small { display:block;font-size:9px;text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px;font-weight:500; }.device-note { font-size:13px;color:rgba(255,255,255,.46); }
.features { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:680px; }.features article { min-width:0;display:flex;align-items:center;gap:13px;padding:17px 15px;border:1px solid rgba(255,255,255,.13);border-radius:15px;background:rgba(255,255,255,.06);backdrop-filter:blur(8px); }.features b { display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:11px;background:rgba(37,224,222,.15);color:var(--aqua);font-size:17px; }.features strong,.features span { display:block;white-space:normal;line-height:1.2; }.features strong { font-size:13px; }.features span { font-size:10px;color:rgba(255,255,255,.52);margin-top:4px; }
.visual { position:relative;height:min(69vh,680px);min-height:520px;display:grid;place-items:center; }.phone-shadow { position:absolute;width:58%;height:18%;bottom:4%;border-radius:50%;background:#00101d;filter:blur(28px);opacity:.75; }.phone { position:relative;height:100%;aspect-ratio:1320/2398;border:8px solid #06111c;border-radius:40px;overflow:hidden;box-shadow:0 35px 70px rgba(0,0,0,.48),0 0 0 2px rgba(255,255,255,.14);transform:rotate(4deg);z-index:2;background:#052b4d; }.phone img { position:absolute;left:0;top:-19.6%;width:100%;height:auto;display:block; }.speaker { position:absolute;z-index:3;top:9px;left:50%;transform:translateX(-50%);width:29%;height:18px;background:#050b12;border-radius:0 0 13px 13px; }
.wave-ring { position:absolute;border:2px solid rgba(100,249,239,.28);border-radius:50%;transform:rotateX(68deg); }.ring-one { width:450px;height:450px;right:-7%;bottom:-8%; }.ring-two { width:350px;height:350px;right:4%;bottom:0;border-color:rgba(255,255,255,.16); }.floating-card { position:absolute;z-index:3;right:-12px;top:17%;width:102px;height:110px;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,#8f491e,#4d210f);border:2px solid #e6a63c;box-shadow:0 18px 35px rgba(0,0,0,.35);transform:rotate(-4deg); }.floating-card span,.floating-card small { font-size:9px;letter-spacing:2px;color:#ffd77b;font-weight:800; }.floating-card strong { font:900 43px/1 Montserrat;color:#fff3c7;margin:3px 0; }
footer { width:min(1180px,calc(100% - 56px));margin:0 auto;min-height:54px;display:flex;align-items:center;justify-content:space-between;color:rgba(255,255,255,.38);font-size:11px;position:relative;z-index:3;border-top:1px solid rgba(255,255,255,.07); }.footer-links { display:flex;gap:20px; }.footer-links button,.footer-links a { border:0;background:none;color:inherit;font:inherit;cursor:pointer;padding:8px 0;text-decoration:none; }.footer-links button:hover,.footer-links a:hover { color:white; }
dialog { width:min(610px,calc(100% - 32px));max-height:min(760px,calc(100vh - 40px));border:1px solid rgba(255,188,69,.55);border-radius:25px;color:#f8f6e9;background:linear-gradient(160deg,#123b42,#06242d 65%,#061a24);box-shadow:0 35px 100px rgba(0,0,0,.65);padding:42px;line-height:1.55; }.modal-icon { width:50px;height:50px;display:grid;place-items:center;border-radius:15px;background:#8f491e;border:2px solid #dda43f;font-size:22px;box-shadow:0 8px 20px rgba(0,0,0,.25); }dialog::backdrop { background:rgba(1,10,19,.78);backdrop-filter:blur(8px); }dialog h2 { font:800 30px Montserrat;margin:20px 0 7px; }dialog h3 { color:#ffd274;margin:24px 0 5px;font-size:14px;text-transform:uppercase;letter-spacing:1.5px; }dialog p { color:rgba(255,255,255,.72);font-size:15px;margin:8px 0; }dialog a { color:#70e9e5; }.updated { font-size:12px;color:rgba(255,255,255,.4); }.close { position:absolute;right:18px;top:16px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:white;font-size:24px;cursor:pointer; }
@media(max-width:850px){.nav{height:78px}.nav-links{gap:16px}.hero-content{grid-template-columns:1fr;text-align:center;padding-top:24px}.copy{display:flex;flex-direction:column;align-items:center}.eyebrow{justify-content:center}.visual{height:580px;min-height:0;order:-1;margin-top:6px}.phone{height:100%}.features{width:100%}h1{font-size:clamp(45px,12vw,70px);letter-spacing:-3px}.lead{font-size:17px}.floating-card{right:8%}}
@media(max-width:560px){.nav,.hero-content,footer{width:calc(100% - 32px)}.nav-links a:first-child{display:none}.brand span{font-size:16px}.hero-content{gap:26px}.visual{height:48vh;min-height:390px}.phone{border-width:6px;border-radius:30px}.floating-card{width:78px;height:86px;right:0}.floating-card strong{font-size:32px}.copy{padding-bottom:0}h1{font-size:44px;line-height:.96}.lead{font-size:15px;margin-bottom:22px}.actions{margin-bottom:28px}.device-note{display:none}.features{grid-template-columns:1fr;gap:7px}.features article{padding:9px 12px;text-align:left}.nav-links{gap:13px}.nav-links a{font-size:12px}footer{margin-top:30px}.wave-ring{display:none}dialog{padding:32px 24px}}
@media(max-height:760px) and (min-width:851px){.nav{height:72px}.hero-content{padding:8px 0 20px}.visual{height:560px;min-height:0}h1{font-size:62px}.lead{font-size:16px}.actions{margin-bottom:28px}footer{min-height:44px}}