/* ---------- home-only ---------- */
  .hero { padding: clamp(28px, 4vh, 48px) 0 clamp(32px, 5vh, 56px); position: relative; }
  .hero .kicker { margin-bottom: 18px; display: inline-flex; align-items: center; gap: 12px; font-family: 'Orbitron', var(--font-body); font-size: 13.5px; letter-spacing: 0.04em; text-transform: uppercase; }
  .hero .kicker .line { width: 34px; height: 1px; background: var(--border-2); display: inline-block; }
  .hero h1 {
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(2.3rem, 5vw, 3.6rem); line-height: 1.05; letter-spacing: -0.022em;
    max-width: 18ch; margin-bottom: 22px; text-wrap: balance;
  }
  .hero h1 .glow { font-style: italic; color: var(--accent); position: relative; text-shadow: 0 0 28px var(--accent-wash); }
  .hero p.dek { font-size: clamp(1.02rem, 1.0vw, 1.22rem); line-height: 1.55; color: var(--fg-soft); max-width: 60ch; text-wrap: pretty; }
  .km-index-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 18px; font-size: 0.88rem; }
  .actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 8px; }
  .currently { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13.5px; }
  .currently .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent-wash); animation: pulse 2.6s ease-out infinite; }
  @keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--accent-wash); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

  .trends { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 0; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
  @media (max-width: 880px) { .trends { grid-template-columns: 1fr; } }
  .trends .pitch { padding: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; justify-content: center; gap: 18px; }
  .trends .pitch h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.1; letter-spacing: -0.02em; }
  .trends .pitch p { color: var(--fg-soft); max-width: 42ch; }
  .trends .panel { background: var(--bg-2); border-left: 1px solid var(--border); padding: clamp(22px, 3vw, 34px); }
  @media (max-width: 880px) { .trends .panel { border-left: 0; border-top: 1px solid var(--border); } }
  .panel .panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
  .panel .live { display: inline-flex; align-items: center; gap: 7px; color: var(--accent-ink); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
  .panel .live .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2.6s ease-out infinite; }
  .trend-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--border); font-size: 14px; }
  .trend-row:first-of-type { border-top: 0; }
  .trend-row .rank { font-family: var(--font-mono); color: var(--faint); font-size: 12px; }
  .trend-row .name { color: var(--fg); font-weight: 500; }
  .trend-row .delta { font-family: var(--font-mono); font-size: 12px; font-weight: 500; }
  .trend-row .delta.up { color: var(--ok); }
  .trend-row .delta.flat { color: var(--faint); }

  .about { max-width: 720px; }
  .about .bio h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -0.02em; margin-bottom: 18px; }
  .about .bio p { color: var(--fg-soft); margin-bottom: 16px; max-width: 60ch; text-wrap: pretty; }