/* ══════════════════════════════════════════════════
   FAST TRACK TRADING — BRAND TOKENS
   Single source of truth. Every page loads this file.
   Change a colour here, it changes everywhere.
   ══════════════════════════════════════════════════ */

:root{
  /* ── CORE PALETTE ──
     Derived from the logo. Background matches the logo's field exactly,
     so the mark sits on the page seamlessly with no visible box. */
  --bg:#060810;              /* page background — logo field */
  --surface:#0C1018;         /* cards, panels */
  --surface2:#121724;        /* raised elements */
  --border:rgba(255,255,255,0.07);
  --border2:rgba(255,255,255,0.12);

  /* ── TEXT ── */
  --text:#EAEEF5;
  --muted:#6B7789;
  --muted2:#2A3242;

  /* ── BRAND ACCENT — sampled from the logo ── */
  --brand:#0A7CFF;                        /* primary — the mark's glow */
  --brand-bright:#4DA3FF;                 /* links, small text (contrast) */
  --brand-deep:#003FF5;                   /* the TRADING wordmark blue */
  --brand-dim:rgba(10,124,255,0.10);
  --brand-border:rgba(10,124,255,0.32);
  --brand-glow:rgba(10,124,255,0.45);

  /* ── SECONDARY — premium / paid tiers ── */
  --gold:#C6A96B;
  --gold-dim:rgba(198,169,107,0.08);
  --gold-border:rgba(198,169,107,0.30);

  /* ── STATUS ONLY (not brand colours — never use for accents) ── */
  --green:#3ECF8E;           /* live / open / success */
  --green-dim:rgba(62,207,142,0.10);
  --green-border:rgba(62,207,142,0.28);
  --red:#F87171;
  --amber:#FBBF24;

  /* ── LEGACY ALIASES — old green vars now point at brand blue ── */
  --accent:var(--brand);

  /* ── TYPE FAMILIES ── */
  --display:'Archivo',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --font:var(--mono);

  /* ── TYPE SCALE — use these, never rogue values ──
     display : hero headlines only
     h1      : page titles
     h2      : section titles
     h3      : card titles
     body    : paragraphs
     small   : secondary text
     micro   : labels, eyebrows, buttons (always uppercase + tracked) */
  --fs-display:clamp(34px,6.5vw,64px);
  --fs-h1:clamp(28px,5vw,46px);
  --fs-h2:clamp(22px,3.6vw,34px);
  --fs-h3:19px;
  --fs-body:14px;
  --fs-small:12px;
  --fs-micro:10px;

  --lh-tight:1.05;
  --lh-heading:1.2;
  --lh-body:1.8;

  --ls-display:-0.035em;
  --ls-heading:-0.025em;
  --ls-body:0.01em;
  --ls-micro:0.16em;

  --fw-display:800;
  --fw-heading:700;
  --fw-body:400;
  --fw-label:500;

  /* ── LAYOUT ── */
  --wrap:1080px;
  --radius:0px;              /* sharp corners — brand rule, do not round */
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--mono);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}
a{color:inherit}
img{max-width:100%;display:block}

/* ── SHARED NAV ── */
.ftt-nav{
  position:sticky;top:0;z-index:200;
  background:rgba(6,8,16,0.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.ftt-nav-in{
  max-width:var(--wrap);margin:0 auto;
  padding:0 24px;height:52px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.ftt-logo{display:flex;align-items:center;gap:9px;text-decoration:none;flex-shrink:0}
.ftt-logo-mark{
  width:30px;height:30px;flex-shrink:0;
  object-fit:contain;
  filter:drop-shadow(0 0 8px var(--brand-glow));
}
.ftt-logo-text{font-size:12px;font-weight:600;letter-spacing:0.04em;color:var(--text);white-space:nowrap}
.ftt-logo-text b{color:var(--brand-bright);font-weight:600}

.ftt-nav-links{display:flex;gap:4px;align-items:center}
.ftt-nav-links a{
  font-size:10px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;padding:8px 12px;
  transition:color 0.15s;white-space:nowrap;
}
.ftt-nav-links a:hover{color:var(--text)}
.ftt-nav-links a.active{color:var(--brand-bright)}
.ftt-nav-cta{
  font-size:10px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--brand-bright);text-decoration:none;
  border:1px solid var(--brand-border);padding:8px 14px;
  transition:background 0.15s;white-space:nowrap;
}
.ftt-nav-cta:hover{background:var(--brand-dim)}

.ftt-burger{
  display:none;background:transparent;border:1px solid var(--border2);
  color:var(--muted);font-family:var(--mono);font-size:10px;
  letter-spacing:0.12em;padding:7px 11px;cursor:pointer;
}
.ftt-burger:hover{color:var(--brand-bright);border-color:var(--brand-border)}

.ftt-mobile-menu{
  display:none;border-top:1px solid var(--border);
  background:var(--bg);padding:8px 24px 16px;
}
.ftt-mobile-menu.open{display:block}
.ftt-mobile-menu a{
  display:block;padding:12px 0;font-size:11px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;
  border-bottom:1px solid var(--border);
}
.ftt-mobile-menu a:last-child{border-bottom:none}
.ftt-mobile-menu a.active{color:var(--brand-bright)}

@media(max-width:820px){
  .ftt-nav-links,.ftt-nav-cta{display:none}
  .ftt-burger{display:block}
}

/* ── SHARED FOOTER ── */
.ftt-footer{border-top:1px solid var(--border);margin-top:64px}
.ftt-footer-in{max-width:var(--wrap);margin:0 auto;padding:36px 24px}
.ftt-footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;
  gap:32px;margin-bottom:32px;
}
.ftt-footer-col h4{
  font-size:9px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px;font-weight:500;font-family:var(--mono);
}
.ftt-footer-col a{
  display:block;font-size:11px;color:var(--muted);
  text-decoration:none;padding:5px 0;transition:color 0.15s;
}
.ftt-footer-col a:hover{color:var(--brand-bright)}
.ftt-footer-blurb{font-size:11px;color:var(--muted);line-height:1.8;max-width:280px}
.ftt-footer-bottom{
  border-top:1px solid var(--border);padding-top:20px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.ftt-footer-bottom p{font-size:9px;color:var(--muted2);letter-spacing:0.08em;line-height:1.8}
.ftt-risk{
  font-size:9px;color:var(--muted2);line-height:1.8;
  max-width:640px;margin-top:12px;
}
@media(max-width:700px){
  .ftt-footer-grid{grid-template-columns:1fr;gap:24px}
}

/* ── SHARED UTILITIES ── */
.ftt-wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.ftt-eyebrow{
  font-size:9px;letter-spacing:0.24em;text-transform:uppercase;
  color:var(--brand-bright);font-family:var(--mono);
}
.ftt-btn{
  display:inline-block;font-family:var(--mono);font-size:10px;
  letter-spacing:0.14em;text-transform:uppercase;text-decoration:none;
  padding:13px 24px;border:1px solid var(--border2);color:var(--muted);
  transition:all 0.15s;cursor:pointer;background:transparent;
}
.ftt-btn:hover{border-color:var(--brand-border);color:var(--brand-bright)}
.ftt-btn-primary{border-color:var(--brand);color:var(--brand-bright)}
.ftt-btn-primary:hover{background:var(--brand-dim);box-shadow:0 0 24px var(--brand-dim)}
.ftt-btn-gold{border-color:var(--gold-border);color:var(--gold)}
.ftt-btn-gold:hover{background:var(--gold-dim)}

/* ══════════════════════════════════════════════════
   TYPE SCALE — apply these classes, don't invent sizes
   ══════════════════════════════════════════════════ */
.t-display{font-family:var(--display);font-size:var(--fs-display);font-weight:var(--fw-display);line-height:var(--lh-tight);letter-spacing:var(--ls-display)}
.t-h1{font-family:var(--display);font-size:var(--fs-h1);font-weight:var(--fw-display);line-height:var(--lh-heading);letter-spacing:var(--ls-display)}
.t-h2{font-family:var(--display);font-size:var(--fs-h2);font-weight:var(--fw-heading);line-height:var(--lh-heading);letter-spacing:var(--ls-heading)}
.t-h3{font-family:var(--display);font-size:var(--fs-h3);font-weight:var(--fw-heading);line-height:1.3;letter-spacing:var(--ls-heading)}
.t-body{font-family:var(--mono);font-size:var(--fs-body);font-weight:var(--fw-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);color:var(--muted)}
.t-small{font-family:var(--mono);font-size:var(--fs-small);line-height:1.75;color:var(--muted)}
.t-micro{font-family:var(--mono);font-size:var(--fs-micro);font-weight:var(--fw-label);letter-spacing:var(--ls-micro);text-transform:uppercase}

/* Highlight a key term in body or heading copy */
.hl{color:var(--brand-bright)}
.hl-glow{color:var(--brand-bright);text-shadow:0 0 24px rgba(10,124,255,0.45)}

/* ══════════════════════════════════════════════════
   VIBRANCY — accent lines, dividers, glow
   ══════════════════════════════════════════════════ */
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--brand-border),transparent);border:none;margin:0}
.rule-left{height:1px;background:linear-gradient(90deg,var(--brand),transparent);border:none;width:64px;margin:0 0 18px}
.section-marked{position:relative}
.section-marked::before{
  content:'';position:absolute;left:0;top:0;width:2px;height:44px;
  background:linear-gradient(180deg,var(--brand),transparent);
}

/* ── SHARED SECTION HEADER ── */
.sec-head{margin-bottom:36px}
.sec-head .ftt-eyebrow{display:block;margin-bottom:12px}
.sec-title{font-family:var(--display);font-size:var(--fs-h2);font-weight:var(--fw-heading);letter-spacing:var(--ls-heading);line-height:var(--lh-heading);margin-bottom:12px}
.sec-sub{font-family:var(--mono);font-size:var(--fs-small);color:var(--muted);line-height:var(--lh-body);max-width:540px}

/* ── STAT BLOCK (proof) — feature treatment ── */
.statrow{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  position:relative;background:
    radial-gradient(120% 180% at 50% 0%, rgba(10,124,255,0.07), transparent 62%);
}
.statrow::before{
  content:'';position:absolute;top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);
  opacity:.65;
}
.stat{padding:38px 16px;text-align:center;border-right:1px solid var(--border);position:relative}
.stat:last-child{border-right:none}
.stat-n{
  font-family:var(--display);font-size:clamp(30px,5vw,46px);font-weight:800;
  letter-spacing:-0.035em;line-height:1;color:var(--text);
}
.stat-n span{color:var(--brand-bright);text-shadow:0 0 26px rgba(10,124,255,0.5)}
.stat-l{
  font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:var(--ls-micro);
  text-transform:uppercase;color:var(--muted);margin-top:10px;
}
@media(max-width:820px){
  .statrow{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:none}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--border)}
  .stat{padding:26px 12px}
}

/* ── ACCESSIBILITY ── */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}