
    header.hero{
      padding:56px 0 20px;
      position:relative;
    }
    .hero-grid{
      display:grid;grid-template-columns: 1.15fr 0.85fr;
      gap:24px;align-items:stretch;
    }
    .hero-card{
      border:1px solid var(--stroke);
      background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
      border-radius: var(--radius2);
      box-shadow: var(--shadow);
      padding:28px;
      position:relative;
      overflow:hidden;
    }
    [data-theme="light"] .hero-card{
      background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.70));
    }
    .hero-card:before{
      content:"";
      position:absolute; inset:-2px;
      background: radial-gradient(600px 220px at 20% 0%, rgba(110,231,255,0.22), transparent 60%),
                  radial-gradient(600px 220px at 80% 20%, rgba(167,139,250,0.20), transparent 60%);
      pointer-events:none;
    }
    .hero-top{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
    h1{
      margin:14px 0 10px;
      font-size: clamp(34px, 4vw, 56px);
      letter-spacing:-0.04em;
      line-height:1.02;
      position:relative;
    }
    .sub{
      color:var(--muted);
      font-size: 16px;
      line-height:1.55;
      max-width: 58ch;
      position:relative;
    }
    .hero-cta{
      display:flex; gap:12px; flex-wrap:wrap;
      margin-top:18px; position:relative;
    }
    .stats{
      display:grid;grid-template-columns: repeat(3, 1fr);
      gap:12px;margin-top:18px; position:relative;
    }
    .stat{
      border:1px solid var(--stroke);
      background:var(--card);
      border-radius:16px;
      padding:14px;
    }
    .stat b{display:block;font-size:16px}
    .stat span{color:var(--muted);font-size:12px}

    
    .side{
      display:flex;flex-direction:column;gap:14px;
    }
    .mini-card{
      border:1px solid var(--stroke);
      background:var(--card);
      border-radius: var(--radius);
      padding:18px;
      box-shadow: var(--shadow);
    }
    .side .mini-card{
      background: rgba(0,0,0,0.5);
    }
    [data-theme="light"] .side .mini-card{
      background: rgba(255, 254, 254, 0.8);
    }
    .mini-title{
      display:flex;align-items:center;justify-content:space-between;
      gap:10px;
      font-weight:800;
    }
    .kbd{
      font-family:var(--mono);
      font-size:12px;color:var(--muted);
      padding:6px 10px;border-radius:10px;
      border:1px solid var(--stroke);
      background: rgba(0,0,0,0.14);
    }
    [data-theme="light"] .kbd{background: rgba(255,255,255,0.75)}
    .mono{
      font-family:var(--mono);
      font-size:12.5px;color:var(--muted);
      line-height:1.55;
      margin-top:10px;
    }
    .side .mono{
      color:var(--text);
      opacity:0.8;
    }
    .callout{
      margin-top:10px;
      display:flex;gap:10px;align-items:flex-start;
      color:var(--muted);
      font-size:13.5px;
    }
    .side .callout{
      color:var(--text);
      opacity:0.8;
    }
    .announce{
      margin:10px 0 0;
      color:var(--text);
      opacity:0.8;
      line-height:1.6;
      font-size:14px;
    }
    .badge{
      padding:7px 10px;border-radius:999px;
      border:1px solid var(--stroke);
      background: linear-gradient(90deg, rgba(52,211,153,0.18), rgba(110,231,255,0.12));
      font-size:12px;font-weight:800;color:var(--text);
      white-space:nowrap;
    }

