:root {
  --bg:#07090d; --panel:#0f141c; --line:#1e2735; --text:#eef2f7;
  --dim:#98a4b6; --green:#2ea043; --green-soft:#123c22; --gold:#d4a72c;
  --chrome:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 40%,#8fa3bd 100%);
}
* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font-family:-apple-system,"SF Pro Display","Segoe UI",Roboto,Helvetica,sans-serif; line-height:1.65; -webkit-font-smoothing:antialiased; }
a { color:var(--green); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ── top bar ── */
.topbar { position:sticky; top:0; z-index:50; display:flex; justify-content:space-between; align-items:center; padding:14px 6vw; background:rgba(7,9,13,.82); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.logo { font-weight:800; font-size:1.25rem; letter-spacing:.05em; color:var(--green); }
.topbar .links { display:flex; align-items:center; gap:22px; }
.topbar .links a { color:var(--dim); font-size:.95rem; }
.topbar .links a.btn { color:#fff; }

/* ── buttons ── */
.btn { display:inline-block; background:var(--green); color:#fff; padding:13px 26px; border-radius:12px; font-weight:650; margin:0 8px 8px 0; }
.btn:hover { text-decoration:none; filter:brightness(1.12); }
.btn.ghost { background:transparent; border:1px solid var(--line); color:var(--text); }
.btn.small { padding:8px 16px; border-radius:9px; font-size:.92rem; margin:0; }

/* ── hero ── */
.hero { border-bottom:1px solid var(--line); background:radial-gradient(ellipse 90% 65% at 50% -12%, #10331d 0%, transparent 62%); }
.hero-inner { max-width:900px; margin:0 auto; padding:13vh 6vw 13vh; text-align:center; }
h1 { font-size:clamp(3rem,8.5vw,5.6rem); line-height:1.02; font-weight:800; letter-spacing:-.03em;
     background:var(--chrome); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
h1 span { background:linear-gradient(135deg,#4ade80,#2ea043); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.sub { color:var(--dim); font-size:1.22rem; margin:30px auto 0; max-width:640px; }
.sub strong { color:var(--text); }
.cta-line { margin-top:38px; }
.note { margin-top:22px; color:var(--dim); font-size:.85rem; letter-spacing:.02em; }

/* ── the five clicks ── */
.click { max-width:none; padding:15vh 6vw; }
.click > * { max-width:720px; margin-left:auto; margin-right:auto; }
.click.alt { background:var(--panel); border-block:1px solid var(--line); }
.kicker { font-size:.8rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--green); margin-bottom:18px; }
.click h2 { font-size:clamp(2rem,5vw,3.4rem); line-height:1.08; font-weight:800; letter-spacing:-.02em; margin-bottom:26px;
            background:var(--chrome); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.click p { color:var(--dim); font-size:1.12rem; margin-bottom:18px; }
.click p strong { color:var(--text); }
.click p em { color:var(--text); font-style:italic; }
.quote { border-left:3px solid var(--green); padding-left:18px; color:var(--text) !important; font-size:1.15rem !important; font-style:italic; line-height:2; }
.honest { border:1px solid var(--line); border-radius:14px; background:var(--bg); padding:20px 22px; font-size:1rem !important; }
.click.alt .honest { background:var(--bg); }

/* ── split bar ── */
.splitbar { display:flex; max-width:720px; margin:30px auto 14px; border-radius:12px; overflow:hidden; border:1px solid var(--line); font-size:.92rem; font-weight:700; text-align:center; }
.seg { padding:14px 4px; white-space:nowrap; overflow:hidden; }
.seg.worker { flex:88; background:linear-gradient(135deg,#1f7a35,#2ea043); color:#fff; }
.seg.creator { flex:8; background:#28455f; color:#cfe3f7; }
.seg.state { flex:4; background:#5d4a1f; color:#f2ddaa; }
.legend { font-size:1rem !important; }
@media (max-width:560px){ .seg.creator, .seg.state { font-size:.7rem; padding-inline:2px; } }

/* ── footer ── */
footer { border-top:1px solid var(--line); background:radial-gradient(ellipse 80% 90% at 50% 120%, #10331d 0%, transparent 60%); }
.foot-inner { max-width:760px; margin:0 auto; padding:12vh 6vw 9vh; text-align:center; }
footer h2 { font-size:clamp(2rem,5vw,3rem); font-weight:800; letter-spacing:-.02em; margin-bottom:26px;
            background:var(--chrome); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
footer .fine { margin-top:34px; color:var(--dim); font-size:.85rem; line-height:1.9; }