:root { --navy:#08162c; --blue:#2563eb; --blue-dark:#123d8b; --sky:#eaf2ff; --ink:#111c33; --muted:#5d6b82; --line:#d9e2ef; --surface:#fff; --soft:#f4f7fb; --red:#e52d32; --radius:22px; --shadow:0 24px 70px rgba(8,22,44,.13); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--surface); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.6; }
img { display:block; max-width:100%; }
a { color:inherit; }
.container { width:min(1160px,calc(100% - 36px)); margin-inline:auto; }
.skip-link { position:fixed; top:-80px; left:12px; z-index:100; padding:10px 16px; background:#fff; border-radius:8px; }
.skip-link:focus { top:12px; }
.site-header { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9); border-bottom:1px solid rgba(217,226,239,.8); backdrop-filter:blur(16px); }
.nav { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:800; letter-spacing:-.02em; }
.brand b { color:var(--blue); }
.brand-mark { width:38px; height:38px; object-fit:cover; border-radius:11px; box-shadow:0 8px 20px rgba(37,99,235,.25); }
.nav-links { display:flex; align-items:center; gap:24px; }
.nav-links a { color:#34435c; text-decoration:none; font-size:14px; font-weight:700; }
.nav-toggle { display:none; border:1px solid var(--line); background:#fff; border-radius:10px; padding:9px 12px; font-weight:700; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 20px; border:1px solid var(--blue); border-radius:14px; color:#fff!important; background:var(--blue); text-decoration:none; font-weight:800; box-shadow:0 10px 30px rgba(37,99,235,.22); }
.button:hover { background:#1d4ed8; transform:translateY(-1px); }
.button-secondary { color:var(--blue)!important; background:#fff; border-color:#bcd0f7; box-shadow:none; }
.button-small { min-height:40px; padding-inline:16px; }
.hero { overflow:hidden; padding:82px 0 70px; background:radial-gradient(circle at 78% 18%,#dceaff 0,transparent 30%),linear-gradient(180deg,#f8fbff 0,#fff 82%); }
.hero-grid { display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:72px; }
.app-identity { display:inline-flex; align-items:center; gap:11px; margin-bottom:22px; padding:8px 14px 8px 8px; border:1px solid #d6e3f8; border-radius:16px; color:#40506a; background:rgba(255,255,255,.85); font-size:13px; font-weight:800; box-shadow:0 10px 30px rgba(16,38,74,.07); }
.app-identity img { width:46px; height:46px; border-radius:13px; box-shadow:0 6px 16px rgba(37,99,235,.2); }
.eyebrow { margin:0 0 12px; color:var(--blue); font-size:13px; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:720px; margin-bottom:22px; font-size:clamp(44px,6vw,75px); line-height:1.02; letter-spacing:-.052em; }
h2 { margin-bottom:16px; font-size:clamp(32px,4vw,50px); line-height:1.08; letter-spacing:-.04em; }
h3 { margin-bottom:8px; line-height:1.25; }
.lead { max-width:650px; color:var(--muted); font-size:20px; line-height:1.65; }
.lead-small { color:var(--muted); font-size:18px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin:30px 0; }
.trust-list { display:flex; flex-wrap:wrap; gap:10px 22px; margin:0; padding:0; color:#40506a; font-size:14px; font-weight:700; list-style:none; }
.trust-list li::before { content:"✓"; margin-right:7px; color:#159447; }
.phone-stage { position:relative; display:grid; place-items:center; min-height:630px; }
.glow { position:absolute; width:440px; height:440px; background:radial-gradient(circle,#6ea1ff 0,rgba(110,161,255,.1) 55%,transparent 70%); filter:blur(10px); }
.phone-shot { position:relative; width:min(360px,78vw); max-height:690px; object-fit:cover; object-position:top; border:10px solid #101827; border-radius:52px; box-shadow:var(--shadow); }
.section { padding:104px 0; }
.section-heading { max-width:760px; margin-bottom:45px; }
.section-heading>p:last-child { color:var(--muted); font-size:18px; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.feature-card { min-height:250px; padding:26px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:0 12px 35px rgba(16,38,74,.06); }
.feature-number { display:inline-block; margin-bottom:40px; color:var(--blue); font-size:13px; font-weight:900; }
.feature-card p { color:var(--muted); }
.section-dark { color:#fff; background:var(--navy); }
.section-heading-light p { color:#aebbd0!important; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.step { overflow:hidden; border:1px solid #2b3b56; border-radius:28px; background:#111f36; }
.step>div { min-height:210px; padding:28px; }
.step b { display:grid; place-items:center; width:35px; height:35px; margin-bottom:24px; border-radius:50%; color:#9cc0ff; background:#1a3764; }
.step p { color:#b8c5d8; }
.step img { width:100%; height:480px; object-fit:cover; object-position:top; }
.video-section { color:#fff; background:linear-gradient(180deg,#071326,#0b1f44); }
.video-heading>p { color:#b8c5d8!important; }
.video-audio-note { display:inline-block; padding:10px 14px; border:1px solid #34517f; border-radius:12px; color:#dce8fa!important; background:#102849; font-size:14px!important; }
.video-stories { display:grid; gap:110px; }
.video-story { display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:90px; min-height:82vh; }
.video-story-reverse .video-copy { order:2; }
.video-story-reverse .feature-video { justify-self:end; }
.video-copy { max-width:440px; }
.video-copy span { display:inline-block; margin-bottom:24px; color:#8fb7ff; font-size:14px; font-weight:900; letter-spacing:.12em; }
.video-copy h3 { font-size:clamp(30px,4vw,48px); letter-spacing:-.035em; }
.video-copy p { color:#b8c5d8; font-size:18px; }
.feature-video { width:min(390px,100%); max-height:78vh; justify-self:center; border:8px solid #1c2a42; border-radius:42px; background:#08162c; box-shadow:0 30px 80px rgba(0,0,0,.35); }
.feature-video.is-active { border-color:#376fd6; box-shadow:0 30px 90px rgba(37,99,235,.28); }
.app-gallery { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(250px,290px); gap:20px; overflow-x:auto; padding:8px 2px 24px; scroll-snap-type:x mandatory; scrollbar-color:#9db8e7 #e5ebf4; }
.gallery-card { overflow:hidden; scroll-snap-align:start; border:1px solid var(--line); border-radius:24px; background:#fff; box-shadow:0 14px 38px rgba(16,38,74,.08); }
.gallery-card img { width:100%; height:500px; object-fit:cover; object-position:top; border-bottom:1px solid var(--line); }
.gallery-card div { padding:20px; }
.gallery-card p { margin:0; color:var(--muted); font-size:14px; }
.gallery-hint { margin:12px 0 0; color:var(--muted); font-size:14px; }
.safety-grid { display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:80px; }
.safety-list>div { display:flex; gap:14px; margin-top:22px; }
.safety-list span { display:grid; place-items:center; flex:0 0 30px; height:30px; color:#147d3f; background:#dcf7e6; border-radius:50%; font-weight:900; }
.safety-list p { color:var(--muted); }
.safety-list b { color:var(--ink); }
.detail-shot { width:min(390px,100%); max-height:720px; justify-self:center; object-fit:cover; object-position:top; border:8px solid #172036; border-radius:44px; box-shadow:var(--shadow); }
.section-soft { background:var(--soft); }
.guide-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.guide-grid article { padding:25px; border:1px solid var(--line); border-radius:20px; background:#fff; }
.guide-grid span { display:grid; place-items:center; width:38px; height:38px; margin-bottom:24px; color:var(--blue); background:var(--sky); border-radius:12px; font-weight:900; }
.guide-grid p { color:var(--muted); }
.notice { margin-top:28px; padding:18px 22px; border:1px solid #f2ce72; border-radius:16px; color:#654b14; background:#fff8e5; }
.faq-wrap { display:grid; grid-template-columns:.85fr 1.15fr; gap:75px; }
.faq details { padding:20px 0; border-bottom:1px solid var(--line); }
.faq summary { cursor:pointer; font-weight:800; }
.faq details p { margin:12px 0 0; color:var(--muted); }
.download { padding:30px 0 100px; }
.download-card { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:50px; border-radius:30px; color:#fff; background:linear-gradient(125deg,#0b2149,#164a9c); box-shadow:0 30px 80px rgba(8,33,78,.25); }
.download-card h2 { margin-bottom:10px; }
.download-card p:last-child { max-width:700px; color:#c9d9f3; }
.app-store-button { display:flex; flex:0 0 auto; flex-direction:column; padding:10px 22px; border:1px solid #6b89bd; border-radius:14px; color:#fff; background:#06142c; font-size:12px; line-height:1.2; text-align:left; text-decoration:none; transition:transform .2s ease,background .2s ease; }
.app-store-button b { font-size:21px; }
.app-store-button:hover,.app-store-button:focus-visible { background:#020817; transform:translateY(-2px); }
.footer { padding:70px 0 22px; color:#b7c3d6; background:#071326; }
.footer-grid { display:grid; grid-template-columns:1.5fr .7fr 1fr; gap:60px; }
.brand-footer { color:#fff; }
.footer h2 { color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:.08em; }
.footer a:not(.brand) { display:block; margin:8px 0; color:#b7c3d6; text-decoration:none; }
.footer-bottom { display:flex; justify-content:space-between; gap:30px; margin-top:50px; padding-top:20px; border-top:1px solid #25334a; font-size:13px; }
@media (max-width:900px) { .hero-grid,.safety-grid,.faq-wrap { grid-template-columns:1fr; } .hero-copy { text-align:center; } .lead { margin-inline:auto; } .hero-actions,.trust-list { justify-content:center; } .phone-stage { min-height:auto; } .feature-grid,.guide-grid { grid-template-columns:repeat(2,1fr); } .steps { grid-template-columns:1fr; } .step { display:grid; grid-template-columns:.8fr 1.2fr; } .step img { height:420px; } .safety-grid { gap:45px; } .video-story { grid-template-columns:1fr 1fr; gap:40px; } }
@media (max-width:700px) { .nav-toggle { display:block; } .nav-links { position:absolute; top:65px; left:18px; right:18px; display:none; flex-direction:column; align-items:stretch; padding:18px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:var(--shadow); } .nav-links.open { display:flex; } .hero { padding-top:55px; } h1 { font-size:48px; } .section { padding:76px 0; } .feature-grid,.guide-grid { grid-template-columns:1fr; } .step { display:block; } .step img { height:430px; } .video-stories { gap:75px; } .video-story { grid-template-columns:1fr; gap:24px; min-height:auto; } .video-story-reverse .video-copy { order:0; } .video-story-reverse .feature-video { justify-self:center; } .video-copy { text-align:center; margin-inline:auto; } .feature-video { max-height:72vh; } .download-card,.footer-bottom { align-items:flex-start; flex-direction:column; } .download-card { padding:32px 24px; } .footer-grid { grid-template-columns:1fr; gap:30px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }