:root { --blue:#0096C7; --blue-dark:#008dbd; --cyan:#00B4D8; --accent:#48CAE4; --ink:#23313F; --muted:#5F7285; --header:#07111B; --paper:#F8FAFC; --white:#fff; --border:#E6EDF2; --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px; --r1:4px; --r2:8px; --r3:12px; --r4:18px; --r5:24px; --shadow-s:0 4px 12px rgb(7 17 27 / .08); --shadow-m:0 16px 32px rgb(7 17 27 / .12); --shadow-l:0 32px 64px rgb(7 17 27 / .16); --max:1200px; --reading:75ch; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--white); color:var(--ink); font:400 16px/1.65 Inter,Arial,sans-serif; -webkit-font-smoothing:antialiased; } img { max-width:100%; height:auto; } a { color:inherit; text-decoration:none; } button,input { font:inherit; } button { cursor:pointer; } :focus-visible { outline:3px solid var(--accent); outline-offset:4px; } .visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; z-index:20; top:var(--s3); left:var(--s3); padding:var(--s3) var(--s4); background:var(--white); border-radius:var(--r2); transform:translateY(-200%); } .skip-link:focus { transform:translateY(0); }
.container { width:min(calc(100% - 48px),var(--max)); margin-inline:auto; } .reading-layout { width:min(100%,var(--reading)); } .section { padding-block:var(--s10); } .section--muted { background:var(--paper); } .section--tint { background:linear-gradient(180deg,#eef9fb 0%,#f8fcfd 100%); } .section--dark { background:var(--header); color:var(--white); } .section--cta { padding-block:var(--s8); background:var(--paper); } .eyebrow { margin:0 0 var(--s3); color:var(--blue); font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; } .eyebrow--light { color:var(--accent); } h1,h2,h3 { font-family:Poppins,Arial,sans-serif; line-height:1.16; letter-spacing:-.035em; } h1 { max-width:12ch; margin:0 0 var(--s5); font-size:clamp(3rem,7vw,6.25rem); } h2 { max-width:18ch; margin:0 0 var(--s5); font-size:clamp(2rem,4vw,3.5rem); } h3 { margin:0 0 var(--s3); font-size:1.25rem; } p { margin:0 0 var(--s4); } .lead { max-width:62ch; color:var(--muted); font-size:1.25rem; line-height:1.65; }
.site-header { position:sticky; z-index:10; top:0; background:var(--header); color:var(--white); transition:box-shadow 250ms ease; position:relative; overflow:hidden; } .site-header::before { content:""; position:absolute; inset:0 auto 0 0; width:520px; background:linear-gradient(90deg, rgb(255 255 255 / .98) 0%, rgb(255 255 255 / .96) 82%, rgb(255 255 255 / 0) 100%); pointer-events:none; } .site-header.is-scrolled { box-shadow:var(--shadow-s); } .header-inner { position:relative; z-index:1; display:flex; align-items:center; min-height:80px; justify-content:space-between; gap:var(--s5); } .brand { display:inline-flex; align-items:center; flex:none; min-width:0; } .brand img { display:block; width:430px; height:120px; object-fit:contain; } .primary-nav { display:flex; align-items:center; gap:var(--s5); font-size:.9rem; font-weight:600; } .primary-nav > a:not(.button) { opacity:.82; } .primary-nav > a:not(.button):hover,.primary-nav a[aria-current] { opacity:1; color:var(--accent); } .menu-toggle { display:none; }
.site-header .container,.site-footer .container { width:100%; max-width:none; margin-inline:0; padding-inline:0; }
.button { display:inline-flex; min-width:160px; min-height:48px; align-items:center; justify-content:center; gap:var(--s2); padding:var(--s3) var(--s5); border:1px solid var(--blue); border-radius:999px; background:var(--blue); color:var(--white); font-weight:700; line-height:1.2; text-align:center; transition:background 250ms ease,transform 250ms ease; } .button:hover { background:var(--blue-dark); transform:translateY(-2px); } .button--small { min-width:auto; min-height:40px; padding:var(--s2) var(--s4); font-size:.85rem; } .button--quiet { min-width:auto; padding-inline:0; border:0; background:transparent; color:var(--ink); } .button--quiet:hover { background:transparent; color:var(--blue); } .button--light { background:var(--white); border-color:var(--white); color:var(--header); } .button--light:hover { background:#f2f7f9; } .button-row { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s5); }
.hero { overflow:hidden; background:linear-gradient(120deg,#f8fafc 0%,#fff 60%); } .hero-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:var(--s8); min-height:calc(100svh - 80px); padding-block:var(--s9); } .hero-copy { padding-block:var(--s7); } .hero-intro { max-width:49ch; margin-bottom:var(--s6); color:var(--muted); font-size:1.2rem; } .hero-art { position:relative; } .hero-art::before { content:""; position:absolute; z-index:0; inset:8% -15% -8% 5%; border-radius:var(--r5); background:#e4f7fb; } .hero-art img, .hero-art svg { position:relative; z-index:1; display:block; width:100%; border-radius:var(--r5); }
.section-heading,.split-callout,.roadmap-grid,.faq-layout,.cta-box { display:grid; grid-template-columns:1fr 1fr; gap:var(--s8); align-items:start; } .section-heading { margin-bottom:var(--s7); } .section-heading > p { max-width:42ch; color:var(--muted); } .feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .feature-card { min-height:0; padding:28px; border:1px solid var(--border); border-radius:18px; background:var(--white); transition:transform 250ms ease,box-shadow 250ms ease; } .feature-card:hover { box-shadow:var(--shadow-m); transform:translateY(-4px); } .feature-card p { margin:0; color:var(--muted); } .feature-icon { display:grid; width:44px; height:44px; place-items:center; margin-bottom:18px; border-radius:50%; background:#e3f7fb; color:var(--blue); font-size:1.7rem; }
.section--dark h2 { max-width:22ch; } .journey-list { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); margin:var(--s7) 0 0; padding:0; list-style:none; counter-reset:journey; } .journey-list li { padding-top:var(--s5); border-top:1px solid rgb(255 255 255 / .25); } .journey-list span { display:block; margin-bottom:var(--s4); color:var(--accent); font-weight:700; } .journey-list strong { display:block; font:600 1.25rem Poppins,sans-serif; } .journey-list p { margin:var(--s2) 0 0; color:#bdcad3; font-size:.95rem; }
.roadmap-list { display:grid; gap:var(--s5); margin:0; padding:0; list-style:none; } .roadmap-list li { display:grid; grid-template-columns:80px 1fr; gap:var(--s4); padding:var(--s5); border:1px solid var(--border); border-radius:var(--r3); } .roadmap-list span { color:var(--blue); font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; } .roadmap-list h3,.roadmap-list p { margin:0; } .roadmap-list p { color:var(--muted); } .split-callout > div:last-child { max-width:50ch; color:var(--muted); } .text-link { display:inline-block; margin-top:var(--s3); color:var(--blue); font-weight:700; } .text-link:hover { text-decoration:underline; }
.faq-list { border-top:1px solid var(--border); } details { border-bottom:1px solid var(--border); } summary { display:flex; align-items:center; justify-content:space-between; gap:var(--s4); padding:var(--s5) 0; font:600 1.1rem Poppins,sans-serif; cursor:pointer; list-style:none; } summary::-webkit-details-marker { display:none; } summary::after { content:"+"; color:var(--blue); font:400 1.5rem Inter,sans-serif; } details[open] summary::after { content:"−"; } details p { max-width:60ch; padding:0 0 var(--s5); color:var(--muted); }
.cta-box { align-items:center; padding:var(--s8); border-radius:var(--r5); background:var(--header); color:var(--white); } .cta-box h2 { max-width:14ch; } .cta-box > div > p:not(.eyebrow) { color:#bdcad3; } .signup-form label { display:block; margin-bottom:var(--s2); font-weight:600; } .form-row { display:flex; gap:var(--s3); } input { width:100%; min-width:0; min-height:48px; padding:var(--s3) var(--s4); border:1px solid transparent; border-radius:var(--r2); background:var(--white); color:var(--ink); } input::placeholder { color:#748595; } input[aria-invalid="true"] { border-color:#d94747; } .form-message { min-height:1.65em; margin:var(--s2) 0 0; color:var(--accent); font-size:.9rem; } .form-note { margin:0; color:#bdcad3; font-size:.8rem; }
.site-footer { padding-block:var(--s7) var(--s5); background:var(--header); color:var(--white); } .footer-top { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--s5); padding-bottom:var(--s6); } .footer-top p { margin:0; color:#bdcad3; } .footer-top nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--s5); font-size:.9rem; } .footer-top nav a { color:#bdcad3; } .footer-top nav a:hover { color:var(--white); } .footer-bottom { display:flex; justify-content:space-between; gap:var(--s4); padding-top:var(--s5); border-top:1px solid rgb(255 255 255 / .16); color:#bdcad3; }
.page-hero { padding-block:var(--s10) var(--s8); background:var(--paper); } .prose h2 { margin-top:var(--s7); font-size:1.75rem; } .prose p { color:var(--muted); } blockquote { margin:var(--s6) 0; padding:var(--s5); border-left:4px solid var(--blue); background:var(--paper); font:500 1.35rem/1.5 Poppins,sans-serif; color:var(--ink); } .error-page { display:grid; min-height:100svh; align-items:center; padding-block:var(--s8); background:var(--paper); } .error-page .brand { margin-bottom:var(--s9); color:var(--header); }
.reveal { opacity:0; transform:translateY(16px); transition:opacity 500ms ease,transform 500ms ease; } .reveal.is-visible { opacity:1; transform:none; } @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; } .reveal { opacity:1; transform:none; } } @media print { .site-header,.site-footer,.button,.skip-link { display:none; } body { color:#000; } .section { padding-block:24px; } }