:root { --background:#f7faff; --surface:#fff; --border:#dce6f4; --text:#101827; --muted:#5e6c80; --accent:#0b5be7; --dark:#102248; font-family:Inter,"Segoe UI",Arial,sans-serif; color:var(--text); background:var(--background); } * { box-sizing:border-box; } body { margin:0; } .page-shell { min-height:100vh; overflow:hidden; }
.topbar { align-items:center; background:rgba(255,255,255,.88); border-bottom:1px solid var(--border); display:flex; justify-content:space-between; min-height:4.6rem; padding:0 6vw; position:relative; z-index:2; }.brand { color:#101827; font-size:1.3rem; font-weight:800; letter-spacing:-.04em; text-decoration:none; }.brand span,h1 em,.button { color:var(--accent); }.status { align-items:center; color:var(--muted); display:flex; font-size:.78rem; font-weight:700; gap:.48rem; }.status i { background:#20a269; border-radius:50%; box-shadow:0 0 0 4px #ddf8eb; display:inline-block; height:.45rem; width:.45rem; }
.hero { align-items:center; display:grid; gap:clamp(2rem,6vw,7rem); grid-template-columns:minmax(0,1fr) minmax(300px,.9fr); margin:auto; max-width:78rem; min-height:37rem; padding:clamp(4rem,9vh,7rem) 2rem 4rem; position:relative; }.eyebrow { color:var(--accent); font-size:.73rem; font-weight:800; letter-spacing:.12em; margin:0 0 1.1rem; text-transform:uppercase; } h1 { font-size:clamp(2.75rem,5vw,4.8rem); letter-spacing:-.065em; line-height:.98; margin:0; } h1 em { font-style:normal; }.lead { color:var(--muted); font-size:1.04rem; line-height:1.68; margin:1.65rem 0 1.7rem; max-width:38rem; }.hero-actions { align-items:center; display:flex; flex-wrap:wrap; gap:1rem 1.35rem; }.hero-actions p { color:var(--muted); font-size:.81rem; line-height:1.45; margin:0; max-width:13rem; }.trust-line { color:#687992; font-size:.76rem; font-weight:650; margin:1rem 0 0; }.trust-line span { color:#169961; font-size:.9rem; margin-right:.22rem; }.button { align-items:center; background:var(--accent); border-radius:.58rem; box-shadow:0 12px 22px rgba(11,91,231,.18); color:#fff; display:inline-flex; font-size:.92rem; font-weight:800; gap:.5rem; padding:.85rem 1.05rem; text-decoration:none; }.button span { font-size:1.2rem; line-height:.7; }.button-light { background:#fff; box-shadow:none; color:var(--accent); }
.product-visual { height:25rem; position:relative; }.topo { fill:none; height:126%; left:-18%; opacity:.55; position:absolute; stroke:#bdd5fa; stroke-width:1.4; top:-12%; width:136%; }.dashboard-card { background:#fff; border:1px solid #d7e3f4; border-radius:1rem; box-shadow:0 24px 50px rgba(27,62,120,.16); left:0; padding:1.1rem; position:absolute; top:1.8rem; transform:rotate(-2deg); width:80%; z-index:1; }.dashboard-head { border-bottom:1px solid #edf2f8; color:#64748b; display:flex; font-size:.6rem; font-weight:800; justify-content:space-between; letter-spacing:.09em; padding-bottom:.85rem; }.live-dot { color:#169961; }.dashboard-title { align-items:center; display:flex; justify-content:space-between; padding:1rem 0 .65rem; }.dashboard-title small,.dashboard-stats small,.phone-card small { color:#75839a; display:block; font-size:.61rem; font-weight:700; }.dashboard-title strong { display:block; font-size:1.55rem; letter-spacing:-.05em; margin-top:.25rem; }.dashboard-title strong small { display:inline; font-size:.68rem; letter-spacing:0; }.avatar-stack { color:#69a5f7; font-size:.8rem; letter-spacing:-.25rem; }.dashboard-map { background:#edf5ff; border-radius:.65rem; overflow:hidden; }.dashboard-map svg { display:block; width:100%; }.map-land { fill:#c6ddfd; }.map-route { fill:none; stroke:#0b5be7; stroke-dasharray:6 6; stroke-linecap:round; stroke-width:4; }.map-pin { fill:#fff; stroke:#0b5be7; stroke-width:4; }.dashboard-stats { display:grid; gap:.6rem; grid-template-columns:repeat(3,1fr); padding:.9rem .1rem .05rem; }.dashboard-stats strong { font-size:.9rem; }.phone-card { background:#102248; border:5px solid #fff; border-radius:1.5rem; bottom:0; box-shadow:0 20px 38px rgba(16,34,72,.3); color:#fff; padding:1.75rem 1.1rem 1rem; position:absolute; right:0; transform:rotate(5deg); width:43%; z-index:2; }.phone-speaker { background:#52627f; border-radius:99px; height:.22rem; left:50%; position:absolute; top:.65rem; transform:translateX(-50%); width:2rem; }.phone-card small { color:#a8c8ff; }.phone-card strong { display:block; font-size:1.05rem; margin:.25rem 0 .8rem; }.phone-route { border-left:2px dashed #76adff; height:4.8rem; margin:0 .7rem; position:relative; }.phone-route span,.phone-route i,.phone-route b { background:#fff; border:2px solid #0b5be7; border-radius:50%; height:.54rem; left:-.37rem; position:absolute; width:.54rem; }.phone-route i { left:1.5rem; top:2rem; }.phone-route b { background:#0b5be7; bottom:0; left:-.37rem; }.phone-meta { border-top:1px solid #31466f; display:flex; font-size:.63rem; font-weight:700; justify-content:space-between; margin-top:.3rem; padding-top:.7rem; }.phone-check { background:#183664; border-radius:.4rem; color:#a9f0cb; font-size:.58rem; font-weight:700; margin-top:.7rem; padding:.45rem; text-align:center; }
.features { display:grid; gap:1px; grid-template-columns:repeat(3,1fr); margin:0 auto; max-width:78rem; padding:0 2rem; }.features article { background:var(--surface); border:1px solid var(--border); min-height:12rem; padding:1.45rem; }.feature-number { color:var(--accent); font-size:.7rem; font-weight:800; letter-spacing:.1em; }.features h2 { font-size:1.05rem; letter-spacing:-.02em; margin:1.1rem 0 .55rem; }.features p,.pilot p { color:var(--muted); font-size:.9rem; line-height:1.6; margin:0; }
.pilot { align-items:center; background:var(--dark); color:#fff; display:grid; gap:2rem; grid-template-columns:1.3fr .7fr; margin:5rem 0 0; padding:4.5rem max(6vw,2rem); }.pilot .eyebrow { color:#92bbff; }.pilot h2 { font-size:clamp(1.7rem,3vw,2.55rem); letter-spacing:-.045em; margin:.2rem 0 1rem; }.pilot p { color:#c1d1e9; max-width:41rem; }.pilot-action { border-left:1px solid #38517a; padding-left:2rem; }.pilot-action p { margin-bottom:1.1rem; }.pilot-action .button { color:var(--accent); }
footer { align-items:center; color:#8797ad; display:flex; flex-wrap:wrap; font-size:.76rem; gap:.7rem 1.25rem; justify-content:flex-end; padding:1.4rem 6vw; } footer span { margin-right:auto; } footer a { color:inherit; text-decoration:none; } footer a:hover { color:var(--accent); }.legal-page { margin:0 auto; max-width:45rem; min-height:100vh; padding:clamp(3rem,12vh,8rem) 2rem; }.legal-page .brand { display:inline-block; margin-bottom:5rem; }.legal-page h1 { font-size:clamp(2.6rem,7vw,4.5rem); }.legal-page > p:not(.eyebrow) { color:var(--muted); font-size:1.05rem; margin:1.5rem 0 2rem; }
@media (max-width:760px) { .topbar { padding:0 1.5rem; }.status { font-size:.67rem; }.hero { grid-template-columns:1fr; padding:3.7rem 1.5rem 2.5rem; }.product-visual { height:20rem; margin:0 .3rem; }.dashboard-card { width:82%; }.features { grid-template-columns:1fr; padding:0 1.5rem; }.features article { min-height:auto; }.pilot { grid-template-columns:1fr; margin-top:3.5rem; padding:3.5rem 1.5rem; }.pilot-action { border-left:0; border-top:1px solid #38517a; padding:1.5rem 0 0; } footer { justify-content:flex-start; padding:1.4rem 1.5rem; } footer span { flex-basis:100%; } }