:root { color-scheme: light; --ink:#12384a; --muted:#526770; --accent:#0f4c63; }
* { box-sizing:border-box; }
html { min-height:100%; background:#f7fafb; }
body { margin:0; color:var(--ink); font-family:ui-sans-serif,system-ui,sans-serif; background:radial-gradient(circle at 84% -8%,#edf4f6 0,transparent 38%),linear-gradient(#f9fbfc,#f6f9fa); }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
.skip-link { position:absolute; top:8px; left:16px; padding:12px; background:white; transform:translateY(-180%); z-index:2; }
.skip-link:focus { transform:none; }
.landing-page { width:min(1180px,calc(100% - 32px)); min-height:100vh; min-height:100svh; margin:0 auto; display:flex; flex-direction:column; padding:max(20px,env(safe-area-inset-top)) 0 max(18px,env(safe-area-inset-bottom)); }
header { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:48px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; min-height:44px; max-width:65%; }
.brand img { display:block; width:170px; max-width:100%; height:auto; }
.top-login { display:inline-flex; align-items:center; gap:12px; min-height:44px; font-size:14px; font-weight:700; }
main { flex:1; display:flex; align-items:center; padding:48px 0 40px; }
.content { width:100%; max-width:900px; }
.kicker { margin:0 0 16px; font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
h1 { margin:0 0 20px; font-size:36px; line-height:1.08; letter-spacing:-.04em; overflow-wrap:anywhere; }
.lead { margin:0; max-width:800px; font-size:17px; line-height:1.6; color:var(--muted); }
.features { list-style:none; padding:0; margin:30px 0 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.features li { display:flex; align-items:flex-start; gap:10px; min-width:0; font-size:14px; line-height:1.45; color:var(--muted); }
.check { flex:0 0 20px; height:20px; margin-top:1px; border-radius:50%; background:#e7f4ee; color:#216447; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; }
.button { min-height:50px; flex:0 1 168px; display:flex; align-items:center; justify-content:center; padding:12px 18px; border:1px solid #c7d3da; border-radius:10px; font-size:15px; font-weight:700; text-align:center; }
.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.primary:hover { background:#0c4155; }
.secondary { background:#fff; }
.secondary:hover { background:#edf4f6; }
footer { margin-top:auto; padding-top:24px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:12px; color:var(--muted); }
@media(max-width:460px) { main { align-items:flex-start; } .features { grid-template-columns:1fr; gap:14px; } .button { flex:1 1 130px; } }
@media(min-width:768px) { .landing-page { width:min(1180px,calc(100% - 64px)); } main { padding:56px 0 40px; } h1 { font-size:48px; } .lead { font-size:18px; } .features { gap:20px; margin-top:34px; } .features li { font-size:15px; } }
@media(min-width:1024px) { .landing-page { width:min(1180px,calc(100% - 96px)); } .brand img { width:210px; } main { padding:40px 0 48px; } h1 { font-size:60px; } .lead { font-size:20px; } .features { gap:26px; margin-top:38px; } .actions { gap:12px; margin-top:38px; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }
body { overflow-wrap:anywhere; }