:root {
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-full: 999px;
  --transition: 220ms cubic-bezier(.4,0,.2,1);
  --shadow-soft: 0 2px 4px -1px hsl(0 0% 0% / .08), 0 4px 12px -2px hsl(0 0% 0% / .06);
  --shadow-strong: 0 0 0 1px hsl(0 0% 100% / .08), 0 8px 32px -4px hsl(0 0% 0% / .45);
  --gradient: linear-gradient(135deg,#6366f1 0%,#8b5cf6 40%,#ec4899 80%);
  --gradient-alt: linear-gradient(120deg,#0ea5e9,#6366f1 55%,#c026d3);
  --bg-dark: hsl(248 32% 6%);
  --bg-dark-alt: hsl(250 30% 3%);
  --bg-panel: hsl(248 22% 12% / .75);
  --text-high: hsl(0 0% 100%);
  --text-mid: hsl(0 0% 92%);
  --text-dim: hsl(0 0% 70%);
  --brand: #6366f1;
  --danger: #ef4444;
  --ok: #10b981;
  color-scheme: dark light;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg-dark: hsl(0 0% 100%);
    --bg-dark-alt: hsl(210 20% 96%);
    --bg-panel: hsl(0 0% 100% / .85);
    --text-high: hsl(224 25% 10%);
    --text-mid: hsl(224 24% 16%);
    --text-dim: hsl(224 10% 45%);
    --shadow-strong: 0 8px 32px -4px hsl(224 20% 20% / .25);
  }
}

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
html, body { height: 100%; margin: 0; font-family: var(--font-sans); background: var(--bg-dark); color: var(--text-high); }
body { min-height: 100dvh; display: flex; align-items: stretch; }

.page-root { position: relative; flex: 1; overflow: hidden; isolation: isolate; }

/* Background layer + canvas */
.bg-layer { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.05) brightness(.9);
  pointer-events: none; /* keep interactions for page content */
  transform: translateZ(0); /* promote to own layer */
  opacity: 1;
}
.bg-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 15%, rgba(99,102,241,0.12), transparent 25%),
    radial-gradient(circle at 80% 75%, rgba(198,13,128,0.08), transparent 25%),
    linear-gradient(145deg, rgba(12,8,24,0.6), rgba(8,6,16,0.75));
  mix-blend-mode: plus-lighter;
  pointer-events: none;
  transition: opacity .45s var(--transition);
}

/* Content container (same as before) */
.content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: clamp(320px, 72ch, 1080px);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 4rem) clamp(1rem, 3vw, 3rem) 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  backdrop-filter: blur(18px) saturate(130%);
  background: linear-gradient(140deg, var(--bg-panel), transparent 80%);
  border: 1px solid hsl(0 0% 100% / .06);
  border-radius: 28px;
  margin-top: clamp(1rem, 6vh, 6rem);
  box-shadow: var(--shadow-strong);
  animation: slideFade .9s cubic-bezier(.4,0,.2,1);
}

@keyframes slideFade { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

.logo-wrap { display: flex; justify-content: center; margin-bottom: 1.25rem; }
.logo { --size: 68px; width: var(--size); height: var(--size); border-radius: 28%; display: grid; place-items: center; font-size: 2rem; font-weight: 600; color: #fff; background: var(--gradient); box-shadow: 0 12px 28px -6px hsl(258 70% 50% / .55); animation: glowPulse 4.5s ease-in-out infinite; }
@keyframes glowPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }

.headline { font-size: clamp(1.9rem, 3.2vw + .5rem, 3.4rem); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 1.2rem; font-weight: 700; background: linear-gradient(180deg,var(--text-high),var(--text-mid)); -webkit-background-clip: text; color: transparent; }
.gradient-text { background: var(--gradient-alt); -webkit-background-clip: text; color: transparent; filter: drop-shadow(0 4px 18px rgba(140,92,246,0.22)); }
.brand { color: var(--brand); position: relative; }
.lede { font-size: clamp(1rem, 1.05rem + .35vw, 1.35rem); line-height: 1.5; max-width: 62ch; margin: 0 0 2rem; color: var(--text-dim); }

.cta-block { width: 100%; max-width: 560px; margin-bottom: 2.8rem; }
.notify-form { display:flex; gap:.65rem; flex-wrap:wrap; justify-content:center; }
.notify-form input { flex:1 1 280px; padding:.95rem 1.05rem; font-size:1rem; border:1px solid rgba(255,255,255,.12); background: rgba(22,18,34,.55); color:var(--text-high); border-radius:var(--radius-md); backdrop-filter: blur(8px); outline:none; transition: var(--transition); }
.notify-form input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(99,102,241,.18); }
.btn-primary { padding:.95rem 1.4rem; border:none; cursor:pointer; background:var(--gradient); color:#fff; font-size:1rem; font-weight:600; border-radius:var(--radius-md); display:inline-flex; align-items:center; gap:.5rem; transition:var(--transition); box-shadow: 0 4px 16px -4px rgba(99,102,241,.6); }
.btn-primary:hover { transform: translateY(-2px); }

.small { font-size:.8rem; margin:.75rem 0 0; }
.muted { color: var(--text-dim); }

.progress-section {
  width: 100%;
  max-width: 640px;
  background: linear-gradient(160deg, rgba(29,20,46,.72), rgba(20,14,36,.7) 70%);
  border: 1px solid rgba(255,255,255,.07);
  padding: 1.4rem 1.4rem 1.6rem;
  border-radius: 24px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px -6px rgba(40,24,72,.55);
  position: relative;
}

.progress-header { display:flex; justify-content:space-between; font-size:.85rem; text-transform:uppercase; letter-spacing:.12em; color:var(--text-dim); margin-bottom:.5rem; font-weight:600; }
.progress-bar { --h:12px; width:100%; height:var(--h); background: rgba(255,255,255,.12); border-radius:var(--radius-full); overflow:hidden; margin-bottom:1rem; }
.progress-bar .fill { height:100%; width:var(--p); background: linear-gradient(90deg,#6366f1,#8b5cf6,#c026d3); background-size:220% 100%; animation: progressShift 3.5s linear infinite; border-radius:inherit; box-shadow: 0 6px 14px -4px rgba(120,80,220,.45); }
@keyframes progressShift { 0% { background-position: 0 50%; } 100% { background-position: 200% 50%; } }

.milestones { list-style:none; margin:0; padding:0; display:grid; gap:.6rem; font-size:.85rem; text-align:left; }
.milestones li { position:relative; padding-left:1.4rem; color:var(--text-dim); display:flex; align-items:center; min-height:1.4rem; }
.milestones li::before { content:""; width:.75rem; height:.75rem; border-radius:50%; position:absolute; left:0; top:.3rem; background: rgba(255,255,255,.25); }
.milestones li.done::before { background: var(--ok); box-shadow: 0 0 0 4px rgba(16,185,129,.18); }
.milestones li.wip::before { background: linear-gradient(90deg,#6366f1,#c026d3); animation: wipPulse 2.6s ease-in-out infinite; }
@keyframes wipPulse { 0%,100%{ transform: scale(1); } 50% { transform: scale(1.3); } }
.milestones li.pending::before { background: rgba(255,255,255,.28); }

.footer { margin-top: 3.2rem; font-size:.8rem; color:var(--text-dim); }
.tiny { font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; }

.form-feedback { margin-top:.85rem; font-size:.85rem; min-height:1.4em; }
.form-feedback.ok { color: var(--ok); }
.form-feedback.err { color: var(--danger); }

.visually-hidden { position: absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }

.noscript-warning { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); background: #ef4444; color:#fff; padding:.75rem 1.2rem; border-radius:var(--radius-full); font-size:.8rem; font-weight:600; box-shadow: 0 4px 16px -4px #ef4444cc; }

@media (max-width: 680px) {
  .content { padding: 2.2rem 1.2rem 3rem; margin-top: 1.2rem; }
  .headline { font-size: clamp(1.9rem, 8vw, 2.8rem); }
  .milestones { font-size:.8rem; }
}

@keyframes fadeIn { to { opacity:1; } }