/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME v3 — Complete + Advanced + Modern
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ink:     #0f1419;
  --blue:    #3d5a80;
  --aq:      #c9914a;
  --aq-lt:   #e8b878;
  --or:      #d97742;
  --bg:      #fafaf7;
  --bg-2:    #f6f1ea;
  --bg-3:    #efe8d8;
  --line:    #ebe6dc;
  --steel:   #5c5349;
  --wa:      #25d366;
  --wa-dk:   #128c4a;
  --success: #10b981;
  --shadow-sm: 0 1px 2px rgba(15,20,25,.04), 0 2px 6px rgba(15,20,25,.04);
  --shadow-md: 0 4px 12px rgba(15,20,25,.06), 0 8px 24px rgba(15,20,25,.04);
  --shadow-lg: 0 12px 32px rgba(15,20,25,.10), 0 24px 48px rgba(15,20,25,.06);
  --shadow-xl: 0 20px 48px rgba(15,20,25,.14), 0 40px 80px rgba(15,20,25,.08);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
}

* { -webkit-tap-highlight-color: transparent; }
html { background: var(--bg) !important; }
body {
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-family: 'Cairo', 'Inter', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-weight: 800 !important; letter-spacing: -0.01em; }
h1 { color: var(--ink) !important; }
h2 { color: var(--ink) !important; }
h3 { color: var(--ink) !important; }

p, li, span:not([class*="badge"]):not([class*="dot"]):not([class*="live"]) {
  color: #2a2a2a;
}

/* ═══════════════════════════════════════════════════════════════
   HEADER — White with subtle shadow
   ═══════════════════════════════════════════════════════════════ */
.hd {
  background: #ffffff !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, .95) !important;
}
.hd.sc { box-shadow: var(--shadow-md) !important; }
.hd .logo {
  color: var(--ink) !important;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.hd .logo svg path { stroke: var(--aq) !important; stroke-width: 2.2 !important; }
.hd nav a {
  color: #4a4a4a !important;
  font-weight: 600;
  font-size: .92rem;
  transition: color .2s ease;
}
.hd nav a:hover { color: var(--aq) !important; }
.hd nav a[aria-current] { color: var(--aq) !important; font-weight: 700; }
#mb {
  background: transparent;
  border: 2px solid #d0d0d0;
  color: var(--ink);
  transition: all .2s;
}
#mb:hover { border-color: var(--aq); color: var(--aq); }

/* Offer bar */
.offer {
  background: linear-gradient(135deg, var(--or) 0%, #f09860 50%, var(--aq-lt) 100%) !important;
  color: #ffffff !important;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.1);
}
.offer a {
  background: var(--ink) !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  transition: transform .2s ease;
}
.offer a:hover { transform: scale(1.05); }

/* ═══════════════════════════════════════════════════════════════
   HERO — Image VISIBLE + light overlay + modern
   ═══════════════════════════════════════════════════════════════ */
.hero {
  background: linear-gradient(160deg, #fafaf7 0%, #f6f1ea 50%, #efe8d8 100%) !important;
  color: var(--ink) !important;
  padding: 64px 0 100px !important;
}

/* ⭐ FIX: Hero image now visible */
.hero .vb {
  opacity: 1 !important;
  z-index: 0 !important;
}
.hero .vb img,
.hero .vb #vv {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}
/* Light gradient overlay for text readability (NOT dark!) */
.hero .vb::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(135deg, rgba(250,250,247,.92) 0%, rgba(246,241,234,.78) 40%, rgba(239,232,216,.65) 100%) !important;
  z-index: 1 !important;
  pointer-events: none;
}

.hero > .w.hg { position: relative; z-index: 2; }

.hero h1 {
  color: var(--ink) !important;
  text-shadow: 0 1px 2px rgba(255,255,255,.9), 0 2px 4px rgba(255,255,255,.6);
}
.hero p.l {
  color: #3a3a3a !important;
  text-shadow: 0 1px 2px rgba(255,255,255,.7);
}
.hero .facts { color: #3a3a3a !important; }
.hero .facts li::before { color: var(--aq) !important; font-weight: 900; }
.hero .eb { color: var(--aq) !important; font-weight: 800; }

/* Hero CTAs — refined */
.hero .cta { gap: 12px; }
.hero .cta .btn {
  padding: 14px 26px;
  font-size: .95rem;
  box-shadow: var(--shadow-md);
  transition: all .25s cubic-bezier(.4,0,.2,1);
}
.hero .cta .btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.hero .cta .btn.b-call { background: var(--or) !important; color: #fff !important; }
.hero .cta .btn.b-wa { background: var(--wa) !important; color: #fff !important; }
.hero .cta .btn.b-gh {
  border: 2px solid var(--ink) !important;
  color: var(--ink) !important;
  background: rgba(255,255,255,.9) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hero .cta .btn.b-gh:hover {
  background: var(--ink) !important;
  color: #fff !important;
}

/* Trust badges — light glass */
.trust-row { margin: 16px 0 0; gap: 10px; }
.trust-badge {
  background: rgba(255,255,255,.95) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: .82rem;
  padding: 7px 14px;
  font-weight: 600;
}
.trust-badge:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Live status */
.live-status {
  background: rgba(236, 253, 245, .95) !important;
  border: 1px solid #86efac !important;
  color: #15803d !important;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(16,185,129,.15);
}
.live-status.offline {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #64748b !important;
  box-shadow: none;
}

/* Quick quote form — glass card light */
.gq {
  background: rgba(255,255,255,.98) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.gq h2 { color: var(--ink) !important; font-size: 1.2rem; }
.gq h2::after { background: var(--or) !important; }
.gq label { color: #4a4a4a !important; font-weight: 600; font-size: .88rem; }
.gq small { color: #8a7f70 !important; }
.gq select, .gq input {
  background: #fafaf7 !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
  transition: all .2s ease;
}
.gq select:focus, .gq input:focus {
  background: #ffffff !important;
  border-color: var(--aq) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PAGE HEADER (.ph) — Light gradient
   ═══════════════════════════════════════════════════════════════ */
.ph {
  background: linear-gradient(160deg, #f6f1ea 0%, #efe8d8 60%, #e8dfd0 100%) !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--line);
}
.ph::after { background: linear-gradient(90deg, var(--aq), var(--or)) !important; }
.ph h1 { color: var(--ink) !important; }
.ph p { color: #4a4a4a !important; }
.ph .bc { color: #8a7f70 !important; }
.ph .bc a { color: var(--aq) !important; font-weight: 600; }
.ph .mt { color: #8a7f70 !important; }

/* ═══════════════════════════════════════════════════════════════
   DARK SECTIONS (.dk, .vid) → LIGHT
   ═══════════════════════════════════════════════════════════════ */
.dk, .vid {
  background: linear-gradient(160deg, #f6f1ea 0%, #efe8d8 100%) !important;
  color: var(--ink) !important;
}
.dk h2, .vid h2 { color: var(--ink) !important; }
.dk .sub, .vid .sub { color: #5c5349 !important; }
.dk .eb, .vid .eb { color: var(--aq) !important; }

/* Steps (numbered) — modern light cards */
.steps li {
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-sm);
  transition: all .25s ease;
}
.steps li:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--aq) !important;
}
.steps li b { color: var(--ink); font-size: 1.02rem; }
.steps li::before {
  background: linear-gradient(135deg, var(--or), var(--aq-lt)) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(217,119,66,.3);
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER — White/light
   ═══════════════════════════════════════════════════════════════ */
footer {
  background: #ffffff !important;
  color: #3a3a3a !important;
  border-top: 1px solid var(--line);
  padding-top: 48px;
}
footer b, footer h4 { color: var(--ink) !important; }
footer a { color: #3a3a3a !important; transition: color .2s; }
footer .fg a:hover { color: var(--aq) !important; }
footer address { color: #4a4a4a !important; }
footer address a { color: var(--aq) !important; font-weight: 600; }
.fk a {
  border: 1px solid var(--line) !important;
  color: #4a4a4a !important;
  background: #fafaf7 !important;
  transition: all .2s ease;
}
.fk a:hover {
  border-color: var(--aq) !important;
  color: var(--aq) !important;
  background: #fff !important;
  transform: translateY(-1px);
}
.fb { border-top-color: var(--line) !important; color: #8a7f70 !important; }
.vc b { color: var(--ink) !important; }
.cb-trust {
  background: #f6f1ea !important;
  color: #3a3a3a !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.cb-trust b { color: var(--aq) !important; font-weight: 800; }

/* ═══════════════════════════════════════════════════════════════
   CARDS — modern white with lift
   ═══════════════════════════════════════════════════════════════ */
.c {
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: all .3s cubic-bezier(.4,0,.2,1);
}
.c:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--aq) !important;
}
.c h3 { color: var(--ink) !important; }
.c p { color: #4a4a4a !important; }
.c i {
  background: linear-gradient(135deg, var(--aq-lt), var(--or)) !important;
  box-shadow: 0 4px 12px rgba(217,119,66,.25);
}

/* Vision */
.vision {
  background: #ffffff !important;
  color: var(--ink) !important;
  border-inline-start: 6px solid var(--aq) !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.vision h2 { color: var(--ink) !important; }
.vision p { color: #4a4a4a !important; }

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR (.sd, .toc, .cb) — light
   ═══════════════════════════════════════════════════════════════ */
.toc {
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.toc b { color: var(--ink) !important; }
.toc a { color: #4a4a4a !important; }
.toc a:hover { color: var(--aq) !important; }

.cb {
  background: linear-gradient(135deg, #f6f1ea, #efe8d8) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-top: 5px solid var(--aq) !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.cb b { color: var(--ink) !important; }
.cb p { color: #4a4a4a !important; }

/* ═══════════════════════════════════════════════════════════════
   CTA2 (final call-to-action)
   ═══════════════════════════════════════════════════════════════ */
.cta2 {
  background: linear-gradient(135deg, #f6f1ea 0%, #efe8d8 100%) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.cta2 h2 { color: var(--ink) !important; }
.cta2 p { color: #4a4a4a !important; }
.cta2 .btn.b-call { background: var(--or) !important; color: #fff !important; }
.cta2 .btn.b-wa { background: var(--wa) !important; color: #fff !important; }

/* ═══════════════════════════════════════════════════════════════
   TABLES, FORMS, FAQ
   ═══════════════════════════════════════════════════════════════ */
table {
  background: #ffffff !important;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
th { background: var(--ink) !important; color: #ffffff !important; font-weight: 700; }
td { color: var(--ink) !important; }
tbody tr:nth-child(even) td { background: #fbf8f2 !important; }

input, select, textarea {
  background: #ffffff !important;
  border: 1px solid #d8d4cc !important;
  color: var(--ink) !important;
  border-radius: var(--radius-sm);
  transition: all .2s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--aq) !important;
  outline: 3px solid rgba(201,145,74,.15) !important;
  background: #ffffff !important;
}
form {
  background: #ffffff !important;
  color: var(--ink) !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
form label { color: #4a4a4a !important; font-weight: 600; }

details {
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: all .2s ease;
}
details:hover { border-color: #d8d4cc !important; }
details[open] {
  border-color: var(--aq) !important;
  box-shadow: var(--shadow-md);
}
summary { color: var(--ink) !important; font-weight: 700; }
summary::after { color: var(--aq) !important; }
details p { color: #4a4a4a !important; }

/* Summary block */
.sm {
  background: linear-gradient(135deg, #fdf8ec, #f6f0e4) !important;
  border-inline-start: 4px solid var(--aq) !important;
  border-radius: var(--radius-sm);
  color: var(--ink) !important;
}
.sm b { color: var(--ink); }

/* Dialog */
dialog { background: #ffffff !important; border-radius: var(--radius-lg); }
dialog .lb { background: #0a0a0a !important; }
dialog .tx h3 { color: var(--ink) !important; }
dialog .tx p { color: #4a4a4a !important; }

/* Before/After labels */
.ba i { background: rgba(0,0,0,.78) !important; color: #fff !important; }

/* Article */
article {
  background: #ffffff !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
article h2, article h3 { color: var(--ink) !important; }
article p, article li { color: #3a3a3a !important; }

/* Drawer (mobile menu) — keep dark for overlay contrast */
.dr {
  background: #141414 !important;
  color: #fff !important;
}
.dr a { color: #fff !important; }
.dr a:hover { color: var(--aq) !important; }

/* Progress bar */
#pg { background: linear-gradient(90deg, var(--or), var(--aq-lt)) !important; }

/* Language button */
.lang-btn {
  background: #f6f1ea !important;
  color: var(--aq) !important;
  border: 1px solid var(--aq) !important;
  transition: all .2s ease;
}
.lang-btn:hover {
  background: var(--aq) !important;
  color: #fff !important;
  transform: scale(1.05);
}

/* Bottom bar (mobile) */
.bar { background: #0a0a0a !important; }
.bar a { color: #fff !important; }

/* ═══════════════════════════════════════════════════════════════
   ADVANCED TOUCHES
   ═══════════════════════════════════════════════════════════════ */

/* Better scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f6f1ea; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--aq), var(--or));
  border-radius: 5px;
  border: 2px solid #f6f1ea;
}
::-webkit-scrollbar-thumb:hover { background: var(--or); }

/* Smooth section dividers */
section { position: relative; }
section:not(.dk):not(.vid):not(.hero):not(#news):not(#articles) {
  background: var(--bg);
}

/* Better h2 underline */
h2::after {
  background: linear-gradient(90deg, var(--or), var(--aq-lt)) !important;
  width: 64px !important;
  height: 4px !important;
  border-radius: 2px !important;
  box-shadow: 0 2px 6px rgba(217,119,66,.3);
}

/* Better button base */
.btn {
  transition: all .25s cubic-bezier(.4,0,.2,1);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.btn:hover { transform: translateY(-2px); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .hero { padding: 40px 0 70px !important; }
  .hero h1 { font-size: 1.65rem !important; }
  .trust-badge { font-size: .74rem; padding: 6px 11px; }
  .gq { padding: 18px; }
  .steps li { padding: 16px; }
}