:root{
  --bg:#0b0f14;
  --card:#0f1720cc;
  --muted:#9aa4b2;
  --accent:#7c3aed;
  --glass: rgba(255,255,255,0.03);
  --radius:16px;
  font-size:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;
  background: linear-gradient(180deg,#071018 0%, #0b0f14 100%);
  color:#e6eef8; -webkit-font-smoothing:antialiased;
  display:flex; align-items:center; justify-content:center; min-height:100vh;
}
.bg{
  position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(600px 300px at 10% 20%, rgba(124,58,237,0.12), transparent 15%),
    radial-gradient(600px 300px at 90% 80%, rgba(14,165,233,0.06), transparent 12%);
  filter:blur(30px);
  pointer-events:none;
}
.container{position:relative; z-index:1; width:100%; max-width:980px; padding:48px}
.logo{font-weight:800; letter-spacing:0.6px; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,0.06); font-size:0.95rem; margin-bottom:18px}
.card{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.04); backdrop-filter:blur(8px);
  padding:40px; border-radius:var(--radius); box-shadow:0 12px 50px rgba(2,6,23,0.7);
  overflow:hidden;
}
h1{margin:10px 0 8px; font-size:clamp(28px,6vw,56px); line-height:1; letter-spacing:-0.02em;
  background: linear-gradient(90deg, rgba(255,255,255,0.98), rgba(255,255,255,0.9));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 6px 30px rgba(124,58,237,0.08);
}
.lead{color:var(--muted); margin:0 0 20px}

/* decorative art */
.art{width:100%; height:80px; margin:10px 0 0; display:block}
.wave{width:100%; height:100%; display:block; opacity:0.95; transform-origin:center; animation:waveAnim 10s linear infinite}

.badge{display:inline-block; padding:8px 12px; background:linear-gradient(90deg,#111827, rgba(255,255,255,0.02)); color:var(--muted); border-radius:999px; font-weight:700; letter-spacing:1px; font-size:0.75rem}

.credits{color:var(--muted); margin-top:18px; font-size:0.9rem}

/* Responsive tweaks */
@media (max-width:720px){
  .container{padding:24px}
  .card{padding:24px}
  .credits{font-size:0.85rem}
}

/* Subtle floating animation */
@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)}}
.card{animation:floaty 6s ease-in-out infinite}

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

/* animated background sheen */
.card::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.00) 50%, rgba(255,255,255,0.02) 100%); transform:translateX(-40%); pointer-events:none; mix-blend-mode:overlay; animation:sliding 6s linear infinite}
@keyframes sliding{0%{transform:translateX(-40%)}100%{transform:translateX(40%)}}

/* Blobs (decorative, animated gradient blobs) */
.blobs{position:absolute; inset:0; pointer-events:none; z-index:0}
.blob{position:absolute; border-radius:50%; filter:blur(36px); opacity:0.95; mix-blend-mode:screen; transform:translate3d(0,0,0)}
.blob.b1{width:420px; height:420px; left:-12%; top:-20%; background:radial-gradient(circle at 30% 30%, rgba(124,58,237,0.95), rgba(124,58,237,0.55) 40%, transparent 60%); animation:blobMove1 12s ease-in-out infinite}
.blob.b2{width:300px; height:300px; right:-8%; top:-10%; background:radial-gradient(circle at 40% 30%, rgba(6,182,212,0.95), rgba(6,182,212,0.45) 40%, transparent 60%); animation:blobMove2 14s ease-in-out infinite}
.blob.b3{width:260px; height:260px; left:50%; top:40%; background:radial-gradient(circle at 20% 20%, rgba(99,102,241,0.95), rgba(99,102,241,0.45) 40%, transparent 60%); animation:blobMove3 16s ease-in-out infinite}

@keyframes blobMove1{0%{transform:translate(0,0) scale(1)}50%{transform:translate(24px,-18px) scale(1.06)}100%{transform:translate(0,0) scale(1)}}
@keyframes blobMove2{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-18px,22px) scale(0.98)}100%{transform:translate(0,0) scale(1)}}
@keyframes blobMove3{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-26px,-12px) scale(1.03)}100%{transform:translate(0,0) scale(1)}}

/* Heading shine */
h1{position:relative; overflow:hidden}
h1::after{content:""; position:absolute; inset:0; left:-60%; background:linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.04) 100%); transform:skewX(-18deg); animation:shine 4.5s ease-in-out infinite; pointer-events:none}
@keyframes shine{0%{left:-60%}50%{left:120%}100%{left:120%}}

/* ensure text above decorative blobs */
.card > *{position:relative; z-index:2}