:root { --ink: #1A2235; --muted: #4B5670; --faint: #6B7A99; --line: #E3E7EF; --bg: #F3F5F9; --navy: #0F1B33; --navy2: #1E2D4F; --blue: #1E5EFF; --blue-lo: #1446C8; --gold: #D4A853; --gold-hi: #F2D27A; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif; color: var(--ink); background: #fff; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--blue); text-decoration: none; } a:hover { text-decoration: underline; }
.wrap { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.top { position: sticky; top: 0; z-index: 10; background: rgba(15, 27, 51, .92); backdrop-filter: saturate(180%) blur(8px); color: #C7D0E2; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; letter-spacing: .12em; font-size: 15px; } .brand img { width: 30px; height: 30px; border-radius: 8px; } .brand small { display: block; font-weight: 500; letter-spacing: .1em; font-size: 10px; color: #8A97B3; margin-top: -1px; }
.top nav { display: flex; gap: 22px; align-items: center; font-size: 14px; } .top nav a { color: #C7D0E2; } .top nav a:hover { color: #fff; text-decoration: none; }
.btn { display: inline-block; padding: 11px 18px; border-radius: 10px; background: var(--blue); color: #fff !important; font-weight: 600; font-size: 14.5px; border: 0; cursor: pointer; font-family: inherit; box-shadow: 0 1px 2px rgba(16, 24, 40, .2), inset 0 1px 0 rgba(255, 255, 255, .18); } .btn:hover { background: var(--blue-lo); text-decoration: none !important; }
.btn.ghost { background: transparent; border: 1px solid #3B4D75; color: #E6ECF8 !important; box-shadow: none; } .btn.ghost:hover { background: rgba(255, 255, 255, .06); }
.btn.light { background: #fff; color: var(--navy) !important; } .btn.light:hover { background: #EEF2FA; }
.hero { background: radial-gradient(1200px 600px at 20% -10%, #1E2D4F 0%, #0F1B33 45%, #080E1D 100%); color: #fff; padding: 84px 0 72px; }
.hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hero h1 { font-size: 46px; line-height: 1.08; letter-spacing: -.02em; margin: 0 0 16px; } .hero h1 em { font-style: normal; color: var(--gold-hi); }
.hero p.lead { font-size: 18.5px; color: #C7D0E2; margin: 0 0 26px; max-width: 540px; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .hero .cta small { color: #8A97B3; font-size: 13px; width: 100%; }
.shot { background: linear-gradient(180deg, #FFFFFF, #F4F6FA); border: 1px solid #CFD7E4; border-radius: 16px; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); padding: 16px; color: var(--ink); }
.shot .bar { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--faint); margin-bottom: 10px; } .shot .bar b { color: var(--ink); font-size: 13px; }
.shot .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; } .shot .tile { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; } .shot .tile b { display: block; font-size: 18px; } .shot .tile span { font-size: 11px; color: var(--faint); } .shot .tile.ok { border-color: #BFE3CE; background: #F1FAF5; } .shot .tile.ok b { color: #1B7A52; }
.shot .rows { display: grid; gap: 6px; } .shot .row { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; } .shot .row time { color: var(--faint); font-size: 11.5px; } .shot .row b { display: block; } .shot .row small { color: var(--faint); } .shot .pill { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #E7EEFF; color: #1E4DC2; font-weight: 600; } .shot .pill.g { background: #E3F6EC; color: #1B7A52; } .shot .pill.a { background: #FFF3DA; color: #9A6A08; }
section { padding: 72px 0; } section.alt { background: var(--bg); }
.kicker { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); font-weight: 700; margin: 0 0 8px; }
h2 { font-size: 32px; letter-spacing: -.015em; margin: 0 0 10px; } .sub { color: var(--muted); font-size: 17px; max-width: 680px; margin: 0 0 32px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px rgba(16, 24, 40, .05); }
.card h3 { font-size: 17px; margin: 10px 0 6px; } .card p { margin: 0; color: var(--muted); font-size: 14.5px; }
.card .ico { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(180deg, #EEF4FF, #DCE8FF); display: grid; place-items: center; color: var(--blue-lo); } .card .ico svg { width: 20px; height: 20px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: s; }
.step { position: relative; padding: 22px 22px 22px 64px; background: #fff; border: 1px solid var(--line); border-radius: 14px; } .step::before { counter-increment: s; content: counter(s); position: absolute; left: 20px; top: 20px; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: var(--gold-hi); font-weight: 800; display: grid; place-items: center; font-size: 14px; }
.step h3 { margin: 0 0 6px; font-size: 16.5px; } .step p { margin: 0; color: var(--muted); font-size: 14.5px; }
.trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .trust div { padding: 16px 18px; border-left: 3px solid var(--gold); background: #fff; border-radius: 0 12px 12px 0; } .trust b { display: block; margin-bottom: 4px; } .trust span { color: var(--muted); font-size: 14px; }
.plans { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; }
.plan { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 28px; } .plan.navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.plan .price { font-size: 42px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 2px; } .plan .price small { font-size: 15px; font-weight: 500; color: var(--faint); margin-left: 6px; } .plan.navy .price small { color: #AEBAD3; }
.plan ul { margin: 16px 0 20px; padding: 0 0 0 18px; color: var(--muted); font-size: 14.5px; } .plan ul li { margin: 6px 0; } .plan.navy ul { color: #C7D0E2; } .plan.navy p { color: #C7D0E2; }
.demo { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: start; }
form .f { display: grid; gap: 6px; margin: 0 0 14px; } form label { font-size: 13.5px; font-weight: 600; } form input, form select, form textarea { font: inherit; font-size: 15px; padding: 11px 13px; border: 1px solid #C9D1E0; border-radius: 10px; background: #fff; color: var(--ink); width: 100%; } form input:focus, form select:focus, form textarea:focus { outline: 2px solid #BFD0F2; border-color: var(--blue); }
form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .hp { position: absolute; left: -9999px; }
.ok { background: #E3F6EC; color: #1B7A52; border-radius: 10px; padding: 12px 14px; margin: 0 0 14px; font-size: 14.5px; }
footer { background: var(--navy); color: #AEBAD3; padding: 36px 0; font-size: 13.5px; } footer .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; } footer a { color: #C7D0E2; } footer nav { display: flex; gap: 18px; }
.page { padding: 56px 0 72px; } .page h1 { font-size: 34px; margin: 0 0 6px; } .page .sub { margin-bottom: 24px; } .page h2 { font-size: 20px; margin: 26px 0 6px; } .page p, .page li { color: var(--muted); font-size: 15.5px; max-width: 760px; } .page .eff { color: var(--faint); font-size: 13.5px; margin-top: 30px; }
.page img.proof { max-width: 360px; width: 100%; border: 1px solid var(--line); border-radius: 12px; margin: 8px 12px 8px 0; vertical-align: top; }
@media (max-width: 900px) { .hero .wrap, .plans, .demo { grid-template-columns: 1fr; } .grid, .steps { grid-template-columns: 1fr 1fr; } .trust { grid-template-columns: 1fr 1fr; } .hero h1 { font-size: 36px; } .top nav a.hide { display: none; } }
@media (max-width: 600px) { .grid, .steps, .trust, form .two, .shot .tiles { grid-template-columns: 1fr; } .hero { padding: 56px 0 48px; } .hero h1 { font-size: 31px; } h2 { font-size: 26px; } .top nav { gap: 12px; } .top .wrap { height: 58px; } }
@media (max-width: 600px) { .top nav a:not(.btn) { display: none; } .top nav .btn { padding: 9px 14px; font-size: 14px; white-space: nowrap; } }