/* ==========================================================================
   Dark Theme — Overrides for [data-theme="dark"]
   Based on brand-guide/06-dark-theme-guide.md
   ========================================================================== */

/* ==========================================================================
   Section 1: Token Overrides
   ========================================================================== */

html[data-theme="dark"] {
  /* ---- Color token overrides ---- */
  --cream: #1A2332;
  /* NOTE: --white is NOT overridden globally because it's used for text color
     in buttons, nav links, hero text, footer, etc. Instead, components that
     need the elevated surface background use explicit rgba values. */
  --dark-surface: rgba(255, 255, 255, 0.05);

  /* ---- Shadow overrides (black-based instead of Deep Teal) ---- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
  --shadow-glow-coral: 0 0 30px rgba(244, 132, 95, 0.2);
}


/* ==========================================================================
   Section 2: Base Overrides
   ========================================================================== */

html[data-theme="dark"] body {
  background-color: #1A2332;
  color: rgba(255, 255, 255, 0.85);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
  color: #FBCF9A;
}

html[data-theme="dark"] ::selection {
  background-color: rgba(42, 157, 143, 0.4);
  color: #FFFFFF;
}

html[data-theme="dark"] .link {
  color: #4A6FA5;
}

html[data-theme="dark"] .link:hover {
  color: #F9A68C;
}

html[data-theme="dark"] .feature-icon__label {
  color: rgba(255, 255, 255, 0.6);
}


/* ==========================================================================
   Section 3: Layout Overrides
   ========================================================================== */

/* ---- Header ---- */
html[data-theme="dark"] .header {
  background: rgba(26, 35, 50, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(140, 180, 160, 0.18);
}

html[data-theme="dark"] .header--scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* ---- Header Brand ---- */
html[data-theme="dark"] .header__brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  color: white;
  min-width: max-content;
}

html[data-theme="dark"] .header__brand-mark {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(244, 132, 95, 0.22), rgba(140, 180, 160, 0.18));
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.04);
  font-weight: 700;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: var(--amber-light);
}

html[data-theme="dark"] .header__brand-text {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 1.05rem;
}

/* ---- Header Nav Links (Pill Style) ---- */
html[data-theme="dark"] .header__nav {
  align-items: center;
  gap: 0.4rem;
}

@media (min-width: 768px) {
  html[data-theme="dark"] .header__nav {
    display: flex;
  }
}

html[data-theme="dark"] .header__nav-link {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.7rem 0.9rem;
  border-radius: 999px;
  transition: 180ms ease;
  position: relative;
}

html[data-theme="dark"] .header__nav-link::after {
  display: none;
}

html[data-theme="dark"] .header__nav-link:hover {
  color: #FFFFFF;
  background: rgba(140, 180, 160, 0.12);
}

html[data-theme="dark"] .header__nav-link--active {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .header__nav-link--active::after {
  display: block;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.32rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--coral), var(--amber));
}

/* ---- Header Dropdown Nav ---- */
html[data-theme="dark"] .header__nav-item--dropdown {
  position: relative;
}

@media (min-width: 768px) {
  html[data-theme="dark"] .header__nav-item--dropdown > .header__nav-link::after {
    display: inline-block;
    content: "▾";
    position: static;
    width: auto;
    height: auto;
    background: none;
    margin-left: 0.3rem;
    font-size: 0.75em;
    opacity: 0.6;
    border-radius: 0;
  }
}

@media (max-width: 767px) {
  html[data-theme="dark"] .header__dropdown {
    display: none;
  }
}

html[data-theme="dark"] .header__dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: rgba(26, 35, 50, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(140, 180, 160, 0.18);
  border-radius: 16px;
  padding: 0.5rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms ease;
  z-index: 200;
}

html[data-theme="dark"] .header__nav-item--dropdown:hover .header__dropdown,
html[data-theme="dark"] .header__nav-item--dropdown:focus-within .header__dropdown {
  opacity: 1;
  visibility: visible;
}

html[data-theme="dark"] .header__dropdown-link {
  display: block;
  padding: 0.65rem 1rem;
  color: rgba(255, 255, 255, 0.68);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 10px;
  transition: 150ms ease;
}

html[data-theme="dark"] .header__dropdown-link:hover {
  color: #FFFFFF;
  background: rgba(140, 180, 160, 0.12);
}

/* ---- Header Meta Link ---- */
html[data-theme="dark"] .header__meta-link {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.85rem;
  text-decoration: none;
  transition: color 150ms ease;
}

html[data-theme="dark"] .header__meta-link:hover {
  color: #FFFFFF;
}

/* ---- Mobile Nav ---- */
html[data-theme="dark"] .mobile-nav {
  background: var(--gradient-night);
}

html[data-theme="dark"] .mobile-nav__link {
  color: #FFFFFF;
}

/* ---- Sections ---- */
html[data-theme="dark"] .section--cream {
  background-color: #1A2332;
}

html[data-theme="dark"] .section--warm-light {
  background: rgba(140, 180, 160, 0.04);
}

html[data-theme="dark"] .section--amber {
  background-color: rgba(247, 178, 103, 0.08);
}

/* ---- Wave Dividers ---- */
html[data-theme="dark"] .wave-divider--coral-to-cream svg {
  color: #1A2332;
}

html[data-theme="dark"] .wave-divider--cream-to-warm svg {
  color: #1A2332;
}

html[data-theme="dark"] .wave-divider--warm-to-cream svg {
  color: #1A2332;
}

html[data-theme="dark"] .wave-divider--cream-to-amber svg {
  color: rgba(247, 178, 103, 0.08);
}

html[data-theme="dark"] .wave-divider--amber-to-teal svg {
  color: var(--deep-teal);
}

html[data-theme="dark"] .wave-divider--to-teal svg {
  color: var(--deep-teal);
}

html[data-theme="dark"] .wave-divider--to-cream svg {
  color: #1A2332;
}

html[data-theme="dark"] .wave-divider--cream-to-teal svg {
  color: var(--deep-teal);
}

/* Wave divider inline background overrides */
html[data-theme="dark"] .wave-divider[style*="background:var(--coral)"] {
  background: var(--gradient-night) !important;
}

html[data-theme="dark"] .wave-divider[style*="background:var(--cream)"] {
  background: #1A2332 !important;
}

html[data-theme="dark"] .wave-divider[style*="background:var(--amber-light)"] {
  background: rgba(247, 178, 103, 0.08) !important;
}

html[data-theme="dark"] .wave-divider[style*="background:var(--deep-teal)"] {
  background: var(--deep-teal) !important;
}

html[data-theme="dark"] .wave-divider[style*="background:var(--teal-dark)"] {
  background: var(--deep-teal) !important;
}

html[data-theme="dark"] .wave-divider[style*="background:linear-gradient"] {
  background: #1A2332 !important;
}

/* ---- Content Block Images ---- */
html[data-theme="dark"] .content-block__image img {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}


/* ==========================================================================
   Section 4: Component Overrides
   ========================================================================== */

/* ---- Buttons ---- */
html[data-theme="dark"] .btn--primary,
html[data-theme="dark"] .btn--cta {
  color: #FFFFFF;
}

html[data-theme="dark"] .header .header__actions .btn--primary {
  padding: 0.5rem 1.25rem;
  font-size: 0.85rem;
}

/* Language switcher */
html[data-theme="dark"] .header__lang-switch {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  transition: color 200ms ease, border-color 200ms ease;
}

html[data-theme="dark"] .header__lang-switch:hover {
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.5);
}

html[data-theme="dark"] .btn--outline {
  border-color: rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
  background: transparent;
}

html[data-theme="dark"] .btn--outline:hover {
  border-color: var(--teal);
  background: rgba(42, 157, 143, 0.1);
  box-shadow: 0 0 20px rgba(42, 157, 143, 0.15);
}

html[data-theme="dark"] .btn--white {
  background: rgba(140, 180, 160, 0.15);
  color: #FFFFFF;
  border: 1px solid rgba(140, 180, 160, 0.3);
}

html[data-theme="dark"] .btn--white:hover {
  background: rgba(140, 180, 160, 0.25);
  box-shadow: 0 0 20px rgba(42, 157, 143, 0.15);
}

/* ---- Cards ---- */
html[data-theme="dark"] .card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(140, 180, 160, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .card:hover {
  border-color: rgba(42, 157, 143, 0.4);
  box-shadow: 0 0 20px rgba(42, 157, 143, 0.15), 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* ---- Testimonial Cards ---- */
html[data-theme="dark"] .testimonial-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(140, 180, 160, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .testimonial-card__author {
  color: var(--sage);
}

/* ---- Small Testimonials ---- */
html[data-theme="dark"] .testimonial-small {
  background: var(--dark-surface);
  border-color: rgba(140, 180, 160, 0.15);
}

html[data-theme="dark"] .testimonial-small__source {
  color: var(--sage);
}

/* ---- Step Cards ---- */
html[data-theme="dark"] .step-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(140, 180, 160, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ---- Pricing Cards ---- */
html[data-theme="dark"] .pricing-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(140, 180, 160, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .pricing-card--featured {
  border-color: var(--coral);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .pricing-card__price {
  color: #FBCF9A;
}

html[data-theme="dark"] .pricing-card__feature--highlight {
  color: var(--sage);
}

/* ---- Option Cards ---- */
html[data-theme="dark"] .option-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(140, 180, 160, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .option-card__price {
  color: var(--sage);
}

/* ---- Forms ---- */
html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .form-group textarea {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
}

html[data-theme="dark"] .form-group input::placeholder,
html[data-theme="dark"] .form-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

html[data-theme="dark"] .form-group input:focus,
html[data-theme="dark"] .form-group textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 12px rgba(42, 157, 143, 0.2);
}

html[data-theme="dark"] .form-group label {
  color: rgba(255, 255, 255, 0.85);
}

/* 2-column contact grid for demo page */
html[data-theme="dark"] .contact__grid--wide {
  max-width: 900px;
  grid-template-columns: 1fr 2fr;
}

html[data-theme="dark"] .contact__sidebar {
  position: sticky;
  top: 6rem;
  align-self: start;
}

@media (max-width: 768px) {
  html[data-theme="dark"] .contact__grid--wide {
    grid-template-columns: 1fr;
  }
}

/* Option cards for checkboxes and radios */
html[data-theme="dark"] .form-group--options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

html[data-theme="dark"] .option-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
  transition: border-color 200ms ease, background 200ms ease;
}

html[data-theme="dark"] .option-card:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .option-card input {
  accent-color: var(--teal);
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
}

/* Scale dots (1-5 rating) */
html[data-theme="dark"] .form-scale {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.75rem;
}

html[data-theme="dark"] .form-scale__label {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
}

html[data-theme="dark"] .form-scale__dots {
  display: flex;
  gap: 0.75rem;
}

html[data-theme="dark"] .form-scale__dot {
  cursor: pointer;
}

html[data-theme="dark"] .form-scale__dot input {
  display: none;
}

html[data-theme="dark"] .form-scale__dot span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 200ms ease;
}

html[data-theme="dark"] .form-scale__dot:hover span {
  border-color: var(--teal);
  color: var(--teal);
}

html[data-theme="dark"] .form-scale__dot input:checked + span {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

/* Full-width button */
html[data-theme="dark"] .btn--full {
  width: 100%;
  text-align: center;
}

/* ---- Partner Logos ---- */
/* Partners section */
html[data-theme="dark"] .partners__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  margin-bottom: 1.5rem;
}

html[data-theme="dark"] .partners__slider {
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

html[data-theme="dark"] .partners__track {
  display: flex;
  gap: 2rem;
  animation: partners-scroll 20s linear infinite;
  width: max-content;
}

html[data-theme="dark"] .partners__logo {
  flex-shrink: 0;
  width: 240px;
  height: 100px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.5rem;
  filter: grayscale(50%) opacity(90%);
  transition: filter var(--transition-normal);
}

html[data-theme="dark"] .partners__logo:hover {
  filter: grayscale(0%) opacity(100%);
}

html[data-theme="dark"] .partners__logo img {
  max-height: 40px;
  max-width: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
}

@keyframes partners-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 1rem)); }
}

/* ---- Placeholders ---- */
html[data-theme="dark"] .placeholder {
  border-color: var(--coral-light);
  background: linear-gradient(135deg, rgba(244, 132, 95, 0.08) 0%, rgba(247, 178, 103, 0.08) 100%);
}

/* ---- Moderator CTA ---- */
html[data-theme="dark"] .moderator-cta {
  background: rgba(140, 180, 160, 0.08);
  border-color: rgba(140, 180, 160, 0.2);
}

html[data-theme="dark"] .moderator-cta__link {
  color: var(--sage);
}


/* ==========================================================================
   Section 5: Page-Specific Overrides
   ========================================================================== */

/* ---- Hero Variants ---- */
html[data-theme="dark"] .hero--home,
html[data-theme="dark"] .hero--tagungen,
html[data-theme="dark"] .hero--software {
  background: var(--gradient-night);
}

html[data-theme="dark"] .hero--team,
html[data-theme="dark"] .hero--kontakt {
  background: var(--gradient-night);
}

/* Hero flow-waves: reduce opacity to prevent overlap with text */
html[data-theme="dark"] .hero__flow-waves {
  opacity: 0.15;
  max-height: 40%;
  bottom: -10px;
}

/* Hero floating circles: reduce opacity and ensure text is above */
html[data-theme="dark"] .floating-circle {
  opacity: 0.06;
}

/* Ensure hero text container sits above decorative elements */
html[data-theme="dark"] .hero .container {
  position: relative;
  z-index: 1;
}

/* Hero H1 gradient text */
html[data-theme="dark"] .hero--home h1,
html[data-theme="dark"] .hero--tagungen h1,
html[data-theme="dark"] .hero--team h1,
html[data-theme="dark"] .hero--software h1,
html[data-theme="dark"] .hero--kontakt h1 {
  background: linear-gradient(135deg, #F9A68C, #FBCF9A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

/* Hero text stays white */
html[data-theme="dark"] .hero--home,
html[data-theme="dark"] .hero--tagungen,
html[data-theme="dark"] .hero--team,
html[data-theme="dark"] .hero--software,
html[data-theme="dark"] .hero--kontakt {
  color: rgba(255, 255, 255, 0.85);
}

html[data-theme="dark"] .hero--home h2,
html[data-theme="dark"] .hero--home h3,
html[data-theme="dark"] .hero--tagungen p,
html[data-theme="dark"] .hero--team p,
html[data-theme="dark"] .hero--software p {
  color: rgba(255, 255, 255, 0.85);
}

/* Pricing Hero */
html[data-theme="dark"] .hero--preise {
  background: rgba(140, 180, 160, 0.04);
}

/* ---- Deco Circles ---- */
html[data-theme="dark"] .deco-circles {
  opacity: 0.2;
}

/* ---- Halftone Overlay ---- */
html[data-theme="dark"] .section--halftone::after {
  opacity: 0.12;
}

/* ---- Background Texture Overlay ---- */
html[data-theme="dark"] .section--bg-texture::after {
  opacity: 0.12;
}

/* ---- CTA Section (already dark teal, keep as-is or use night) ---- */
html[data-theme="dark"] .cta-section {
  background: var(--gradient-night);
}

html[data-theme="dark"] .cta-section h2,
html[data-theme="dark"] .cta-section p {
  color: #FFFFFF;
}

/* ---- Contact Section (already dark, minimal changes) ---- */
html[data-theme="dark"] .contact-section {
  background: var(--gradient-night);
}

html[data-theme="dark"] .contact__label {
  color: #FBCF9A;
}

/* ---- Inline style overrides for sections ---- */
/* Sections with inline warm-light gradient backgrounds */
html[data-theme="dark"] .section--bg-texture[style*="background:linear-gradient"] {
  background: rgba(140, 180, 160, 0.04) !important;
}

html[data-theme="dark"] section[style*="background:var(--amber-light)"] {
  background: rgba(247, 178, 103, 0.08) !important;
}

/* ---- Legal Pages ---- */
html[data-theme="dark"] .legal h2 {
  color: #FBCF9A;
}

html[data-theme="dark"] .legal ul {
  color: rgba(255, 255, 255, 0.85);
}

/* ---- Phase Label ---- */
html[data-theme="dark"] .phase__label {
  color: var(--sage);
}


/* ==========================================================================
   Section 6: Home Hero Redesign
   ========================================================================== */

/* ---- Hero Home: 2-Column Layout with Radial BG ---- */
html[data-theme="dark"] .hero--home {
  background:
    radial-gradient(circle at 85% 20%, rgba(244, 132, 95, 0.12), transparent 22%),
    radial-gradient(circle at 15% 78%, rgba(140, 180, 160, 0.10), transparent 18%),
    radial-gradient(circle at 72% 62%, rgba(247, 178, 103, 0.08), transparent 16%),
    var(--gradient-night);
  text-align: left;
  padding: 0;
}

html[data-theme="dark"] .hero--home .hero__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 5.5rem var(--container-padding) 4.5rem;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
}

html[data-theme="dark"] .hero--home .hero__copy {
  max-width: 640px;
}

/* ---- Eyebrow Badge ---- */
html[data-theme="dark"] .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  background: rgba(140, 180, 160, 0.12);
  color: var(--amber-light);
  border: 1px solid rgba(140, 180, 160, 0.2);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

html[data-theme="dark"] .eyebrow__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--coral), var(--amber));
  box-shadow: 0 0 12px rgba(244, 132, 95, 0.35);
}

/* ---- Hero H1 (updated gradient — must repeat background-clip) ---- */
html[data-theme="dark"] .hero--home h1 {
  margin: 1.2rem 0 1rem;
  font-size: clamp(2.8rem, 6vw, 5rem);
  line-height: 1.1;
  letter-spacing: -0.04em;
  padding-bottom: 0.1em;
  background: linear-gradient(135deg, #F9A68C 0%, #FBCF9A 55%, #F4845F 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

/* ---- Hero H1 Intro Line ---- */
html[data-theme="dark"] .hero__title-intro {
  display: block;
  font-size: 0.42em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  -webkit-text-fill-color: initial;
  background: none;
  letter-spacing: -0.01em;
  margin-bottom: 0.3em;
}

/* ---- Hero Lead Text ---- */
html[data-theme="dark"] .hero__lead {
  font-size: 1.15rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.68);
  max-width: 58ch;
  margin-bottom: 1.5rem;
}

/* ---- Hero Quote Block ---- */
html[data-theme="dark"] .hero__quote {
  border-left: 3px solid var(--sage);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0 2rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0 12px 12px 0;
  max-width: 58ch;
}

html[data-theme="dark"] .hero__quote p {
  font-style: italic;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 0.5rem;
}

html[data-theme="dark"] .hero__quote cite {
  font-style: normal;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.85rem;
}

/* ---- Highlight Cards ---- */
html[data-theme="dark"] .hero__highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.75rem 0 2rem;
}

html[data-theme="dark"] .highlight {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(140, 180, 160, 0.14);
  border-radius: 18px;
  padding: 0.95rem 1rem;
}

html[data-theme="dark"] .highlight strong {
  display: block;
  font-family: var(--font-heading);
  color: var(--amber-light);
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}

html[data-theme="dark"] .highlight span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* ---- Hero Actions ---- */
html[data-theme="dark"] .hero--home .hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 1rem;
}

html[data-theme="dark"] .hero__note {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.9rem;
}

/* ---- Ghost Button ---- */
html[data-theme="dark"] .btn--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.88rem 1.2rem;
  border-radius: 999px;
  color: white;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-weight: 600;
  text-decoration: none;
  transition: 220ms ease;
  cursor: pointer;
}

html[data-theme="dark"] .btn--ghost:hover {
  border-color: rgba(140, 180, 160, 0.4);
  background: rgba(140, 180, 160, 0.1);
  transform: translateY(-2px);
}

/* ---- Hero Visual (Right Column) ---- */
html[data-theme="dark"] .hero__visual {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Hero Card ---- */
html[data-theme="dark"] .hero-card {
  width: min(100%, 520px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(140, 180, 160, 0.18);
  border-radius: 28px;
  padding: 1.2rem;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.36);
  position: relative;
  backdrop-filter: blur(12px);
  z-index: 1;
}

html[data-theme="dark"] .hero-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

html[data-theme="dark"] .hero-card__label {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 600;
}

html[data-theme="dark"] .hero-card__badge {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: rgba(244, 132, 95, 0.14);
  color: var(--coral-light);
  white-space: nowrap;
}

html[data-theme="dark"] .hero-card__photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.8rem;
  font-style: italic;
  min-height: 140px;
}

/* ---- Hero Card Split: Photo + Topics ---- */
html[data-theme="dark"] .hero-card__split {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

html[data-theme="dark"] .hero-card__photo {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .hero-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

html[data-theme="dark"] .hero-card__topics {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ---- Topic Cards (inside Hero Card) ---- */
html[data-theme="dark"] .topic-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 0.7rem 0.8rem;
}

html[data-theme="dark"] .topic-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}

html[data-theme="dark"] .topic-card__title {
  font-weight: 600;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.3;
}

html[data-theme="dark"] .topic-card__intent {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

html[data-theme="dark"] .topic-card__tags {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.38);
  margin-bottom: 0.25rem;
}

html[data-theme="dark"] .topic-card__meta {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.38);
}

html[data-theme="dark"] .topic-dots {
  color: var(--coral);
  letter-spacing: -2px;
  margin-right: 0.25rem;
}

html[data-theme="dark"] .topic-card__intent--seek {
  background: rgba(140, 180, 160, 0.15);
  color: var(--sage);
}

html[data-theme="dark"] .topic-card__intent--share {
  background: rgba(244, 132, 95, 0.12);
  color: var(--coral-light);
}

html[data-theme="dark"] .topic-card__intent--offer {
  background: rgba(42, 157, 143, 0.15);
  color: var(--teal);
}

html[data-theme="dark"] .topic-card__intent--collab {
  background: rgba(247, 178, 103, 0.15);
  color: var(--amber);
}

/* ---- Hero Card Stats ---- */
html[data-theme="dark"] .hero-card__stats {
  display: flex;
  gap: 1.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
}

html[data-theme="dark"] .hero-card__stats strong {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--amber-light);
  font-size: 1rem;
  margin-right: 0.2rem;
}

/* ---- Orbit Decorations ---- */
html[data-theme="dark"] .orbit {
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(251, 207, 154, 0.18);
  pointer-events: none;
}

html[data-theme="dark"] .orbit--1 {
  width: 420px;
  height: 420px;
  top: 2%;
  right: 0;
}

html[data-theme="dark"] .orbit--2 {
  width: 290px;
  height: 290px;
  top: 14%;
  right: 7%;
  border-style: dashed;
  border-color: rgba(140, 180, 160, 0.22);
}

/* ---- Hero Card Slideshow ---- */
html[data-theme="dark"] .hero-card__slides {
  display: grid;
}

html[data-theme="dark"] .hero-card__slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms ease, visibility 600ms ease;
}

html[data-theme="dark"] .hero-card__slide.is-active {
  opacity: 1;
  visibility: visible;
}

html[data-theme="dark"] .hero-card__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

html[data-theme="dark"] .hero-card__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}

html[data-theme="dark"] .hero-card__dot:hover {
  background: rgba(255, 255, 255, 0.4);
}

html[data-theme="dark"] .hero-card__dot.is-active {
  background: var(--coral-light);
  transform: scale(1.3);
}

/* ---- Process Section ---- */
html[data-theme="dark"] .process {
  padding: var(--space-3xl) 0;
  background: #1A2332;
}

html[data-theme="dark"] .process__eyebrow {
  color: var(--coral-light);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

html[data-theme="dark"] .process h2 {
  margin-bottom: var(--space-sm);
}

html[data-theme="dark"] .process__lead {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 56ch;
  line-height: 1.7;
  margin-bottom: var(--space-2xl);
}

html[data-theme="dark"] .process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  position: relative;
}

/* Connecting line: starts at center of first icon, ends at center of last */
html[data-theme="dark"] .process__steps::before {
  content: "";
  position: absolute;
  top: 2.1rem;
  left: calc(12.5%);
  right: calc(12.5%);
  height: 1px;
  background: linear-gradient(90deg, var(--coral), var(--amber), var(--sage), var(--teal));
  opacity: 0.3;
}

html[data-theme="dark"] .process__step {
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Icon: opaque background so line doesn't show through */
html[data-theme="dark"] .process__icon {
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 50%;
  border: 1.5px solid var(--coral);
  background: #1A2332;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto var(--space-md);
  position: relative;
  z-index: 1;
}

/* Each icon border matches the gradient color at its position */
html[data-theme="dark"] .process__step:nth-child(1) .process__icon {
  border-color: var(--coral);
}
html[data-theme="dark"] .process__step:nth-child(2) .process__icon {
  border-color: var(--amber);
}
html[data-theme="dark"] .process__step:nth-child(3) .process__icon {
  border-color: var(--sage);
}
html[data-theme="dark"] .process__step:nth-child(4) .process__icon {
  border-color: var(--teal);
}

html[data-theme="dark"] .process__step h3 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}

html[data-theme="dark"] .process__step p {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  flex: 1;
}

/* Time pill: always at the bottom, independent of text length */
html[data-theme="dark"] .process__time {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  margin-top: auto;
}

html[data-theme="dark"] .process__footnote {
  text-align: center;
  color: var(--sage);
  font-size: 0.85rem;
  margin-top: 2rem;
  opacity: 0.8;
}

@media (max-width: 1040px) {
  html[data-theme="dark"] .process__steps {
    grid-template-columns: repeat(2, 1fr);
  }

  html[data-theme="dark"] .process__steps::before {
    display: none;
  }
}

@media (max-width: 720px) {
  html[data-theme="dark"] .process__steps {
    grid-template-columns: 1fr;
    max-width: 400px;
  }
}

/* ---- Quality Cards Section ---- */
html[data-theme="dark"] .qualities {
  padding: var(--space-3xl) 0;
}

html[data-theme="dark"] .qualities__header {
  text-align: left;
  margin-bottom: var(--space-2xl);
}

html[data-theme="dark"] .qualities__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--coral-light);
  margin-bottom: 0.5rem;
}

html[data-theme="dark"] .qualities__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

html[data-theme="dark"] .quality-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(140, 180, 160, 0.14);
  border-top: 3px solid var(--sage);
  border-radius: 22px;
  padding: 2rem 1.75rem;
  transition: border-color 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}

html[data-theme="dark"] .quality-card:hover {
  box-shadow: 0 0 24px rgba(42, 157, 143, 0.1), 0 4px 20px rgba(0, 0, 0, 0.25);
  transform: translateY(-3px);
}

/* Per-card accent colors matching brand palette */
html[data-theme="dark"] .quality-card:nth-child(1) { border-top-color: var(--coral); }
html[data-theme="dark"] .quality-card:nth-child(2) { border-top-color: var(--amber); }
html[data-theme="dark"] .quality-card:nth-child(3) { border-top-color: var(--sage); }
html[data-theme="dark"] .quality-card:nth-child(4) { border-top-color: var(--teal); }

html[data-theme="dark"] .quality-card__icon {
  font-size: 1.75rem;
  margin-bottom: 1rem;
  display: block;
}

html[data-theme="dark"] .quality-card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--amber-light);
  margin-bottom: 0.5rem;
}

html[data-theme="dark"] .quality-card__text {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.95rem;
  line-height: 1.65;
}

html[data-theme="dark"] .qualities__cta {
  text-align: center;
  margin-top: var(--space-xl);
}

html[data-theme="dark"] .qualities__cta-link {
  color: var(--coral-light);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: color 200ms ease;
}

html[data-theme="dark"] .qualities__cta-link:hover {
  color: var(--amber-light);
}

@media (max-width: 720px) {
  html[data-theme="dark"] .qualities__grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Hero Wave (SVG at bottom) ---- */
html[data-theme="dark"] .hero-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  opacity: 0.35;
  pointer-events: none;
}

/* ---- Home Hero Responsive ---- */
@media (max-width: 1040px) {
  html[data-theme="dark"] .hero--home .hero__inner {
    grid-template-columns: 1fr;
    padding-top: 4rem;
  }

  html[data-theme="dark"] .hero__visual {
    min-height: auto;
  }
}

@media (max-width: 720px) {
  html[data-theme="dark"] .hero__highlights {
    grid-template-columns: 1fr;
  }

  html[data-theme="dark"] .hero--home .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  html[data-theme="dark"] .hero--home .hero__actions .btn--primary,
  html[data-theme="dark"] .hero--home .hero__actions .btn--ghost {
    width: 100%;
    text-align: center;
  }

  html[data-theme="dark"] .hero-card__split {
    grid-template-columns: 1fr;
  }

  html[data-theme="dark"] .hero-card__photo {
    max-height: 180px;
  }

  html[data-theme="dark"] .hero--home h1 {
    font-size: clamp(2.4rem, 11vw, 3.6rem);
  }
}


/* ==========================================================================
   Section 7: Utility Classes
   ========================================================================== */

html[data-theme="dark"] .text-on-dark {
  color: rgba(255, 255, 255, 0.85);
}