:root { --ink:#172b4d; --soft:#44546f; --muted:#626f86; --line:#dcdfe4; --bg:#ffffff; --alt:#f4f6fa; --navy:#0c2a5e; --blue:#0c66e4; --yellow:#f5cd47; --green:#4bce97; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; color:var(--ink); background:var(--bg); line-height:1.55; }
a { color:var(--blue); }
.nav { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:24px; padding:12px max(16px,calc((100vw - 1160px)/2)); background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.nav nav { display:flex; gap:20px; flex:1; flex-wrap:wrap; }
.nav nav a { color:var(--soft); text-decoration:none; font-weight:600; font-size:14px; }
.nav nav a:hover { color:var(--blue); }
.brand { display:flex; align-items:center; gap:8px; font-weight:800; font-size:20px; color:var(--navy); text-decoration:none; }
.btn { display:inline-block; border-radius:8px; padding:9px 16px; font-weight:700; font-size:14px; text-decoration:none; }
.btn.big { padding:13px 22px; font-size:16px; }
.btn.primary { background:var(--blue); color:#fff; }
.btn.primary:hover { background:#0055cc; }
.btn.ghost { border:2px solid var(--line); color:var(--ink); }
.hero { display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; padding:72px max(16px,calc((100vw - 1160px)/2)); background:linear-gradient(160deg,#eef4ff 0%,#fff 60%); }
.eyebrow { color:var(--blue); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.08em; margin:0 0 12px; }
h1 { font-size:clamp(30px,4.2vw,50px); line-height:1.12; margin:0 0 18px; color:var(--navy); }
.lead { font-size:18px; color:var(--soft); margin:0 0 24px; max-width:56ch; }
.actions { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:22px; }
.ticks { list-style:none; padding:0; margin:0; color:var(--soft); font-size:14px; }
.ticks li::before { content:'✓'; color:#1f845a; font-weight:800; margin-right:8px; }
.mock-board { display:flex; gap:12px; padding:18px; border-radius:16px; background:var(--navy); box-shadow:0 24px 60px rgba(12,42,94,.35); transform:rotate(-1.5deg); }
.mock-col { flex:1; background:#f1f2f4; border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:8px; font-size:13px; }
.mock-card { background:#fff; border-radius:8px; padding:8px 10px; box-shadow:0 1px 1px rgba(9,30,66,.25); display:block; }
.mock-card em { display:block; font-style:normal; font-size:11px; color:var(--muted); margin-top:4px; }
.mock-card.done { color:var(--muted); }
.l { display:block; width:36px; height:7px; border-radius:4px; margin-bottom:6px; } .l.g { background:var(--green); } .l.r { background:#f87168; }
.band { padding:72px max(16px,calc((100vw - 1160px)/2)); }
.band.alt { background:var(--alt); }
h2 { font-size:32px; margin:0 0 8px; color:var(--navy); }
.sub { color:var(--soft); margin:0 0 32px; font-size:17px; max-width:70ch; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; }
.grid.three { grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
article { background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px; }
article h3 { margin:0 0 6px; font-size:17px; color:var(--navy); }
article p { margin:0; color:var(--soft); font-size:14.5px; }
.demo-frame { border-radius:14px; overflow:hidden; border:1px solid var(--line); box-shadow:0 24px 60px rgba(12,42,94,.18); background:#fff; }
.demo-bar { display:flex; align-items:center; gap:6px; padding:10px 14px; background:#e9edf3; font-size:13px; }
.demo-bar span { width:11px; height:11px; border-radius:50%; background:#c3c9d3; }
.demo-bar a { margin-left:auto; font-weight:600; text-decoration:none; }
iframe { display:block; width:100%; height:760px; border:0; }
.arch { margin:0 0 28px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px; }
.arch svg { width:100%; height:auto; display:block; }
.box { stroke-width:2; } .box.user { fill:#eef4ff; stroke:#4c9aff; } .box.host { fill:#fff7d6; stroke:#e2b203; } .box.data { fill:#dcfff1; stroke:#22a06b; } .box.conn { fill:#f3f0ff; stroke:#8f7ee7; } .box.alm { fill:#f4f5f7; stroke:#8590a2; }
.t { font:700 17px -apple-system,'Segoe UI',sans-serif; fill:#0c2a5e; text-anchor:middle; } .s { font:13px -apple-system,'Segoe UI',sans-serif; fill:#44546f; text-anchor:middle; } .x { font:600 11px -apple-system,'Segoe UI',sans-serif; fill:#626f86; text-anchor:middle; }
.ln { stroke:#44546f; stroke-width:2; fill:none; } .ln.dashed { stroke-dasharray:6 5; }
.steps { padding-left:22px; max-width:80ch; font-size:16px; } .steps li { margin-bottom:12px; padding-left:6px; }
details { background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px 18px; margin-bottom:10px; max-width:90ch; }
summary { font-weight:700; cursor:pointer; } details p { margin:10px 0 0; color:var(--soft); }
footer { display:flex; gap:24px; flex-wrap:wrap; justify-content:space-between; padding:28px max(16px,calc((100vw - 1160px)/2)); background:var(--navy); color:#c7d1e3; font-size:13px; }
footer span:first-child { display:flex; align-items:center; gap:8px; font-weight:800; color:#fff; font-size:16px; }
@media (max-width:860px) { .hero { grid-template-columns:1fr; padding-top:40px; } .nav nav { display:none; } iframe { height:640px; } }