:root {
  --bg:#090b10; --panel:#0f1219; --panel2:#151a24; --line:#1f2532; --text:#e8edf5; --dim:#8a93a6;
  --accent:#f4a62a; --accent-ink:#1b1204; --green:#2bd17e; --yellow:#e9b949; --red:#f2545b;
  --head:'Bahnschrift','DIN Alternate','DIN 2014','Segoe UI',system-ui,sans-serif;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { background:var(--bg); }
body { color:var(--text); font:15px/1.55 'Segoe UI',system-ui,-apple-system,sans-serif; min-height:100vh; display:flex; flex-direction:column; }
a { color:inherit; text-decoration:none; }
[hidden] { display:none !important; }
main { flex:1; width:min(1120px, 100% - 40px); margin:0 auto; }

/* header with the battlement line */
.top { position:relative; display:flex; align-items:center; gap:14px; width:min(1120px, 100% - 40px); margin:0 auto; padding:18px 0; }
.top::after { content:''; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:linear-gradient(90deg, var(--line) 50%, transparent 50%) 0 0/16px 4px; }
.brand { display:flex; align-items:center; gap:8px; font:700 20px/1 var(--head); letter-spacing:.08em; }
.soon { display:inline-flex; align-items:center; gap:7px; padding:4px 10px; border:1px solid rgba(244,166,42,.35); border-radius:20px;
  color:var(--accent); font-size:12px; font-weight:600; background:rgba(244,166,42,.06); }
.soon i { width:7px; height:7px; border-radius:50%; background:var(--accent); animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity:.25; } }
.social { margin-left:auto; display:flex; gap:16px; font-weight:600; color:var(--dim); }
.social a:hover { color:var(--text); }

/* hero */
.hero { display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center; padding:72px 0 64px; }
.kicker { color:var(--accent); font:600 12px/1 var(--head); letter-spacing:.14em; text-transform:uppercase; margin-bottom:16px; }
h1 { font:700 clamp(36px, 5.4vw, 60px)/1.04 var(--head); letter-spacing:-.01em; }
.lead { color:#b9c0cc; font-size:17px; margin:22px 0 28px; max-width:520px; }
.cta { display:flex; gap:12px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; padding:12px 20px; border-radius:8px; font-weight:700; background:var(--accent); color:var(--accent-ink); border:1px solid var(--accent); }
.btn:hover { filter:brightness(1.08); }
.btn.ghost { background:transparent; color:var(--dim); border-color:var(--line); cursor:default; filter:none; }
.fine { color:var(--dim); font-size:12px; margin-top:16px; }

/* product mock */
.mock { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px; box-shadow:0 30px 80px rgba(0,0,0,.45); }
.mock-bar { display:flex; gap:16px; font-size:12px; color:var(--dim); font-weight:600; padding:2px 4px 12px; border-bottom:1px solid var(--line); }
.mock-bar .on { color:var(--text); box-shadow:inset 0 -2px 0 var(--accent); padding-bottom:9px; margin-bottom:-12px; }
.mock-row { display:grid; grid-template-columns:42px 1fr 62px 50px auto; gap:12px; align-items:center; padding:12px 4px; border-bottom:1px solid var(--line); font-size:13px; }
.mock-row small { display:block; color:var(--dim); font-size:11px; }
.mock-row em { font-style:normal; text-align:right; font-weight:600; }
.up { color:var(--green); } .down { color:var(--red); }
.tag { font-size:11px; padding:2px 7px; border-radius:4px; border:1px solid var(--line); color:var(--dim); white-space:nowrap; }
.tag.g { color:var(--green); border-color:rgba(43,209,126,.3); }
.tag.r { color:var(--red); border-color:rgba(242,84,91,.3); }
/* the Rampart Score badge: a little battlement */
.score { position:relative; display:inline-flex; align-items:center; justify-content:center; width:36px; height:22px; margin-top:6px;
  font:700 12px/1 var(--head); color:#0b0d12; border-radius:2px; }
.score::before { content:''; position:absolute; left:0; right:0; top:-6px; height:6px;
  background:linear-gradient(90deg, currentColor 0 25%, transparent 25% 37.5%, currentColor 37.5% 62.5%, transparent 62.5% 75%, currentColor 75%); }
.score.g { background:var(--green); color:#0b0d12; } .score.g::before { color:var(--green); }
.score.y { background:var(--yellow); } .score.y::before { color:var(--yellow); }
.score.r { background:var(--red); } .score.r::before { color:var(--red); }
.score.big { width:52px; height:30px; font-size:16px; }
.mock-verdict { display:flex; gap:14px; align-items:center; margin-top:14px; padding:14px; border-radius:8px; background:rgba(242,84,91,.07); border:1px solid rgba(242,84,91,.25); }
.mock-verdict strong { color:var(--red); display:block; font-size:14px; }
.mock-verdict span { color:#c4cad5; font-size:13px; }

/* feature grid */
.band { padding:56px 0; }
h2 { font:700 clamp(24px, 3vw, 32px)/1.15 var(--head); margin-bottom:28px; }
.grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.grid article { background:var(--panel); padding:24px; }
.grid h3 { font:700 16px/1.3 var(--head); margin-bottom:8px; display:flex; gap:9px; align-items:center; }
.ico { color:var(--accent); font-style:normal; font-size:11px; }
.grid p { color:#aab2bf; font-size:14px; }

/* creators */
.creators { display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:start; padding:56px 0; border-top:1px solid var(--line); }
.creators h2 { margin-bottom:0; }
.creators ol { list-style:none; counter-reset:s; display:grid; gap:14px; }
.creators li { counter-increment:s; position:relative; padding:16px 18px 16px 58px; background:var(--panel); border:1px solid var(--line); border-radius:10px; color:#c4cad5; }
.creators li::before { content:counter(s); position:absolute; left:18px; top:15px; width:26px; height:26px; border-radius:6px;
  background:rgba(244,166,42,.12); color:var(--accent); font:700 14px/26px var(--head); text-align:center; }
.creators li b { color:var(--text); }

/* numbers */
.numbers { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; padding:8px 0 72px; }
.numbers div { padding:20px; border:1px solid var(--line); border-radius:10px; background:linear-gradient(180deg, var(--panel), transparent); }
.numbers b { display:block; font:700 34px/1 var(--head); color:var(--accent); margin-bottom:8px; }
.numbers span { color:var(--dim); font-size:13px; }

footer { width:min(1120px, 100% - 40px); margin:0 auto; padding:24px 0 32px; border-top:1px solid var(--line); color:#aab2bf; font-size:13px; }
footer .dim { color:var(--dim); margin-top:6px; }

@media (max-width:900px) {
  .hero { grid-template-columns:1fr; padding:44px 0 40px; gap:36px; }
  .grid { grid-template-columns:1fr 1fr; }
  .creators { grid-template-columns:1fr; gap:24px; }
}
@media (max-width:600px) {
  main, .top, footer { width:calc(100% - 28px); }
  .top { flex-wrap:wrap; }
  .grid, .numbers { grid-template-columns:1fr; }
  .mock-row { grid-template-columns:40px 1fr 58px 46px; }
  .mock-row .tag { display:none; }
  .lead { font-size:16px; }
}
@media (prefers-reduced-motion:reduce) { .soon i { animation:none; } }