@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');
:root { --ink:#071b3a; --navy:#071b38; --blue:#087ff5; --teal:#39d1c3; --cream:#faf8f4; --muted:#62708a; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:"DM Sans","Avenir Next",Avenir,"Segoe UI",sans-serif; font-optical-sizing:auto; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.site-header { height:96px; max-width:1440px; margin:auto; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:20; }
.brand { display:flex; align-items:center; gap:12px; font-family:"Manrope","Avenir Next",sans-serif; font-size:29px; font-weight:800; letter-spacing:-1.2px; }
.brand img { width:42px; height:44px; object-fit:cover; object-position:center; border-radius:10px; }
nav { display:flex; gap:48px; align-items:center; font-size:15px; font-weight:600; }
nav a,.footer-links a { transition:color .2s ease; }
nav a:hover,.footer-links a:hover { color:var(--blue); }
.header-cta { border:1.5px solid var(--ink); padding:14px 24px; border-radius:12px; font-size:15px; font-weight:700; transition:.2s; }
.header-cta:hover { color:white; background:var(--ink); transform:translateY(-2px); }
.hero { min-height:790px; max-width:1440px; margin:auto; padding:8px 4vw 34px 5vw; display:grid; grid-template-columns:44% 56%; align-items:center; gap:36px; overflow:hidden; }
.hero-copy { padding:30px 0; position:relative; z-index:2; }
.eyebrow,.kicker { color:#1874d1; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.16em; }
.eyebrow { display:flex; align-items:center; gap:10px; margin-bottom:26px; }
.eyebrow span { width:28px; height:2px; background:linear-gradient(90deg,var(--blue),var(--teal)); }
h1 { font-family:"Manrope","Avenir Next",sans-serif; font-size:clamp(48px,5.25vw,78px); font-weight:700; line-height:.99; letter-spacing:-.055em; margin:0; max-width:680px; }
h1 em { display:block; font-style:normal; color:#173052; }
.hero-copy>p { color:var(--muted); font-size:19px; line-height:1.65; max-width:520px; margin:28px 0 30px; }
.primary-button { width:max-content; min-width:240px; padding:18px 24px; background:linear-gradient(135deg,#1898ff,#0874ef); color:white; font-weight:750; border-radius:12px; box-shadow:0 14px 32px rgba(4,116,239,.22); display:flex; justify-content:center; gap:28px; transition:.25s ease; }
.primary-button:hover { transform:translateY(-3px); box-shadow:0 18px 36px rgba(4,116,239,.3); }
.store-buttons { display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; }
.store-badge { width:auto; height:56px; border-radius:9px; display:block; overflow:hidden; transition:transform .2s ease,filter .2s ease; }
.store-badge:hover { transform:translateY(-2px); filter:brightness(1.08); }
.store-badge img { width:auto; height:100%; object-fit:contain; }
.trust-line { display:flex; gap:18px; color:#7b8799; font-size:12px; margin-top:18px; }
.hero-visual { min-height:690px; align-self:stretch; position:relative; background:radial-gradient(circle at 55% 55%,#0a4c7d 0,#061d3a 35%,#04162e 72%); border-radius:64px 0 0 64px; overflow:hidden; }
.glow { position:absolute; width:300px; height:300px; filter:blur(90px); opacity:.36; border-radius:50%; }
.glow-one { background:#078cff; right:3%; top:27%; }.glow-two { background:#15d6c1; left:20%; bottom:5%; }
.phone { background:#0c1420; padding:9px; border:1px solid rgba(255,255,255,.28); border-radius:46px; box-shadow:0 34px 70px rgba(0,0,0,.38); overflow:hidden; }
.phone img { width:100%; height:100%; object-fit:cover; border-radius:38px; }
.hero-phone { width:337px; height:657px; position:absolute; z-index:3; right:20%; top:40px; transform:rotate(-1.7deg); }
.float-card { position:absolute; z-index:4; color:#f6fbff; border:1px solid rgba(255,255,255,.17); background:rgba(10,34,59,.78); backdrop-filter:blur(16px); border-radius:20px; padding:17px 19px; display:flex; gap:12px; align-items:center; box-shadow:0 14px 35px rgba(0,0,0,.2); }
.float-card b { color:#3de2de; font-size:21px; }.float-card span { font-size:14px; font-weight:650; line-height:1.35; }.float-growth { right:3%; top:25%; }.float-budget { left:13%; bottom:34%; }.float-private { right:4%; bottom:15%; }
.proof-strip { max-width:1280px; margin:6px auto 0; background:white; border:1px solid #e8e9ea; border-radius:20px; display:grid; grid-template-columns:repeat(3,1fr); padding:25px 20px; box-shadow:0 14px 50px rgba(9,28,55,.05); }
.proof-strip div { display:flex; flex-direction:column; align-items:center; gap:5px; border-right:1px solid #e7e9ec; }.proof-strip div:last-child { border:0; }.proof-strip strong { font-size:20px; }.proof-strip span { color:var(--muted); font-size:13px; }
.section { max-width:1280px; margin:0 auto; padding:130px 30px; }
.section-heading { max-width:690px; }.section-heading h2,.mode-copy h2,.download h2 { font-family:"Manrope","Avenir Next",sans-serif; font-size:clamp(42px,5vw,68px); font-weight:700; line-height:1.04; letter-spacing:-.055em; margin:20px 0 24px; }.section-heading p,.mode-copy>p,.download-copy>p { color:var(--muted); font-size:17px; line-height:1.7; }
.features .section-heading { max-width:900px; margin:0 auto; text-align:center; }
.features .section-heading p { max-width:760px; margin-left:auto; margin-right:auto; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:64px; }
.feature-card { background:#fff; border:1px solid #e9e8e5; border-radius:22px; padding:30px; min-height:242px; transition:.25s; }.feature-card:hover { transform:translateY(-5px); box-shadow:0 18px 45px rgba(8,31,59,.07); }.feature-icon { width:44px; height:44px; background:#eaf5ff; color:#0877e9; border-radius:12px; display:grid; place-items:center; font-weight:800; font-size:20px; }.feature-card h3 { font-size:20px; margin:23px 0 10px; }.feature-card p { color:var(--muted); line-height:1.6; font-size:14px; margin:0; }
.mode-section { max-width:none; padding:110px max(6vw,30px); background:var(--navy); color:white; display:grid; grid-template-columns:1fr 1fr; align-items:center; overflow:hidden; }.kicker.light { color:#58ddd0; }.mode-copy { max-width:570px; margin-left:auto; padding-right:50px; }.mode-copy h2 span { color:#62dcd0; }.mode-copy>p { color:#acb9cc; }.mode-copy ul { list-style:none; margin:35px 0 0; padding:0; display:grid; gap:14px; }.mode-copy li { border-top:1px solid rgba(255,255,255,.13); padding:18px 0 3px; display:grid; grid-template-columns:145px 1fr; gap:20px; }.mode-copy li b { color:#fff; }.mode-copy li span { color:#99a9bf; font-size:14px; }
.mode-phones { position:relative; min-height:640px; }.mode-phones .phone { position:absolute; width:290px; height:602px; top:20px; }.phone-back { left:8%; transform:rotate(-7deg); opacity:.82; }.phone-front { left:42%; transform:rotate(5deg); z-index:2; }
.centered { margin:auto; text-align:center; }.how { position:relative; }.how .section-heading { max-width:780px; }.steps { margin-top:65px; display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }.steps article { position:relative; text-align:center; }.step-number { position:absolute; z-index:2; top:15px; left:22px; width:44px; height:44px; display:grid; place-items:center; background:white; border-radius:50%; font-weight:800; color:#1179e1; box-shadow:0 8px 25px rgba(8,31,59,.12); }.mini-screen { width:190px; height:340px; overflow:hidden; border-radius:28px; margin:auto; box-shadow:0 22px 45px rgba(7,27,58,.15); border:5px solid #111a29; }.mini-screen img { width:100%; height:100%; object-fit:cover; }.steps h3 { font-size:22px; margin:28px 0 9px; }.steps p { color:var(--muted); max-width:300px; margin:auto; line-height:1.55; font-size:14px; }
.download { max-width:1180px; background:linear-gradient(135deg,#08264a,#061a34); border-radius:38px; min-height:520px; padding:70px 80px; margin-bottom:120px; color:white; display:grid; grid-template-columns:1.2fr .8fr; position:relative; overflow:hidden; }.download:after { content:""; position:absolute; right:5%; bottom:-20%; width:420px; height:420px; background:#087ff5; opacity:.22; filter:blur(70px); border-radius:50%; }.download-copy { position:relative; z-index:2; }.download h2 { margin-top:18px; }.download-copy>p { color:#aebcd0; max-width:550px; }.download .store-buttons { margin-top:28px; }.download small { display:block; color:#8497af; margin-top:17px; }.download-phone { position:absolute; width:245px; height:505px; right:11%; top:48px; z-index:2; transform:rotate(5deg); }
footer { max-width:1280px; margin:auto; padding:20px 30px 38px; }.footer-top { padding:48px 0; border-top:1px solid #dde0e3; display:grid; grid-template-columns:1fr 1fr 1.5fr; gap:30px; align-items:center; }.footer-top p { color:var(--muted); font-size:14px; }.footer-links { display:flex; justify-content:flex-end; gap:24px; font-size:13px; font-weight:600; }.footer-bottom { border-top:1px solid #e3e4e5; padding-top:24px; display:flex; justify-content:space-between; color:#8992a0; font-size:12px; }
.site-header { animation:header-in .7s cubic-bezier(.22,1,.36,1) both; }
.hero-copy > * { animation:hero-in .8s cubic-bezier(.22,1,.36,1) both; }
.hero-copy > :nth-child(2) { animation-delay:.08s; }.hero-copy > :nth-child(3) { animation-delay:.15s; }.hero-copy > :nth-child(4) { animation-delay:.22s; }.hero-copy > :nth-child(5) { animation-delay:.29s; }.hero-copy > :nth-child(6) { animation-delay:.36s; }
.hero-visual { animation:visual-in 1s .12s cubic-bezier(.22,1,.36,1) both; }
.hero-phone { animation:phone-float 6s 1.1s ease-in-out infinite; }
.float-card { animation:soft-float 5s 1.2s ease-in-out infinite; }
.float-budget { animation-delay:1.7s; }.float-private { animation-delay:2.15s; }
.motion-ready .section-heading,.motion-ready .feature-card,.motion-ready .mode-copy,.motion-ready .mode-phones,.motion-ready .steps article,.motion-ready .download-copy,.motion-ready .download-phone,.motion-ready .proof-strip>div,.motion-ready .legal-main>*,.motion-ready footer { opacity:0; transform:translateY(26px); transition:opacity .72s cubic-bezier(.22,1,.36,1),transform .72s cubic-bezier(.22,1,.36,1); }
.motion-ready .is-visible,.motion-ready .proof-strip>div.is-visible,.motion-ready .legal-main>*.is-visible { opacity:1; transform:translateY(0); }
.motion-ready .feature-card:nth-child(2),.motion-ready .steps article:nth-child(2),.motion-ready .proof-strip>div:nth-child(2) { transition-delay:.09s; }
.motion-ready .feature-card:nth-child(3),.motion-ready .steps article:nth-child(3),.motion-ready .proof-strip>div:nth-child(3) { transition-delay:.18s; }
.motion-ready .feature-card:nth-child(5) { transition-delay:.09s; }.motion-ready .feature-card:nth-child(6) { transition-delay:.18s; }
.motion-ready .how .section-heading,.motion-ready .how .steps article { opacity:1; transform:none; }
@keyframes header-in { from { opacity:0; transform:translateY(-14px); } }
@keyframes hero-in { from { opacity:0; transform:translateY(22px); } }
@keyframes visual-in { from { opacity:0; transform:translateX(30px) scale(.985); } }
@keyframes phone-float { 0%,100% { transform:rotate(-1.7deg) translateY(0); } 50% { transform:rotate(-.9deg) translateY(-8px); } }
@keyframes soft-float { 0%,100% { translate:0 0; } 50% { translate:0 -6px; } }
.legal-shell { min-height:100vh; background:#f9f7f3; }.legal-header { background:#071b38; color:white; }.legal-header .site-header { height:84px; }.legal-header .brand img { background:#071b38; }.legal-header .header-cta { border-color:rgba(255,255,255,.5); }.legal-main { max-width:860px; margin:auto; padding:82px 28px 120px; }.legal-main .back { display:inline-flex; gap:8px; color:#297bd0; font-weight:700; font-size:14px; margin-bottom:32px; }.legal-main h1 { font-size:clamp(45px,6vw,70px); }.legal-meta { color:#7b8798; margin:18px 0 52px; }.legal-content { background:white; border:1px solid #e8e7e4; border-radius:25px; padding:48px; box-shadow:0 20px 55px rgba(8,30,55,.05); }.legal-content section+section { border-top:1px solid #edf0f2; margin-top:32px; padding-top:28px; }.legal-content h2 { font-size:21px; margin:0 0 12px; }.legal-content p,.legal-content li { color:#526079; line-height:1.75; font-size:15px; }.legal-content ul { padding-left:20px; }
@media(max-width:980px){ nav { gap:24px; }.hero { grid-template-columns:1fr; padding:30px 30px 70px; }.hero-copy { max-width:720px; }.hero-visual { min-height:650px; border-radius:40px; }.feature-grid { grid-template-columns:repeat(2,1fr); }.mode-section { grid-template-columns:1fr; }.mode-copy { margin:0 auto; padding:0; }.mode-phones { width:650px; margin:40px auto -80px; }.download { margin-left:24px; margin-right:24px; padding-left:55px; }.footer-top { grid-template-columns:1fr 1fr; }.footer-links { grid-column:1/-1; justify-content:flex-start; }}
@media(max-width:680px){ .site-header { height:76px; padding:0 20px; }.brand { font-size:23px; }.brand img { width:35px; height:37px; } nav { display:none; }.header-cta { padding:11px 15px; font-size:13px; }.hero { padding:35px 18px 60px; gap:36px; }.eyebrow { margin-bottom:20px; }.hero-copy { text-align:left; }.hero-copy>p { font-size:16px; }.primary-button { width:100%; }.store-buttons { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.store-badge { min-width:0; padding:7px 9px; gap:8px; }.store-badge strong { font-size:15px; }.store-badge small { font-size:7px; }.trust-line { justify-content:space-between; gap:8px; font-size:10px; }.hero-visual { min-height:535px; border-radius:30px; }.hero-phone { width:255px; height:497px; right:13%; top:20px; }.float-card { padding:10px 12px; border-radius:14px; }.float-card b { font-size:15px; }.float-card span { font-size:11px; }.float-growth { right:2%; }.float-budget { left:4%; bottom:23%; }.float-private { right:1%; bottom:6%; }.proof-strip { margin:0 18px; grid-template-columns:1fr; padding:10px 22px; }.proof-strip div { border-right:0; border-bottom:1px solid #e7e9ec; padding:15px; }.proof-strip div:last-child { border:0; }.section { padding:90px 22px; }.section-heading h2,.mode-copy h2,.download h2 { font-size:40px; }.feature-grid { grid-template-columns:1fr; margin-top:42px; }.feature-card { min-height:auto; }.mode-section { padding:85px 22px 0; }.mode-copy li { grid-template-columns:1fr; gap:6px; }.mode-phones { width:100%; min-height:510px; margin:38px 0 -20px; }.mode-phones .phone { width:220px; height:455px; }.phone-back { left:2%; }.phone-front { left:35%; }.steps { grid-template-columns:1fr; gap:70px; }.download { margin:0 14px 80px; padding:58px 24px 420px; min-height:0; grid-template-columns:1fr; border-radius:28px; }.download-phone { width:205px; height:420px; right:50%; transform:translateX(50%) rotate(4deg); top:auto; bottom:-48px; }.footer-top { grid-template-columns:1fr; }.footer-links { display:grid; grid-template-columns:1fr 1fr; gap:17px; }.footer-bottom { flex-direction:column; gap:8px; }.legal-main { padding-top:55px; }.legal-content { padding:28px 22px; }}
@media(max-width:680px){ .store-buttons { display:flex; }.store-badge { width:auto; min-width:0; height:48px; padding:0; } }
@media(prefers-reduced-motion:reduce){ html { scroll-behavior:auto; } * { animation:none!important; transition:none!important; } }