/* ============================================================
   Glass Theme — Dark Glassmorphism (Vision Pro Aesthetic)
   Overrides style.css for the dark mode glass experience
   ============================================================ */

/* ── Scene & Canvas ── */
:root {
  --scene-bg:       #080A14;
  --scene-bg-2:     #0D0F1E;
  /* Wallpaper palette — frosted glass, cool blue-charcoal */
  --wp-silver:      rgba(158,162,205,1);
  --wp-slate:       rgba(88,92,135,1);
  --wp-void:        rgba(22,24,48,1);
  --glow-color:     rgba(190,194,228,1);
  --glass:          rgba(255,255,255,0.06);
  --glass-md:       rgba(255,255,255,0.10);
  --glass-strong:   rgba(255,255,255,0.15);
  --glass-border:   rgba(255,255,255,0.10);
  --glass-border-md:rgba(255,255,255,0.16);
  --blur-sm:        blur(12px);
  --blur-md:        blur(24px);
  --blur-lg:        blur(40px);
  --teal:           #2E7D8C;
  --teal-lt:        #4FA3B5;
  --gold:           #E6A537;
  --gold-lt:        #F4C266;
  --white-90:       rgba(255,255,255,0.90);
  --white-70:       rgba(255,255,255,0.70);
  --white-50:       rgba(255,255,255,0.50);
  --white-35:       rgba(255,255,255,0.35);
  --white-15:       rgba(255,255,255,0.15);
  --white-08:       rgba(255,255,255,0.08);
}

@keyframes floatOrb {
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-22px) scale(1.04)}
}

/* Wallpaper-inspired: organic liquid movement, 15–30s loops */
@keyframes liquidBlob {
  0%,100% { transform: translate(0,0)        scale(1.00); }
  18%     { transform: translate(22px,-30px)  scale(1.05); }
  36%     { transform: translate(-20px,24px)  scale(0.96); }
  54%     { transform: translate(28px,16px)   scale(1.04); }
  72%     { transform: translate(-14px,-22px) scale(0.97); }
  90%     { transform: translate(10px,28px)   scale(1.02); }
}

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

@keyframes glowPulse {
  0%,100%{box-shadow:0 0 24px rgba(46,125,140,0.18)}
  50%{box-shadow:0 0 48px rgba(46,125,140,0.38)}
}

@keyframes shimmer {
  0%{background-position:-200% center}
  100%{background-position:200% center}
}

/* ── Base ── */
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--scene-bg);
  color: var(--white-90);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Layered ambient background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  /* Wallpaper-inspired: silver-lavender top-left → cool void bottom-right */
  background:
    radial-gradient(ellipse 65% 45% at 16% 10%, rgba(158,162,205,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 50% 38% at 82% 88%, rgba(22,24,48,0.55)   0%, transparent 50%),
    radial-gradient(ellipse 72% 58% at 50% 50%, rgba(46,125,140,0.07)  0%, transparent 65%),
    radial-gradient(ellipse 38% 28% at 72% 20%, rgba(88,92,135,0.08)   0%, transparent 50%),
    linear-gradient(152deg, #0C0E1C 0%, #080A14 32%, #09090F 65%, #07060E 100%);
  z-index: 0;
  pointer-events: none;
}

/* Canvas — hidden; blob animation removed, background uses CSS layers only */
#bgCanvas {
  display: none !important;
}

/* Content above canvas */
.cookie-consent,
nav,
section,
footer,
#scrollTop,
.chatbot-container {
  position: relative;
  z-index: 1;
}

/* ── Floating Orbs — wallpaper liquid glass palette ── */
.glass-orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
/* Wallpaper top: silver-lavender highlight */
.glass-orb-1 {
  width: 520px; height: 520px;
  top: -5%; left: -3%;
  background: radial-gradient(circle, rgba(158,162,205,0.11) 0%, transparent 70%);
  animation: liquidBlob 24s ease-in-out infinite;
}
/* Site teal — brand accent, bottom-right */
.glass-orb-2 {
  width: 440px; height: 440px;
  bottom: -6%; right: -4%;
  background: radial-gradient(circle, rgba(46,125,140,0.13) 0%, transparent 70%);
  animation: liquidBlob 30s ease-in-out 6s infinite;
}
/* Wallpaper mid: cool slate-blue, center drift */
.glass-orb-3 {
  width: 360px; height: 360px;
  top: 40%; left: 44%;
  background: radial-gradient(circle, rgba(88,92,135,0.09) 0%, transparent 70%);
  animation: liquidBlob 20s ease-in-out 3s infinite;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 3px; }

/* ── Cookie Consent ── */
.cookie-consent {
  background: rgba(7,24,32,0.92) !important;
  backdrop-filter: blur(24px);
  border-top: 1px solid var(--glass-border-md);
  color: var(--white-70) !important;
}
.cookie-consent p { color: var(--white-70) !important; }
.btn-accept {
  background: linear-gradient(135deg, var(--teal), #1E5A68) !important;
  color: white !important;
  border: none !important;
}
.btn-reject {
  background: var(--glass-md) !important;
  border: 1px solid var(--glass-border-md) !important;
  color: var(--white-70) !important;
}
.btn-learn { color: var(--teal-lt) !important; }

/* ── Navbar ── */
.navbar {
  background: rgba(7,24,32,0.80) !important;
  backdrop-filter: var(--blur-md) !important;
  -webkit-backdrop-filter: var(--blur-md) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: none !important;
}
.navbar.scrolled {
  background: rgba(7,24,32,0.92) !important;
}

.nav-brand h2, .nav-brand {
  color: var(--white-90) !important;
  font-family: 'Playfair Display', serif !important;
}

.nav-link {
  color: var(--white-50) !important;
  transition: all 0.25s !important;
}
.nav-link:hover, .nav-link.active {
  color: var(--white-90) !important;
  background: var(--glass-md) !important;
  border-radius: 25px;
}

.nav-toggle span { background: var(--white-70) !important; }

/* Dropdown */
.dropdown-menu {
  background: rgba(7,24,32,0.95) !important;
  backdrop-filter: var(--blur-md) !important;
  border: 1px solid var(--glass-border-md) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5) !important;
}
.dropdown-menu .nav-link { color: var(--white-60,rgba(255,255,255,0.6)) !important; }

/* Language switcher */
.lang-switch-btn {
  background: var(--glass-md) !important;
  border: 1px solid var(--glass-border-md) !important;
  color: var(--white-90) !important;
}
.lang-switch-btn:hover {
  background: rgba(46,125,140,0.25) !important;
}

/* User menu */
.user-menu-toggle { color: var(--white-70) !important; }
.user-dropdown {
  background: rgba(7,24,32,0.95) !important;
  backdrop-filter: var(--blur-md) !important;
  border: 1px solid var(--glass-border-md) !important;
}
.user-dropdown a, .user-dropdown button { color: var(--white-70) !important; }
.user-dropdown a:hover, .user-dropdown button:hover {
  background: var(--glass-md) !important;
  color: var(--white-90) !important;
}

/* ══════════════════════════════════════
   HERO — Original layout + Glass colors
   ══════════════════════════════════════ */
.hero {
  /* Subtle tinted overlay distinguishes hero from body */
  background:
    linear-gradient(160deg,
      rgba(158,162,205,0.07) 0%,
      rgba(46,125,140,0.04) 45%,
      transparent 80%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  position: relative;
}
.hero-background { display: none !important; }

/* Compact hero — inner pages (75% of base height) */
.hero--compact {
  min-height: 30vh !important;
  padding-top: 3rem !important;
  padding-bottom: 2rem !important;
}

/* Service pages hero — compact + glass tint */
.service-hero {
  background: linear-gradient(160deg,
    rgba(158,162,205,0.07) 0%,
    rgba(46,125,140,0.10) 50%,
    rgba(30,90,104,0.08) 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  padding: 4.5rem 0 3rem !important;
  margin-top: 80px !important;
  color: var(--white-90) !important;
}
.service-hero h1 { color: var(--white-90) !important; }
.service-hero .subtitle { color: var(--white-70) !important; }

/* Dashboard hero — compact */
.dashboard-hero {
  background: linear-gradient(160deg,
    rgba(158,162,205,0.07) 0%,
    rgba(46,125,140,0.10) 50%,
    rgba(30,90,104,0.08) 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  padding: 4.5rem 0 3rem !important;
  margin-top: 80px !important;
  color: var(--white-90) !important;
}

/* Keep original content/image/text layout; just restyle colors */
.hero-content { position: relative; z-index: 1; }

/* Photo */
.hero-image { animation: fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) both; }

.profile-photo {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  outline: none !important;
}

/* Text block */
.hero-text { animation: fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.12s both; }

.hero-title {
  color: var(--white-90) !important;
  font-family: 'Playfair Display', serif !important;
}

.hero-subtitle {
  color: var(--teal-lt) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}

.hero-tagline { color: rgba(255,255,255,0.45) !important; }

.hero-mission {
  color: rgba(255,255,255,0.55) !important;
  font-style: italic !important;
}

.hero-description { color: rgba(255,255,255,0.55) !important; }

/* Credential badges */
.credentials-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.credential-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: var(--glass) !important;
  backdrop-filter: var(--blur-sm) !important;
  -webkit-backdrop-filter: var(--blur-sm) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 30px !important;
  padding: 7px 14px !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.80) !important;
}
.credential-badge i { color: var(--teal-lt) !important; }

/* Buttons */
.hero-buttons { display: flex; gap: 10px; flex-wrap: wrap; }

.btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-radius: 40px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.22,1,0.36,1) !important;
  text-decoration: none !important;
}
.btn:hover { transform: translateY(-2px) !important; }

.btn-primary {
  background: linear-gradient(135deg, #2E7D8C, #1E5A68) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(46,125,140,0.4) !important;
}
.btn-primary:hover { box-shadow: 0 8px 30px rgba(46,125,140,0.6) !important; color: #fff !important; }

.btn-secondary {
  background: var(--glass-md) !important;
  border: 1px solid var(--glass-border-md) !important;
  color: var(--white-90) !important;
  backdrop-filter: var(--blur-sm) !important;
}
.btn-secondary:hover { background: rgba(255,255,255,0.16) !important; }

/* Stats banner */
.stats-banner {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.stat-item {
  background: var(--glass) !important;
  backdrop-filter: var(--blur-sm) !important;
  -webkit-backdrop-filter: var(--blur-sm) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 14px !important;
  padding: 12px 18px !important;
  text-align: center !important;
  min-width: 88px !important;
}
.stat-number {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  color: var(--gold) !important;
  line-height: 1 !important;
}
.stat-label {
  color: rgba(255,255,255,0.45) !important;
  font-size: 0.65rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-top: 3px !important;
}

/* ── Sections ── */
.section {
  background: transparent !important;
  position: relative;
  z-index: 1;
}

.section-alt {
  background: rgba(255,255,255,0.018) !important;
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.section-title {
  font-family: 'Playfair Display', serif !important;
  color: var(--white-90) !important;
  font-size: 2rem !important;
}

.title-underline {
  background: linear-gradient(90deg, var(--teal), var(--gold)) !important;
  height: 3px;
  width: 60px;
  border-radius: 2px;
  margin: 8px 0 0;
}

.subsection-title {
  color: var(--white-70) !important;
  font-family: 'Playfair Display', serif !important;
  font-size: 1.2rem !important;
  margin-bottom: 1.2rem !important;
}

/* ── Education columns ── */
.education-column {
  background: var(--glass) !important;
  backdrop-filter: var(--blur-md) !important;
  -webkit-backdrop-filter: var(--blur-md) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.30) !important;
}

/* ── Glass Card (universal) ── */
.about-text,
.timeline-content,
.project-card,
.publication-item,
.conference-item,
.education-item,
.cert-item,
.service-card,
.value-item {
  background: var(--glass) !important;
  backdrop-filter: var(--blur-sm) !important;
  -webkit-backdrop-filter: var(--blur-sm) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 16px !important;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s !important;
  color: var(--white-70) !important;
}
.about-text { padding: 2rem !important; }

.timeline-content:hover,
.project-card:hover,
.service-card:hover,
.value-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.1) !important;
  background: var(--glass-md) !important;
}

/* ── About ── */
.about-content { display: flex; flex-direction: column; gap: 1.5rem; }

.about-text h3, .about-text h4 {
  color: var(--white-90) !important;
  font-family: 'Playfair Display', serif !important;
}
.about-text p { color: var(--white-60, rgba(255,255,255,0.6)) !important; }
.about-text li { color: var(--white-60, rgba(255,255,255,0.6)) !important; }

.unfccc-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(46,125,140,0.2), rgba(30,90,104,0.25)) !important;
  border: 1px solid rgba(46,125,140,0.4) !important;
  border-radius: 12px !important;
  padding: 12px 16px;
  margin-bottom: 1.5rem;
}
.unfccc-badge i { color: var(--gold) !important; font-size: 1.5rem; }
.unfccc-badge h4 { color: var(--white-90) !important; margin: 0; font-size: 0.95rem; }
.unfccc-badge p { color: var(--white-50) !important; margin: 0; font-size: 0.8rem; }

.mission-statement {
  background: linear-gradient(135deg, rgba(46,125,140,0.12), rgba(230,165,55,0.08)) !important;
  border-left: 3px solid var(--teal) !important;
  border-radius: 0 12px 12px 0 !important;
  padding: 1rem 1.5rem !important;
  color: var(--white-70) !important;
}
.mission-statement i { color: var(--teal-lt) !important; }

/* Values grid */
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 1rem;
}
.value-item {
  padding: 1rem !important;
  text-align: center;
}
.value-item i { color: var(--teal-lt) !important; font-size: 1.4rem; margin-bottom: 8px; }
.value-item h4 { color: var(--white-90) !important; font-size: 0.85rem !important; margin-bottom: 4px; }
.value-item p { color: var(--white-50) !important; font-size: 0.73rem !important; margin: 0; }

/* ── Experience Timeline — two-column centered layout ── */
/* Layout (width:50%, flex, margins) comes from style.css — do NOT override here */
.timeline::before {
  background: linear-gradient(180deg, rgba(46,125,140,0.75) 0%, rgba(230,165,55,0.45) 55%, transparent 100%) !important;
  width: 2px !important;
}
.timeline-item { margin-bottom: 2rem; }
.timeline-marker {
  background: linear-gradient(135deg, var(--teal), var(--gold)) !important;
  border: 3px solid rgba(255,255,255,0.15) !important;
  box-shadow: 0 0 0 5px rgba(46,125,140,0.15), 0 0 22px rgba(46,125,140,0.55) !important;
  animation: glowPulse 3s ease-in-out infinite !important;
  z-index: 2 !important;
}
.timeline-content {
  padding: 1.4rem 1.6rem !important;
}
.timeline-date {
  display: inline-block;
  background: rgba(46,125,140,0.2) !important;
  border: 1px solid rgba(46,125,140,0.35) !important;
  border-radius: 20px !important;
  padding: 3px 12px !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: var(--white-70) !important;
  margin-bottom: 10px !important;
}
.timeline-content h3 {
  color: var(--white-90) !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
}
.timeline-content h4 {
  color: var(--white-45, rgba(255,255,255,0.45)) !important;
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  margin-bottom: 12px !important;
}
.timeline-content li {
  font-size: 0.82rem !important;
  color: var(--white-60, rgba(255,255,255,0.6)) !important;
  margin-bottom: 4px;
  padding-left: 1rem;
  position: relative;
}
.timeline-content li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--teal-lt);
}

/* ── Projects ── */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.project-card { padding: 1.4rem !important; position: relative; overflow: hidden; }
.project-card.featured {
  background: linear-gradient(135deg, rgba(46,125,140,0.15), rgba(30,90,104,0.2)) !important;
  border-color: rgba(46,125,140,0.35) !important;
}
.project-card.featured::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 60%);
  pointer-events: none;
}
.project-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(46,125,140,0.2) !important;
  border: 1px solid rgba(46,125,140,0.35) !important;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.project-icon i { color: var(--teal-lt) !important; font-size: 1.1rem; }

.project-card h3 {
  color: var(--white-90) !important;
  font-size: 0.95rem !important;
  margin-bottom: 6px !important;
}
.project-date {
  display: inline-block;
  font-size: 0.72rem !important;
  color: var(--white-45, rgba(255,255,255,0.45)) !important;
  margin-bottom: 6px !important;
}
.project-badge {
  display: inline-block;
  background: rgba(230,165,55,0.15) !important;
  border: 1px solid rgba(230,165,55,0.3) !important;
  border-radius: 20px !important;
  padding: 2px 10px !important;
  font-size: 0.7rem !important;
  color: var(--gold-lt) !important;
  margin-bottom: 10px !important;
}
.project-card li {
  font-size: 0.8rem !important;
  color: var(--white-55, rgba(255,255,255,0.55)) !important;
  margin-bottom: 4px;
  padding-left: 1rem;
  position: relative;
}
.project-card li::before {
  content: '▸'; position: absolute; left: 0;
  color: var(--teal-lt);
}

/* ── Publications ── */
.publication-list, .conference-list { display: flex; flex-direction: column; gap: 12px; }
.publication-item {
  display: flex !important;
  gap: 16px !important;
  padding: 1rem 1.3rem !important;
  border-left: 3px solid rgba(46,125,140,0.5) !important;
  border-radius: 0 12px 12px 0 !important;
}
.pub-year {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: var(--teal-lt) !important;
  min-width: 44px !important;
  font-variant-numeric: tabular-nums !important;
}
.publication-item h4 { color: var(--white-85, rgba(255,255,255,0.85)) !important; font-size: 0.85rem !important; margin-bottom: 4px; }
.pub-journal { color: var(--white-40, rgba(255,255,255,0.40)) !important; font-size: 0.73rem !important; font-style: italic; }

.conference-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 0.9rem 1.2rem !important;
}
.conference-item i { color: var(--teal-lt) !important; font-size: 1.1rem; }
.conference-item h4 { color: var(--white-85, rgba(255,255,255,0.85)) !important; font-size: 0.85rem !important; }
.conference-item p { color: var(--white-45, rgba(255,255,255,0.45)) !important; font-size: 0.75rem !important; }

/* ── Education ── */
.education-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}
.education-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 1rem 1.2rem !important;
  margin-bottom: 10px !important;
}
.education-item i { color: var(--gold) !important; font-size: 1.2rem; flex-shrink: 0; }
.education-item h4 { color: var(--white-90) !important; font-size: 0.88rem !important; margin-bottom: 3px; }
.education-item p { color: var(--white-45, rgba(255,255,255,0.45)) !important; font-size: 0.75rem !important; margin: 0; }

.cert-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 0.85rem 1.1rem !important;
  margin-bottom: 8px !important;
}
.cert-item i { color: var(--teal-lt) !important; flex-shrink: 0; }
.cert-item p { color: var(--white-65, rgba(255,255,255,0.65)) !important; font-size: 0.82rem !important; margin: 0; }

/* ── Services ── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.service-card { padding: 1.5rem !important; }
.service-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.service-card:nth-child(1) .service-icon { background: rgba(39,174,96,0.2); border: 1px solid rgba(39,174,96,0.3); }
.service-card:nth-child(1) .service-icon i { color: #27AE60; }
.service-card:nth-child(2) .service-icon { background: rgba(46,125,140,0.2); border: 1px solid rgba(46,125,140,0.3); }
.service-card:nth-child(2) .service-icon i { color: var(--teal-lt); }
.service-card:nth-child(3) .service-icon { background: rgba(52,152,219,0.2); border: 1px solid rgba(52,152,219,0.3); }
.service-card:nth-child(3) .service-icon i { color: #3498DB; }
.service-card:nth-child(4) .service-icon { background: rgba(155,89,182,0.2); border: 1px solid rgba(155,89,182,0.3); }
.service-card:nth-child(4) .service-icon i { color: #9B59B6; }
.service-card:nth-child(5) .service-icon { background: rgba(230,165,55,0.2); border: 1px solid rgba(230,165,55,0.3); }
.service-card:nth-child(5) .service-icon i { color: var(--gold); }
.service-card:nth-child(6) .service-icon { background: rgba(231,76,60,0.2); border: 1px solid rgba(231,76,60,0.3); }
.service-card:nth-child(6) .service-icon i { color: #E74C3C; }

.service-card h3 { color: var(--white-90) !important; font-size: 1rem !important; margin-bottom: 0.8rem !important; }
.service-card li { color: var(--white-55, rgba(255,255,255,0.55)) !important; font-size: 0.8rem !important; margin-bottom: 4px; padding-left: 1rem; position: relative; }
.service-card li::before { content: '▸'; position: absolute; left: 0; color: var(--teal-lt); }

/* ── Contact ── */
.contact-content {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 2.5rem;
  align-items: start;
}

.contact-info h3 { color: var(--white-90) !important; font-family: 'Playfair Display', serif !important; margin-bottom: 1.2rem; }

.contact-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--glass) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 14px !important;
  padding: 0.9rem 1.2rem !important;
  margin-bottom: 10px;
}
.contact-item > i {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(46,125,140,0.2);
  border: 1px solid rgba(46,125,140,0.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--teal-lt) !important;
  font-size: 0.9rem;
  flex-shrink: 0;
  padding: 0;
  line-height: 38px;
  text-align: center;
}
.contact-item h4 { color: var(--white-40, rgba(255,255,255,0.40)) !important; font-size: 0.7rem !important; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 3px; }
.contact-item p, .contact-item a { color: var(--white-75, rgba(255,255,255,0.75)) !important; font-size: 0.85rem !important; margin: 0; text-decoration: none; }
.contact-item a:hover { color: var(--teal-lt) !important; }

/* Contact form wrapper */
.contact-form-wrapper {
  background: var(--glass-md) !important;
  backdrop-filter: var(--blur-md) !important;
  border: 1px solid var(--glass-border-md) !important;
  border-radius: 20px !important;
  padding: 2rem !important;
}
.contact-form-wrapper h3 {
  color: var(--white-90) !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin-bottom: 1.2rem !important;
  font-family: 'Playfair Display', serif !important;
}

/* Form fields */
.form-group { margin-bottom: 14px; }
.form-group label {
  display: block;
  font-size: 0.73rem !important;
  font-weight: 600 !important;
  color: var(--white-40, rgba(255,255,255,0.40)) !important;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 11px 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: rgba(255,255,255,0.05) !important;
  color: var(--white-90) !important;
  font-family: inherit;
  font-size: 0.88rem !important;
  outline: none;
  transition: all 0.25s;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--white-30, rgba(255,255,255,0.30)) !important; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: rgba(46,125,140,0.7) !important;
  background: rgba(46,125,140,0.08) !important;
  box-shadow: 0 0 0 3px rgba(46,125,140,0.12) !important;
}
.form-group select option { background: #0d2d3f !important; }
.checkbox-group label { text-transform: none !important; letter-spacing: normal !important; font-size: 0.8rem !important; color: var(--white-55, rgba(255,255,255,0.55)) !important; }

/* WhatsApp button */
.whatsapp-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, rgba(37,211,102,0.85), rgba(18,140,126,0.9)) !important;
  color: white !important;
  padding: 9px 20px !important;
  border-radius: 30px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  margin-top: 10px !important;
  transition: all 0.3s !important;
  box-shadow: 0 4px 20px rgba(37,211,102,0.25) !important;
}
.whatsapp-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(37,211,102,0.35) !important;
}

/* ── Footer ── */
.footer {
  background: rgba(4,14,20,0.9) !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  backdrop-filter: var(--blur-sm);
}
.footer h3, .footer h4 { color: var(--white-90) !important; }
.footer p, .footer li, .footer a { color: var(--white-45, rgba(255,255,255,0.45)) !important; font-size: 0.82rem !important; }
.footer a:hover { color: var(--teal-lt) !important; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  color: var(--white-25, rgba(255,255,255,0.25)) !important;
}
.footer-bottom p { color: var(--white-25, rgba(255,255,255,0.25)) !important; }

/* ── Scroll Top ── */
.scroll-top {
  background: var(--glass-strong) !important;
  backdrop-filter: var(--blur-sm);
  border: 1px solid var(--glass-border-md) !important;
  color: var(--white-90) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}
.scroll-top:hover {
  background: rgba(46,125,140,0.3) !important;
  transform: translateY(-3px) !important;
}

/* ── Chatbot ── */
.chatbot-button {
  background: linear-gradient(135deg, var(--teal), #1E5A68) !important;
  box-shadow: 0 4px 20px rgba(46,125,140,0.4) !important;
}
.chatbot-window {
  background: rgba(7,24,32,0.95) !important;
  backdrop-filter: var(--blur-lg) !important;
  border: 1px solid var(--glass-border-md) !important;
}

/* ── Lead text ── */
.lead-text {
  color: var(--white-75, rgba(255,255,255,0.75)) !important;
  font-size: 1rem !important;
  line-height: 1.8 !important;
}

/* ── Section divider ── */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  margin: 0;
}

/* ── Animations on scroll (Intersection Observer) ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── RTL overrides for glass theme ── */
html[dir="rtl"] body { font-family: 'Cairo', 'Inter', sans-serif; }
html[dir="rtl"] .hero-content { flex-direction: row-reverse; }
/* RTL: single-column from right side (cleaner for Arabic) */
html[dir="rtl"] .timeline { padding-left: 0 !important; padding-right: 2.5rem !important; }
html[dir="rtl"] .timeline::before { left: auto !important; right: 10px !important; transform: none !important; background: linear-gradient(180deg, rgba(46,125,140,0.75) 0%, rgba(230,165,55,0.45) 55%, transparent 100%) !important; width: 2px !important; }
html[dir="rtl"] .timeline-item { display: block !important; width: auto !important; padding-left: 0 !important; justify-content: unset !important; margin-left: 0 !important; margin-right: 0 !important; }
html[dir="rtl"] .timeline-item:nth-child(even) { margin-left: 0 !important; margin-right: 0 !important; align-self: unset !important; }
html[dir="rtl"] .timeline-marker { left: auto !important; right: -2.1rem !important; transform: none !important; }
html[dir="rtl"] .timeline-content { margin-left: 0 !important; margin-right: 0 !important; }
html[dir="rtl"] .timeline-item:nth-child(even) .timeline-content { margin-left: 0 !important; margin-right: 0 !important; }
html[dir="rtl"] .timeline-content li { padding-left: 0; padding-right: 1rem; }
html[dir="rtl"] .timeline-content li::before { left: auto; right: 0; }
html[dir="rtl"] .publication-item { border-left: none !important; border-right: 3px solid rgba(46,125,140,0.5) !important; border-radius: 12px 0 0 12px !important; }
html[dir="rtl"] .mission-statement { border-left: none !important; border-right: 3px solid var(--teal) !important; border-radius: 12px 0 0 12px !important; }
html[dir="rtl"] .project-card li { padding-left: 0; padding-right: 1rem; }
html[dir="rtl"] .project-card li::before { left: auto; right: 0; }
html[dir="rtl"] .service-card li { padding-left: 0; padding-right: 1rem; }
html[dir="rtl"] .service-card li::before { left: auto; right: 0; }

/* ================================================================
   UNIVERSAL GLASS CONSISTENCY — Page-Specific Overrides
   Fixes white/light backgrounds and dark text across all pages
   ================================================================ */

/* ── Override light-mode CSS variables for dark glass ── */
:root {
  --background-white: rgba(255,255,255,0.04);
  --background-light: rgba(255,255,255,0.05);
  --background-alt:   rgba(255,255,255,0.07);
  --text-secondary:   rgba(255,255,255,0.68);
  --text-light:       rgba(255,255,255,0.50);
  --text-gray:        rgba(255,255,255,0.60);
  --shadow-sm:        0 4px 16px rgba(0,0,0,0.32);
  --shadow-md:        0 8px 32px rgba(0,0,0,0.42);
}

/* ── Cards & section wrappers: white → glass ── */
.article-card,
.gallery-content,
.cert-content,
.comment-form-wrapper,
.audience-card,
.step-content,
.selection-card,
.stat-card,
.calculations-section,
.profile-section {
  background: var(--glass-md) !important;
  backdrop-filter: var(--blur-md) !important;
  -webkit-backdrop-filter: var(--blur-md) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35) !important;
  color: var(--white-90) !important;
}

/* Featured cert: subtle gold tint */
.cert-item.featured .cert-content {
  background: rgba(230,165,55,0.08) !important;
  border-color: rgba(230,165,55,0.25) !important;
  border-left: 3px solid rgba(230,165,55,0.55) !important;
}

/* ── Comment items ── */
.comment-item {
  background: var(--glass) !important;
  border: 1px solid var(--glass-border) !important;
}

/* ── Like button ── */
.like-btn {
  background: var(--glass) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--white-70) !important;
}
.like-btn.liked {
  background: rgba(46,125,140,0.20) !important;
  border-color: rgba(46,125,140,0.45) !important;
  color: var(--teal-lt) !important;
}

/* ── Filter buttons (articles page) ── */
.filter-btn {
  background: var(--glass) !important;
  color: var(--white-70) !important;
  border: 1px solid var(--glass-border) !important;
}
.filter-btn:hover,
.filter-btn.active {
  background: rgba(46,125,140,0.28) !important;
  color: var(--white-90) !important;
  border-color: rgba(46,125,140,0.50) !important;
}

/* ── Example cards (service pages) ── */
.example-card {
  background: var(--glass) !important;
  backdrop-filter: var(--blur-sm) !important;
  -webkit-backdrop-filter: var(--blur-sm) !important;
  border: 1px solid var(--glass-border) !important;
  border-left: 4px solid rgba(46,125,140,0.55) !important;
}

/* ── Progress (CFP calculator) ── */
.progress-circle {
  background: var(--glass) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: var(--white-50) !important;
}
.progress-step.active .progress-circle {
  background: var(--teal) !important;
  border-color: var(--teal) !important;
  color: #fff !important;
}
.progress-step.completed .progress-circle {
  background: rgba(22,160,133,0.75) !important;
  border-color: rgba(22,160,133,0.75) !important;
  color: #fff !important;
}
.progress-container::before { background: rgba(255,255,255,0.10) !important; }
.progress-label { color: var(--white-50) !important; }
.progress-step.active .progress-label { color: var(--white-90) !important; font-weight: 600; }

/* ── Selection cards (CFP calculator) ── */
.selection-card:hover {
  border-color: rgba(46,125,140,0.55) !important;
  background: rgba(46,125,140,0.12) !important;
  box-shadow: 0 8px 25px rgba(46,125,140,0.20) !important;
}
.selection-card.selected {
  border-color: var(--teal) !important;
  background: rgba(46,125,140,0.16) !important;
}

/* ── Timeline markers (gallery/certs) ── */
.gallery-marker { border-color: rgba(255,255,255,0.18) !important; }
.cert-marker    { border-color: rgba(255,255,255,0.18) !important; }

/* ── Cert credential badge ── */
.cert-credential {
  background: rgba(46,125,140,0.12) !important;
  color: var(--teal-lt) !important;
  border: 1px solid rgba(46,125,140,0.24) !important;
  font-family: 'Inter', sans-serif !important;
}

/* ── Tags & article tags ── */
.article-tag,
.tag {
  background: rgba(46,125,140,0.18) !important;
  color: var(--teal-lt) !important;
  border: 1px solid rgba(46,125,140,0.30) !important;
}

/* ── Article/gallery footer & list dividers ── */
.article-footer { border-top-color: var(--glass-border) !important; }
.service-list li { border-bottom-color: rgba(255,255,255,0.08) !important; }

/* ── Table styling (dashboard) ── */
thead { background: rgba(46,125,140,0.14) !important; }
th { color: var(--white-90) !important; font-weight: 600; }
td {
  color: var(--white-70) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}
tbody tr:hover { background: var(--glass) !important; }
.badge-ipcc      { background: rgba(25,118,210,0.18)  !important; color: #90caf9 !important; }
.badge-iso       { background: rgba(123,31,162,0.18)  !important; color: #ce93d8 !important; }
.badge-ghg       { background: rgba(56,142,60,0.18)   !important; color: #a5d6a7 !important; }
.badge-generated { background: rgba(46,125,140,0.18)  !important; color: var(--teal-lt) !important; }
.badge-outdated  { background: rgba(230,165,55,0.18)  !important; color: #f4c266 !important; }
.badge-none      { background: rgba(220,53,69,0.18)   !important; color: #f1aeb5 !important; }

/* ── Chart cards (dashboard) ── */
.chart-card {
  background: var(--glass-md) !important;
  backdrop-filter: var(--blur-md) !important;
  -webkit-backdrop-filter: var(--blur-md) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35) !important;
}
.chart-card h3 { color: var(--white-90) !important; }

/* ── Pagination buttons ── */
.pagination button {
  background: var(--glass) !important;
  color: var(--teal-lt) !important;
  border-color: rgba(46,125,140,0.40) !important;
}
.pagination button:hover:not(:disabled) {
  background: rgba(46,125,140,0.30) !important;
  color: var(--white-90) !important;
}

/* ── Heading colors inside glass cards ── */
.article-content h3,
.gallery-info h3,
.cert-content h3,
.comment-form-wrapper h4,
.comments-heading,
.comment-author-name,
.step-title,
.form-section h4,
.calculations-header h2,
.stat-card h3,
.service-section h2,
.example-card h4,
.selection-card h3,
.dashboard-hero h1 {
  color: var(--white-90) !important;
}
.profile-section h2 { color: var(--teal-lt) !important; }
.article-excerpt,
.gallery-info p,
.comment-text,
.step-description,
.selection-card p { color: var(--white-70) !important; }

/* ── Form elements — glass style ── */
.form-group label { color: var(--white-70) !important; }
.form-group input,
.form-group select,
.form-group textarea {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: var(--white-90) !important;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: rgba(46,125,140,0.60) !important;
  box-shadow: 0 0 0 3px rgba(46,125,140,0.15) !important;
  background: rgba(255,255,255,0.09) !important;
}
.form-group input:disabled {
  background: rgba(255,255,255,0.03) !important;
  color: var(--white-35) !important;
  cursor: not-allowed;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--white-35) !important; opacity: 1; }

/* ── Map modal (CFP calculator) ── */
.map-modal-content {
  background: rgba(7,24,32,0.97) !important;
  border: 1px solid var(--glass-border-md) !important;
}

/* ── User dropdown hover ── */
body .user-dropdown a:hover,
body .user-dropdown button:hover {
  background: var(--glass-md) !important;
  color: var(--white-90) !important;
}

/* ── Profile password strength indicators ── */
.strength-weak   { background: rgba(211,47,47,0.14)  !important; color: #ef9a9a !important; }
.strength-medium { background: rgba(245,124,0,0.14)  !important; color: #ffcc80 !important; }
.strength-strong { background: rgba(56,142,60,0.14)  !important; color: #a5d6a7 !important; }
.danger-zone-content {
  background: rgba(220,53,69,0.08) !important;
  border-color: rgba(220,53,69,0.45) !important;
}

/* ── Household/Profile page wrappers ── */
.household-page,
.profile-page { background: transparent !important; }
.calculator-section,
.results-section,
.recommendation-item {
  background: var(--glass-md) !important;
  backdrop-filter: var(--blur-md) !important;
  -webkit-backdrop-filter: var(--blur-md) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35) !important;
}
.comparison-item,
.breakdown-card {
  background: var(--glass) !important;
  border: 1px solid var(--glass-border) !important;
}
.breakdown-card { border-left: 4px solid rgba(46,125,140,0.55) !important; }
.breakdown-card h4,
.recommendation-item h4 { color: var(--white-90) !important; }
.recommendation-item p,
.comparison-item .label { color: var(--white-70) !important; }

/* ── Font consistency across all interactive elements ── */
input, textarea, select, button {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] button {
  font-family: 'Cairo', 'Inter', sans-serif !important;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .hero-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 5rem 1.5rem 4rem;
    gap: 2rem;
  }
  html[dir="rtl"] .hero-content { flex-direction: column; }
  .credentials-strip { justify-content: center; }
  .hero-buttons { justify-content: center; }
  .hero-description { margin: 0 auto 22px; }
  .contact-content { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .profile-photo { width: 220px !important; height: auto !important; }
  .hero-title { font-size: 1.85rem !important; }
  .projects-grid, .services-grid { grid-template-columns: 1fr; }
  .education-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-form-wrapper { padding: 1.4rem !important; }
}

/* ── Ambient mouse-glow overlay (injected by background.js) ── */
#ambient-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  will-change: background;
  /* transition handled by rAF lerp in JS — no CSS transition needed */
}

/* ── Reduced motion: disable all animations ── */
@media (prefers-reduced-motion: reduce) {
  .glass-orb             { animation: none !important; }
  body::after            { animation: none !important; }
  #ambient-glow          { display: none !important; }
  .reveal                { transition: none !important; }
}

/* ===== Phase 3: Article styles ===== */

/* Rich-text content rendered from Quill */
.article-body h2,
.article-body h3,
.article-body h4 {
    color: var(--secondary, #E6A537);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    line-height: 1.35;
}
.article-body p { line-height: 1.8; margin-bottom: 1rem; }
.article-body ul,
.article-body ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.article-body li { margin-bottom: 0.4rem; line-height: 1.7; }
.article-body blockquote {
    border-left: 3px solid var(--secondary, #E6A537);
    padding-left: 1rem;
    margin: 1.5rem 0;
    color: rgba(255,255,255,0.7);
    font-style: italic;
}
.article-body code {
    background: rgba(255,255,255,0.08);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}
.article-body pre {
    background: rgba(0,0,0,0.3);
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin-bottom: 1rem;
}
.article-body pre code { background: none; padding: 0; }
.article-body a { color: var(--secondary, #E6A537); text-decoration: underline; }
.article-body a:hover { opacity: 0.8; }
.article-body img {
    max-width: 100%;
    border-radius: 8px;
    margin: 1rem 0;
}
.article-body strong { color: inherit; font-weight: 700; }

/* Clickable tag badge */
.article-tag--link,
.article-view-tag--link {
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.article-tag--link:hover,
.article-view-tag--link:hover {
    background: var(--primary-color, #2E7D8C);
    color: #fff;
}

/* Reading time chip */
.reading-time {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    color: var(--text-light, #888);
}
.reading-time i { font-size: 0.78rem; }

/* Featured ribbon on article card image */
.featured-ribbon {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--secondary, #E6A537);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    letter-spacing: 0.4px;
    pointer-events: none;
}
.featured-ribbon i { margin-right: 0.25rem; font-size: 0.7rem; }