:root{
    --bg:#0f2b22;
    --panel:#14382c;
    --accent:#f5c84c;
    --text:#f6fff9;
    --muted:#cfe6dc;
    --chip:#1e4b3d;
    --chip-text:#e9fff6;
    --ring:#3ddc97;
  }
  *{box-sizing:border-box}
  body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    background: radial-gradient(1200px 600px at 20% -10%, #195243 0%, var(--bg) 55%);
    color: var(--text);
    line-height:1.6;
  }
  .wrap{
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 20px 60px;
  }
  .hero{
    border: 1px solid rgba(255,255,255,.08);
    background:
      radial-gradient(800px 300px at 100% -20%, rgba(61,220,151,.25), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    backdrop-filter: blur(2px);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
  }
  .kicker{
    display:inline-flex;
    gap:.5rem;
    align-items:center;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(61,220,151,.12);
    color:var(--muted);
    font-weight:600;
    font-size:.9rem;
    letter-spacing:.3px;
    border:1px solid rgba(255,255,255,.08);
  }
  h1{
    margin: 14px 0 8px;
    font-size: clamp(1.6rem, 2.4vw + 1rem, 2.4rem);
    line-height:1.2;
  }
  .chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin: 12px 0 18px;
  }
  .chip{
    background: var(--chip);
    color: var(--chip-text);
    border:1px solid rgba(255,255,255,.08);
    padding:6px 10px;
    border-radius:999px;
    font-size:.9rem;
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    white-space:nowrap;
  }
  .meta{
    display:flex;
    flex-wrap:wrap;
    gap: 14px 24px;
    margin: 14px 0 8px;
    color: var(--muted);
    font-weight:600;
  }
  .meta span{display:flex; align-items:center; gap:.5rem}
  .meta .dot{width:8px;height:8px;border-radius:50%;background:var(--ring);box-shadow:0 0 0 4px rgba(61,220,151,.15)}
  .panel{
    margin-top: 22px;
    background: var(--panel);
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    padding:18px 18px;
  }
  .panel h3{margin:0 0 8px; font-size:1.05rem}
  .panel p{margin:0}
  .hosts{
    margin-top:12px;
    display:flex; flex-wrap:wrap; gap:10px;
  }
  .host{
    padding:6px 10px;
    border-radius:10px;
    background:#0e3a2e;
    border:1px solid rgba(255,255,255,.08);
    color: var(--muted);
    font-weight:600;
    font-size:.92rem;
  }
  .cta{
    margin-top:22px;
    display:flex; gap:12px; flex-wrap:wrap;
  }
  .btn{
    appearance:none; border:0; cursor:pointer;
    padding:12px 16px; border-radius:12px;
    font-weight:700; letter-spacing:.2px;
    transition:.2s transform ease, .2s box-shadow ease, .2s background-color ease;
  }
  .btn.primary{background: var(--ring); color:#0b231c}
  .btn.secondary{background: transparent; color: var(--text); border:1px solid rgba(255,255,255,.18)}
  .btn:hover{transform: translateY(-1px)}
  .note{margin-top:10px; color:#bfeadb; font-size:.95rem}
  @media (prefers-color-scheme: light){
    body{background:#f7faf9; color:#103328}
    .hero{background:#ffffff; border-color:#e6f0ec}
    .panel{background:#f3f8f6; border-color:#e6f0ec}
    .chip{background:#e7f3ee; color:#0f2b22; border-color:#d8ebe4}
    .host{background:#eaf5f1; color:#103328; border-color:#d8ebe4}
    .kicker{background:#eaf8f2; color:#0f2b22; border-color:#d8ebe4}
  }