@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Nosifer&display=swap');

  :root{
    --ink:#0D0F0F;
    --panel:#16191A;
    --panel-2:#1C2022;
    --amber:#D98E3B;
    --bear:#B33A3A;
    --bull:#4F8F62;
    --parchment:#EDEAE3;
    --muted:#8B928F;
    --line:rgba(237,234,227,0.10);
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  body{ background:var(--ink); color:var(--parchment); font-family:'Inter',sans-serif; overflow-x:hidden; }
  @media (prefers-reduced-motion: reduce){ *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; } }
  h1,h2,h3{ font-family:'Fraunces',serif; font-weight:500; letter-spacing:-0.01em; }
  .mono{ font-family:'JetBrains Mono',monospace; }
  a{ color:inherit; text-decoration:none; }

  .eyebrow{
    font-family:'JetBrains Mono',monospace; font-size:0.72rem; letter-spacing:0.22em;
    text-transform:uppercase; color:var(--amber); display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{ content:''; width:24px; height:1px; background:var(--amber); }

  nav{
    position:fixed; top:0; left:0; right:0; z-index:50;
    display:flex; justify-content:space-between; align-items:center;
    padding:24px 6vw;
    background:linear-gradient(to bottom, rgba(13,15,15,0.85), transparent);
  }
  .brand{ font-size:1.15rem; letter-spacing:0.01em; font-family:'Fraunces',serif; font-weight:600; }
  .brand span{ color:var(--amber); }
  .hero-links{
    position:absolute; z-index:2; bottom:36px; left:50%; transform:translateX(-50%);
    display:flex; gap:52px; flex-wrap:nowrap; justify-content:center;
    font-size:1.15rem; font-weight:700; letter-spacing:0.02em;
    white-space:nowrap; max-width:92vw;
  }
  .hero-links a{
    color:#39FF14; opacity:0.95; padding-bottom:4px;
    border-bottom:1px solid transparent; transition:all 0.25s ease;
    display:inline-flex; align-items:center; gap:8px;
    font-weight:700;
    text-shadow:0 0 12px rgba(57,255,20,0.45);
  }
  .hero-links a::after{ content:'↓'; font-weight:700; transition:transform 0.25s ease; }
  .hero-links a:hover{ opacity:1; border-color:#39FF14; }
  .hero-links a:hover::after{ transform:translateY(4px); }
  @media(max-width:700px){ .hero-links{ gap:24px; font-size:0.85rem; } }
  @media(max-width:440px){ .hero-links{ gap:14px; font-size:0.68rem; } }

  /* HERO */
  .hero{
    position:relative; width:100vw; height:100vh; min-height:100vh;
    overflow:hidden;
  }
  .hero-img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    object-position:center 40%;
    transform:scale(0.85);
    transform-origin:center 40%;
    filter:saturate(0.9) contrast(1.05);
  }
  .hero-overlay{
    position:absolute; inset:0;
    background:
      linear-gradient(to bottom, rgba(13,15,15,0.35) 0%, rgba(13,15,15,0) 25%, rgba(13,15,15,0) 75%, rgba(13,15,15,0.9) 100%);
  }
  .hero-brand-mark{
    position:relative; z-index:2; height:100%; display:flex; align-items:flex-start; justify-content:center; padding-top:8vh;
  }
  .hero-brand-mark h1{
    font-size:clamp(2.6rem, 8vw, 6rem); text-transform:uppercase; letter-spacing:-0.01em;
    color:var(--parchment); text-shadow:0 4px 30px rgba(0,0,0,0.7);
  }
  .hero-brand-mark h1 span{ color:var(--amber); }
  .hero-content{
    padding:70px 6vw 90px; max-width:820px; margin:0 auto; text-align:center;
    display:flex; flex-direction:column; align-items:center;
  }
  .hero-content .eyebrow{ justify-content:center; }
  .hero-content .btn-row{ justify-content:center; }

  .blood-phrase{
    font-family:'Nosifer', cursive;
    color:#C81616;
    font-weight:400;
    line-height:1.7;
    max-width:640px;
    margin:0 auto 24px;
    font-size:clamp(0.85rem, 1.9vw, 1.15rem);
    text-shadow:
      0 1px 0 #5c0000,
      0 3px 6px rgba(200,22,22,0.55),
      0 0 18px rgba(200,22,22,0.35);
    filter:drop-shadow(0 6px 4px rgba(0,0,0,0.35));
  }
  .hero-content p.lede{
    max-width:520px; margin:22px 0 34px; color:var(--parchment); opacity:0.85;
    font-size:1.05rem; line-height:1.6;
  }
  .btn-row{ display:flex; flex-wrap:wrap; gap:14px; }
  .btn{ padding:13px 26px; border-radius:2px; font-size:0.86rem; border:1px solid var(--line); transition:all 0.25s ease; }
  .btn-primary{ background:var(--amber); color:var(--ink); border-color:var(--amber); font-weight:600; }
  .btn-primary:hover{ background:#e8a25a; }
  .btn-ghost{ color:var(--parchment); }
  .btn-ghost:hover{ border-color:var(--amber); color:var(--amber); }

  .scroll-cue{
    position:absolute; bottom:36px; right:6vw; z-index:2;
    font-family:'JetBrains Mono',monospace; font-size:0.7rem; color:var(--muted);
    letter-spacing:0.2em; display:flex; flex-direction:column; align-items:center; gap:10px;
  }
  .scroll-cue::after{ content:''; width:1px; height:34px; background:linear-gradient(var(--amber), transparent); animation:drip 2s ease-in-out infinite; }
  @keyframes drip{ 0%,100%{ opacity:0.2; } 50%{ opacity:1; } }

  section{ padding:120px 6vw; position:relative; }
  .section-head{ max-width:680px; margin:0 auto 56px; text-align:center; }
  .section-head h2{ font-size:clamp(2rem,4.4vw,3rem); margin-top:16px; }
  #takeaways .section-head{ max-width:820px; }
  #takeaways .section-head h2{ font-size:clamp(1.5rem,4vw,3rem); white-space:nowrap; }
  .section-head p{ color:var(--muted); margin-top:18px; line-height:1.7; font-size:1.02rem; }

  /* TREND + CHART SIDE BY SIDE */
  .trend-layout{
    display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:start;
    max-width:1240px; margin:0 auto;
  }
  .trend-text p{ color:var(--muted); line-height:1.7; font-size:1.02rem; }
  @media(max-width:900px){
    .trend-layout{ grid-template-columns:1fr; }
  }

  /* STAT STRIP */
  .stat-strip{
    display:grid; grid-template-columns:repeat(3,1fr);
    margin-top:40px; text-align:left; gap:24px;
  }
  @media(max-width:900px){ .stat-strip{ grid-template-columns:repeat(3,1fr); } }
  @media(max-width:520px){ .stat-strip{ grid-template-columns:1fr; } }
  .stat .num{ font-size:clamp(1.6rem,3vw,2.1rem); font-family:'Fraunces',serif; }
  .stat .num.bear{ color:var(--bear); }
  .stat .num.bull{ color:var(--bull); }
  .stat .num.amber{ color:var(--amber); }
  .stat .lbl{ color:var(--muted); font-size:0.78rem; margin-top:6px; text-transform:uppercase; letter-spacing:0.06em; }

  /* CHART */
  .chart-panel{
    position:relative;
    background:var(--panel); border:1px solid var(--line); border-radius:4px;
    padding:36px 32px 30px; width:100%;
    overflow:hidden;
  }
  .chart-panel::before{
    content:'';
    position:absolute; top:-30%; left:50%; width:140%; height:140%;
    transform:translateX(-50%);
    background:radial-gradient(ellipse at center, rgba(217,142,59,0.10), transparent 60%);
    animation:ambientDrift 12s ease-in-out infinite alternate;
    pointer-events:none;
  }
  @keyframes ambientDrift{
    0%{ transform:translateX(-54%) translateY(0); }
    100%{ transform:translateX(-46%) translateY(3%); }
  }
  .chart-panel-head{ position:relative; z-index:1; display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:10px; margin-bottom:30px; }
  .chart-panel-head h3{ font-size:1.1rem; }
  .legend{ display:flex; gap:20px; font-size:0.78rem; color:var(--muted); }
  .legend span{ display:inline-flex; align-items:center; gap:6px; }
  .legend i{ width:10px; height:10px; border-radius:2px; display:inline-block; }
  .chart-wrap{ position:relative; z-index:1; }
  #barChart{ width:100%; height:auto; display:block; overflow:visible; }

  .bar{
    transform-box:fill-box;
    transition:transform 1s cubic-bezier(0.16,1,0.3,1) var(--delay,0s), filter 0.25s ease, opacity 0.25s ease;
  }
  .bar.bull{ transform-origin:center bottom; }
  .bar.bear{ transform-origin:center top; }
  .bar.grow-init{ transform:scaleY(0); }
  .bar.bull:hover{ filter:drop-shadow(0 0 10px rgba(79,143,98,0.75)); }
  .bar.bear:hover{ filter:drop-shadow(0 0 10px rgba(179,58,58,0.75)); }

  .year-label{
    opacity:0; transform:translateY(6px);
    transition:opacity 0.6s ease, transform 0.6s ease;
  }
  .year-label.show{ opacity:1; transform:translateY(0); }

  .value-label{
    opacity:0;
    transition:opacity 0.6s ease;
  }
  .value-label.show{ opacity:1; }

  .avg-line{
    stroke-dasharray:1000;
    stroke-dashoffset:1000;
    transition:stroke-dashoffset 1.4s ease 0.9s;
  }
  .avg-line.draw{ stroke-dashoffset:0; }
  .avg-label{
    opacity:0; transition:opacity 0.6s ease 1.6s;
  }
  .avg-label.show{ opacity:1; }

  .zero-line{
    stroke-dasharray:1000; stroke-dashoffset:1000;
    transition:stroke-dashoffset 1s ease;
  }
  .zero-line.draw{ stroke-dashoffset:0; }

  .bar-tip{
    position:absolute; pointer-events:none; opacity:0; transition:opacity 0.15s ease;
    background:var(--panel-2); border:1px solid var(--line); padding:8px 12px; border-radius:3px;
    font-family:'JetBrains Mono',monospace; font-size:0.78rem; white-space:nowrap; z-index:5;
    transform:translate(-50%,-115%);
  }
  .chart-footnote{
    position:relative; z-index:1; margin-top:16px; color:var(--muted); font-size:0.75rem;
  }

  /* TAKEAWAYS */
  .takeaways{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px;
    background:var(--line); border:1px solid var(--line); max-width:1000px; margin:70px auto 0;
  }
  .take-card{ background:var(--ink); padding:34px 28px; }
  .take-card .idx{ font-family:'JetBrains Mono',monospace; color:var(--amber); font-size:0.76rem; }
  .take-card h3{ margin:12px 0 8px; font-size:1.05rem; }
  .take-card p{ color:var(--muted); font-size:0.88rem; line-height:1.55; }

  .banner-strip{ padding:0 6vw 100px; }
  .banner-strip .banner-inner{
    max-width:1000px; margin:0 auto;
    border:1px solid var(--line); border-radius:4px; overflow:hidden;
  }
  .banner-strip img{ display:block; width:100%; height:auto; }

  /* CTA */
  .cta-section{ text-align:center; background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .cta-section h2{ font-size:clamp(2rem,5vw,3rem); }
  .cta-section p{ color:var(--muted); margin:16px 0 32px; }

  footer{ padding:56px 6vw 36px; text-align:center; color:var(--muted); font-size:0.82rem; }
  .foot-links{ display:flex; gap:26px; justify-content:center; margin-bottom:18px; flex-wrap:wrap; }
  .foot-links a:hover{ color:var(--amber); }