* {
      box-sizing: border-box;
    }

    :root {
      --bg:
        radial-gradient(120% 100% at 10% 20%, rgba(112, 214, 255, 0.12), transparent 60%),
        radial-gradient(100% 50% at 120% 10%, rgba(255, 178, 71, 0.13), transparent 70%),
        radial-gradient(120% 50% at 10% 80%, rgba(125, 248, 207, 0.08), transparent 70%),
        radial-gradient(120% 80% at 90% 90%, rgba(121, 112, 245, 0.08), transparent 70%),
        linear-gradient(160deg, #0a0c12 0%, #0b0e16 45%, #090c12 100%);
      --surface: rgba(15, 17, 21, 0.84);
      --surface-border: rgba(255, 255, 255, 0.1);
      --text: whitesmoke;
      --muted: rgba(255, 255, 255, 0.72);
      --accent: #70d6ff;
      --accent-warm: #ffb247;
    }

    body {
      margin: 0;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem;
      background: var(--bg);
      color: var(--text);
      font-family: "Source Sans 3", sans-serif;
    }

    .hero-card {
      width: min(760px, 100%);
      padding: clamp(2rem, 5vw, 4rem);
      border: 1px solid var(--surface-border);
      border-radius: 28px;
      background:
        radial-gradient(120% 100% at 10% 20%, rgba(112, 214, 255, 0.06), transparent 60%),
        radial-gradient(100% 80% at 100% 0, rgba(255, 178, 71, 0.08), transparent 60%),
        var(--surface);
      box-shadow: 0 28px 70px rgba(0, 0, 0, 0.35);
      backdrop-filter: blur(12px);
    }

    .return-link {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      position: fixed;
      top: 1.5rem;
      left: 1.5rem;
      z-index: 2;
      padding: 0.7rem 0.95rem;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 999px;
      background: rgba(15, 17, 21, 0.72);
      backdrop-filter: blur(12px);
      color: rgba(255, 255, 255, 0.8);
      font-size: 0.95rem;
      font-weight: 600;
      text-decoration: none;
      transition: color 160ms ease, transform 160ms ease;
    }

    .return-link::before {
      content: "<";
      color: var(--accent-warm);
      font-size: 0.95rem;
    }

    .return-link:hover {
      color: white;
      transform: translateX(-2px);
    }

    .eyebrow {
      margin: 0 0 0.85rem;
      color: var(--accent);
      letter-spacing: 0.28em;
      text-transform: uppercase;
      font-size: 0.78rem;
      font-weight: 700;
    }

    h1 {
      margin: 0;
      font-family: "Oxanium", sans-serif;
      font-size: clamp(3rem, 3vw, 5.5rem);
      line-height: 0.95;
      letter-spacing: -0.05em;
    }

    .subcopy {
      width: min(560px, 100%);
      margin: 1.15rem 0 0;
      color: var(--muted);
      font-size: clamp(1.15rem, 2.4vw, 1.45rem);
      line-height: 1.45;
    }

    .highlights {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin: 1.75rem 0 0;
      padding: 0;
      list-style: none;
    }

    .highlights li {
      padding: 0.65rem 0.9rem;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.05);
      color: rgba(255, 255, 255, 0.88);
      font-size: 0.95rem;
    }

    .cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.85rem;
      margin-top: 2rem;
    }

    .cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 168px;
      padding: 0.9rem 1.15rem;
      border-radius: 14px;
      text-decoration: none;
      font-weight: 700;
      transition: transform 160ms ease, opacity 160ms ease, background 160ms ease;
    }

    .cta-primary {
      background: linear-gradient(180deg, #ffb247 0%, #eb952f 100%);
      color: #1f1404;
    }

    .cta:hover {
      transform: translateY(-2px);
      opacity: 0.96;
    }

    @media (max-width: 640px) {
      body {
        padding: 1rem;
      }

      .return-link {
        top: 1rem;
        left: 1rem;
        padding: 0.65rem 0.85rem;
        font-size: 0.88rem;
      }

      .hero-card {
        border-radius: 22px;
      }

      .cta-row {
        flex-direction: column;
      }

      .cta {
        width: 100%;
      }
    }
