:root { --bg:#070a0c; --panel:#0b0f12; --text:#eef5f3; --muted:#8b99a2; --green:#52e0bd; --ember:#f3a95d; --line:rgba(255,255,255,.1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:80px; background:var(--bg); }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.6 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; }
::selection { background:var(--green); color:#06100d; }
.nav { position:fixed; inset:0 0 auto; z-index:50; border-bottom:1px solid var(--line); background:rgba(7,10,12,.84); backdrop-filter:blur(18px); }
.nav-inner { width:min(1280px,calc(100% - 40px)); height:72px; margin:auto; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; font-size:14px; font-weight:800; letter-spacing:.18em; }
.brand-mark { display:grid; place-items:center; width:36px; height:36px; border:1px solid rgba(82,224,189,.5); background:rgba(82,224,189,.1); color:#8affdf; font-size:18px; box-shadow:0 0 30px rgba(82,224,189,.15); }
nav { display:flex; gap:28px; } nav a { color:#bcc6cc; text-decoration:none; font-size:14px; } nav a:hover { color:white; }
.nav-cta { min-height:40px; display:inline-flex; align-items:center; padding:0 16px; border:1px solid rgba(82,224,189,.5); background:rgba(82,224,189,.11); color:#8affdf; text-decoration:none; font-size:14px; font-weight:700; }
.hero { min-height:820px; position:relative; isolation:isolate; padding-top:72px; }
.hero>img { position:absolute; inset:0; z-index:-3; width:100%; height:100%; object-fit:cover; object-position:64% center; }
.hero-shade { position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,#050708 0%,rgba(5,7,8,.93) 34%,rgba(5,7,8,.48) 67%,rgba(5,7,8,.72) 100%); }
.hero:after { content:""; position:absolute; inset:auto 0 0; z-index:-1; height:260px; background:linear-gradient(transparent,var(--bg)); }
.hero-inner { width:min(1280px,calc(100% - 40px)); min-height:748px; margin:auto; display:flex; align-items:center; padding:80px 0; }
.hero-copy { max-width:780px; }
.server-pill { width:max-content; display:flex; align-items:center; gap:9px; margin-bottom:24px; padding:7px 12px; border:1px solid rgba(82,224,189,.3); background:rgba(0,0,0,.38); color:#9af7df; font-size:14px; }
.server-pill span { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 16px var(--green); }
.eyebrow { margin:0 0 14px; color:var(--green); font-size:13px; font-weight:800; letter-spacing:.25em; }
h1,h2 { margin:0; color:white; font-weight:950; text-transform:uppercase; letter-spacing:-.045em; line-height:.94; }
h1 { font-size:clamp(54px,8vw,104px); }
h2 { font-size:clamp(42px,5.5vw,64px); line-height:1.02; }
.lead { max-width:680px; margin:28px 0 0; color:#c0cbd1; font-size:20px; line-height:1.7; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.button { min-height:52px; display:inline-flex; align-items:center; justify-content:center; padding:0 24px; text-decoration:none; font-weight:800; }
.primary { background:var(--green); color:#06100d; } .primary:hover { background:#7af3d5; }
.secondary { border:1px solid rgba(255,255,255,.22); background:rgba(0,0,0,.36); color:white; } .secondary:hover { background:rgba(255,255,255,.1); }
.server-meta { display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:26px; color:#909ca4; font-size:14px; }
.server-meta code { padding:8px 12px; border:1px solid var(--line); background:rgba(0,0,0,.45); color:#d9e1e5; }
.wipe-clock { width:min(700px,100%); margin-top:24px; border:1px solid rgba(82,224,189,.25); background:rgba(5,10,11,.68); box-shadow:0 20px 60px rgba(0,0,0,.25); backdrop-filter:blur(12px); }
.clock-heading { display:flex; justify-content:space-between; gap:16px; padding:10px 14px; border-bottom:1px solid var(--line); }
.clock-heading span { color:var(--green); font-size:12px; font-weight:900; letter-spacing:.2em; }
.clock-heading small { color:#7f8e96; font-size:12px; }
.clock-grid { display:grid; grid-template-columns:repeat(5,1fr); }
.clock-grid>div { min-width:0; padding:12px 10px 13px; border-right:1px solid var(--line); text-align:center; }
.clock-grid>div:last-child { border:0; }
.clock-grid strong { display:block; color:white; font:800 clamp(22px,3vw,34px)/1 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.clock-grid span { display:block; margin-top:7px; color:#6f7d85; font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.section { width:min(1280px,calc(100% - 40px)); margin:auto; padding-bottom:96px; }
.facts { display:grid; grid-template-columns:repeat(4,1fr); border-block:1px solid var(--line); background:rgba(255,255,255,.025); }
.facts div { padding:28px; border-right:1px solid var(--line); } .facts div:last-child { border:0; }
.facts strong { display:block; color:white; font-size:32px; line-height:1.1; }
.facts span { display:block; margin-top:7px; color:#66737d; font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
.intro { display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:end; padding:112px 0; }
.intro>p { max-width:680px; margin:0; color:var(--muted); font-size:18px; line-height:1.8; }
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); }
.features article { min-height:290px; padding:36px; background:var(--panel); }
.feature-top { display:flex; justify-content:space-between; color:var(--green); font-size:28px; }.feature-top small { color:#58636b; font:12px ui-monospace,monospace; }
.features h3 { margin:64px 0 8px; color:white; font-size:20px; }.features p { margin:0; color:var(--muted); }
.support { padding:120px 0; border-block:1px solid var(--line); background:#0a0e11; }
.support-inner { width:min(1280px,calc(100% - 40px)); margin:auto; display:grid; grid-template-columns:1fr 1.08fr; gap:64px; align-items:center; }
.rank-art { min-height:610px; position:relative; overflow:hidden; border:1px solid var(--line); }.rank-art>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.rank-shade { position:absolute; inset:0; background:linear-gradient(transparent 45%,rgba(7,10,12,.95)); }
.rank-label { position:absolute; inset:auto 0 0; padding:36px; }.rank-label>div { display:flex; align-items:end; justify-content:space-between; gap:24px; }
.rank-label span { display:flex; flex-direction:column; }.rank-label strong { color:white; font-size:30px; text-transform:uppercase; }.rank-label small { color:#c6d0d5; font-size:14px; font-weight:400; }.rank-label b { color:white; font-size:22px; }.rank-label b small { color:var(--muted); }
.support-copy .lead-small { margin:24px 0 0; color:var(--muted); font-size:18px; line-height:1.8; }
.tiers { margin-top:32px; }.tiers div { display:flex; justify-content:space-between; gap:18px; padding:14px 0; border-bottom:1px solid var(--line); }.tiers span { color:white; font-weight:700; }.tiers span::first-letter { color:var(--green); }.tiers small { color:var(--muted); font-size:14px; }
.perk-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:34px; }.perk-grid article { padding:20px; border:1px solid var(--line); background:rgba(255,255,255,.025); }.perk-grid i { display:block; margin-bottom:12px; color:var(--green); font-size:22px; font-style:normal; }.perk-grid .ember { color:var(--ember); }.perk-grid strong { display:block; color:white; }.perk-grid p { margin:4px 0 0; color:#66737d; font-size:14px; }
.text-link { display:inline-block; margin-top:32px; color:#7af3d5; font-weight:800; text-decoration-color:rgba(82,224,189,.4); text-underline-offset:8px; }
.rules { display:grid; grid-template-columns:.8fr 1.2fr; gap:64px; padding-block:120px; }
.rule-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); }.rule-grid div { min-height:128px; display:flex; gap:18px; padding:24px; background:var(--bg); }.rule-grid small { color:var(--green); font:12px ui-monospace,monospace; }.rule-grid p { margin:0; color:#d2dbe0; font-weight:700; line-height:1.5; }
.final-cta { width:min(1280px,calc(100% - 40px)); min-height:480px; position:relative; isolation:isolate; display:grid; place-items:center; margin:0 auto 48px; padding:72px 20px; border:1px solid var(--line); text-align:center; overflow:hidden; }
.final-cta>img { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; opacity:.4; }.final-shade { position:absolute; inset:0; z-index:-1; background:rgba(4,14,12,.78); }.final-cta>div { max-width:820px; }.final-cta p { margin:20px auto 28px; color:#c1cbd0; font-size:18px; }.people { display:block; margin-bottom:20px; color:var(--green); font-size:30px; }
footer { border-top:1px solid var(--line); } footer>div { width:min(1280px,calc(100% - 40px)); margin:auto; display:flex; justify-content:space-between; gap:16px; padding:28px 0; color:#66737d; font-size:14px; } footer p { margin:0; }
@media (max-width:850px) { nav { display:none; }.facts { grid-template-columns:1fr 1fr; }.facts div:nth-child(2) { border-right:0; }.facts div:nth-child(-n+2) { border-bottom:1px solid var(--line); }.intro,.support-inner,.rules { grid-template-columns:1fr; }.support-inner,.rules,.intro { gap:42px; }.features { grid-template-columns:1fr; }.rank-art { min-height:520px; }.rules { padding-block:90px; } }
@media (max-width:560px) { .brand span:last-child { font-size:12px; letter-spacing:.12em; }.nav-cta { padding:0 12px; }.hero { min-height:880px; }.hero-inner { min-height:808px; }.hero-shade { background:linear-gradient(90deg,rgba(5,7,8,.95),rgba(5,7,8,.58)); }.actions { flex-direction:column; }.clock-heading { flex-direction:column; gap:2px; }.clock-grid { grid-template-columns:repeat(4,1fr); }.clock-grid .milliseconds { grid-column:1/-1; border-top:1px solid var(--line); }.clock-grid>div:nth-child(4) { border-right:0; }.facts { grid-template-columns:1fr 1fr; }.facts div { padding:22px 18px; }.features article { min-height:240px; }.features h3 { margin-top:38px; }.support { padding:88px 0; }.rank-art { min-height:450px; }.rank-label { padding:24px; }.rank-label>div { align-items:flex-start; flex-direction:column; gap:10px; }.perk-grid,.rule-grid { grid-template-columns:1fr; } footer>div { flex-direction:column; } }