/* Athenas Edge: black ground, AE pink for action, lilac for labels (the poster's brand). Dark only, on purpose. */
:root {
  --bg: #000000; --panel: #0d0b10; --line: #26212b; --fg: #ffffff; --soft: #d9d4de; --muted: #9a93a3;
  --pink: #fe0180; --pink-deep: #c80066; --lilac: #c9a8f0;
  --display: "Barlow Condensed", "Bahnschrift", "Arial Narrow", sans-serif;
  --body: "Barlow", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--soft); font: 400 18px/1.6 var(--body); }
img { max-width: 100%; display: block; }
a { color: var(--lilac); text-underline-offset: 3px; }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--lilac); outline-offset: 3px; }
.wrap { max-width: 68rem; margin: 0 auto; padding-inline: 20px; }
h1, h2, h3 { font-family: var(--display); color: var(--fg); line-height: 1.05; margin: 0; text-wrap: balance; letter-spacing: 0.01em; }
h1 { font-size: clamp(2.8rem, 9vw, 5.6rem); font-weight: 700; text-transform: uppercase; }
h2 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; text-transform: uppercase; }
h3 { font-size: 1.5rem; font-weight: 600; }
p { margin: 0; max-width: 62ch; }
.eyebrow { font: 600 0.85rem var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--lilac); }

/* header */
.top { position: sticky; top: 0; z-index: 5; background: rgba(0,0,0,0.88); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 20px; padding-block: 12px; }
.top img { height: 34px; width: auto; }
.top nav { display: flex; gap: 22px; margin-left: auto; }
.top nav a { color: var(--soft); text-decoration: none; font-weight: 500; }
.top nav a:hover { color: var(--fg); }
@media (max-width: 760px) { .top nav { display: none; } .top .btn { margin-left: auto; } }

.btn { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; padding: 12px 24px; font: 600 1rem var(--body); text-decoration: none; white-space: nowrap; }
.btn-pink { background: var(--pink); color: #fff; }
.btn-pink:hover { background: var(--pink-deep); }
.btn-line { border: 1px solid var(--line); color: var(--fg); }
.btn-line:hover { border-color: var(--lilac); }

/* risk strip: always visible near the top */
.risk-strip { background: var(--panel); border-bottom: 1px solid var(--line); font-size: 0.9rem; color: var(--muted); }
.risk-strip .wrap { padding-block: 10px; }
.risk-strip b { color: var(--soft); }

/* hero */
.hero { padding-block: clamp(56px, 10vw, 120px); display: grid; gap: 28px; }
.hero h1 span { color: var(--pink); }
.hero .lede { font-size: 1.25rem; color: var(--soft); max-width: 46ch; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.facts { display: flex; flex-wrap: wrap; gap: 10px 28px; color: var(--muted); font-size: 0.95rem; padding-top: 8px; }
.facts span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); margin-right: 10px; vertical-align: middle; }

section.block { padding-block: clamp(48px, 8vw, 88px); border-top: 1px solid var(--line); display: grid; gap: 32px; }
.head { display: grid; gap: 12px; }

/* how it works: a real sequence, so numbered */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; counter-reset: s; }
.steps li { counter-increment: s; border: 1px solid var(--line); border-radius: 14px; padding: 24px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.steps li::before { content: counter(s, decimal-leading-zero); font: 700 2.4rem var(--display); color: var(--pink); line-height: 1; }

/* fees */
.fee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 760px) { .fee { grid-template-columns: 1fr; } }
.big { font: 700 clamp(5rem, 16vw, 9rem)/0.9 var(--display); color: var(--pink); }
.fee ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 10px; }
.example { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px; display: grid; gap: 6px; font-variant-numeric: tabular-nums; }
.example .row { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px dashed var(--line); padding-block: 6px; }
.example .row:last-child { border-bottom: 0; color: var(--fg); font-weight: 600; }

/* two-up panels */
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 26px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.panel .actions { padding-top: 6px; }

.socials { display: flex; flex-wrap: wrap; gap: 10px; }

.risks { border: 1px solid var(--pink-deep); border-radius: 14px; padding: 26px; display: grid; gap: 12px; }
.risks ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 8px; }

footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 0.92rem; }
footer .wrap { padding-block: 36px; display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
footer a { color: var(--soft); }

/* legal pages */
.doc { padding-block: 48px 80px; display: grid; gap: 22px; max-width: 46rem; }
.doc h1 { font-size: clamp(2.4rem, 7vw, 3.6rem); }
.doc h2 { font-size: 1.7rem; padding-top: 14px; }
.doc ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 6px; max-width: 62ch; }
.doc .updated { color: var(--muted); }