/* ==========================================================================
   SERVICELINE — LIGHT PREMIUM THEME (default)
   Loaded AFTER core.css + components.css. Remaps the existing dark tokens to a
   warm-paper, light, premium palette so the whole site flips light at once, then
   patches components that hardcoded dark assumptions, and adds light-native
   primitives (app frames, dashboards, stat bands, proof strips, people scenes).
   Dark mode is preserved behind [data-theme="dark"] and a floating toggle.
   ========================================================================== */

/* Rounded, friendly headline face + clean body face (category convention: HCP Rubik /
   Inter, Jobber JobberPro / Inter). Makes the site read human, not industrial. */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  color-scheme: light;

  /* ---- Light surfaces ---- */
  --paper: #f4f1ea;        /* warm cream page background (category convention) */
  --surface: #ffffff;      /* card / panel white */
  --surface-2: #efeae0;    /* tinted band / inset */
  --surface-3: #e6dfd2;    /* deeper tint */

  /* ---- Type faces (rounded/warm headings, clean body) ---- */
  --font-heading: "Nunito", "Archivo", system-ui, sans-serif;
  --font-body-ui: "Inter", "Archivo", system-ui, sans-serif;
  --bg-grad-1: rgba(207,49,43,0.05);
  --bg-grad-2: rgba(36,58,92,0.05);

  /* ---- Light text ---- */
  --ink-text: #1b1714;     /* near-black headings on light */
  --body-text: #4a443c;    /* readable warm gray body on light */
  --muted-text: #7a7268;   /* labels / secondary */
  --faint-text: #a59c90;   /* micro labels */

  /* ---- Keep brand signal + metals ---- */
  --red: #cf312b; --red-bright: #e23b32; --red-deep: #a8231e; --red-glow: rgba(207,49,43,0.22);
  --gold-1: #8a6d1a; --gold-2: #9c7c1f; --gold-3: #6f5712;   /* darker gold so it reads on white */
  --brass-2: #9a7a30; --bronze-2: #9a5f30; --silver-2: #6d7683; --blue-1: #2f5aa8; --blue-2: #2f5aa8; --blue-3: #244a8c;

  /* ---- Light lines / shadows (depth instead of glow) ---- */
  --line: rgba(27,23,20,0.10);
  --line-strong: rgba(27,23,20,0.16);
  --shadow-1: 0 1px 2px rgba(27,23,20,0.05), 0 10px 30px rgba(27,23,20,0.08);
  --shadow-2: 0 2px 6px rgba(27,23,20,0.07), 0 24px 60px rgba(27,23,20,0.12);
  --shadow-card: 0 1px 2px rgba(27,23,20,0.04), 0 12px 28px rgba(27,23,20,0.08);
  --glow-red: 0 8px 26px rgba(207,49,43,0.22);

  /* ---- REMAP the old dark token names to light values, so existing component
           CSS (which references these) renders correctly on light automatically. ---- */
  --black: var(--paper);   /* page background */
  --ink: var(--surface);   /* card / panel background */
  --ink-2: var(--surface);
  --ink-3: var(--surface-2);
  --ink-4: var(--surface-3);
  --white: var(--ink-text);  /* headings that used color:var(--white) become dark text */
  --muted: var(--body-text);
  --muted-2: var(--muted-text);
}

/* ---- Page base on light ---- */
body {
  background: #f4f1ea;
  color: var(--body-text);
  font-family: var(--font-body-ui);
  font-size: 18px;
}
/* Rounded/warm headings + readable body on light (override core.css type faces) */
h1, h2, h3, h4, .logo-word, .quote { font-family: var(--font-heading); }
h1 { letter-spacing: -0.01em; }
.lede, p, li { font-family: var(--font-body-ui); }
body::before {
  background:
    radial-gradient(1100px 620px at 82% -8%, var(--bg-grad-1), transparent 60%),
    radial-gradient(900px 560px at -8% 22%, var(--bg-grad-2), transparent 60%);
}
body::after {
  background-image:
    linear-gradient(rgba(27,23,20,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,23,20,0.028) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 80%);
}
#scroll-progress { box-shadow: 0 0 10px var(--red-glow); }

/* ---- Type colors on light ---- */
h1, h2, h3, h4 { color: var(--ink-text); }
p { color: var(--body-text); }
p strong, li strong { color: var(--ink-text); }
.lede { color: #574f45; }
.eyebrow { color: var(--gold-2); }
.eyebrow.red { color: var(--red); }
.eyebrow.silver { color: #6d7683; }
.eyebrow.blue { color: var(--blue-1); }
.t-micro { color: var(--faint-text); }
.metal { -webkit-text-fill-color: transparent; }   /* keep metallic clip-text readable (gold stops are dark enough on white) */
.signal { color: var(--red); }

/* ---- Nav on light: translucent white, dark links ---- */
.nav.scrolled {
  background: rgba(251,248,242,0.86);
  border-bottom-color: var(--line);
}
.nav-links > li > a, .nav-links > li > button { color: #574f45; }
.nav-links > li > a:hover, .nav-links > li > button:hover,
.nav-links > li > a[aria-current="page"] { color: var(--ink-text); background: rgba(27,23,20,0.05); }
.nav-links > li > a[aria-current="page"] { color: var(--red); }
.logo-word { color: var(--ink-text); }
.logo-word em { color: var(--muted-text); }
.mega { background: rgba(255,255,255,0.98); border-color: var(--line-strong); }
.mega a:hover { background: rgba(207,49,43,0.06); }
.mega a .mi { border-color: var(--line-strong); color: var(--gold-2); background: linear-gradient(160deg, #fff, var(--surface-2)); }
.mega a .mt { color: var(--ink-text); }
.mega a .md { color: var(--muted-text); }
.nav-burger { border-color: var(--line-strong); }
.nav-burger span, .nav-burger span::before, .nav-burger span::after { background: var(--ink-text); }
.mobile-menu { background: rgba(251,248,242,0.98); }
.mobile-menu a { color: var(--ink-text); border-bottom-color: var(--line); }
.mobile-menu a:hover { color: var(--red); }
.mobile-menu .mm-label { color: var(--muted-text); }

/* ---- Surfaces ---- */
.panel { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-card); }
.card {
  background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-card);
}
.card::before { background: radial-gradient(600px 240px at var(--mx,50%) var(--my,0%), rgba(207,49,43,0.06), transparent 60%); }
.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.card .card-tag { color: var(--muted-text); }
.card p { color: var(--body-text); }
.card-gold { border-color: rgba(156,124,31,0.45); }
.card-red { border-color: rgba(207,49,43,0.4); }
.card-blue { border-color: rgba(47,90,168,0.4); }
.card-silver { border-color: rgba(109,118,131,0.4); }
.plate {
  background:
    linear-gradient(180deg, #fff, rgba(255,255,255,0) 30%),
    repeating-linear-gradient(0deg, rgba(27,23,20,0.012) 0 2px, transparent 2px 4px),
    linear-gradient(160deg, var(--surface-2), var(--surface));
  border-color: var(--line-strong); box-shadow: var(--shadow-2);
}
.chip { color: var(--body-text); border-color: var(--line-strong); background: rgba(27,23,20,0.02); }
.chip:hover { border-color: var(--gold-2); color: var(--gold-2); }
.badge-gold { color: var(--gold-2); border-color: rgba(156,124,31,0.4); background: rgba(156,124,31,0.08); }
.badge-red { color: var(--red); border-color: rgba(207,49,43,0.4); background: rgba(207,49,43,0.08); }
.badge-silver { color: #5d6571; border-color: rgba(109,118,131,0.4); background: rgba(109,118,131,0.08); }
.badge-blue { color: var(--blue-1); border-color: rgba(47,90,168,0.4); background: rgba(47,90,168,0.08); }
.badge-bronze { color: #8a5526; border-color: rgba(154,95,48,0.5); background: rgba(154,95,48,0.08); }

/* ---- Buttons: fix hardcoded text colors for light ---- */
.btn-primary { color: #fff; }                 /* white on red stays correct */
.btn-metal { color: var(--gold-2); background: linear-gradient(170deg, #fff, var(--surface-2)); border-color: rgba(156,124,31,0.5); }
.btn-metal:hover { color: var(--black); }
.btn-ghost { border-color: var(--line-strong); color: var(--ink-text); background: rgba(27,23,20,0.02); }
.btn-ghost:hover { border-color: #5d6571; background: rgba(27,23,20,0.05); }
.link-arrow { color: var(--gold-2); border-color: rgba(156,124,31,0.35); }
.link-arrow:hover { color: var(--gold-3); }
.link-arrow.red { color: var(--red); border-color: rgba(207,49,43,0.4); }

/* ---- Lists / tables / console on light ---- */
.check-list li { color: var(--body-text); border-bottom-color: var(--line); }
.x-list li { color: var(--muted-text); border-bottom-color: var(--line); }
.num-list li { border-bottom-color: var(--line); }
.num-list li p { color: var(--body-text); }
table.data th { color: var(--gold-2); border-bottom-color: var(--line-strong); background: rgba(27,23,20,0.02); }
table.data td { color: var(--body-text); border-bottom-color: var(--line); }
table.data td:first-child { color: var(--ink-text); }
table.data tbody tr:hover { background: rgba(207,49,43,0.04); }
.yes { color: var(--gold-2); } .no { color: var(--faint-text); } .partial { color: #8a5526; }
.console { background: #15120d; border-color: var(--line-strong); }   /* keep consoles dark as code blocks */
.console-bar { border-bottom-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); }
.console-bar .t { color: #9a948a; }
.console pre { color: #c2bcb2; }
kbd { border-color: var(--line-strong); background: var(--surface-2); color: var(--ink-text); }

/* ---- Tabs / version cards / accordion / timeline on light ---- */
.tabs-bar { border-color: var(--line); background: rgba(27,23,20,0.02); }
.tabs-bar [role="tab"] { color: var(--muted-text); }
.tabs-bar [role="tab"]:hover { color: var(--ink-text); }
.ver-card { border-color: var(--line); background: var(--surface); }
.ver-card:hover { border-color: var(--line-strong); }
.ver-card.is-active { border-color: rgba(156,124,31,0.55); box-shadow: var(--shadow-2); }
.ver-card .vnum { color: var(--muted-text); }
.ver-card p { color: var(--body-text); }
.acc-item { border-bottom-color: var(--line); }
.acc-head { color: var(--ink-text); }
.acc-head:hover { color: var(--red); }
.acc-body p { color: var(--body-text); }
.timeline::before { background: linear-gradient(180deg, var(--gold-2), var(--line) 85%); }
.tl-item::before { background: var(--paper); }
.tl-body p { color: var(--body-text); }
.step p { color: var(--body-text); }

/* ---- Device mockups on light ---- */
.browser { border-color: var(--line-strong); box-shadow: var(--shadow-2); background: var(--surface); }
.browser-bar { border-bottom-color: var(--line); background: linear-gradient(180deg, var(--surface-2), #fff); }
.browser-url { color: var(--muted-text); background: rgba(27,23,20,0.04); border-color: var(--line); }
.phone { background: linear-gradient(160deg, #2a2620, #0e0c09); }
.phone-screen { background: #0d0c09; border-color: rgba(255,255,255,0.12); }   /* phone screens stay dark = realistic device */
.phone.metal-edge { background: linear-gradient(160deg, #c9c2b6, #6f685c 30%, #b6afa2 70%, #5f594e); }
.ui-line { background: rgba(27,23,20,0.10); }

/* ---- Demo chrome on light ---- */
.demo { border-color: var(--line-strong); background: linear-gradient(175deg, #fff, var(--surface-2) 80%); box-shadow: var(--shadow-2); }
.demo-foot { border-top-color: var(--line); color: var(--muted-text); }
.ctl-btn { border-color: var(--line-strong); color: var(--body-text); background: rgba(27,23,20,0.02); }
.ctl-btn:hover { color: var(--ink-text); border-color: #5d6571; }
.ctl-btn.is-on { color: #fff; }
input[type="range"] { background: linear-gradient(90deg, var(--red) var(--fill,50%), var(--surface-3) var(--fill,50%)); }

/* ---- Forms on light ---- */
.field label { color: var(--muted-text); }
.field input, .field select, .field textarea { color: var(--ink-text); background: #fff; border-color: var(--line-strong); }
.field input::placeholder, .field textarea::placeholder { color: var(--faint-text); }

/* ---- Footer on light ---- */
.footer { background: linear-gradient(180deg, transparent, var(--surface-2) 30%, #efe8db); border-top-color: var(--line); }
.footer-blurb { color: var(--body-text); }
.footer-col h4 { color: var(--gold-2); }
.footer-col a { color: var(--body-text); }
.footer-col a:hover { color: var(--red); }
.footer-bottom { border-top-color: var(--line); color: var(--muted-text); }

/* ---- Callouts / quotes / CTA band on light ---- */
.callout { border-color: rgba(156,124,31,0.35); background: rgba(156,124,31,0.06); }
.callout.red { border-color: rgba(207,49,43,0.35); background: rgba(207,49,43,0.05); }
.callout p { color: var(--body-text); }
.quote { color: var(--ink-text); }
.quote::before { color: var(--gold-2); }
.quote-by { color: var(--muted-text); }
.cta-band {
  border-color: var(--line-strong);
  background:
    radial-gradient(700px 340px at 85% 20%, rgba(207,49,43,0.12), transparent 65%),
    radial-gradient(500px 300px at 10% 90%, rgba(156,124,31,0.10), transparent 60%),
    linear-gradient(165deg, #fff, var(--surface-2));
}
.orb-red { background: rgba(207,49,43,0.16); } .orb-gold { background: rgba(156,124,31,0.12); } .orb-blue { background: rgba(47,90,168,0.12); }

/* ==========================================================================
   NEW LIGHT-NATIVE PRIMITIVES (for the visual rebuild)
   ========================================================================== */

/* App window frame — a polished product screenshot container on light */
.app-frame {
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 16px; box-shadow: var(--shadow-2); overflow: hidden;
}
.app-frame .app-topbar {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.app-frame .app-topbar .dots { display: flex; gap: 6px; }
.app-frame .app-topbar .dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.app-frame .app-topbar .dots i:nth-child(1){background:#e0605a} .app-frame .app-topbar .dots i:nth-child(2){background:#e3b04b} .app-frame .app-topbar .dots i:nth-child(3){background:#7fb069}
.app-frame .app-topbar .app-crumb { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-text); margin-left: 8px; }
.app-frame .app-body { padding: 0; }
.app-side { background: var(--surface-2); border-right: 1px solid var(--line); }
.app-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.app-row .av { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; color: #fff; }

/* KPI / stat tile */
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow-card); }
.kpi .kpi-l { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-text); }
.kpi .kpi-v { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.7rem,3vw,2.4rem); color: var(--ink-text); line-height: 1.05; margin-top: 6px; }
.kpi .kpi-d { font-family: var(--font-mono); font-size: 0.7rem; margin-top: 6px; }
.kpi .kpi-d.up { color: #2f7d4f; } .kpi .kpi-d.down { color: var(--red); }

/* Big outcome stat band (hero proof strip) */
.stat-band { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-card); }
.stat-band .sb { padding: 26px 24px; }
.stat-band .sb + .sb { border-left: 1px solid var(--line); }
.stat-band .sb .n { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem,4vw,3rem); color: var(--ink-text); line-height: 1; }
.stat-band .sb .n.red { color: var(--red); }
.stat-band .sb .n.gold { color: var(--gold-2); }
.stat-band .sb .l { font-size: 0.86rem; color: var(--body-text); margin-top: 8px; }
@media (max-width:820px){ .stat-band{grid-template-columns:repeat(2,1fr)} .stat-band .sb:nth-child(3){border-left:0} .stat-band .sb:nth-child(n+3){border-top:1px solid var(--line)} }

/* Chart primitives (light) */
.chart-bars { display: flex; align-items: flex-end; gap: 10px; height: 150px; }
.chart-bars .bar { flex: 1; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--red-bright), var(--red)); position: relative; }
.chart-bars .bar.gold { background: linear-gradient(180deg, #d9b24a, var(--gold-2)); }
.chart-bars .bar.muted { background: var(--surface-3); }
.spark { display: block; width: 100%; height: 34px; }
.donut { transform: rotate(-90deg); }
.donut .track { stroke: var(--surface-3); }
.donut .val { stroke: var(--red); stroke-linecap: round; transition: stroke-dashoffset 1s var(--ease); }
.hbar { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.hbar > span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--gold-2), #d9b24a); }

/* Map mock (light) */
.map-mock { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line);
  background:
    radial-gradient(circle at 30% 30%, rgba(47,90,168,0.06), transparent 40%),
    linear-gradient(135deg, #eef1ee, #e6ebe6); }
.map-mock .map-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(27,23,20,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(27,23,20,0.05) 1px, transparent 1px); background-size: 38px 38px; }

/* Static dispatch-board job block (hero mockups): lay the four inline
   spans out as a 2x2 grid so WO id / service / time / status never collide. */
.hb-blk { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; row-gap: 3px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; margin: 8px; border-left-width: 3px; }
.hb-blk .wo { grid-column: 1; grid-row: 1; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; }
.hb-blk .st { grid-column: 2; grid-row: 1; justify-self: end; }
.hb-blk .svc { grid-column: 1 / -1; grid-row: 2; font-family: var(--font-body-ui); font-weight: 700; font-size: 0.86rem; color: var(--ink-text); line-height: 1.2; }
.hb-blk .tm { grid-column: 1 / -1; grid-row: 3; font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted-text); }
.hb-lane-head { display: flex; align-items: center; justify-content: space-between; }

/* Logo / proof strip (light) */
.logo-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 40px; }
.logo-strip span { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.04em; color: var(--muted-text); opacity: 0.8; }

/* People scene wrapper */
.scene { position: relative; border-radius: 16px; overflow: hidden; background: linear-gradient(160deg, #f3ede1, #e9e0d0); border: 1px solid var(--line); }
.scene svg { display: block; width: 100%; height: auto; }

/* Guarantee / risk-reversal badge */
.guarantee { display: inline-flex; align-items: center; gap: 12px; border: 1px solid rgba(47,125,79,0.4); background: rgba(47,125,79,0.07); border-radius: 12px; padding: 12px 18px; }
.guarantee .g-ico { width: 30px; height: 30px; border-radius: 50%; background: #2f7d4f; color: #fff; display: grid; place-items: center; font-weight: 800; flex-shrink: 0; }
.guarantee p { color: #245e3c; font-size: 0.9rem; margin: 0; }

/* Before / after stack */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ba .ba-card { border-radius: 14px; padding: 22px; border: 1px solid var(--line); }
.ba .ba-before { background: var(--surface-2); }
.ba .ba-after { background: var(--surface); border-color: rgba(47,125,79,0.35); box-shadow: var(--shadow-card); }
.ba .ba-tag { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; }
.ba .ba-before .ba-tag { color: var(--muted-text); } .ba .ba-after .ba-tag { color: #2f7d4f; }
@media (max-width:720px){ .ba{grid-template-columns:1fr} }

/* ==========================================================================
   FLOATING THEME TOGGLE
   ========================================================================== */
.theme-toggle {
  position: fixed; right: 20px; bottom: 20px; z-index: 220;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-2); display: grid; place-items: center;
  color: var(--ink-text); transition: transform 0.25s var(--ease);
}
.theme-toggle:hover { transform: translateY(-3px) scale(1.05); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .ic-sun { display: none; }
.theme-toggle .ic-moon { display: block; }

/* ==========================================================================
   DARK MODE (preserved): toggle back to the original dark look
   ========================================================================== */
[data-theme="dark"] { color-scheme: dark; }
[data-theme="dark"] {
  --paper: #0b0a08; --surface: #14120e; --surface-2: #1c1913; --surface-3: #25221c;
  --bg-grad-1: rgba(207,49,43,0.08); --bg-grad-2: rgba(79,127,224,0.05);
  --ink-text: #f7f5f1; --body-text: #cdc8bf; --muted-text: #a8a29a; --faint-text: #7c776e;
  --gold-1: #f9e7a0; --gold-2: #d4af37; --gold-3: #8a6d1a; --brass-2: #b08d3f; --bronze-2: #a4693a; --silver-2: #b9c0c9; --blue-1: #a8ccff; --blue-2: #4f7fe0;
  --line: rgba(255,255,255,0.08); --line-strong: rgba(255,255,255,0.16);
  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px rgba(0,0,0,0.45);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.06) inset, 0 24px 64px rgba(0,0,0,0.55);
  --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px rgba(0,0,0,0.45);
  --black: #0b0a08; --ink: #14120e; --ink-2: #1c1913; --ink-3: #25221c; --ink-4: #322e26;
  --white: #ffffff; --muted: #a8a29a; --muted-2: #7c776e;
}
[data-theme="dark"] body { background: #0b0a08; color: #cdc8bf; }
[data-theme="dark"] body::before { background: radial-gradient(1200px 700px at 80% -10%, rgba(207,49,43,0.08), transparent 60%), radial-gradient(900px 600px at -10% 30%, rgba(79,127,224,0.05), transparent 60%); }
[data-theme="dark"] body::after { background-image: linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px); }
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,[data-theme="dark"] h4 { color: #fff; }
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,[data-theme="dark"] h4,[data-theme="dark"] .logo-word,[data-theme="dark"] .quote { font-family: var(--font-heading); }
[data-theme="dark"] body { font-family: var(--font-body-ui); }
[data-theme="dark"] p { color: #cdc8bf; } [data-theme="dark"] p strong,[data-theme="dark"] li strong { color: #fff; }
[data-theme="dark"] .lede { color: #b8b2a8; }
[data-theme="dark"] .nav.scrolled { background: rgba(11,10,8,0.82); }
[data-theme="dark"] .nav-links > li > a,[data-theme="dark"] .nav-links > li > button { color: #c6c1b8; }
[data-theme="dark"] .nav-links > li > a:hover,[data-theme="dark"] .nav-links > li > button:hover,[data-theme="dark"] .nav-links > li > a[aria-current="page"] { color: #fff; background: rgba(255,255,255,0.05); }
[data-theme="dark"] .nav-links > li > a[aria-current="page"] { color: var(--gold-2); }
[data-theme="dark"] .logo-word { color: #fff; } [data-theme="dark"] .logo-word em { color: #7c776e; }
[data-theme="dark"] .mega { background: rgba(20,18,14,0.97); }
[data-theme="dark"] .mega a .mi { background: linear-gradient(160deg, #25221c, #14120e); }
[data-theme="dark"] .mega a .mt { color: #fff; } [data-theme="dark"] .mega a .md { color: #a8a29a; }
[data-theme="dark"] .mobile-menu { background: rgba(11,10,8,0.98); } [data-theme="dark"] .mobile-menu a { color: #f7f5f1; }
[data-theme="dark"] .card,[data-theme="dark"] .panel { background: linear-gradient(168deg,#1c1913,#14120e 75%); box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset,0 12px 32px rgba(0,0,0,0.45); }
[data-theme="dark"] .card p { color: #a8a29a; }
[data-theme="dark"] .plate { background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 30%), repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 2px, transparent 2px 4px), linear-gradient(160deg, #25221c, #0b0a08); }
[data-theme="dark"] .btn-metal { color: var(--gold-1); background: linear-gradient(170deg,#25221c,#14120e); }
[data-theme="dark"] .btn-ghost { color: #f7f5f1; background: rgba(255,255,255,0.02); }
[data-theme="dark"] table.data td { color: #c6c1b8; } [data-theme="dark"] table.data td:first-child { color: #fff; }
[data-theme="dark"] table.data tbody tr:hover { background: rgba(207,49,43,0.04); }
[data-theme="dark"] .no { color: #7c776e; }
[data-theme="dark"] .field input,[data-theme="dark"] .field select,[data-theme="dark"] .field textarea { color: #fff; background: rgba(0,0,0,0.35); }
[data-theme="dark"] .footer { background: linear-gradient(180deg, transparent, rgba(20,18,14,0.7) 30%, #0d0c09); }
[data-theme="dark"] .footer-col a { color: #a8a29a; } [data-theme="dark"] .footer-col a:hover { color: #fff; }
[data-theme="dark"] .cta-band { background: radial-gradient(700px 340px at 85% 20%, rgba(207,49,43,0.16), transparent 65%), radial-gradient(500px 300px at 10% 90%, rgba(212,175,55,0.08), transparent 60%), linear-gradient(165deg, #25221c, #0b0a08); }
[data-theme="dark"] .demo { background: linear-gradient(175deg, #1c1913, #0b0a08 80%); }
[data-theme="dark"] .ver-card { background: linear-gradient(170deg,#1c1913,#14120e); }
[data-theme="dark"] .kpi,[data-theme="dark"] .stat-band,[data-theme="dark"] .app-frame { background: #14120e; }
[data-theme="dark"] .kpi .kpi-v,[data-theme="dark"] .stat-band .sb .n { color: #fff; }
[data-theme="dark"] .map-mock { background: linear-gradient(135deg,#1a2018,#141814); }
[data-theme="dark"] .map-mock .map-grid { background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); }
[data-theme="dark"] .scene { background: linear-gradient(160deg,#1c1913,#14120e); }
[data-theme="dark"] .theme-toggle .ic-sun { display: block; } [data-theme="dark"] .theme-toggle .ic-moon { display: none; }
[data-theme="dark"] .guarantee p { color: #8fd0a8; }