/* ============================================================
   Aiven Automations — Animated background theme system
   ------------------------------------------------------------
   - .bg-stage : a fixed full-viewport canvas of slowly drifting
     "blob" radial fills, blurred + blended so the whole image
     breathes like the reference photos.
   - body[data-theme="light"] : pale sky + aqua wash + dark text
     (Home, Solution, Case Study, FAQ, Why Aiven, Packages,
      Services).
   - body[data-theme="dark"]  : near-black with deep teal glow
     (Problem, How We Work, Book a Free Audit / Contact).
   Both share the same blob layout & timing so the motion DNA
   is identical across the site — only the palette changes.
   Layered ON TOP of site.css.
   ============================================================ */


/* ── Stage scaffold ───────────────────────────────────────── */
.bg-stage {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  transition: background-color 800ms ease;
}
.bg-stage::after {
  /* very faint film grain — keeps the gradient from banding */
  content: '';
  position: absolute;
  inset: -20%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.06;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  transition: background 1200ms ease, opacity 1200ms ease;
}

/* ── Theme A · Light (sky + aqua wash, reference image 1) ── */
body[data-theme="light"] .bg-stage {
  background-color: #C9D4DA;
}
body[data-theme="light"] .bg-blob.b1 {
  /* upper-left soft gray-blue */
  background: radial-gradient(circle, #B8C5CC 0%, transparent 70%);
  width: 75vw; height: 75vw;
  left: -22vw; top: -22vw;
  opacity: 0.95;
}
body[data-theme="light"] .bg-blob.b2 {
  /* top-right pale cyan */
  background: radial-gradient(circle, #DDF1F4 0%, transparent 70%);
  width: 65vw; height: 65vw;
  right: -15vw; top: -18vw;
  opacity: 0.95;
  mix-blend-mode: screen;
}
body[data-theme="light"] .bg-blob.b3 {
  /* hot-white spot, centered low */
  background: radial-gradient(circle, #FFFFFF 0%, transparent 65%);
  width: 55vw; height: 55vw;
  left: 28vw; top: 38vh;
  opacity: 0.9;
  mix-blend-mode: screen;
}
body[data-theme="light"] .bg-blob.b4 {
  /* bottom-right aqua glow (the brand accent in the reference) */
  background: radial-gradient(circle, #5FD1DB 0%, #9CE2E8 35%, transparent 70%);
  width: 70vw; height: 70vw;
  right: -12vw; bottom: -22vh;
  opacity: 0.85;
  mix-blend-mode: lighten;
}
body[data-theme="light"] .bg-blob.b5 {
  /* bottom-left cooler aqua wash */
  background: radial-gradient(circle, #8FDDE3 0%, transparent 70%);
  width: 55vw; height: 55vw;
  left: 6vw; bottom: -20vh;
  opacity: 0.6;
  mix-blend-mode: lighten;
}
body[data-theme="light"] .bg-blob.b6 {
  /* darker slate plume top-right (the diagonal shadow in ref) */
  background: radial-gradient(circle, #97AAB2 0%, transparent 65%);
  width: 50vw; height: 50vw;
  right: -10vw; top: 8vh;
  opacity: 0.55;
  mix-blend-mode: multiply;
}

/* ── Theme B · Dark (black + teal glow, reference image 2) ── */
body[data-theme="dark"] .bg-stage {
  background-color: #000000;
}
body[data-theme="dark"] .bg-blob.b1 {
  /* very subtle near-black plate on the left */
  background: radial-gradient(circle, #050B0D 0%, transparent 70%);
  width: 75vw; height: 75vw;
  left: -22vw; top: -22vw;
  opacity: 0.95;
}
body[data-theme="dark"] .bg-blob.b2 {
  /* upper-right small bright cyan dot */
  background: radial-gradient(circle, #2AC6D2 0%, #00838C 35%, transparent 70%);
  width: 38vw; height: 38vw;
  right: 6vw; top: -10vh;
  opacity: 0.65;
  mix-blend-mode: screen;
}
body[data-theme="dark"] .bg-blob.b3 {
  /* main bright cyan body center-low */
  background: radial-gradient(circle, #4DDCE6 0%, #00B3C0 35%, transparent 70%);
  width: 55vw; height: 55vw;
  left: 28vw; top: 38vh;
  opacity: 0.85;
  mix-blend-mode: screen;
}
body[data-theme="dark"] .bg-blob.b4 {
  /* trailing teal river to the right */
  background: radial-gradient(circle, #008691 0%, transparent 70%);
  width: 70vw; height: 70vw;
  right: -12vw; bottom: -22vh;
  opacity: 0.7;
  mix-blend-mode: screen;
}
body[data-theme="dark"] .bg-blob.b5 {
  /* lower-left dimmer teal pool */
  background: radial-gradient(circle, #005962 0%, transparent 70%);
  width: 55vw; height: 55vw;
  left: 6vw; bottom: -20vh;
  opacity: 0.55;
  mix-blend-mode: screen;
}
body[data-theme="dark"] .bg-blob.b6 {
  /* sink to pure black on the far right edge */
  background: radial-gradient(circle, #000000 0%, transparent 70%);
  width: 50vw; height: 50vw;
  right: -10vw; top: 8vh;
  opacity: 0.85;
}

/* ── Drift animations (shared across themes) ─────────────── */
/* Each blob gets its own keyframe so the field never repeats
   in a perfectly synchronised way. Durations are 38–88s with
   ease-in-out so motion always feels like breathing, never
   like a loop. */

.bg-blob.b1 { animation: drift1 72s ease-in-out infinite alternate; }
.bg-blob.b2 { animation: drift2 56s ease-in-out infinite alternate; }
.bg-blob.b3 { animation: drift3 44s ease-in-out infinite alternate; }
.bg-blob.b4 { animation: drift4 64s ease-in-out infinite alternate; }
.bg-blob.b5 { animation: drift5 88s ease-in-out infinite alternate; }
.bg-blob.b6 { animation: drift6 50s ease-in-out infinite alternate; }

@keyframes drift1 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(6vw, 4vh, 0) scale(1.08); }
}
@keyframes drift2 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-5vw, 6vh, 0) scale(1.06); }
}
@keyframes drift3 {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: var(--b3-o, 0.85); }
  50%  { transform: translate3d(2vw, -3vh, 0) scale(1.10); opacity: var(--b3-o, 0.95); }
  100% { transform: translate3d(-3vw, 4vh, 0) scale(0.96); opacity: var(--b3-o, 0.80); }
}
@keyframes drift4 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-6vw, -4vh, 0) scale(1.12); }
}
@keyframes drift5 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(5vw, -5vh, 0) scale(1.05); }
}
@keyframes drift6 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-4vw, 5vh, 0) scale(0.94); }
}

/* Reduce motion: hold blobs still */
@media (prefers-reduced-motion: reduce) {
  .bg-blob { animation: none !important; }
}

/* ============================================================
   Transparent shell / pages — let the stage show through
   ============================================================ */
body { background: transparent; }
.shell,
.page,
main.page,
.home-hero,
.page-section,
.page-section.on-dark,
.service-block,
.service-block.surface-light,
.service-block.surface-dark {
  background: transparent !important;
}

/* Nav: always dark glass so the brand mark stays anchored */
.nav {
  background: rgba(0, 0, 0, 0.78) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(18px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
}

/* Footer: always dark */
.footer {
  background: rgba(0, 0, 0, 0.94) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ============================================================
   THEME · DARK (Problem, How We Work, Contact)
   Mirrors the original bg-theme.css overrides.
   ============================================================ */

body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3,
body[data-theme="dark"] h4         { color: #fff; }
body[data-theme="dark"] p          { color: rgba(255, 255, 255, 0.8); }

body[data-theme="dark"] .hero h1                { color: #fff !important; }
body[data-theme="dark"] .hero-body              { color: rgba(255, 255, 255, 0.75) !important; }
body[data-theme="dark"] .hero-body.on-dark      { color: rgba(255, 255, 255, 0.75) !important; }

body[data-theme="dark"] .section-head h2        { color: #fff !important; }
body[data-theme="dark"] .section-head h2.on-dark{ color: #fff !important; }
body[data-theme="dark"] .section-head p         { color: rgba(255, 255, 255, 0.7) !important; }
body[data-theme="dark"] .section-head p.on-dark { color: rgba(255, 255, 255, 0.7) !important; }

body[data-theme="dark"] .feature-row,
body[data-theme="dark"] .feature-row.on-dark    { border-top-color: rgba(255,255,255,0.08) !important; }
body[data-theme="dark"] .feature-title,
body[data-theme="dark"] .feature-title.on-dark  { color: #fff !important; border-left-color: rgba(0,179,192,0.4) !important; }
body[data-theme="dark"] .feature-body,
body[data-theme="dark"] .feature-body.on-dark   { color: rgba(255,255,255,0.65) !important; }

body[data-theme="dark"] .service-text h3        { color: #fff !important; }
body[data-theme="dark"] .service-text p         { color: rgba(255,255,255,0.72) !important; }
body[data-theme="dark"] .feature-list li        { color: rgba(255,255,255,0.82) !important; }
body[data-theme="dark"] .service-num            { color: var(--color-primary) !important; }

/* Pain cards (Problem) */
body[data-theme="dark"] .pain-card {
  background: rgba(8, 10, 12, 0.62) !important;
  border-color: rgba(255,255,255,0.07) !important;
  border-left-color: rgba(0,179,192,0.55) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body[data-theme="dark"] .pain-card:hover        { transform: translateY(-2px); border-left-color: var(--color-primary) !important; }
body[data-theme="dark"] .pain-card-title        { color: #fff !important; }
body[data-theme="dark"] .pain-card-body         { color: rgba(255,255,255,0.62) !important; }

/* Flow / solution */
body[data-theme="dark"] .flow-node              { background: rgba(8, 10, 12, 0.62) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
body[data-theme="dark"] .flow-node-title        { color: #fff !important; }
body[data-theme="dark"] .flow-node-body         { color: rgba(255,255,255,0.55) !important; }

body[data-theme="dark"] .callout {
  background: linear-gradient(180deg, rgba(0,179,192,0.12), rgba(0,179,192,0.04)) !important;
  border-color: rgba(0,179,192,0.28) !important;
  border-left-color: var(--color-primary) !important;
  color: #fff !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Case study */
body[data-theme="dark"] .case-card {
  background: rgba(8, 10, 12, 0.58) !important;
  border-radius: 16px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body[data-theme="dark"] .case-meta-row          { color: rgba(255,255,255,0.45) !important; }
body[data-theme="dark"] .case-meta-row strong   { color: #fff !important; font-family: var(--font-body); }
body[data-theme="dark"] .case-outcome {
  background: rgba(6, 8, 10, 0.65) !important;
  color: #fff !important;
  border-top-color: var(--color-primary) !important;
  border-color: rgba(255,255,255,0.06) !important;
}
body[data-theme="dark"] .case-card li span      { color: rgba(255,255,255,0.85) !important; }
body[data-theme="dark"] .case-card .callout     { color: rgba(255,255,255,0.85) !important; background: rgba(0,179,192,0.06) !important; }

/* Timeline / How We Work */
body[data-theme="dark"] .timeline-step h3       { color: #fff !important; }
body[data-theme="dark"] .timeline-step p        { color: rgba(255,255,255,0.65) !important; }
body[data-theme="dark"] .timeline-num {
  background: rgba(8, 10, 12, 0.78) !important;
  border-color: rgba(0,179,192,0.45) !important;
  color: var(--color-primary) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Packages */
body[data-theme="dark"] .package {
  background: rgba(8, 10, 12, 0.66) !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #fff;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body[data-theme="dark"] .package.featured {
  background: rgba(8, 10, 12, 0.78) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 12px 40px rgba(0,179,192,0.14) !important;
}
body[data-theme="dark"] .package-title          { color: #fff !important; }
body[data-theme="dark"] .package > p            { color: rgba(255,255,255,0.65) !important; }
body[data-theme="dark"] .package ul li          { color: rgba(255,255,255,0.78) !important; }

/* Trust cards (Why Aiven) */
body[data-theme="dark"] .trust-card {
  background: rgba(8, 10, 12, 0.58) !important;
  border-color: rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body[data-theme="dark"] .trust-card:hover       { border-color: rgba(0,179,192,0.32) !important; }
body[data-theme="dark"] .trust-card h3          { color: #fff !important; }
body[data-theme="dark"] .trust-card p           { color: rgba(255,255,255,0.62) !important; }

/* FAQ */
body[data-theme="dark"] .faq-item {
  background: rgba(8, 10, 12, 0.58) !important;
  border-color: rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body[data-theme="dark"] .faq-item.open          { border-color: rgba(0,179,192,0.35) !important; box-shadow: none !important; }
body[data-theme="dark"] .faq-q                  { color: #fff !important; background: transparent !important; }
body[data-theme="dark"] .faq-q-icon             { background: rgba(255,255,255,0.06) !important; }
body[data-theme="dark"] .faq-a p                { color: rgba(255,255,255,0.65) !important; }

/* Contact / Book a Free Audit */
body[data-theme="dark"] .contact-card {
  background: rgba(0, 0, 0, 0.62) !important;
  border-color: rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
body[data-theme="dark"] .field label            { color: rgba(255,255,255,0.55) !important; }
body[data-theme="dark"] .field input,
body[data-theme="dark"] .field select,
body[data-theme="dark"] .field textarea {
  background: rgba(0,0,0,0.55) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: #fff !important;
}

/* How We Work / auto / scope / expect grids */
body[data-theme="dark"] .auto-card,
body[data-theme="dark"] .scope-card,
body[data-theme="dark"] .expect-card,
body[data-theme="dark"] .home-what-card,
body[data-theme="dark"] .home-case-teaser,
body[data-theme="dark"] .home-step-card {
  background: rgba(8, 10, 12, 0.58) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Sections / page rail */
body[data-theme="dark"] .page-section           { border-top-color: rgba(255,255,255,0.07) !important; }
body[data-theme="dark"] .page-rail              { color: rgba(255,255,255,0.4) !important; }
body[data-theme="dark"] .page-rail a:hover      { color: #fff !important; }
body[data-theme="dark"] .page-rail a.is-current { color: #fff !important; }


/* ============================================================
   THEME · LIGHT (Home, Solution, Case Study, FAQ, …)
   Dark text on a soft sky/aqua wash. Cards become subtle
   glass: white at low alpha, hairline border, no heavy shadow.
   ============================================================ */

body[data-theme="light"] h1,
body[data-theme="light"] h2,
body[data-theme="light"] h3,
body[data-theme="light"] h4         { color: #0E1A1F; }
body[data-theme="light"] p          { color: rgba(14, 26, 31, 0.72); }

body[data-theme="light"] .hero h1                 { color: #0E1A1F !important; }
body[data-theme="light"] .hero h1.on-dark         { color: #0E1A1F !important; }
body[data-theme="light"] .hero-body               { color: rgba(14, 26, 31, 0.68) !important; }
body[data-theme="light"] .hero-body.on-dark       { color: rgba(14, 26, 31, 0.68) !important; }

body[data-theme="light"] .section-head h2        { color: #0E1A1F !important; }
body[data-theme="light"] .section-head h2.on-dark{ color: #0E1A1F !important; }
body[data-theme="light"] .section-head p         { color: rgba(14, 26, 31, 0.66) !important; }
body[data-theme="light"] .section-head p.on-dark { color: rgba(14, 26, 31, 0.66) !important; }

body[data-theme="light"] .feature-row,
body[data-theme="light"] .feature-row.on-dark    { border-top-color: rgba(14,26,31,0.10) !important; }
body[data-theme="light"] .feature-title,
body[data-theme="light"] .feature-title.on-dark  { color: #0E1A1F !important; border-left-color: rgba(0,107,115,0.45) !important; }
body[data-theme="light"] .feature-body,
body[data-theme="light"] .feature-body.on-dark   { color: rgba(14,26,31,0.62) !important; }
body[data-theme="light"] .feature-icon,
body[data-theme="light"] .feature-icon.on-dark   { color: #006B73 !important; }

/* Section borders */
body[data-theme="light"] .page-section,
body[data-theme="light"] .page-section.on-dark   { border-top-color: rgba(14,26,31,0.10) !important; }

/* Page rail */
body[data-theme="light"] .page-rail              { color: rgba(14, 26, 31, 0.5) !important; }
body[data-theme="light"] .page-rail a:hover      { color: #0E1A1F !important; }
body[data-theme="light"] .page-rail a.is-current { color: #0E1A1F !important; }

/* Service blocks (Solution page) */
body[data-theme="light"] .service-text h3        { color: #0E1A1F !important; }
body[data-theme="light"] .service-text p         { color: rgba(14,26,31,0.66) !important; }
body[data-theme="light"] .feature-list li        { color: rgba(14,26,31,0.82) !important; }
body[data-theme="light"] .service-num            { color: #006B73 !important; }

/* Glass card baseline (light) */
body[data-theme="light"] .pain-card,
body[data-theme="light"] .flow-node,
body[data-theme="light"] .auto-card,
body[data-theme="light"] .scope-card,
body[data-theme="light"] .expect-card,
body[data-theme="light"] .home-what-card,
body[data-theme="light"] .home-case-teaser,
body[data-theme="light"] .home-step-card,
body[data-theme="light"] .trust-card,
body[data-theme="light"] .faq-item,
body[data-theme="light"] .case-card,
body[data-theme="light"] .package {
  background: rgba(255, 255, 255, 0.55) !important;
  border-color: rgba(14, 26, 31, 0.08) !important;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset, 0 8px 24px rgba(14,26,31,0.04) !important;
}

/* Specific tweaks per surface */
body[data-theme="light"] .pain-card               { border-left-color: rgba(0,107,115,0.55) !important; }
body[data-theme="light"] .pain-card:hover         { border-left-color: #006B73 !important; }
body[data-theme="light"] .pain-card-title         { color: #0E1A1F !important; }
body[data-theme="light"] .pain-card-body          { color: rgba(14,26,31,0.62) !important; }
body[data-theme="light"] .pain-card-icon          { color: #006B73 !important; }

body[data-theme="light"] .flow-node               { border-color: rgba(0,107,115,0.28) !important; }
body[data-theme="light"] .flow-node-title         { color: #0E1A1F !important; }
body[data-theme="light"] .flow-node-body          { color: rgba(14,26,31,0.6) !important; }
body[data-theme="light"] .flow-node-num           { color: #006B73 !important; }
body[data-theme="light"] .flow-arrow              { color: #006B73 !important; }

body[data-theme="light"] .auto-card               { border-color: rgba(0,107,115,0.18) !important; }
body[data-theme="light"] .auto-card-title         { color: #0E1A1F !important; }
body[data-theme="light"] .auto-card-body          { color: rgba(14,26,31,0.6) !important; }
body[data-theme="light"] .auto-tag                { color: #006B73 !important; background: rgba(0,107,115,0.08) !important; border-color: rgba(0,107,115,0.22) !important; }

body[data-theme="light"] .scope-card-label        { color: #006B73 !important; border-bottom-color: rgba(0,107,115,0.18) !important; }
body[data-theme="light"] .scope-card h3           { color: #0E1A1F !important; }
body[data-theme="light"] .scope-card ul li        { color: rgba(14,26,31,0.72) !important; }
body[data-theme="light"] .scope-card .check       { color: #006B73 !important; }

body[data-theme="light"] .expect-card h3          { color: #0E1A1F !important; }
body[data-theme="light"] .expect-card p           { color: rgba(14,26,31,0.6) !important; }

body[data-theme="light"] .home-what-card-title    { color: #0E1A1F !important; }
body[data-theme="light"] .home-what-card-body     { color: rgba(14,26,31,0.6) !important; }
body[data-theme="light"] .home-step-body          { color: #0E1A1F !important; }
body[data-theme="light"] .home-step-num           { color: rgba(0,107,115,0.28) !important; }
body[data-theme="light"] .home-step-label         { color: #006B73 !important; }

body[data-theme="light"] .trust-card h3           { color: #0E1A1F !important; }
body[data-theme="light"] .trust-card p            { color: rgba(14,26,31,0.62) !important; }
body[data-theme="light"] .trust-card:hover        { border-color: rgba(0,107,115,0.30) !important; }

/* Case study */
body[data-theme="light"] .case-meta-row           { color: rgba(14,26,31,0.5) !important; }
body[data-theme="light"] .case-meta-row strong    { color: #0E1A1F !important; font-family: var(--font-body); }
body[data-theme="light"] .case-card li span       { color: rgba(14,26,31,0.85) !important; }
body[data-theme="light"] .case-card .callout      { color: #0E1A1F !important; background: rgba(0,107,115,0.06) !important; border-color: rgba(0,107,115,0.22) !important; }
body[data-theme="light"] .case-outcome {
  background: rgba(255,255,255,0.78) !important;
  color: #0E1A1F !important;
  border-color: rgba(14,26,31,0.06) !important;
  border-top-color: #006B73 !important;
}

/* Timeline (if used on light pages) */
body[data-theme="light"] .timeline-step h3        { color: #0E1A1F !important; }
body[data-theme="light"] .timeline-step p         { color: rgba(14,26,31,0.65) !important; }
body[data-theme="light"] .timeline-num {
  background: rgba(255,255,255,0.85) !important;
  border-color: rgba(0,107,115,0.4) !important;
  color: #006B73 !important;
}

/* Packages */
body[data-theme="light"] .package.featured {
  background: rgba(255,255,255,0.85) !important;
  border-color: #006B73 !important;
  box-shadow: 0 18px 48px rgba(0,107,115,0.14) !important;
}
body[data-theme="light"] .package-title           { color: #0E1A1F !important; }
body[data-theme="light"] .package > p             { color: rgba(14,26,31,0.65) !important; }
body[data-theme="light"] .package ul li           { color: rgba(14,26,31,0.78) !important; }

/* FAQ */
body[data-theme="light"] .faq-item.open           { border-color: rgba(0,107,115,0.35) !important; box-shadow: 0 8px 32px rgba(0,107,115,0.08) !important; }
body[data-theme="light"] .faq-q                   { color: #0E1A1F !important; background: transparent !important; }
body[data-theme="light"] .faq-q-icon              { background: rgba(0,107,115,0.10) !important; color: #006B73 !important; }
body[data-theme="light"] .faq-a p                 { color: rgba(14,26,31,0.66) !important; }

/* Callout / pull-quote on light */
body[data-theme="light"] .callout {
  background: rgba(255,255,255,0.55) !important;
  border-color: rgba(0,107,115,0.25) !important;
  border-left-color: #006B73 !important;
  color: #0E1A1F !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Tool pills on light surfaces */
body[data-theme="light"] .trusted-row-label       { color: rgba(14,26,31,0.5) !important; }
body[data-theme="light"] .trusted-pill {
  background: rgba(255,255,255,0.55) !important;
  border-color: rgba(14,26,31,0.10) !important;
  color: rgba(14,26,31,0.7) !important;
}

/* Ghost-dark buttons on light pages → flip to ghost-light look.
   Btn primitive hardcodes inline color:#fff on its inner <span>,
   so we override with !important on the descendant too. The
   anchor variant of Btn also hardcodes a black inline bg, but
   we use !important on the CSS rule below so the translucent
   light-glass treatment wins. */
body[data-theme="light"] .btn-ghost-dark,
body[data-theme="light"] .btn-ghost-dark span {
  color: #0E1A1F !important;
}
body[data-theme="light"] .btn-ghost-dark {
  border-color: rgba(14,26,31,0.22) !important;
  background: rgba(255,255,255,0.35) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body[data-theme="light"] .btn-ghost-dark:hover {
  background: rgba(255,255,255,0.55) !important;
  border-color: #0E1A1F !important;
}

/* Hero/CTA dark blocks (e.g. .hiw-cta-block) — let the stage
   show through on dark theme, but on light keep them as a
   contrast island */
body[data-theme="dark"] .hiw-cta-block            { background: rgba(0,0,0,0.55) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
body[data-theme="light"] .hiw-cta-block {
  background: rgba(14,26,31,0.92) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(0,107,115,0.18);
}

/* Footer tag (consistent across themes) */
.footer-tag        { color: rgba(255,255,255,0.5) !important; }
.footer-links a    { color: rgba(255,255,255,0.55) !important; }
.footer-bottom     { color: rgba(255,255,255,0.35) !important; }

/* Soft cross-fade between routes — page already animates in,
   but the theme swap (esp. text color) shouldn't snap. */
body, h1, h2, h3, p, .pain-card, .flow-node, .faq-item, .auto-card,
.scope-card, .expect-card, .case-card, .package, .trust-card,
.home-what-card, .home-case-teaser, .home-step-card, .contact-card,
.case-outcome, .timeline-num {
  transition: background-color 600ms ease,
              border-color    600ms ease,
              color           400ms ease,
              box-shadow      600ms ease;
}