:root{
      --bg: #07070b;
      --card: rgba(255,255,255,.06);
      --card-border: rgba(255,255,255,.14);
      --text: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.65);
      --muted2: rgba(255,255,255,.45);
      --shadow: 0 30px 80px rgba(0,0,0,.55);
      --radius: 22px;
      --glow1: rgba(255, 0, 80, .18);
      --glow2: rgba(255, 80, 0, .12);
    }

    * { box-sizing: border-box; }

    body{
      margin: 0;
      min-height: 100vh;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      background: radial-gradient(900px 600px at 20% 20%, rgba(255,0,80,.12), transparent 55%),
                  radial-gradient(800px 500px at 85% 30%, rgba(255,80,0,.10), transparent 55%),
                  radial-gradient(900px 700px at 50% 100%, rgba(255,255,255,.05), transparent 60%),
                  var(--bg);
      color: var(--text);
      display: grid;
      place-items: center;
      padding: 34px 18px;
      overflow-x: hidden;
    }

    /* glow blobs */
    .glow{
      position: fixed;
      inset: -200px;
      pointer-events: none;
      filter: blur(60px);
      opacity: .75;
      z-index: 0;
    }
    .glow::before,
    .glow::after{
      content:"";
      position: absolute;
      width: 520px;
      height: 520px;
      border-radius: 999px;
      background: var(--glow1);
      top: 20%;
      left: 12%;
      transform: translate(-50%, -50%);
    }
    .glow::after{
      width: 620px;
      height: 620px;
      background: var(--glow2);
      top: 35%;
      left: 78%;
    }

    .wrap{
      width: 100%;
      max-width: 980px;
      z-index: 1;
    }

    .card{
      position: relative;
      background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
      border: 1px solid var(--card-border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 42px 28px;
      overflow: hidden;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    /* subtle grid */
    .card::before{
      content:"";
      position:absolute;
      inset: 0;
      background:
        linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
      background-size: 42px 42px;
      opacity: .08;
      mask-image: radial-gradient(circle at 40% 20%, black 0%, transparent 70%);
      pointer-events: none;
    }

    .top{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      margin-bottom: 18px;
    }

    .logo{
      width: min(220px, 65vw);
      height: auto;
      display: block;
      filter: drop-shadow(0 12px 35px rgba(0,0,0,.55));
      animation: floaty 4.2s ease-in-out infinite;
    }

    @keyframes floaty{
      0%,100% { transform: translateY(0px); }
      50%     { transform: translateY(-6px); }
    }

    .title{
      text-align: center;
      margin-top: 10px;
    }

    h1{
      margin: 10px 0 6px 0;
      font-size: clamp(34px, 4vw, 54px);
      letter-spacing: 0.6px;
      line-height: 1.05;
    }

    .subtitle{
      margin: 0;
      color: var(--muted);
      font-size: clamp(14px, 1.6vw, 18px);
    }

    .badge-row{
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
      margin: 22px 0 8px 0;
    }

    .badge{
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.05);
      color: rgba(255,255,255,.78);
      font-size: 13px;
      letter-spacing: .2px;
    }

    .divider{
      width: min(520px, 92%);
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
      margin: 26px auto;
    }

    .coming{
      text-align: center;
      font-size: clamp(18px, 2vw, 22px);
      font-weight: 700;
      letter-spacing: .4px;
      margin: 0;
    }

    .coming span{
      opacity: .9;
    }

    .note{
      text-align: center;
      margin-top: 10px;
      color: var(--muted2);
      font-size: 14px;
    }

    .actions{
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 26px;
    }

    .btn{
      appearance: none;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.92);
      padding: 11px 14px;
      border-radius: 12px;
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      text-decoration: none;
      transition: transform .15s ease, background .15s ease, border-color .15s ease;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .btn:hover{
      transform: translateY(-1px);
      background: rgba(255,255,255,.09);
      border-color: rgba(255,255,255,.24);
    }

    .btn.primary{
      border-color: rgba(255, 80, 80, .35);
      background: linear-gradient(180deg, rgba(255, 0, 80, .18), rgba(255,255,255,.06));
    }

    .footer{
      text-align: center;
      margin-top: 18px;
      color: rgba(255,255,255,.35);
      font-size: 12px;
    }

    @media (min-width: 860px){
      .card{
        padding: 56px 46px;
      }
    }