/* 7FX Traders — black gold terminal. Tokens mirror the 7FX design system. */
:root{
  --ink-050:#0c0e12; --ink-000:#040506; --ink-100:#0f1114; --ink-200:#1e2126; --ink-300:#2c3037;
  --gold-100:#fbe3a0; --gold-300:#f7cb5d; --gold-500:#e3ae3a; --gold-700:#d69111; --gold-900:#9a5f08;
  --silver-300:#c8c7c8; --silver-500:#969796; --paper:#f2f0ea; --profit:#2bd48f; --loss:#ff5a5f;
  --glow:rgba(227,174,58,.30); --haze:rgba(227,174,58,.10); --line:rgba(227,174,58,.55);
  --display:Montserrat,"Inter Tight",Arial,sans-serif; --sans:Inter,system-ui,Arial,sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--paper);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;
  background:radial-gradient(900px 600px at 100% 0%,var(--glow),transparent 60%),radial-gradient(700px 600px at 0% 60%,var(--haze),transparent 70%),linear-gradient(180deg,var(--ink-050),var(--ink-000) 40%);
  background-color:var(--ink-000);background-attachment:fixed;min-height:100vh}
a{color:var(--gold-300)}
:focus-visible{outline:2px solid var(--gold-300);outline-offset:3px}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}

/* header */
.top{position:sticky;top:0;z-index:10;background:rgba(4,5,6,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--ink-200)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{height:33px;width:auto}
.brand span{color:var(--silver-300);font-size:13px;font-weight:600;letter-spacing:.3em}

/* type */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-300)}
.eyebrow::before{content:"";width:32px;height:2px;background:linear-gradient(90deg,var(--gold-300),var(--gold-700))}
h1,h2{font-family:var(--display);font-weight:800;letter-spacing:-.02em;margin:0;text-wrap:balance}
h1{font-size:clamp(38px,6.4vw,72px);line-height:1.02}
h2{font-size:clamp(26px,3.4vw,36px);line-height:1.1}
.metal{background:linear-gradient(170deg,var(--gold-100) 0%,var(--gold-300) 28%,var(--gold-500) 52%,var(--gold-900) 80%,var(--gold-300) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(17px,2vw,20px);color:var(--silver-300);max-width:680px;margin:0}
.small{font-size:13px;color:var(--silver-500)}

/* buttons, chips */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:999px;font:600 15px var(--sans);text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.btn.sm{padding:8px 16px;font-size:13.5px}
.btn.gold{color:var(--ink-000);background:linear-gradient(170deg,var(--gold-100),var(--gold-300) 35%,var(--gold-500) 65%,var(--gold-700));box-shadow:0 10px 30px -10px var(--glow)}
.btn.gold:hover{filter:brightness(1.07)}
.btn.ghost{color:var(--paper);background:transparent;border-color:var(--ink-300)}
.btn.ghost:hover{border-color:var(--gold-500);color:var(--gold-300)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;padding:6px 14px;border-radius:999px;border:1.5px solid currentColor;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.chip.gold{color:var(--ink-000);border-color:transparent;background:linear-gradient(135deg,var(--gold-100),var(--gold-500) 55%,var(--gold-700))}
.chip.silver{color:var(--silver-300);border-color:var(--ink-300)}
.chip.todo{color:var(--silver-500)} .chip.pass{color:var(--profit)} .chip.fail{color:var(--loss)} .chip.thin{color:var(--gold-300)}

/* sections */
main{display:grid;gap:clamp(56px,8vw,96px);padding-bottom:40px}
main{grid-template-columns:minmax(0,1fr)}
main>*{min-width:0;width:100%}
.hero{padding-top:clamp(56px,9vw,110px)}
.hero.sm{padding-top:40px}
.hero .wrap{display:grid;gap:22px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.back{color:var(--silver-500);text-decoration:none;font-size:14px;width:fit-content}
.back:hover{color:var(--gold-300)}
.sec-h{display:grid;gap:10px;margin-bottom:22px}
.sec-h.row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.acts{display:flex;gap:10px;flex-wrap:wrap}

.panel,.pl,.pk{border:1px solid transparent;border-radius:16px;
  background:linear-gradient(160deg,var(--ink-100),var(--ink-000)) padding-box,linear-gradient(140deg,var(--line),var(--ink-200) 35%,var(--ink-200) 70%,var(--haze)) border-box}

.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pl{padding:26px;display:grid;gap:10px;align-content:start}
.pl .n{font-family:var(--mono);color:var(--gold-500);font-size:14px}
.pl b{font-family:var(--display);font-size:20px}
.pl p{margin:0;color:var(--silver-300);font-size:15px}

.pks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pk{padding:24px;display:grid;gap:8px;text-decoration:none;color:var(--paper);align-content:start}
.pk:hover{box-shadow:0 20px 50px -25px var(--glow)}
.pk .kw{font-family:var(--mono);font-size:13px;color:var(--ink-000);background:var(--gold-500);border-radius:6px;padding:2px 8px;width:fit-content;font-weight:700}
.pk b{font-family:var(--display);font-size:21px;line-height:1.2}
.pk span:not(.kw){color:var(--silver-300);font-size:15px}
.pk em{font-style:normal;font-weight:600;color:var(--gold-300);font-size:14px;margin-top:6px}
.pk.soon{opacity:.6}
.pk.soon .kw{background:var(--ink-300);color:var(--silver-300)}
.pk.soon em{color:var(--silver-500)}

.steps3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:s}
.steps3 li{counter-increment:s;display:grid;gap:6px;padding:22px 0 0;border-top:2px solid var(--ink-300)}
.steps3 li::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);color:var(--gold-500);font-size:14px}
.steps3 li:first-child{border-top-color:var(--gold-500)}
.steps3 b{font-family:var(--display);font-size:19px}
.steps3 span{color:var(--silver-300);font-size:15px}

.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.rules{margin:0;padding:8px 24px}
.rule{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:16px 0;border-top:1px solid var(--ink-200)}
.rule:first-child{border-top:0}
.rule dt{font-family:var(--mono);font-size:13px;color:var(--gold-300);text-transform:uppercase;padding-top:2px}
.rule dd{margin:0;font-size:15.5px}
.howto{margin:0;padding:22px 24px 22px 46px;display:grid;gap:14px;font-size:15.5px;color:var(--silver-300)}
.howto b{color:var(--paper)}
.howto li::marker{color:var(--gold-500);font-family:var(--mono)}

.code{max-width:100%;margin:0;max-height:520px;overflow:auto;background:var(--ink-100);border:1px solid var(--ink-200);border-radius:14px;padding:20px;font:13px/1.6 var(--mono);color:var(--silver-300);white-space:pre}
.note{color:var(--silver-300);border-left:2px solid var(--gold-500);padding-left:14px;margin:18px 0 8px}

/* footer */
.foot{padding-block:40px 56px;border-top:1px solid var(--ink-200);margin-top:40px}
.foot .wrap{display:grid;gap:12px;justify-items:center;text-align:center}
.divider{display:flex;align-items:center;gap:16px;width:100%;max-width:420px}
.divider::before{content:"";flex:1;height:2px;background:linear-gradient(90deg,transparent,var(--gold-500))}
.divider::after{content:"";flex:1;height:2px;background:linear-gradient(90deg,var(--gold-500),transparent)}
.divider svg{width:30px;height:28px;fill:var(--gold-500)}
.disc{max-width:640px;margin:0;color:var(--silver-500);font-size:13.5px}

@media (max-width:820px){
  .pillars,.pks,.steps3,.two{grid-template-columns:1fr}
  .rule{grid-template-columns:96px minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}