/* =============================================================
   AEDO — Service page HYBRID light theme
   Scoped to html.svc-light (added per-page). "Dark chrome + light
   content": nav, hero, and final CTA stay dark; the body goes light.
   Most components are var()-based, so we remap the tokens and then
   re-darken only the deliberate dark "moments".
   ============================================================= */

html.svc-light {
  --bg:  #f4f7fb;
  --bg2: #ffffff;
  --bg3: #eef3f9;
  --card: #ffffff;
  --text:  #0f2033;
  --text2: #46596f;
  --text3: #7e90a3;
  --border: rgba(15,32,51,0.10);
  --shadow:    0 4px 24px rgba(15,32,51,0.10);
  --shadow-lg: 0 16px 44px rgba(15,32,51,0.16);
}
html.svc-light body { background: var(--bg); color: var(--text); }

/* ---------- DARK CHROME: navbar (dark over hero AND light body) ---------- */
html.svc-light #navbar { background: rgba(10,18,30,0.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.07); }
html.svc-light #navbar .nav-links a { color: #aebccd; }
html.svc-light #navbar .nav-links a:hover { color: #fff; background: rgba(255,255,255,0.08); }
html.svc-light #navbar .nav-logo-text,
html.svc-light #navbar .logo-name { color: #eef3f9; }
html.svc-light #navbar .logo-sub-inline { color: #8fa0b3; }

/* ---------- DARK MOMENT: hero ---------- */
html.svc-light .svc-hero {
  background:
    radial-gradient(1200px 520px at 80% -10%, rgba(232,97,0,0.20), transparent 60%),
    radial-gradient(900px 520px at 0% 110%, rgba(26,58,92,0.60), transparent 60%),
    #080f18;
}
html.svc-light .svc-hero .svc-breadcrumb,
html.svc-light .svc-hero .svc-breadcrumb a { color: #8fa6bd; }
html.svc-light .svc-hero .svc-breadcrumb .cur { color: var(--accent); }
html.svc-light .svc-hero .svc-h1 { color: #f2f6fa; }
html.svc-light .svc-hero .svc-lead { color: #a7bccf; }
html.svc-light .svc-hero .svc-lead strong { color: #fff; }
html.svc-light .svc-hero .btn-ghost { color: #eaf1f7; border-color: rgba(255,255,255,0.24); }
html.svc-light .svc-hero .btn-ghost:hover { color: #fff; border-color: #fff; }
html.svc-light .svc-hero .svc-stats { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.12); }
html.svc-light .svc-hero .svc-stat { background: #0c1828; }
html.svc-light .svc-hero .svc-stat .num { color: #f2f6fa; }
html.svc-light .svc-hero .svc-stat .lbl { color: #8fa6bd; }

/* ---------- DARK MOMENT: final CTA ---------- */
html.svc-light .svc-finalcta {
  background: radial-gradient(700px 320px at 50% -40%, rgba(232,97,0,0.26), transparent 70%), #0b1622;
  border-color: rgba(232,97,0,0.45);
}
html.svc-light .svc-finalcta h2 { color: #f2f6fa; }
html.svc-light .svc-finalcta p { color: #a7bccf; }

/* ---------- LIGHT BODY: fix faint borders + hardcoded-dark components ---------- */
html.svc-light .cmp-card,
html.svc-light .tl-step,
html.svc-light .tl-detail,
html.svc-light .svc-tile,
html.svc-light .price-card,
html.svc-light .map-stage,
html.svc-light .map-list button,
html.svc-light .struct-svg,
html.svc-light .struct-btn,
html.svc-light .faq-list,
html.svc-light .faq-item { border-color: #e3e9f2; }

/* cards get gentle light-mode depth */
html.svc-light .svc-tile,
html.svc-light .price-card,
html.svc-light .cmp-card,
html.svc-light .tl-step,
html.svc-light .map-stage { box-shadow: 0 2px 12px -7px rgba(15,32,51,0.18); }

/* project gallery + before/after slider hardcoded #0f1f33 backgrounds */
html.svc-light .pw-card,
html.svc-light .ba-slider { background: #e9eef5; border-color: #e3e9f2; }

/* keep the section eyebrow/kicker readable on light (accent already set) */
html.svc-light .svc-section:not(.svc-hero) .svc-p a { color: var(--accent); }

/* ---------- DARK "SHOWCASE" ISLANDS (engineering diagrams) ----------
   Sections tagged .is-dark restore the dark tokens locally, so all their
   var()-based children + the SVGs (designed for dark) render correctly,
   as a full-bleed dark band punctuating the light page. */
html.svc-light .svc-section.is-dark {
  position: relative; isolation: isolate;
  --bg: #080f18; --bg2: #0f1f33; --bg3: #0f1e2e; --card: #132437;
  --text: #dde8f0; --text2: #7a9ab5; --text3: #4a6880; --border: rgba(122,154,181,0.16);
}
html.svc-light .svc-section.is-dark::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%;
  margin-left: -50vw; width: 100vw; background: #080f18;
}
/* restore the diagrams' native dark borders inside dark islands */
html.svc-light .is-dark .struct-svg,
html.svc-light .is-dark .struct-btn { border-color: rgba(122,154,181,0.16); box-shadow: none; }