/* Google font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap');

:root{
  --blue:#4b6cb7; --purple:#6a11cb; --yellow:#facc15;
  --bg:#0b0b12; --panel:#0f1022; --panel-2:#12132a;
  --text:#e9eaf0; --muted:#b8bbcc;
  --gradient: linear-gradient(135deg, var(--blue), var(--purple));
  --glow: 0 20px 60px rgba(106,17,203,.35);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1000px 550px at 10% -10%, rgba(75,108,183,.30), transparent 70%),
    radial-gradient(800px 500px at 90% -20%, rgba(106,17,203,.28), transparent 70%),
    #0a0b12;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* HERO */
.hero{
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:clamp(24px,4vw,48px) 16px; position:relative; overflow:hidden;
}
.logo{margin-bottom:24px}

/* Animated gradient wordmark */
.animated-logo{
  font-weight:800; font-size:clamp(36px,8vw,84px); letter-spacing:.5px; line-height:1.05;
  background:linear-gradient(90deg, var(--blue), var(--purple), var(--yellow), var(--blue));
  background-size:300% 300%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:logoShift 7s ease-in-out infinite; filter:drop-shadow(0 6px 22px rgba(106,17,203,.25));
}
@keyframes logoShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* Rotating headings */
.heading-rotation{position:relative; min-height:clamp(48px,8vw,64px); margin:10px 0 14px; width:min(980px,92vw)}
.fade-heading{
  position:absolute; inset:0; margin:auto; font-weight:800; font-size:clamp(22px,4.6vw,44px);
  line-height:1.15; opacity:0; transform:translateY(10px) scale(.98);
  transition:opacity .7s ease, transform .7s ease; padding:0 8px;
}
.fade-heading.active{opacity:1; transform:translateY(0) scale(1)}
.subtext{color:var(--muted); font-size:clamp(14px,1.9vw,18px); margin-top:12px}

/* CTA */
.cta-button{
  margin-top:24px; padding:14px 22px; border:0; border-radius:12px; font-weight:700; font-size:16px; color:white;
  background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) border-box, var(--gradient) padding-box;
  box-shadow:var(--glow); cursor:pointer; transition:transform .15s, box-shadow .2s, opacity .2s;
}
.cta-button:hover{transform:translateY(-1px); box-shadow:0 28px 70px rgba(106,17,203,.45)}
.cta-button:active{transform:translateY(0); opacity:.92}

/* Notify */
.notify-section{
  width:min(980px,92vw); margin:48px auto 72px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); border-radius:18px;
  padding:clamp(20px,4vw,36px); backdrop-filter:blur(10px);
  box-shadow:0 12px 40px rgba(0,0,0,.35); text-align:center;
}
.notify-section h2{
  font-size:clamp(22px,3.6vw,32px); font-weight:800; letter-spacing:.3px; margin-bottom:6px;
  background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.notify-section p{color:var(--muted)}

.notify-form{margin-top:18px; display:grid; grid-template-columns:1fr 1fr auto; gap:12px}
.notify-form input, .notify-form button{height:48px; border-radius:12px; font-size:15px}
.notify-form input{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
  color:var(--text); padding:0 14px; outline:none;
}
.notify-form input::placeholder{color:#a9adc3}
.notify-form button{background:var(--gradient); color:#fff; font-weight:700; border:0; padding:0 18px; cursor:pointer; box-shadow:var(--glow)}
.notify-form button:hover{filter:brightness(1.04)}
.notify-form button:active{transform:translateY(1px)}

/* Footer */
footer{color:#9aa0b7; text-align:center; padding:36px 16px 48px; font-size:14px}

/* Responsive */
@media (max-width: 860px){ .notify-form{grid-template-columns:1fr; gap:10px} }
@media (max-width: 520px){ .notify-section{margin:32px auto 56px} .cta-button{width:92%} }