/* ═══════════════════════════════════════════════════════════════
   KANDELA LIGHTING LTD — Main Stylesheet v2
   Edit :root to retheme. Edit routes/index.js for content.
═══════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ──────────────────────────────────────────── */
:root {
  --bg:           #08080a;
  --bg-2:         #0f0f12;
  --bg-3:         #161619;
  --bg-4:         #1c1c20;
  --bg-light:     #f5f4f1;
  --bg-light-2:   #ebe9e4;
  --surface:      #1e1e22;
  --surface-2:    #27272c;
  --border:       rgba(255,255,255,0.07);
  --border-m:     rgba(255,255,255,0.12);
  --border-light: rgba(0,0,0,0.1);

  --fg:           #edeae4;
  --fg-2:         #9e9a94;
  --fg-3:         #6b6762;
  --fg-dark:      #1a1917;
  --fg-dark-2:    #4a4845;
  --fg-dark-3:    #7a7875;

  --accent:       #c8a96e;
  --accent-2:     #dfc08a;
  --accent-dim:   #8b6f3a;
  --accent-glow:  rgba(200,169,110,0.18);
  --accent-glow2: rgba(200,169,110,0.06);

  --green:        #3d9e6e;
  --red:          #c04040;

  --font-display: 'Bebas Neue', 'Impact', sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

  --topbar-h:     38px;
  --nav-h:        68px;
  --header-total: calc(var(--topbar-h) + var(--nav-h));

  --max-w:        1200px;
  --ease:         cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ── TYPOGRAPHY ─────────────────────────────────────────────── */
h1 { font-family: var(--font-display); font-size: clamp(3rem, 7.5vw, 6.5rem); line-height: 1.0; letter-spacing: 0.02em; }
h2 { font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3.8rem); line-height: 1.05; letter-spacing: 0.02em; }
h3 { font-family: var(--font-display); font-size: clamp(1.3rem, 2.5vw, 1.75rem); letter-spacing: 0.02em; line-height: 1.1; }
h4 { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; }
p  { font-weight: 300; line-height: 1.75; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.8rem 1.8rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: all 0.25s var(--ease);
  white-space: nowrap;
  position: relative; overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.05);
  opacity: 0;
  transition: opacity 0.2s;
}
.btn:hover::after { opacity: 1; }
.btn-primary { background: var(--accent); color: var(--fg-dark); font-weight: 600; }
.btn-primary:hover { background: var(--accent-2); transform: translateY(-1px); box-shadow: 0 8px 28px var(--accent-glow); }
.btn-ghost { border: 1px solid var(--border-m); color: var(--fg-2); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-outline { border: 1px solid var(--accent-dim); color: var(--accent); }
.btn-outline:hover { background: var(--accent); color: var(--fg-dark); }
.btn-lg { padding: 1rem 2.25rem; font-size: 0.82rem; }

/* ── TOPBAR ──────────────────────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  z-index: 1000;
  position: fixed; top: 0; left: 0; right: 0;
}
.topbar-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
}
.topbar-left, .topbar-right {
  display: flex; align-items: center; gap: 1rem;
}
.topbar-item {
  display: flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--fg-3);
}
.topbar-item svg { flex-shrink: 0; color: var(--fg-3); }
.topbar-phone, .topbar-email {
  color: var(--fg-2);
  transition: color 0.2s;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.topbar-phone:hover { color: var(--accent); }
.topbar-email:hover { color: var(--fg); }
.topbar-divider {
  width: 1px; height: 14px;
  background: var(--border-m);
}
.topbar-location span { letter-spacing: 0.06em; }

/* Live open/closed indicator */
.topbar-status {
  display: flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}
.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--fg-3);
  flex-shrink: 0;
  transition: background 0.4s;
}
.status-dot.open  { background: var(--green); box-shadow: 0 0 6px var(--green); animation: pulse-open 2.5s ease-in-out infinite; }
.status-dot.closed { background: var(--fg-3); }
@keyframes pulse-open {
  0%, 100% { box-shadow: 0 0 4px var(--green); }
  50%       { box-shadow: 0 0 10px var(--green); }
}
.status-text { color: var(--fg-2); }
.status-text.open  { color: var(--green); }
.status-text.closed { color: var(--fg-3); }

/* ── NAVIGATION ─────────────────────────────────────────────── */
.site-header {
  position: fixed; top: var(--topbar-h); left: 0; right: 0;
  z-index: 900;
  height: var(--nav-h);
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(8,8,10,0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--border);
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
.nav-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem;
  height: 100%; display: flex; align-items: center; justify-content: space-between;
}
.nav-logo {
  display: flex; align-items: center; gap: 0.75rem;
  text-decoration: none;
}
.logo-mark {
  width: 38px; height: 38px; flex-shrink: 0;
  background: var(--accent);
  color: var(--fg-dark);
  font-family: var(--font-display);
  font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 1px;
  font-weight: 400;
}
.logo-text-wrap { display: flex; flex-direction: column; line-height: 1; }
.logo-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.14em;
  color: var(--fg);
}
.logo-sub {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  color: var(--fg-3);
  margin-top: 2px;
  text-transform: uppercase;
}

.nav-links {
  display: flex; align-items: center; gap: 2rem;
}
.nav-link {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-2);
  transition: color 0.2s;
  position: relative; padding-bottom: 2px;
}
.nav-link::after {
  content: '';
  position: absolute; bottom: -3px; left: 0; right: 0;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s var(--ease);
}
.nav-link:hover { color: var(--fg); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link--designer {
  color: var(--accent) !important;
  border: 1px solid var(--accent-dim);
  padding: 0.38rem 0.9rem;
  border-radius: 2px;
  transition: background 0.2s, color 0.2s !important;
}
.nav-link--designer:hover { background: var(--accent-glow2); }
.nav-link--designer::after { display: none !important; }
.nav-link.nav-cta {
  background: var(--accent); color: var(--fg-dark);
  padding: 0.55rem 1.3rem; border-radius: 2px; font-weight: 600;
}
.nav-link.nav-cta::after { display: none; }
.nav-link.nav-cta:hover { background: var(--accent-2); color: var(--fg-dark); transform: translateY(-1px); }

.nav-burger { display: none; flex-direction: column; gap: 5px; padding: 0.4rem; }
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--fg); transition: all 0.28s; border-radius: 1px; }
.nav-burger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-burger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── HERO ───────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  padding-top: var(--header-total);
  overflow: hidden;
}
#wireCanvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0.25; pointer-events: none;
}
.hero-grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  background-size: 300px 300px;
}

.hero-content {
  position: relative; z-index: 2;
  flex: 1;
  max-width: var(--max-w); margin: 0 auto; width: 100%;
  padding: 4rem 1.5rem 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.hero-left { display: flex; flex-direction: column; }
.hero-eyebrow { color: var(--accent); margin-bottom: 1.25rem; }
.hero-headline { margin-bottom: 1.5rem; }
.hero-headline .line { display: block; }
.hero-headline .accent { color: var(--accent); }
.hero-body {
  font-size: 1.05rem; color: var(--fg-2); margin-bottom: 2rem;
  max-width: 520px; line-height: 1.8;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; }

/* Trust strip */
.hero-trust {
  display: flex; align-items: center; gap: 1.25rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--border);
}
.trust-item { display: flex; flex-direction: column; gap: 0.2rem; }
.trust-val { font-family: var(--font-display); font-size: 1.75rem; color: var(--accent); line-height: 1; }
.trust-lbl { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
.trust-sep { width: 1px; height: 36px; background: var(--border-m); }

/* Hero 3D canvas */
.hero-right { display: flex; align-items: center; justify-content: center; }
.hero-3d-wrap {
  position: relative; width: 100%;
  aspect-ratio: 1;
  max-width: 480px;
}
#heroFrame3D { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
#heroFrame3D:active { cursor: grabbing; }

/* Drag hint — fades after 4s via JS */
.hero-3d-hint {
  position: absolute; top: 1rem; right: 1rem;
  background: rgba(8,8,10,0.82);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-m);
  padding: 0.4rem 0.8rem;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  pointer-events: none;
  transition: opacity 0.8s;
  display: flex; align-items: center; gap: 0.4rem;
}
.hero-3d-hint::before { content: '⟳'; font-size: 0.75rem; color: var(--accent); }

.hero-3d-badge {
  position: absolute; bottom: 1.5rem; left: 1.5rem;
  background: rgba(8,8,10,0.85);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-m);
  padding: 0.6rem 1rem;
  border-radius: 2px;
}
.badge-line {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-2);
  line-height: 1.6;
}
.badge-line.accent { color: var(--accent); }

/* Service pills above fold */
.hero-services-strip {
  position: relative; z-index: 2;
  border-top: 1px solid var(--border);
  background: rgba(14,14,18,0.7);
  backdrop-filter: blur(8px);
}
.hero-services-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem;
  display: flex; align-items: stretch;
}
.hero-service-pill {
  flex: 1;
  display: flex; align-items: center; gap: 0.65rem;
  padding: 1rem 1.25rem;
  border-right: 1px solid var(--border);
  transition: background 0.2s;
  color: var(--fg-2);
}
.hero-service-pill:last-child { border-right: none; }
.hero-service-pill:hover { background: rgba(200,169,110,0.06); color: var(--fg); }
.hero-service-pill:hover .pill-icon { color: var(--accent); }
.pill-icon { font-size: 0.9rem; color: var(--accent-dim); flex-shrink: 0; }
.pill-text { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* Scroll hint */
.hero-scroll-hint {
  position: absolute; right: 2rem; bottom: 5rem; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  color: var(--fg-3);
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase;
  writing-mode: vertical-rl;
  animation: scrollBob 2.5s ease-in-out infinite;
}
.scroll-line { width: 1px; height: 48px; background: linear-gradient(to bottom, var(--accent), transparent); }
@keyframes scrollBob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(8px); }
}

/* ── REVEAL ANIMATIONS ──────────────────────────────────────── */
.reveal-up {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}
.reveal-up[data-delay="1"] { transition-delay: 0.1s; }
.reveal-up[data-delay="2"] { transition-delay: 0.2s; }
.reveal-up[data-delay="3"] { transition-delay: 0.3s; }
.reveal-up[data-delay="4"] { transition-delay: 0.4s; }
.reveal-up[data-delay="5"] { transition-delay: 0.5s; }
.reveal-up.visible { opacity: 1; transform: translateY(0); }
.reveal-left {
  opacity: 0; transform: translateX(-36px);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right {
  opacity: 0; transform: translateX(36px);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* ── STATS BAR ──────────────────────────────────────────────── */
.stats-bar {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stats-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 2rem 1.5rem;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
}
.stat-item { text-align: center; }
.stat-value {
  display: block;
  font-family: var(--font-display); font-size: clamp(2.4rem, 4vw, 3.5rem);
  color: var(--accent); line-height: 1; margin-bottom: 0.3rem;
}
.stat-label {
  font-family: var(--font-mono); font-size: 0.65rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2);
}

/* ── WIREFRAME 3D SECTION ───────────────────────────────────── */
.wireframe-section { height: 300vh; position: relative; }
.wf-sticky {
  position: sticky; top: var(--header-total);
  height: calc(100vh - var(--header-total));
  display: flex; overflow: hidden;
}
.wf-left {
  width: 42%; display: flex; flex-direction: column; justify-content: center;
  padding: 3rem 3rem 3rem 2rem;
  border-right: 1px solid var(--border);
}
.wf-eyebrow {
  font-family: var(--font-mono); font-size: 0.65rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 2rem;
}
.wf-text-panels { position: relative; min-height: 280px; }
.wf-panel {
  position: absolute; top: 0; left: 0; width: 100%;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  pointer-events: none;
}
.wf-panel.active {
  position: relative; opacity: 1; transform: translateY(0);
  pointer-events: auto;
}
.wf-panel h2 { font-size: clamp(1.8rem, 3.5vw, 3rem); margin-bottom: 1rem; }
.wf-panel p { color: var(--fg-2); font-size: 0.95rem; line-height: 1.8; margin-bottom: 1.25rem; max-width: 380px; }
.wf-points { display: flex; flex-direction: column; gap: 0.4rem; }
.wf-points li {
  font-size: 0.82rem; color: var(--fg-2); padding-left: 1.25rem; position: relative;
}
.wf-points li::before { content: '—'; position: absolute; left: 0; color: var(--accent); }

.wf-progress-wrap { margin-top: 2.5rem; }
.wf-progress-track {
  width: 100%; height: 2px; background: var(--border);
  border-radius: 1px; overflow: hidden; margin-bottom: 1rem;
}
.wf-progress-fill { height: 100%; background: var(--accent); width: 0%; transition: width 0.45s var(--ease); }
.wf-step-dots { display: flex; gap: 1rem; margin-bottom: 0.5rem; }
.wf-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--fg-3);
  transition: background 0.3s, transform 0.3s var(--ease-spring);
}
.wf-dot.active { background: var(--accent); transform: scale(1.5); }
.wf-step-labels {
  display: flex; gap: 1.15rem;
  font-family: var(--font-mono); font-size: 0.55rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3);
}
.wf-step-labels span { min-width: 9px; }

.wf-right {
  flex: 1; position: relative; background: var(--bg-2);
  display: flex; align-items: center; justify-content: center;
}
#wfCanvas3D { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
#wfCanvas3D:active { cursor: grabbing; }
.wf-stage-readout {
  position: absolute; top: 1.5rem; right: 1.5rem;
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-3); background: var(--surface);
  padding: 0.35rem 0.75rem; border: 1px solid var(--border);
  pointer-events: none;
}
/* Drag hint in wireframe section */
.wf-drag-hint {
  position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 0.58rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-3); display: flex; align-items: center; gap: 0.4rem;
  pointer-events: none; transition: opacity 0.8s;
}
.wf-drag-hint::before { content: '⟳'; color: var(--accent); font-size: 0.75rem; }

/* ── SERVICES GRID ──────────────────────────────────────────── */
.services-section { padding: 6rem 0; background: var(--bg-3); }
.services-section--light { background: var(--bg-light); color: var(--fg-dark); }
.services-section--light .eyebrow { color: var(--accent-dim); }
.services-section--light h2 { color: var(--fg-dark); }

.section-header { max-width: var(--max-w); margin: 0 auto 4rem; padding: 0 1.5rem; }
.section-sub { max-width: 600px; margin: 1.25rem 0 0; color: var(--fg-2); font-size: 1rem; line-height: 1.75; }
.services-section--light .section-sub { color: var(--fg-dark-2); }

.services-grid {
  max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5px;
  background: var(--border);
  border: 1px solid var(--border);
}
.services-grid--3 { grid-template-columns: repeat(3, 1fr); }

.service-card {
  background: var(--bg-3); padding: 2.5rem;
  transition: background 0.25s;
  position: relative;
}
.service-card:hover { background: var(--surface); }
.service-card::before {
  content: '';
  position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.service-card:hover::before { transform: scaleX(1); }

.services-section--light .services-grid { background: var(--border-light); border-color: var(--border-light); }
.services-section--light .service-card { background: var(--bg-light); }
.services-section--light .service-card:hover { background: var(--bg-light-2); }

/* Service icons — drawn with CSS */
.service-icon-wrap { margin-bottom: 1.5rem; }
.service-icon { width: 44px; height: 44px; position: relative; }
.service-icon::before, .service-icon::after { content: ''; position: absolute; }
.service-icon--frame::before { inset: 3px; border: 1.5px solid var(--accent); border-radius: 50%; }
.service-icon--frame::after  { inset: 13px; border: 1px solid var(--accent-dim); border-radius: 50%; }
.service-icon--design::before { top:3px;left:50%;transform:translateX(-50%);width:1.5px;height:38px;background:var(--accent); }
.service-icon--design::after  { top:50%;left:3px;transform:translateY(-50%);width:38px;height:1.5px;background:var(--accent); }
.service-icon--coating::before { inset:0; background: conic-gradient(var(--accent-dim) 0deg, var(--accent) 120deg, var(--accent-dim) 240deg, var(--accent) 360deg); border-radius: 50%; opacity:0.75; }
.service-icon--wholesale::before { bottom:3px;left:3px;right:3px;height:1.5px;background:var(--accent);box-shadow:0 -8px 0 var(--accent-dim),0 -16px 0 var(--accent-dim),0 -24px 0 var(--accent); }
.service-icon--quality::before, .service-icon--speed::before, .service-icon--people::before { inset:6px;border:1.5px solid var(--accent-dim);border-radius:50%; }

.service-eyebrow { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem; }
.services-section--light .service-eyebrow { color: var(--accent-dim); }
.service-card h3 { font-size: 1.55rem; margin-bottom: 0.9rem; }
.services-section--light .service-card h3 { color: var(--fg-dark); }
.service-desc { color: var(--fg-2); font-size: 0.9rem; line-height: 1.8; margin-bottom: 1.25rem; }
.services-section--light .service-desc { color: var(--fg-dark-2); }
.service-points { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.75rem; }
.service-points li { font-size: 0.84rem; color: var(--fg-2); padding-left: 1.25rem; position: relative; }
.service-points li::before { content: '—'; position: absolute; left: 0; color: var(--accent); }
.services-section--light .service-points li { color: var(--fg-dark-3); }

/* ── COATING FEATURE ────────────────────────────────────────── */
.coating-feature { padding: 6rem 0; background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.coating-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center;
}
.coating-text h2 { margin-bottom: 1.5rem; }
.coating-text p { color: var(--fg-2); font-size: 0.95rem; line-height: 1.8; margin-bottom: 1.25rem; }
.coating-badges { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.5rem 0 2rem; }
.badge {
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.35rem 0.85rem; border: 1px solid var(--accent-dim); color: var(--accent); border-radius: 2px;
}
.coating-visual { display: flex; flex-direction: column; gap: 1.5rem; }
.coating-swatch-grid { display: grid; grid-template-columns: repeat(8,1fr); gap: 3px; }
.swatch { aspect-ratio: 1; border-radius: 1px; transition: transform 0.15s, box-shadow 0.15s; cursor: default; }
.swatch:hover { transform: scale(1.18) translateZ(0); box-shadow: 0 2px 8px rgba(0,0,0,0.5); z-index: 1; }
.coating-diagram { background: var(--surface); padding: 1.25rem; border: 1px solid var(--border); }
.process-flow-svg { width: 100%; height: auto; }
.pf-box { fill: var(--surface-2); stroke: var(--border-m); stroke-width: 1; }
.pf-box--accent { fill: var(--accent-dim); stroke: var(--accent); }
.pf-text { font-family: var(--font-mono); font-size: 9.5px; fill: var(--fg-2); text-anchor: middle; }
.pf-text--accent { fill: var(--fg); }
.pf-arrow { stroke: var(--accent); stroke-width: 1.5; fill: none; }

/* ── PROCESS ────────────────────────────────────────────────── */
.process-section { padding: 6rem 0; background: var(--bg-4); }
.process-section--light { background: var(--bg-light); color: var(--fg-dark); }
.process-section--light .section-header .eyebrow { color: var(--accent-dim); }
.process-section--light .section-header h2 { color: var(--fg-dark); }

.process-steps {
  max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border: 1px solid var(--border);
  background: var(--border);
}
.process-steps--vertical {
  grid-template-columns: 1fr; max-width: 720px; gap: 0;
  background: transparent; border: none;
}
.process-step {
  background: var(--bg-4); padding: 2rem 1.75rem;
  position: relative;
}
.process-steps--vertical .process-step {
  background: transparent; border-left: 2px solid var(--accent);
  padding: 0.25rem 2rem 2.5rem; border-top: none; border-right: none; border-bottom: none;
}
.process-section--light .process-step { background: var(--bg-light); }
.process-section--light .process-steps--vertical .process-step { background: transparent; border-left-color: var(--accent-dim); }
.step-number {
  font-family: var(--font-display); font-size: 3rem;
  color: var(--accent); opacity: 0.2; line-height: 1; margin-bottom: 0.75rem;
}
.process-steps--vertical .step-number { font-size: 1.25rem; opacity: 1; margin-bottom: 0.5rem; }
.step-content h3 { font-size: 1.2rem; margin-bottom: 0.6rem; }
.step-content p { font-size: 0.87rem; color: var(--fg-2); line-height: 1.75; }
.process-section--light .step-content h3 { color: var(--fg-dark); }
.process-section--light .step-content p { color: var(--fg-dark-2); }

/* ── 3D FRAMES GALLERY ──────────────────────────────────────── */
.frames-section { padding: 6rem 0; }
.frames-grid {
  max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px;
  background: var(--border); border: 1px solid var(--border);
}
.frame-card { background: var(--bg-2); transition: background 0.25s; }
.frame-card:hover { background: var(--surface); }
.frame-wire-preview {
  aspect-ratio: 4/3;
  background: var(--bg-3);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  cursor: grab;
  position: relative;
}
.frame-wire-preview:active { cursor: grabbing; }
/* Drag hint overlay on frame cards */
.frame-wire-preview::after {
  content: '⟳ Drag';
  position: absolute; bottom: 0.6rem; right: 0.75rem;
  font-family: var(--font-mono); font-size: 0.55rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-3); opacity: 0.7;
  pointer-events: none;
  transition: opacity 0.3s;
}
.frame-wire-preview:hover::after { opacity: 0.4; }
.frame-canvas-3d { width: 100%; height: 100%; display: block; touch-action: none; }
.frame-info { padding: 1.5rem; }
.frame-info h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.frame-info p { font-size: 0.85rem; color: var(--fg-2); line-height: 1.7; margin-bottom: 1rem; }
.frame-link {
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
  transition: letter-spacing 0.2s;
}
.frame-link:hover { letter-spacing: 0.18em; }

/* ── TESTIMONIALS ───────────────────────────────────────────── */
.testimonials-section { padding: 6rem 0; background: var(--bg-2); overflow: hidden; }
.testimonials-track { overflow: hidden; }
.testimonials-inner { display: flex; transition: transform 0.5s var(--ease-out); }
.testimonial-card { flex: 0 0 100%; max-width: 100%; padding: 0 1.5rem; }
@media (min-width: 768px)  { .testimonial-card { flex: 0 0 50%; max-width: 50%; } }
@media (min-width: 1024px) { .testimonial-card { flex: 0 0 33.333%; max-width: 33.333%; } }
.testimonial-card blockquote {
  background: var(--surface); border: 1px solid var(--border);
  padding: 2.25rem; border-top: 2px solid var(--accent);
  height: 100%; display: flex; flex-direction: column;
}
.testimonial-quote {
  font-size: 0.95rem; color: var(--fg-2); line-height: 1.85; font-style: italic;
  flex: 1; margin-bottom: 1.5rem;
}
.testimonial-author { display: block; font-family: var(--font-display); font-size: 1.15rem; font-style: normal; }
.testimonial-role { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.testimonial-controls {
  display: flex; align-items: center; justify-content: center; gap: 1.5rem;
  margin-top: 2.5rem; padding: 0 1.5rem;
}
.t-btn {
  width: 42px; height: 42px; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: var(--fg-2); transition: all 0.2s;
}
.t-btn:hover { border-color: var(--accent); color: var(--accent); }
.t-dots { display: flex; gap: 0.75rem; }
.t-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-3); cursor: pointer; transition: all 0.3s; }
.t-dot.active { background: var(--accent); transform: scale(1.4); }

/* ── CTA BAND ───────────────────────────────────────────────── */
.cta-band {
  padding: 6rem 0; text-align: center;
  background: linear-gradient(160deg, var(--bg-4) 0%, var(--surface) 100%);
  border-top: 1px solid var(--border);
}
.cta-band--alt { background: var(--accent); border: none; }
.cta-band--alt h2 { color: var(--fg-dark); }
.cta-band--alt p { color: rgba(26,25,23,0.7); }
.cta-band--alt .btn-primary { background: var(--fg-dark); color: var(--accent); }
.cta-band--alt .btn-ghost { border-color: rgba(26,25,23,0.3); color: var(--fg-dark); }
.cta-band-inner { max-width: 680px; margin: 0 auto; padding: 0 1.5rem; }
.cta-band-inner h2 { margin-bottom: 1rem; }
.cta-band-inner p { color: var(--fg-2); margin-bottom: 2.5rem; font-size: 1.05rem; }
.cta-band-actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

/* ── PAGE HERO ──────────────────────────────────────────────── */
.page-hero {
  padding: calc(var(--header-total) + 4rem) 1.5rem 4rem;
  text-align: center; background: var(--bg-2);
  border-bottom: 1px solid var(--border); position: relative; overflow: hidden;
}
.page-hero--dark { background: var(--bg-3); }
.page-hero--light { background: var(--bg-light); color: var(--fg-dark); }
.page-hero--light .eyebrow { color: var(--accent-dim); }
.page-hero--light h1 { color: var(--fg-dark); }
.page-hero--light .page-hero-sub { color: var(--fg-dark-2); }
.page-hero--slim { padding-bottom: 3rem; }
.page-hero-inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
.page-hero-sub { font-size: 1.05rem; color: var(--fg-2); margin: 1.25rem auto 2.5rem; max-width: 540px; line-height: 1.8; }
.page-hero-canvas { position: absolute; inset: 0; z-index: 1; }
#particleCanvas { width: 100%; height: 100%; }

/* ── TEXT FEATURE ───────────────────────────────────────────── */
.text-feature-section { padding: 6rem 0; }
.tf-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center;
}
.tf-text h2 { margin-bottom: 1.5rem; }
.tf-text p { color: var(--fg-2); font-size: 0.95rem; line-height: 1.8; margin-bottom: 1.25rem; }
.tick-list { margin: 1.25rem 0 2rem; display: flex; flex-direction: column; gap: 0.6rem; }
.tick-list li { padding-left: 1.5rem; position: relative; font-size: 0.9rem; color: var(--fg-2); }
.tick-list li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); }

/* ESD page */
.esd-diagram { background: var(--surface); padding: 1.5rem; border: 1px solid var(--border); }
.esd-svg { width: 100%; height: auto; }
.esd-part { fill: none; stroke: var(--fg-2); stroke-width: 1.5; }
.esd-gun { fill: var(--surface-2); stroke: var(--accent); }
.esd-rib { stroke: var(--fg-3); }
.esd-ground { stroke: var(--fg-3); stroke-width: 1.5; }
.esd-oven { fill: var(--accent-dim); stroke: var(--accent); opacity: 0.7; }
.esd-dot { fill: var(--accent); }
.esd-particles circle { fill: var(--accent); animation: particleDrift 2s ease-in-out infinite; }
.esd-particles circle:nth-child(2) { animation-delay: 0.2s; }
.esd-particles circle:nth-child(3) { animation-delay: 0.4s; }
.esd-particles circle:nth-child(4) { animation-delay: 0.6s; }
.esd-particles circle:nth-child(5) { animation-delay: 0.3s; }
.esd-particles circle:nth-child(6) { animation-delay: 0.5s; }
@keyframes particleDrift { 0%,100%{transform:translate(0,0);opacity:1;}50%{transform:translate(5px,-3px);opacity:0.55;} }
.esd-label { font-family: var(--font-mono); font-size: 10px; fill: var(--fg-2); text-anchor: middle; }
.esd-label--oven { fill: var(--fg); }
.esd-label--title { fill: var(--fg-2); }

/* Bespoke page */
.bespoke-shape { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 6 4; fill: none; }
.bespoke-rib { stroke: var(--fg-3); stroke-width: 1; fill: none; }
.bespoke-ring { stroke: var(--accent-dim); stroke-width: 1; fill: none; }
.bespoke-dot { fill: var(--accent); }
.anno-line { stroke: var(--fg-3); stroke-width: 0.75; stroke-dasharray: 3 3; }
.anno-text { font-family: var(--font-mono); font-size: 9px; fill: var(--fg-2); }

/* About page */
.tf-stats-column { display: flex; flex-direction: column; gap: 1rem; }
.about-stat-block { padding: 1.25rem 1.5rem; background: var(--surface); border-left: 2px solid var(--accent); }
.about-stat-value { display: block; font-family: var(--font-display); font-size: 3rem; color: var(--accent); line-height: 1; }
.about-stat-label { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); }

/* ── CONTACT ────────────────────────────────────────────────── */
.contact-section { padding: 6rem 0; }
.contact-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem;
  display: grid; grid-template-columns: 3fr 2fr; gap: 5rem; align-items: start;
}
.contact-form-wrap h2, .contact-details h2 { margin-bottom: 0.75rem; }
.form-sub { color: var(--fg-2); margin-bottom: 2rem; font-size: 0.9rem; }
.contact-form { display: flex; flex-direction: column; gap: 1.25rem; }
.form-row { display: grid; gap: 1.25rem; }
.form-row--2 { grid-template-columns: 1fr 1fr; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-group label { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); }
.form-group input, .form-group select, .form-group textarea {
  background: var(--surface); border: 1px solid var(--border);
  color: var(--fg); padding: 0.85rem 1rem;
  font-family: var(--font-body); font-size: 0.9rem;
  border-radius: 2px; transition: border-color 0.2s; outline: none; -webkit-appearance: none;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--fg-3); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent); }
.form-group select option { background: var(--surface); }
.form-success { background: rgba(61,158,110,0.1); border: 1px solid var(--green); color: #7dd0a4; padding: 1rem 1.25rem; border-radius: 2px; font-size: 0.9rem; }
.form-error { background: rgba(192,64,64,0.1); border: 1px solid var(--red); color: #e07070; padding: 1rem 1.25rem; border-radius: 2px; font-size: 0.9rem; }
.contact-detail-block { margin-bottom: 1.75rem; }
.contact-detail-block h3 { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.6rem; }
.contact-detail-block address { font-style: normal; }
.contact-detail-block p, .contact-detail-block address p { color: var(--fg-2); font-size: 0.9rem; line-height: 1.7; }
.contact-link { color: var(--fg); transition: color 0.2s; }
.contact-link:hover { color: var(--accent); }
.contact-map-placeholder { background: var(--surface); border: 1px solid var(--border); padding: 1.75rem; text-align: center; margin-top: 1.5rem; }
.map-pin-graphic { width: 72px; margin: 0 auto 1rem; }
.map-circle { fill: none; stroke: var(--accent); stroke-width: 2; }
.map-dot { fill: var(--accent); }
.map-pin-line { stroke: var(--accent); stroke-width: 2; }
.contact-map-placeholder p { color: var(--fg-2); font-size: 0.85rem; margin-bottom: 0.75rem; }
.map-link { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); transition: letter-spacing 0.2s; }
.map-link:hover { letter-spacing: 0.18em; }

/* ── FOOTER ─────────────────────────────────────────────────── */
.site-footer { background: var(--bg-2); border-top: 1px solid var(--border); padding-top: 5rem; }
.footer-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem 4rem;
  display: grid; grid-template-columns: 2fr 1fr 1fr 2fr; gap: 3rem;
}
.footer-brand .nav-logo { margin-bottom: 1.25rem; }
.footer-strapline { color: var(--fg-3); font-size: 0.88rem; line-height: 1.7; margin-bottom: 0.5rem; }
.footer-cert { color: var(--fg-3); font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; }
.footer-links h4, .footer-contact h4 { color: var(--accent); margin-bottom: 1.25rem; }
.footer-links ul { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-links a { color: var(--fg-2); font-size: 0.88rem; transition: color 0.2s; }
.footer-links a:hover { color: var(--fg); }
.footer-contact address { font-style: normal; display: flex; flex-direction: column; gap: 0.75rem; }
.footer-contact a { color: var(--fg-2); font-size: 0.88rem; transition: color 0.2s; }
.footer-contact a:hover { color: var(--accent); }
.footer-contact p { color: var(--fg-2); font-size: 0.88rem; }
.footer-hours { color: var(--fg-3); font-size: 0.8rem; }
.footer-bottom {
  border-top: 1px solid var(--border); padding: 1.25rem 1.5rem;
  max-width: var(--max-w); margin: 0 auto;
}
.footer-bottom p { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.08em; color: var(--fg-3); }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hero-content { grid-template-columns: 1fr 0.8fr; gap: 2rem; }
  .coating-inner { gap: 3rem; }
  .tf-inner { gap: 3rem; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}
@media (max-width: 900px) {
  .hero-content { grid-template-columns: 1fr; }
  .hero-right { display: none; }
  .hero-trust { flex-wrap: wrap; }
  .services-grid { grid-template-columns: 1fr; gap: 1.5px; }
  .services-grid--3 { grid-template-columns: 1fr 1fr; }
  .frames-grid { grid-template-columns: repeat(2, 1fr); }
  .process-steps { grid-template-columns: repeat(2, 1fr); }
  .coating-inner { grid-template-columns: 1fr; }
  .tf-inner { grid-template-columns: 1fr; }
  .contact-inner { grid-template-columns: 1fr; }
  .wireframe-section { height: auto; }
  .wf-sticky { position: static; height: auto; flex-direction: column; }
  .wf-left { width: 100%; border-right: none; border-bottom: 1px solid var(--border); padding: 2.5rem 1.5rem 2rem; }
  .wf-right { height: 60vw; min-height: 300px; max-height: 480px; width: 100%; }
  .wf-text-panels { min-height: 200px; }
  .wf-panel:not(.active) { display: none; }
  .wf-panel { position: relative; opacity: 1; transform: none; }
  .wf-panel h2 { font-size: clamp(1.6rem,5vw,2.4rem); }
  /* Make dots bigger and easier to tap on mobile */
  .wf-dot { width: 14px; height: 14px; }
  .wf-step-labels { gap: 1.4rem; font-size: 0.6rem; }
}
@media (max-width: 768px) {
  :root { --topbar-h: 36px; --nav-h: 58px; }
  .topbar-email-item { display: none; }
  .nav-links {
    position: fixed; top: calc(var(--topbar-h) + var(--nav-h)); left: 0; right: 0;
    background: rgba(8,8,10,0.98); backdrop-filter: blur(20px);
    flex-direction: column; padding: 2rem 1.5rem;
    gap: 1.5rem; transform: translateY(-110vh); opacity: 0;
    transition: transform 0.4s var(--ease-out), opacity 0.4s;
    z-index: 800; border-bottom: 1px solid var(--border);
  }
  .nav-links.open { transform: translateY(0); opacity: 1; }
  .nav-burger { display: flex; }
  .nav-link.nav-cta { align-self: flex-start; }
  .stats-inner { grid-template-columns: repeat(2, 1fr); }
  .hero-services-inner { flex-wrap: wrap; }
  .hero-service-pill { flex: 0 0 50%; border-bottom: 1px solid var(--border); }
  .hero-service-pill:nth-child(odd) { border-right: 1px solid var(--border); }
  .hero-service-pill:last-child { border-right: none; }
  .frames-grid { grid-template-columns: 1fr; }
  .services-grid--3 { grid-template-columns: 1fr; }
  .form-row--2 { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; }
  .hero-scroll-hint { display: none; }
}
@media (max-width: 500px) {
  .stats-inner { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .hero-actions { flex-direction: column; }
  .cta-band-actions { flex-direction: column; align-items: center; }
}

/* ════════════════════════════════════════════════════════════════
   LIGHT MODE THEME
   Activated by: html[data-theme="light"]
   All CSS vars are overridden here. The rest of the CSS uses vars
   so switching the theme is the only thing needed.
════════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
  --bg:           #f5f4f1;
  --bg-2:         #ebe9e4;
  --bg-3:         #e0ddd6;
  --bg-4:         #d8d5ce;
  --bg-light:     #f5f4f1;
  --bg-light-2:   #ebe9e4;
  --surface:      #ffffff;
  --surface-2:    #f0ede8;
  --border:       rgba(0,0,0,0.09);
  --border-m:     rgba(0,0,0,0.14);
  --border-light: rgba(0,0,0,0.09);

  --fg:           #1a1917;
  --fg-2:         #4a4845;
  --fg-3:         #7a7875;
  --fg-dark:      #1a1917;
  --fg-dark-2:    #4a4845;
  --fg-dark-3:    #7a7875;

  --accent:       #9a6e28;
  --accent-2:     #b88030;
  --accent-dim:   #c8a050;
  --accent-glow:  rgba(154,110,40,0.18);
  --accent-glow2: rgba(154,110,40,0.08);

  --green:  #1e7040;
  --red:    #b83030;
}

/* Light mode specific overrides */
html[data-theme="light"] .site-header.scrolled {
  background: rgba(245,244,241,0.96);
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}
html[data-theme="light"] .topbar {
  background: var(--bg-2);
}
html[data-theme="light"] .hero {
  background: linear-gradient(160deg, #e8e4da 0%, #f0ede6 100%);
}
html[data-theme="light"] .stats-bar {
  background: var(--surface);
}
html[data-theme="light"] .hero-grain {
  opacity: 0.25;
}
html[data-theme="light"] .service-card,
html[data-theme="light"] .testimonial-card blockquote,
html[data-theme="light"] .frame-card,
html[data-theme="light"] .process-step {
  background: var(--surface);
}
html[data-theme="light"] .coating-feature,
html[data-theme="light"] .process-section,
html[data-theme="light"] .frames-section,
html[data-theme="light"] .testimonials-section,
html[data-theme="light"] .wireframe-section .wf-right {
  background: var(--bg-2);
}
html[data-theme="light"] .services-section,
html[data-theme="light"] .wireframe-section .wf-left {
  background: var(--bg-3);
}
html[data-theme="light"] .cta-band {
  background: linear-gradient(160deg, var(--bg-3) 0%, var(--bg-2) 100%);
}
html[data-theme="light"] .site-footer {
  background: var(--bg-3);
}
html[data-theme="light"] .form-group input,
html[data-theme="light"] .form-group select,
html[data-theme="light"] .form-group textarea {
  background: var(--surface);
  color: var(--fg);
}
html[data-theme="light"] .about-stat-block {
  background: var(--bg-2);
}

/* Theme toggle button */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: none;
  border: 1px solid var(--border-m);
  border-radius: 2px;
  color: var(--fg-2);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent-dim);
}
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun  { display: none; }
html[data-theme="light"] .theme-toggle .icon-moon { display: none; }
html[data-theme="light"] .theme-toggle .icon-sun  { display: block; }

/* Smooth theme transition */
html {
  transition: background-color 0.3s, color 0.3s;
}
*, *::before, *::after {
  transition-property: background-color, border-color, color;
  transition-duration: 0.25s;
  transition-timing-function: ease;
}
/* But NOT transitions on transforms/opacity (breaks animations) */
.reveal-up, .reveal-left, .reveal-right,
.wf-line, .wf-glow, .btn, canvas {
  transition-property: opacity, transform, background, border-color, color;
}