/* ===== OH YEAH TRADING — styles ===== */
:root{
  --bg:#1b2336;
  --bg-soft:#222c42;
  --card:#27324a;
  --card-2:#2f3b56;
  --line:#3a465f;
  --text:#eef2f8;
  --muted:#a3aec1;
  --accent:#2bd49a;      /* green = payout / OH YEAH */
  --accent-2:#4fd6ff;    /* cyan = active */
  --danger:#f56673;      /* red = failed / OH NO */
  --warn:#f7bd4f;        /* amber = firm closed */
  --secured:#c084fc;     /* purple = secured payout then firm closed */
  --shadow:0 10px 30px rgba(0,0,0,.40);
  --radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(1100px 560px at 78% -12%,#2a4a6e 0%,transparent 55%),radial-gradient(900px 500px at 8% 0%,#3a2a55 0%,transparent 50%),var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
a{color:inherit;text-decoration:none}
.container{max-width:1080px;margin:0 auto;padding:0 22px}

/* ---- top nav ---- */
.nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(10px);
  background:rgba(11,14,20,.72);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.3px}
.brand .dot{width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent)}
.brand small{display:block;font-weight:500;color:var(--muted);font-size:11px;letter-spacing:2px}
.nav-links{display:flex;gap:6px}
.nav-links a{
  padding:9px 16px;border-radius:10px;color:var(--muted);font-weight:600;font-size:14px;
  transition:.18s;
}
.nav-links a:hover{color:var(--text);background:var(--card)}
.nav-links a.cta{color:#04110c;background:var(--accent)}
.nav-links a.cta:hover{filter:brightness(1.08)}

/* ---- hero ---- */
.hero{padding:54px 0 24px}
.hero h1{font-size:clamp(30px,5vw,46px);line-height:1.08;margin:0 0 14px;font-weight:800}
.hero h1 .grad{background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--muted);font-size:17px;max-width:640px;margin:0}

/* ---- stat cards ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:34px 0}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px;box-shadow:var(--shadow)}
.stat .k{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.stat .v{font-size:26px;font-weight:800;margin-top:6px}
.stat.spend .v{color:var(--danger)}
.stat.payout .v{color:var(--accent)}
.stat.accounts .v{color:var(--accent-2)}
.stat .sub{font-size:12px;color:var(--muted);margin-top:2px}

/* ---- section ---- */
.section{margin:46px 0}
.section h2{font-size:22px;margin:0 0 4px}
.section .lead{color:var(--muted);margin:0 0 22px}

/* ---- chart layout ---- */
.chart-wrap{
  display:grid;grid-template-columns:360px 1fr;gap:26px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow)
}
.wheel-box{position:relative}
.wheel-center{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  pointer-events:none;text-align:center
}
.wheel-center .big{font-size:24px;font-weight:800;color:var(--danger)}
.wheel-center .small{font-size:12px;color:var(--muted);letter-spacing:1px}
/* Oh No vs Oh Yeah scoreboard in the wheel hole */
.score{display:flex;flex-direction:column;gap:6px;transition:opacity .15s}
.score .row{font-size:18px;font-weight:800;line-height:1.1}
.score .row.oy{color:var(--accent)}
.score .row.on{color:var(--danger)}
.score .row span{font-size:26px}
.score .vs{font-size:11px;color:var(--muted);letter-spacing:3px;margin:1px 0}
.verdict{font-size:30px;font-weight:900;line-height:1.05;animation:pop .18s ease}
.verdict.oy{color:var(--accent)} .verdict.on{color:var(--danger)}
.verdict small{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-top:6px;letter-spacing:.5px}
@keyframes pop{from{transform:scale(.82);opacity:.3}to{transform:scale(1);opacity:1}}
.hint{font-size:13px;color:var(--muted);margin-top:14px;text-align:center}

/* ---- firm grid ---- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.firm-card{
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;
  transition:.18s;cursor:pointer;display:block;position:relative;overflow:hidden
}
.firm-card:hover{transform:translateY(-3px);border-color:#2f3b4f;box-shadow:var(--shadow)}
.firm-card .bar{position:absolute;left:0;top:0;bottom:0;width:4px}
.firm-card h3{margin:0 0 8px;font-size:16px;padding-left:6px}
.firm-row{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);padding-left:6px}
.firm-row b{color:var(--text);font-weight:600}
.firm-card .tag{
  display:inline-block;margin-top:10px;margin-left:6px;font-size:11px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;padding:3px 9px;border-radius:20px
}
.tag.payout{background:rgba(43,212,154,.16);color:var(--accent)}
.tag.active{background:rgba(79,214,255,.15);color:var(--accent-2)}
.tag.failed{background:rgba(245,102,115,.15);color:var(--danger)}
.tag.firm-closed{background:rgba(247,189,79,.16);color:var(--warn)}
.tag.secured-lost{background:rgba(192,132,252,.18);color:var(--secured)}
.bar.payout{background:var(--accent)} .bar.active{background:var(--accent-2)}
.bar.failed{background:var(--danger)} .bar.firm-closed{background:var(--warn)}
.bar.secured-lost{background:var(--secured)}

/* ---- firm detail page ---- */
.back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:600;margin:26px 0 8px}
.back:hover{color:var(--text)}
.detail-head{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:8px}
.detail-head h1{font-size:34px;margin:0}
.detail-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:24px 0}
.story{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;box-shadow:var(--shadow)}
.story p{margin:0 0 14px;color:#cdd6e2}
.story p:last-child{margin:0}
.callout{border-left:3px solid var(--warn);background:rgba(245,177,61,.07);padding:14px 18px;border-radius:0 10px 10px 0;margin:18px 0;color:#f0d9ab}

/* ---- journal ---- */
.post{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;margin-bottom:16px;box-shadow:var(--shadow)}
.post .date{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--accent-2)}
.post h2{margin:6px 0 12px;font-size:22px}
.post p{margin:0 0 12px;color:#cdd6e2}
.post p:last-child{margin:0}

/* ---- footer ---- */
.footer{border-top:1px solid var(--line);margin-top:60px;padding:26px 0;color:var(--muted);font-size:13px;text-align:center}

/* ---- responsive ---- */
@media(max-width:820px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .detail-stats{grid-template-columns:repeat(2,1fr)}
  .chart-wrap{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .grid{grid-template-columns:1fr}
  .nav-links a{padding:8px 11px}
}