/* ── FONTS ─── */
* {
  font-family: 'DM Sans', sans-serif;
}

h1,
h2,
.font-display {
  font-family: 'Bebas Neue', sans-serif;
}

html {
  scroll-padding-top: 76px;
}

/* ── THEME TOKENS ─── */
:root {
  --bg-primary: #060d14;
  --bg-secondary: #0a1520;
  --bg-card: rgba(15, 31, 48, 0.65);
  --border-card: rgba(0, 168, 212, 0.15);
  --text-primary: #f1f5f9;
  --text-muted: #94a3b8;
  --text-faint: #475569;
  --grid-line: rgba(0, 168, 212, 0.05);
  --glow-a: rgba(0, 168, 212, 0.15);
  --glow-b: rgba(0, 136, 173, 0.10);
  --hero-grad: linear-gradient(135deg, #060d14 0%, #0a1520 55%, #0f1f30 100%);
}

html.light {
  --bg-primary: #f0f7ff;
  --bg-secondary: #e2eef8;
  --bg-card: rgba(255, 255, 255, 0.80);
  --border-card: rgba(0, 168, 212, 0.2);
  --text-primary: #0a1520;
  --text-muted: #34657a;
  --text-faint: #7aaabb;
  --grid-line: rgba(0, 168, 212, 0.07);
  --glow-a: rgba(0, 168, 212, 0.10);
  --glow-b: rgba(0, 136, 173, 0.07);
  --hero-grad: linear-gradient(135deg, #cce9f7 0%, #dff2fb 55%, #f0f7ff 100%);
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: background 0.35s, color 0.35s;
}

/* ── SECTION BG ─── */
.section-a {
  background: var(--bg-primary);
}

.section-b {
  background: var(--bg-secondary);
}

/* ── HERO ─── */
/* Uses min-height so it fills the viewport correctly on every screen */
.hero-section {
  background:
    radial-gradient(ellipse at 22% 55%, var(--glow-a) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 15%, var(--glow-b) 0%, transparent 50%),
    var(--hero-grad);
  min-height: 100vh;
  display: flex;
  align-items: center;
  /* top padding = navbar height + extra breathing room */
  padding-top: 100px;
  padding-bottom: 80px;
  position: relative;
  overflow: hidden;
}

/* ── GRID + NOISE ─── */
.grid-lines {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 60px 60px;
}

.noise::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* ── GLASS CARD ─── */
.glass-card {
  background: var(--bg-card);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border-card);
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.glass-card:hover {
  border-color: rgba(0, 168, 212, 0.42);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 168, 212, 0.09);
}

/* ── STAT NUMBER ─── */
.stat-number {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3.6rem;
  line-height: 1;
  background: linear-gradient(135deg, #00c8f8, #00aad4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── CARD GHOST NUMBER ─── */
.card-number {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 80px;
  line-height: 1;
  color: rgba(0, 168, 212, 0.06);
  position: absolute;
  top: 10px;
  right: 14px;
  pointer-events: none;
}

/* ── ANIMATED BORDER ─── */
@keyframes borderAnim {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.animated-border {
  background: linear-gradient(90deg, #00aad4, #0088ad, #5adeff, #00aad4);
  background-size: 300% 300%;
  animation: borderAnim 4s ease infinite;
}

/* ── SCROLL REVEAL ─── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── NAVBAR ─── */
#navbar {
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.navbar-scrolled {
  background: rgba(6, 13, 20, 0.92) !important;
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(0, 168, 212, 0.12);
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.28);
}

html.light .navbar-scrolled {
  background: rgba(240, 247, 255, 0.94) !important;
  border-bottom: 1px solid rgba(0, 168, 212, 0.18);
  box-shadow: 0 4px 20px rgba(0, 168, 212, 0.07);
}

/* ── THEME TOGGLE ─── */
#themeToggle {
  width: 38px;
  height: 38px;
  border-radius: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-muted);
}

#themeToggle:hover {
  border-color: #00aad4;
  color: #00aad4;
}

/* ── FORM FIELDS ─── */
.field {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  color: var(--text-primary);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.field::placeholder {
  color: var(--text-faint);
}

.field:focus {
  outline: none;
  border-color: #00aad4;
  box-shadow: 0 0 0 3px rgba(0, 168, 212, 0.12);
}

/* ── GUARANTEE IMAGE ─── */
.guarantee-img {
  background: url('img/pcGamer.jpg') center/cover no-repeat;
  min-height: 420px;
}

/* ── WHATSAPP FAB ─── */
.whatsapp-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
}

/* ── COLOR HELPERS ─── */
.t-primary {
  color: var(--text-primary);
}

.t-muted {
  color: var(--text-muted);
}

.t-faint {
  color: var(--text-faint);
}