:root{
  --bg: #0b0d10;
  --fg: #e8eef5;
  --muted: #a7b3c2;
  --card: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.12);
  --shadow: 0 20px 60px rgba(0,0,0,0.35);
  --blur: blur(12px);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--fg);
  background: radial-gradient(1200px 800px at 20% -10%, #1b2230 10%, transparent 60%),
              radial-gradient(800px 500px at 90% 120%, #11181f 20%, transparent 70%),
              var(--bg);
  overflow-x:hidden;
}

/* Background blobs + noise */
.bg{position:fixed; inset:0; pointer-events:none; z-index:-2;}
.blob{
  position:absolute; width:52vmax; height:52vmax; filter: blur(60px);
  opacity:0.35; border-radius:50%;
  animation: float 24s ease-in-out infinite alternate;
}
.blob-1{ left:-10vmax; top:-12vmax; background: conic-gradient(from 40deg, #5ab1ff, #7b61ff, #2dd4bf, #5ab1ff); }
.blob-2{ right:-14vmax; bottom:-16vmax; background: conic-gradient(from 210deg, #ff7ab6, #c084fc, #60a5fa, #ff7ab6); animation-delay: 4s; }
@keyframes float{ to { transform: translate3d(3vmax, -2vmax, 0) rotate(12deg); } }

.noise{
  position:absolute; inset:-50%;
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'>\
    <filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/></filter>\
    <rect width='100%' height='100%' filter='url(%23n)' opacity='0.035'/>\
  </svg>");
  transform: translateZ(0);
  z-index:-1;
}

/* Layout */
.container{
  min-height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:2rem; padding: 4rem 1.25rem 2rem;
}

.brand{
  display:flex; align-items:center; gap:0.75rem;
  letter-spacing:0.3px; opacity:0.95;
}
.brand .logo{ width:36px; height:36px; }
.brand h1{ margin:0; font-weight:700; font-size:1.4rem; }

.card{
  max-width: 720px; width: min(92vw, 720px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  backdrop-filter: saturate(140%) blur(12px);
  box-shadow: var(--shadow);
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3.5vw, 2.25rem);
  text-align:center;
}
.card h2{
  margin: 0 0 0.5rem 0;
  font-size: clamp(1.75rem, 3.4vw, 2.4rem);
  letter-spacing:0.2px;
}
.card p{ color: var(--muted); margin: 0.25rem 0 0.75rem; }

.cta-row{
  display:flex; gap:0.75rem; justify-content:center; flex-wrap:wrap;
  margin: 1.1rem 0 0.5rem;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 0.7rem 1rem; border-radius: 12px; border: 1px solid transparent;
  background: linear-gradient(135deg, #6ea8ff, #8b5cf6 60%, #22d3ee 120%);
  color: white; text-decoration:none; font-weight:600;
  transition: transform .12s ease, filter .2s ease;
  will-change: transform;
}
.btn:hover{ transform: translateY(-1.5px); filter: brightness(1.06); }
.btn:active{ transform: translateY(0); }

.btn-outline{
  background: transparent;
  border-color: var(--border);
  color: var(--fg);
}
.btn-outline:hover{ background: rgba(255,255,255,0.08); }

.fineprint{ font-size: 0.9rem; opacity: 0.9; }

.footer{
  opacity:0.65; font-size:0.9rem; margin-top:0.25rem;
}

/* Responsive tweaks */
@media (max-width: 420px){
  .brand h1{ font-size:1.2rem }
}