:root{
      --bg:#0b1020;
      --card:#111a33;
      --muted:#9fb0ff;
      --text:#eaf0ff;
      --accent:#ffd24a;
      --accent2:#37ff9b;
      --danger:#ff4d6d;
      --shadow: 0 16px 40px rgba(0,0,0,.45);
      --radius: 18px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: -apple-system, BlinkMacSystemFont, "PingFang HK", "Noto Sans TC",
                   "Microsoft JhengHei", Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      background: radial-gradient(1200px 700px at 20% 0%, #1b2a6b 0%, rgba(27,42,107,0) 55%),
                  radial-gradient(1000px 600px at 90% 10%, #2a7a55 0%, rgba(42,122,85,0) 50%),
                  var(--bg);
      color:var(--text);
      min-height:100vh;
      padding: 18px 14px 90px;
    }
    .wrap{max-width: 960px; margin: 0 auto;}
    .topbar{
      display:flex; justify-content:space-between; align-items:center;
      gap:12px; margin-bottom:14px;
    }
    .badge{
      display:inline-flex; align-items:center; gap:8px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
      padding: 8px 12px; border-radius: 999px;
      font-weight:700; letter-spacing:.2px;
    }
    .dot{
      width:10px; height:10px; border-radius:99px;
      background: var(--accent2);
      box-shadow: 0 0 18px rgba(55,255,155,.6);
    }
    .timer{
      font-weight:800;
      color: var(--accent);
      background: rgba(255,210,74,.12);
      border: 1px solid rgba(255,210,74,.25);
      padding: 8px 12px; border-radius: 999px;
    }

    .hero{
      background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: var(--radius);
      padding: 18px;
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .hero::before{
      content:"";
      position:absolute; inset:-40px -40px auto auto;
      width:220px; height:220px;
      background: radial-gradient(circle at 30% 30%, rgba(255,210,74,.35), rgba(255,210,74,0) 60%);
      filter: blur(0px);
      transform: rotate(25deg);
    }
    .grid{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:16px;
      align-items:stretch;
    }
    @media(max-width:820px){
      .grid{grid-template-columns: 1fr; }
    }
    h1{
      margin: 4px 0 10px;
      font-size: clamp(26px, 3.2vw, 42px);
      line-height:1.12;
      letter-spacing: .2px;
    }
    .sub{
      margin: 0 0 14px;
      color: rgba(234,240,255,.85);
      font-size: 16px;
      line-height:1.45;
    }
    .pillrow{display:flex; flex-wrap:wrap; gap:8px; margin: 12px 0 6px;}
    .pill{
      font-weight:800;
      font-size: 13px;
      padding: 8px 10px;
      border-radius: 999px;
      background: rgba(159,176,255,.12);
      border: 1px solid rgba(159,176,255,.22);
      color: #d9e3ff;
    }
    .card{
      background: rgba(17,26,51,.75);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: var(--radius);
      padding: 14px;
      box-shadow: 0 12px 30px rgba(0,0,0,.35);
    }
    .kpi{
      display:grid;
      grid-template-columns: repeat(2,1fr);
      gap:10px;
      margin-top:10px;
    }
    .kpi .box{
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 14px;
      padding: 12px;
    }
    .kpi .num{
      font-size: 22px;
      font-weight: 900;
      color: var(--accent);
      letter-spacing: .3px;
    }
    .kpi .lab{
      font-size: 12px;
      color: rgba(234,240,255,.75);
      margin-top:4px;
      font-weight:700;
    }

    .proof{
      margin-top: 14px;
      display:grid;
      grid-template-columns: repeat(3,1fr);
      gap:10px;
    }
    @media(max-width:820px){
      .proof{grid-template-columns: 1fr; }
    }
    .proof .item{
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 16px;
      padding: 12px;
      min-height: 96px;
    }
    .proof .t{
      font-weight:900;
      color:#fff;
      margin:0 0 6px;
      font-size: 14px;
    }
    .proof .d{
      margin:0;
      color: rgba(234,240,255,.8);
      font-size: 13px;
      line-height:1.35;
    }

    .cta{
      position: fixed;
      left: 0; right: 0; bottom: 0;
      padding: 12px 14px;
      background: rgba(11,16,32,.72);
      backdrop-filter: blur(10px);
      border-top: 1px solid rgba(255,255,255,.12);
    }
    .cta .inner{
      max-width: 960px;
      margin: 0 auto;
      display:flex;
      gap: 10px;
      align-items:center;
      justify-content:space-between;
    }
    .btn{
      width: 100%;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 10px;
      padding: 14px 14px;
      border-radius: 16px;
      border: none;
      cursor: pointer;
      font-weight: 950;
      font-size: 16px;
      letter-spacing:.2px;
      box-shadow: 0 18px 40px rgba(0,0,0,.45);
      text-decoration:none;
    }
    .btn-primary{
      background: linear-gradient(180deg, #ffd24a 0%, #ffb703 100%);
      color:#1a1a1a;
    }
    .btn-secondary{
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.18);
      color: var(--text);
      max-width: 180px;
    }
    .small{
      font-size: 12px;
      color: rgba(234,240,255,.68);
      margin-top: 8px;
      line-height:1.35;
    }
    .warn{
      color: rgba(234,240,255,.62);
      font-size: 12px;
      margin-top: 10px;
    }
    .hl{
      color: var(--accent2);
      font-weight: 900;
    }
    .list{
      margin: 12px 0 0;
      padding-left: 18px;
      color: rgba(234,240,255,.86);
      line-height:1.45;
      font-size: 14px;
    }
    .tag-danger{
      display:inline-block;
      margin-left:6px;
      font-weight:900;
      color: #fff;
      background: rgba(255,77,109,.18);
      border: 1px solid rgba(255,77,109,.35);
      padding: 4px 8px;
      border-radius: 999px;
      font-size: 12px;
    }