/* ═══════════════════════════════════════════════════════════════════════════
   NORTHSTAY MASTER MINIMALIST DESIGN SYSTEM
   Modern Scandinavian / Silicon Valley Minimalist UI (Linear / Vercel / Apple Style)
   Typography: Plus Jakarta Sans / Outfit (Headings) + Inter (Body)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. MINIMALIST TOKENS — DARK (DEFAULT) ─── */
:root {
  --bg:               #09090b;
  --bg-secondary:     #121215;
  --bg-tertiary:      #18181c;
  --card:             #121216;
  --card-elevated:    #18181e;
  
  --border:           rgba(255, 255, 255, 0.08);
  --border-subtle:    rgba(255, 255, 255, 0.05);
  --border-hover:     rgba(255, 255, 255, 0.20);
  --border-focus:     #EA2129;
  
  --ink:              #f4f4f5;
  --ink-muted:        #a1a1aa;
  --ink-faint:        #71717a;
  
  --accent:           #EA2129;
  --accent-hover:     #ff333d;
  --accent-light:     rgba(234, 33, 41, 0.12);
  --accent-gold:      #eab308;

  --primary:          #ffffff;
  --primary-hover:    #f4f4f5;
  --primary-light:    rgba(255, 255, 255, 0.08);
  
  --secondary:        #18181c;
  --dark:             #09090b;
  --light:            #121216;
  
  --text-main:        #a1a1aa;
  --text-light:       #f4f4f5;
  --text-muted:       #71717a;
  
  --glass-bg:         rgba(9, 9, 11, 0.75);
  --glass-border:     rgba(255, 255, 255, 0.10);
  --glass-shadow:     0 16px 40px -10px rgba(0, 0, 0, 0.6);
  
  --font-heading:     'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body:        'Inter', system-ui, -apple-system, sans-serif;
  --font-display:     'Outfit', system-ui, -apple-system, sans-serif;
  
  --radius-xs:        6px;
  --radius-sm:        10px;
  --radius-md:        16px;
  --radius-lg:        22px;
  --radius-pill:      999px;
  
  --transition-fast:   all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  
  --card-shadow:      0 8px 30px rgba(0, 0, 0, 0.35);
  --shadow-premium:   0 16px 48px -12px rgba(0, 0, 0, 0.6);
  --glow-shadow:      0 0 24px rgba(255, 84, 32, 0.35);
  --header-blur:      blur(20px) saturate(1.8);
}

/* ─── 2. MINIMALIST TOKENS — LIGHT MODE ─── */
[data-theme="light"] {
  --bg:               #fafafa;
  --bg-secondary:     #f4f4f5;
  --bg-tertiary:      #e4e4e7;
  --card:             #ffffff;
  --card-elevated:    #ffffff;
  
  --border:           rgba(0, 0, 0, 0.08);
  --border-subtle:    rgba(0, 0, 0, 0.04);
  --border-hover:     rgba(0, 0, 0, 0.18);
  --border-focus:     #ff5420;
  
  --ink:              #09090b;
  --ink-muted:        #52525b;
  --ink-faint:        #71717a;
  
  --accent:           #ff5420;
  --accent-hover:     #e04412;
  --accent-light:     rgba(255, 84, 32, 0.08);
  --accent-gold:      #eab308;

  --primary:          #09090b;
  --primary-hover:    #27272a;
  --primary-light:    rgba(0, 0, 0, 0.06);
  
  --secondary:        #f4f4f5;
  --dark:             #ffffff;
  --light:            #f4f4f5;
  
  --text-main:        #52525b;
  --text-light:       #09090b;
  --text-muted:       #71717a;
  
  --glass-bg:         rgba(255, 255, 255, 0.85);
  --glass-border:     rgba(0, 0, 0, 0.08);
  --glass-shadow:     0 12px 32px -8px rgba(0, 0, 0, 0.06);
  
  --card-shadow:      0 4px 20px rgba(0, 0, 0, 0.04);
  --shadow-premium:   0 16px 40px -10px rgba(0, 0, 0, 0.08);
  --glow-shadow:      0 0 20px rgba(255, 84, 32, 0.18);
}

/* ─── 3. BASE RESETS & MODERN CANVAS ─── */
body {
  background-color: var(--bg) !important;
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  line-height: 1.6 !important;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before { display: none !important; }
.hero-grid-pattern { display: none !important; }
.section-bg-pattern { display: none !important; }
.hero::after { display: none !important; }

/* ─── 4. MODERN MINIMALIST TYPOGRAPHY ─── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
  color: var(--ink) !important;
}

.hero-main-title {
  font-size: clamp(2.8rem, 6.2vw, 4.8rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.08 !important;
  color: #ffffff !important;
  margin-bottom: 20px !important;
  text-shadow: none !important;
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.85)) !important;
}

.hero-text-orange {
  position: relative !important;
  display: inline-block !important;
  color: #ff5420 !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #ff5420 !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease !important;
  padding-bottom: 4px !important;
}

/* Elegant Animated Underline Indicator */
.hero-text-orange::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 3px !important;
  background: linear-gradient(90deg, #ff7a52, #ff5420) !important;
  border-radius: 999px !important;
  transform: scaleX(0) !important;
  transform-origin: right !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
  opacity: 0 !important;
  box-shadow: 0 0 14px rgba(255, 84, 32, 0.7) !important;
}

.hero-text-orange:hover::after {
  transform: scaleX(1) !important;
  transform-origin: left !important;
  opacity: 1 !important;
}

.hero-text-orange:hover {
  color: #ff6633 !important;
  -webkit-text-fill-color: #ff6633 !important;
  transform: translateY(-3px) !important;
}

.hero-text-orange:active {
  transform: translateY(0px) scale(0.98) !important;
}

.hero-subtext {
  color: var(--ink-muted) !important;
  font-size: clamp(1.05rem, 2vw, 1.22rem) !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  max-width: 600px !important;
  margin: 0 auto 32px auto !important;
}

.hero-subtext strong {
  color: var(--ink) !important;
  font-weight: 600 !important;
}

.section-header {
  text-align: center !important;
  max-width: 680px !important;
  margin: 0 auto 48px auto !important;
}

.section-header h2 {
  font-size: clamp(2rem, 3.8vw, 2.75rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.035em !important;
  color: var(--ink) !important;
  margin-bottom: 12px !important;
}

.section-header p {
  color: var(--ink-muted) !important;
  font-size: 1.02rem !important;
  line-height: 1.6 !important;
}

.section-eyebrow {
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  background: rgba(255, 84, 32, 0.08) !important;
  border: 1px solid rgba(255, 84, 32, 0.2) !important;
  border-radius: var(--radius-pill) !important;
  padding: 5px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-bottom: 14px !important;
}

[data-theme="light"] .section-eyebrow {
  background: rgba(255, 84, 32, 0.06) !important;
  border-color: rgba(255, 84, 32, 0.16) !important;
}

/* ─── 4.5. MODERN PILL THEME TOGGLE SWITCH ─── */
.btn-theme-toggle {
  width: 54px !important;
  height: 28px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: rgba(18, 18, 24, 0.85) !important;
  padding: 2px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.btn-theme-toggle:hover {
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 14px rgba(234, 33, 41, 0.3) !important;
}

.btn-theme-toggle:active {
  transform: scale(0.96) !important;
}

/* Sliding Knob (The Icon Element) */
.btn-theme-toggle i {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #475569, #1e293b) !important;
  color: #f8fafc !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.72rem !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease !important;
  transform: translateX(0) rotate(0deg) !important;
}

:root[data-theme="dark"] .btn-theme-toggle i,
:root:not([data-theme]) .btn-theme-toggle i {
  transform: translateX(0) rotate(0deg) !important;
  background: linear-gradient(135deg, #475569, #1e293b) !important;
  color: #f8fafc !important;
}

/* Owner Portal Gold Pill */
.btn-gold-animated,
.btn-owner-portal {
  position: relative !important;
  background: #ffffff !important;
  color: #09090b !important;
  font-weight: 600 !important;
  font-size: 0.86rem !important;
  padding: 8px 18px !important;
  border-radius: var(--radius-pill) !important;
  border: 1px solid transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, background 0.3s ease !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

[data-theme="light"] .btn-gold-animated,
[data-theme="light"] .btn-owner-portal {
  background: #09090b !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1) !important;
}

.btn-gold-animated:hover,
.btn-owner-portal:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="light"] .btn-gold-animated:hover,
[data-theme="light"] .btn-owner-portal:hover {
  background: #18181b !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

.btn-gold-animated:active,
.btn-owner-portal:active {
  transform: translateY(0px) scale(0.98) !important;
}

.btn-gold-animated i,
.btn-owner-portal i {
  color: #eab308 !important;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.btn-gold-animated:hover i,
.btn-owner-portal:hover i {
  transform: rotate(-12deg) scale(1.22) !important;
}

.btn-download {
  border: 1px solid var(--border) !important;
  color: var(--ink) !important;
  background: var(--bg-secondary) !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  padding: 8px 18px !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, border-color 0.3s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.btn-download:hover {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-hover) !important;
  color: var(--ink) !important;
  transform: translateY(-2px) !important;
}

.btn-download:active {
  transform: translateY(0px) scale(0.98) !important;
}

/* ─── 5. HERO SECTION REFINEMENT (VIBRANT & ATTRACTIVE MINIMALIST HERO) ─── */
.hero.hero--cinematic {
  position: relative !important;
  min-height: 88vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 150px 20px 90px 20px !important;
  overflow: hidden !important;
  background-color: var(--bg) !important;
}

.hero-layers {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

.hero-layer--gradient {
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 50% 30%, rgba(255, 84, 32, 0.12) 0%, transparent 60%) !important;
  z-index: 2 !important;
}

.hero-layer--building {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0.75 !important;
  mix-blend-mode: normal !important;
  filter: contrast(1.06) saturate(1.18) brightness(1.02) !important;
  transition: opacity 0.5s ease !important;
  z-index: 1 !important;
}

.hero-building-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 38% !important;
  transform: scale(1.02) !important;
}

.hero-smoke-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0.08 !important;
  z-index: 3 !important;
}

.hero-layer--vignette {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(9, 9, 11, 0.72) 0%, rgba(9, 9, 11, 0.25) 35%, rgba(9, 9, 11, 0.35) 65%, var(--bg) 100%) !important;
  z-index: 4 !important;
}

/* Crisp Text Contrast Over Clear Image */
.hero-subtext {
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.85)) !important;
}



.hero-cinematic-content {
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  text-align: center !important;
}

.hero-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

/* Hero Action Buttons */
.btn-hero-orange {
  position: relative !important;
  background: linear-gradient(135deg, #ff6433 0%, #ff5420 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: var(--radius-pill) !important;
  padding: 14px 30px !important;
  font-size: 0.96rem !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 18px rgba(255, 84, 32, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, background 0.3s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

/* Subtle Minimalist Light Sweep Shimmer */
.btn-hero-orange::after,
.btn-primary::after,
.btn-cta-white::after,
.btn-gold-animated::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent) !important;
  transform: skewX(-20deg) !important;
  transition: none !important;
  pointer-events: none !important;
}

.btn-hero-orange:hover::after,
.btn-primary:hover::after,
.btn-cta-white:hover::after,
.btn-gold-animated:hover::after {
  left: 180% !important;
  transition: left 0.75s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-hero-orange:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 10px 30px -4px rgba(255, 84, 32, 0.6), 0 0 20px rgba(255, 84, 32, 0.25) !important;
}

.btn-hero-orange:active {
  transform: translateY(0px) scale(0.98) !important;
  box-shadow: 0 4px 12px rgba(255, 84, 32, 0.35) !important;
}

.btn-hero-orange i {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-hero-orange:hover i {
  transform: translateX(5px) !important;
}

.btn-hero-outline {
  position: relative !important;
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  border-radius: var(--radius-pill) !important;
  padding: 14px 28px !important;
  font-size: 0.96rem !important;
  font-weight: 600 !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  overflow: hidden !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

[data-theme="light"] .btn-hero-outline {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #09090b !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.btn-hero-outline:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-3px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="light"] .btn-hero-outline:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(0, 0, 0, 0.22) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

.btn-hero-outline:active {
  transform: translateY(0px) scale(0.98) !important;
}

.btn-hero-outline i {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease !important;
}

.btn-hero-outline:hover i {
  transform: translateY(-1px) scale(1.12) !important;
  color: var(--accent) !important;
}

/* Scroll indicator */
.hero-scroll-indicator {
  position: absolute !important;
  bottom: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--ink-faint) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  z-index: 2 !important;
}

.hero-scroll-line {
  width: 1px !important;
  height: 24px !important;
  background: linear-gradient(180deg, var(--accent), transparent) !important;
  animation: scrollPulse 2s infinite ease-in-out !important;
}

@keyframes scrollPulse {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  50.1% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ─── 6. HOW IT WORKS (4 STEPS HORIZONTAL) ─── */
.section-how-it-works {
  padding: 90px 0 !important;
}

.steps-horizontal {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  position: relative !important;
}

@media (max-width: 992px) {
  .steps-horizontal {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 580px) {
  .steps-horizontal {
    grid-template-columns: 1fr !important;
  }
}

.step-card {
  position: relative !important;
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: 32px 24px !important;
  transition: var(--transition-normal) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.step-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--border-hover) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), var(--shadow-premium) !important;
}

.step-number-ring {
  position: relative !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-tertiary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 20px !important;
}

.step-num {
  font-family: var(--font-display) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
}

.step-icon {
  font-size: 1.35rem !important;
  color: var(--ink) !important;
  margin-bottom: 14px !important;
}

.step-card h3 {
  font-size: 1.12rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin-bottom: 8px !important;
}

.step-card p {
  font-size: 0.88rem !important;
  color: var(--ink-muted) !important;
  line-height: 1.55 !important;
}

/* ─── 7. WHY CHOOSE NORTHSTAY (METALLIC BENTO GRID) ─── */
.section-gray {
  background: var(--bg) !important;
  padding: 100px 0 !important;
}

.bento-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  max-width: 1140px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

@media (max-width: 992px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}

@media (max-width: 640px) {
  .bento-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

.bento-card {
  position: relative !important;
  background: linear-gradient(180deg, #18181c 0%, #101014 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: var(--radius-md, 16px) !important;
  padding: 36px 28px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 30px rgba(0, 0, 0, 0.4) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  min-height: 220px !important;
  grid-column: span 1 !important;
}

.bento-card--wide {
  grid-column: span 1 !important;
}

/* Metallic Hairline Top Highlight */
.bento-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent) !important;
  opacity: 0.8 !important;
}

.bento-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 18px 42px rgba(0, 0, 0, 0.6) !important;
}

.bento-bg-number {
  position: absolute !important;
  top: 14px !important;
  right: 20px !important;
  font-family: var(--font-display) !important;
  font-size: 3rem !important;
  font-weight: 800 !important;
  color: rgba(255, 255, 255, 0.05) !important;
  line-height: 1 !important;
  pointer-events: none !important;
  user-select: none !important;
  transition: color 0.3s ease !important;
}

.bento-card:hover .bento-bg-number {
  color: rgba(255, 255, 255, 0.1) !important;
}

.bento-icon-wrap {
  width: 48px !important;
  height: 48px !important;
  border-radius: var(--radius-sm, 10px) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  color: #f4f4f5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.15rem !important;
  margin-bottom: 20px !important;
  transition: transform 0.3s ease, border-color 0.3s ease !important;
}

.bento-card:hover .bento-icon-wrap {
  transform: scale(1.06) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
}

.bento-info h3 {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 8px !important;
}

.bento-info p {
  font-size: 0.9rem !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.65) !important;
}

/* Light Mode Bento Card Variant */
[data-theme="light"] .bento-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: inset 0 1px 0 #ffffff, 0 8px 24px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .bento-card::before {
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.12), transparent) !important;
}

[data-theme="light"] .bento-card:hover {
  border-color: rgba(0, 0, 0, 0.18) !important;
  box-shadow: inset 0 1px 0 #ffffff, 0 16px 36px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .bento-icon-wrap {
  background: linear-gradient(145deg, #f4f4f5 0%, #e4e4e7 100%) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #09090b !important;
}

[data-theme="light"] .bento-bg-number {
  color: rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .bento-info h3 {
  color: #09090b !important;
}

[data-theme="light"] .bento-info p {
  color: #52525b !important;
}

.bento-info h3 {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 8px !important;
}

.bento-info p {
  font-size: 0.9rem !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.65) !important;
}

/* Light Mode Bento Card Variant */
[data-theme="light"] .bento-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: inset 0 1px 0 #ffffff, 0 8px 24px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .bento-card::before {
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.12), transparent) !important;
}

[data-theme="light"] .bento-card:hover {
  border-color: rgba(0, 0, 0, 0.18) !important;
  box-shadow: inset 0 1px 0 #ffffff, 0 16px 36px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .bento-icon-wrap {
  background: linear-gradient(145deg, #f4f4f5 0%, #e4e4e7 100%) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #09090b !important;
}

[data-theme="light"] .bento-bg-number {
  color: rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .bento-info h3 {
  color: #09090b !important;
}

[data-theme="light"] .bento-info p {
  color: #52525b !important;
}

/* ─── 8. TESTIMONIALS SECTION (INFINITE MOVING MARQUEE DECK) ─── */
.section-testimonials {
  padding: 90px 0 100px 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Community Rating Pill Header */
.community-rating-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(255, 84, 32, 0.08) !important;
  border: 1px solid rgba(255, 84, 32, 0.22) !important;
  padding: 8px 20px !important;
  border-radius: var(--radius-pill) !important;
  font-size: 0.85rem !important;
  color: var(--ink) !important;
  margin-bottom: 18px !important;
  box-shadow: 0 4px 16px rgba(255, 84, 32, 0.08) !important;
}

.rating-star-badge {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: var(--accent) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.72rem !important;
  flex-shrink: 0 !important;
}

.rating-text strong {
  color: var(--ink) !important;
  font-weight: 800 !important;
}

/* Marquee Full-Width Outer Container & Edge Gradient Fade Masks */
.testimonials-marquee-container {
  position: relative !important;
  width: 100vw !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  margin-top: 36px !important;
  overflow: hidden !important;
  padding: 10px 0 !important;
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%) !important;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%) !important;
}

.marquee-fade {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 120px !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

.marquee-fade--left {
  left: 0 !important;
  background: linear-gradient(to right, var(--bg-primary), transparent) !important;
}

.marquee-fade--right {
  right: 0 !important;
  background: linear-gradient(to left, var(--bg-primary), transparent) !important;
}

/* Marquee Rows & Animation Tracks */
.marquee-row {
  display: flex !important;
  width: 100% !important;
  overflow: hidden !important;
  margin-bottom: 22px !important;
}

.marquee-row:last-child {
  margin-bottom: 0 !important;
}

.marquee-track {
  display: flex !important;
  gap: 22px !important;
  width: max-content !important;
  will-change: transform !important;
}

.marquee-track--left {
  animation: marquee-scroll-left 38s linear infinite !important;
}

.marquee-track--right {
  animation: marquee-scroll-right 42s linear infinite !important;
}

/* Pause sliding on hover */
.testimonials-marquee-container:hover .marquee-track {
  animation-play-state: paused !important;
}

@keyframes marquee-scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes marquee-scroll-right {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

/* Individual Marquee Testimonial Card */
.marquee-card {
  width: 370px !important;
  min-width: 370px !important;
  max-width: 370px !important;
  height: 195px !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  padding: 20px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease !important;
  cursor: pointer !important;
  user-select: none !important;
  position: relative !important;
  z-index: 1 !important;
}

.marquee-card:hover {
  transform: translateY(-6px) scale(1.025) !important;
  border-color: rgba(255, 84, 32, 0.5) !important;
  box-shadow: 0 20px 42px -10px rgba(0, 0, 0, 0.4), 0 0 28px rgba(255, 84, 32, 0.16) !important;
  z-index: 5 !important;
}

.marquee-card:hover .marquee-quote-mark {
  transform: scale(1.12) rotate(-4deg) !important;
  color: #ff6b3d !important;
}

.marquee-card:hover .marquee-card-text {
  color: var(--ink) !important;
}

/* Card Top Bar (Clean Quote Mark - Generic Reference Style) */
.marquee-card-top {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 12px !important;
}

.marquee-quote-mark {
  font-size: 1.45rem !important;
  color: var(--accent) !important;
  opacity: 0.95 !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease !important;
}

/* Card Quote Text */
.marquee-card-text {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.88rem !important;
  line-height: 1.55 !important;
  color: var(--ink-muted) !important;
  margin: 0 0 12px 0 !important;
  flex-grow: 1 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  letter-spacing: -0.01em !important;
}

.marquee-card-text strong {
  color: var(--ink) !important;
  font-weight: 700 !important;
}

/* Author Profile Section */
.marquee-author {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: auto !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--border-subtle) !important;
}

.marquee-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Avatar Distinct Color Gradients */
.avatar--orange  { background: linear-gradient(135deg, #ff5420, #ff7a45) !important; }
.avatar--emerald { background: linear-gradient(135deg, #10b981, #059669) !important; }
.avatar--teal    { background: linear-gradient(135deg, #14b8a6, #0d9488) !important; }
.avatar--amber   { background: linear-gradient(135deg, #f59e0b, #d97706) !important; }
.avatar--rose    { background: linear-gradient(135deg, #f43f5e, #e11d48) !important; }
.avatar--indigo  { background: linear-gradient(135deg, #6366f1, #4f46e5) !important; }
.avatar--cyan    { background: linear-gradient(135deg, #06b6d4, #0891b2) !important; }
.avatar--violet  { background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important; }

.marquee-author-info {
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}

.marquee-author-info h4 {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.verified-badge {
  color: #10b981 !important;
  font-size: 0.78rem !important;
  flex-shrink: 0 !important;
}

.marquee-author-info span {
  font-size: 0.75rem !important;
  color: var(--ink-faint) !important;
  display: block !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ─── 9. MINIMALIST ANIMATED FAQ ACCORDION ─── */
.section-faq-preview {
  position: relative !important;
  overflow: hidden !important;
  padding: 48px 0 54px 0 !important;
}

.section-faq-preview .section-header {
  margin: 0 auto 22px auto !important;
}

.section-faq-preview .section-header h2 {
  font-size: 2.25rem !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.02em !important;
}

.section-faq-preview .section-header p {
  font-size: 0.98rem !important;
  color: var(--ink-muted) !important;
  margin: 0 auto !important;
}

.faq-ambient-glow {
  position: absolute !important;
  top: 25% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 580px !important;
  height: 320px !important;
  background: radial-gradient(ellipse at center, rgba(255, 84, 32, 0.08) 0%, rgba(255, 122, 69, 0.02) 50%, transparent 70%) !important;
  filter: blur(55px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  animation: faqGlowPulse 8s ease-in-out infinite alternate !important;
}

@keyframes faqGlowPulse {
  0% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.7; }
  100% { transform: translate(-50%, -46%) scale(1.15); opacity: 1; }
}

.faq-floating-orb {
  position: absolute !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  filter: blur(40px) !important;
  z-index: 0 !important;
}

.faq-floating-orb--1 {
  top: 12% !important;
  left: 6% !important;
  width: 160px !important;
  height: 160px !important;
  background: rgba(255, 84, 32, 0.05) !important;
  animation: orbFloat1 12s ease-in-out infinite alternate !important;
}

.faq-floating-orb--2 {
  bottom: 12% !important;
  right: 6% !important;
  width: 180px !important;
  height: 180px !important;
  background: rgba(16, 185, 129, 0.04) !important;
  animation: orbFloat2 14s ease-in-out infinite alternate !important;
}

@keyframes orbFloat1 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30px, 40px) scale(1.2); }
}

@keyframes orbFloat2 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-35px, -30px) scale(1.15); }
}

/* Eyebrow Pill */
.faq-eyebrow-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255, 84, 32, 0.08) !important;
  border: 1px solid rgba(255, 84, 32, 0.22) !important;
  padding: 5px 15px !important;
  border-radius: var(--radius-pill) !important;
  font-size: 0.8rem !important;
  color: var(--ink) !important;
  margin-bottom: 12px !important;
  box-shadow: 0 4px 16px rgba(255, 84, 32, 0.08) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.faq-eyebrow-pill:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(255, 84, 32, 0.16) !important;
}

.faq-pill-icon {
  color: var(--accent) !important;
  font-size: 0.85rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  animation: iconSoftSpin 6s linear infinite !important;
}

@keyframes iconSoftSpin {
  0%, 80% { transform: rotate(0deg); }
  90% { transform: rotate(15deg) scale(1.1); }
  95% { transform: rotate(-15deg) scale(1.1); }
  100% { transform: rotate(0deg); }
}

.faq-pill-text {
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* FAQ List */
.faq-list {
  max-width: 820px !important;
  margin: 18px auto 0 auto !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.faq-item {
  position: relative !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease !important;
  cursor: pointer !important;
}

.faq-item:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(255, 84, 32, 0.45) !important;
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 84, 32, 0.12) !important;
}

.faq-question {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 16px 20px !important;
  user-select: none !important;
  background: transparent !important;
}

.faq-q-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex: 1 !important;
}

.faq-num {
  font-family: 'JetBrains Mono', 'Fira Code', monospace, sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  color: var(--accent) !important;
  background: rgba(255, 84, 32, 0.08) !important;
  border: 1px solid rgba(255, 84, 32, 0.2) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.faq-item:hover .faq-num {
  transform: scale(1.06) !important;
  background: var(--accent) !important;
  color: #ffffff !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 12px rgba(255, 84, 32, 0.4) !important;
}

.faq-q-text {
  font-family: var(--font-heading) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  line-height: 1.4 !important;
  transition: color 0.25s ease !important;
}

.faq-icon-wrap,
.faq-question > i {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--ink-muted) !important;
  font-size: 0.82rem !important;
  flex-shrink: 0 !important;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.faq-icon-wrap i {
  font-size: 0.82rem !important;
  color: inherit !important;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease !important;
  display: inline-block !important;
}

.faq-item:hover .faq-icon-wrap,
.faq-item:hover .faq-question > i {
  border-color: rgba(255, 84, 32, 0.4) !important;
  color: var(--accent) !important;
}

/* Active / Open States */
.faq-item.active,
.faq-item.open {
  border-color: rgba(255, 84, 32, 0.5) !important;
  background: var(--card) !important;
  box-shadow: inset 0 1px 0 rgba(255, 84, 32, 0.4), 0 16px 36px -10px rgba(0, 0, 0, 0.35), 0 0 24px rgba(255, 84, 32, 0.14) !important;
}

.faq-item.active .faq-num,
.faq-item.open .faq-num {
  background: var(--accent) !important;
  color: #ffffff !important;
  border-color: var(--accent) !important;
  transform: scale(1.08) !important;
  box-shadow: 0 0 16px rgba(255, 84, 32, 0.5) !important;
}

.faq-item.active .faq-icon-wrap,
.faq-item.open .faq-icon-wrap,
.faq-item.active .faq-question > i,
.faq-item.open .faq-question > i {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(255, 84, 32, 0.5) !important;
  transform: rotate(180deg) !important;
}

.faq-item.active .faq-icon-wrap i,
.faq-item.open .faq-icon-wrap i {
  transform: rotate(180deg) !important;
  color: #ffffff !important;
}

.faq-answer {
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  padding: 0 26px !important;
  transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, padding 0.3s ease !important;
}

.faq-item.active .faq-answer,
.faq-item.open .faq-answer {
  max-height: 500px !important;
  opacity: 1 !important;
  padding-bottom: 22px !important;
}

.faq-answer-inner {
  padding: 0 0 0 52px !important;
}

@media (max-width: 600px) {
  .faq-answer {
    padding: 0 18px !important;
  }
  .faq-answer-inner {
    padding: 0 !important;
  }
  .faq-q-left {
    gap: 12px !important;
  }
  .faq-question {
    padding: 18px 18px !important;
  }
}

.faq-answer p {
  color: var(--ink-muted) !important;
  font-size: 0.95rem !important;
  line-height: 1.68 !important;
  border-top: 1px dashed var(--border) !important;
  padding-top: 16px !important;
  margin: 0 !important;
}

.faq-answer p strong {
  color: var(--ink) !important;
  font-weight: 700 !important;
}

.faq-item.active .faq-answer p,
.faq-item.open .faq-answer p {
  animation: faqAnswerSlideIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes faqAnswerSlideIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* FAQ Page Hero Spacing below Floating Navbar */
.faq-page-hero {
  padding-top: 140px !important;
  padding-bottom: 40px !important;
}

@media (max-width: 768px) {
  .faq-page-hero {
    padding-top: 110px !important;
    padding-bottom: 30px !important;
  }
}

/* Footer View All FAQs Button */
.faq-footer-cta {
  margin-top: 28px !important;
}

.faq-view-all-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 13px 30px !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.faq-btn-arrow {
  font-size: 0.85rem !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.faq-view-all-btn:hover .faq-btn-arrow {
  transform: translateX(4px) !important;
}

/* Light Theme Variant */
[data-theme="light"] .faq-item {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .faq-item:hover {
  border-color: rgba(255, 84, 32, 0.4) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.07), 0 0 16px rgba(255, 84, 32, 0.08) !important;
}

[data-theme="light"] .faq-icon-wrap i {
  background: #f4f4f5 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #52525b !important;
}

[data-theme="light"] .faq-item.active,
[data-theme="light"] .faq-item.open {
  border-color: rgba(255, 84, 32, 0.45) !important;
  background: #ffffff !important;
}

[data-theme="light"] .faq-item.active .faq-icon-wrap i,
[data-theme="light"] .faq-item.open .faq-icon-wrap i {
  color: #ffffff !important;
  background: var(--accent) !important;
}

/* ─── FAQ PAGE HERO, SEARCH & CATEGORY CHIPS ─── */
.faq-search-container {
  max-width: 640px !important;
  margin: 28px auto 0 auto !important;
  width: 100% !important;
}

.faq-search-box {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-pill) !important;
  padding: 6px 16px 6px 20px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.faq-search-box:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(255, 84, 32, 0.15), 0 12px 36px rgba(0, 0, 0, 0.3) !important;
}

.faq-search-box i.fa-magnifying-glass {
  color: var(--ink-muted) !important;
  font-size: 1rem !important;
  margin-right: 12px !important;
}

.faq-search-input {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: var(--ink) !important;
  font-size: 0.96rem !important;
  padding: 10px 0 !important;
  font-family: inherit !important;
}

.faq-search-input::placeholder {
  color: var(--ink-faint) !important;
}

.faq-search-clear {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border) !important;
  color: var(--ink-muted) !important;
  border-radius: 50% !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 0.75rem !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}

.faq-search-clear:hover {
  background: var(--accent) !important;
  color: #fff !important;
}

/* Category Filter Chips */
.faq-filter-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 28px auto 0 auto !important;
  max-width: 760px !important;
}

.faq-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 18px !important;
  border-radius: var(--radius-pill) !important;
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border) !important;
  color: var(--ink-muted) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.faq-chip:hover {
  border-color: rgba(255, 84, 32, 0.35) !important;
  color: var(--ink) !important;
  transform: translateY(-2px) !important;
}

.faq-chip.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(255, 84, 32, 0.35) !important;
}

.faq-chip.active i {
  color: #ffffff !important;
}

/* Support Help Cards */
.faq-support-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  max-width: 960px !important;
  margin: 48px auto 0 auto !important;
}

@media (max-width: 768px) {
  .faq-support-grid {
    grid-template-columns: 1fr !important;
  }
}

.faq-support-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  padding: 24px 20px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.faq-support-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(255, 84, 32, 0.4) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25) !important;
}

.faq-support-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  background: rgba(255, 84, 32, 0.1) !important;
  color: var(--accent) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.25rem !important;
  margin-bottom: 14px !important;
}

.faq-support-card h4 {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin-bottom: 6px !important;
}

.faq-support-card p {
  font-size: 0.86rem !important;
  color: var(--ink-muted) !important;
  margin-bottom: 14px !important;
  line-height: 1.45 !important;
}

.faq-support-link {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.faq-support-link:hover {
  text-decoration: underline !important;
}

/* ─── 10. PRE-FOOTER CTA BANNER (PREMIUM RELATABLE STUDENT LIVING) ─── */
.section-cta-wrapper {
  padding: 80px 0 100px 0 !important;
}

.final-cta--upgraded {
  position: relative !important;
  background: linear-gradient(135deg, #181926 0%, #0d0e17 50%, #151624 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  border-top: 1.5px solid rgba(255, 255, 255, 0.45) !important;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 28px !important;
  padding: 64px 40px 54px 40px !important;
  text-align: center !important;
  box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

[data-theme="light"] .final-cta--upgraded {
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 50%, #e2e8f0 100%) !important;
  border: 1.5px solid rgba(0, 0, 0, 0.14) !important;
  border-top: 1.5px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.08), inset 0 1px 0 #ffffff !important;
}

.final-cta-glow {
  position: absolute !important;
  top: -20% !important;
  right: -10% !important;
  width: 550px !important;
  height: 550px !important;
  background: radial-gradient(circle, rgba(255, 84, 32, 0.18) 0%, rgba(255, 122, 69, 0.08) 40%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.final-cta-glow--left {
  position: absolute !important;
  bottom: -20% !important;
  left: -10% !important;
  width: 500px !important;
  height: 500px !important;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.14) 0%, transparent 65%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Eyebrow badge */
.cta-pill-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 16px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--radius-pill) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: var(--accent) !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  z-index: 2 !important;
  position: relative !important;
}

[data-theme="light"] .cta-pill-eyebrow {
  background: rgba(255, 84, 32, 0.08) !important;
  border-color: rgba(255, 84, 32, 0.2) !important;
  color: #ff5420 !important;
}

.cta-eyebrow-glow {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #ff5420 !important;
  box-shadow: 0 0 8px #ff5420 !important;
  animation: ctaDotPulse 2s infinite ease-in-out !important;
}

@keyframes ctaDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.75); }
}

/* Metallic Silver Liquid Shimmer Title */
.final-cta h2,
.final-cta h2.text-shimmer {
  position: relative !important;
  z-index: 2 !important;
  font-size: clamp(2.1rem, 4.2vw, 3.1rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  margin-bottom: 16px !important;
  line-height: 1.15 !important;
  background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 55%, #cbd5e1 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 12px rgba(255, 255, 255, 0.25)) !important;
}

.final-cta p {
  position: relative !important;
  z-index: 2 !important;
  color: var(--ink-muted) !important;
  font-size: 1.08rem !important;
  line-height: 1.65 !important;
  max-width: 620px !important;
  margin: 0 auto 34px auto !important;
}

/* Floating Relatable Micro Cards (Desktop / Tablet) */
.cta-relatable-card {
  position: absolute !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 18px !important;
  background: rgba(18, 22, 34, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important;
  text-align: left !important;
  transition: transform 0.3s ease, border-color 0.3s ease !important;
  pointer-events: none !important;
}

[data-theme="light"] .cta-relatable-card {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.06) !important;
}

.cta-relatable-card--left {
  top: 36px !important;
  left: 36px !important;
  animation: ctaFloatLeft 6s ease-in-out infinite alternate !important;
}

.cta-relatable-card--right {
  bottom: 36px !important;
  right: 36px !important;
  animation: ctaFloatRight 6s ease-in-out infinite alternate !important;
}

@keyframes ctaFloatLeft {
  0% { transform: translateY(0px) rotate(-1deg); }
  100% { transform: translateY(-8px) rotate(1deg); }
}

@keyframes ctaFloatRight {
  0% { transform: translateY(0px) rotate(1deg); }
  100% { transform: translateY(-8px) rotate(-1deg); }
}

.cta-relatable-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: rgba(59, 130, 246, 0.15) !important;
  color: #3b82f6 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  flex-shrink: 0 !important;
}

.cta-relatable-icon--accent {
  background: rgba(255, 84, 32, 0.15) !important;
  color: #ff5420 !important;
}

.cta-relatable-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.cta-relatable-label {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}

.cta-relatable-val {
  font-size: 0.72rem !important;
  color: var(--ink-muted) !important;
  font-weight: 500 !important;
}

@media (max-width: 991px) {
  .cta-relatable-card {
    display: none !important;
  }
}

/* Action Buttons */
.final-cta-actions {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin-bottom: 28px !important;
}

/* Student Amenities Trust Strip */
.cta-amenities-strip {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  padding-top: 6px !important;
}

.cta-amenity-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--ink-muted) !important;
  transition: color 0.2s ease !important;
}

.cta-amenity-item i {
  color: var(--accent) !important;
  font-size: 0.78rem !important;
}

.cta-amenity-dot {
  color: rgba(255, 255, 255, 0.2) !important;
  font-size: 0.8rem !important;
}

[data-theme="light"] .cta-amenity-dot {
  color: rgba(0, 0, 0, 0.2) !important;
}

@media (max-width: 600px) {
  .final-cta--upgraded {
    padding: 48px 20px 40px 20px !important;
    border-radius: 20px !important;
  }
  .cta-amenities-strip {
    gap: 8px 12px !important;
  }
  .cta-amenity-dot {
    display: none !important;
  }
}

.btn-cta-white {
  position: relative !important;
  background: #ffffff !important;
  color: #09090b !important;
  border-radius: var(--radius-pill) !important;
  padding: 14px 30px !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25), inset 0 1px 0 #ffffff !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, background 0.3s ease !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

[data-theme="light"] .btn-cta-white {
  background: #09090b !important;
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15) !important;
}

.btn-cta-white:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
}

[data-theme="light"] .btn-cta-white:hover {
  background: #18181b !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25) !important;
}

.btn-cta-white:active {
  transform: translateY(0px) scale(0.98) !important;
}

.btn-cta-white i {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-cta-white:hover i {
  transform: translateX(4px) !important;
}

.btn-cta-ghost {
  position: relative !important;
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid var(--border) !important;
  color: var(--ink) !important;
  border-radius: var(--radius-pill) !important;
  padding: 14px 28px !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.btn-cta-ghost:hover {
  background: var(--bg-secondary) !important;
  border-color: var(--border-hover) !important;
  transform: translateY(-3px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

.btn-cta-ghost:active {
  transform: translateY(0px) scale(0.98) !important;
}

.btn-cta-ghost i {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-cta-ghost:hover i {
  transform: rotate(15deg) scale(1.15) !important;
}

/* Secondary & Magnetic Buttons */
.btn-secondary,
.btn-magnetic {
  position: relative !important;
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  color: var(--ink) !important;
  border-radius: var(--radius-pill) !important;
  padding: 12px 28px !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 14px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.btn-secondary:hover,
.btn-magnetic:hover {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-hover) !important;
  color: var(--ink) !important;
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

.btn-secondary:active,
.btn-magnetic:active {
  transform: translateY(0px) scale(0.98) !important;
}

.btn-secondary i,
.btn-magnetic i {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-secondary:hover i,
.btn-magnetic:hover i {
  transform: rotate(15deg) scale(1.18) !important;
  color: var(--accent) !important;
}

/* ─── 11. POLISHED FOOTER ─── */
.footer.footer--polished {
  background-color: var(--bg) !important;
  border-top: 1px solid var(--border) !important;
  padding: 70px 0 35px 0 !important;
}

.footer-grid {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1fr !important;
  gap: 48px !important;
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 36px !important;
  }
}

@media (max-width: 580px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
  }
}

.footer-brand p {
  color: var(--ink-muted) !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  max-width: 320px !important;
  margin-bottom: 20px !important;
}

.footer-social-links {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.footer-social-links a {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  color: var(--ink-muted) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.9rem !important;
  transition: var(--transition-fast) !important;
}

.footer-social-links a:hover {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-hover) !important;
  color: var(--ink) !important;
  transform: translateY(-2px) !important;
}

.footer-col h4 {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--ink) !important;
  margin-bottom: 18px !important;
}

.footer-col ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer-col ul li {
  margin-bottom: 10px !important;
}

.footer-col ul li a {
  color: var(--ink-muted) !important;
  font-size: 0.88rem !important;
  transition: color 0.2s ease !important;
}

.footer-col ul li a:hover {
  color: var(--ink) !important;
}

.footer-bottom {
  border-top: 1px solid var(--border) !important;
  margin-top: 50px !important;
  padding-top: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 0.82rem !important;
  color: var(--ink-faint) !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

/* Official Google Play Badge Styling (Pixel-Perfect Match to Screenshot) */
.footer-bottom-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.app-store-btn.google-play-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 16px !important;
  background: #000000 !important;
  border: 1.8px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 16px !important;
  padding: 14px 30px 14px 22px !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.65) !important;
}

.app-store-btn.google-play-btn:hover {
  background: #0c0c0e !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.85), 0 0 25px rgba(255, 255, 255, 0.2) !important;
}

.app-store-btn.google-play-btn .app-btn-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 34px !important;
  height: 34px !important;
}

.app-store-btn.google-play-btn .app-btn-icon svg,
.app-store-btn.google-play-btn .app-btn-icon img {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  display: block !important;
  object-fit: contain !important;
}

.app-store-btn.google-play-btn .app-btn-text {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  text-align: left !important;
  line-height: 1.15 !important;
}

.app-store-btn.google-play-btn .app-btn-sub {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.09em !important;
  color: #a1a1aa !important;
  text-transform: uppercase !important;
  margin-bottom: 2px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

.app-store-btn.google-play-btn .app-btn-title {
  font-size: 22px !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* Hero "List Property" Button Exact Match to "Get it on Google Play" */
html body .hero-actions .btn-hero-outline,
html body .hero-actions .btn-list-property-hover,
:root html body .hero-actions .btn-hero-outline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 68px !important;
  padding: 0 32px !important;
  border-radius: 16px !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  border: 1.8px solid rgba(255, 255, 255, 0.35) !important;
  background: #000000 !important;
  color: #ffffff !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.65) !important;
  transition: all 0.25s ease !important;
  box-sizing: border-box !important;
  gap: 10px !important;
  text-decoration: none !important;
}

html body .hero-actions .btn-hero-outline:hover,
html body .hero-actions .btn-list-property-hover:hover {
  background: #0c0c0e !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  color: #ffffff !important;
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.85), 0 0 25px rgba(255, 255, 255, 0.2) !important;
}

html body .hero-actions .btn-hero-outline img,
html body .hero-actions .btn-list-property-hover img {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  display: block !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

html body .hero-actions .google-play-btn {
  height: 68px !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
}

/* Mobile View Hero Action Buttons & Typography Sizing (Desktop untouched) */
@media (max-width: 768px) {
  /* Depth-of-field blur on mobile hero background image for premium aesthetic */
  :root .hero-layer--building img.hero-building-img,
  .hero-layer--building img.hero-building-img,
  .hero-building-img {
    filter: saturate(1.06) contrast(1.08) brightness(1.05) blur(22px) !important;
    transform: scale(1.12) !important;
  }

  html body .hero-main-title {
    font-size: clamp(2.3rem, 7.5vw, 2.9rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 14px !important;
    letter-spacing: -0.025em !important;
  }

  html body .hero-campus-script {
    font-size: 1.25em !important;
  }

  html body .hero-subtext {
    font-size: 1.05rem !important;
    line-height: 1.55 !important;
    margin-bottom: 24px !important;
    color: rgba(255, 255, 255, 0.88) !important;
  }

  html body .hero-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 330px !important;
    margin: 95px auto 0 auto !important;
    transform: translateY(32px) !important;
    gap: 20px !important;
  }

  html body .hero-actions .google-play-btn {
    margin-bottom: 4px !important;
  }

  html body .hero-actions .google-play-btn,
  html body .hero-actions .btn-hero-outline,
  html body .hero-actions .btn-list-property-hover {
    width: 100% !important;
    max-width: 330px !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    border-radius: 15px !important;
    padding: 0 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    gap: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  html body .hero-actions .google-play-btn .app-btn-icon,
  html body .hero-actions .google-play-btn .app-btn-icon img,
  html body .hero-actions .btn-list-property-hover img,
  html body .hero-actions .btn-hero-outline img {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    flex-shrink: 0 !important;
  }

  html body .hero-actions .google-play-btn .app-btn-text {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html body .hero-actions .google-play-btn .app-btn-title {
    font-size: 1.22rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .hero-actions .btn-list-property-hover span,
  html body .hero-actions .btn-hero-outline span {
    font-size: 1.22rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Mobile Hamburger Toggle & Navigation Safeguard */
  html body .mobile-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 9999 !important;
  }

  html body .mobile-nav.active {
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 99999 !important;
  }
}

.btn-back-to-top-circle {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}

.btn-back-to-top-circle:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  transform: translateY(-2px) !important;
}

.btn-back-to-top {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  color: var(--ink-muted) !important;
  padding: 6px 14px !important;
  border-radius: var(--radius-pill) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  transition: var(--transition-fast) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
}

.btn-back-to-top:hover {
  background: var(--bg-tertiary) !important;
  color: var(--ink) !important;
  border-color: var(--border-hover) !important;
}

/* ─── 12. FLOATING GIFT OFFER BADGE (BOTTOM LEFT CORNER) ─── */
.floating-gift-badge {
  position: fixed !important;
  bottom: 28px !important;
  left: 28px !important;
  z-index: 999 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 18px 10px 12px !important;
  background: rgba(16, 16, 22, 0.88) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255, 84, 32, 0.35) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 20px rgba(255, 84, 32, 0.2) !important;
  text-decoration: none !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.35s ease !important;
}

.floating-gift-badge:hover {
  transform: translateY(-4px) scale(1.03) !important;
  border-color: rgba(255, 84, 32, 0.65) !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(255, 84, 32, 0.4) !important;
}

.gift-badge-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #ff7a52, #ff5420) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.05rem !important;
  box-shadow: 0 4px 14px rgba(255, 84, 32, 0.4) !important;
  animation: giftWobble 4s ease-in-out infinite !important;
}

@keyframes giftWobble {
  0%, 100% { transform: rotate(0deg) scale(1); }
  20% { transform: rotate(-12deg) scale(1.1); }
  40% { transform: rotate(12deg) scale(1.1); }
  60% { transform: rotate(-6deg) scale(1.05); }
  80% { transform: rotate(0deg) scale(1); }
}

.gift-badge-text {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.25 !important;
}

.gift-badge-tag {
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #ff5420 !important;
}

.gift-badge-title {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.gift-badge-title i {
  font-size: 0.72rem !important;
  transition: transform 0.3s ease !important;
}

.floating-gift-badge:hover .gift-badge-title i {
  transform: translateX(4px) !important;
}

/* Light Theme Variant */
[data-theme="light"] .floating-gift-badge {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(255, 84, 32, 0.3) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 0 15px rgba(255, 84, 32, 0.15) !important;
}

[data-theme="light"] .gift-badge-title {
  color: #09090b !important;
}

@media (max-width: 768px) {
  .floating-gift-badge {
    position: fixed !important;
    bottom: 20px !important;
    left: 16px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    gap: 0 !important;
    z-index: 9999 !important;
  }

  .floating-gift-badge .gift-badge-text {
    display: none !important;
  }

  .floating-gift-badge .gift-badge-icon {
    width: 50px !important;
    height: 50px !important;
    font-size: 1.2rem !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #ff7a52, #ff5420) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 84, 32, 0.4) !important;
  }
}

/* ─── 13. CHAMPAGNE GOLD SMARTPHONE MOCKUP (EXACT REFERENCE MATCH) ─── */
.step-navigator-pills {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px !important;
  margin-top: 36px !important;
  margin-bottom: 24px !important;
  flex-wrap: wrap !important;
}

.step-pill-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 22px !important;
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-pill) !important;
  cursor: pointer !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.step-pill-btn:hover {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-hover) !important;
  transform: translateY(-2px) !important;
}

.step-pill-btn.active {
  background: linear-gradient(135deg, rgba(255, 84, 32, 0.15) 0%, var(--bg-secondary) 100%) !important;
  border-color: rgba(255, 84, 32, 0.5) !important;
  box-shadow: 0 6px 20px rgba(255, 84, 32, 0.2) !important;
}

.pill-num {
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  color: var(--accent) !important;
  background: rgba(255, 84, 32, 0.12) !important;
  padding: 3px 8px !important;
  border-radius: 20px !important;
}

.pill-text {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}

/* Active Step Info Banner */
.active-step-info-bar {
  max-width: 640px !important;
  margin: 0 auto 36px auto !important;
  text-align: center !important;
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: 18px 24px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--card-shadow) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
}

.step-info-badge {
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: var(--accent) !important;
  background: rgba(255, 84, 32, 0.12) !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  display: inline-block !important;
  margin-bottom: 6px !important;
}

.active-step-info-bar h3 {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  margin-bottom: 4px !important;
}

.active-step-info-bar p {
  font-size: 0.92rem !important;
  color: var(--ink-muted) !important;
  margin: 0 !important;
}

/* 3D Smartphone Trio Wrapper & Ultra-Clear High-Zoom Container */
.phone-trio-wrapper {
  position: relative !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 10px 0 60px 0 !important;
  overflow: visible !important;
}

.phone-trio-container {
  position: relative !important;
  width: 100% !important;
  max-width: 1050px !important;
  height: 650px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  perspective: 1200px !important;
  perspective-origin: center center !important;
}

/* Individual Smartphone Mockup Frame */
.phone-mockup {
  position: absolute !important;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.65s ease, filter 0.65s ease !important;
  will-change: transform, opacity !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Pure Uploaded PNG App Screenshot Display — High Clarity & Sharp Contrast */
.pure-phone-png {
  width: 100% !important;
  height: auto !important;
  max-height: 610px !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 36px !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.15) !important;
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: crisp-edges !important;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 3D Stacking & Zoom Alignment (Center Prominent Focus) */
.phone-mockup--center {
  width: 345px !important;
  transform: translate3d(0, 0, 60px) scale(1.12) !important;
  z-index: 10 !important;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.6)) !important;
}

.phone-mockup--left {
  width: 310px !important;
  transform: translate3d(-220px, 20px, -30px) rotateY(14deg) rotateZ(-3deg) scale(0.92) !important;
  opacity: 0.90 !important;
  z-index: 5 !important;
  filter: drop-shadow(0 20px 35px rgba(0, 0, 0, 0.45)) !important;
}

.phone-mockup--right {
  width: 310px !important;
  transform: translate3d(220px, 20px, -30px) rotateY(-14deg) rotateZ(3deg) scale(0.92) !important;
  opacity: 0.90 !important;
  z-index: 5 !important;
  filter: drop-shadow(0 20px 35px rgba(0, 0, 0, 0.45)) !important;
}

/* Nav Controls */
.trio-nav-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: rgba(16, 16, 22, 0.85) !important;
  backdrop-filter: blur(14px) !important;
  border: 1px solid var(--border) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.1rem !important;
  cursor: pointer !important;
  z-index: 20 !important;
  transition: var(--transition-fast) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
}

.trio-prev { left: 5px !important; }
.trio-next { right: 5px !important; }

.trio-nav-btn:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  transform: translateY(-50%) scale(1.12) !important;
}

@media (max-width: 768px) {
  .phone-mockup--left,
  .phone-mockup--right {
    display: none !important;
  }
  .phone-trio-container {
    height: 600px !important;
  }
  .phone-mockup--center {
    width: 300px !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
  }
}

/* Phone Screen App Elements */
.phone-screen-content {
  position: absolute !important;
  inset: 0 !important;
  background: #0e0e14 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 38px 14px 14px 14px !important;
  overflow: hidden !important;
}

.app-top-status {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  margin-bottom: 10px !important;
}

.app-location-bar {
  background: rgba(255, 84, 32, 0.08) !important;
  border: 1px solid rgba(255, 84, 32, 0.2) !important;
  border-radius: 12px !important;
  padding: 8px 10px !important;
  margin-bottom: 12px !important;
}

.loc-label {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  display: block !important;
}

.loc-label i {
  color: var(--accent) !important;
}

.loc-sub {
  font-size: 0.64rem !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

.app-hero-banner {
  background: linear-gradient(135deg, #181824 0%, rgba(255, 84, 32, 0.15) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  padding: 12px !important;
  margin-bottom: 12px !important;
}

.banner-badge {
  font-size: 0.58rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: #10b981 !important;
  background: rgba(16, 185, 129, 0.15) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  display: inline-block !important;
  margin-bottom: 6px !important;
}

.app-hero-banner h5 {
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 2px !important;
}

.app-hero-banner p {
  font-size: 0.66rem !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin: 0 !important;
}

.app-section-title {
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin-bottom: 8px !important;
}

.app-services-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
  margin-bottom: 12px !important;
}

.service-card {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  padding: 8px 4px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: var(--transition-fast) !important;
}

.service-card i {
  font-size: 0.95rem !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin-bottom: 4px !important;
  display: block !important;
}

.service-card span {
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  display: block !important;
}

.service-card.active {
  background: rgba(255, 84, 32, 0.22) !important;
  border-color: var(--accent) !important;
}

.service-card.active i,
.service-card.active span {
  color: #ffffff !important;
}

.app-step-focus-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 84, 32, 0.3) !important;
  border-radius: 14px !important;
  padding: 12px !important;
  margin-bottom: 12px !important;
  flex: 1 !important;
}

.focus-badge {
  font-size: 0.58rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: var(--accent) !important;
  margin-bottom: 4px !important;
}

.app-step-focus-card h4 {
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 4px !important;
}

.app-step-focus-card p {
  font-size: 0.72rem !important;
  color: rgba(255, 255, 255, 0.7) !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

.app-bottom-nav {
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 20px !important;
  padding: 6px 4px !important;
  margin-top: auto !important;
}

.nav-btn {
  text-align: center !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 0.58rem !important;
}

.nav-btn i {
  font-size: 0.85rem !important;
  display: block !important;
  margin-bottom: 2px !important;
}

.nav-btn.active {
  color: var(--accent) !important;
}

/* Left / Right Secondary Phones UI */
.app-screen-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.85rem !important;
  color: #ffffff !important;
  margin-bottom: 12px !important;
}

.app-toggle-tabs {
  display: flex !important;
  gap: 6px !important;
  margin-bottom: 12px !important;
}

.app-tab {
  flex: 1 !important;
  text-align: center !important;
  padding: 6px !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

.app-tab.active {
  background: var(--accent) !important;
  color: #ffffff !important;
}

.app-card-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  padding: 10px !important;
  margin-bottom: 8px !important;
}

.app-card-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: rgba(255, 84, 32, 0.2) !important;
  color: var(--accent) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.85rem !important;
}

.app-card-details h5 {
  font-size: 0.75rem !important;
  color: #ffffff !important;
  margin: 0 0 2px 0 !important;
}

.app-card-details p {
  font-size: 0.62rem !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin: 0 !important;
}

.app-action-btn {
  background: rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  padding: 10px !important;
  text-align: center !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-top: auto !important;
}

.app-action-btn.primary {
  background: var(--accent) !important;
  box-shadow: 0 4px 14px rgba(255, 84, 32, 0.3) !important;
}

.app-summary-card {
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  padding: 10px !important;
  margin-bottom: 10px !important;
}

.app-summary-card h5 {
  font-size: 0.78rem !important;
  color: #ffffff !important;
  margin: 0 0 4px 0 !important;
}

.app-summary-card .rating {
  font-size: 0.68rem !important;
  color: #f59e0b !important;
  margin: 0 !important;
}

.app-features-mini {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  font-size: 0.68rem !important;
  color: rgba(255, 255, 255, 0.8) !important;
  margin-bottom: 12px !important;
}

.app-features-mini i {
  color: #10b981 !important;
}

/* Nav Controls */
.trio-nav-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(16, 16, 22, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid var(--border) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  z-index: 20 !important;
  transition: var(--transition-fast) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

.trio-prev { left: 10px !important; }
.trio-next { right: 10px !important; }

.trio-nav-btn:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  transform: translateY(-50%) scale(1.1) !important;
}

@media (max-width: 768px) {
  .phone-mockup--left,
  .phone-mockup--right {
    display: none !important;
  }
  .phone-trio-container {
    height: 570px !important;
  }
  .phone-mockup--center {
    transform: translate3d(0, 0, 0) scale(1) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   KARYA SYNC STYLE LIGHT MODE DESIGN SYSTEM (CLEAN WHITE / SLATE hierarchy)
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] body {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

/* Light mode Floating Header & Navbar Pill */
[data-theme="light"] .navbar-pill,
[data-theme="light"] .header-pill {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .nav-links a,
[data-theme="light"] .nav-link {
  color: #334155 !important;
}

[data-theme="light"] .nav-links a:hover,
[data-theme="light"] .nav-links a.active {
  color: #ff5420 !important;
}

[data-theme="light"] .brand-logo-text,
[data-theme="light"] .brand-name {
  color: #0f172a !important;
}

/* Section Header Typography in Light Mode */
[data-theme="light"] .section-eyebrow {
  background: rgba(255, 84, 32, 0.08) !important;
  color: #ff5420 !important;
  border: 1px solid rgba(255, 84, 32, 0.2) !important;
}

[data-theme="light"] .section-header h2,
[data-theme="light"] h2,
[data-theme="light"] h3 {
  color: #0f172a !important;
}

[data-theme="light"] .section-header p,
[data-theme="light"] p.section-subtitle {
  color: #475569 !important;
}

/* Alternating Light Mode Section Canvas (White & Off-White) */
[data-theme="light"] .section-gray,
[data-theme="light"] #why-northstay-section,
[data-theme="light"] #testimonials-section {
  background-color: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="light"] #how-it-works-section,
[data-theme="light"] #faq-section,
[data-theme="light"] .section-faq {
  background-color: #f8fafc !important;
}

/* Bento Grid Cards in Light Mode */
[data-theme="light"] .bento-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .bento-card:hover {
  border-color: rgba(255, 84, 32, 0.3) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-4px) !important;
}

[data-theme="light"] .bento-bg-number {
  color: rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .bento-info h3 {
  color: #0f172a !important;
}

[data-theme="light"] .bento-info p {
  color: #475569 !important;
}

[data-theme="light"] .bento-icon-wrap {
  background: rgba(255, 84, 32, 0.08) !important;
  color: #ff5420 !important;
  border: 1px solid rgba(255, 84, 32, 0.15) !important;
}

/* How It Works Step Pills & Banner in Light Mode */
[data-theme="light"] .step-pill-btn {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .step-pill-btn.active {
  background: #ff5420 !important;
  border-color: #ff5420 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(255, 84, 32, 0.3) !important;
}

[data-theme="light"] .active-step-info-bar {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] #info-title {
  color: #0f172a !important;
}

[data-theme="light"] #info-desc {
  color: #475569 !important;
}

[data-theme="light"] .step-info-badge {
  background: rgba(255, 84, 32, 0.1) !important;
  color: #ff5420 !important;
  border: 1px solid rgba(255, 84, 32, 0.2) !important;
}

/* FAQ Accordion Items in Light Mode */
[data-theme="light"] .faq-card,
[data-theme="light"] .faq-item {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .faq-card:hover,
[data-theme="light"] .faq-item:hover {
  border-color: rgba(255, 84, 32, 0.3) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .faq-number,
[data-theme="light"] .faq-badge {
  background: rgba(255, 84, 32, 0.1) !important;
  color: #ff5420 !important;
}

[data-theme="light"] .faq-question {
  color: #0f172a !important;
  font-weight: 700 !important;
}

[data-theme="light"] .faq-answer {
  color: #475569 !important;
  line-height: 1.6 !important;
}

/* Testimonials Cards in Light Mode */
[data-theme="light"] .testimonial-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .reviewer-name,
[data-theme="light"] .testimonial-name {
  color: #0f172a !important;
}

[data-theme="light"] .review-text,
[data-theme="light"] .testimonial-text {
  color: #475569 !important;
}

/* Footer in Light Mode (Dark Anchored Grounding) */
[data-theme="light"] footer,
[data-theme="light"] .site-footer {
  background: #09090b !important;
  color: #f4f4f5 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE — MODERN HERO & ACCENTS
   (Strictly scoped to [data-theme="light"] — Dark Mode 100% untouched)
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. Home Screen / Hero Section (100% Identical to Dark Mode — No White Fog Layer) ─── */

/* Force dark background — override premium.css var(--bg) which becomes white in light mode */
:root[data-theme="light"] .hero,
:root[data-theme="light"] .hero.hero--cinematic {
  background: #000000 !important;
  background-color: #000000 !important;
}

/* Kill the colored radial-gradient overlays from style.css line ~6950 */
:root[data-theme="light"] .hero::after {
  display: none !important;
}

/* Force dark vignette — override premium.css :root .hero-layer--vignette var(--bg) fade-to-white */
:root[data-theme="light"] .hero-layer--vignette {
  background:
    linear-gradient(180deg,
      rgba(8,8,10,.72) 0%,
      rgba(8,8,10,.36) 26%,
      rgba(8,8,10,.32) 55%,
      rgba(8,8,10,.82) 88%,
      #09090b 100%),
    radial-gradient(90% 70% at 50% 46%,
      rgba(8,8,10,.05) 0%,
      rgba(8,8,10,.55) 100%) !important;
  opacity: 0.75 !important;
}

/* Match dark mode gradient — semi-transparent radial, NOT opaque (z-index 2 sits above building image) */
:root[data-theme="light"] .hero-layer--gradient {
  background: radial-gradient(circle at 50% 30%, rgba(255, 84, 32, 0.12) 0%, transparent 60%) !important;
}

/* Match dark mode building image treatment */
:root[data-theme="light"] .hero-layer--building {
  opacity: 0.82 !important;
}

:root[data-theme="light"] .hero-layer--building img.hero-building-img {
  filter: saturate(1.02) contrast(1.05) brightness(1.1) !important;
}

/* ─── 4. Actions ───
   Hero is now dark in both modes, so buttons must match Dark Mode styling:
   Primary = white bg, dark text; Outline = ghost with white text */
:root[data-theme="light"] .btn-hero-orange {
  background: #fafafa !important;
  color: #08080a !important;
  border: 1px solid transparent !important;
  box-shadow: var(--e2) !important;
}
:root[data-theme="light"] .btn-hero-orange:hover {
  background: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--e3) !important;
}
:root[data-theme="light"] .btn-hero-orange i {
  color: #08080a !important;
}

:root[data-theme="light"] html body .hero-actions .btn-hero-outline,
:root[data-theme="light"] .hero-actions .btn-hero-outline,
:root[data-theme="light"] .btn-hero-outline,
:root[data-theme="light"] .btn-list-property-hover {
  background: #000000 !important;
  color: #ffffff !important;
  border: 1.8px solid rgba(255, 255, 255, 0.35) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.65) !important;
}
:root[data-theme="light"] html body .hero-actions .btn-hero-outline:hover,
:root[data-theme="light"] .hero-actions .btn-hero-outline:hover,
:root[data-theme="light"] .btn-hero-outline:hover,
:root[data-theme="light"] .btn-list-property-hover:hover {
  background: #0c0c0e !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  color: #ffffff !important;
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.85), 0 0 25px rgba(255, 255, 255, 0.2) !important;
}

:root[data-theme="light"] .btn-hero-outline span,
:root[data-theme="light"] .btn-list-property-hover span {
  color: #ffffff !important;
}

/* ─── 5. Shimmer headings ───
   The effect clips a white → grey → white gradient to the glyphs,
   which on a light background renders as very nearly nothing. This is
   why the closing CTA heading read as blank. */
[data-theme="light"] .text-shimmer {
  /* background-image, NOT the `background` shorthand: the shorthand
     resets background-clip to border-box, which un-clips the gradient
     from the glyphs and paints it as a solid bar across the heading.
     The clip properties are restated for the same reason. */
  /* The mid stop is the lightest the glyphs ever get as the highlight
     sweeps across. slate-500 keeps the sweep visible while staying
     above 4.5:1 on white; a lighter grey dips under AA mid-animation. */
  background-image: linear-gradient(90deg,
    #0f172a 0%, #64748b 25%, #0f172a 50%, #64748b 75%, #0f172a 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ─── 5b. Section eyebrows ───
   #ff5420 on its own 8%-tinted chip lands at roughly 2.8:1, which is
   under AA for text this small even at bold weight. A deeper shade of
   the same hue reads as the same brand accent and clears 4.5:1. */
[data-theme="light"] .section-eyebrow {
  color: #c2410c !important;
  background: rgba(255, 84, 32, 0.10) !important;
  border-color: rgba(255, 84, 32, 0.22) !important;
}

/* Same rule applied consistently: in light mode #ff5420 used as small
   TEXT drops to ~3.1:1, so it becomes the deeper #c2410c. Used as a
   fill, border or icon it stays the full brand orange. */
[data-theme="light"] .pill-num,
[data-theme="light"] .gift-badge-tag,
[data-theme="light"] .nav-links a.active {
  color: #c2410c !important;
}

/* The selected step pill paints an orange background, and its number
   was orange too — the same colour on itself, 1:1, invisible. White
   type on the full #ff5420 only reaches 3.2:1, so the selected pill
   also takes the deeper fill to clear 4.5:1. */
/* Colour and background must change together. The pill animates its
   background over ~0.3s while the text colour swaps the instant the
   class flips, so each time the carousel auto-advanced the newly
   selected pill showed white text on a still-white background for a
   third of a second. Shadow and transform still animate. */
[data-theme="light"] .step-pill-btn {
  transition-property: box-shadow, transform !important;
}
[data-theme="light"] .step-pill-btn.active {
  background: #c2410c !important;
  border-color: #c2410c !important;
}
[data-theme="light"] .step-pill-btn.active .pill-num,
[data-theme="light"] .step-pill-btn.active .pill-text {
  color: #ffffff !important;
}

/* ─── 6. Closing CTA card ───
   It was white on white with a hairline border and no presence. */
[data-theme="light"] .final-cta {
  background: linear-gradient(180deg, #ffffff 0%, #fff6f2 100%) !important;
  border: 1px solid rgba(255, 84, 32, 0.16) !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.09),
              0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

/* ═══════════════════════════════════════════════════════════════
   MODERN HOME CTA (RELATABLE STUDENT ROOM & HIGH CONVERSION GRID)
   ═══════════════════════════════════════════════════════════════ */
.section-cta-wrapper {
  padding: 60px 0 90px 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.modern-home-cta {
  position: relative !important;
  background: linear-gradient(135deg, #0e1524 0%, #080d17 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 28px !important;
  padding: 48px 48px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  overflow: hidden !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease !important;
}

.cta-mesh-glow {
  position: absolute !important;
  top: -20% !important;
  right: -10% !important;
  width: 500px !important;
  height: 500px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255, 84, 32, 0.12) 0%, rgba(255, 84, 32, 0) 70%) !important;
  pointer-events: none !important;
  filter: blur(50px) !important;
  z-index: 1 !important;
}

.modern-cta-grid {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: 1.15fr 0.95fr !important;
  gap: 48px !important;
  align-items: center !important;
}

/* Left Content */
.modern-cta-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.modern-cta-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  background: rgba(255, 84, 32, 0.12) !important;
  border: 1px solid rgba(255, 84, 32, 0.28) !important;
  border-radius: 20px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: #ff5420 !important;
  margin-bottom: 20px !important;
  letter-spacing: 0.02em !important;
}

.cta-badge-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #ff5420 !important;
  box-shadow: 0 0 8px #ff5420 !important;
  animation: pulse-dot 2s infinite !important;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

.modern-cta-heading {
  font-size: clamp(2rem, 3.4vw, 2.85rem) !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.03em !important;
  color: #ffffff !important;
  margin: 0 0 16px 0 !important;
}

.modern-cta-subtext {
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.72) !important;
  margin: 0 0 28px 0 !important;
  max-width: 540px !important;
}

/* Feature Highlights */
.modern-cta-highlights {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin-bottom: 32px !important;
}

.cta-highlight-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  padding: 8px 14px !important;
  border-radius: 12px !important;
  transition: transform 0.25s ease, background 0.25s ease !important;
}

.cta-highlight-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  transform: translateY(-2px) !important;
}

.cta-highlight-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: rgba(255, 84, 32, 0.15) !important;
  color: #ff5420 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.85rem !important;
}

.cta-highlight-text {
  display: flex !important;
  flex-direction: column !important;
}

.cta-highlight-text strong {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
}

.cta-highlight-text span {
  font-size: 0.72rem !important;
  color: rgba(255, 255, 255, 0.55) !important;
  line-height: 1.2 !important;
}

/* Buttons */
.modern-cta-actions {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 28px !important;
  flex-wrap: wrap !important;
}

.btn-cta-primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 28px !important;
  background: linear-gradient(135deg, #ff5420 0%, #e04310 100%) !important;
  color: #ffffff !important;
  font-size: 0.96rem !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  box-shadow: 0 10px 25px rgba(255, 84, 32, 0.35) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important;
}

.btn-cta-primary:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 14px 32px rgba(255, 84, 32, 0.5) !important;
  color: #ffffff !important;
}

.btn-cta-primary i {
  transition: transform 0.3s ease !important;
}

.btn-cta-primary:hover i {
  transform: translateX(4px) !important;
}

.btn-cta-secondary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 13px 24px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  font-size: 0.94rem !important;
  font-weight: 600 !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  backdrop-filter: blur(10px) !important;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease !important;
}

.btn-cta-secondary:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-2px) !important;
  color: #ffffff !important;
}

/* Social Proof */
.modern-cta-proof {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  width: 100% !important;
}

.cta-avatar-stack {
  display: flex !important;
  align-items: center !important;
}

.cta-avatar-img {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 2px solid #0e1524 !important;
  object-fit: cover !important;
  margin-left: -8px !important;
}

.cta-avatar-img:first-child {
  margin-left: 0 !important;
}

.cta-avatar-badge {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #ff5420 !important;
  color: #ffffff !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #0e1524 !important;
  margin-left: -8px !important;
}

.cta-proof-copy {
  display: flex !important;
  flex-direction: column !important;
}

.cta-stars {
  color: #f59e0b !important;
  font-size: 0.76rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
}

.cta-stars span {
  color: #ffffff !important;
  font-weight: 800 !important;
  margin-left: 4px !important;
  font-size: 0.78rem !important;
}

.cta-proof-sub {
  font-size: 0.74rem !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Right Visual Column */
.modern-cta-visual {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.modern-cta-image-wrapper {
  position: relative !important;
  width: 100% !important;
  max-width: 480px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease !important;
}

.modern-cta-image-wrapper:hover {
  transform: translateY(-4px) scale(1.01) !important;
  box-shadow: 0 32px 70px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 84, 32, 0.3) !important;
}

.modern-cta-main-img {
  width: 100% !important;
  height: 380px !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.6s ease !important;
}

.modern-cta-image-wrapper:hover .modern-cta-main-img {
  transform: scale(1.04) !important;
}

/* Floating Glass Badges on Image */
.cta-float-card {
  position: absolute !important;
  background: rgba(15, 23, 42, 0.82) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45) !important;
  z-index: 3 !important;
  transition: transform 0.3s ease !important;
}

.cta-float-card--top {
  top: 16px !important;
  left: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.cta-float-card--top .float-card-icon {
  color: #10b981 !important;
  font-size: 1.15rem !important;
}

.float-card-content {
  display: flex !important;
  flex-direction: column !important;
}

.float-card-title {
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}

.float-card-sub {
  font-size: 0.68rem !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

.cta-float-card--bottom {
  bottom: 16px !important;
  right: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  text-align: right !important;
}

.float-card-badge {
  display: inline-block !important;
  align-self: flex-end !important;
  background: rgba(255, 84, 32, 0.2) !important;
  color: #ff5420 !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  border-radius: 12px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.float-card-pricing {
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-end !important;
  gap: 3px !important;
}

.float-price {
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
}

.float-period {
  font-size: 0.72rem !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

.float-rating {
  font-size: 0.68rem !important;
  color: #10b981 !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  justify-content: flex-end !important;
}

/* ─── LIGHT MODE ADAPTATION ─── */
[data-theme="light"] .modern-home-cta {
  background: linear-gradient(135deg, #ffffff 0%, #fff6f2 100%) !important;
  border: 1px solid rgba(255, 84, 32, 0.18) !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.03) !important;
}

[data-theme="light"] .modern-cta-heading {
  color: #0f172a !important;
}

[data-theme="light"] .modern-cta-subtext {
  color: #475569 !important;
}

[data-theme="light"] .cta-highlight-item {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .cta-highlight-text strong {
  color: #0f172a !important;
}

[data-theme="light"] .cta-highlight-text span {
  color: #64748b !important;
}

[data-theme="light"] .btn-cta-secondary {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .btn-cta-secondary:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

[data-theme="light"] .modern-cta-proof {
  border-top-color: #e2e8f0 !important;
}

[data-theme="light"] .cta-stars span {
  color: #0f172a !important;
}

[data-theme="light"] .cta-proof-sub {
  color: #64748b !important;
}

[data-theme="light"] .cta-avatar-img {
  border-color: #ffffff !important;
}

[data-theme="light"] .cta-avatar-badge {
  border-color: #ffffff !important;
}

[data-theme="light"] .cta-float-card {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .float-card-title,
[data-theme="light"] .float-price {
  color: #0f172a !important;
}

[data-theme="light"] .float-card-sub,
[data-theme="light"] .float-period {
  color: #64748b !important;
}

/* ─── RESPONSIVE BREAKPOINTS ─── */
@media (max-width: 992px) {
  .modern-cta-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .modern-home-cta {
    padding: 36px 28px !important;
  }
  .modern-cta-image-wrapper {
    max-width: 100% !important;
  }
  .modern-cta-main-img {
    height: 300px !important;
  }
}

@media (max-width: 600px) {
  .modern-home-cta {
    padding: 28px 18px !important;
    border-radius: 20px !important;
  }
  .modern-cta-heading {
    font-size: 1.75rem !important;
  }
  .modern-cta-subtext {
    font-size: 0.94rem !important;
  }
  .modern-cta-actions {
    flex-direction: column !important;
    width: 100% !important;
  }
  .btn-cta-primary,
  .btn-cta-secondary {
    width: 100% !important;
  }
  .cta-float-card--bottom {
    bottom: 10px !important;
    right: 10px !important;
    padding: 8px 10px !important;
  }
  .modern-cta-main-img {
    height: 240px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   ULTRA-MODERN SLEEK GLASS HOVER EFFECTS (TITANIUM SILVER)
   ═══════════════════════════════════════════════════════════ */
.cofounder-card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.35s ease, 
              box-shadow 0.35s ease,
              background 0.35s ease !important;
}

.cofounder-card:hover {
  transform: translateY(-6px) !important;
  background: rgba(24, 28, 42, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.65), 0 0 25px rgba(255, 255, 255, 0.08) !important;
}

.cofounder-card .cofounder-img-wrapper {
  transition: border-color 0.35s ease, box-shadow 0.35s ease !important;
}

.cofounder-card:hover .cofounder-img-wrapper {
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5) !important;
}

.cofounder-card .cofounder-img-wrapper img {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cofounder-card:hover .cofounder-img-wrapper img {
  transform: scale(1.05) !important;
}

.cofounder-socials a {
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.cofounder-socials a:hover {
  transform: translateY(-3px) scale(1.1) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5) !important;
}

/* ═══════════════════════════════════════════════════════════
   CO-FOUNDER CARDS MOBILE RESPONSIVE LAYOUT (≤ 640px)
   Name on Right Side of Avatar & Co-Founder Tag Directly Below Name
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .cofounders-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .cofounder-card {
    display: block !important;
    padding: 16px 14px !important;
    position: relative !important;
    background: rgba(18, 20, 29, 0.85) !important;
    border-radius: 16px !important;
  }

  .cofounder-card .cofounder-socials {
    position: absolute !important;
    top: 14px !important;
    right: 12px !important;
    display: flex !important;
    gap: 6px !important;
    z-index: 10 !important;
  }

  .cofounder-card .cofounder-socials a {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.78rem !important;
  }

  .cofounder-card .cofounder-img-wrapper {
    float: left !important;
    width: 70px !important;
    min-width: 70px !important;
    height: 70px !important;
    border-radius: 12px !important;
    margin-right: 14px !important;
    margin-bottom: 6px !important;
  }

  .cofounder-card .cofounder-body {
    display: block !important;
    width: 100% !important;
  }

  .cofounder-card .cofounder-body h3 {
    font-size: 1.12rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 2px 0 2px 0 !important;
    padding-right: 95px !important;
    display: block !important;
    word-break: break-word !important;
  }

  .cofounder-card .cofounder-body span {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #EA2129 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 8px !important;
    display: block !important; /* Always sits directly BELOW the name */
    padding-right: 0 !important;
  }

  .cofounder-card .cofounder-body p {
    clear: both !important; /* Drops cleanly below the top avatar + name block */
    margin: 10px 0 0 0 !important;
    font-size: 0.86rem !important;
    color: rgba(255, 255, 255, 0.82) !important;
    line-height: 1.52 !important;
    text-align: left !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   COMPACT FOOTER ACTIONS (Google Play Button + Arrow)
   ═══════════════════════════════════════════════════════════ */
.footer-bottom-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.footer-bottom-actions .app-store-btn.google-play-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #000000 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 12px !important;
  padding: 6px 16px 6px 11px !important;
  height: 40px !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
}

.footer-bottom-actions .app-store-btn.google-play-btn:hover {
  background: #0c0c0e !important;
  border-color: rgba(255, 255, 255, 0.65) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.75), 0 0 15px rgba(255, 255, 255, 0.15) !important;
}

.footer-bottom-actions .app-store-btn.google-play-btn .app-btn-icon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.footer-bottom-actions .app-store-btn.google-play-btn .app-btn-icon svg,
.footer-bottom-actions .app-store-btn.google-play-btn .app-btn-icon img {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  display: block !important;
}

.footer-bottom-actions .app-store-btn.google-play-btn .app-btn-text {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  line-height: 1.1 !important;
}

.footer-bottom-actions .app-store-btn.google-play-btn .app-btn-sub {
  font-size: 7.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  color: #a1a1aa !important;
  text-transform: uppercase !important;
  margin-bottom: 1px !important;
}

.footer-bottom-actions .app-store-btn.google-play-btn .app-btn-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
}

.footer-bottom-actions .btn-back-to-top-circle {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  border-radius: 12px !important;
  background: #14161f !important;
  border: 1.5px solid rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
  font-size: 0.92rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.footer-bottom-actions .btn-back-to-top-circle i {
  color: #ffffff !important;
  font-size: 0.92rem !important;
}

.footer-bottom-actions .btn-back-to-top-circle:hover {
  background: #EA2129 !important;
  border-color: #EA2129 !important;
  color: #ffffff !important;
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 8px 22px rgba(234, 33, 41, 0.45) !important;
}

/* Light Mode Back To Top Button Safeguard */
[data-theme="light"] .footer-bottom-actions .btn-back-to-top-circle {
  background: #0f172a !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="light"] .footer-bottom-actions .btn-back-to-top-circle i {
  color: #ffffff !important;
}

[data-theme="light"] .footer-bottom-actions .btn-back-to-top-circle:hover {
  background: #EA2129 !important;
  border-color: #EA2129 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(234, 33, 41, 0.45) !important;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE NAVIGATION DRAWER LINKS CLICKABILITY SAFEGUARD
   ═══════════════════════════════════════════════════════════ */
.mobile-nav-links {
  pointer-events: auto !important;
  z-index: 100000 !important;
}

.mobile-nav-links a {
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 100001 !important;
  position: relative !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(255, 84, 32, 0.2) !important;
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM LIGHT MODE NAVBAR — APPLE FROSTED GLASS
   (Strictly scoped to [data-theme="light"] — Dark Mode 100% untouched)
   ═══════════════════════════════════════════════════════════ */

/* 1. Frosted Glass Navbar Base */
[data-theme="light"] .navbar,
[data-theme="light"] .navbar.navbar--premium {
  background: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .navbar.scrolled {
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

/* 2. Logo Branding */
[data-theme="light"] .navbar .logo {
  color: #0f172a !important;
  font-weight: 900 !important;
}

[data-theme="light"] .navbar .logo-stay {
  color: #EA2129 !important;
}

[data-theme="light"] .navbar .logo-roof-svg path {
  stroke: #EA2129 !important;
}

/* 3. Navigation Links */
[data-theme="light"] .navbar .nav-links a {
  color: #475569 !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  padding: 7px 18px !important;
  border-radius: 999px !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  background: transparent !important;
}

[data-theme="light"] .navbar .nav-links a:hover {
  color: #0f172a !important;
  background: rgba(15, 23, 42, 0.06) !important;
}

[data-theme="light"] .navbar .nav-links a.active {
  color: #0f172a !important;
  background: rgba(15, 23, 42, 0.08) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* 4. Theme Toggle Button in Light Mode — Crisp Obsidian Slate Track with White/Orange Sun Knob */
[data-theme="light"] .btn-theme-toggle,
[data-theme="light"] .navbar .btn-theme-toggle {
  background: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, 0.3) !important;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .btn-theme-toggle:hover,
[data-theme="light"] .navbar .btn-theme-toggle:hover {
  background: #1e293b !important;
  border-color: #0f172a !important;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 14px rgba(234, 33, 41, 0.3) !important;
  transform: none !important;
}

[data-theme="light"] .btn-theme-toggle i,
[data-theme="light"] .navbar .btn-theme-toggle i {
  transform: translateX(24px) rotate(180deg) !important;
  background: #ffffff !important;
  color: #EA2129 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

/* 5. Pass Manager Button in Light Mode */
[data-theme="light"] .navbar .btn-owner-portal,
[data-theme="light"] .navbar .btn-nav-cta {
  background: #0f172a !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(15, 23, 42, 0.15) !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.15) !important;
}

[data-theme="light"] .navbar .btn-owner-portal *,
[data-theme="light"] .navbar .btn-nav-cta * {
  color: #ffffff !important;
}

[data-theme="light"] .navbar .btn-owner-portal:hover,
[data-theme="light"] .navbar .btn-nav-cta:hover {
  background: #EA2129 !important;
  border-color: #EA2129 !important;
  color: #ffffff !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 24px rgba(234, 33, 41, 0.35) !important;
}

/* 6. Mobile Toggle Hamburger in Light Mode */
[data-theme="light"] .navbar .mobile-toggle {
  color: #0f172a !important;
}

/* 7. Mobile Drawer Navigation in Light Mode (Modern Bottom Logo & Soft Buttons) */
[data-theme="light"] .mobile-nav {
  background: #ffffff !important;
  border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.08) !important;
}

/* Top Header: Hide top logo in Light Mode, align close button to right */
[data-theme="light"] .mobile-nav-header {
  border-bottom: none !important;
  justify-content: flex-end !important;
  padding-bottom: 8px !important;
}

[data-theme="light"] .mobile-nav-header .logo {
  display: none !important;
}

[data-theme="light"] .mobile-nav-close {
  background: #f1f5f9 !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  color: #0f172a !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .mobile-nav-close:hover {
  background: #e2e8f0 !important;
  color: #EA2129 !important;
}

/* Ensure mobile nav body stays neatly centered and comfortable */
[data-theme="light"] .mobile-nav-body {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding: 16px 0 !important;
  flex: 1 !important;
}

/* Soft Buttons for Mobile Navigation Links */
[data-theme="light"] .mobile-nav-links {
  gap: 14px !important;
}

[data-theme="light"] .mobile-nav-links a {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
  padding: 15px 20px !important;
  border-radius: 18px !important;
  font-weight: 700 !important;
  font-size: 1.22rem !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-theme="light"] .mobile-nav-links a i {
  color: #64748b !important;
  font-size: 1.15rem !important;
  width: 26px !important;
  transition: all 0.25s ease !important;
}

[data-theme="light"] .mobile-nav-links a:hover {
  background: #ffffff !important;
  border-color: rgba(234, 33, 41, 0.3) !important;
  color: #EA2129 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(234, 33, 41, 0.1) !important;
}

[data-theme="light"] .mobile-nav-links a:hover i {
  color: #EA2129 !important;
  transform: scale(1.1) !important;
}

/* Active Soft Button State */
[data-theme="light"] .mobile-nav-links a.active {
  background: linear-gradient(135deg, rgba(234, 33, 41, 0.09) 0%, rgba(234, 33, 41, 0.02) 100%) !important;
  border: 1.5px solid rgba(234, 33, 41, 0.35) !important;
  color: #EA2129 !important;
  box-shadow: 0 6px 20px rgba(234, 33, 41, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

[data-theme="light"] .mobile-nav-links a.active i {
  color: #EA2129 !important;
}

/* ─── Pass Manager Button inside Mobile Drawer ─── */
.mobile-drawer-cta {
  width: 100% !important;
  margin-top: 14px !important;
}

.btn-drawer-pass-manager {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 14px 20px !important;
  border-radius: 18px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.12rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Light Mode Pass Manager Drawer Button */
[data-theme="light"] .btn-drawer-pass-manager {
  background: #0f172a !important;
  color: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.15) !important;
}

[data-theme="light"] .btn-drawer-pass-manager:hover {
  background: #1e293b !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25) !important;
}

[data-theme="light"] .btn-drawer-pass-manager .btn-pass-badge {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #ffffff !important;
}

[data-theme="light"] .btn-drawer-pass-manager i.fa-crown {
  color: #fbbf24 !important;
  font-size: 1.1rem !important;
}

[data-theme="light"] .btn-drawer-pass-manager .btn-arrow {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 1.0rem !important;
  transition: transform 0.2s ease !important;
}

[data-theme="light"] .btn-drawer-pass-manager:hover .btn-arrow {
  transform: translateX(4px) !important;
  color: #ffffff !important;
}

/* Dark Mode Pass Manager Drawer Button */
:root[data-theme="dark"] .btn-drawer-pass-manager,
:root:not([data-theme]) .btn-drawer-pass-manager {
  background: linear-gradient(135deg, rgba(234, 33, 41, 0.22) 0%, rgba(234, 33, 41, 0.1) 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(234, 33, 41, 0.45) !important;
  box-shadow: 0 4px 18px rgba(234, 33, 41, 0.15) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

:root[data-theme="dark"] .btn-drawer-pass-manager:hover,
:root:not([data-theme]) .btn-drawer-pass-manager:hover {
  background: linear-gradient(135deg, rgba(234, 33, 41, 0.35) 0%, rgba(234, 33, 41, 0.18) 100%) !important;
  border-color: rgba(234, 33, 41, 0.7) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 26px rgba(234, 33, 41, 0.25) !important;
}

:root[data-theme="dark"] .btn-drawer-pass-manager .btn-pass-badge,
:root:not([data-theme]) .btn-drawer-pass-manager .btn-pass-badge {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #ffffff !important;
}

:root[data-theme="dark"] .btn-drawer-pass-manager i.fa-crown,
:root:not([data-theme]) .btn-drawer-pass-manager i.fa-crown {
  color: #fbbf24 !important;
  font-size: 1.1rem !important;
}

:root[data-theme="dark"] .btn-drawer-pass-manager .btn-arrow,
:root:not([data-theme]) .btn-drawer-pass-manager .btn-arrow {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 1.0rem !important;
  transition: transform 0.2s ease !important;
}

:root[data-theme="dark"] .btn-drawer-pass-manager:hover .btn-arrow {
  transform: translateX(4px) !important;
  color: #ffffff !important;
}

/* Hide drawer footer buttons (Pass Manager & Theme Toggle) in Light Mode */
[data-theme="light"] .mobile-footer-actions {
  display: none !important;
}

/* Show Modern NorthStay Logo at the Bottom of Mobile Drawer in Light Mode */
.mobile-footer-brand {
  display: none;
}

[data-theme="light"] .mobile-nav-footer {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
  padding: 20px 0 10px 0 !important;
  margin-top: auto !important;
}

[data-theme="light"] .mobile-footer-brand {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 22px !important;
  padding: 14px 32px !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.02) !important;
  text-align: center !important;
}

[data-theme="light"] .mobile-footer-brand .logo {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.7rem !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  letter-spacing: -0.05em !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

[data-theme="light"] .mobile-footer-brand .logo-stay {
  color: #EA2129 !important;
  margin-left: -3.5px !important;
  letter-spacing: -0.05em !important;
  position: relative !important;
  display: inline-block !important;
}

[data-theme="light"] .mobile-footer-brand .logo-roof-svg {
  position: absolute !important;
  top: -10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 50px !important;
  height: 18px !important;
}

[data-theme="light"] .mobile-brand-tagline {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-top: 5px !important;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — MOBILE DRAWER NAVIGATION (BOTTOM LOGO & NO FOOTER BUTTONS)
   ═══════════════════════════════════════════════════════════ */

/* Top Header: Hide top logo in Dark Mode, align close button to right */
:root[data-theme="dark"] .mobile-nav-header,
:root:not([data-theme]) .mobile-nav-header {
  border-bottom: none !important;
  justify-content: flex-end !important;
  padding-bottom: 8px !important;
}

:root[data-theme="dark"] .mobile-nav-header .logo,
:root:not([data-theme]) .mobile-nav-header .logo {
  display: none !important;
}

/* Ensure mobile nav body stays neatly centered and comfortable */
:root[data-theme="dark"] .mobile-nav-body,
:root:not([data-theme]) .mobile-nav-body {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding: 16px 0 !important;
  flex: 1 !important;
}

/* Hide drawer footer buttons (Pass Manager & Theme Toggle) in Dark Mode */
:root[data-theme="dark"] .mobile-footer-actions,
:root:not([data-theme]) .mobile-footer-actions {
  display: none !important;
}

/* Show Modern NorthStay Logo at the Bottom of Mobile Drawer in Dark Mode */
:root[data-theme="dark"] .mobile-nav-footer,
:root:not([data-theme]) .mobile-nav-footer {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 20px 0 10px 0 !important;
  margin-top: auto !important;
}

:root[data-theme="dark"] .mobile-footer-brand,
:root:not([data-theme]) .mobile-footer-brand {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(18, 20, 29, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 22px !important;
  padding: 14px 32px !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  text-align: center !important;
}

:root[data-theme="dark"] .mobile-footer-brand .logo,
:root:not([data-theme]) .mobile-footer-brand .logo {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.7rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: -0.05em !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

:root[data-theme="dark"] .mobile-footer-brand .logo-stay,
:root:not([data-theme]) .mobile-footer-brand .logo-stay {
  color: #EA2129 !important;
  margin-left: -3.5px !important;
  letter-spacing: -0.05em !important;
  position: relative !important;
  display: inline-block !important;
}

:root[data-theme="dark"] .mobile-footer-brand .logo-roof-svg,
:root:not([data-theme]) .mobile-footer-brand .logo-roof-svg {
  position: absolute !important;
  top: -10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 50px !important;
  height: 18px !important;
}

:root[data-theme="dark"] .mobile-brand-tagline,
:root:not([data-theme]) .mobile-brand-tagline {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-top: 5px !important;
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM LIGHT MODE - VERIFIED PG SHOWCASE SECTION & CARDS
   (Strictly scoped to [data-theme="light"] — Dark Mode 100% untouched)
   ═══════════════════════════════════════════════════════════ */

/* 1. Section Container & Fade Masks */
[data-theme="light"] .section-powered-pg {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%) !important;
  color: #0f172a !important;
}

[data-theme="light"] .section-powered-pg .section-header h2 {
  color: #0f172a !important;
}

[data-theme="light"] .section-powered-pg .section-header p {
  color: #475569 !important;
}

[data-theme="light"] .pg-marquee-fade--left {
  background: linear-gradient(90deg, #f8fafc 0%, transparent 100%) !important;
}

[data-theme="light"] .pg-marquee-fade--right {
  background: linear-gradient(270deg, #f8fafc 0%, transparent 100%) !important;
}

/* 2. Modern White PG Showcase Cards */
[data-theme="light"] .powered-pg-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.02) !important;
}

[data-theme="light"] .powered-pg-card:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(234, 33, 41, 0.4) !important;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.12), 0 0 20px rgba(234, 33, 41, 0.1) !important;
}

/* 3. Card Inner Elements & Typography */
[data-theme="light"] .pg-card-title {
  color: #0f172a !important;
  font-weight: 700 !important;
}

[data-theme="light"] .pg-card-location {
  color: #475569 !important;
}

[data-theme="light"] .pg-price-sub {
  color: #64748b !important;
}

[data-theme="light"] .pg-price-sub i {
  color: #475569 !important;
}

[data-theme="light"] .pg-price-amount {
  color: #0f172a !important;
}

[data-theme="light"] .pg-amenity-pill {
  background: rgba(15, 23, 42, 0.04) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  color: #334155 !important;
}

[data-theme="light"] .pg-card-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.07) !important;
}

[data-theme="light"] .pg-badge-verified {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .pg-card-rating {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #d97706 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM LIGHT MODE - FAQ PREVIEW & ACCORDION SECTION
   (Strictly scoped to [data-theme="light"] — Dark Mode 100% untouched)
   ═══════════════════════════════════════════════════════════ */

/* 1. Section Container & Headers */
[data-theme="light"] .section-faq-preview,
[data-theme="light"] #faq-section {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f1f5f9 100%) !important;
  color: #0f172a !important;
}

[data-theme="light"] .section-faq-preview .section-header h2,
[data-theme="light"] #faq-section .section-header h2 {
  color: #0f172a !important;
  font-weight: 800 !important;
}

[data-theme="light"] .section-faq-preview .section-header p,
[data-theme="light"] #faq-section .section-header p {
  color: #475569 !important;
}

/* 2. Eyebrow Badge Pill */
[data-theme="light"] .faq-eyebrow-pill {
  background: rgba(234, 33, 41, 0.08) !important;
  border: 1px solid rgba(234, 33, 41, 0.22) !important;
  color: #EA2129 !important;
}

[data-theme="light"] .faq-pill-text {
  color: #EA2129 !important;
}

/* 3. FAQ Accordion Cards in Light Mode */
[data-theme="light"] .faq-item {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.09) !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04) !important;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-theme="light"] .faq-item:hover {
  background: #ffffff !important;
  border-color: rgba(234, 33, 41, 0.35) !important;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .faq-item.active {
  background: #ffffff !important;
  border-color: rgba(234, 33, 41, 0.45) !important;
  box-shadow: 0 12px 32px -5px rgba(15, 23, 42, 0.1), 0 0 20px rgba(234, 33, 41, 0.06) !important;
}

/* 4. Question & Number Badge */
[data-theme="light"] .faq-num {
  background: rgba(234, 33, 41, 0.08) !important;
  border: 1px solid rgba(234, 33, 41, 0.22) !important;
  color: #EA2129 !important;
}

[data-theme="light"] .faq-item.active .faq-num {
  background: #EA2129 !important;
  color: #ffffff !important;
  border-color: #EA2129 !important;
}

[data-theme="light"] .faq-q-text {
  color: #0f172a !important;
  font-weight: 700 !important;
}

/* Bulletproof FAQ Chevron Icon Wrapper & Arrow Contrast */
.faq-icon-wrap {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.faq-icon-wrap i,
.faq-icon-wrap i::before {
  font-family: 'Font Awesome 6 Free', 'FontAwesome', sans-serif !important;
  font-weight: 900 !important;
  font-size: 0.95rem !important;
  line-height: 1 !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transition: color 0.3s ease !important;
}

[data-theme="light"] .faq-icon-wrap {
  background: #f1f5f9 !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  color: #0f172a !important;
}

[data-theme="light"] .faq-icon-wrap i,
[data-theme="light"] .faq-icon-wrap i::before {
  color: #0f172a !important;
}

/* Active State (Expanded FAQ Item) — Bright White Chevron Arrow on Solid Brand Red Pill */
.faq-item.active .faq-icon-wrap,
[data-theme="light"] .faq-item.active .faq-icon-wrap {
  background: #EA2129 !important;
  border-color: #EA2129 !important;
  color: #ffffff !important;
  transform: rotate(180deg) !important;
  box-shadow: 0 4px 14px rgba(234, 33, 41, 0.4) !important;
}

.faq-item.active .faq-icon-wrap i,
.faq-item.active .faq-icon-wrap i::before,
[data-theme="light"] .faq-item.active .faq-icon-wrap i,
[data-theme="light"] .faq-item.active .faq-icon-wrap i::before {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 5. Fluid Inset Answer Box in Light Mode */
[data-theme="light"] .faq-answer {
  transition: max-height 0.42s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease !important;
}

[data-theme="light"] .faq-answer-inner {
  background: #f8fafc !important;
  border-radius: 14px !important;
  margin: 0 20px 20px 20px !important;
  padding: 20px 22px !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02) inset !important;
}

[data-theme="light"] .faq-answer p {
  color: #1e293b !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  line-height: 1.68 !important;
  margin: 0 !important;
}

[data-theme="light"] .faq-answer strong {
  color: #0f172a !important;
  font-weight: 700 !important;
}

/* 6. CTA Button */
[data-theme="light"] .faq-footer-cta .faq-view-all-btn,
[data-theme="light"] .faq-footer-cta .btn-secondary {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid rgba(15, 23, 42, 0.15) !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}

[data-theme="light"] .faq-footer-cta .faq-view-all-btn:hover,
[data-theme="light"] .faq-footer-cta .btn-secondary:hover {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #0f172a !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2) !important;
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM LIGHT MODE - CONTACT FORM & INFO CARDS ELEVATION
   (Strictly scoped to [data-theme="light"] — Dark Mode 100% untouched)
   ═══════════════════════════════════════════════════════════ */

/* 1. Page Section Containers & Headings */
[data-theme="light"] .contact-hero,
[data-theme="light"] .section-light {
  background: #f8fafc !important;
  color: #0f172a !important;
}

[data-theme="light"] .contact-hero h1 {
  color: #0f172a !important;
  font-weight: 800 !important;
}

[data-theme="light"] .contact-hero p {
  color: #475569 !important;
}

/* ─── ABOUT US PAGE — Light Mode Visibility Fix ─── */

/* About hero compact heading & subtext */
[data-theme="light"] .about-hero-compact h1 {
  color: #0f172a !important;
}

[data-theme="light"] .about-hero-compact p {
  color: #475569 !important;
}

/* Glass card — white card with subtle border on light bg */
[data-theme="light"] .about-hero-glass-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] .about-hero-glass-card::before {
  background: radial-gradient(circle, rgba(234, 33, 41, 0.03) 0%, transparent 70%) !important;
}
[data-theme="light"] .about-hero-glass-card:hover {
  border-color: rgba(234, 33, 41, 0.2) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

/* About subtitle label */
[data-theme="light"] .about-subtitle {
  color: #EA2129 !important;
}

/* Story heading — proper solid black with modern typography, no orange/red gradient or shadow */
[data-theme="light"] .about-story-centered h2 {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  background-clip: initial !important;
  color: #09090b !important;
  text-shadow: none !important;
  filter: none !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
}

/* Story body text */
[data-theme="light"] .about-story-text {
  color: #334155 !important;
}
[data-theme="light"] .about-story-text p {
  color: #334155 !important;
}

/* Pillars grid divider */
[data-theme="light"] .pillars-grid {
  border-top-color: rgba(0, 0, 0, 0.08) !important;
}

/* Pillar items — light card style */
[data-theme="light"] .pillar-item {
  background: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .pillar-item:hover {
  background: #f1f5f9 !important;
  border-color: rgba(234, 33, 41, 0.15) !important;
}
[data-theme="light"] .pillar-item h3 {
  color: #0f172a !important;
}
[data-theme="light"] .pillar-item p {
  color: #475569 !important;
}

/* Pillar icons */
[data-theme="light"] .pillar-icon {
  background: rgba(234, 33, 41, 0.08) !important;
  color: #EA2129 !important;
  box-shadow: 0 0 12px rgba(234, 33, 41, 0.12) !important;
}
[data-theme="light"] .pillar-item:hover .pillar-icon {
  background: #EA2129 !important;
  color: #ffffff !important;
  box-shadow: 0 0 20px rgba(234, 33, 41, 0.3) !important;
}

/* Co-Founders section heading */
[data-theme="light"] .cofounders-section h2 {
  color: #0f172a !important;
}

/* Co-Founder cards — white card with clean dark text */
[data-theme="light"] .cofounder-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] .cofounder-card h3 {
  color: #0f172a !important;
}
[data-theme="light"] .cofounder-card p {
  color: #475569 !important;
}
[data-theme="light"] .cofounder-img-wrapper {
  border-color: rgba(0, 0, 0, 0.08) !important;
}
/* 2. Contact Form Main Card */
[data-theme="light"] .contact-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 24px !important;
  box-shadow: 0 16px 40px -10px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.02) !important;
}

[data-theme="light"] .contact-card h3 {
  color: #0f172a !important;
  font-weight: 800 !important;
}

/* 3. Form Labels */
[data-theme="light"] .contact-card label,
[data-theme="light"] .form-group label {
  color: #334155 !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  margin-bottom: 8px !important;
}

/* 4. Ultra-Modern Input Fields, Select, and Textarea */
[data-theme="light"] .contact-card input,
[data-theme="light"] .contact-card select,
[data-theme="light"] .contact-card textarea,
[data-theme="light"] .form-group input,
[data-theme="light"] .form-group select,
[data-theme="light"] .form-group textarea {
  background-color: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  color: #0f172a !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) inset !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Placeholder Contrast in Light Mode */
[data-theme="light"] .contact-card input::placeholder,
[data-theme="light"] .contact-card textarea::placeholder,
[data-theme="light"] .form-group input::placeholder,
[data-theme="light"] .form-group textarea::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
  font-weight: 400 !important;
}

/* Focused State in Light Mode */
[data-theme="light"] .contact-card input:focus,
[data-theme="light"] .contact-card select:focus,
[data-theme="light"] .contact-card textarea:focus,
[data-theme="light"] .form-group input:focus,
[data-theme="light"] .form-group select:focus,
[data-theme="light"] .form-group textarea:focus {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #EA2129 !important;
  box-shadow: 0 0 0 4px rgba(234, 33, 41, 0.14), 0 4px 12px rgba(234, 33, 41, 0.08) !important;
  outline: none !important;
}

[data-theme="light"] .contact-card select option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

/* 5. Contact Form Submit Button in Light Mode */
[data-theme="light"] .contact-card .btn-submit-contact {
  background: #0f172a !important;
  color: #ffffff !important;
  border: 1.5px solid #0f172a !important;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18) !important;
  border-radius: 14px !important;
}

[data-theme="light"] .contact-card .btn-submit-contact:hover {
  background: #EA2129 !important;
  border-color: #EA2129 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(234, 33, 41, 0.35) !important;
}

[data-theme="light"] .contact-card .btn-submit-contact * {
  color: #ffffff !important;
}

/* 6. Info Column Right Soft-Box Cards in Light Mode */
[data-theme="light"] .info-item,
[data-theme="light"] .info-item--real {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 20px !important;
  padding: 22px 24px !important;
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.02) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-theme="light"] .info-item--real:hover {
  transform: translateY(-4px) scale(1.01) !important;
  border-color: rgba(234, 33, 41, 0.35) !important;
  box-shadow: 0 18px 40px -8px rgba(15, 23, 42, 0.12), 0 0 20px rgba(234, 33, 41, 0.08) !important;
}

[data-theme="light"] .info-icon--email,
[data-theme="light"] .info-icon--location {
  background: linear-gradient(135deg, rgba(234, 33, 41, 0.12) 0%, rgba(234, 33, 41, 0.05) 100%) !important;
  border: 1.5px solid rgba(234, 33, 41, 0.25) !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 18px rgba(234, 33, 41, 0.12) !important;
}

[data-theme="light"] .info-details h4 {
  color: #0f172a !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  margin-bottom: 4px !important;
}

[data-theme="light"] .info-email-link {
  color: #EA2129 !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
}

[data-theme="light"] .info-address-text {
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
}

[data-theme="light"] .info-subtext {
  color: #64748b !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — HERO SCROLL ZOOM-OUT CINEMATIC EFFECT
   GPU-accelerated parallax: hero scales down + gains rounded corners
   as the user scrolls, creating a "pulling away" cinematic feel.
   (Dark Mode ONLY — Light Mode is untouched)
   ═══════════════════════════════════════════════════════════════ */

.hero {
  will-change: transform, border-radius, box-shadow;
  transform-origin: center top;
  transition: border-radius 0.05s linear, box-shadow 0.05s linear;
  overflow: hidden;
}

/* Ensure inner layers clip to the rounded container */
.hero .hero-layers {
  border-radius: inherit;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — SCROLL REVEAL ANIMATION SYSTEM
   IntersectionObserver-driven entrance animations for all sections.
   Elements start hidden and animate in when scrolled into viewport.
   (Dark Mode ONLY — Light Mode is completely untouched)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Base: Hide elements before reveal (dark mode only) ─── */
:root[data-theme="dark"] [data-reveal],
:root:not([data-theme]) [data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
}

/* ─── Revealed state: visible ─── */
:root[data-theme="dark"] [data-reveal].ns-revealed,
:root:not([data-theme]) [data-reveal].ns-revealed {
  opacity: 1;
}

/* ─── Animation: Fade Up ─── */
@keyframes nsFadeUp {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: translateY(0); }
}

:root[data-theme="dark"] [data-reveal="fade-up"].ns-revealed,
:root:not([data-theme]) [data-reveal="fade-up"].ns-revealed {
  animation: nsFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ─── Animation: Fade In (simple opacity) ─── */
@keyframes nsFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

:root[data-theme="dark"] [data-reveal="fade-in"].ns-revealed,
:root:not([data-theme]) [data-reveal="fade-in"].ns-revealed {
  animation: nsFadeIn 0.7s ease-out forwards;
}

/* ─── Animation: Slide Left ─── */
@keyframes nsSlideLeft {
  from { opacity: 0; transform: translateX(80px); }
  to   { opacity: 1; transform: translateX(0); }
}

:root[data-theme="dark"] [data-reveal="slide-left"].ns-revealed,
:root:not([data-theme]) [data-reveal="slide-left"].ns-revealed {
  animation: nsSlideLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ─── Animation: Slide Right ─── */
@keyframes nsSlideRight {
  from { opacity: 0; transform: translateX(-80px); }
  to   { opacity: 1; transform: translateX(0); }
}

:root[data-theme="dark"] [data-reveal="slide-right"].ns-revealed,
:root:not([data-theme]) [data-reveal="slide-right"].ns-revealed {
  animation: nsSlideRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ─── Animation: Scale In ─── */
@keyframes nsScaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

:root[data-theme="dark"] [data-reveal="scale-in"].ns-revealed,
:root:not([data-theme]) [data-reveal="scale-in"].ns-revealed {
  animation: nsScaleIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ─── Animation: Blur In ─── */
@keyframes nsBlurIn {
  from { opacity: 0; filter: blur(12px); transform: translateY(20px); }
  to   { opacity: 1; filter: blur(0);    transform: translateY(0); }
}

:root[data-theme="dark"] [data-reveal="blur-in"].ns-revealed,
:root:not([data-theme]) [data-reveal="blur-in"].ns-revealed {
  animation: nsBlurIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ─── Staggered Delays (via data-delay attribute) ─── */
:root[data-theme="dark"] [data-delay="1"].ns-revealed,
:root:not([data-theme]) [data-delay="1"].ns-revealed { animation-delay: 0.1s; }

:root[data-theme="dark"] [data-delay="2"].ns-revealed,
:root:not([data-theme]) [data-delay="2"].ns-revealed { animation-delay: 0.22s; }

:root[data-theme="dark"] [data-delay="3"].ns-revealed,
:root:not([data-theme]) [data-delay="3"].ns-revealed { animation-delay: 0.34s; }

:root[data-theme="dark"] [data-delay="4"].ns-revealed,
:root:not([data-theme]) [data-delay="4"].ns-revealed { animation-delay: 0.46s; }

:root[data-theme="dark"] [data-delay="5"].ns-revealed,
:root:not([data-theme]) [data-delay="5"].ns-revealed { animation-delay: 0.58s; }

:root[data-theme="dark"] [data-delay="6"].ns-revealed,
:root:not([data-theme]) [data-delay="6"].ns-revealed { animation-delay: 0.7s; }

/* ─── Section Divider Glow Pulse (Dark Mode) ─── */
@keyframes nsDividerGlow {
  0%, 100% { opacity: 0.25; box-shadow: 0 0 8px rgba(234, 33, 41, 0); }
  50%      { opacity: 0.7;  box-shadow: 0 0 20px rgba(234, 33, 41, 0.25); }
}

:root[data-theme="dark"] .section-line.ns-revealed,
:root:not([data-theme]) .section-line.ns-revealed {
  animation: nsDividerGlow 2.5s ease-in-out 1;
}

/* ─── "Why NorthStay" Cards: Lift + Glow on Scroll Reveal ─── */
@keyframes nsCardLift {
  from { opacity: 0; transform: translateY(40px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

:root[data-theme="dark"] .why-simple-card.ns-revealed,
:root:not([data-theme]) .why-simple-card.ns-revealed {
  animation: nsCardLift 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ─── FAQ Items: Cascade slide-in ─── */
@keyframes nsFaqSlide {
  from { opacity: 0; transform: translateX(-30px) translateY(15px); }
  to   { opacity: 1; transform: translateX(0) translateY(0); }
}

:root[data-theme="dark"] .faq-item.ns-revealed,
:root:not([data-theme]) .faq-item.ns-revealed {
  animation: nsFaqSlide 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ─── Testimonial Cards: Scale-blur entrance ─── */
@keyframes nsTestimonialReveal {
  from { opacity: 0; transform: scale(0.9); filter: blur(6px); }
  to   { opacity: 1; transform: scale(1);   filter: blur(0); }
}

:root[data-theme="dark"] .testimonial-card.ns-revealed,
:root:not([data-theme]) .testimonial-card.ns-revealed {
  animation: nsTestimonialReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ─── PG Cards: Staggered rise ─── */
@keyframes nsPGCardRise {
  from { opacity: 0; transform: translateY(60px) rotateX(8deg); }
  to   { opacity: 1; transform: translateY(0) rotateX(0deg); }
}

:root[data-theme="dark"] .powered-pg-card.ns-revealed,
:root:not([data-theme]) .powered-pg-card.ns-revealed {
  animation: nsPGCardRise 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ─── Footer: Slow fade up from below ─── */
@keyframes nsFooterReveal {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

:root[data-theme="dark"] .footer.ns-revealed,
:root:not([data-theme]) .footer.ns-revealed {
  animation: nsFooterReveal 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ─── Ensure light mode elements are always visible (no animations) ─── */
:root[data-theme="light"] [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
}