/* ═══════════════════════════════════════════════════════════════════
   PeerLink Landing Page — Neumorphism (Soft UI / Extruded Plastic)
   Strict Light Mode: Dual-source soft lighting on porcelain canvas
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --neu-base: #f5f5f7;
  --neu-card-bg: #ffffff;
  --neu-light: #ffffff;
  --neu-dark: rgba(166, 180, 200, 0.55);
  --neu-dark-strong: rgba(150, 165, 185, 0.75);
  --neu-primary: #0284c7;
  --neu-primary-hover: #0ea5e9;

  --neu-flat: 8px 8px 20px var(--neu-dark), -8px -8px 20px var(--neu-light);
  --neu-flat-hover: 12px 12px 28px var(--neu-dark-strong), -12px -12px 28px var(--neu-light);
  --neu-flat-sm: 5px 5px 12px var(--neu-dark), -5px -5px 12px var(--neu-light);
  --neu-flat-xs: 3px 3px 8px var(--neu-dark), -3px -3px 8px var(--neu-light);
  --neu-pressed: inset 3px 3px 7px var(--neu-dark), inset -3px -3px 7px var(--neu-light);
  --neu-pressed-sm: inset 2px 2px 5px var(--neu-dark), inset -2px -2px 5px var(--neu-light);
  --neu-rim: 1px solid rgba(203, 213, 225, 0.85);
}

html[data-theme="dark"],
html.dark {
  --neu-base: #12161f;
  --neu-card-bg: #181b20;
  --neu-light: rgba(255, 255, 255, 0.05);
  --neu-dark: rgba(0, 0, 0, 0.7);
  --neu-dark-strong: rgba(0, 0, 0, 0.88);
  --neu-primary: #38bdf8;
  --neu-primary-hover: #0ea5e9;

  --neu-flat: 8px 8px 22px rgba(0, 0, 0, 0.7);
  --neu-flat-hover: 12px 12px 28px rgba(0, 0, 0, 0.85);
  --neu-flat-sm: 4px 4px 12px rgba(0, 0, 0, 0.65);
  --neu-flat-xs: 2px 2px 6px rgba(0, 0, 0, 0.55);
  --neu-pressed: inset 3px 3px 7px rgba(0, 0, 0, 0.8);
  --neu-pressed-sm: inset 2px 2px 5px rgba(0, 0, 0, 0.7);
  --neu-rim: 1px solid rgba(255, 255, 255, 0.08);
  color-scheme: dark !important;
}

/* ── 1. Global Canvas & Typography Overrides ───────────────────── */

html,
body,
body.text-white {
  background-color: var(--neu-base) !important;
  color: #0f172a !important;
  color-scheme: light;
}

html[data-theme="dark"],
html[data-theme="dark"] body,
html.dark,
html.dark body {
  background-color: var(--neu-base) !important;
  color: #f1f5f9 !important;
  color-scheme: dark !important;
}

/* Page Intro */
.page-intro {
  background: var(--neu-base) !important;
}

.page-intro-inner {
  color: #0f172a !important;
}

.intro-mark {
  color: #0284c7 !important;
  filter: drop-shadow(4px 4px 10px var(--neu-dark)) !important;
}

.page-intro-text {
  color: #334155 !important;
  font-weight: 700 !important;
}

/* ── 2. Top Navigation ─────────────────────────────────────────── */

.site-nav {
  background-color: rgba(235, 240, 247, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 6px 20px rgba(166, 180, 200, 0.4), 0 1px 0 #ffffff inset !important;
}

.site-nav.site-nav--solid {
  background-color: rgba(235, 240, 247, 0.96) !important;
  border-bottom-color: rgba(166, 180, 200, 0.5) !important;
  box-shadow: 0 8px 26px rgba(166, 180, 200, 0.55), 0 1px 0 #ffffff inset !important;
}

.site-nav::after {
  background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.4), transparent) !important;
  display: block !important;
}

/* Brand Text */
.site-brand-title .brand-peer {
  color: #0f172a !important;
}

.site-brand-title .brand-link {
  color: #0284c7 !important;
}

.site-brand-subtitle {
  color: #0284c7 !important;
  font-weight: 600 !important;
}

/* Center Nav Pill Cluster (Sunken Molded Well with Smooth Sliding Pill Indicator) */
.nav-pill-track,
.site-nav .lg\:flex.items-center.gap-1\.5 {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  background: var(--neu-base) !important;
  box-shadow: var(--neu-pressed-sm) !important;
  border: var(--neu-rim) !important;
  border-radius: 9999px !important;
  padding: 4px 5px !important;
  isolation: isolate !important;
}

.nav-pill-indicator {
  position: absolute !important;
  top: 4px !important;
  left: 0 !important;
  height: calc(100% - 8px) !important;
  background: var(--neu-base) !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 3px 3px 8px rgba(166, 180, 200, 0.6), -3px -3px 8px #ffffff !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.2s ease !important;
  will-change: transform, width;
  display: block !important;
}

.nav-link-pill {
  position: relative !important;
  z-index: 2 !important;
  color: #475569 !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  padding: 6px 16px !important;
  border-radius: 9999px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 1px solid transparent !important;
  text-decoration: none !important;
  transition: color 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
  white-space: nowrap !important;
}

.nav-link-pill:hover {
  color: #0f172a !important;
  background: transparent !important;
}

.nav-link-pill.is-active {
  color: #0284c7 !important;
  font-weight: 700 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

.nav-link-pill:focus-visible {
  outline: 2px solid rgba(14, 165, 233, 0.5) !important;
  outline-offset: 2px !important;
}

/* Header Action Buttons */
.nav-btn-login {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 42px !important;
  padding: 0 22px !important;
  border-radius: 9999px !important;
  background: var(--neu-base) !important;
  color: #0f172a !important;
  border: var(--neu-rim) !important;
  box-shadow: var(--neu-flat-xs) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nav-btn-login:hover {
  color: #0284c7 !important;
  box-shadow: var(--neu-flat-sm) !important;
  transform: translateY(-1px) !important;
}

.nav-btn-login:active {
  box-shadow: var(--neu-pressed-sm) !important;
  transform: translateY(1px) !important;
}

.nav-btn-signup {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 42px !important;
  padding: 0 24px !important;
  border-radius: 9999px !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25), 0 1px 3px rgba(15, 23, 42, 0.06) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nav-btn-signup:hover {
  background: #0369a1 !important;
  box-shadow: 0 3px 12px rgba(2, 132, 199, 0.35), 0 2px 5px rgba(15, 23, 42, 0.1) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}

.nav-btn-signup:active {
  background: #075985 !important;
  box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.4) !important;
  transform: translateY(1px) !important;
}

.landing-theme-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 9999px !important;
  background: var(--neu-base) !important;
  color: #334155 !important;
  border: var(--neu-rim) !important;
  box-shadow: var(--neu-flat-xs) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  padding: 0 !important;
  user-select: none !important;
}

.landing-theme-toggle-btn:hover {
  color: var(--neu-primary) !important;
  box-shadow: var(--neu-flat-sm) !important;
  transform: translateY(-1px) !important;
}

.landing-theme-toggle-btn:active {
  box-shadow: var(--neu-pressed-sm) !important;
  transform: translateY(1px) !important;
}

.landing-theme-icon-sun,
.landing-theme-icon-moon {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  flex-shrink: 0 !important;
}

html:not([data-theme="dark"]) .landing-theme-icon-sun { display: none !important; }
html:not([data-theme="dark"]) .landing-theme-icon-moon { display: block !important; }
html[data-theme="dark"] .landing-theme-icon-sun { display: block !important; color: #f59e0b !important; }
html[data-theme="dark"] .landing-theme-icon-moon { display: none !important; }

/* Mobile Menu Button & Drawer */
#menu-button {
  background: var(--neu-base) !important;
  color: #0f172a !important;
  border: var(--neu-rim) !important;
  box-shadow: var(--neu-flat-xs) !important;
}

#nav-links {
  background: rgba(235, 240, 247, 0.97) !important;
  color: #0f172a !important;
  backdrop-filter: blur(20px) !important;
}

#nav-links a {
  color: #0f172a !important;
  font-weight: 600 !important;
}

#nav-links a.text-\[\#38bdf8\] {
  color: #0284c7 !important;
}

#nav-links #close-menu {
  background: var(--neu-base) !important;
  color: #0f172a !important;
  box-shadow: var(--neu-flat-sm) !important;
  border: var(--neu-rim) !important;
}

/* ── 3. Hero Section & Soft Light Blue Motion ───────────────────── */

#hero {
  background: var(--neu-base) !important;
  position: relative !important;
  overflow: hidden !important;
}

.hero-space-bg {
  background-color: var(--neu-base) !important;
  background-image: none !important;
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  will-change: transform !important;
}

/* Soft Light Blue Atmospheric Motion — Layer 1: Drifting Fluid Clouds */
.hero-space-bg::after {
  content: "" !important;
  position: absolute !important;
  inset: -25% !important;
  background:
    radial-gradient(ellipse 70% 55% at 30% 25%, rgba(186, 230, 253, 0.75), transparent 62%),
    radial-gradient(ellipse 65% 50% at 72% 38%, rgba(125, 211, 252, 0.55), transparent 60%),
    radial-gradient(circle at 50% 75%, rgba(224, 242, 254, 0.85), transparent 55%) !important;
  filter: blur(45px) !important;
  opacity: 0.88 !important;
  mix-blend-mode: normal !important;
  transform: translate3d(0, 0, 0) !important;
  animation: hero-glow-drift 10s ease-in-out infinite !important;
  pointer-events: none !important;
}

/* Soft Light Blue Atmospheric Motion — Layer 2: Orbital Rotating Light Halo */
.hero-space-bg::before {
  content: "" !important;
  position: absolute !important;
  inset: -15% !important;
  background:
    radial-gradient(circle at 22% 26%, rgba(224, 242, 254, 0.9), transparent 45%),
    radial-gradient(circle at 76% 22%, rgba(186, 230, 253, 0.7), transparent 50%),
    radial-gradient(circle at 50% 68%, rgba(56, 189, 248, 0.38), transparent 56%) !important;
  filter: blur(40px) !important;
  opacity: 0.82 !important;
  mix-blend-mode: normal !important;
  animation: hero-orbital 16s linear infinite !important;
  pointer-events: none !important;
}

/* Overhead Soft Light Blue Bloom */
#hero .pointer-events-none.absolute {
  background: radial-gradient(ellipse 115% 75% at 50% -12%, rgba(186, 230, 253, 0.65), rgba(224, 242, 254, 0.4) 45%, transparent 70%) !important;
  opacity: 1 !important;
}

#hero-headline,
.hero-title-glow,
.hero-line,
.hero-word-base {
  color: #0f172a !important;
  text-shadow: none !important;
  animation: none !important;
}

.hero-word-accent {
  color: #0284c7 !important;
  text-shadow: none !important;
  font-weight: 800 !important;
}

.hero-shell p,
#hero p {
  color: #334155 !important;
  text-shadow: none !important;
}

/* Hero CTA Button (Extruded Tactile Button with Soft Light Blue Pulse Aura) */
.hero-cta-pulse {
  background: #0284c7 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.28), 0 2px 6px rgba(15, 23, 42, 0.08) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
}

.hero-cta-pulse::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -6px !important;
  border-radius: inherit !important;
  border: 1.5px solid rgba(56, 189, 248, 0.45) !important;
  box-shadow: 0 0 16px rgba(186, 230, 253, 0.65) !important;
  opacity: 0 !important;
  animation: hero-cta-ring 2.4s ease-out infinite !important;
  pointer-events: none !important;
}

.hero-cta-pulse:hover {
  background: #0369a1 !important;
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.35), 0 3px 8px rgba(15, 23, 42, 0.12) !important;
  transform: translateY(-2px) scale(1.02) !important;
  color: #ffffff !important;
}

.hero-cta-pulse:active {
  background: #075985 !important;
  box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.4) !important;
  transform: translateY(1px) scale(0.99) !important;
}

.hero-cursor {
  background: #0284c7 !important;
}

/* ── 4. Features Section ───────────────────────────────────────── */

#features {
  background-color: var(--neu-base) !important;
}

#features .opacity-25,
#features .opacity-15 {
  opacity: 0.04 !important;
}

/* Vertical Accent Bar */
#features span[aria-hidden="true"] {
  background: linear-gradient(180deg, #0ea5e9, #0284c7) !important;
  box-shadow: var(--neu-flat-xs) !important;
  border-radius: 8px !important;
}

/* Embossed Section Banner Text */
#features .font-banner {
  color: #0f172a !important;
  opacity: 0.9 !important;
  text-shadow: 2px 2px 4px #ffffff, -1px -1px 2px rgba(166, 180, 200, 0.6) !important;
}

#features .font-display {
  color: #0f172a !important;
}

#features .text-slate-300 {
  color: #475569 !important;
}

/* Extruded Plastic Feature Cards */
article.card-hover-lift {
  background: var(--neu-card-bg, #ffffff) !important;
  border: var(--neu-rim) !important;
  border-radius: 24px !important;
  box-shadow: var(--neu-flat) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease !important;
}

article.card-hover-lift:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--neu-flat-hover), 0 0 16px rgba(14, 165, 233, 0.15) !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
}

article.card-hover-lift::before,
article.card-hover-lift::after {
  display: none !important;
}

/* Molded Sunken Icon Pods inside Cards */
article.card-hover-lift span.mb-4,
article.card-hover-lift .feature-card-icon,
.feature-card-icon {
  background: #f8fafc !important;
  box-shadow: inset 1px 1px 3px rgba(166, 180, 200, 0.35), inset -1px -1px 3px #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0284c7 !important;
}

.feature-card-header {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 12px !important;
}

article.card-hover-lift h3 {
  color: #0f172a !important;
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}

article.card-hover-lift p {
  color: #334155 !important;
}

/* ── 5. How It Works Section ───────────────────────────────────── */

#how {
  background-color: var(--neu-base) !important;
}

#how .pointer-events-none.absolute {
  display: none !important;
}

/* How It Works Banner Header */
#how .font-banner {
  color: #0f172a !important;
  -webkit-text-stroke: 1.5px #94a3b8 !important;
  text-shadow: 2px 2px 4px #ffffff, -1px -1px 2px rgba(166, 180, 200, 0.5) !important;
}

/* Extruded Neumorphic Step Cards */
.how-step-card {
  background: var(--neu-base) !important;
  border: var(--neu-rim) !important;
  border-radius: 26px !important;
  box-shadow: var(--neu-flat) !important;
  padding: 34px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  position: relative !important;
  overflow: hidden !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease !important;
}

.how-step-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--neu-flat-hover), 0 0 20px rgba(14, 165, 233, 0.12) !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
}

/* Top Header in Step Card */
.how-step-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
  flex-wrap: wrap !important;
}

/* Step Numbers (Embossed Blue Figures) */
.how-step-num,
#how .font-sans.leading-none {
  font-family: var(--font-sans, 'Plus Jakarta Sans', system-ui, sans-serif) !important;
  font-size: 52px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  color: #0284c7 !important;
  opacity: 0.95 !important;
  text-shadow: 2px 2px 5px rgba(166, 180, 200, 0.5), -2px -2px 5px #ffffff !important;
  transition: transform 0.2s ease !important;
}

.how-step-card:hover .how-step-num {
  transform: scale(1.04) !important;
}

/* Step Badges (Extruded Porcelain Chips) */
.how-step-badge,
#how p.inline-flex {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--neu-base) !important;
  color: #0f172a !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  padding: 7px 16px !important;
  border-radius: 9999px !important;
  border: var(--neu-rim) !important;
  box-shadow: var(--neu-flat-xs) !important;
  letter-spacing: -0.01em !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.how-step-card:hover .how-step-badge {
  color: #0284c7 !important;
  box-shadow: var(--neu-flat-sm) !important;
  border-color: rgba(56, 189, 248, 0.45) !important;
}

/* Step Description Text */
.how-step-desc,
#how .text-white\/90 {
  color: #475569 !important;
  font-size: 15.5px !important;
  line-height: 1.68 !important;
  margin: 0 !important;
}

@media (max-width: 640px) {
  .how-step-card {
    padding: 26px 20px !important;
    border-radius: 20px !important;
  }
  .how-step-num {
    font-size: 46px !important;
  }
  .how-step-badge {
    font-size: 13.5px !important;
    padding: 6px 14px !important;
  }
  .how-step-desc {
    font-size: 14.5px !important;
  }
}

/* One shared animated background from the CTA through the copyright. */
#footer-contact,
#contact-section {
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center top !important;
}

#footer-contact::before,
#contact-section::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background:
    radial-gradient(ellipse 70% 55% at 30% 25%, rgba(56, 189, 248, 0.25), transparent 62%),
    radial-gradient(ellipse 65% 50% at 72% 38%, rgba(14, 165, 233, 0.2), transparent 60%),
    radial-gradient(circle at 50% 75%, rgba(2, 132, 199, 0.2), transparent 55%) !important;
  opacity: 0.72 !important;
  mix-blend-mode: screen !important;
  pointer-events: none !important;
  animation: hero-glow-drift 10s ease-in-out infinite !important;
}

html[data-theme="light"] #footer-contact,
html:not(.dark) #footer-contact,
html[data-theme="light"] #contact-section,
html:not(.dark) #contact-section {
  background-color: #f5f5f7 !important;
  background-image:
    radial-gradient(ellipse 70% 55% at 30% 25%, rgba(186, 230, 253, 0.75), transparent 62%),
    radial-gradient(ellipse 65% 50% at 72% 38%, rgba(125, 211, 252, 0.55), transparent 60%),
    radial-gradient(circle at 50% 75%, rgba(224, 242, 254, 0.85), transparent 55%) !important;
}

html[data-theme="light"] #footer-contact::before,
html:not(.dark) #footer-contact::before,
html[data-theme="light"] #contact-section::after,
html:not(.dark) #contact-section::after {
  background:
    radial-gradient(ellipse 70% 55% at 30% 25%, rgba(255, 255, 255, 0.32), transparent 62%),
    radial-gradient(ellipse 65% 50% at 72% 38%, rgba(125, 211, 252, 0.25), transparent 60%) !important;
  mix-blend-mode: normal !important;
  opacity: 0.8 !important;
}

/* ── 6. Teams Section ──────────────────────────────────────────── */

#teams {
  background-color: var(--neu-base) !important;
}

#teams .pointer-events-none.absolute {
  display: none !important;
}

#teams span[aria-hidden="true"] {
  background: linear-gradient(180deg, #0ea5e9, #0284c7) !important;
  box-shadow: var(--neu-flat-xs) !important;
  border-radius: 8px !important;
}

#teams .font-banner p {
  color: #0f172a !important;
  opacity: 0.9 !important;
  text-shadow: 2px 2px 4px #ffffff, -1px -1px 2px rgba(166, 180, 200, 0.6) !important;
}

/* Extruded Neumorphic Team Member Cards */
.team-card,
#teams article.card-hover-lift {
  background: var(--neu-base) !important;
  border: var(--neu-rim) !important;
  box-shadow: var(--neu-flat) !important;
  border-radius: 26px !important;
  padding: 18px 18px 22px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.team-card:hover,
#teams article.card-hover-lift:hover {
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center top !important;
}

#footer-contact::before,
#contact-section::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background:
    radial-gradient(ellipse 70% 55% at 30% 25%, rgba(56, 189, 248, 0.25), transparent 62%),
    radial-gradient(ellipse 65% 50% at 72% 38%, rgba(14, 165, 233, 0.2), transparent 60%),
    radial-gradient(circle at 50% 75%, rgba(2, 132, 199, 0.2), transparent 55%) !important;
  opacity: 0.72 !important;
  mix-blend-mode: screen !important;
  pointer-events: none !important;
  animation: hero-glow-drift 10s ease-in-out infinite !important;
}

html[data-theme="light"] #footer-contact,
html:not(.dark) #footer-contact,
html[data-theme="light"] #contact-section,
html:not(.dark) #contact-section {
  background-color: #f5f5f7 !important;
  background-image:
    radial-gradient(ellipse 70% 55% at 30% 25%, rgba(186, 230, 253, 0.75), transparent 62%),
    radial-gradient(ellipse 65% 50% at 72% 38%, rgba(125, 211, 252, 0.55), transparent 60%),
    radial-gradient(circle at 50% 75%, rgba(224, 242, 254, 0.85), transparent 55%) !important;
}

html[data-theme="light"] #footer-contact::before,
html:not(.dark) #footer-contact::before,
html[data-theme="light"] #contact-section::after,
html:not(.dark) #contact-section::after {
  background:
    radial-gradient(ellipse 70% 55% at 30% 25%, rgba(255, 255, 255, 0.32), transparent 62%),
    radial-gradient(ellipse 65% 50% at 72% 38%, rgba(125, 211, 252, 0.25), transparent 60%) !important;
  mix-blend-mode: normal !important;
  opacity: 0.8 !important;
}

/* Member Name */
.team-name,
#teams article p.font-card.font-bold {
  font-family: var(--font-sans, 'Plus Jakarta Sans', system-ui, sans-serif) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  letter-spacing: -0.015em !important;
  text-align: center !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.3 !important;
  margin: 0 0 10px !important;
}

/* Neumorphic Role Badge */
.team-role-badge,
#teams article p.font-card.font-medium {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 5px 16px !important;
  border-radius: 9999px !important;
  background: var(--neu-base) !important;
  box-shadow: inset 1.5px 1.5px 3px rgba(100, 116, 139, 0.15), inset -1.5px -1.5px 3px rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  color: #0284c7 !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  transition: all 0.22s ease !important;
  margin: 0 !important;
}

.team-card:hover .team-role-badge,
#teams article.card-hover-lift:hover p.font-card.font-medium {
  color: #0369a1 !important;
  box-shadow: 2px 2px 6px rgba(166, 180, 200, 0.55), -2px -2px 6px #ffffff !important;
  border-color: rgba(56, 189, 248, 0.45) !important;
}

/* ── 7. Call-to-Action Pod ─────────────────────────────────────── */

#footer-contact {
  background: transparent !important;
}

div.relative.overflow-hidden > img[src*="mentorship-journey-bg"] {
  opacity: 0.05 !important;
}

div.relative.overflow-hidden > div[style*="background: rgba(0, 0, 0"] {
  display: none !important;
}

#footer-contact > div {
  background: var(--neu-base) !important;
  border: var(--neu-rim) !important;
  box-shadow: 12px 12px 32px var(--neu-dark-strong), -12px -12px 32px var(--neu-light) !important;
  border-radius: 40px !important;
}

#footer-contact > div > img,
#footer-contact > div > div.bg-black\/60,
#footer-contact > div > div[style*="background: rgba(0, 0, 0"] {
  display: none !important;
}

#footer-contact h2 {
  color: #0f172a !important;
}

#footer-contact p.text-slate-300 {
  color: #334155 !important;
}

#footer-contact a.btn-motion {
  background: #0284c7 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.28) !important;
  text-shadow: none !important;
}

#footer-contact a.btn-motion:hover {
  background: #0369a1 !important;
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.38) !important;
  color: #ffffff !important;
}

#footer-contact a.btn-motion:active {
  background: #075985 !important;
  box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.4) !important;
}

/* ── 8. Footer ─────────────────────────────────────────────────── */

#site-footer {
  background: var(--neu-base) !important;
  border-top: 1px solid rgba(166, 180, 200, 0.4) !important;
  padding: 36px 24px 24px !important;
}

#site-footer .site-footer-grid {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: stretch !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.site-footer-col-brand,
#site-footer .site-footer-col-brand {
  flex: 1.3 1 0% !important;
  min-width: 260px !important;
  max-width: 440px !important;
}

.site-footer-col-contact,
#site-footer .site-footer-col-contact {
  flex: 1 1 0% !important;
  min-width: 220px !important;
}

.site-footer-col-links,
#site-footer .site-footer-col-links {
  flex: 0.9 1 0% !important;
  min-width: 180px !important;
}

.footer-neu-card {
  background: var(--neu-base) !important;
  border-radius: 20px !important;
  padding: 24px 28px !important;
  border: var(--neu-rim) !important;
  box-shadow: var(--neu-flat-sm) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  height: 100% !important;
  box-sizing: border-box !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.footer-neu-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--neu-flat) !important;
}

@media (max-width: 768px) {
  .site-footer-grid,
  #site-footer .site-footer-grid {
    flex-direction: column !important;
    gap: 20px !important;
  }
  .site-footer-col-brand,
  .site-footer-col-contact,
  .site-footer-col-links,
  #site-footer .site-footer-col-brand,
  #site-footer .site-footer-col-contact,
  #site-footer .site-footer-col-links {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

.footer-neu-card img,
.footer-neu-card .site-footer-logo,
#site-footer img,
#site-footer .site-footer-logo {
  width: 44px !important;
  height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  object-fit: contain !important;
}

.site-footer-brand-lockup {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 12px !important;
}

.footer-neu-card .site-brand-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.15 !important;
}

.footer-neu-card .site-brand-title .brand-peer {
  color: #0f172a !important;
}

.footer-neu-card .site-brand-title .brand-link {
  color: #0284c7 !important;
}

.footer-neu-card .site-brand-subtitle,
.footer-neu-card .brand-unit-tag {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0284c7 !important;
  line-height: 1.25 !important;
}

.footer-neu-card .brand-univ-name {
  color: #0f172a !important;
}

.footer-neu-card p,
.footer-neu-card .footer-card-desc {
  color: #334155 !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
}

.footer-neu-card h2,
.footer-neu-card h3,
.footer-neu-card .footer-card-heading {
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}

.footer-neu-card ul {
  color: #1e293b !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
}

.footer-neu-card ul li,
.footer-neu-card .footer-contact-item {
  color: #334155 !important;
}

.footer-neu-card a,
.footer-neu-card .footer-card-link {
  color: #0284c7 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  transition: color 0.2s ease !important;
  text-decoration: none !important;
}

.footer-neu-card a:hover,
.footer-neu-card .footer-card-link:hover {
  color: #0369a1 !important;
  text-decoration: underline !important;
}

.footer-neu-card svg,
.footer-social-icon {
  color: #0284c7 !important;
  width: 16px !important;
  height: 16px !important;
}

.site-copyright {
  color: #64748b !important;
  border-top: 1px solid rgba(166, 180, 200, 0.45) !important;
}

/* CTA Card text in Light Mode - Crisp dark slate */
html:not(.dark) #footer-contact .site-brand-title,
html:not(.dark) #footer-contact .site-brand-title .brand-peer,
html[data-theme="light"] #footer-contact .site-brand-title,
html[data-theme="light"] #footer-contact .site-brand-title .brand-peer,
body:not(.dark) #footer-contact .site-brand-title,
body:not(.dark) #footer-contact .site-brand-title .brand-peer,
#footer-contact .site-brand-title,
#footer-contact .site-brand-title .brand-peer {
  color: #0f172a !important;
}

html:not(.dark) #footer-contact .site-brand-title .brand-link,
html:not(.dark) #footer-contact .site-brand-subtitle,
html[data-theme="light"] #footer-contact .site-brand-title .brand-link,
html[data-theme="light"] #footer-contact .site-brand-subtitle,
body:not(.dark) #footer-contact .site-brand-title .brand-link,
body:not(.dark) #footer-contact .site-brand-subtitle,
#footer-contact .site-brand-title .brand-link,
#footer-contact .site-brand-subtitle {
  color: #0284c7 !important;
}

html:not(.dark) #footer-contact h2,
html[data-theme="light"] #footer-contact h2,
body:not(.dark) #footer-contact h2,
#footer-contact h2 {
  color: #0f172a !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

html:not(.dark) #footer-contact p,
html[data-theme="light"] #footer-contact p,
body:not(.dark) #footer-contact p,
#footer-contact p {
  color: #334155 !important;
  font-weight: 500 !important;
  text-shadow: none !important;
}

html:not(.dark) #footer-contact a.btn-motion,
html[data-theme="light"] #footer-contact a.btn-motion,
body:not(.dark) #footer-contact a.btn-motion,
#footer-contact a.btn-motion {
  background: #0284c7 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.28) !important;
  text-shadow: none !important;
}

#footer-contact a.btn-motion:hover {
  background: #0369a1 !important;
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.38) !important;
  color: #ffffff !important;
}

#footer-contact a.btn-motion:active {
  background: #075985 !important;
  box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.4) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Dark Mode Styles for Landing Page
   ═══════════════════════════════════════════════════════════════════ */

html[data-theme="dark"],
html.dark {
  background-color: #12161f !important;
  color: #f1f5f9 !important;
  color-scheme: dark !important;
}

html[data-theme="dark"] body,
html.dark body {
  background-color: #12161f !important;
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .site-nav,
html.dark .site-nav {
  background-color: rgba(18, 22, 31, 0.92) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.04) inset !important;
}

html[data-theme="dark"] .site-nav.site-nav--solid,
html.dark .site-nav.site-nav--solid {
  background-color: rgba(18, 22, 31, 0.98) !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .site-brand-title .brand-peer,
html.dark .site-brand-title .brand-peer {
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .site-brand-title .brand-link,
html.dark .site-brand-title .brand-link,
html[data-theme="dark"] .site-brand-subtitle,
html.dark .site-brand-subtitle {
  color: #38bdf8 !important;
}

html[data-theme="dark"] .nav-pill-track,
html.dark .nav-pill-track {
  background: #181b20 !important;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 9999px !important;
  padding: 4px 5px !important;
}

html[data-theme="dark"] .nav-pill-indicator,
html.dark .nav-pill-indicator {
  background: #232730 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.6) !important;
  display: block !important;
}

html[data-theme="dark"] .nav-link-pill,
html.dark .nav-link-pill {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .nav-link-pill:hover,
html.dark .nav-link-pill:hover {
  color: #f8fafc !important;
}

html[data-theme="dark"] .nav-link-pill.is-active,
html.dark .nav-link-pill.is-active {
  color: #38bdf8 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .nav-btn-login,
html.dark .nav-btn-login {
  color: #f1f5f9 !important;
  background: #181b20 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 4px 4px 10px rgba(0,0,0,0.6), -2px -2px 6px rgba(255,255,255,0.04) !important;
  border-radius: 9999px !important;
}

html[data-theme="dark"] .nav-btn-login:hover,
html.dark .nav-btn-login:hover {
  color: #38bdf8 !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  box-shadow: 6px 6px 14px rgba(0,0,0,0.7), -3px -3px 8px rgba(255,255,255,0.06) !important;
}

html[data-theme="dark"] .nav-btn-signup,
html.dark .nav-btn-signup {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  border-radius: 9999px !important;
}

html[data-theme="dark"] .nav-btn-signup:hover,
html.dark .nav-btn-signup:hover {
  background: #2563eb !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .nav-btn-signup:active,
html.dark .nav-btn-signup:active {
  background: #1e3a8a !important;
  box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.7) !important;
  transform: translateY(1px) !important;
}

html[data-theme="dark"] .landing-theme-toggle-btn,
html.dark .landing-theme-toggle-btn {
  background: #181b20 !important;
  color: #f1f5f9 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 4px 4px 10px rgba(0,0,0,0.6), -2px -2px 6px rgba(255,255,255,0.04) !important;
}

html[data-theme="dark"] .landing-theme-toggle-btn:hover,
html.dark .landing-theme-toggle-btn:hover {
  color: #38bdf8 !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  box-shadow: 6px 6px 14px rgba(0,0,0,0.7), -3px -3px 8px rgba(255,255,255,0.06) !important;
}

html[data-theme="dark"] #menu-button,
html.dark #menu-button {
  background: #181b20 !important;
  color: #f1f5f9 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 4px 4px 10px rgba(0,0,0,0.6), -2px -2px 6px rgba(255,255,255,0.04) !important;
}

/* Global Headings & Paragraphs */
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4,
html.dark h1, html.dark h2, html.dark h3, html.dark h4 {
  color: #f1f5f9 !important;
  text-shadow: none !important;
}

html[data-theme="dark"] p, html.dark p,
html[data-theme="dark"] .feature-card-body, html.dark .feature-card-body,
html[data-theme="dark"] .feature-section-sub, html.dark .feature-section-sub {
  color: #94a3b8 !important;
}

/* Hero Section in Dark Mode */
html[data-theme="dark"] #hero-headline,
html.dark #hero-headline,
html[data-theme="dark"] .hero-title-glow,
html.dark .hero-title-glow,
html[data-theme="dark"] .hero-line,
html.dark .hero-line,
html[data-theme="dark"] .hero-word-base,
html.dark .hero-word-base {
  color: #f8fafc !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .hero-word-accent,
html.dark .hero-word-accent {
  color: #38bdf8 !important;
  text-shadow: 0 0 16px rgba(56, 189, 248, 0.25) !important;
  font-weight: 800 !important;
}

html[data-theme="dark"] .hero-cursor,
html.dark .hero-cursor {
  background: #38bdf8 !important;
}

html[data-theme="dark"] .hero-shell p,
html.dark .hero-shell p,
html[data-theme="dark"] #hero p,
html.dark #hero p {
  color: #cbd5e1 !important;
  text-shadow: none !important;
}

html[data-theme="dark"] .hero-cta-pulse,
html.dark .hero-cta-pulse {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

html[data-theme="dark"] .hero-cta-pulse:hover,
html.dark .hero-cta-pulse:hover {
  background: #2563eb !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-2px) scale(1.02) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .hero-cta-pulse:active,
html.dark .hero-cta-pulse:active {
  background: #1e3a8a !important;
  box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.7) !important;
  transform: translateY(1px) scale(0.99) !important;
}

html[data-theme="dark"] .hero-cta-pulse::after,
html.dark .hero-cta-pulse::after {
  display: none !important;
  animation: none !important;
}

html[data-theme="dark"] .hero-space-bg,
html.dark .hero-space-bg {
  background-color: #090e17 !important;
  background-image: url("/static/assets/hero-space-bg.png") !important;
}

html[data-theme="dark"] .hero-space-bg::after,
html.dark .hero-space-bg::after {
  background:
    radial-gradient(circle at 30% 20%, rgba(56, 189, 248, 0.35), transparent 58%),
    radial-gradient(circle at 70% 45%, rgba(14, 165, 233, 0.28), transparent 52%),
    radial-gradient(circle at 55% 80%, rgba(2, 132, 199, 0.20), transparent 56%) !important;
  filter: blur(22px) !important;
  opacity: 0.7 !important;
  mix-blend-mode: screen !important;
  animation: hero-glow-drift 8.5s ease-in-out infinite !important;
}

html[data-theme="dark"] .hero-space-bg::before,
html.dark .hero-space-bg::before {
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.2), transparent 30%),
    radial-gradient(circle at 78% 20%, rgba(56, 189, 248, 0.28), transparent 38%),
    radial-gradient(circle at 52% 72%, rgba(14, 165, 233, 0.24), transparent 42%) !important;
  opacity: 0.78 !important;
  mix-blend-mode: screen !important;
  animation: hero-orbital 13s linear infinite !important;
}

html[data-theme="dark"] #hero .pointer-events-none.absolute,
html.dark #hero .pointer-events-none.absolute {
  background: radial-gradient(ellipse 120% 80% at 50% -20%, rgba(14, 165, 233, 0.25), transparent 55%) !important;
  opacity: 0.7 !important;
}

/* Section specific overrides */
html[data-theme="dark"] .font-banner,
html.dark .font-banner,
html[data-theme="dark"] .font-display,
html.dark .font-display {
  color: #f1f5f9 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
}

html[data-theme="dark"] #features .font-banner,
html.dark #features .font-banner,
html[data-theme="dark"] #features .font-display,
html.dark #features .font-display,
html[data-theme="dark"] #features .text-slate-300,
html.dark #features .text-slate-300 {
  color: #f1f5f9 !important;
  text-shadow: none !important;
}

html[data-theme="dark"] #features .text-slate-300,
html.dark #features .text-slate-300 {
  color: #94a3b8 !important;
}

/* Extruded cards in dark mode */
html[data-theme="dark"] article.card-hover-lift,
html.dark article.card-hover-lift,
html[data-theme="dark"] .card-hover-lift,
html.dark .card-hover-lift {
  background: #181b20 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 8px 8px 22px rgba(0, 0, 0, 0.7) !important;
}

html[data-theme="dark"] article.card-hover-lift:hover,
html.dark article.card-hover-lift:hover,
html[data-theme="dark"] .card-hover-lift:hover,
html.dark .card-hover-lift:hover {
  border-color: rgba(56, 189, 248, 0.4) !important;
  box-shadow: 12px 12px 28px rgba(0, 0, 0, 0.8), 0 0 16px rgba(56, 189, 248, 0.18) !important;
}

html[data-theme="dark"] article.card-hover-lift h3,
html.dark article.card-hover-lift h3 {
  color: #f1f5f9 !important;
  text-shadow: none !important;
}

html[data-theme="dark"] article.card-hover-lift p,
html.dark article.card-hover-lift p {
  color: #94a3b8 !important;
}

html[data-theme="dark"] article.card-hover-lift span.mb-4,
html.dark article.card-hover-lift span.mb-4,
html[data-theme="dark"] article.card-hover-lift .feature-card-icon,
html.dark article.card-hover-lift .feature-card-icon,
html[data-theme="dark"] .feature-card-icon,
html.dark .feature-card-icon {
  background: #12161f !important;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #38bdf8 !important;
}

/* How It Works Section */
html[data-theme="dark"] #how .font-banner,
html.dark #how .font-banner,
html[data-theme="dark"] #how h2,
html.dark #how h2,
html[data-theme="dark"] #how h3,
html.dark #how h3 {
  color: #f1f5f9 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
}

html[data-theme="dark"] #how p,
html.dark #how p {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .how-step-card,
html.dark .how-step-card {
  background: #181b20 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 8px 8px 22px rgba(0, 0, 0, 0.7) !important;
}

html[data-theme="dark"] .how-step-card:hover,
html.dark .how-step-card:hover {
  border-color: rgba(56, 189, 248, 0.5) !important;
  box-shadow: 12px 12px 28px rgba(0, 0, 0, 0.8), 0 0 20px rgba(56, 189, 248, 0.15) !important;
}

html[data-theme="dark"] .how-step-num,
html.dark .how-step-num,
html[data-theme="dark"] #how .font-sans.leading-none,
html.dark #how .font-sans.leading-none {
  color: #38bdf8 !important;
  text-shadow: none !important;
}

html[data-theme="dark"] .how-step-badge,
html.dark .how-step-badge,
html[data-theme="dark"] #how p.inline-flex,
html.dark #how p.inline-flex {
  background: #12161f !important;
  color: #f1f5f9 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.7) !important;
}

/* Teams Section */
html[data-theme="dark"] #teams .font-banner p,
html.dark #teams .font-banner p,
html[data-theme="dark"] #teams h2,
html.dark #teams h2,
html[data-theme="dark"] #teams h3,
html.dark #teams h3 {
  color: #f1f5f9 !important;
  text-shadow: none !important;
}

html[data-theme="dark"] #teams p,
html.dark #teams p {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .team-card,
html.dark .team-card,
html[data-theme="dark"] #teams article.card-hover-lift,
html.dark #teams article.card-hover-lift {
  background: #181b20 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.65) !important;
}

html[data-theme="dark"] .team-card:hover,
html.dark .team-card:hover,
html[data-theme="dark"] #teams article.card-hover-lift:hover,
html.dark #teams article.card-hover-lift:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  box-shadow: 10px 10px 28px rgba(0, 0, 0, 0.8), 0 0 16px rgba(56, 189, 248, 0.15) !important;
}

/* Molded Portrait Frame - Dark Mode (remove white border and white inner shadow) */
html[data-theme="dark"] .team-photo-frame,
html.dark .team-photo-frame,
html[data-theme="dark"] #teams article .aspect-square,
html.dark #teams article .aspect-square {
  position: relative !important;
  background: #12161f !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.75) !important;
  overflow: hidden !important;
}

/* Soft vignette overlay to eliminate photo glare in dark mode */
html[data-theme="dark"] .team-photo-frame::after,
html.dark .team-photo-frame::after,
html[data-theme="dark"] #teams article .aspect-square::after,
html.dark #teams article .aspect-square::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, rgba(18, 22, 31, 0.12) 0%, rgba(18, 22, 31, 0.22) 100%) !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
}

html[data-theme="dark"] .team-card:hover .team-photo-frame::after,
html.dark .team-card:hover .team-photo-frame::after,
html[data-theme="dark"] #teams article.card-hover-lift:hover .aspect-square::after,
html.dark #teams article.card-hover-lift:hover .aspect-square::after {
  opacity: 0.4 !important;
}

/* Tone down over-bright team photos in dark mode */
html[data-theme="dark"] .team-photo-frame img,
html.dark .team-photo-frame img,
html[data-theme="dark"] #teams article .aspect-square img,
html.dark #teams article .aspect-square img,
html[data-theme="dark"] #teams article img,
html.dark #teams article img {
  filter: brightness(0.78) contrast(1.05) !important;
  transition: filter 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html[data-theme="dark"] .team-card:hover .team-photo-frame img,
html.dark .team-card:hover .team-photo-frame img,
html[data-theme="dark"] #teams article.card-hover-lift:hover img,
html.dark #teams article.card-hover-lift:hover img {
  filter: brightness(0.88) contrast(1.03) !important;
  transform: scale(1.04) !important;
}

/* Team Member Name - Crisp readable slate-white */
html[data-theme="dark"] .team-name,
html.dark .team-name,
html[data-theme="dark"] #teams article p.font-card.font-bold,
html.dark #teams article p.font-card.font-bold {
  color: #f1f5f9 !important;
  text-shadow: none !important;
}

/* Team Role Badge - Remove white border & white inset shadow */
html[data-theme="dark"] .team-role-badge,
html.dark .team-role-badge,
html[data-theme="dark"] #teams article p.font-card.font-medium,
html.dark #teams article p.font-card.font-medium {
  background: #12161f !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.28) !important;
  box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.65) !important;
  text-shadow: none !important;
}

html[data-theme="dark"] .team-card:hover .team-role-badge,
html.dark .team-card:hover .team-role-badge,
html[data-theme="dark"] #teams article.card-hover-lift:hover p.font-card.font-medium,
html.dark #teams article.card-hover-lift:hover p.font-card.font-medium {
  background: #12161f !important;
  color: #7dd3fc !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}

/* Footer & Contact Section Spacing - Compact & Balanced */
#contact-section {
  padding-top: 2rem !important;
  padding-bottom: 2.5rem !important;
  margin-top: 0.5rem !important;
}

@media (min-width: 768px) {
  #contact-section {
    padding-top: 2.5rem !important;
    padding-bottom: 3rem !important;
    margin-top: 1rem !important;
  }
}

.site-footer-grid {
  gap: 24px !important;
  margin-bottom: 1.5rem !important;
}

.footer-neu-card {
  padding: 24px 26px !important;
  min-height: auto !important;
}

.site-copyright {
  margin-top: 2rem !important;
  padding-top: 1.25rem !important;
  padding-bottom: 0.5rem !important;
}

/* Footer & Contact Section */
html[data-theme="dark"] #site-footer,
html[data-theme="dark"] #footer-contact,
html.dark #site-footer,
html.dark #footer-contact {
  background-color: #12161f !important;
}

html[data-theme="dark"] #site-footer h2,
html.dark #site-footer h2,
html[data-theme="dark"] #footer-contact h2,
html.dark #footer-contact h2 {
  color: #f1f5f9 !important;
  text-shadow: none !important;
}

html[data-theme="dark"] .footer-neu-card,
html.dark .footer-neu-card {
  background: #181b20 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 6px 6px 18px rgba(0, 0, 0, 0.65) !important;
}

html[data-theme="dark"] .footer-neu-card:hover,
html.dark .footer-neu-card:hover {
  border-color: rgba(56, 189, 248, 0.3) !important;
  box-shadow: 8px 8px 24px rgba(0, 0, 0, 0.8) !important;
}

html[data-theme="dark"] .footer-neu-card .brand-univ-name,
html.dark .footer-neu-card .brand-univ-name,
html[data-theme="dark"] .footer-neu-card .site-brand-title .brand-peer,
html.dark .footer-neu-card .site-brand-title .brand-peer,
html[data-theme="dark"] .footer-neu-card h2,
html.dark .footer-neu-card h2,
html[data-theme="dark"] .footer-neu-card h3,
html.dark .footer-neu-card h3,
html[data-theme="dark"] .footer-neu-card .footer-card-heading,
html.dark .footer-neu-card .footer-card-heading {
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .footer-neu-card .site-brand-title .brand-link,
html.dark .footer-neu-card .site-brand-title .brand-link,
html[data-theme="dark"] .footer-neu-card .brand-unit-tag,
html.dark .footer-neu-card .brand-unit-tag,
html[data-theme="dark"] .footer-neu-card a,
html.dark .footer-neu-card a,
html[data-theme="dark"] .footer-neu-card svg,
html.dark .footer-neu-card svg,
html[data-theme="dark"] .footer-social-icon,
html.dark .footer-social-icon {
  color: #38bdf8 !important;
}

html[data-theme="dark"] .footer-neu-card a:hover,
html.dark .footer-neu-card a:hover {
  color: #7dd3fc !important;
}

html[data-theme="dark"] .footer-neu-card p,
html.dark .footer-neu-card p,
html[data-theme="dark"] .footer-neu-card ul,
html.dark .footer-neu-card ul,
html[data-theme="dark"] .footer-neu-card ul li,
html.dark .footer-neu-card ul li,
html[data-theme="dark"] .footer-neu-card .footer-card-desc,
html.dark .footer-neu-card .footer-card-desc,
html[data-theme="dark"] .footer-neu-card .footer-contact-item,
html.dark .footer-neu-card .footer-contact-item,
html[data-theme="dark"] #footer-contact p,
html.dark #footer-contact p {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .site-copyright,
html.dark .site-copyright {
  color: #94a3b8 !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] #footer-contact .site-brand-title,
html.dark #footer-contact .site-brand-title,
html[data-theme="dark"] #footer-contact .site-brand-title .brand-peer,
html.dark #footer-contact .site-brand-title .brand-peer {
  color: #ffffff !important;
}

html[data-theme="dark"] #footer-contact a.btn-motion,
html.dark #footer-contact a.btn-motion {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  text-shadow: none !important;
}

html[data-theme="dark"] #footer-contact a.btn-motion:hover,
html.dark #footer-contact a.btn-motion:hover {
  background: #2563eb !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] #footer-contact a.btn-motion:active,
html.dark #footer-contact a.btn-motion:active {
  background: #1e3a8a !important;
  box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.7) !important;
}

html[data-theme="dark"] #nav-links,
html.dark #nav-links {
  background-color: rgba(18, 22, 31, 0.95) !important;
}

/* Mobile menu contrast */
#nav-links a.text-xl,
#nav-links a[href^="#"] {
  color: #f8fafc !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35) !important;
}

#nav-links .nav-btn-login {
  color: #f8fafc !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  box-shadow: none !important;
}

#nav-links .nav-btn-signup {
  color: #ffffff !important;
  background: #2563eb !important;
  border-color: rgba(147, 197, 253, 0.6) !important;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35) !important;
}

#nav-links #mobile-theme-toggle {
  color: #f8fafc !important;
  border-color: rgba(255, 255, 255, 0.8) !important;
}

#nav-links #close-menu {
  color: #f8fafc !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: none !important;
}

html[data-theme="light"] #nav-links,
html:not(.dark) #nav-links {
  background: rgba(245, 247, 251, 0.98) !important;
  color: #0f172a !important;
}

html[data-theme="light"] #nav-links a.text-xl,
html[data-theme="light"] #nav-links a[href^="#"],
html:not(.dark) #nav-links a.text-xl,
html:not(.dark) #nav-links a[href^="#"] {
  color: #0f172a !important;
  text-shadow: none !important;
}

html[data-theme="light"] #nav-links .nav-btn-login,
html:not(.dark) #nav-links .nav-btn-login {
  color: #0f172a !important;
  background: #ffffff !important;
  border-color: #94a3b8 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12) !important;
}

html[data-theme="light"] #nav-links .nav-btn-signup,
html:not(.dark) #nav-links .nav-btn-signup {
  color: #ffffff !important;
  background: #2563eb !important;
  border-color: #1d4ed8 !important;
}

html[data-theme="light"] #nav-links #mobile-theme-toggle,
html:not(.dark) #nav-links #mobile-theme-toggle {
  color: #0f172a !important;
  border-color: #334155 !important;
}

html[data-theme="light"] #nav-links #close-menu,
html:not(.dark) #nav-links #close-menu {
  color: #0f172a !important;
  background: #ffffff !important;
  border-color: #94a3b8 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14) !important;
}

/* Responsive landing layout: sections grow with content instead of using a fixed viewport size. */
html,
body {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: clip !important;
}

*,
*::before,
*::after {
  box-sizing: border-box !important;
}

.site-nav,
#hero,
#features,
#how,
#teams,
#footer-contact,
#contact-section,
#site-footer {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#hero > div.relative,
#features > div.mx-auto,
#how > div.relative.mx-auto,
#teams > div.mx-auto,
#contact-section > div,
#site-footer > div {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#hero img,
#features img,
#how img,
#teams img,
#footer-contact img,
#site-footer img {
  max-width: 100%;
}

#hero {
  min-height: clamp(540px, calc(100svh - 74px), 900px) !important;
  padding-top: clamp(7rem, 14vh, 11rem) !important;
  padding-bottom: clamp(3.5rem, 8vh, 7rem) !important;
}

#features,
#how,
#footer-contact {
  min-height: 0 !important;
  padding-top: clamp(4rem, 8vw, 8rem) !important;
  padding-bottom: clamp(4rem, 8vw, 8rem) !important;
}

#features .font-banner,
#how .font-banner {
  font-size: clamp(4rem, 10vw, 10rem) !important;
  line-height: 0.92 !important;
}

#features article.card-hover-lift {
  min-height: clamp(220px, 20vw, 300px) !important;
}

#how .how-step-card {
  min-height: clamp(240px, 22vw, 340px) !important;
}

#footer-contact {
  display: block !important;
}

@media (max-width: 1023px) {
  #hero {
    min-height: clamp(520px, calc(100svh - 70px), 780px) !important;
  }

  #features,
  #how,
  #footer-contact {
    padding-top: clamp(3.5rem, 9vw, 6rem) !important;
    padding-bottom: clamp(3.5rem, 9vw, 6rem) !important;
  }

  #features .font-banner,
  #how .font-banner {
    font-size: clamp(3.75rem, 15vw, 8rem) !important;
  }
}

/* Keep tablet and narrow desktop screens in one consistent responsive layout. */
@media (max-width: 1100px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .site-nav > div {
    width: 100% !important;
    max-width: none !important;
    padding-left: clamp(1rem, 4vw, 2.5rem) !important;
    padding-right: clamp(1rem, 4vw, 2.5rem) !important;
  }

  .site-nav #nav-pill-track {
    display: none !important;
  }

  .site-nav #menu-button {
    display: inline-flex !important;
  }

  #hero,
  #features,
  #how,
  #teams,
  #footer-contact,
  #contact-section,
  #site-footer {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  #hero > div.relative,
  #features > div.mx-auto,
  #how > div.relative.mx-auto,
  #teams > div.mx-auto {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  #features > div.mx-auto > div.grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #features > div.mx-auto > div.grid > div:last-child {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #how > div.relative.mx-auto > div.grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  #hero {
    min-height: 0 !important;
    padding-top: 7rem !important;
    padding-bottom: 4rem !important;
  }

  #features,
  #how,
  #footer-contact {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  #features .font-banner,
  #how .font-banner {
    font-size: clamp(3.25rem, 17vw, 6rem) !important;
  }

  #features article.card-hover-lift,
  #how .how-step-card {
    min-height: 0 !important;
  }

  #features > div.mx-auto > div.grid > div:last-child {
    grid-template-columns: 1fr !important;
  }
}

/* Final footer surface override */
#footer-contact,
#contact-section {
  position: relative !important;
  isolation: isolate !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #f8fafc !important;
  border: 0 !important;
  margin-top: 0 !important;
}

#footer-contact {
  z-index: 0 !important;
}

#footer-contact::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background-color: #0c0618 !important;
  background-image: url("/static/assets/hero-space-bg.png") !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  pointer-events: none !important;
}

#contact-section {
  z-index: 1 !important;
  background-color: #0c0618 !important;
  background-image: url("/static/assets/hero-space-bg.png") !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
}

#contact-section::before {
  display: none !important;
}

#footer-contact + #contact-section {
  border-top: 0 !important;
  margin-top: 0 !important;
}

#footer-contact > div,
.footer-neu-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html[data-theme] #contact-section .footer-neu-card,
html.dark #contact-section .footer-neu-card,
html[data-theme] #footer-contact > div {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#contact-section .site-footer-grid {
  gap: clamp(2rem, 5vw, 5rem) !important;
  max-width: 1200px !important;
}

#contact-section .footer-neu-card {
  padding: 0 !important;
  min-height: 0 !important;
}

#contact-section .site-footer-col-contact,
#contact-section .site-footer-col-links {
  border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
  padding-left: clamp(1.5rem, 4vw, 4rem) !important;
}

#footer-contact > div > img,
#footer-contact > div > div.bg-black\/60 {
  display: none !important;
}

#footer-contact h2,
#footer-contact p,
.footer-neu-card h3,
.footer-neu-card p,
.footer-neu-card ul,
.footer-neu-card li,
.brand-univ-name,
.site-copyright {
  color: #f8fafc !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5) !important;
}

.footer-neu-card .site-brand-title .brand-peer,
#footer-contact .site-brand-title .brand-peer {
  color: #ffffff !important;
}

.footer-neu-card .site-brand-title .brand-link,
.footer-neu-card .brand-unit-tag,
#footer-contact .site-brand-title .brand-link,
#footer-contact .site-brand-subtitle,
.footer-neu-card a,
.footer-neu-card svg {
  color: #7dd3fc !important;
}

.footer-neu-card a:hover {
  color: #bae6fd !important;
}

.site-copyright {
  border-top-color: rgba(255, 255, 255, 0.24) !important;
}

html[data-theme="light"] #footer-contact h2,
html:not(.dark) #footer-contact h2,
html[data-theme="light"] #footer-contact p,
html:not(.dark) #footer-contact p,
html[data-theme="light"] #contact-section .footer-neu-card h3,
html:not(.dark) #contact-section .footer-neu-card h3,
html[data-theme="light"] #contact-section .footer-neu-card p,
html:not(.dark) #contact-section .footer-neu-card p,
html[data-theme="light"] #contact-section .footer-neu-card ul,
html:not(.dark) #contact-section .footer-neu-card ul,
html[data-theme="light"] #contact-section .footer-neu-card li,
html:not(.dark) #contact-section .footer-neu-card li,
html[data-theme="light"] #contact-section .brand-univ-name,
html:not(.dark) #contact-section .brand-univ-name,
html[data-theme="light"] #contact-section .site-copyright,
html:not(.dark) #contact-section .site-copyright {
  color: #f8fafc !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="light"] #contact-section .site-brand-title .brand-peer,
html:not(.dark) #contact-section .site-brand-title .brand-peer,
html[data-theme="light"] #footer-contact .site-brand-title .brand-peer,
html:not(.dark) #footer-contact .site-brand-title .brand-peer {
  color: #ffffff !important;
}

html[data-theme="light"] #contact-section .site-brand-title .brand-link,
html:not(.dark) #contact-section .site-brand-title .brand-link,
html[data-theme="light"] #contact-section .brand-unit-tag,
html:not(.dark) #contact-section .brand-unit-tag,
html[data-theme="light"] #contact-section a,
html:not(.dark) #contact-section a,
html[data-theme="light"] #contact-section svg,
html:not(.dark) #contact-section svg {
  color: #7dd3fc !important;
}

/* Light mode footer matches the pale atmospheric Home background. */
html[data-theme="light"] #footer-contact::before,
html:not(.dark) #footer-contact::before {
  background-color: #f5f5f7 !important;
  background-image:
    radial-gradient(ellipse 70% 55% at 30% 25%, rgba(186, 230, 253, 0.75), transparent 62%),
    radial-gradient(ellipse 65% 50% at 72% 38%, rgba(125, 211, 252, 0.55), transparent 60%),
    radial-gradient(circle at 50% 75%, rgba(224, 242, 254, 0.85), transparent 55%) !important;
  background-size: cover !important;
  background-position: center top !important;
}

html[data-theme="light"] #contact-section,
html:not(.dark) #contact-section {
  background-color: #f5f5f7 !important;
  background-image:
    radial-gradient(ellipse 70% 55% at 30% 25%, rgba(186, 230, 253, 0.75), transparent 62%),
    radial-gradient(ellipse 65% 50% at 72% 38%, rgba(125, 211, 252, 0.55), transparent 60%),
    radial-gradient(circle at 50% 75%, rgba(224, 242, 254, 0.85), transparent 55%) !important;
  background-size: cover !important;
  background-position: center top !important;
}

html[data-theme="light"] #footer-contact h2,
html:not(.dark) #footer-contact h2,
html[data-theme="light"] #footer-contact p,
html:not(.dark) #footer-contact p,
html[data-theme="light"] #contact-section .footer-neu-card h3,
html:not(.dark) #contact-section .footer-neu-card h3,
html[data-theme="light"] #contact-section .footer-neu-card p,
html:not(.dark) #contact-section .footer-neu-card p,
html[data-theme="light"] #contact-section .footer-neu-card ul,
html:not(.dark) #contact-section .footer-neu-card ul,
html[data-theme="light"] #contact-section .footer-neu-card li,
html:not(.dark) #contact-section .footer-neu-card li,
html[data-theme="light"] #contact-section .brand-univ-name,
html:not(.dark) #contact-section .brand-univ-name,
html[data-theme="light"] #contact-section .site-copyright,
html:not(.dark) #contact-section .site-copyright {
  color: #0f172a !important;
  text-shadow: none !important;
}

html[data-theme="light"] #contact-section .site-brand-title .brand-peer,
html:not(.dark) #contact-section .site-brand-title .brand-peer,
html[data-theme="light"] #footer-contact .site-brand-title .brand-peer,
html:not(.dark) #footer-contact .site-brand-title .brand-peer {
  color: #0f172a !important;
}

html[data-theme="light"] #contact-section .site-brand-title .brand-link,
html:not(.dark) #contact-section .site-brand-title .brand-link,
html[data-theme="light"] #contact-section .brand-unit-tag,
html:not(.dark) #contact-section .brand-unit-tag,
html[data-theme="light"] #contact-section a,
html:not(.dark) #contact-section a,
html[data-theme="light"] #contact-section svg,
html:not(.dark) #contact-section svg {
  color: #0284c7 !important;
}

html[data-theme="light"] #contact-section .site-copyright,
html:not(.dark) #contact-section .site-copyright {
  border-top-color: rgba(100, 116, 139, 0.35) !important;
}

/* Dark footer matches Home and scales with the available viewport. */
html[data-theme="dark"] #footer-contact::before,
html.dark #footer-contact::before {
  background-color: #0c0618 !important;
  background-image: url("/static/assets/hero-space-bg.png") !important;
  background-size: cover !important;
  background-position: center top !important;
}

html[data-theme="dark"] #footer-contact,
html.dark #footer-contact {
  display: grid !important;
  place-items: center !important;
  min-height: clamp(480px, 70svh, 760px) !important;
  padding-top: clamp(4rem, 8vw, 7rem) !important;
  padding-bottom: clamp(4rem, 8vw, 7rem) !important;
}

html[data-theme="dark"] #contact-section,
html.dark #contact-section {
  min-height: 0 !important;
  padding-top: clamp(3rem, 6vw, 6rem) !important;
  padding-bottom: clamp(3rem, 6vw, 6rem) !important;
}

html[data-theme="dark"] #footer-contact > div,
html.dark #footer-contact > div {
  width: min(100%, 64rem) !important;
  max-width: 64rem !important;
}

@media (max-width: 640px) {
  html[data-theme="dark"] #footer-contact,
  html.dark #footer-contact {
    min-height: 0 !important;
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }

  html[data-theme="dark"] #contact-section,
  html.dark #contact-section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

@media (max-width: 768px) {
  #contact-section .site-footer-col-contact,
  #contact-section .site-footer-col-links {
    border-left: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding-left: 0 !important;
    padding-top: 1.5rem !important;
  }
}

/* Keep both footer sections on the same background coordinate and motion cycle. */
#footer-contact,
#contact-section {
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center top !important;
}

#footer-contact::before,
#contact-section::after {
  animation: hero-glow-drift 10s ease-in-out infinite !important;
}

/* Dark mode footer only: use the same flat surface as How It Works. */
html[data-theme="dark"] #contact-section,
html.dark #contact-section {
  background-color: var(--neu-base) !important;
  background-image: none !important;
  background-attachment: initial !important;
}

html[data-theme="dark"] #contact-section::after,
html.dark #contact-section::after {
  display: none !important;
  animation: none !important;
}

/* Top navigation contrast in both initial and scrolled states */
html[data-theme="light"] .site-nav .site-brand-title .brand-peer,
html:not(.dark) .site-nav .site-brand-title .brand-peer {
  color: #0f172a !important;
}

html[data-theme="light"] .site-nav .site-brand-title .brand-link,
html:not(.dark) .site-nav .site-brand-title .brand-link,
html[data-theme="light"] .site-nav .site-brand-subtitle,
html:not(.dark) .site-nav .site-brand-subtitle {
  color: #0284c7 !important;
}

html[data-theme="light"] .site-nav .nav-link-pill,
html:not(.dark) .site-nav .nav-link-pill {
  color: #475569 !important;
}

html[data-theme="light"] .site-nav .nav-link-pill:hover,
html:not(.dark) .site-nav .nav-link-pill:hover {
  color: #0f172a !important;
}

html[data-theme="light"] .site-nav .nav-link-pill.is-active,
html:not(.dark) .site-nav .nav-link-pill.is-active {
  color: #0284c7 !important;
}

html[data-theme="light"] .site-nav .landing-theme-toggle-btn,
html:not(.dark) .site-nav .landing-theme-toggle-btn,
html[data-theme="light"] .site-nav .nav-btn-login,
html:not(.dark) .site-nav .nav-btn-login {
  background: var(--neu-base, #ebf0f7) !important;
  color: #0f172a !important;
  border: var(--neu-rim) !important;
  box-shadow: var(--neu-flat-xs) !important;
}

html[data-theme="light"] .site-nav .landing-theme-toggle-btn:hover,
html:not(.dark) .site-nav .landing-theme-toggle-btn:hover,
html[data-theme="light"] .site-nav .nav-btn-login:hover,
html:not(.dark) .site-nav .nav-btn-login:hover {
  background: var(--neu-base, #ebf0f7) !important;
  color: #0284c7 !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
  box-shadow: var(--neu-flat-sm) !important;
}

html[data-theme="dark"] .site-nav .site-brand-title .brand-peer,
html.dark .site-nav .site-brand-title .brand-peer {
  color: #f8fafc !important;
}

html[data-theme="dark"] .site-nav .site-brand-title .brand-link,
html.dark .site-nav .site-brand-title .brand-link,
html[data-theme="dark"] .site-nav .site-brand-subtitle,
html.dark .site-nav .site-brand-subtitle {
  color: #38bdf8 !important;
}

html[data-theme="dark"] .site-nav .nav-link-pill,
html.dark .site-nav .nav-link-pill {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .site-nav .nav-link-pill:hover,
html.dark .site-nav .nav-link-pill:hover {
  color: #f8fafc !important;
}

html[data-theme="dark"] .site-nav .nav-link-pill.is-active,
html.dark .site-nav .nav-link-pill.is-active {
  color: #38bdf8 !important;
}

html[data-theme="dark"] .site-nav .landing-theme-toggle-btn,
html.dark .site-nav .landing-theme-toggle-btn,
html[data-theme="dark"] .site-nav .nav-btn-login,
html.dark .site-nav .nav-btn-login {
  background: #181b20 !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6) !important;
}

html[data-theme="dark"] .site-nav .landing-theme-toggle-btn:hover,
html.dark .site-nav .landing-theme-toggle-btn:hover,
html[data-theme="dark"] .site-nav .nav-btn-login:hover,
html.dark .site-nav .nav-btn-login:hover {
  color: #38bdf8 !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
}

html[data-theme="light"] #footer-contact h2,
html:not(.dark) #footer-contact h2 {
  color: #0f172a !important;
  text-shadow: none !important;
}

html[data-theme="dark"] #footer-contact h2,
html.dark #footer-contact h2 {
  color: #f8fafc !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42) !important;
}

html[data-theme="light"] #footer-contact > div h2,
html:not(.dark) #footer-contact > div h2 {
  color: #0f172a !important;
}

html[data-theme="dark"] #footer-contact > div h2,
html.dark #footer-contact > div h2 {
  color: #ffffff !important;
}

#footer-contact .footer-cta-accent {
  color: #0284c7 !important;
}

html[data-theme="dark"] #footer-contact .footer-cta-accent,
html.dark #footer-contact .footer-cta-accent {
  color: #38bdf8 !important;
  text-shadow: 0 0 18px rgba(56, 189, 248, 0.22) !important;
}


/* Teams section design pass */
#teams {
  padding-top: clamp(4rem, 8vw, 7rem) !important;
  padding-bottom: clamp(5rem, 9vw, 8rem) !important;
  background-color: var(--neu-base, #ebf0f7) !important;
}

html[data-theme="dark"] #teams,
html.dark #teams {
  background-color: #10151f !important;
}

#teams > div.mx-auto {
  max-width: 92rem !important;
}

#teams > div.mx-auto > div:first-child {
  align-items: center !important;
  gap: clamp(1rem, 2vw, 1.5rem) !important;
  margin-bottom: clamp(2rem, 5vw, 4rem) !important;
}

#teams > div.mx-auto > div:first-child > span {
  width: clamp(0.45rem, 1vw, 0.75rem) !important;
  min-height: clamp(4rem, 9vw, 8rem) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 22px rgba(14, 165, 233, 0.35) !important;
}

#teams > div.mx-auto > div:first-child > p {
  margin: 0 !important;
  font-size: clamp(4rem, 10vw, 10rem) !important;
  line-height: 0.82 !important;
  letter-spacing: 0.02em !important;
  color: #0f172a !important;
  text-shadow: 2px 2px 4px #ffffff, -1px -1px 2px rgba(166, 180, 200, 0.6) !important;
}

html[data-theme="dark"] #teams > div.mx-auto > div:first-child > p,
html.dark #teams > div.mx-auto > div:first-child > p {
  color: #f8fafc !important;
  text-shadow: 0 12px 26px rgba(0, 0, 0, 0.35) !important;
}

#teams > div.mx-auto > div:nth-child(2) > div {
  gap: clamp(1rem, 2.2vw, 2rem) !important;
}

/* Teams section Neumorphic design */
#teams .team-card,
#teams article.card-hover-lift {
  width: 100% !important;
  max-width: 280px !important;
  background: var(--neu-base) !important;
  border: var(--neu-rim) !important;
  box-shadow: var(--neu-flat) !important;
  border-radius: 26px !important;
  padding: 18px 18px 22px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#teams .team-card:hover,
#teams article.card-hover-lift:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--neu-flat-hover), 0 0 20px rgba(14, 165, 233, 0.14) !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
}

/* Molded Portrait Frame */
#teams .team-photo-frame,
#teams article .aspect-square {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: #f0f1f3 !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: inset 2px 2px 5px rgba(100, 116, 139, 0.15), inset -2px -2px 5px rgba(255, 255, 255, 0.7) !important;
  margin-bottom: 0 !important;
}

#teams .team-photo-frame img,
#teams article .aspect-square img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 20px !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#teams .team-card:hover .team-photo-frame img,
#teams article.card-hover-lift:hover img {
  transform: scale(1.05) !important;
}

/* Team Info Container */
#teams .team-info,
#teams article .px-5.py-4 {
  width: 100% !important;
  background: transparent !important;
  padding: 16px 4px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex: 1 !important;
}

/* Member Name */
#teams .team-name,
#teams article p.font-card.font-bold {
  font-family: var(--font-sans, 'Plus Jakarta Sans', system-ui, sans-serif) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  letter-spacing: -0.015em !important;
  text-align: center !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.3 !important;
  margin: 0 0 10px !important;
}

/* Neumorphic Role Badge */
#teams .team-role-badge,
#teams article p.font-card.font-medium {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: #0284c7 !important;
  background: var(--neu-base) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: 2px 2px 5px rgba(166, 180, 200, 0.4), -2px -2px 5px #ffffff !important;
  transition: all 0.25s ease !important;
}

#teams .team-card:hover .team-role-badge,
#teams article.card-hover-lift:hover .team-role-badge {
  box-shadow: 3px 3px 7px rgba(166, 180, 200, 0.5), -3px -3px 7px #ffffff !important;
  color: #0369a1 !important;
}

/* Dark Mode Teams Styling */
html[data-theme="dark"] #teams .team-card,
html.dark #teams .team-card,
html[data-theme="dark"] #teams article.card-hover-lift,
html.dark #teams article.card-hover-lift {
  background: #181b20 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.65) !important;
  padding: 18px 18px 22px !important;
  border-radius: 26px !important;
}

html[data-theme="dark"] #teams .team-card:hover,
html.dark #teams .team-card:hover,
html[data-theme="dark"] #teams article.card-hover-lift:hover,
html.dark #teams article.card-hover-lift:hover {
  box-shadow: 8px 8px 24px rgba(0, 0, 0, 0.8), 0 0 20px rgba(14, 165, 233, 0.18) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
}

html[data-theme="dark"] #teams .team-photo-frame,
html.dark #teams .team-photo-frame,
html[data-theme="dark"] #teams article .aspect-square,
html.dark #teams article .aspect-square {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 20px !important;
  background: #12161f !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.75) !important;
  overflow: hidden !important;
}

html[data-theme="dark"] #teams .team-photo-frame img,
html.dark #teams .team-photo-frame img,
html[data-theme="dark"] #teams article .aspect-square img,
html.dark #teams article .aspect-square img {
  border-radius: 20px !important;
  filter: brightness(0.85) contrast(1.05) !important;
}

html[data-theme="dark"] #teams .team-card:hover .team-photo-frame img,
html.dark #teams .team-card:hover .team-photo-frame img {
  filter: brightness(0.95) contrast(1.05) !important;
  transform: scale(1.05) !important;
}

html[data-theme="dark"] #teams .team-name,
html.dark #teams .team-name,
html[data-theme="dark"] #teams article p.font-card.font-bold,
html.dark #teams article p.font-card.font-bold {
  color: #f1f5f9 !important;
}

html[data-theme="dark"] #teams .team-role-badge,
html.dark #teams .team-role-badge,
html[data-theme="dark"] #teams article p.font-card.font-medium,
html.dark #teams article p.font-card.font-medium {
  background: #12161f !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.28) !important;
  box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.65) !important;
}

html[data-theme="dark"] #teams .team-card:hover .team-role-badge,
html.dark #teams .team-card:hover .team-role-badge {
  background: #12161f !important;
  color: #7dd3fc !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}

/* Features section neumorphic styling */
#features {
  background-color: var(--neu-base, #ebf0f7) !important;
}

html[data-theme="dark"] #features,
html.dark #features {
  background-color: #12161f !important;
}

#features span[aria-hidden="true"] {
  background: linear-gradient(180deg, #0ea5e9, #0284c7) !important;
  box-shadow: var(--neu-flat-xs) !important;
  border-radius: 8px !important;
}

#features .font-banner {
  color: #0f172a !important;
  opacity: 0.9 !important;
  text-shadow: 2px 2px 4px #ffffff, -1px -1px 2px rgba(166, 180, 200, 0.6) !important;
}

html[data-theme="dark"] #features .font-banner,
html.dark #features .font-banner {
  color: #f8fafc !important;
  text-shadow: none !important;
}

#features .font-display {
  color: #0f172a !important;
}

html[data-theme="dark"] #features .font-display,
html.dark #features .font-display {
  color: #f8fafc !important;
}

#features .text-slate-300 {
  color: #475569 !important;
}

html[data-theme="dark"] #features .text-slate-300,
html.dark #features .text-slate-300 {
  color: #94a3b8 !important;
}

#features article.card-hover-lift,
article.card-hover-lift {
  background: var(--neu-card-bg, #ffffff) !important;
  border: var(--neu-rim) !important;
  border-radius: 24px !important;
  box-shadow: var(--neu-flat) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease !important;
}

#features article.card-hover-lift:hover,
article.card-hover-lift:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--neu-flat-hover), 0 0 16px rgba(14, 165, 233, 0.15) !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
}

html[data-theme="dark"] #features article.card-hover-lift,
html.dark #features article.card-hover-lift,
html[data-theme="dark"] article.card-hover-lift,
html.dark article.card-hover-lift {
  background: #181b20 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 8px 8px 22px rgba(0, 0, 0, 0.7) !important;
}

html[data-theme="dark"] #features article.card-hover-lift:hover,
html.dark #features article.card-hover-lift:hover,
html[data-theme="dark"] article.card-hover-lift:hover,
html.dark article.card-hover-lift:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  box-shadow: 12px 12px 28px rgba(0, 0, 0, 0.8), 0 0 16px rgba(56, 189, 248, 0.18) !important;
}

#features article.card-hover-lift .feature-card-icon,
#features .feature-card-icon,
article.card-hover-lift .feature-card-icon,
.feature-card-icon {
  background: #f8fafc !important;
  box-shadow: inset 1px 1px 3px rgba(166, 180, 200, 0.35), inset -1px -1px 3px #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0284c7 !important;
  border-radius: 16px !important;
}

html[data-theme="dark"] #features article.card-hover-lift .feature-card-icon,
html.dark #features article.card-hover-lift .feature-card-icon,
html[data-theme="dark"] #features .feature-card-icon,
html.dark #features .feature-card-icon,
html[data-theme="dark"] article.card-hover-lift .feature-card-icon,
html.dark article.card-hover-lift .feature-card-icon,
html[data-theme="dark"] .feature-card-icon,
html.dark .feature-card-icon {
  background: #12161f !important;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #38bdf8 !important;
  border-radius: 16px !important;
}

#features article.card-hover-lift h3,
article.card-hover-lift h3 {
  color: #0f172a !important;
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}

html[data-theme="dark"] #features article.card-hover-lift h3,
html.dark #features article.card-hover-lift h3,
html[data-theme="dark"] article.card-hover-lift h3,
html.dark article.card-hover-lift h3 {
  color: #f1f5f9 !important;
  text-shadow: none !important;
}

#features article.card-hover-lift p,
article.card-hover-lift p {
  color: #475569 !important;
}

html[data-theme="dark"] #features article.card-hover-lift p,
html.dark #features article.card-hover-lift p,
html[data-theme="dark"] article.card-hover-lift p,
html.dark article.card-hover-lift p {
  color: #94a3b8 !important;
}

/* How It Works design pass */
#how {
  padding-top: clamp(4rem, 8vw, 7rem) !important;
  padding-bottom: clamp(5rem, 9vw, 8rem) !important;
  background: #10151f !important;
}

#how > div.relative.mx-auto {
  max-width: 92rem !important;
}

#how > div.relative.mx-auto > p.font-banner {
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem) !important;
  font-size: clamp(4rem, 10vw, 10rem) !important;
  line-height: 0.82 !important;
  letter-spacing: 0.02em !important;
  color: #f8fafc !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 12px 26px rgba(0, 0, 0, 0.35) !important;
}

#how > div.relative.mx-auto > div.grid {
  position: relative !important;
  gap: clamp(1rem, 2.2vw, 2rem) !important;
}

#how > div.relative.mx-auto > div.grid::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 12%;
  right: 12%;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.7), transparent);
  pointer-events: none;
}

#how .how-step-card {
  z-index: 1 !important;
  min-height: clamp(230px, 20vw, 300px) !important;
  padding: clamp(1.5rem, 2.5vw, 2.25rem) !important;
  border-radius: 24px !important;
  background: #181b20 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 8px 8px 22px rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease !important;
}

#how .how-step-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
  box-shadow: 12px 12px 28px rgba(0, 0, 0, 0.8), 0 0 20px rgba(56, 189, 248, 0.15) !important;
}

#how .how-step-header {
  margin-bottom: 1.5rem !important;
  align-items: flex-start !important;
}

#how .how-step-num {
  font-size: clamp(2.75rem, 4vw, 4rem) !important;
  color: #38bdf8 !important;
  text-shadow: 0 0 18px rgba(56, 189, 248, 0.18) !important;
}

#how .how-step-badge {
  padding: 0.45rem 0.85rem !important;
  background: rgba(14, 165, 233, 0.08) !important;
  border: 1px solid rgba(56, 189, 248, 0.42) !important;
  box-shadow: none !important;
  color: #bae6fd !important;
  font-size: 0.78rem !important;
}

#how .how-step-desc {
  color: #a9bad0 !important;
  font-size: clamp(0.9rem, 1.15vw, 1rem) !important;
  line-height: 1.65 !important;
}

@media (max-width: 640px) {
  #how > div.relative.mx-auto > p.font-banner {
    font-size: clamp(3.5rem, 17vw, 6rem) !important;
  }

  #how > div.relative.mx-auto > div.grid::before {
    display: none !important;
  }

  #how .how-step-card {
    min-height: 0 !important;
    padding: 1.5rem !important;
  }
}

html[data-theme="light"] #how,
html:not(.dark) #how {
  background: #eef2f7 !important;
}

html[data-theme="light"] #how .how-step-card,
html:not(.dark) #how .how-step-card {
  background: var(--neu-card-bg, #ffffff) !important;
  border: var(--neu-rim) !important;
  border-radius: 24px !important;
  box-shadow: var(--neu-flat) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-theme="light"] #how .how-step-card:hover,
html:not(.dark) #how .how-step-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--neu-flat-hover), 0 0 20px rgba(14, 165, 233, 0.12) !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
}

html[data-theme="light"] #how > div.relative.mx-auto > p.font-banner,
html:not(.dark) #how > div.relative.mx-auto > p.font-banner {
  color: #0f172a !important;
}

html[data-theme="light"] #how .how-step-desc,
html:not(.dark) #how .how-step-desc {
  color: #475569 !important;
}

html[data-theme="light"] #how .how-step-num,
html:not(.dark) #how .how-step-num {
  color: #0284c7 !important;
  text-shadow: 0 0 18px rgba(2, 132, 199, 0.16) !important;
}

html[data-theme="light"] #how .how-step-badge,
html:not(.dark) #how .how-step-badge {
  background: #e0f2fe !important;
  border-color: #38bdf8 !important;
  color: #075985 !important;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.12) !important;
}

html[data-theme="light"] #how .how-step-card:hover .how-step-badge,
html:not(.dark) #how .how-step-card:hover .how-step-badge {
  background: #bae6fd !important;
  color: #0c4a6e !important;
}