@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=DM+Sans:wght@300;400&display=swap');

:root {
  --black: #000000;
  --yellow: #FFC300;
  --white: #FFFFFF;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--black);
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* Animated grid */
.bg-grid {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,195,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,195,0,0.04) 1px, transparent 1px);
  background-size: 72px 72px;
  animation: gridDrift 25s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes gridDrift { 0% { background-position: 0 0; } 100% { background-position: 72px 72px; } }

/* Glow orbs */
.orb { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; }
.orb-1 { width: 700px; height: 700px; top: -250px; left: -250px; background: radial-gradient(circle, rgba(255,195,0,0.09) 0%, transparent 65%); animation: orbFloat 14s ease-in-out infinite alternate; }
.orb-2 { width: 600px; height: 600px; bottom: -200px; right: -200px; background: radial-gradient(circle, rgba(255,195,0,0.07) 0%, transparent 65%); animation: orbFloat 18s ease-in-out infinite alternate-reverse; }
@keyframes orbFloat { 0% { transform: translate(0,0); } 100% { transform: translate(50px,50px); } }

.scanlines { position: fixed; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.07) 3px, rgba(0,0,0,0.07) 4px); pointer-events: none; z-index: 1; }

.stage { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 24px; }

.logo-wrap { opacity: 0; transform: translateY(-24px); animation: fadeUp 1s cubic-bezier(0.2,0,0.2,1) 0.2s forwards; }
.logo-img { width: clamp(240px, 42vw, 380px); filter: drop-shadow(0 0 40px rgba(255,195,0,0.4)); animation: logoGlow 3s ease-in-out infinite alternate; }
@keyframes logoGlow { 0% { filter: drop-shadow(0 0 28px rgba(255,195,0,0.3)); } 100% { filter: drop-shadow(0 0 65px rgba(255,195,0,0.7)); } }

.divider { width: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--yellow), transparent); margin: 44px 0 48px; animation: expandLine 1s cubic-bezier(0.4,0,0.2,1) 0.9s forwards; }
@keyframes expandLine { to { width: clamp(200px, 55vw, 500px); } }

.coming-soon { font-family: 'Syne', sans-serif; font-size: clamp(3rem, 9vw, 7rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: var(--white); opacity: 0; transform: translateY(24px); animation: fadeUp 1s cubic-bezier(0.2,0,0.2,1) 1.1s forwards; }
.coming-soon .dot { color: var(--yellow); }
.subtitle { font-size: clamp(0.8rem, 2vw, 0.95rem); font-weight: 300; color: rgba(255,255,255,0.4); letter-spacing: 0.2em; text-transform: uppercase; margin-top: 20px; opacity: 0; animation: fadeUp 1s cubic-bezier(0.2,0,0.2,1) 1.4s forwards; }

.notify-wrap { margin-top: 56px; opacity: 0; animation: fadeUp 1s cubic-bezier(0.2,0,0.2,1) 1.7s forwards; }
.notify-label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.3); margin-bottom: 14px; }
.notify-form { display: flex; border: 1.5px solid rgba(255,195,0,0.2); border-radius: 6px; overflow: hidden; transition: border-color 0.3s, box-shadow 0.3s; }
.notify-form:focus-within { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255,195,0,0.12); }
.notify-input { background: rgba(255,255,255,0.04); border: none; outline: none; padding: 14px 20px; font-family: 'DM Sans', sans-serif; font-size: 0.88rem; color: var(--white); width: clamp(180px, 32vw, 260px); }
.notify-input::placeholder { color: rgba(255,255,255,0.22); }
.notify-btn { background: var(--yellow); border: none; padding: 14px 24px; font-family: 'Syne', sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--black); cursor: pointer; transition: background 0.25s; white-space: nowrap; }
.notify-btn:hover { background: #E6AF00; }
.success-msg { display: none; font-size: 0.8rem; color: var(--yellow); letter-spacing: 0.06em; margin-top: 12px; }

.corner-tag { position: absolute; left: 50%; bottom: 26px; transform: translate(-50%, 24px); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.18); z-index: 3; opacity: 0; animation: fadeUpCenter 1s ease 2s forwards; white-space: nowrap; }

@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

@keyframes fadeUpCenter { to { opacity: 1; transform: translate(-50%, 0); } }