:root {
  --ui-bg: #f2f5f9;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f8fbff;
  --ui-border: rgba(15, 23, 42, 0.1);
  --ui-text: #11243d;
  --ui-muted: #53657f;
  --ui-brand: #1f6fe5;
  --ui-brand-2: #0ea5e9;
  --ui-glow: rgba(31, 111, 229, 0.24);
  --ui-radius: 16px;
  --ui-shadow: 0 16px 38px rgba(15, 23, 42, 0.1);
}

body {
  background:
    radial-gradient(1200px 560px at 95% -15%, rgba(31, 111, 229, 0.12), transparent 70%),
    radial-gradient(900px 400px at -10% 8%, rgba(14, 165, 233, 0.08), transparent 68%),
    var(--ui-bg) !important;
  color: var(--ui-text) !important;
}

.hero,
.about-hero,
.services-hero,
.sustainability-hero,
.contact-hero,
.terminals-hero,
.terminal-hero {
  min-height: clamp(66vh, 74vh, 84vh) !important;
  padding-top: clamp(6.2rem, 8vw, 8.6rem) !important;
  padding-bottom: clamp(3.2rem, 5vw, 4.6rem) !important;
  position: relative;
  isolation: isolate;
}

.hero::before,
.about-hero::before,
.services-hero::before,
.sustainability-hero::before,
.contact-hero::before,
.terminals-hero::before,
.terminal-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(160deg, rgba(3, 11, 28, 0.62) 0%, rgba(7, 24, 53, 0.42) 44%, rgba(5, 14, 34, 0.62) 100%);
}

.hero-content,
.about-hero-content,
.services-hero-content,
.sustainability-hero-content,
.contact-hero-content,
.terminals-hero-content,
.terminal-hero-content {
  max-width: min(760px, 100%);
  margin-inline: auto;
  padding: clamp(1.3rem, 2vw, 2rem) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08)) !important;
  box-shadow: 0 20px 56px rgba(2, 8, 23, 0.36);
  backdrop-filter: blur(10px);
  text-align: center;
}

.hero-content h1,
.about-hero-content h1,
.services-hero-content h1,
.sustainability-hero-content h1,
.contact-hero-content h1,
.terminals-hero-content h1,
.terminal-hero-content h1 {
  color: #f7fbff !important;
  font-size: clamp(2rem, 4vw, 3.5rem) !important;
  line-height: 1.1 !important;
  margin-bottom: 0.9rem !important;
  letter-spacing: -0.03em !important;
}

.hero-content .lead,
.about-hero-content .lead,
.services-hero-content .lead,
.sustainability-hero-content .lead,
.contact-hero-content .lead,
.terminals-hero-content .lead,
.terminal-hero-content .lead,
.hero-content p,
.about-hero-content p,
.services-hero-content p,
.sustainability-hero-content p,
.contact-hero-content p,
.terminals-hero-content p,
.terminal-hero-content p {
  color: rgba(242, 248, 255, 0.94) !important;
  max-width: 62ch;
  margin-inline: auto;
}

.section-header h2 {
  font-size: clamp(1.55rem, 3vw, 2.35rem) !important;
  margin-bottom: 0.5rem !important;
}

.section-header .lead {
  color: var(--ui-muted) !important;
  max-width: 64ch;
  margin-inline: auto;
}

.card,
.service-card,
.terminal-card,
.overview-card,
.stats-card,
.network-card,
.contact-card,
.form-container,
.contact-form-container,
.info-card,
.feature-card,
.timeline-card,
.initiative-content-inner,
.commitment-card,
.certification-card,
.stat-card,
.co2-stat {
  border-radius: var(--ui-radius) !important;
  border: 1px solid var(--ui-border) !important;
  background: linear-gradient(165deg, #ffffff, var(--ui-surface-soft)) !important;
  box-shadow: var(--ui-shadow) !important;
}

.card-body,
.service-card,
.terminal-content,
.overview-card,
.stats-card,
.network-card,
.contact-card,
.form-container,
.contact-form-container,
.info-card,
.feature-card,
.timeline-card,
.initiative-content-inner,
.commitment-card,
.certification-card,
.stat-card,
.co2-stat {
  padding: 0.9rem !important;
}

.card p,
.service-card p,
.terminal-card p,
.info-card p,
.feature-card p,
.contact-card p {
  color: var(--ui-muted) !important;
}

.hero-stat-label {
  color: rgba(233, 244, 255, 0.94) !important;
  text-shadow: 0 1px 3px rgba(2, 8, 23, 0.45) !important;
}

.card:hover,
.service-card:hover,
.terminal-card:hover,
.overview-card:hover,
.stats-card:hover,
.network-card:hover,
.contact-card:hover,
.feature-card:hover,
.info-card:hover,
.timeline-card:hover,
.commitment-card:hover,
.certification-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 22px 44px rgba(15, 23, 42, 0.16) !important;
}

.btn,
.btn-primary,
.btn-outline-primary,
.btn-outline-light,
.cta-btn,
.service-btn,
.explore-btn,
.submit-btn {
  min-height: 42px;
  border-radius: 12px !important;
}

.btn-primary,
.cta-btn,
.service-btn,
.explore-btn,
.submit-btn {
  background: linear-gradient(135deg, var(--ui-brand), var(--ui-brand-2)) !important;
  border: none !important;
  box-shadow: 0 12px 24px var(--ui-glow) !important;
}

.initiative-tabs {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  justify-content: center;
}

.initiative-tab {
  border: 1px solid rgba(31, 111, 229, 0.32) !important;
  border-radius: 10px !important;
  padding: 0.52rem 0.8rem !important;
  background: #fff !important;
  color: #214261 !important;
  transition: all 0.22s ease;
}

.initiative-tab:hover {
  border-color: rgba(31, 111, 229, 0.55) !important;
  color: #12406f !important;
}

.initiative-tab.active {
  background: linear-gradient(135deg, var(--ui-brand), var(--ui-brand-2)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 10px 24px var(--ui-glow) !important;
}

.initiative-content {
  display: none;
}

.initiative-content.active {
  display: block;
}

[data-ui-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

[data-ui-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 900px) {
  .hero-content,
  .about-hero-content,
  .services-hero-content,
  .sustainability-hero-content,
  .contact-hero-content,
  .terminals-hero-content,
  .terminal-hero-content {
    border-radius: 15px !important;
    padding: 1rem !important;
  }

  .card-body,
  .service-card,
  .terminal-content,
  .overview-card,
  .stats-card,
  .network-card,
  .contact-card,
  .form-container,
  .contact-form-container,
  .info-card,
  .feature-card,
  .timeline-card,
  .initiative-content-inner,
  .commitment-card,
  .certification-card,
  .stat-card,
  .co2-stat {
    padding: 0.8rem !important;
  }
}

/* Final readability normalization across all sections/pages */
h1, h2, h3, h4, h5, h6,
.section-header h2,
.terminal-card h3,
.service-card h3,
.info-card h3,
.feature-card h3 {
  color: #0f243d !important;
}

p, li, label, small, .lead,
.section-header .lead,
.stat-label, .overview-label,
.terminal-stat-label,
.text-muted {
  color: #3f5670 !important;
}

.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4,
.dark-section h5,
.dark-section h6,
.stats-section h1,
.stats-section h2,
.stats-section h3,
.co2-tracker-section h1,
.co2-tracker-section h2,
.co2-tracker-section h3,
.dark-section .lead,
.stats-section .lead,
.co2-tracker-section .lead,
.dark-section p,
.stats-section p,
.co2-tracker-section p,
.dark-section .text-muted,
.stats-section .text-muted,
.co2-tracker-section .text-muted,
.dark-section .stat-label,
.stats-section .stat-label,
.co2-tracker-section .stat-label {
  color: #ecf4ff !important;
}

.hero-content h1,
.about-hero-content h1,
.services-hero-content h1,
.sustainability-hero-content h1,
.contact-hero-content h1,
.terminals-hero-content h1,
.terminal-hero-content h1 {
  color: #f8fcff !important;
}

.hero-content .lead,
.about-hero-content .lead,
.services-hero-content .lead,
.sustainability-hero-content .lead,
.contact-hero-content .lead,
.terminals-hero-content .lead,
.terminal-hero-content .lead,
.hero-content p,
.about-hero-content p,
.services-hero-content p,
.sustainability-hero-content p,
.contact-hero-content p,
.terminals-hero-content p,
.terminal-hero-content p {
  color: rgba(241, 249, 255, 0.96) !important;
}

a,
.nav-link,
.dropdown-item,
.btn-outline-primary,
.btn-outline-light,
.terminal-badge,
.initiative-tab {
  color: #1f5ea8;
}

a:hover,
.nav-link:hover,
.dropdown-item:hover {
  color: #124582 !important;
}

.nav-link.active,
.dropdown-item.active,
.initiative-tab.active,
.btn-primary,
.cta-btn,
.service-btn,
.explore-btn,
.submit-btn {
  color: #ffffff !important;
}

.terminal-badge,
.badge,
[class*="badge"] {
  filter: saturate(1.08) contrast(1.06);
}

/* Permanent contrast + hero responsiveness stabilization */
.hero-content,
.about-hero-content,
.services-hero-content,
.sustainability-hero-content,
.contact-hero-content,
.terminals-hero-content,
.terminal-hero-content {
  position: relative;
  z-index: 1;
}

/* Home hero: dark media-friendly contrast */
.hero-content {
  background: linear-gradient(150deg, rgba(4, 12, 30, 0.78), rgba(6, 19, 44, 0.62)) !important;
  border-color: rgba(148, 163, 184, 0.32) !important;
}
.hero-content h1 {
  color: #f8fcff !important;
  text-shadow: 0 2px 12px rgba(2, 8, 23, 0.58) !important;
}
.hero-content .lead,
.hero-content p,
.hero-stat-label {
  color: rgba(232, 243, 255, 0.96) !important;
  text-shadow: 0 1px 6px rgba(2, 8, 23, 0.48) !important;
}

/* Content heroes: bright panel + dark readable text */
.about-hero-content,
.services-hero-content,
.sustainability-hero-content,
.contact-hero-content {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.9), rgba(247, 251, 255, 0.78)) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
}
.about-hero-content h1,
.services-hero-content h1,
.sustainability-hero-content h1,
.contact-hero-content h1 {
  color: #10263f !important;
  text-shadow: none !important;
}
.about-hero-content .lead,
.services-hero-content .lead,
.sustainability-hero-content .lead,
.contact-hero-content .lead,
.about-hero-content p,
.services-hero-content p,
.sustainability-hero-content p,
.contact-hero-content p {
  color: #2f4965 !important;
  text-shadow: none !important;
}

/* Terminal heroes stay dark for image-heavy headers */
.terminals-hero-content,
.terminal-hero-content {
  background: linear-gradient(150deg, rgba(5, 15, 37, 0.74), rgba(7, 20, 46, 0.58)) !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
}
.terminals-hero-content h1,
.terminal-hero-content h1 {
  color: #f6fbff !important;
  text-shadow: 0 2px 10px rgba(2, 8, 23, 0.56) !important;
}
.terminals-hero-content .lead,
.terminals-hero-content p,
.terminal-hero-content .lead,
.terminal-hero-content p {
  color: rgba(232, 243, 255, 0.94) !important;
}

/* Keep non-hero text readable without over-brightening */
section:not(.hero):not(.about-hero):not(.services-hero):not(.sustainability-hero):not(.contact-hero):not(.terminals-hero):not(.terminal-hero) p,
section:not(.hero):not(.about-hero):not(.services-hero):not(.sustainability-hero):not(.contact-hero):not(.terminals-hero):not(.terminal-hero) li,
section:not(.hero):not(.about-hero):not(.services-hero):not(.sustainability-hero):not(.contact-hero):not(.terminals-hero):not(.terminal-hero) .lead,
section:not(.hero):not(.about-hero):not(.services-hero):not(.sustainability-hero):not(.contact-hero):not(.terminals-hero):not(.terminal-hero) .text-muted {
  color: #415a75 !important;
}

/* Homepage hero responsiveness */
@media (max-width: 1100px) {
  .hero {
    min-height: clamp(60vh, 72vh, 80vh) !important;
    padding-top: clamp(5.5rem, 10vw, 7.2rem) !important;
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: clamp(54vh, 64vh, 72vh) !important;
    padding-top: clamp(4.8rem, 12vw, 6.4rem) !important;
    padding-bottom: clamp(2.6rem, 8vw, 3.3rem) !important;
  }
  .hero-content,
  .about-hero-content,
  .services-hero-content,
  .sustainability-hero-content,
  .contact-hero-content,
  .terminals-hero-content,
  .terminal-hero-content {
    max-width: min(680px, 100%);
    padding: 1rem !important;
  }
  .hero-content h1,
  .about-hero-content h1,
  .services-hero-content h1,
  .sustainability-hero-content h1,
  .contact-hero-content h1,
  .terminals-hero-content h1,
  .terminal-hero-content h1 {
    font-size: clamp(1.5rem, 6.2vw, 2.1rem) !important;
    line-height: 1.16 !important;
  }
}

@media (max-width: 480px) {
  .hero-content .lead,
  .about-hero-content .lead,
  .services-hero-content .lead,
  .sustainability-hero-content .lead,
  .contact-hero-content .lead,
  .terminals-hero-content .lead,
  .terminal-hero-content .lead {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    max-width: 44ch !important;
  }
}