:root{
  --bg:#0d0f12;
  --bg-2:#111318;
  --panel:rgba(28,31,38,.55);
  --panel-2:rgba(20,22,27,.72);
  --line:rgba(255,255,255,.08);
  --text:#f3f4f6;
  --muted:#b9bec9;
  --soft:#8a909c;
  --accent:#e9edf5;
  --green:#7fe0ba;
  --red:#f08a8a;
  --amber:#ffd18a;
  --shadow:0 18px 40px rgba(0,0,0,.35);
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Quicksand",system-ui,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#090a0d 0%,#0d0f12 45%,#0b0c10 100%);
  overflow-x:hidden;
}
.bg-grid{
  position:fixed; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,0));
  pointer-events:none;
}
.bg-orb{
  position:fixed; border-radius:50%; filter:blur(70px); opacity:.22; pointer-events:none;
  animation:float 14s ease-in-out infinite;
}
.orb-1{ width:280px;height:280px; background:#5e636d; top:40px; left:-50px;}
.orb-2{ width:360px;height:360px; background:#2a2f39; right:-80px; top:200px; animation-delay:-7s;}
@keyframes float{50%{transform:translateY(35px) translateX(12px) scale(1.06)}}

.shell{ width:min(1280px, calc(100% - 32px)); margin:24px auto 80px; position:relative; z-index:2;}
.glass{
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.topbar{
  width:min(1280px, calc(100% - 32px));
  margin:20px auto 0;
  padding:20px 24px;
  border-radius:26px;
  display:flex; gap:24px; justify-content:space-between; align-items:flex-start;
  position:sticky; top:14px; z-index:10;
}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--soft);
  font-size:.72rem;
  font-weight:700;
}
h1,h2,h3,h4{margin:0; line-height:1.05}
h1{font-size:clamp(1.6rem,4vw,2.7rem); letter-spacing:-.04em}
.subcopy{max-width:820px; color:var(--muted); margin:.8rem 0 0; line-height:1.6}
.topnav{display:flex; gap:12px; flex-wrap:wrap}
.topnav a,.button{
  text-decoration:none;
  color:var(--text);
  border:1px solid var(--line);
  padding:12px 16px;
  border-radius:999px;
  transition:transform .25s ease, background .25s ease, border-color .25s ease;
}
.topnav a:hover,.button:hover{transform:translateY(-2px); background:rgba(255,255,255,.06)}

.hero{
  padding:28px 8px 8px;
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:18px;
  align-items:stretch;
}
.hero-copy{
  padding:28px;
  border-radius:28px;
  position:relative;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.08), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.hero-copy h2{font-size:clamp(1.7rem,4vw,3.4rem); letter-spacing:-.05em; max-width:11ch; margin-top:10px}
.hero-copy p{color:var(--muted); font-size:1.05rem; line-height:1.75; max-width:58ch}
.tag{
  display:inline-flex; padding:8px 12px; border-radius:999px; border:1px solid var(--line);
  background:rgba(255,255,255,.05); color:#d6dae2; font-size:.88rem
}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px}
.button.primary{
  background:linear-gradient(180deg,#f0f1f3,#cfd4de);
  color:#111318; font-weight:700;
}
.button.secondary{background:rgba(255,255,255,.03)}
.hero-stats{display:grid; gap:16px}
.mini-stat{padding:18px 18px 16px; border-radius:24px; min-height:130px}
.mini-stat .label{display:block;color:var(--soft);font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px}
.mini-stat strong{display:block;font-size:1.4rem;letter-spacing:-.03em}
.mini-stat span{color:var(--muted); line-height:1.5}
.fear-inline{display:flex; align-items:center; gap:14px}
#fearValue{font-size:1.8rem}
#fearLabel{display:block; color:var(--muted); margin-top:4px}

.section{margin-top:22px}
.section-head{
  display:flex; justify-content:space-between; gap:16px; align-items:end;
  margin:0 0 14px;
}
.section-head h3{font-size:clamp(1.2rem,3vw,2rem); letter-spacing:-.04em; margin-top:6px}
.section-note{margin-top:8px; color:var(--muted); line-height:1.65; max-width:72ch}

.table-wrap{border-radius:26px; overflow:hidden}
table{width:100%; border-collapse:collapse}
th,td{padding:16px 14px; text-align:left; border-bottom:1px solid rgba(255,255,255,.05); font-size:.95rem}
th{color:var(--soft); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.78rem}
tbody tr{transition:background .25s ease, transform .25s ease}
tbody tr:hover{background:rgba(255,255,255,.03)}
.asset-cell{display:flex; align-items:center; gap:12px}
.asset-dot{width:10px; height:10px; border-radius:50%; background:linear-gradient(180deg,#f3f4f6,#6d7380)}
.spark-wrap{width:112px; height:34px}
.pos{color:var(--green); font-weight:700}
.neg{color:var(--red); font-weight:700}

.cards-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
}
.card{
  min-height:330px;
  border-radius:24px;
  padding:16px;
  position:relative;
  overflow:hidden;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 28px 50px rgba(0,0,0,.42);
}
.card::after{
  content:"";
  position:absolute; inset:auto -30% 100% auto; width:160px; height:160px;
  background:radial-gradient(circle, rgba(255,255,255,.07), transparent 65%);
  transition:transform .5s ease;
}
.card:hover::after{transform:translate(-18px,34px)}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}
.card-head h4{font-size:1rem;letter-spacing:-.03em}
.card-head span{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--soft)}
.card canvas{width:100% !important; height:250px !important}

.heatmap{
  display:grid;
  grid-template-columns:76px repeat(12,1fr);
  gap:6px;
  font-size:.76rem;
}
.hm-cell{
  padding:9px 6px;
  border-radius:12px;
  text-align:center;
  border:1px solid rgba(255,255,255,.05);
}
.hm-head{color:var(--soft); font-weight:700; background:rgba(255,255,255,.03)}
.hm-year{text-align:left; padding-left:12px}

.note-box{padding:20px 22px;border-radius:24px}
.note-box p{margin:.6rem 0 0; color:var(--muted); line-height:1.7}

.toast{
  position:fixed; left:50%; transform:translateX(-50%) translateY(16px);
  bottom:18px; padding:14px 18px; border-radius:999px; background:rgba(10,11,15,.88);
  border:1px solid var(--line); color:#fff; opacity:0; pointer-events:none; transition:all .3s ease; z-index:20;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

.reveal{
  opacity:0; transform:translateY(18px) scale(.99);
  transition:opacity .75s ease, transform .75s ease;
}
.reveal.visible{opacity:1; transform:none}

@media (max-width: 1080px){
  .hero,.cards-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 820px){
  .topbar{position:relative; top:0; flex-direction:column}
  .hero,.cards-grid{grid-template-columns:1fr}
  .hero-copy h2{max-width:15ch}
  .shell{width:min(100% - 20px, 1280px)}
  th:nth-child(6), td:nth-child(6){display:none}
}
@media (max-width: 560px){
  .topbar, .hero-copy, .mini-stat, .card, .table-wrap, .note-box{border-radius:20px}
  .topnav{width:100%}
  .topnav a{flex:1 1 auto; text-align:center}
  th:nth-child(3), td:nth-child(3){display:none}
  .spark-wrap{width:84px}
  .heatmap{grid-template-columns:56px repeat(12, minmax(38px,1fr)); overflow:auto}
}