:root { --bg:#0d1117; --panel:#161b22; --border:#30363d; --text:#e6edf3; --dim:#9da7b3; --accent:#f0b429; --accent-soft:#f0b4291a; --good:#3fb950; }
@media (prefers-color-scheme: light) { :root { --bg:#ffffff; --panel:#f6f8fa; --border:#d0d7de; --text:#1f2328; --dim:#59636e; --accent:#b7791f; --accent-soft:#b7791f14; --good:#1a7f37; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font: 16px/1.55 -apple-system, "Segoe UI", Inter, Roboto, sans-serif; }
a { color: var(--accent); }
.top { position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 24px; background:color-mix(in srgb, var(--bg) 92%, transparent); border-bottom:1px solid var(--border); backdrop-filter: blur(6px); flex-wrap:wrap; }
.brand { font-weight:700; font-size:18px; color:var(--text); text-decoration:none; }
.top nav { display:flex; gap:18px; flex-wrap:wrap; align-items:center; }
.top nav a { color:var(--dim); text-decoration:none; font-size:14px; }
.top nav a:hover { color:var(--text); }
.top nav a.login { color:#111; background:var(--accent); padding:6px 14px; border-radius:8px; font-weight:600; }
main { max-width:1080px; margin:0 auto; padding:0 20px 40px; }
section { padding:56px 0 8px; }
h1 { font-size:clamp(28px,4.2vw,44px); line-height:1.15; margin:0 0 14px; }
h2 { font-size:28px; margin:0 0 10px; }
h3 { font-size:20px; margin:36px 0 10px; }
h4 { margin:0 0 6px; }
.lead { font-size:18px; max-width:780px; }
.section-lead { color:var(--dim); max-width:780px; margin-top:0; }
.dim { color:var(--dim); }
.hero { padding-top:40px; }
.demo-frame { margin-top:18px; border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--panel); height:min(80vh,760px); box-shadow:0 10px 40px #0004;
  /* break out of main's 1080px column: up to 1400px wide, centred on the viewport */
  width:min(1400px, calc(100vw - 32px)); position:relative; left:50%; transform:translateX(-50%); }
.demo-frame iframe { width:100%; height:100%; border:0; display:block; }
.demo-open { text-align:right; font-size:14px; }
.steps { padding-left:22px; max-width:820px; }
.steps li { margin:8px 0; }
.arch { margin:16px 0 0; background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:12px; }
.arch svg { width:100%; height:auto; display:block; }
.arch figcaption { color:var(--dim); font-size:13px; padding:6px 8px 2px; }
.arch .box rect { fill:none; stroke:var(--border); stroke-width:1.4; }
.arch .box.accent rect { stroke:var(--accent); stroke-width:2; fill:var(--accent-soft); }
.arch .core rect { fill:var(--accent-soft); stroke:var(--accent); stroke-width:1.2; stroke-dasharray:5 4; }
.arch text { fill:var(--text); text-anchor:middle; }
.arch .t-label { font-size:12px; letter-spacing:.06em; fill:var(--dim); text-anchor:start; font-weight:600; }
.arch .t-name { font-size:15px; font-weight:600; }
.arch .t-small { font-size:12.5px; fill:var(--dim); }
.arch .t-cost { font-size:13px; font-weight:600; fill:var(--good); }
.arch path.edge { stroke:var(--dim); stroke-width:1.4; fill:none; }
.arch .ink-fill { fill:var(--dim); }
.arch text.t-small[x="492"] { text-anchor:start; }
.cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
.cols ul { padding-left:18px; margin:0; } .cols li { margin:6px 0; font-size:15px; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin:18px 0 8px; }
.stat { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:16px; }
.stat.accent { border-color:var(--accent); background:var(--accent-soft); }
.stat-n { font-size:30px; font-weight:700; }
.stat-l { color:var(--dim); font-size:14px; }
.note { font-size:13px; }
.screens { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:18px; margin-top:22px; }
.screens figure { margin:0; background:var(--panel); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.screens img { width:100%; display:block; }
.screens figcaption { padding:10px 12px; font-size:14px; color:var(--dim); }
.bundles { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-top:16px; }
.bundle { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:16px; }
.bundle.accent { border-color:var(--accent); }
.b-who { font-size:13px; color:var(--dim); }
.b-name { font-weight:600; margin:6px 0 2px; }
.b-price { font-size:28px; font-weight:700; } .b-price span { font-size:14px; color:var(--dim); font-weight:400; }
footer { border-top:1px solid var(--border); padding:22px; text-align:center; color:var(--dim); font-size:14px; }
@media (max-width:640px) { .top nav { gap:12px; } .demo-frame { height:78vh; border-radius:10px; } }

.badge { display:inline-block; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:4px 10px; border-radius:999px; margin-bottom:10px; }
.badge.real { color:var(--good); background:color-mix(in srgb, var(--good) 14%, transparent); border:1px solid var(--good); }
.badge.est { color:var(--dim); border:1px dashed var(--dim); }
#results { border-left:3px solid var(--good); padding-left:18px; }
#bundles .bundle { background:transparent; border-style:dashed; }
#bundles .bundle.accent { border-style:solid; background:var(--accent-soft); }
.b-save { color:var(--good); font-size:14px; font-weight:600; margin:4px 0 2px; }
.b-why { font-size:14px; }
@media (max-width:640px) { #results { padding-left:12px; } }