:root{
  --bg:#070a12;
  --ink:#e9edf6;
  --ink-dim:#98a3bb;
  --line:rgba(148,163,184,.16);
  --glass:rgba(19,25,40,.66);
  --green:#34d399;
  --red:#fb7185;
  --blue:#60a5fa;
  --violet:#a78bfa;
  --radius:20px;
  --maxw:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Segoe UI",Inter,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.bg-glow{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(720px 480px at 12% -6%, rgba(96,165,250,.20), transparent 62%),
    radial-gradient(680px 520px at 92% 4%, rgba(167,139,250,.16), transparent 60%),
    radial-gradient(900px 700px at 50% 108%, rgba(52,211,153,.12), transparent 62%);
}
#bg-particles{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- HERO ---------- */
.hero{padding:104px 0 72px;text-align:center;position:relative}
.badge{
  display:inline-block;padding:7px 16px;border:1px solid var(--line);
  border-radius:999px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim);background:rgba(255,255,255,.03);backdrop-filter:blur(8px);
}
.hero-title{
  font-size:clamp(2.6rem,7vw,5.2rem);line-height:1.02;margin:22px 0 10px;
  font-weight:800;letter-spacing:-.035em;
  background:linear-gradient(102deg,#fff 8%,#9dc0ff 46%,#c7b6ff 82%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-title .ch{display:inline-block;will-change:transform,opacity}
.hero-sub{margin:0 0 6px;color:var(--ink-dim);font-size:1.06rem}
.hero-sub strong{color:var(--ink);font-weight:600}
.hero-period{margin:0;color:var(--ink-dim);font-size:.92rem;letter-spacing:.05em}

.hero-stats{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:44px 0 40px;
}
.hero-stat{
  min-width:210px;padding:20px 26px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--glass);backdrop-filter:blur(14px);text-align:left;
}
.hs-label{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.13em;color:var(--ink-dim)}
.hs-value{display:block;margin-top:8px;font-size:1.72rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.accent-green{color:var(--green)}

.scroll-cue{
  display:inline-flex;align-items:center;gap:9px;color:var(--ink-dim);
  text-decoration:none;font-size:.9rem;border:1px solid var(--line);
  padding:10px 20px;border-radius:999px;transition:color .2s,border-color .2s,background .2s;
}
.scroll-cue:hover{color:var(--ink);border-color:rgba(148,163,184,.4);background:rgba(255,255,255,.04)}
.scroll-cue svg{animation:bob 1.9s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ---------- SECTIONS ---------- */
.section{padding:74px 0}
.sec-title{font-size:clamp(1.6rem,3.2vw,2.3rem);margin:0 0 10px;font-weight:750;letter-spacing:-.025em}
.sec-lead{margin:0 0 30px;color:var(--ink-dim);max-width:62ch;line-height:1.6}

.card{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--glass);backdrop-filter:blur(14px);padding:26px;
  box-shadow:0 24px 60px -34px rgba(0,0,0,.9);
}

/* ---------- KPI ---------- */
.kpi-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}
.kpi{
  border:1px solid var(--line);border-radius:var(--radius);padding:22px;
  background:var(--glass);backdrop-filter:blur(14px);position:relative;overflow:hidden;
}
.kpi::after{
  content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--kc,var(--blue)),transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1s cubic-bezier(.2,.85,.25,1);
}
.kpi.lit::after{transform:scaleX(1)}
.kpi-label{font-size:.74rem;text-transform:uppercase;letter-spacing:.13em;color:var(--ink-dim)}
.kpi-value{margin-top:10px;font-size:1.62rem;font-weight:750;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi-note{margin-top:6px;font-size:.82rem;color:var(--ink-dim)}

/* ---------- CHARTS ---------- */
.chart-card{position:relative}
.chart-host svg{display:block;width:100%;height:auto;overflow:visible}
.grid-line{stroke:rgba(148,163,184,.13);stroke-width:1}
.axis-text{fill:#8b96ae;font-size:11px;font-family:inherit}
.axis-text.strong{fill:#c3cbdc}

.dot{cursor:pointer}

.bar{cursor:pointer}
.bar:hover{filter:brightness(1.18)}

.legend{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:14px}
.legend-item{display:flex;align-items:center;gap:8px;font-size:.86rem;color:var(--ink-dim)}
.legend-swatch{width:11px;height:11px;border-radius:3px}

.chart-tip{
  position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-118%);
  background:rgba(10,14,24,.96);border:1px solid var(--line);border-radius:12px;
  padding:10px 13px;font-size:.82rem;white-space:nowrap;z-index:5;
  box-shadow:0 16px 34px -18px #000;
}
.chart-tip b{display:block;font-size:.9rem;margin-bottom:4px}
.chart-tip .tl{display:flex;justify-content:space-between;gap:16px;color:var(--ink-dim)}
.chart-tip .tl span:last-child{color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- DONUT ---------- */
.split{display:grid;gap:20px;grid-template-columns:minmax(280px,.9fr) 1.1fr}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.donut-card{position:relative;display:flex;align-items:center;justify-content:center;min-height:330px}
.donut-center{position:absolute;text-align:center;pointer-events:none;max-width:60%}
.dc-label{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-dim)}
.dc-value{display:block;font-size:1.62rem;font-weight:750;margin-top:6px;font-variant-numeric:tabular-nums}
.dc-sub{display:block;font-size:.8rem;color:var(--ink-dim);margin-top:4px}
.arc{cursor:pointer;transition:opacity .2s}

.cat-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.cat-item{cursor:pointer;padding:12px 14px;border-radius:14px;border:1px solid transparent;transition:background .2s,border-color .2s}
.cat-item:hover,.cat-item.active{background:rgba(255,255,255,.045);border-color:var(--line)}
.cat-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.cat-name{display:flex;align-items:center;gap:9px;font-weight:600;font-size:.96rem}
.cat-vals{font-size:.88rem;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.cat-vals b{color:var(--ink);font-weight:650}
.cat-track{height:7px;border-radius:99px;background:rgba(148,163,184,.14);overflow:hidden}
.cat-fill{height:100%;width:0;border-radius:99px}

/* ---------- MONTH EXPLORER ---------- */
.month-chips{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:20px}
.chip{
  padding:9px 17px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.02);color:var(--ink-dim);cursor:pointer;
  font-size:.88rem;font-family:inherit;transition:color .2s,border-color .2s,background .2s;
}
.chip:hover{color:var(--ink)}
.chip.active{color:#06111f;background:linear-gradient(120deg,#9dc0ff,#c7b6ff);border-color:transparent;font-weight:650}

.month-head{display:flex;flex-wrap:wrap;gap:16px;align-items:baseline;justify-content:space-between;margin-bottom:22px}
.month-head h3{margin:0;font-size:1.4rem;font-weight:700;letter-spacing:-.02em}
.month-math{display:flex;gap:10px;flex-wrap:wrap;font-size:.86rem;color:var(--ink-dim);align-items:center}
.mm{padding:6px 12px;border:1px solid var(--line);border-radius:999px;font-variant-numeric:tabular-nums}
.mm b{color:var(--ink)}
.mm.res b{color:var(--green)}
.mm-op{color:#5f6b83}

.ledger{display:grid;gap:24px;grid-template-columns:1fr 1fr}
@media (max-width:760px){.ledger{grid-template-columns:1fr}}
.ledger-h{margin:0 0 12px;font-size:.76rem;text-transform:uppercase;letter-spacing:.13em}
.ledger-h.in{color:var(--green)}
.ledger-h.out{color:var(--red)}
.ledger-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.entry{
  display:grid;grid-template-columns:58px 1fr auto;gap:12px;align-items:center;
  padding:11px 12px;border-radius:12px;font-size:.92rem;
}
.entry:hover{background:rgba(255,255,255,.035)}
.entry-date{color:#6f7b93;font-size:.8rem;font-variant-numeric:tabular-nums}
.entry-desc{color:#d5dcea;line-height:1.35}
.entry-cat{display:inline-block;margin-left:8px;font-size:.68rem;padding:2px 7px;border-radius:99px;vertical-align:middle}
.entry-val{font-variant-numeric:tabular-nums;font-weight:650}
.entry-val.in{color:var(--green)}
.entry-val.out{color:#f2b8c1}
.entry.total{border-top:1px solid var(--line);border-radius:0;margin-top:8px;padding-top:14px;font-weight:700}
.entry.total .entry-desc{color:var(--ink)}

/* ---------- RANKING ---------- */
.rank-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.rank{display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:center}
.rank-pos{font-size:.9rem;color:#5f6b83;font-variant-numeric:tabular-nums;text-align:right}
.rank-top{display:flex;justify-content:space-between;gap:14px;margin-bottom:7px;font-size:.92rem}
.rank-desc{color:#d5dcea}
.rank-when{color:#6f7b93;font-size:.8rem}
.rank-val{font-variant-numeric:tabular-nums;font-weight:650;white-space:nowrap}
.rank-track{height:8px;border-radius:99px;background:rgba(148,163,184,.13);overflow:hidden}
.rank-fill{height:100%;width:0;border-radius:99px}

/* ---------- NOTES ---------- */
.notes{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.note{border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:var(--glass)}
.note h4{margin:0 0 8px;font-size:.95rem}
.note p{margin:0;color:var(--ink-dim);font-size:.88rem;line-height:1.6}
.note .tag{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:#6f7b93;display:block;margin-bottom:8px}

/* ---------- FOOTER ---------- */
.footer{padding:52px 0 68px;border-top:1px solid var(--line);text-align:center}
.footer p{margin:0 0 6px;font-size:.88rem;color:var(--ink-dim)}
.footer .muted{color:#5f6b83;font-size:.82rem}
.footer a{color:var(--blue);text-decoration:none}
.footer a:hover{text-decoration:underline}

[data-reveal]{opacity:0}

@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1 !important;transform:none !important}
  .scroll-cue svg{animation:none}
  #bg-particles{display:none}
}