* { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { min-height: 100%; }
    body {
      font-family: "Microsoft JhengHei", "Heiti TC", Tahoma, Helvetica, Arial, sans-serif;
      background: #1a1a1a;
      color: #fff;
      overflow-x: hidden;
    }

    /* ===== Stage 紅藍斜切 split（仿 isports.tw） ===== */
    .stage {
      position: relative;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      /* 78deg 讓分割線從左上往右下斜（不是 90deg 垂直） */
      background: linear-gradient(78deg, #b82c22 0%, #b82c22 49.5%, #1368b3 50.5%, #1368b3 100%);
    }

    /* 大字 outline 底紋 — 兩側各一行重複的活動名稱，rotate 跟著 split 角度 */
    .bg-text {
      position: absolute;
      top: 50%;
      transform: translateY(-50%) rotate(-12deg);
      z-index: 1;
      font-size: clamp(36px, 7.5vw, 96px);
      font-weight: 900;
      pointer-events: none;
      user-select: none;
      white-space: nowrap;
      letter-spacing: 0.08em;
      -webkit-text-stroke: 2px rgba(255, 255, 255, 0.18);
      color: transparent;
      line-height: 1;
    }
    .bg-text-ta { left: -8%; }
    .bg-text-hs { right: -8%; }

    /* ===== Header 主標 ===== */
    .header {
      position: relative;
      z-index: 2;
      padding: 32px 24px 8px;
      text-align: center;
      color: #fff;
      text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    }
    .header .badge-host {
      display: inline-block;
      font-size: 14px;
      font-weight: 600;
      padding: 4px 14px;
      border: 1.5px solid rgba(255, 255, 255, 0.6);
      border-radius: 999px;
      margin-bottom: 12px;
      letter-spacing: 0.1em;
    }
    .header h1 {
      font-size: clamp(28px, 5.5vw, 56px);
      font-weight: 900;
      letter-spacing: 0.05em;
      line-height: 1.25;
    }
    .header h1 .accent { color: #ffe14a; }
    .header h1 .blood { color: #ff3b3b; }
    .header .sub {
      margin-top: 10px;
      font-size: clamp(14px, 1.7vw, 20px);
      font-weight: 600;
      opacity: 0.95;
    }

    /* ===== Cards ===== */
    .cards {
      position: relative;
      z-index: 2;
      flex: 1;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 16px;
      padding: 28px 24px 16px;
      align-items: center;
      max-width: 1400px;
      width: 100%;
      margin: 0 auto;
    }
    .card {
      background: rgba(255, 255, 255, 0.95);
      color: #222;
      border-radius: 18px;
      padding: 24px 20px;
      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
      text-decoration: none;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      position: relative;
      overflow: hidden;
    }
    .card:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45); }
    .card-mascot {
      width: clamp(120px, 18vw, 200px);
      height: auto;
      filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.25));
    }
    .card-tag {
      font-size: 14px;
      font-weight: 700;
      padding: 4px 14px;
      border-radius: 999px;
      color: #fff;
      letter-spacing: 0.05em;
    }
    .card-ta .card-tag { background: #b82c22; }
    .card-hs .card-tag { background: #1368b3; }
    .card h2 {
      font-size: clamp(22px, 2.4vw, 32px);
      font-weight: 900;
      letter-spacing: 0.05em;
      text-align: center;
      line-height: 1.2;
    }
    .card-ta h2 { color: #b82c22; }
    .card-hs h2 { color: #1368b3; }
    .card-meta {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 15px;
      color: #444;
      margin-top: 4px;
    }
    .card-meta .row {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      justify-content: center;
    }
    .card-meta .icon {
      width: 18px; height: 18px; flex-shrink: 0;
      margin-top: 2px;
    }
    .card-meta strong { font-weight: 700; }
    .card-cta {
      display: inline-block;
      margin-top: 8px;
      padding: 10px 32px;
      border-radius: 999px;
      font-weight: 800;
      letter-spacing: 0.15em;
      color: #fff;
      font-size: 15px;
    }
    .card-ta .card-cta { background: #b82c22; }
    .card-hs .card-cta { background: #1368b3; }

    /* ===== Center bolt ===== */
    .bolt {
      position: relative;
      z-index: 3;
      width: clamp(100px, 12vw, 170px);
      height: clamp(100px, 12vw, 170px);
      align-self: center;
      justify-self: center;
      flex-shrink: 0;
    }
    .bolt-bg {
      position: absolute;
      inset: 0;
      background: #1a1a1a;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      color: #ffe14a;
      font-weight: 900;
      text-align: center;
      box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.25), 0 12px 30px rgba(0, 0, 0, 0.5);
      transform: rotate(-8deg);
    }
    .bolt-bg .l1 { font-size: clamp(13px, 1.4vw, 20px); color: #fff; letter-spacing: 0.1em; }
    .bolt-bg .l2 { font-size: clamp(22px, 2.6vw, 38px); margin: 2px 0; }
    .bolt-bg .l3 { font-size: clamp(13px, 1.4vw, 20px); color: #fff; letter-spacing: 0.1em; }

    /* ===== Features bar ===== */
    .features {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      padding: 8px 24px 16px;
      max-width: 1100px;
      width: 100%;
      margin: 0 auto;
    }
    .feature {
      display: flex;
      align-items: center;
      gap: 10px;
      background: rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(6px);
      border-radius: 999px;
      padding: 10px 16px;
      color: #fff;
      font-weight: 700;
      font-size: clamp(13px, 1.3vw, 17px);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    }
    .feature-icon {
      width: 28px; height: 28px;
      background: #ffe14a;
      color: #1a1a1a;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
    }

    /* ===== Bottom CTA ===== */
    .cta-bar {
      position: relative;
      z-index: 2;
      text-align: center;
      padding: 14px 24px 22px;
    }
    .cta-bar .slogan {
      display: inline-block;
      font-size: clamp(22px, 3.5vw, 42px);
      font-weight: 900;
      color: #fff;
      letter-spacing: 0.08em;
      text-shadow: 0 3px 0 #b82c22, 0 4px 10px rgba(0, 0, 0, 0.5);
      transform: rotate(-3deg);
    }
    .cta-bar .slogan .y { color: #ffe14a; }

    .footer {
      position: relative;
      z-index: 2;
      padding: 14px 16px 18px;
      text-align: center;
      color: rgba(255, 255, 255, 0.92);
      font-size: 13px;
      background: rgba(0, 0, 0, 0.55);
      backdrop-filter: blur(4px);
    }
    .footer strong { font-weight: 700; }
    .footer .small { font-size: 11px; opacity: 0.7; margin-top: 4px; display: block; }

    /* Tablet ===== */
    @media (max-width: 980px) {
      .cards {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 20px 16px;
      }
      .bolt {
        order: 2;
      }
      .card-ta { order: 1; }
      .card-hs { order: 3; }
      .features {
        grid-template-columns: 1fr;
        gap: 8px;
      }
    }