/* BOT Corp — Coming Soon styles */

/* CSS Reset (focused, minimal) */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji'; background: #000; color: #e8ebff; overflow-x: hidden; }

/* Space gradient halo + vignette */
body::before, body::after {
  content: ""; position: fixed; inset: -10vmax; z-index: -2;
  background: radial-gradient(60vmax 60vmax at 15% 20%, rgba(114,147,255,.25), transparent 60%),
              radial-gradient(70vmax 70vmax at 85% 70%, rgba(255,92,0,.18), transparent 60%),
              radial-gradient(40vmax 40vmax at 70% 15%, rgba(190,0,255,.2), transparent 60%);
  filter: saturate(120%) blur(0.5px);
}
body::after { z-index: -1; background: radial-gradient(120vmax 80vmax at 50% 120%, rgba(255,255,255,.06), transparent 65%); pointer-events: none; }

/* Layout */
.viewport { position: relative; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; }

/* Canvas behind content */
#starfield { position: fixed; inset: 0; z-index: -3; background: #000; }

/* Card */
.card {
  width: min(1080px, 92%);
  margin: clamp(24px, 8vh, 80px) auto 0;
  padding: clamp(20px, 4vw, 40px);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(12px) saturate(120%);
}

.brand { display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: clamp(16px, 3vw, 36px); }
.brand .logo { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(0,0,0,.6)); border-radius: 16px; }
.titles { display: grid; gap: 8px; }
.headline { margin: 0; font-size: clamp(28px, 5vw, 54px); letter-spacing: .2px; font-weight: 800; }
.tagline { margin: 0; color: #cfd6ff; opacity: .9; font-weight: 400; }

.gradient-text { background: linear-gradient(90deg, #ff7a18, #ff0069 40%, #7a00ff 75%, #24c0ff); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 24px rgba(124, 47, 255, .35); }

/* Countdown */
.countdown { display: grid; grid-template-columns: repeat(4, minmax(70px, 1fr)); gap: 14px; margin: clamp(16px, 4vw, 32px) 0 10px; }
.time { padding: 14px 12px; text-align: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; }
.time span { display: block; font-weight: 800; font-size: clamp(22px, 4.8vw, 40px); letter-spacing: 1px; }
.time label { display: block; margin-top: 4px; font-size: 12px; color: #cfd6ff; opacity: .85; }

/* Notify form */
.notify { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; margin-top: 8px; }
.notify input { width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.18); background: rgba(3,7,26,.6); color: #eaf0ff; outline: none; box-shadow: inset 0 0 0 9999px rgba(255,255,255,.02); }
.notify input::placeholder { color: #c9d2ff; opacity: .6; }
.notify .help { grid-column: 1 / -1; margin: 2px 0 0; color: #cbd3ff; opacity: .7; font-size: 12px; }
.form-message { grid-column: 1 / -1; margin: 0; height: 18px; font-size: 13px; color: #b6ffdb; }

/* Buttons */
.btn { appearance: none; border: 0; border-radius: 14px; padding: 14px 18px; font-weight: 700; color: #070b1a; background: linear-gradient(90deg,#8afff2,#8fff94); cursor: pointer; transition: transform .15s ease, filter .15s ease, box-shadow .15s ease; box-shadow: 0 10px 24px rgba(0, 244, 191, .18); }
.btn:hover { transform: translateY(-1px); filter: saturate(1.1); }
.btn:active { transform: translateY(0); }
.btn.glow { box-shadow: 0 0 0 2px rgba(0,255,214,.25), 0 20px 40px rgba(0,255,214,.18); }
.btn.secondary { background: transparent; color: #e8ebff; border: 1px solid rgba(255,255,255,.18); box-shadow: none; }
.btn.secondary:hover { background: rgba(255,255,255,.06); }

.links { margin-top: 18px; }

/* Discord button */
.btn.discord {
  display: inline-flex; align-items: center; gap: 10px;
  color: #ffffff;
  background: linear-gradient(90deg, #5865F2 0%, #7A5AF8 50%, #5865F2 100%);
  background-size: 200% 100%;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(88,101,242,.35), 0 0 0 2px rgba(88,101,242,.25) inset;
}
.btn.discord svg { flex: none; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.btn.discord:hover { background-position: 100% 0; box-shadow: 0 16px 36px rgba(88,101,242,.45), 0 0 0 2px rgba(255,255,255,.3) inset; }


.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.feature { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 16px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.02); }
.feature .icon { font-size: 22px; margin-bottom: 6px; filter: drop-shadow(0 6px 16px rgba(0,0,0,.5)); }
.feature h3 { margin: 0 0 6px; font-size: 16px; }
.feature p { margin: 0; color: #cfd6ff; font-size: 13px; line-height: 1.5; }

.footer { width: min(1080px, 92%); margin: 18px auto 28px; text-align: center; color: #cfd6ff; opacity: .8; font-size: 14px; }

/* Responsive */
@media (max-width: 720px) {
  .brand { grid-template-columns: 1fr; text-align: center; }
  .titles { justify-items: center; }
  .notify { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr 1fr; }
}