/* =============================================
   Aether Hybrid Design System — Override Layer
   Precision Brutalism: glassmorphism + brutal
   ============================================= */

/* === SELECTION === */
::selection { background: rgba(0,229,255,0.3); color: #08090A; }

/* === FONT SWAP === */
.section-title,
.card-title,
h1, h2, h3, .font-display {
  font-family: 'Bricolage Grotesque', sans-serif;
}

.section-title {
  color: #0A0A0A;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.section-subtitle {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-style: normal;
  font-weight: 500;
  color: #6b7280;
}

.card-title {
  color: #0A0A0A;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.bento-tag {
  color: rgba(0,0,0,0.45);
  border-color: rgba(0,0,0,0.1);
}

/* === BACKGROUND PATTERNS === */
.bg-grid-pattern {
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.04) 1px, transparent 1px);
}

.bg-dot-pattern {
  background-size: 24px 24px;
  background-image: radial-gradient(circle, rgba(0,0,0,0.06) 1px, transparent 1px);
}

.bg-grid-dark {
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, rgba(0,229,255,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,229,255,0.06) 1px, transparent 1px);
}

/* === BRUTALIST SHADOWS === */
.brutalist-shadow {
  box-shadow: 6px 6px 0px 0px #000000;
  transition: all 0.2s ease;
}
.brutalist-shadow:hover {
  box-shadow: 3px 3px 0px 0px #000000;
  transform: translate(3px, 3px);
}

.brutalist-shadow-cyan {
  box-shadow: 6px 6px 0px 0px #00E5FF;
  transition: all 0.2s ease;
}
.brutalist-shadow-cyan:hover {
  box-shadow: 3px 3px 0px 0px #00E5FF;
  transform: translate(3px, 3px);
}

.brutalist-shadow-lime {
  box-shadow: 8px 8px 0px 0px #B9FF66;
  transition: all 0.25s ease;
}
.brutalist-shadow-lime:hover {
  box-shadow: 4px 4px 0px 0px #B9FF66;
  transform: translate(4px, 4px);
}

/* === GLASS EFFECTS (Aether Hybrid) === */
.glass-panel {
  background: rgba(255,255,255,0.65) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 2px solid rgba(0,0,0,0.08) !important;
  border-radius: 20px;
}

.glass-brutal {
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 3px solid #000;
}

.glass-light {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.glass-dark {
  background: rgba(8,9,10,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 3px solid rgba(0,229,255,0.15);
}

/* === SPOTLIGHT CARD === */
.spotlight-card {
  background: rgba(255,255,255,0.65) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 3px solid #000 !important;
  border-radius: 30px !important;
  box-shadow: 6px 6px 0px 0px #000000;
  transition: all 0.25s ease;
  overflow: visible !important;
  contain: none !important;
}
.spotlight-card:hover {
  box-shadow: 3px 3px 0px 0px #000000;
  transform: translate(3px, 3px);
}
/* Disable mouse-follow glow on spotlight cards */
.spotlight-card::before,
.spotlight-card::after {
  display: none !important;
}

/* === CARD BENTO === */
.card-bento {
  background: rgba(255,255,255,0.6) !important;
  border: 3px solid #000 !important;
  border-radius: 30px !important;
  padding: 28px;
  box-shadow: 6px 6px 0px 0px #000000;
  transition: all 0.25s ease;
  overflow: visible !important;
  contain: none !important;
}
.card-bento:hover {
  box-shadow: 3px 3px 0px 0px #000000;
  transform: translate(3px, 3px);
}

/* === NEXUS BADGE === */
.nexus-badge {
  border: 2px solid #000 !important;
  background: #00E5FF !important;
  color: #000 !important;
  border-radius: 9999px !important;
  transform: rotate(-2deg);
  font-weight: 700;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.nexus-badge .animate-ping {
  background-color: #000 !important;
}
.nexus-badge .bg-blue-400,
.nexus-badge .bg-blue-500 {
  background-color: #000 !important;
}

/* === ICON BOX GLASS === */
.icon-box-glass {
  background: rgba(0,229,255,0.08) !important;
  border: 2px solid #000 !important;
  border-radius: 16px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* === CTA GLOW === */
.cta-glow {
  box-shadow: 6px 6px 0px 0px #00E5FF !important;
  border: 2px solid #000 !important;
  border-radius: 1rem !important;
}
.cta-glow::before,
.cta-glow::after {
  display: none !important;
}
.cta-glow:hover {
  box-shadow: 3px 3px 0px 0px #00E5FF !important;
  transform: translate(3px, 3px) scale(1.02);
}

/* === INPUT GLASS === */
.input-glass {
  background: rgba(255,255,255,0.8) !important;
  border: 2px solid #000 !important;
  color: #0A0A0A !important;
  border-radius: 1rem !important;
}
.input-glass::placeholder {
  color: rgba(0,0,0,0.3) !important;
}
.input-glass:focus {
  border-color: #00E5FF !important;
  background: #fff !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,229,255,0.2);
}

/* === CAPS MONO === */
.caps-mono {
  color: rgba(0,0,0,0.3) !important;
}

/* === DIVIDER FADE === */
.divider-fade {
  background: linear-gradient(to right, transparent, rgba(0,0,0,0.1), transparent) !important;
}

/* === MARQUEE === */
.marquee-item-sm {
  color: #000 !important;
  font-weight: 800 !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  letter-spacing: -0.02em !important;
  font-size: 1.5rem !important;
}
@media (min-width: 768px) {
  .marquee-item-sm {
    font-size: 2.25rem !important;
  }
}

/* === SCROLL PROGRESS === */
.scroll-progress {
  background: linear-gradient(90deg, #00E5FF, #B9FF66) !important;
}

/* === NAV LINK === */
.nav-link {
  color: rgba(0,0,0,0.45) !important;
}
.nav-link:hover {
  color: #00E5FF !important;
}

/* === BODY — dark base so hero has no gap === */
body {
  background-color: #08090A;
}

/* === SECTION BASE === */
.section-base {
  background-color: #F3F3F1;
  position: relative;
}

/* === DARK SECTION OVERRIDES === */
.section-dark {
  background-color: #08090A !important;
}

.section-dark .section-title {
  color: #fff !important;
}

.section-dark .section-subtitle {
  color: rgba(255,255,255,0.6) !important;
}

.section-dark .card-title {
  color: #fff !important;
}

.section-dark .spotlight-card,
.section-dark .card-bento {
  background: rgba(8,9,10,0.85) !important;
  border-color: rgba(0,229,255,0.15) !important;
  box-shadow: 6px 6px 0px 0px #00E5FF !important;
}
.section-dark .spotlight-card:hover,
.section-dark .card-bento:hover {
  box-shadow: 3px 3px 0px 0px #00E5FF !important;
  transform: translate(3px, 3px);
}

.section-dark .glass-panel {
  background: rgba(8,9,10,0.85) !important;
  border-color: rgba(0,229,255,0.15) !important;
}

.section-dark .nexus-badge {
  background: #00E5FF !important;
  color: #000 !important;
}

.section-dark .caps-mono {
  color: rgba(255,255,255,0.2) !important;
}

.section-dark .bento-tag {
  color: rgba(255,255,255,0.4) !important;
}

.section-dark .icon-box-glass {
  background: rgba(0,229,255,0.1) !important;
  border-color: rgba(0,229,255,0.2) !important;
}

/* === SECTION HEADER === */
.section-header {
  border-bottom-color: rgba(0,0,0,0.06);
}

/* === GRID BENTO === */
.grid-bento {
  gap: 20px;
  overflow: visible !important;
}

/* === DARK FORM === */
/* Opaque background-color so contrast checkers compute fg/bg correctly
   (instead of treating translucent-white-over-dark as dark text on dark).
   Uses background-color (not shorthand) so the inline background-image chevron
   on <select> elements still renders. */
.form-dark .input-glass {
  background-color: #1B1E22 !important;
  background-image: none;
  border: 2px solid rgba(0,229,255,0.35) !important;
  color: #fff !important;
}
.form-dark select.input-glass {
  /* Selects keep their inline chevron background-image — don't clear it. */
  background-image: revert;
}
.form-dark .input-glass::placeholder {
  color: #9CA3AF !important;
}
.form-dark .input-glass:focus {
  border-color: #00E5FF !important;
  background-color: #22262B !important;
  box-shadow: 0 0 0 3px rgba(0,229,255,0.15);
}
.form-dark select.input-glass option {
  background: #08090A;
  color: #fff;
}

/* === WHATSAPP FLOAT === */
.whatsapp-float {
  border: 3px solid #000 !important;
  border-radius: 20px !important;
}

/* === ANIMATIONS FROM AETHER === */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(0,229,255,0.2); }
  50% { box-shadow: 0 0 40px rgba(0,229,255,0.5); }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}

/* === MOBILE OVERRIDES === */
@media (max-width: 767px) {
  .glass-panel {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(243,243,241,0.98) !important;
  }

  .section-dark .glass-panel {
    background: rgba(8,9,10,0.95) !important;
  }

  .nexus-badge {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .icon-box-glass {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .spotlight-card,
  .card-bento {
    box-shadow: 4px 4px 0px 0px #000000;
  }

  .section-dark .spotlight-card,
  .section-dark .card-bento {
    box-shadow: 4px 4px 0px 0px #00E5FF;
  }

  .brutalist-shadow { box-shadow: 4px 4px 0px 0px #000000; }
  .brutalist-shadow-cyan { box-shadow: 4px 4px 0px 0px #00E5FF; }
  .brutalist-shadow-lime { box-shadow: 5px 5px 0px 0px #B9FF66; }
}

/* === CONTRAST FIX — darken light grays === */
/* Light sections: gray-500 (#6b7280) → #4b5563 (gray-600) */
.section-base .text-gray-500,
.section-base .text-gray-400 {
  color: #4b5563 !important;
}

/* Dark sections & hero: neutral-400 (#a3a3a3) → #d4d4d4 (neutral-300) */
.section-dark .text-neutral-400,
#hero .text-neutral-400 {
  color: #d4d4d4 !important;
}

/* Dark sections: gray-500 → lighter for readability */
.section-dark .text-gray-500 {
  color: #9ca3af !important;
}