@font-face { font-family: 'Gilroy'; font-weight: 500; font-display: swap; src: url('fonts/SVN-Gilroy-Medium.otf') format('opentype'); }
@font-face { font-family: 'Gilroy'; font-weight: 600; font-display: swap; src: url('fonts/SVN-Gilroy-SemiBold.otf') format('opentype'); }
@font-face { font-family: 'Gilroy'; font-weight: 700; font-display: swap; src: url('fonts/SVN-Gilroy-Bold.otf') format('opentype'); }

:root {
  --background: #141618;
  --foreground: #ffffff;
  --muted-foreground: #898a8b;
  --logo-wordmark: #f9d022;
  --logo-badge-bg: rgba(249, 208, 34, 0.15);
  --logo-badge-text: #f9d022;
  --logo-badge-border: rgba(249, 208, 34, 0.3);
  --font: 'Gilroy', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; }

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.page {
  position: relative;
  display: flex;
  min-height: 100dvh;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Ambient cyber-grid backdrop (same as the app's empty state) */
.grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image:
    linear-gradient(rgba(249, 208, 34, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(249, 208, 34, 0.5) 1px, transparent 1px);
  background-size: 48px 48px;
}

.hero {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  max-width: 680px;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 0 16px 24px;
}

.electric-logo {
  position: relative;
  width: 100%;
  max-width: 390px;
  height: clamp(195px, 35dvh, 312px);
  margin-bottom: -16px;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 95% 90% at 50% 50%, #000 70%, transparent 100%);
  mask-image: radial-gradient(ellipse 95% 90% at 50% 50%, #000 70%, transparent 100%);
}

/* Static fallback when WebGL2 is unavailable */
.electric-fallback {
  background: url('niteco-logo.svg') center / 45% no-repeat;
  filter: drop-shadow(0 0 18px rgba(249, 208, 34, 0.45));
}

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

.wordmark {
  height: 32px;
  width: auto;
  fill: var(--logo-wordmark);
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  transform: translateY(5px);
  border: 1px solid var(--logo-badge-border);
  border-radius: 9999px;
  background: var(--logo-badge-bg);
  color: var(--logo-badge-text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}

.note {
  max-width: 460px;
  margin-top: 4px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--muted-foreground);
  opacity: 0.85;
}

@media (min-width: 640px) {
  .hero { gap: 24px; padding: 0 16px 48px; }
  .electric-logo { max-width: 494px; height: 416px; margin-bottom: -31px; }
  .note { font-size: 14px; }
}