:root{ --ink:#0b0b0b; --bg:#f3f3ed; --muted:rgba(0,0,0,.6); --line:rgba(0,0,0,.12); --radius:22px; }
*{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;scroll-behavior:smooth}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.header{position:sticky;top:12px;z-index:60}
.nav{backdrop-filter:blur(10px);background:rgba(255,255,255,.55);border:1px solid var(--line);border-radius:20px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 14px 44px rgba(0,0,0,.12)}
.brand{display:flex;align-items:center;gap:12px;font-weight:800} .brand img{width:36px;height:36px;border-radius:10px}
.nav a{opacity:.9;margin:0 10px} .nav a:hover{opacity:.7}
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:12px 16px;background:var(--ink);color:var(--bg);font-weight:700;box-shadow:0 16px 48px rgba(0,0,0,.18);transition:transform .16s ease, box-shadow .16s ease} .btn:hover{transform:translateY(-2px);box-shadow:0 24px 60px rgba(0,0,0,.2)}
.btn.outline{background:transparent;border:1px solid rgba(0,0,0,.6);color:var(--ink)}
.hero{padding:64px 0 24px;position:relative;overflow:hidden}
.status-ribbon{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.8);backdrop-filter:blur(8px);border-bottom:0;padding:6px 0;text-align:center;font-size:.9rem}
.radial{position:absolute;inset:-20%;background:radial-gradient(closest-side, rgba(0,0,0,.06), transparent 70%)}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.tile{background:white;border:1px solid var(--line);border-radius:24px;padding:18px;box-shadow:0 16px 44px rgba(0,0,0,.08);position:relative;overflow:hidden} .tile.stroke:before{content:"";position:absolute;inset:-1px;border-radius:24px;padding:1px;background:linear-gradient(135deg, rgba(0,0,0,.12), rgba(0,0,0,.02));-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.section{padding:80px 0}
.h1{font-size:56px;line-height:1.05;margin:0 0 12px;font-weight:900}
.h2{font-size:40px;line-height:1.1;margin:0 0 10px;font-weight:800}
.lead{font-size:20px;opacity:.85;max-width:60ch}
.marquee{display:flex;gap:28px;white-space:nowrap;opacity:.7;animation:mar 22s linear infinite} @keyframes mar{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.grid-routes{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.card{background:white;border:1px solid var(--line);border-radius:20px;padding:16px;box-shadow:0 10px 36px rgba(0,0,0,.07)}
.kbd{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;border:1px solid var(--line);padding:2px 8px;border-radius:8px;background:white}
.footer{border-top:1px solid var(--line);padding:24px 0;margin-top:32px;color:var(--muted)}
.progress{position:fixed;top:0;left:0;height:3px;background:var(--ink);width:0;z-index:80}
.reveal{opacity:0;transform:translateY(16px);transition:all .7s cubic-bezier(.2,.65,.2,1)} .reveal.in{opacity:1;transform:none}
.cmd{position:fixed;inset:0;background:rgba(0,0,0,.28);display:none;place-items:center;z-index:100} .cmd .panel{background:white;border:1px solid var(--line);border-radius:16px;width:min(720px,92vw);padding:14px}
.badge{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);padding:6px 10px;border-radius:999px;font-size:.9rem}
.route-pill{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:white;padding:12px;border-radius:14px;box-shadow:0 10px 36px rgba(0,0,0,.06)}
.route-pill img{width:22px;height:22px;border-radius:6px} .arrow{opacity:.6}
.dock{position:fixed;right:14px;bottom:14px;z-index:120} .dock .dock-card{background:white;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 54px rgba(0,0,0,.16);padding:8px;display:flex;gap:8px}
@media (prefers-reduced-motion: reduce){ .reveal{transition:none} .marquee{animation:none} .btn:hover{transform:none;box-shadow:0 16px 48px rgba(0,0,0,.12)} }
@media(max-width:980px){.split{grid-template-columns:1fr;gap:20px}.grid-3{grid-template-columns:1fr}.grid-5,.grid-routes{grid-template-columns:repeat(2,1fr)}.h1{font-size:40px}.h2{font-size:28px}}
 a{ text-decoration:none } a:hover{ text-decoration:none } html,body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility }