:root { --navy:#17212f; --navy-soft:#223247; --red:#c9082a; --red-dark:#a60020; --gold:#ffd059; --gold-deep:#d7a828; --ink:#17212f; --muted:#657084; --paper:#fffdfb; --mist:#f7f7f8; --line:#e8e9ed; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Poppins,Arial,sans-serif; font-size:16px; line-height:1.55; }
a { color:inherit; text-decoration:none; }
.skip-link { position:absolute; left:-999px; top:0; z-index:100; padding:12px 16px; background:#fff; color:var(--navy); }.skip-link:focus { left:12px; top:12px; }
.topbar { min-height:82px; padding:12px clamp(20px,5vw,88px); display:flex; align-items:center; justify-content:space-between; background:var(--navy); color:white; position:sticky; top:0; z-index:20; box-shadow:0 8px 24px rgba(23,33,47,.12); }
.brand { display:inline-flex; align-items:center; }.brand img { width:146px; max-height:55px; object-fit:contain; }
.main-nav { display:flex; align-items:center; gap:28px; font-size:14px; font-weight:600; }.main-nav>a:not(.nav-cta) { color:#dce3eb; }.main-nav>a:not(.nav-cta):hover { color:var(--gold); }.nav-cta { background:var(--red); border-radius:11px; padding:11px 18px; color:#fff; }.nav-cta:hover { background:#e0143a; }
.menu-toggle { display:none; background:transparent; border:0; padding:8px; }.menu-toggle span:not(.sr-only) { display:block; width:24px; height:2px; margin:5px; background:white; }.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.hero { min-height:630px; overflow:hidden; padding:84px clamp(20px,9vw,154px) 68px; background:var(--navy); color:white; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:48px; position:relative; }.hero:after { content:""; position:absolute; width:570px; height:570px; background:radial-gradient(circle,rgba(201,8,42,.30),transparent 68%); right:-200px; top:-150px; pointer-events:none; }
.eyebrow { letter-spacing:.08em; text-transform:uppercase; font-size:11px; font-weight:700; color:var(--gold); margin:0 0 13px; display:flex; align-items:center; gap:8px; }.eyebrow span { width:25px; height:2px; display:inline-block; background:var(--red); }.eyebrow.dark { color:var(--red); }
h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(43px,5.2vw,73px); line-height:1.07; letter-spacing:-.045em; margin-bottom:23px; } h1 em { font-style:normal; color:var(--gold); } h2 { font-size:clamp(30px,3.5vw,49px); letter-spacing:-.04em; line-height:1.14; margin-bottom:17px; } h3 { font-size:19px; letter-spacing:-.02em; margin-bottom:8px; }
.hero-text { max-width:580px; color:#dce3eb; font-size:17px; }.hero-actions { display:flex; flex-wrap:wrap; gap:13px; margin-top:29px; }.button { border:0; min-height:50px; padding:13px 21px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; gap:10px; font-weight:700; font-size:14px; transition:transform .2s,background .2s,box-shadow .2s; cursor:pointer; }.button:hover { transform:translateY(-2px); }.button-primary { background:var(--red); color:#fff; box-shadow:0 10px 21px rgba(201,8,42,.22); }.button-primary:hover { background:#e1143b; }.button-ghost { border:1px solid rgba(255,255,255,.30); color:white; }.button-ghost:hover { background:rgba(255,255,255,.08); }.button-gold { background:var(--gold); color:var(--navy); box-shadow:0 8px 18px rgba(0,0,0,.14); }.button-gold:hover { background:#ffdc7a; }.hero-note { margin:17px 0 0; color:#9aa7b8; font-size:12px; }
.hero-visual { min-height:390px; position:relative; z-index:1; display:flex; align-items:center; justify-content:center; }.orb { position:absolute; border-radius:50%; }.orb-one { width:390px;height:390px; background:linear-gradient(140deg,rgba(255,208,89,.2),rgba(201,8,42,.22)); }.orb-two { width:318px;height:318px; border:1px solid rgba(255,255,255,.17); transform:rotate(30deg); border-radius:74px; }.phone-card { width:min(360px,87%); padding:23px 19px; border:1px solid rgba(255,255,255,.23); background:#fff; color:var(--ink); border-radius:29px; position:relative; transform:rotate(4deg); box-shadow:0 25px 48px rgba(0,0,0,.27); }.phone-top { font-size:12px; display:flex; align-items:center; gap:7px; font-weight:700; }.phone-top i { width:26px;height:7px;background:#e8e9ed;border-radius:9px;margin-left:auto; }.mini-logo { width:24px;height:24px;border-radius:7px;color:#fff;background:var(--red);display:inline-grid;place-items:center;font-size:19px; }.search-sample { margin:22px 0 17px; padding:11px 13px; border:1px solid #e1e4e8; border-radius:11px; color:#89909b; font-size:12px; }.sample-title { font-size:15px; font-weight:800; margin-bottom:10px; }.market-sample { padding:12px 0; display:grid; grid-template-columns:33px 1fr auto; gap:9px; align-items:center; border-top:1px solid #edf0f2; font-size:10px; }.market-sample strong,.market-sample small { display:block; }.market-sample small { color:#84909e; }.market-sample b { color:var(--red); text-align:right; font-size:10px; }.market-sample .muted { color:#7c8795; }.market-mark { width:31px;height:31px;border-radius:9px;display:grid;place-items:center;color:#fff;font-weight:800; }.market-mark.red { background:var(--red); }.market-mark.gold { background:var(--gold); color:var(--navy); }
.trust-strip { max-width:1120px; margin:-34px auto 0; position:relative; z-index:2; padding:20px 27px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; background:white; border-radius:17px; box-shadow:0 13px 35px rgba(23,33,47,.12); }.trust-strip>div { display:flex; gap:11px; align-items:center; padding:4px 12px; }.trust-strip>div+div { border-left:1px solid var(--line); }.trust-icon { width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#fff0f2;color:var(--red);font-weight:800; }.trust-strip p { margin:0; color:#757e8c; font-size:11px; }.trust-strip strong { color:var(--ink);font-size:12px; }
.section { max-width:1200px; margin:auto; padding:105px clamp(20px,6vw,88px); }.section-heading { max-width:610px; }.centered { text-align:center; margin:0 auto 52px; }.centered .eyebrow { justify-content:center; }.section-heading>p:last-child { color:var(--muted); }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }.step { padding:29px; border:1px solid var(--line); border-radius:18px; position:relative; background:#fff; }.step:hover { border-color:#efc3ca; box-shadow:0 16px 30px rgba(23,33,47,.06); }.step-number { position:absolute; right:22px; top:17px; color:#d9dde2; font-weight:800; font-size:13px; }.step-icon { display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:#fff0f2;color:var(--red);font-size:29px;font-weight:800;margin-bottom:24px; }.step p { color:var(--muted); font-size:14px; margin-bottom:0; }
.benefits-section { display:grid; grid-template-columns:.86fr 1.14fr; gap:82px; align-items:center; padding-top:44px; }.benefits-illustration { height:390px; background:linear-gradient(145deg,#f4f6f9,#e8edf4); border-radius:35px; position:relative; overflow:hidden; }.benefits-illustration:before { content:""; position:absolute;width:210px;height:210px;right:-45px;top:-45px;background:var(--red);opacity:.9;border-radius:50%; }.price-tag { position:absolute; width:180px;height:210px;left:53px;top:75px;background:var(--navy);border-radius:26px;transform:rotate(-11deg);display:grid;place-items:center;color:var(--gold);font-size:65px;font-weight:800;box-shadow:0 18px 27px rgba(23,33,47,.25); }.price-tag span { font-size:37px; color:white; margin-left:5px; }.benefit-tile { position:absolute;background:#fff;padding:14px 17px;border-radius:13px;box-shadow:0 10px 20px rgba(23,33,47,.12);display:grid;grid-template-columns:32px 1fr;column-gap:9px;min-width:173px; }.benefit-tile span { grid-row:span 2; font-size:24px; }.benefit-tile strong { font-size:12px; }.benefit-tile small { color:#778090; font-size:10px; }.tile-one { right:16px;top:102px; }.tile-two { right:55px;bottom:73px; }.benefits-copy>p:not(.eyebrow) { color:var(--muted); }.check-list { list-style:none; padding:0;margin:24px 0 0; }.check-list li { margin:13px 0; font-size:14px; }.check-list span { width:21px;height:21px;display:inline-grid;place-items:center;border-radius:50%;background:#eaf7ee;color:#238147;font-weight:800;font-size:12px;margin-right:8px; }
.partner-section { padding:95px max(20px,calc((100vw - 1024px)/2)); background:var(--navy); color:white; display:grid;grid-template-columns:.95fr 1.05fr;gap:65px;align-items:center; }.partner-copy>p:not(.eyebrow) { color:#cad3dd;max-width:510px;margin-bottom:26px; }.partner-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:14px; }.partner-grid article { min-height:178px;padding:23px;border:1px solid rgba(255,255,255,.13);border-radius:16px;background:rgba(255,255,255,.05); }.partner-grid h3 { font-size:16px;margin-top:18px;margin-bottom:6px; }.partner-grid p { color:#b8c3cf;font-size:12px;margin:0; }.partner-icon { color:var(--gold);font-size:25px;line-height:1; }
.download-section { display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:center; }.download-copy>p:not(.eyebrow) { color:var(--muted);max-width:650px; }.download-card { padding:16px;border:1px solid var(--line);border-radius:17px;display:flex;align-items:center;gap:13px;background:#fff;margin-top:25px; }.download-card>div:nth-child(2) { flex:1; }.download-card strong,.download-card small { display:block; }.download-card strong { font-size:14px; }.download-card small { color:#7b8493;font-size:11px; }.android-mark { display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#e7f5ec;color:#238147; }.button.disabled { background:#adb4bd;box-shadow:none;pointer-events:none; }.download-status { font-size:12px!important;margin:10px 0 0!important; }.install-guide { color:#687383;font-size:12px;margin-top:17px; }.install-guide summary { font-weight:700;color:var(--ink);cursor:pointer; }.install-guide ol { padding-left:20px;margin-bottom:0; }.ios-card { padding:40px 33px;background:linear-gradient(145deg,#f9fbfd,#ebf0f6);border-radius:26px;border:1px solid #e0e6ed; }.ios-icon { font-size:32px;color:var(--navy); }.ios-label { text-transform:uppercase;letter-spacing:.08em;font-size:10px;font-weight:700;color:var(--red);margin:17px 0 8px; }.ios-card h3 { font-size:28px;line-height:1.15;margin-bottom:12px; }.ios-card p:not(.ios-label) { font-size:13px;color:var(--muted); }.text-link { color:var(--red);font-size:13px;font-weight:800; }.text-link span { font-size:19px;margin-left:5px; }
.contact-section { max-width:1200px;margin:0 auto 82px;padding:54px clamp(20px,6vw,88px);background:var(--red);border-radius:25px;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:25px; }.contact-section .eyebrow { color:var(--gold); }.contact-section h2 { margin-bottom:11px; }.contact-section>div>p:not(.eyebrow) { max-width:580px;color:#ffe3e8;margin-bottom:0; }.contact-section .button-gold { white-space:nowrap; }
footer { padding:25px clamp(20px,5vw,88px) 31px;background:#101925;color:white;display:flex;align-items:center;gap:22px;flex-wrap:wrap; }.footer-brand img { width:112px; }.footer-brand+p { font-size:12px;color:var(--gold);font-weight:700;margin:0; }.footer-small { color:#8995a5;font-size:10px;margin:0 0 0 auto; }
@media (max-width:820px) { .topbar { min-height:70px; }.brand img { width:123px; }.menu-toggle { display:block; }.main-nav { position:absolute;left:0;right:0;top:100%;padding:16px 20px 22px;background:var(--navy);display:none;flex-direction:column;align-items:stretch;gap:10px;border-top:1px solid rgba(255,255,255,.13); }.main-nav.open { display:flex; }.main-nav a { padding:8px 3px; }.nav-cta { text-align:center;margin-top:6px; }.hero { min-height:auto;padding-top:63px;grid-template-columns:1fr;gap:25px; }.hero-visual { min-height:330px; }.trust-strip { margin:-15px 15px 0;grid-template-columns:1fr;padding:11px 14px; }.trust-strip>div+div { border-left:0;border-top:1px solid var(--line); }.section { padding-top:76px;padding-bottom:76px; }.steps,.benefits-section,.partner-section,.download-section { grid-template-columns:1fr; }.steps { gap:14px; }.step { padding:24px; }.benefits-section { gap:40px; }.benefits-illustration { height:330px; }.partner-section { padding:76px 20px;gap:37px; }.download-section { gap:28px; }.contact-section { margin:0 15px 55px;padding:36px 25px;display:block; }.contact-section .button { margin-top:25px; }.footer-small { width:100%;margin-left:0; }.download-card { align-items:flex-start;flex-wrap:wrap; }.download-card .button { width:100%; }.ios-card { padding:32px 26px; } }
@media (max-width:430px) { h1 { font-size:42px; }.hero { padding-left:21px;padding-right:21px; }.hero-visual { min-height:285px; }.phone-card { width:290px;padding:19px 15px; }.orb-one { width:320px;height:320px; }.orb-two { width:260px;height:260px; }.partner-grid { grid-template-columns:1fr; }.price-tag { left:32px;top:67px;width:150px;height:180px;font-size:52px; }.tile-one { right:8px;top:68px; }.tile-two { right:17px;bottom:35px; }.benefit-tile { min-width:150px;padding:11px; }.benefits-illustration { height:305px; } }