:root{--navy:#050817;--navy2:#0b1030;--blue:#0b4fb5;--sky:#7db2ff;--gold:#c9a24a;--ink:#141a2e;--muted:#55607d;--line:#e3e8f2;--soft:#f5f7fc;--white:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;color:var(--ink);background:var(--white);font:17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}a{color:var(--blue)}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}.narrow{max-width:780px}.center{text-align:center}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(5,8,23,.82);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
.bar{display:flex;align-items:center;gap:22px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:19px;text-decoration:none;margin-right:auto}.brand img{border-radius:8px}
.top nav{display:flex;align-items:center;gap:22px}.top nav a{color:#c5cdea;text-decoration:none;font-size:15px}.top nav a:hover{color:#fff}
.pill{background:linear-gradient(135deg,#7db2ff,#8b7cff);color:#04101a!important;font-weight:600;padding:8px 16px;border-radius:999px}
@media(max-width:820px){.top nav a:not(.pill):not(.by){display:none}}

/* hero */
.hero{color:#fff;background:
 radial-gradient(1200px 600px at 85% -10%,rgba(107,92,255,.45),transparent 60%),
 radial-gradient(900px 500px at -10% 110%,rgba(59,130,246,.30),transparent 60%),
 radial-gradient(1.5px 1.5px at 12% 22%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 28% 68%,#dbe6ff 50%,transparent 51%),
 radial-gradient(1.5px 1.5px at 44% 14%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 61% 82%,#dbe6ff 50%,transparent 51%),
 radial-gradient(1.5px 1.5px at 77% 36%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 90% 74%,#dbe6ff 50%,transparent 51%),
 radial-gradient(1px 1px at 6% 88%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 52% 46%,#c9d6ff 50%,transparent 51%),
 var(--navy);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:30px;align-items:center;padding-top:64px;padding-bottom:0;min-height:680px}
.eyebrow{color:var(--sky);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:13px;margin:0 0 14px}
.hero h1{font-size:clamp(36px,5.2vw,60px);line-height:1.05;margin:0 0 20px;letter-spacing:-.02em}
.lead{font-size:20px;line-height:1.6;color:#c5cdea;max-width:560px;margin:0 0 28px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px}
.btn{display:inline-block;padding:14px 24px;border-radius:999px;font-weight:600;text-decoration:none;font-size:16px}
.btn.primary{background:linear-gradient(135deg,#7db2ff,#8b7cff);color:#04101a}.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{border:1px solid rgba(255,255,255,.28);color:#fff}.btn.ghost:hover{background:rgba(255,255,255,.08)}
.ticks{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 22px;color:#aab6de;font-size:15px}.ticks li:before{content:"✓";color:var(--gold);margin-right:8px;font-weight:700}
.hero-phones{position:relative;height:640px;align-self:end}
.phone{margin:0;border-radius:36px;border:7px solid #0e1330;background:#0e1330;box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08);overflow:hidden}
.phone img{width:100%}
.hero-phones .phone{position:absolute;width:250px}
.p-mid{left:50%;transform:translateX(-50%);top:20px;z-index:3;width:290px!important}
.p-left{left:0;top:110px;z-index:2;transform:rotate(-6deg)}
.p-right{right:0;top:110px;z-index:2;transform:rotate(6deg)}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr;padding-top:44px}.hero-phones{height:560px;max-width:520px;margin:0 auto;width:100%}.hero-phones .phone{width:200px}.p-mid{width:240px!important}}
@media(max-width:480px){.hero-phones{height:470px}.hero-phones .phone{width:150px}.p-mid{width:190px!important}.p-left{top:90px}.p-right{top:90px}}

/* generic sections */
.band{background:var(--navy2);color:#98a5d3;font-size:14px}.logos p{margin:0;padding:18px 0;text-align:center}.logos span{display:inline-block;margin:4px 6px;padding:3px 12px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:#c5cdea}
.sec{padding:92px 0}.sec.soft{background:var(--soft)}.sec.dark{background:linear-gradient(180deg,var(--navy),#0a0f2c);color:#fff}
.sec h2{font-size:clamp(28px,3.6vw,40px);line-height:1.15;margin:0 0 16px;letter-spacing:-.015em}
.sub{color:var(--muted);margin:-4px 0 40px}.dark .sub{color:#aab6de}
.big{font-size:22px;line-height:1.55;color:var(--ink)}#about p{color:var(--muted)}

/* features */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.card{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:0 1px 2px rgba(20,26,46,.04)}
.card h3{margin:14px 0 6px;font-size:19px}.card p{margin:0;color:var(--muted);font-size:16px}
.ico{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#e8f0ff,#f0eaff);display:grid;place-items:center;font-size:24px}
@media(max-width:900px){.grid3{grid-template-columns:1fr 1fr}}@media(max-width:600px){.grid3{grid-template-columns:1fr}}

/* steps */
.steps{list-style:none;padding:0;margin:44px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:s}
.steps li{position:relative;padding:28px;border-radius:20px;background:var(--soft);border:1px solid var(--line)}
.steps h3{margin:12px 0 6px}.steps p{margin:0;color:var(--muted)}
.n{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--blue);color:#fff;font-weight:700}
@media(max-width:800px){.steps{grid-template-columns:1fr}}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 26px;margin-top:10px}
.gallery figure{margin:0}.gallery .phone{max-width:270px;margin:0 auto}
.gallery figcaption{margin:16px auto 0;max-width:270px;text-align:center;color:#b8c3e6;font-size:15px;line-height:1.5}
.ipad-h{margin:70px 0 24px;font-size:24px}
.ipads{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:860px;margin:0 auto}
.tablet{margin:0;border-radius:22px;border:8px solid #0e1330;background:#0e1330;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08)}
@media(max-width:900px){.gallery{grid-template-columns:1fr 1fr}}@media(max-width:560px){.gallery{grid-template-columns:1fr}.ipads{grid-template-columns:1fr}}

/* security */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:10px 0 30px}
.panel{border-radius:20px;padding:26px;border:1px solid var(--line)}.panel h3{margin:0 0 8px}.panel ul{margin:0;padding-left:20px}.panel li{margin:8px 0;color:var(--muted)}.panel li strong{color:var(--ink)}
.panel.good{background:#f1faf5;border-color:#cdebd8}.panel.warn{background:#fff8ec;border-color:#f3dfb4}
.link{font-weight:600}@media(max-width:800px){.cols2{grid-template-columns:1fr}}

/* faq */
details{background:var(--white);border:1px solid var(--line);border-radius:14px;margin:12px 0;padding:0 20px}
summary{cursor:pointer;font-weight:600;padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:14px}
summary::-webkit-details-marker{display:none}summary:after{content:"+";color:var(--blue);font-size:22px;line-height:1}details[open] summary:after{content:"−"}
details p{margin:0 0 18px;color:var(--muted)}

/* cta + footer */
.cta-band{background:radial-gradient(800px 400px at 50% 0,rgba(107,92,255,.35),transparent 60%),var(--navy);color:#fff}
.cta-band p{color:#c5cdea;max-width:560px;margin:0 auto 26px}.big-logo{margin:0 auto 20px;border-radius:22px}
.foot{background:#03050f;color:#98a5d3;padding:52px 0 0;font-size:15px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:30px}.foot h4{color:#fff;margin:0 0 10px;font-size:14px;text-transform:uppercase;letter-spacing:.06em}
.foot a{display:block;color:#98a5d3;text-decoration:none;margin:6px 0}.foot a:hover{color:#fff}.foot .brand{margin:0 0 10px}.foot p{margin:0;max-width:280px}
.copy{border-top:1px solid rgba(255,255,255,.08);margin-top:36px;padding:20px 22px 30px;font-size:13px}
@media(max-width:800px){.foot-grid{grid-template-columns:1fr 1fr}}

.top nav .by{border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:6px 14px;font-size:13px;color:#dbe3ff;white-space:nowrap}.top nav .by:hover{border-color:#7db2ff;color:#fff}
.by-band{background:var(--soft);padding:80px 0}.by-band .eyebrow{color:var(--blue)}.by-band p{color:var(--muted)}
.center-cta{justify-content:center;margin:24px 0 0}
.btn.dark{background:var(--navy);color:#fff}.btn.dark:hover{background:#12183d}.btn.outline{border:1px solid var(--line);color:var(--ink);background:#fff}.btn.outline:hover{border-color:var(--blue);color:var(--blue)}
.foot a.brand{display:flex;color:#fff}.copy a{display:inline;margin:0;color:#c5cdea;text-decoration:underline}.copy a:hover{color:#fff}