:root { --ink:#11202a; --muted:#53636d; --line:#dbe5e8; --blue:#096f92; --deep:#123c4a; --soft:#f1f7f8; --green:#168752; --orange:#c87205; --purple:#7150b8; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:#fff; font-family:Manrope,Arial,sans-serif; } main,footer { max-width:1160px; margin:auto; padding-inline:28px; }
.topbar { height:84px; display:flex; align-items:center; justify-content:space-between; }.brand { color:var(--ink); font-size:20px; font-weight:800; text-decoration:none; display:inline-flex; gap:10px; align-items:center; }.brand-mark { width:31px; height:31px; display:grid; place-items:center; color:white; background:var(--blue); border-radius:7px; }.topbar nav { display:flex; gap:24px; }.topbar nav a,.secondary-link { color:var(--blue); font-size:14px; font-weight:800; text-decoration:none; }
.hero { min-height:650px; display:grid; grid-template-columns:1.1fr .9fr; gap:76px; align-items:center; padding:76px 70px 76px 62px; background:var(--soft); border-radius:8px; overflow:hidden; }.eyebrow { margin:0 0 14px; color:var(--blue); font-size:13px; font-weight:800; letter-spacing:1px; } h1,h2,h3,p { letter-spacing:0; } h1 { max-width:680px; margin:0; font-size:54px; line-height:1.08; } .lead { max-width:620px; margin:24px 0 30px; color:var(--muted); font-size:20px; line-height:1.65; }.actions { display:flex; align-items:center; flex-wrap:wrap; gap:22px; }.store-button { display:inline-flex; align-items:center; justify-content:center; min-height:51px; padding:12px 21px; color:white; background:var(--blue); border-radius:6px; font-size:14px; font-weight:800; text-decoration:none; }.trust-row { display:flex; flex-wrap:wrap; gap:16px; margin-top:24px; color:var(--muted); font-size:14px; font-weight:700; }.trust-row span:first-child { color:var(--green); }.hero-media { width:min(100%,324px); justify-self:end; border:8px solid #14242e; border-radius:31px; overflow:hidden; box-shadow:0 28px 54px #12364738; background:white; }.hero-media img { width:100%; display:block; }
.intro-band { display:grid; grid-template-columns:1fr 1fr; gap:44px; padding:78px 10%; text-align:center; }.intro-band p,.intro-band strong { font-size:22px; line-height:1.5; }.intro-band p { margin:0; color:var(--muted); }.intro-band strong { color:var(--ink); }.features { padding:70px 0 98px; border-top:1px solid var(--line); }.section-heading { max-width:700px; }.section-heading h2,.split-copy h2,.scan-section h2,.security h2,.cta h2 { margin:0; font-size:38px; line-height:1.18; }.section-heading > p:last-child,.split-copy p,.scan-section p,.security p,.cta p { color:var(--muted); line-height:1.65; }.section-heading > p:last-child { margin:17px 0 0; font-size:17px; }.feature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:42px; }.feature-grid article { min-height:220px; padding:26px; border:1px solid var(--line); border-radius:8px; }.feature-icon { width:43px; height:43px; display:grid; place-items:center; border-radius:8px; font-size:20px; font-weight:800; }.blue { color:#096fbe;background:#e5f1ff; }.green { color:var(--green);background:#e4f6eb; }.orange { color:var(--orange);background:#fff1dc; }.purple { color:var(--purple);background:#eee7ff; }.feature-grid h3 { margin:17px 0 8px; font-size:19px; }.feature-grid p { margin:0; color:var(--muted); font-size:15px; line-height:1.6; }
.app-guide { margin:0; padding:82px 7% 72px; color:var(--ink); background:#e7f5ef; border-radius:12px; overflow:hidden; }.app-guide .section-heading { max-width:760px; }.app-guide .eyebrow { color:#16775a; }.app-guide .section-heading h2 { color:#143d34; }.app-guide .section-heading > p:last-child { color:#4c685f; }.app-guide-grid { display:grid; gap:52px; margin:64px 0 54px; }.app-guide-card { display:grid; grid-template-columns:minmax(245px,.72fr) minmax(0,1fr); gap:76px; align-items:center; min-height:520px; padding:40px 8%; background:#f7fcfa; border:1px solid #cbe3d9; border-radius:16px; box-shadow:0 18px 44px #174c3e12; }.app-guide-card:nth-child(even) { grid-template-columns:minmax(0,1fr) minmax(245px,.72fr); }.app-guide-card:nth-child(even) figure { order:2; transform:translateY(30px); }.app-guide-card:nth-child(odd) figure { transform:translateY(-18px); }.app-guide-card figure { width:min(100%,292px); max-height:520px; justify-self:center; margin:0; overflow:hidden; background:white; border:7px solid #172832; border-radius:29px; box-shadow:0 22px 44px #123e3233; }.app-guide-card figure img { width:100%; display:block; object-fit:cover; object-position:top center; }.app-guide-copy { max-width:520px; }.card-number { display:inline-grid; width:36px; height:36px; place-items:center; color:white; background:#168752; border-radius:50%; font-size:12px; font-weight:800; }.card-kicker { margin:18px 0 8px!important; color:#168752!important; font-size:12px!important; font-weight:800; letter-spacing:1px; }.app-guide-copy h3 { margin:0 0 15px; color:#173f35; font-size:31px; line-height:1.18; }.app-guide-copy > p:not(.card-kicker) { margin:0; color:#52675f; font-size:17px; line-height:1.7; }.app-guide-copy ul { padding:0; margin:20px 0 0; list-style:none; color:#234e42; font-size:15px; font-weight:700; line-height:2; }.app-guide-copy li::before { content:'✓'; margin-right:10px; color:#168752; }.more-functions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }.more-functions span { padding:11px 15px; color:#0f493e; background:white; border:1px solid #c8e5d8; border-radius:999px; font-size:13px; font-weight:800; }.estimate-note { max-width:760px; margin:22px auto 0; color:#5b7069; font-size:13px; line-height:1.55; text-align:center; }
.split-panel { display:grid; grid-template-columns:.76fr 1fr; gap:90px; align-items:center; padding:82px 9%; background:#edf6f8; border-radius:8px; }.screen-card { width:min(100%,286px); justify-self:center; overflow:hidden; border:7px solid #172832; border-radius:29px; box-shadow:0 20px 42px #1236472b; }.screen-card img,.scan-image img { width:100%; display:block; }.split-copy p { margin:16px 0; }.split-copy ul { padding:0; list-style:none; color:var(--ink); font-size:14px; font-weight:700; line-height:2.15; }.split-copy li::before { content:'✓'; margin-right:10px; color:var(--green); }.scan-section { display:grid; grid-template-columns:1fr .75fr; gap:86px; align-items:center; padding:96px 10%; }.scan-section p { max-width:525px; margin:17px 0 22px; }.scan-image { width:min(100%,288px); justify-self:center; overflow:hidden; border:7px solid #172832; border-radius:29px; box-shadow:0 18px 38px #12364724; }.security { display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:center; padding:34px 40px; border:1px solid #b9dfe0; border-radius:8px; background:#f4fbfb; }.security-icon { width:48px; height:48px; display:grid; place-items:center; color:white; background:var(--green); border-radius:50%; font-weight:800; }.security h2 { font-size:22px; }.security p { max-width:700px; margin:7px 0 0; font-size:14px; }.cta { padding:80px 12%; text-align:center; color:white; background:var(--deep); border-radius:8px; margin:82px 0 36px; }.cta .eyebrow { color:#8de0e4; }.cta h2 { max-width:750px; margin-inline:auto; }.cta p { max-width:590px; margin:16px auto 0; color:#d6e7ea; }.cta .store-button { margin-top:26px; color:var(--deep); background:white; }.disabled { cursor:default; } footer { display:flex; justify-content:space-between; padding-bottom:30px; color:var(--muted); font-size:13px; }
@media (max-width:900px) { .app-guide-card,.app-guide-card:nth-child(even) { gap:42px; padding:38px 5%; } }
@media (max-width:800px) { main,footer { padding-inline:18px; }.topbar nav { display:none; }.hero { grid-template-columns:1fr; gap:42px; min-height:0; padding:50px 27px; }.hero-media { justify-self:center; }.intro-band { grid-template-columns:1fr; gap:22px; padding:60px 8%; }.feature-grid { grid-template-columns:1fr 1fr; }.app-guide { padding:56px 28px 52px; }.split-panel,.scan-section { grid-template-columns:1fr; gap:44px; padding:60px 26px; }.split-copy { order:-1; }.security { grid-template-columns:auto 1fr; padding:28px; }.security .secondary-link { grid-column:2; }.cta { padding:60px 25px; margin-top:60px; } h1 { font-size:38px; }.section-heading h2,.split-copy h2,.scan-section h2,.cta h2 { font-size:29px; } }
@media (max-width:650px) { .app-guide { padding:58px 20px 50px; }.app-guide-grid { gap:28px; margin-top:46px; }.app-guide-card,.app-guide-card:nth-child(even) { grid-template-columns:1fr; gap:32px; min-height:0; padding:32px 23px 38px; }.app-guide-card:nth-child(even) figure { order:0; }.app-guide-card:nth-child(n) figure { transform:none; max-height:none; }.app-guide-copy h3 { font-size:26px; }.app-guide-copy > p:not(.card-kicker) { font-size:16px; } }
@media (max-width:430px) { .feature-grid { grid-template-columns:1fr; }.intro-band p,.intro-band strong { font-size:18px; } footer { flex-direction:column; gap:6px; }.trust-row { display:grid; gap:8px; } }