:root{
      /* Brand palette pulled from your logo */
      --teal:#0bb3b0;
      --teal-2:#0b7983;
      --orange:#ff6a3d;
      --ink:#0b1418;
      --text:#e9f7f6;
      --muted:#97b7b5;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      color:var(--text);
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      /* Teal base + orange glow on the right */
      background:
        radial-gradient(1200px 700px at 75% 40%, color-mix(in oklab, var(--orange) 22%, transparent), transparent 60%),
        radial-gradient(1100px 900px at 30% 10%, color-mix(in oklab, var(--teal) 20%, transparent), transparent 70%),
        linear-gradient(160deg, #061014, #0b1418 60%, #0c1b20);
      min-height:100dvh;
      display:grid; place-items:center;
      padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    }

    .wrap{
      width:min(520px, 92vw);
      text-align:center;
    }

    .card{
      position:relative;
      padding:28px 22px 18px;
      border-radius:22px;
      border:1px solid rgba(255,255,255,.08);
      background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      backdrop-filter:saturate(140%) blur(10px);
      box-shadow: 0 18px 48px rgba(0,0,0,.35);
    }

    /* Logo + neon ring */
    .logoWrap{
      width:140px; height:140px; margin:0 auto 18px; position:relative;
      display:grid; place-items:center;
      filter: drop-shadow(0 10px 26px rgba(11,179,176,.28));
      animation:pulse 1.9s ease-in-out infinite;
    }
    .ring{
      position:absolute; inset:-14px; border-radius:50%;
      border:3px solid transparent;
      border-top-color:var(--teal);
      border-right-color:var(--orange);
      opacity:.95; animation:spin 1.2s linear infinite;
    }
    .halo{
      position:absolute; inset:-26px; border-radius:50%;
      background:
        radial-gradient(closest-side, color-mix(in oklab, var(--teal) 22%, transparent), transparent 70%);
      filter:blur(12px);
    }
    .logo{
      width:110px; height:110px; object-fit:contain; border-radius:20px;
    }

    h1{
      margin:6px 0 4px; font-size:26px; letter-spacing:.2px; font-weight:800;
      color:var(--text);
      text-shadow: 0 0 18px color-mix(in oklab, var(--teal) 25%, transparent);
    }
    .tag{ margin:0 0 16px; color:var(--muted); font-size:14px }

    .bar{ height:8px; width:100%; background:rgba(255,255,255,.09); border-radius:999px; overflow:hidden }
    .bar > span{
      display:block; height:100%; width:0%;
      background:linear-gradient(90deg, var(--teal), var(--orange));
      border-radius:inherit; transition:width .25s ease;
    }

    .skip{
      display:inline-block; margin-top:14px; font-size:13px; color:var(--muted); text-decoration:none;
      padding:6px 10px; border-radius:10px; border:1px dashed rgba(255,255,255,.12);
    }
    .skip:hover{ color:var(--text); border-color:rgba(255,255,255,.22) }

    @keyframes spin{ to{ transform:rotate(360deg)} }
    @keyframes pulse{ 0%,100%{ transform:scale(1)} 50%{ transform:scale(1.035)} }
    @media (prefers-reduced-motion: reduce){
      .logoWrap{ animation:none } .ring{ animation:none }
    }

    /* Make it look great on small screens */
    @media (max-width:420px){
      .logoWrap{ width:120px; height:120px }
      .logo{ width:96px; height:96px }
      h1{ font-size:22px }
      .tag{ font-size:13px }
    }