/* ==========================================================================
   ZeroFy themes

   Loaded after styles.css by every page that sets data-theme: the eight
   demo-site-*.html samples, the static marketing pages (the 'zerofy' theme)
   and the Zlog. Each theme redefines the shared design tokens so the common
   header, nav, buttons and footer follow the palette automatically, then
   layers on its own character.
   ========================================================================== */

html[data-theme] {
  color-scheme: light;
}

html[data-theme][data-mode='dark'] {
  color-scheme: dark;
}

html[data-theme][data-mode] {
  color: var(--text);
  background: var(--bg);
}

/* --------------------------------------------------------------------------
   1. Palette — Minimalism (Demo Site 1)
   Monochrome, hairline borders, square corners, quiet type.
   -------------------------------------------------------------------------- */

html[data-theme='minimalism'] {
  --bg: #f5f5f3;
  --surface: #ffffff;
  --surface-strong: #eaeae6;
  --text: #141414;
  --muted: #71716e;
  --primary: #141414;
  --primary-soft: #e7e7e3;
  --secondary: #71716e;
  --border: #e3e3de;
  --accent: #141414;
  --halo: rgba(20, 20, 20, 0.05);
  --panel: rgba(255, 255, 255, 0.94);
  --header-bg: rgba(245, 245, 243, 0.88);
  --panel-shadow: 0 12px 32px rgba(20, 20, 20, 0.08);
  --shadow: 0 1px 0 rgba(20, 20, 20, 0.05);
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;
  --btn-bg: #141414;
  --btn-fg: #ffffff;
  --btn-shadow: none;
  --display-font: 'Inter', system-ui, -apple-system, sans-serif;
  --body-font: 'Inter', system-ui, -apple-system, sans-serif;
}

html[data-theme='minimalism'][data-mode='dark'] {
  --bg: #0b0b0b;
  --surface: #141414;
  --surface-strong: #1e1e1e;
  --text: #f4f4f2;
  --muted: #9a9a96;
  --primary: #f4f4f2;
  --primary-soft: #262626;
  --secondary: #9a9a96;
  --border: #262626;
  --accent: #f4f4f2;
  --halo: rgba(244, 244, 242, 0.06);
  --panel: rgba(20, 20, 20, 0.94);
  --header-bg: rgba(11, 11, 11, 0.88);
  --panel-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow: 0 1px 0 rgba(244, 244, 242, 0.04);
  --btn-bg: #f4f4f2;
  --btn-fg: #0b0b0b;
}

/* --------------------------------------------------------------------------
   2. Palette — Futuristic (Demo Site 2)
   Deep space blues, electric blue and violet, neon glow.
   -------------------------------------------------------------------------- */

html[data-theme='futuristic'] {
  --bg: #eef4ff;
  --surface: #ffffff;
  --surface-strong: #dce8ff;
  --text: #061531;
  --muted: #4a6187;
  --primary: #0b5fff;
  --primary-soft: #dde8ff;
  --secondary: #6d3bff;
  --border: #c7daf7;
  --accent: #0b5fff;
  --glow: #00c8ff;
  --halo: rgba(11, 95, 255, 0.14);
  --panel: rgba(255, 255, 255, 0.93);
  --header-bg: rgba(238, 244, 255, 0.85);
  --panel-shadow: 0 18px 48px rgba(11, 95, 255, 0.18);
  --shadow: 0 20px 60px rgba(11, 95, 255, 0.12);
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --btn-bg: linear-gradient(135deg, #0b5fff, #6d3bff);
  --btn-fg: #ffffff;
  --btn-shadow: 0 12px 34px rgba(11, 95, 255, 0.35);
  --display-font: 'Inter', system-ui, -apple-system, sans-serif;
  --body-font: 'Inter', system-ui, -apple-system, sans-serif;
}

html[data-theme='futuristic'][data-mode='dark'] {
  --bg: #04070f;
  --surface: #0a1122;
  --surface-strong: #111c36;
  --text: #dce9ff;
  --muted: #8aa2c8;
  --primary: #4d8dff;
  --primary-soft: #14254a;
  --secondary: #a78bfa;
  --border: #1c2c4e;
  --accent: #22d3ee;
  --glow: #22d3ee;
  --halo: rgba(34, 211, 238, 0.16);
  --panel: rgba(10, 17, 34, 0.93);
  --header-bg: rgba(4, 7, 15, 0.85);
  --panel-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  --btn-bg: linear-gradient(135deg, #4d8dff, #a78bfa);
  --btn-fg: #04070f;
  --btn-shadow: 0 12px 34px rgba(34, 211, 238, 0.28);
}

/* --------------------------------------------------------------------------
   3. Palette — Pixel art (Demo Site 3)
   Cream and ink in light, arcade green and hot pink in dark. Hard edges.
   -------------------------------------------------------------------------- */

html[data-theme='pixel'] {
  --bg: #fff3d6;
  --surface: #ffffff;
  --surface-strong: #ffe6a3;
  --text: #241a10;
  --muted: #7a6248;
  --primary: #e23d28;
  --primary-soft: #ffd3c7;
  --secondary: #17866b;
  --border: #241a10;
  --accent: #e23d28;
  --halo: rgba(226, 61, 40, 0.12);
  --panel: rgba(255, 255, 255, 0.96);
  --header-bg: rgba(255, 243, 214, 0.92);
  --panel-shadow: 8px 8px 0 rgba(36, 26, 16, 0.9);
  --shadow: 6px 6px 0 rgba(36, 26, 16, 0.9);
  --edge: 3px;
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;
  --btn-bg: #e23d28;
  --btn-fg: #ffffff;
  --btn-shadow: 5px 5px 0 #241a10;
  --display-font: 'Courier New', ui-monospace, SFMono-Regular, Menlo, monospace;
  --body-font: 'Courier New', ui-monospace, SFMono-Regular, Menlo, monospace;
}

html[data-theme='pixel'][data-mode='dark'] {
  --bg: #14101f;
  --surface: #1e1830;
  --surface-strong: #2c2348;
  --text: #f6eedd;
  --muted: #a493c4;
  --primary: #7ed957;
  --primary-soft: #223318;
  --secondary: #ff6b9d;
  --border: #0a0712;
  --accent: #7ed957;
  --halo: rgba(126, 217, 87, 0.12);
  --panel: rgba(30, 24, 48, 0.96);
  --header-bg: rgba(20, 16, 31, 0.92);
  --panel-shadow: 8px 8px 0 rgba(0, 0, 0, 0.9);
  --shadow: 6px 6px 0 rgba(0, 0, 0, 0.9);
  --btn-bg: #7ed957;
  --btn-fg: #14101f;
  --btn-shadow: 5px 5px 0 #0a0712;
}

/* --------------------------------------------------------------------------
   4. Palette — Clay style (Demo Site 4)
   Soft terracotta and sage, big radii, deep soft shadows.
   -------------------------------------------------------------------------- */

html[data-theme='clay'] {
  --bg: #fdf0e3;
  --surface: #ffffff;
  --surface-strong: #ffe7d2;
  --text: #4a3427;
  --muted: #8a7160;
  --primary: #e2725b;
  --primary-soft: #ffe0d0;
  --secondary: #6e9e82;
  --border: #f0d6c0;
  --accent: #e2725b;
  --halo: rgba(226, 114, 91, 0.18);
  --panel: rgba(255, 255, 255, 0.95);
  --header-bg: rgba(253, 240, 227, 0.9);
  --panel-shadow: 0 22px 50px rgba(160, 100, 70, 0.24);
  --shadow: 0 18px 40px rgba(160, 100, 70, 0.2);
  --r-sm: 14px;
  --r-md: 24px;
  --r-lg: 36px;
  --btn-bg: linear-gradient(135deg, #e2725b, #ef9a7d);
  --btn-fg: #ffffff;
  --btn-shadow: 0 14px 30px rgba(226, 114, 91, 0.4);
  --display-font: 'Inter', system-ui, -apple-system, sans-serif;
  --body-font: 'Inter', system-ui, -apple-system, sans-serif;
}

html[data-theme='clay'][data-mode='dark'] {
  --bg: #2a1f18;
  --surface: #38291f;
  --surface-strong: #473427;
  --text: #f7e8d8;
  --muted: #c2a794;
  --primary: #f0866f;
  --primary-soft: #4a342a;
  --secondary: #8fb89a;
  --border: #4a3729;
  --accent: #f0866f;
  --halo: rgba(240, 134, 111, 0.16);
  --panel: rgba(56, 41, 31, 0.95);
  --header-bg: rgba(42, 31, 24, 0.9);
  --panel-shadow: 0 22px 50px rgba(0, 0, 0, 0.5);
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  --btn-bg: linear-gradient(135deg, #f0866f, #f7a893);
  --btn-fg: #2a1f18;
  --btn-shadow: 0 14px 30px rgba(240, 134, 111, 0.28);
}

/* --------------------------------------------------------------------------
   4b. Palette — Retro (Demo Site 5)
   Muted mustard, rust and cream on a 70s paper ground, heavy rules.
   -------------------------------------------------------------------------- */

html[data-theme='retro'] {
  --bg: #f2e3c6;
  --surface: #fbf2df;
  --surface-strong: #e6cfa4;
  --text: #2f2418;
  --muted: #7a6446;
  --primary: #c2571f;
  --primary-soft: #f0d3a8;
  --secondary: #5f7a4a;
  --border: #2f2418;
  --accent: #d9a521;
  --halo: rgba(194, 87, 31, 0.14);
  --panel: rgba(251, 242, 223, 0.96);
  --header-bg: rgba(242, 227, 198, 0.92);
  --panel-shadow: 6px 6px 0 rgba(47, 36, 24, 0.9);
  --shadow: 5px 5px 0 rgba(47, 36, 24, 0.85);
  --edge: 2px;
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 6px;
  --btn-bg: #c2571f;
  --btn-fg: #fbf2df;
  --btn-shadow: 4px 4px 0 #2f2418;
  --display-font: 'Georgia', 'Times New Roman', serif;
  --body-font: 'Georgia', 'Times New Roman', serif;
}

html[data-theme='retro'][data-mode='dark'] {
  --bg: #241b12;
  --surface: #2f2418;
  --surface-strong: #3d2f1f;
  --text: #f2e3c6;
  --muted: #b39b76;
  --primary: #e8873f;
  --primary-soft: #4a3520;
  --secondary: #9dbb7d;
  --border: #0f0b07;
  --accent: #f0c04a;
  --halo: rgba(232, 135, 63, 0.16);
  --panel: rgba(47, 36, 24, 0.96);
  --header-bg: rgba(36, 27, 18, 0.92);
  --panel-shadow: 6px 6px 0 rgba(0, 0, 0, 0.85);
  --shadow: 5px 5px 0 rgba(0, 0, 0, 0.8);
  --btn-bg: #e8873f;
  --btn-fg: #241b12;
  --btn-shadow: 4px 4px 0 #0f0b07;
}

/* --------------------------------------------------------------------------
   4c. Palette — Pop art (Demo Site 6)
   Flat primaries, ink outlines, Ben-Day dots, no gradients in the chrome.
   -------------------------------------------------------------------------- */

html[data-theme='pop'] {
  --bg: #fff23d;
  --surface: #ffffff;
  --surface-strong: #ffd633;
  --text: #141414;
  --muted: #4a4a4a;
  --primary: #ff2e63;
  --primary-soft: #ffd9e2;
  --secondary: #00b3ff;
  --border: #141414;
  --accent: #7a2eff;
  --halo: rgba(255, 46, 99, 0.2);
  --panel: #ffffff;
  --header-bg: #fff23d;
  --panel-shadow: 8px 8px 0 #141414;
  --shadow: 6px 6px 0 #141414;
  --edge: 4px;
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;
  --btn-bg: #ff2e63;
  --btn-fg: #ffffff;
  --btn-shadow: 5px 5px 0 #141414;
  --display-font: 'Inter', system-ui, -apple-system, sans-serif;
  --body-font: 'Inter', system-ui, -apple-system, sans-serif;
}

html[data-theme='pop'][data-mode='dark'] {
  --bg: #1b1030;
  --surface: #2a1b48;
  --surface-strong: #3b2770;
  --text: #fff8e6;
  --muted: #c4b3e8;
  --primary: #ff5c85;
  --primary-soft: #4a1f3d;
  --secondary: #4dd4ff;
  --border: #08040f;
  --accent: #b98bff;
  --halo: rgba(255, 92, 133, 0.2);
  --panel: #2a1b48;
  --header-bg: #1b1030;
  --panel-shadow: 8px 8px 0 rgba(0, 0, 0, 0.9);
  --shadow: 6px 6px 0 rgba(0, 0, 0, 0.85);
  --btn-bg: #ff5c85;
  --btn-fg: #1b1030;
  --btn-shadow: 5px 5px 0 #08040f;
}

/* --------------------------------------------------------------------------
   4d. Palette — Maximalism (Demo Site 7)
   Everything at once: dense colour, stacked decoration, no empty space.
   -------------------------------------------------------------------------- */

html[data-theme='maximalism'] {
  --bg: #1a1033;
  --surface: #2b1a52;
  --surface-strong: #3d2670;
  --text: #fff6e9;
  --muted: #c3b0ea;
  --primary: #ffd23f;
  --primary-soft: #4a3383;
  --secondary: #ff4fa3;
  --border: #ffd23f;
  --accent: #35e0c4;
  --halo: rgba(255, 210, 63, 0.22);
  --panel: #2b1a52;
  --header-bg: #1a1033;
  --panel-shadow: 10px 10px 0 #ff4fa3, 20px 20px 0 #35e0c4;
  --shadow: 8px 8px 0 #ff4fa3;
  --edge: 3px;
  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 26px;
  --btn-bg: linear-gradient(120deg, #ffd23f, #ff4fa3 55%, #35e0c4);
  --btn-fg: #1a1033;
  --btn-shadow: 5px 5px 0 #ffd23f, 10px 10px 0 #ff4fa3;
  --display-font: 'Inter', system-ui, -apple-system, sans-serif;
  --body-font: 'Inter', system-ui, -apple-system, sans-serif;
}

html[data-theme='maximalism'][data-mode='dark'] {
  --bg: #0d0722;
  --surface: #1d0f42;
  --surface-strong: #2c1a5c;
  --text: #fff9ec;
  --muted: #ab95dd;
  --primary: #ffe066;
  --primary-soft: #3a2670;
  --secondary: #ff6fb8;
  --border: #ffe066;
  --accent: #4ff0d6;
  --halo: rgba(255, 224, 102, 0.24);
  --panel: #1d0f42;
  --header-bg: #0d0722;
  --panel-shadow: 10px 10px 0 #ff4fa3, 20px 20px 0 #35e0c4;
  --shadow: 8px 8px 0 #ff4fa3;
  --btn-bg: linear-gradient(120deg, #ffe066, #ff6fb8 55%, #4ff0d6);
  --btn-fg: #0d0722;
  --btn-shadow: 5px 5px 0 #ffe066, 10px 10px 0 #ff4fa3;
}

/* --------------------------------------------------------------------------
   4e. Palette — Editorial (Demo Site 8)
   Ink on warm paper, a single red rule, high-contrast serif headlines.
   -------------------------------------------------------------------------- */

html[data-theme='editorial'] {
  --bg: #f7f4ee;
  --surface: #ffffff;
  --surface-strong: #ece6da;
  --text: #16130f;
  --muted: #6b6357;
  --primary: #9b2226;
  --primary-soft: #f2ded9;
  --secondary: #2f4858;
  --border: #16130f;
  --accent: #9b2226;
  --halo: rgba(155, 34, 38, 0.1);
  --panel: rgba(255, 255, 255, 0.97);
  --header-bg: rgba(247, 244, 238, 0.92);
  --panel-shadow: 0 16px 40px rgba(22, 19, 15, 0.16);
  --shadow: 0 2px 0 rgba(22, 19, 15, 0.9);
  --edge: 1px;
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;
  --btn-bg: #9b2226;
  --btn-fg: #ffffff;
  --btn-shadow: none;
  --display-font: Georgia, 'Times New Roman', serif;
  --body-font: Georgia, 'Times New Roman', serif;
}

html[data-theme='editorial'][data-mode='dark'] {
  --bg: #14110d;
  --surface: #1e1a15;
  --surface-strong: #2a251e;
  --text: #f4efe6;
  --muted: #a89c8a;
  --primary: #e8564f;
  --primary-soft: #3d211f;
  --secondary: #7fa6bf;
  --border: #f4efe6;
  --accent: #e8564f;
  --halo: rgba(232, 86, 79, 0.12);
  --panel: rgba(30, 26, 21, 0.97);
  --header-bg: rgba(20, 17, 13, 0.92);
  --panel-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  --shadow: 0 2px 0 rgba(244, 239, 230, 0.85);
  --btn-bg: #e8564f;
  --btn-fg: #14110d;
  --btn-shadow: none;
}

/* --------------------------------------------------------------------------
   4f. Palette — Maximalism light/dark are both dark-on-colour by design;
   the only difference is depth. Retro and Editorial stay paper-based.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   4g. Palette — ZeroFy (the live site and the Zlog)
   Retro, in an avocado-harvest combination. Same character as Demo Site 5
   (Georgia, 2px ink borders, hard offset shadows, small radii) in a colour
   combination of its own, so the marketing pages and the blog read as one
   printed piece while the eight demos stay eight separate samples.

   Paper stock in both modes, like Retro and Editorial. --border is the ink
   itself, which is what makes the heavy rules work.
   -------------------------------------------------------------------------- */

html[data-theme='zerofy'] {
  --bg: #f0e7d4;
  --surface: #f8f1e0;
  --surface-strong: #e3d4b4;
  --text: #2b2b1c;
  --muted: #5f5e40;
  --primary: #486424;
  --primary-soft: #dfe7c8;
  --secondary: #a04a2c;
  --border: #2b2b1c;
  --accent: #d99a1e;
  --on-accent: #2b2b1c;
  --halo: rgba(72, 100, 36, 0.12);
  --panel: rgba(248, 241, 224, 0.96);
  --header-bg: rgba(240, 231, 212, 0.92);
  --panel-shadow: 6px 6px 0 rgba(43, 43, 28, 0.9);
  --shadow: 5px 5px 0 rgba(43, 43, 28, 0.85);
  --edge: 2px;
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 6px;
  --btn-bg: #486424;
  --btn-fg: #f8f1e0;
  --btn-shadow: 4px 4px 0 #2b2b1c;
  --display-font: 'Georgia', 'Times New Roman', serif;
  --body-font: 'Georgia', 'Times New Roman', serif;
}

html[data-theme='zerofy'][data-mode='dark'] {
  --bg: #1e1f16;
  --surface: #27291d;
  --surface-strong: #323425;
  --text: #f0e7d4;
  --muted: #a8a884;
  --primary: #a3c95c;
  --primary-soft: #33381f;
  --secondary: #e08257;
  --border: #0e0f0a;
  --accent: #e0a92e;
  --on-accent: #1e1f16;
  --halo: rgba(163, 201, 92, 0.14);
  --panel: rgba(39, 41, 29, 0.96);
  --header-bg: rgba(30, 31, 22, 0.92);
  --panel-shadow: 6px 6px 0 rgba(0, 0, 0, 0.85);
  --shadow: 5px 5px 0 rgba(0, 0, 0, 0.8);
  --btn-bg: #a3c95c;
  --btn-fg: #1e1f16;
  --btn-shadow: 4px 4px 0 #0e0f0a;
}

/* --------------------------------------------------------------------------
   5. Re-skin the shared components
   styles.css used to hard-code warm orange surfaces; they are now all tokens,
   so the shared chrome below mostly confirms what the palette already set.
   The mobile nav panel is handled in its media query.
   -------------------------------------------------------------------------- */

html[data-theme] body {
  font-family: var(--body-font);
  background:
    radial-gradient(circle at top left, var(--halo), transparent 32%),
    var(--bg);
  color: var(--text);
}

html[data-theme] .site-header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
}

html[data-theme] .brand,
html[data-theme] h1,
html[data-theme] h2,
html[data-theme] h3 {
  font-family: var(--display-font);
  color: var(--text);
}

html[data-theme] .nav-dropdown-menu {
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--panel-shadow);
}

html[data-theme] .nav-dropdown-menu a:hover,
html[data-theme] .nav-dropdown-menu a:focus-visible {
  background: var(--primary-soft);
  color: var(--primary);
}

html[data-theme] .nav-dropdown-toggle[aria-expanded='true'] {
  background: var(--primary-soft);
  color: var(--primary);
}

html[data-theme] .mobile-nav-toggle {
  background: var(--primary-soft);
  color: var(--primary);
}

html[data-theme] .button {
  border-radius: var(--r-lg);
  font-family: var(--body-font);
}

html[data-theme] .button-primary {
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: var(--btn-shadow);
}

html[data-theme] .button-secondary {
  background: var(--surface-strong);
  color: var(--text);
  border: 1px solid var(--border);
}

html[data-theme] .button-secondary:hover,
html[data-theme] .button-secondary:focus-visible {
  background: var(--surface);
}

html[data-theme] .eyebrow,
html[data-theme] .demo-kicker {
  color: var(--primary);
}

html[data-theme] .service-card,
html[data-theme] .link-card,
html[data-theme] .blog-card,
html[data-theme] .process-step,
html[data-theme] .contact-form,
html[data-theme] .contact-info {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}

html[data-theme] .section-light {
  background: var(--bg);
}

html[data-theme] .section-dark {
  background: var(--surface);
}

html[data-theme] .site-footer {
  background: var(--surface-strong);
  border-top: 1px solid var(--border);
  color: var(--muted);
}

html[data-theme] .footer-nav a {
  color: var(--muted);
}

html[data-theme] .footer-nav a:hover,
html[data-theme] .footer-nav a:focus-visible {
  color: var(--primary);
}

html[data-theme] .page-loader {
  background: var(--panel);
}

html[data-theme] .loader-card {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--panel-shadow);
}

/* --------------------------------------------------------------------------
   6. Demo page building blocks
   -------------------------------------------------------------------------- */

.demo-hero {
  position: relative;
  padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}

.demo-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.1rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.demo-title {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(2.4rem, 6vw, 4.25rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.demo-lede {
  margin: 1.25rem 0 0;
  max-width: 56ch;
  color: var(--muted);
  font-size: 1.06rem;
}

.demo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.2rem;
}

.demo-section {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.demo-section--alt {
  background: var(--bg);
}

.demo-grid {
  display: grid;
  gap: 1.3rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.demo-card {
  position: relative;
  padding: 1.7rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--text);
}

.demo-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 700;
}

.demo-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.demo-heading {
  margin: 0 0 2.2rem;
  max-width: 46ch;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 800;
}

.demo-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-swatch {
  width: 78px;
}

.demo-swatch__chip {
  display: block;
  height: 62px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--swatch);
}

.demo-swatch__name {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.demo-swatch__code {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--display-font);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  opacity: 0.75;
}

.demo-note {
  margin: 2.4rem 0 0;
  padding: 1.1rem 1.3rem;
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: 0.92rem;
}

/* --------------------------------------------------------------------------
   7. Light / dark switcher
   -------------------------------------------------------------------------- */

.demo-mode {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.demo-mode__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--body-font);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.demo-mode__btn:hover,
.demo-mode__btn:focus-visible {
  background: var(--primary-soft);
  color: var(--primary);
  transform: translateY(-1px);
}

.demo-mode__icon {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.demo-mode__icon--sun,
html[data-theme][data-mode='light'] .demo-mode__icon--moon {
  display: block;
}

.demo-mode__icon--moon,
html[data-theme][data-mode='light'] .demo-mode__icon--sun {
  display: none;
}

.header-end {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* --------------------------------------------------------------------------
/* --------------------------------------------------------------------------
   8. Extended demo content
   Building blocks for the longer demo pages: hero tags, a stat strip, a type
   specimen, a spec table, a checklist, numbered steps, fit panels, an FAQ,
   a quote, a gallery of the other themes and a closing call to action.
   -------------------------------------------------------------------------- */

.demo-sub {
  margin: -1.2rem 0 2.4rem;
  max-width: 64ch;
  color: var(--muted);
  font-size: 1.02rem;
}

.demo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.7rem 0 0;
  padding: 0;
  list-style: none;
}

.demo-tag {
  padding: 0.34rem 0.78rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.demo-stats {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-stat {
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
}

.demo-stat__value {
  display: block;
  font-family: var(--display-font);
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--primary);
}

.demo-stat__label {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.95rem;
  font-weight: 700;
}

.demo-stat__note {
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.demo-spec-layout {
  display: grid;
  gap: 2.4rem;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
}

.demo-specimen {
  display: grid;
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-specimen__row {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 1.2rem;
  align-items: baseline;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--border);
}

.demo-specimen__row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.demo-specimen__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.demo-specimen__sample {
  margin: 0;
  overflow-wrap: anywhere;
}

.demo-specimen__sample--display {
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.demo-specimen__sample--heading {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.demo-specimen__sample--title {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
}

.demo-specimen__sample--body {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

.demo-specimen__sample--caption {
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.demo-specs {
  margin: 0;
  border-top: 1px solid var(--border);
}

.demo-spec {
  display: grid;
  grid-template-columns: minmax(104px, 0.8fr) minmax(0, 1.3fr);
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--border);
}

.demo-spec dt {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
}

.demo-spec dd {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.demo-spec code {
  font-family: var(--display-font);
  font-size: 0.85em;
}
.demo-checklist {
  display: grid;
  gap: 1.3rem;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.95rem;
  align-items: start;
}

.demo-check__mark {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: var(--r-sm);
  background: var(--primary-soft);
  color: var(--primary);
}

.demo-check__mark svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.demo-check h3 {
  margin: 0 0 0.3rem;
  font-size: 1rem;
  font-weight: 700;
}

.demo-check p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.demo-steps {
  display: grid;
  gap: 1.3rem;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-step {
  padding: 1.5rem 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
}

.demo-step__num {
  display: inline-grid;
  place-items: center;
  min-width: 2.2rem;
  height: 2.2rem;
  margin-bottom: 0.9rem;
  padding: 0 0.5rem;
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--display-font);
  font-size: 0.95rem;
  font-weight: 800;
}

.demo-step h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.demo-step p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.demo-split {
  display: grid;
  gap: 1.3rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.demo-panel {
  padding: 1.6rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
}

.demo-panel--avoid {
  border-style: dashed;
}

.demo-panel h3 {
  margin: 0 0 1.1rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.demo-panel ul {
  display: grid;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-panel li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--muted);
  font-size: 0.93rem;
}

.demo-panel li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--r-sm);
  background: var(--primary);
}

.demo-panel--avoid li::before {
  background: var(--border);
}


.demo-faq {
  display: grid;
  gap: 0.8rem;
  max-width: 860px;
  margin: 0;
}

.demo-faq details {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
  overflow: hidden;
}

.demo-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.05rem 1.3rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.demo-faq summary::-webkit-details-marker {
  display: none;
}

.demo-faq summary::marker {
  content: '';
}

.demo-faq summary::after {
  content: '';
  flex: none;
  width: 0.65rem;
  height: 0.65rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-0.15rem);
  transition: transform 0.2s ease;
}

.demo-faq details[open] summary::after {
  transform: rotate(-135deg) translateY(-0.15rem);
}

.demo-faq summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -3px;
}

.demo-faq__body {
  padding: 0 1.3rem 1.25rem;
}

.demo-faq__body p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
}

.demo-quote {
  margin: 2.6rem 0 0;
  max-width: 780px;
  padding: 1.9rem 2rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
}

.demo-quote blockquote {
  margin: 0;
}

.demo-quote__text {
  margin: 0;
  font-size: clamp(1.08rem, 2.4vw, 1.38rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.demo-quote__text::before {
  content: '\201C';
}

.demo-quote__text::after {
  content: '\201D';
}

.demo-quote figcaption {
  margin-top: 1.1rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.demo-gallery {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-tile {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.demo-tile:hover,
.demo-tile:focus-visible {
  transform: translateY(-4px);
  border-color: var(--primary);
  box-shadow: var(--panel-shadow);
}

.demo-tile__theme {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.demo-tile__name {
  font-family: var(--display-font);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.demo-tile__desc {
  margin: 0;
  flex: 1;
  color: var(--muted);
  font-size: 0.92rem;
}

.demo-tile__go {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
}

.demo-tile__go::after {
  content: '\2192';
  transition: transform 0.2s ease;
}

.demo-tile:hover .demo-tile__go::after,
.demo-tile:focus-visible .demo-tile__go::after {
  transform: translateX(4px);
}

.demo-cta {
  text-align: center;
}

.demo-cta .demo-heading,
.demo-cta .demo-sub {
  margin-left: auto;
  margin-right: auto;
}

.demo-cta .demo-actions {
  justify-content: center;
}

.demo-cta__note {
  margin: 1.8rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}


/* ---- Minimalism: the same hairline treatment on the new blocks ---- */

html[data-theme='minimalism'] .demo-stat,
html[data-theme='minimalism'] .demo-step,
html[data-theme='minimalism'] .demo-panel,
html[data-theme='minimalism'] .demo-tile,
html[data-theme='minimalism'] .demo-quote {
  padding: 1.4rem 0 0;
  background: transparent;
  border: none;
  border-top: 1px solid var(--text);
  border-radius: 0;
}

html[data-theme='minimalism'] .demo-faq details {
  background: transparent;
  border-radius: 0;
}

html[data-theme='minimalism'] .demo-panel--avoid {
  border-top-style: dashed;
}

html[data-theme='minimalism'] .demo-tag {
  border-radius: 0;
}

html[data-theme='minimalism'] .demo-check__mark {
  border-radius: 0;
  background: var(--text);
  color: var(--bg);
}

/* ---- Futuristic: halo and edge light on the new blocks ---- */

html[data-theme='futuristic'] .demo-stat,
html[data-theme='futuristic'] .demo-step,
html[data-theme='futuristic'] .demo-panel {
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--border), 0 18px 44px var(--halo);
}

html[data-theme='futuristic'] .demo-check__mark {
  box-shadow: 0 0 0 1px var(--accent), 0 0 18px var(--halo);
}

html[data-theme='futuristic'] .demo-faq details[open] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 18px 40px var(--halo);
}

/* ---- Pixel art: chunky borders and hard lifts ---- */

html[data-theme='pixel'] .demo-stat,
html[data-theme='pixel'] .demo-step,
html[data-theme='pixel'] .demo-panel,
html[data-theme='pixel'] .demo-tile,
html[data-theme='pixel'] .demo-quote,
html[data-theme='pixel'] .demo-faq details,
html[data-theme='pixel'] .demo-tag {
  border-width: 3px;
  border-radius: 0;
}

html[data-theme='pixel'] .demo-stat,
html[data-theme='pixel'] .demo-step,
html[data-theme='pixel'] .demo-panel,
html[data-theme='pixel'] .demo-quote {
  box-shadow: var(--shadow);
}

html[data-theme='pixel'] .demo-tile:hover,
html[data-theme='pixel'] .demo-tile:focus-visible {
  transform: translate(-3px, -3px);
  border-color: var(--border);
  box-shadow: 8px 8px 0 var(--border);
}

html[data-theme='pixel'] .demo-tile__go::after {
  content: '\00BB';
}

html[data-theme='pixel'] .demo-step__num {
  border: 3px solid var(--border);
  box-shadow: 3px 3px 0 var(--border);
}

/* ---- Clay: moulded surfaces on the new blocks ---- */

html[data-theme='clay'] .demo-stat,
html[data-theme='clay'] .demo-step,
html[data-theme='clay'] .demo-panel,
html[data-theme='clay'] .demo-quote,
html[data-theme='clay'] .demo-faq details {
  background: linear-gradient(160deg, var(--surface), var(--bg));
  box-shadow: var(--shadow), inset 0 2px 0 rgba(255, 255, 255, 0.6);
}

html[data-theme='clay'][data-mode='dark'] .demo-stat,
html[data-theme='clay'][data-mode='dark'] .demo-step,
html[data-theme='clay'][data-mode='dark'] .demo-panel,
html[data-theme='clay'][data-mode='dark'] .demo-quote,
html[data-theme='clay'][data-mode='dark'] .demo-faq details {
  box-shadow: var(--shadow), inset 0 2px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme='clay'] .demo-tile:hover,
html[data-theme='clay'] .demo-tile:focus-visible {
  transform: translateY(-6px) scale(1.01);
}

/* ---- Extended content on small screens ---- */

@media (max-width: 860px) {
  .demo-spec-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.2rem;
  }
}

@media (max-width: 520px) {
  .demo-specimen__row,
  .demo-spec {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.3rem;
  }

  .demo-quote {
    padding: 1.5rem 1.3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .demo-tile,
  .demo-tile:hover,
  .demo-tile:focus-visible,
  .demo-faq summary::after,
  .demo-tile__go::after {
    transition: none;
    transform: none;
  }
}




   /* 9. Character — Minimalism
   -------------------------------------------------------------------------- */

html[data-theme='minimalism'] .demo-kicker {
  color: var(--muted);
  letter-spacing: 0.24em;
}

html[data-theme='minimalism'] .demo-title {
  letter-spacing: -0.045em;
  font-weight: 800;
}

html[data-theme='minimalism'] .demo-hero::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: var(--border);
}

html[data-theme='minimalism'] .demo-card {
  background: transparent;
  border: none;
  border-top: 1px solid var(--text);
  border-radius: 0;
  padding: 1.5rem 0 0;
}

html[data-theme='minimalism'] .demo-section {
  border-top: 1px solid var(--border);
}

html[data-theme='minimalism'] .demo-swatch__chip,
html[data-theme='minimalism'] .demo-note {
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   10. Character — Futuristic
   -------------------------------------------------------------------------- */

html[data-theme='futuristic'] .demo-title {
  background: linear-gradient(120deg, var(--text) 30%, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html[data-theme='futuristic'] .demo-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 70% 25%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 70% 25%, #000 0%, transparent 70%);
  opacity: 0.7;
  pointer-events: none;
}

html[data-theme='futuristic'] .demo-hero > .container,
html[data-theme='pixel'] .demo-hero > .container,
html[data-theme='clay'] .demo-hero > .container {
  position: relative;
}

html[data-theme='futuristic'] .demo-card {
  background: var(--surface);
  box-shadow:
    0 0 0 1px var(--border),
    0 18px 44px var(--halo);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

html[data-theme='futuristic'] .demo-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px var(--accent),
    0 22px 56px var(--halo);
}

html[data-theme='futuristic'] .demo-kicker::before {
  content: '';
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}

/* --------------------------------------------------------------------------
   11. Character — Pixel art
   -------------------------------------------------------------------------- */

html[data-theme='pixel'] .demo-kicker {
  letter-spacing: 0.1em;
}

html[data-theme='pixel'] .demo-title {
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 4px 4px 0 var(--primary-soft);
}

html[data-theme='pixel'] .demo-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(45deg, var(--surface-strong) 25%, transparent 25%),
    linear-gradient(-45deg, var(--surface-strong) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--surface-strong) 75%),
    linear-gradient(-45deg, transparent 75%, var(--surface-strong) 75%);
  background-size: 32px 32px;
  background-position: 0 0, 0 16px, 16px -16px, -16px 0;
  opacity: 0.55;
  pointer-events: none;
}

html[data-theme='pixel'] .demo-card {
  background: var(--surface);
  border: 3px solid var(--border);
  border-radius: 0;
  box-shadow: var(--shadow);
}

html[data-theme='pixel'] .demo-swatch__chip {
  border: 3px solid var(--border);
  border-radius: 0;
}

html[data-theme='pixel'] .demo-note {
  border: 3px dashed var(--border);
  border-radius: 0;
}

html[data-theme='pixel'] .demo-mode__btn,
html[data-theme='pixel'] .button {
  border-radius: 0;
}

html[data-theme='pixel'] .button:hover,
html[data-theme='pixel'] .button:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--border);
}

/* --------------------------------------------------------------------------
   12. Character — Clay style
   -------------------------------------------------------------------------- */

html[data-theme='clay'] .demo-card {
  background: linear-gradient(160deg, var(--surface), var(--bg));
  border: 1px solid var(--border);
  box-shadow:
    var(--shadow),
    inset 0 2px 0 rgba(255, 255, 255, 0.6);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

html[data-theme='clay'][data-mode='dark'] .demo-card {
  box-shadow:
    var(--shadow),
    inset 0 2px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme='clay'] .demo-card:hover {
  transform: translateY(-6px) scale(1.01);
}

html[data-theme='clay'] .demo-kicker {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--primary-soft);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7);
}

html[data-theme='clay'] .demo-swatch__chip {
  border: none;
  border-radius: 20px;
  box-shadow: var(--shadow);
}

html[data-theme='clay'] .demo-mode__btn {
  border: none;
  box-shadow: var(--shadow);
}

html[data-theme='clay'] .demo-hero::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -100px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--primary-soft), transparent 70%);
  opacity: 0.8;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   12b. Character — Retro (Demo Site 5)
   -------------------------------------------------------------------------- */

html[data-theme='retro'] .demo-kicker {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--accent);
  color: #2f2418;
  font-weight: 700;
  letter-spacing: 0.18em;
}

html[data-theme='retro'] .demo-title {
  font-style: italic;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

html[data-theme='retro'] .demo-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--halo) 2px, transparent 2px);
  background-size: 16px 16px;
  pointer-events: none;
}

html[data-theme='retro'] .demo-card {
  box-shadow: var(--shadow);
}

html[data-theme='retro'] .demo-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 rgba(47, 36, 24, 0.85);
}

html[data-theme='retro'] .demo-tag {
  border-width: 2px;
  border-color: var(--border);
  font-family: var(--display-font);
  letter-spacing: 0.04em;
}

html[data-theme='retro'] .demo-heading {
  padding-bottom: 0.7rem;
  border-bottom: 3px double var(--border);
}

html[data-theme='retro'] .demo-swatch__chip {
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: 3px 3px 0 rgba(47, 36, 24, 0.7);
}

/* --------------------------------------------------------------------------
   12c. Character — Pop art (Demo Site 6)
   -------------------------------------------------------------------------- */

html[data-theme='pop'] .demo-kicker {
  display: inline-block;
  padding: 0.4rem 1rem;
  border: var(--edge) solid var(--border);
  background: var(--secondary);
  color: #141414;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 var(--border);
  transform: rotate(-2deg);
}

html[data-theme='pop'] .demo-title {
  text-transform: uppercase;
  line-height: 0.94;
  letter-spacing: -0.045em;
  text-shadow: 5px 5px 0 var(--secondary);
}

html[data-theme='pop'] .demo-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--border) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  opacity: 0.22;
  pointer-events: none;
}

html[data-theme='pop'] .demo-card {
  border-width: var(--edge);
  box-shadow: var(--shadow);
}

html[data-theme='pop'] .demo-card:hover {
  transform: translate(-3px, -3px) rotate(-0.6deg);
  box-shadow: 9px 9px 0 var(--border);
}

html[data-theme='pop'] .demo-step:nth-child(odd) {
  background: var(--primary-soft);
}

html[data-theme='pop'] .demo-swatch__chip {
  border: var(--edge) solid var(--border);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--border);
}

html[data-theme='pop'] .demo-mode__btn {
  border-width: var(--edge);
  box-shadow: 3px 3px 0 var(--border);
}

/* --------------------------------------------------------------------------
   12d. Character — Maximalism (Demo Site 7)
   -------------------------------------------------------------------------- */

html[data-theme='maximalism'] .demo-kicker {
  display: inline-block;
  padding: 0.45rem 1.1rem;
  border: 2px solid var(--border);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  color: #1a1033;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

html[data-theme='maximalism'] .demo-title {
  line-height: 0.96;
  letter-spacing: -0.05em;
  text-shadow: 4px 4px 0 var(--secondary), 8px 8px 0 var(--accent);
}

html[data-theme='maximalism'] .demo-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, var(--halo) 0 12px, transparent 12px 24px),
    repeating-linear-gradient(-45deg, rgba(53, 224, 196, 0.12) 0 12px, transparent 12px 24px);
  pointer-events: none;
}

html[data-theme='maximalism'] .demo-card {
  border-width: 2px;
  border-color: var(--border);
  box-shadow: var(--shadow);
}

html[data-theme='maximalism'] .demo-card:nth-child(2n) {
  background: var(--surface-strong);
}

html[data-theme='maximalism'] .demo-card:hover {
  transform: translateY(-6px) rotate(-0.8deg);
  box-shadow: 12px 12px 0 var(--secondary), 22px 22px 0 var(--accent);
}

html[data-theme='maximalism'] .demo-tag {
  border-color: var(--accent);
  color: var(--accent);
}

html[data-theme='maximalism'] .demo-stat__value {
  color: var(--accent);
  text-shadow: 3px 3px 0 var(--secondary);
}

html[data-theme='maximalism'] .demo-swatch__chip {
  border: 2px solid var(--border);
  border-radius: 10px;
  box-shadow: 4px 4px 0 var(--secondary);
}

/* --------------------------------------------------------------------------
   12e. Character — Editorial (Demo Site 8)
   -------------------------------------------------------------------------- */

html[data-theme='editorial'] .demo-kicker {
  display: inline-block;
  padding-bottom: 0.4rem;
  border-bottom: 3px solid var(--primary);
  color: var(--primary);
  font-family: var(--body-font);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

html[data-theme='editorial'] .demo-title {
  font-style: italic;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

html[data-theme='editorial'] .demo-heading {
  font-style: italic;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}

html[data-theme='editorial'] .demo-card {
  border-width: 0 0 1px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

html[data-theme='editorial'] .demo-card:hover {
  transform: none;
  color: var(--primary);
}

html[data-theme='editorial'] .demo-tag {
  border-color: var(--border);
  border-radius: 0;
  background: transparent;
  font-family: var(--body-font);
  letter-spacing: 0.06em;
}

html[data-theme='editorial'] .demo-stat__value {
  font-style: italic;
}

html[data-theme='editorial'] .demo-swatch__chip {
  border: 1px solid var(--border);
  border-radius: 0;
}

html[data-theme='editorial'] .demo-quote__text {
  font-style: italic;
}

/* --------------------------------------------------------------------------
   13. Character — ZeroFy (the live site and the Zlog)
   The eight demos style .demo-* building blocks, which never appear on the
   marketing pages. These are the same Retro character, applied to the real
   page components: the paper ground, the heavy rules, the ink borders and
   the hard offset shadows. Everything below reads tokens only, so the site
   and the Zlog stay identical and follow light/dark on their own.
   -------------------------------------------------------------------------- */

/* The halftone dot ground, the same one the Zlog paints on its body. Every
   section here has an opaque background, so the dots go on the sections. */
html[data-theme='zerofy'] .section-light,
html[data-theme='zerofy'] .section-dark,
html[data-theme='zerofy'] .hero,
html[data-theme='zerofy'] .page-hero,
html[data-theme='zerofy'] .home-main {
  background-color: var(--bg);
  background-image: radial-gradient(var(--halo) 2px, transparent 2px);
  background-size: 16px 16px;
}

/* The hairline that used to separate the home page sections becomes a printed
   double rule, the way the Zlog rules off its masthead and its share block. */
html[data-theme='zerofy'] .home-main > section + section::before {
  height: 0;
  margin: calc(var(--home-gap) / 2) 0;
  border-top: 3px double var(--border);
  background: none;
}

/* --- Type ---------------------------------------------------------------- */

html[data-theme='zerofy'] h1,
html[data-theme='zerofy'] .section-heading h2 {
  font-style: italic;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

html[data-theme='zerofy'] .section-heading h2,
html[data-theme='zerofy'] .article-content h2,
html[data-theme='zerofy'] .content-grid h2 {
  padding-bottom: 0.7rem;
  border-bottom: 3px double var(--border);
}

/* The eyebrow becomes a printed chip, the same shape as the Zlog kicker. */
html[data-theme='zerofy'] .eyebrow {
  display: inline-block;
  /* .section-heading is a grid and .page-hero is a flex column, so without
     these the chip would stretch to the full width of the section. */
  align-self: flex-start;
  justify-self: start;
  width: auto;
  margin-bottom: 1.1rem;
  padding: 0.35rem 0.9rem;
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
}

html[data-theme='zerofy'] .copy {
  font-size: 1.08rem;
}

/* --- Cards --------------------------------------------------------------- */

/* One treatment for every card on the site, so a service card, a link card
   and a work card all read as the same printed block. */
html[data-theme='zerofy'] .service-card,
html[data-theme='zerofy'] .link-card,
html[data-theme='zerofy'] .blog-card,
html[data-theme='zerofy'] .process-step,
html[data-theme='zerofy'] .contact-form,
html[data-theme='zerofy'] .contact-info,
html[data-theme='zerofy'] .work-card {
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
}

html[data-theme='zerofy'] .service-card:hover,
html[data-theme='zerofy'] .link-card:hover,
html[data-theme='zerofy'] .blog-card:hover,
html[data-theme='zerofy'] .work-card:hover {
  transform: translate(-2px, -2px);
  border-color: var(--border);
  box-shadow: 7px 7px 0 var(--border);
}

html[data-theme='zerofy'] .service-card h3,
html[data-theme='zerofy'] .process-step h3,
html[data-theme='zerofy'] .link-card h3,
html[data-theme='zerofy'] .blog-card h2,
html[data-theme='zerofy'] .work-card__name {
  font-style: italic;
  letter-spacing: -0.02em;
}

html[data-theme='zerofy'] .step-number {
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 3px 3px 0 var(--border);
}

/* --- Buttons ------------------------------------------------------------- */

html[data-theme='zerofy'] .button {
  border: 2px solid var(--border);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

html[data-theme='zerofy'] .button:hover,
html[data-theme='zerofy'] .button:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--border);
}

html[data-theme='zerofy'] .button-secondary:hover,
html[data-theme='zerofy'] .button-secondary:focus-visible {
  background: var(--accent);
  color: var(--on-accent);
}

/* --- Chips --------------------------------------------------------------- */

/* The price banner and the work status flags become the same printed chip, so
   they match the eyebrow and the Zlog kicker. */
html[data-theme='zerofy'] .pricing-banner,
html[data-theme='zerofy'] .work-card__status,
html[data-theme='zerofy'] sup.footer-nav__badge {
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 3px 3px 0 var(--border);
}

html[data-theme='zerofy'] .work-card__status--soon {
  background: transparent;
  color: var(--secondary);
  box-shadow: none;
}

html[data-theme='zerofy'] .work-card__link {
  border-bottom: 2px solid var(--primary);
}

/* --- Header, nav and footer ---------------------------------------------- */

html[data-theme='zerofy'] .brand {
  font-style: italic;
  letter-spacing: -0.01em;
}

/* The mobile panel sits over the hero, and a translucent --panel lets the
   headline and card text read through the links. This override has to live in
   the responsive block at the end of the file, after the generic
   `html[data-theme] .site-nav` rule, which carries the same specificity. */

html[data-theme='zerofy'] .site-nav a::after,
html[data-theme='zerofy'] .nav-dropdown-toggle::before {
  height: 3px;
}

html[data-theme='zerofy'] .site-footer {
  border-top: 3px double var(--border);
  background-color: var(--surface-strong);
  background-image: none;
}

html[data-theme='zerofy'] .footer-nav a {
  letter-spacing: 0.04em;
}

html[data-theme='zerofy'] .company-name {
  color: var(--primary);
}

/* --- Forms and overlays --------------------------------------------------- */

html[data-theme='zerofy'] .contact-form input,
html[data-theme='zerofy'] .contact-form textarea {
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
}

html[data-theme='zerofy'] .contact-form input:focus,
html[data-theme='zerofy'] .contact-form textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

html[data-theme='zerofy'] .cookie-banner__inner {
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: var(--panel-shadow);
}

html[data-theme='zerofy'] .success-popup {
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--text);
  color: var(--bg);
  box-shadow: 5px 5px 0 var(--border);
}

html[data-theme='zerofy'] .loader-ring {
  border-color: var(--primary-soft);
  border-top-color: var(--primary);
}

/* --- Hero mockup ---------------------------------------------------------- */

html[data-theme='zerofy'] .hero-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 6px 6px 0 var(--border);
}

html[data-theme='zerofy'] .browser-window {
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: none;
}

html[data-theme='zerofy'] .browser-top span {
  border-radius: 0;
  background: var(--secondary);
}

html[data-theme='zerofy'] .browser-top span:nth-child(2) {
  background: var(--accent);
}

html[data-theme='zerofy'] .browser-top span:nth-child(3) {
  background: var(--primary);
}

html[data-theme='zerofy'] .preview-panel {
  background: var(--surface-strong);
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
}

html[data-theme='zerofy'] .preview-panel h3,
html[data-theme='zerofy'] .mini-card {
  font-style: italic;
}

html[data-theme='zerofy'] .mini-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
}

html[data-theme='zerofy'] .mini-card.accent {
  background: var(--primary);
  border-color: var(--border);
  color: var(--btn-fg);
}

html[data-theme='zerofy'] .mini-bars span {
  border-radius: 0;
  background: var(--primary);
}

html[data-theme='zerofy'] .hero-card .card-tag {
  padding-bottom: 0.4rem;
  border-bottom: 3px double var(--border);
}

/* --------------------------------------------------------------------------
   14. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  html[data-theme] .site-nav {
    background: var(--panel);
    border-color: var(--border);
    box-shadow: var(--panel-shadow);
  }

  html[data-theme='minimalism'] .demo-card {
    border-top: 1px solid var(--border);
  }

  /* The open mobile panel sits over the hero. A translucent --panel lets the
     headline and card text read straight through the links, and the backdrop
     blur cannot be relied on to hide it, so paint the panel with the opaque
     surface instead. Declared after the generic rule above to win the cascade. */
  html[data-theme='zerofy'] .site-nav {
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (max-width: 480px) {
  .demo-mode__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .demo-mode__btn {
    padding: 0.5rem 0.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] .demo-card,
  html[data-theme] .demo-card:hover {
    transition: none;
    transform: none;
  }
}