/* ==========================================================================
   Diartech Solutions — Landing page
   Design system: warm Monet daylight page, with dark "device" surfaces inside it
   Type: Plus Jakarta Sans

   The seven supplied colours drive the look:
     #F5E6D3 cálido suave  page background        #FFF8F0 blanco crema  cards / text on dark
     #E8C9A3 ámbar claro   secondary sections     #D4C5D9 lila pastel   accent fills
     #C49A6C marrón suave  borders                #B5C4B1 verde salvia  natural details
     #A89F91 gris cálido   hairlines, dividers

   They are all light, so none of them can carry text. The ink scale below is added
   and derived from the same hues — measured, not eyeballed. Lowest text pair is
   4.9:1; see README for the full table.

   Every screen in the page (hero control panel, scene board, footer) flips to the
   .on-dark scope: same token names, dark values, so the glow work still reads.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* --- Surfaces: the supplied palette, used as given --- */
  --bg:            #F5E6D3;   /* cálido suave  — luz ambiental */
  --bg-alt:        #E8C9A3;   /* ámbar claro   — secciones secundarias */
  --surface:       #FFF8F0;   /* blanco crema  — tarjetas */
  --surface-2:     #F2E2CD;
  --surface-3:     #E8C9A3;
  --border:        #C49A6C;   /* marrón suave */
  --border-strong: #B08553;
  --hairline:      #A89F91;   /* gris cálido   — divisores */

  /* --- Ink: added, since the palette supplies no text colour --- */
  --fg:            #2E2419;   /* 12.4:1 on --bg, 14.4:1 on --surface */
  --fg-muted:      #5C5142;   /*  6.3:1 on --bg,  4.9:1 on --bg-alt  */
  --fg-subtle:     #5E5445;   /*  6.1:1 on --bg,  4.7:1 on --bg-alt  */

  /* --- Primary action: marrón suave taken down to ink strength --- */
  --accent:        #70492A;   /*  6.4:1 on --bg,  5.0:1 on --bg-alt  */
  --accent-hi:     #8E6139;
  --accent-dim:    #C49A6C;
  --on-accent:     #FFF8F0;   /*  6.5:1 on --accent */

  /* --- Monet accents: pastel as fill, darkened sibling as ink --- */
  --lilac:         #D4C5D9;
  --lilac-ink:     #634772;   /*  6.4:1 on --bg,  5.0:1 on --bg-alt */
  --sage:          #B5C4B1;
  --sage-ink:      #3F5B44;   /*  6.1:1 on --bg,  4.8:1 on --bg-alt */

  /* Alias kept so the shared status rules work in both scopes.
     On the light page it resolves to sage ink; .on-dark makes it glow. */
  --neon:          var(--sage-ink);
  --neon-hi:       var(--sage-ink);
  --neon-dim:      #7E9179;

  --danger:        #A8321F;   /*  5.9:1 on --bg */
  --ring:          #70492A;

  /* Channel forms, so a retint is a one-line change */
  --accent-rgb:    112 73 42;
  --neon-rgb:      63 91 68;
  --lilac-rgb:     212 197 217;
  --sage-rgb:      181 196 177;
  --bg-rgb:        245 230 211;
  --surface-rgb:   255 248 240;
  --shadow-rgb:    92 66 38;      /* warm brown shadow, never neutral grey */
  --warm-rgb:      140 110 80;    /* decorative hairlines, watermarks */
  --danger-rgb:    168 50 31;
  --on-accent-rgb: 255 248 240;

  /* On the light page these read as soft warm shadow, not glow.
     .on-dark redefines them as real glow. */
  --glow-warm:     0 6px 18px rgb(var(--shadow-rgb) / .16);
  --glow-warm-lg:  0 10px 30px rgb(var(--shadow-rgb) / .22);
  --glow-neon:     0 4px 14px rgb(var(--shadow-rgb) / .14);
  --glow-neon-lg:  0 10px 28px rgb(var(--shadow-rgb) / .16);
  --glow-text:     none;          /* text-shadow only makes sense on dark */

  /* Typography */
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-xs:   0.8125rem;  /* 13 */
  --fs-sm:   0.9375rem;  /* 15 */
  --fs-base: 1rem;       /* 16 */
  --fs-lg:   1.125rem;   /* 18 */
  --fs-xl:   1.375rem;   /* 22 */
  --fs-2xl:  1.75rem;    /* 28 */
  --fs-3xl:  2.25rem;    /* 36 */
  --fs-4xl:  3rem;       /* 48 */

  /* Space (4/8 rhythm) */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem;  --s-8: 2rem;    --s-10: 2.5rem;
  --s-12: 3rem;   --s-16: 4rem;   --s-20: 5rem;   --s-24: 6rem;

  /* Radius */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px;

  /* Elevation — warm brown at low alpha; neutral grey shadow looks dirty on cream */
  --e-1: 0 1px 2px  rgb(var(--shadow-rgb) / .08);
  --e-2: 0 2px 10px rgb(var(--shadow-rgb) / .10);
  --e-3: 0 8px 26px rgb(var(--shadow-rgb) / .14);
  --e-4: 0 18px 48px rgb(var(--shadow-rgb) / .18);

  /* Motion */
  --dur-fast: 150ms;
  --dur:      220ms;
  --dur-slow: 380ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in:  cubic-bezier(.4, 0, 1, 1);

  /* Layout */
  --wrap: 1200px;
  --wrap-narrow: 780px;
  --header-h: 72px;

  /* Z-scale */
  --z-base: 0; --z-raised: 10; --z-sticky: 40; --z-nav: 100; --z-top: 1000;
}

/* ==========================================================================
   .on-dark — the "screen" scope
   Every physical device in the page (hero control panel, scene board) and the
   footer run on this. It redeclares the SAME token names with dark values, so
   every rule written for the light page renders correctly inside it with no
   duplicated selectors. This is also where the neon actually lives: your sage
   and lila read as soft status glow against dark, where electric cyan would
   have fought the Monet palette.
   ========================================================================== */
.on-dark {
  --bg:            #2E2419;
  --bg-alt:        #3D3125;
  --surface:       #3D3125;
  --surface-2:     #4A3C2D;
  --surface-3:     #5A4936;
  --border:        #574734;
  --border-strong: #7A6449;
  --hairline:      #6E5B44;

  --fg:            #FFF8F0;   /* 14.4:1 on this surface — your blanco crema */
  --fg-muted:      #C9BCA9;   /*  8.1:1 */
  --fg-subtle:     #A89F91;   /*  5.8:1 — your gris cálido, finally legible */

  --accent:        #E8C9A3;   /*  9.6:1 — your ámbar claro, as the lamp */
  --accent-hi:     #F5E6D3;
  --accent-dim:    #B08553;
  --on-accent:     #2E2419;

  --neon:          #B5C4B1;   /*  8.3:1 — your salvia, as the status LED */
  --neon-hi:       #D4E0D0;
  --neon-dim:      #6E8269;

  --lilac:         #D4C5D9;
  --lilac-ink:     #D4C5D9;
  --sage:          #B5C4B1;
  --sage-ink:      #B5C4B1;

  --danger:        #FF9C8A;
  --ring:          #E8C9A3;

  --accent-rgb:    232 201 163;
  --neon-rgb:      181 196 177;
  --bg-rgb:        46 36 25;
  --surface-rgb:   61 49 37;
  --shadow-rgb:    18 12 6;
  --warm-rgb:      210 195 175;
  --danger-rgb:    255 156 138;
  --on-accent-rgb: 46 36 25;

  --e-1: 0 1px 2px  rgb(var(--shadow-rgb) / .4);
  --e-2: 0 4px 16px rgb(var(--shadow-rgb) / .45);
  --e-3: 0 12px 32px rgb(var(--shadow-rgb) / .5);
  --e-4: 0 18px 44px rgb(var(--shadow-rgb) / .55);

  --glow-warm:     0 0 22px rgb(var(--accent-rgb) / .28);
  --glow-warm-lg:  0 0 40px rgb(var(--accent-rgb) / .32);
  --glow-neon:     0 0 18px rgb(var(--neon-rgb) / .34);
  --glow-neon-lg:  0 0 36px rgb(var(--neon-rgb) / .26);
  --glow-text:     0 0 18px rgb(var(--accent-rgb) / .45);

  color: var(--fg);
  background: var(--bg);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; text-wrap: balance; }
h1 { font-size: clamp(2.125rem, 1.35rem + 3.4vw, 3.75rem); }
h2 { font-size: clamp(1.75rem, 1.25rem + 2.1vw, var(--fs-3xl)); }
h3 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.01em; }
p  { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Shared icon defaults — all sprite paths inherit these */
.ico {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: var(--z-top);
  padding: var(--s-3) var(--s-5);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  border-radius: 0 0 var(--r-md) var(--r-md);
  transition: top var(--dur) var(--ease-out);
}
.skip-link:focus-visible { top: 0; }

/* ---------- Layout helpers ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
.wrap-narrow { max-width: var(--wrap-narrow); }

.section { padding-block: clamp(3.5rem, 2rem + 7vw, 6.5rem); }
.section-alt {
  position: relative;
  background: var(--bg-alt);
  border-block: 1px solid var(--border);
}
/* Soft rule along the section seam */
.section-alt::before {
  content: "";
  position: absolute;
  top: -1px; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--accent-rgb) / .45), transparent);
  pointer-events: none;
}

.section-head { max-width: 640px; margin-bottom: var(--s-12); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-bottom: var(--s-4); }

.kicker {
  display: inline-block;
  margin-bottom: var(--s-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: var(--glow-text);
}

.section-lede { color: var(--fg-muted); font-size: var(--fs-lg); max-width: 62ch; }
.section-head.center .section-lede { margin-inline: auto; }

/* Terracotta into Monet lilac. Both stops are ink-strength, so the word stays
   readable across the whole gradient instead of washing out mid-letter. */
.grad {
  background: linear-gradient(100deg, var(--accent) 5%, #6E4A5E 52%, var(--lilac-ink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-full);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn .ico { width: 1.125rem; height: 1.125rem; }
.btn:active { transform: translateY(1px); }

.btn-primary {
  --btn-bg: var(--accent);
  --btn-fg: var(--on-accent);
  --btn-bd: var(--accent);
  box-shadow: var(--glow-warm);
}
.btn-primary:hover {
  --btn-bg: var(--accent-hi);
  --btn-bd: var(--accent-hi);
  box-shadow: var(--glow-warm-lg);
}

.btn-outline { --btn-bd: var(--border-strong); --btn-fg: var(--fg); }
.btn-outline:hover { --btn-bd: var(--accent); --btn-fg: var(--accent); background: rgb(var(--accent-rgb) / .07); }

.btn-ghost { --btn-fg: var(--fg-muted); padding-inline: var(--s-3); }
.btn-ghost:hover { --btn-fg: var(--fg); background: var(--surface-2); }

.btn-lg { min-height: 52px; padding: var(--s-4) var(--s-8); font-size: var(--fs-base); }
.btn-block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgb(var(--bg-rgb) / .78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.site-header.is-scrolled {
  background: rgb(var(--bg-rgb) / .92);
  border-bottom-color: var(--border);
  box-shadow: var(--e-2);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; gap: var(--s-3); }
.brand-mark {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: var(--r-md);
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--on-accent);
}
.brand-mark .ico { width: 1.375rem; height: 1.375rem; }
.brand-text {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.brand-text strong { font-weight: 800; }
.brand-text em {
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.nav { display: flex; align-items: center; gap: var(--s-8); }
.nav-list { display: flex; align-items: center; gap: var(--s-1); }
.nav-list a {
  display: block;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--fg-muted);
  transition: color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.nav-list a:hover { color: var(--fg); background: var(--surface-2); }
.nav-list a.is-active { color: var(--accent); text-shadow: var(--glow-text); }

.nav-cta { display: flex; align-items: center; gap: var(--s-2); }

.nav-toggle {
  display: none;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
}
.nav-toggle .ico-close { display: none; }
.nav-toggle[aria-expanded="true"] .ico-open { display: none; }
.nav-toggle[aria-expanded="true"] .ico-close { display: block; }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) - 1);
  background: rgb(var(--shadow-rgb) / .6);
  backdrop-filter: blur(2px);
  animation: fade-in var(--dur) var(--ease-out);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 1.5rem + 6vw, 5.5rem) clamp(3rem, 2rem + 4vw, 4.5rem);
}

.hero-glow {
  position: absolute;
  top: -320px; left: 50%;
  width: min(1100px, 130vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  /* Daylight through a window, with a Monet lilac bloom beside it */
  background:
    radial-gradient(circle at 34% 40%, rgb(255 248 240 / .85) 0%, transparent 58%),
    radial-gradient(circle at 76% 58%, rgb(var(--lilac-rgb) / .55) 0%, transparent 54%);
  pointer-events: none;
}
.hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgb(var(--warm-rgb) / .10) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(var(--warm-rgb) / .10) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 65% at 50% 30%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 65% at 50% 30%, #000 20%, transparent 78%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: var(--z-raised);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2.5rem, 1rem + 5vw, 4.5rem);
  align-items: center;
  margin-bottom: var(--s-16);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  background: rgb(var(--surface-rgb) / .7);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--fg-muted);
}
.eyebrow .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 0 4px rgb(var(--neon-rgb) / .16), var(--glow-neon);
  animation: pulse 2.4s ease-in-out infinite;
}

.hero h1 { margin-bottom: var(--s-5); }
/* Filament glow behind the headline — the lamp the whole palette is built on */
.hero h1 .grad { filter: none; }
.lede { font-size: var(--fs-lg); color: var(--fg-muted); max-width: 56ch; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-block: var(--s-8) var(--s-8);
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
}
.hero-badges li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--fg-muted);
}
.hero-badges .ico {
  width: 1rem; height: 1rem; stroke-width: 2.5;
  color: var(--sage-ink);
}

/* Hero device panel */
.hero-panel { position: relative; }

.panel {
  position: relative;
  padding: var(--s-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  background:
    linear-gradient(165deg, rgb(56 50 44 / .92), rgb(var(--surface-rgb) / .95));
  box-shadow: var(--e-4), var(--glow-neon-lg), 0 0 0 1px rgb(var(--neon-rgb) / .18);
}
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgb(var(--neon-rgb) / .5), transparent 48%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.panel-top { margin-bottom: var(--s-5); }
.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.live {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--neon);
  text-shadow: 0 0 14px rgb(var(--neon-rgb) / .55);
}
.live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 12px var(--neon), 0 0 24px rgb(var(--neon-rgb) / .5);
  animation: pulse 2s ease-in-out infinite;
}
.panel-time {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--fg-muted);
}
.panel-sub { margin-top: var(--s-1); font-size: var(--fs-xs); color: var(--fg-subtle); }

.panel-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}
.tile {
  position: relative;
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: rgb(var(--bg-rgb) / .58);
}
.tile .ico { width: 1.25rem; height: 1.25rem; color: var(--fg-muted); }

/* Security devices glow neon; comfort devices glow 3000K — the palette's whole logic,
   demonstrated inside the product it is selling. */
.tile-on {
  border-color: rgb(var(--neon-rgb) / .4);
  background: rgb(var(--neon-rgb) / .07);
  box-shadow: inset 0 0 24px rgb(var(--neon-rgb) / .1);
}
.tile-on .ico { color: var(--neon); }

.tile-warm {
  border-color: rgb(var(--accent-rgb) / .42);
  background: rgb(var(--accent-rgb) / .08);
  box-shadow: inset 0 0 28px rgb(var(--accent-rgb) / .14);
}
.tile-warm .ico { color: var(--accent); filter: drop-shadow(0 0 8px rgb(var(--accent-rgb) / .6)); }
.tile-label { display: block; margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--fg-subtle); }
.tile-value { display: block; font-size: var(--fs-sm); font-weight: 700; }

.switch {
  position: absolute;
  top: var(--s-4); right: var(--s-4);
  width: 34px; height: 19px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
}
.switch .knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--fg-subtle);
  transition: transform var(--dur) var(--ease-out);
}
.switch.is-on { background: var(--neon-dim); border-color: var(--neon); box-shadow: var(--glow-neon); }
.switch.is-on .knob { background: #fff; transform: translateX(15px); }
.switch.is-warm { background: var(--accent-dim); border-color: var(--accent); box-shadow: var(--glow-warm); }
.switch.is-warm .knob { background: #fff; transform: translateX(15px); }

.panel-bar {
  margin-top: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: rgb(var(--bg-rgb) / .58);
}
.bar-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}
.bar-val { font-weight: 700; color: var(--neon); }
.bar-track {
  height: 6px;
  margin-block: var(--s-3);
  border-radius: var(--r-full);
  background: var(--surface-3);
  overflow: hidden;
}
.bar-fill {
  display: block;
  height: 100%;
  width: 88%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--neon-dim), var(--neon));
  box-shadow: 0 0 12px rgb(var(--neon-rgb) / .55);
}
.bar-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  font-size: 0.75rem;
  color: var(--fg-subtle);
}
.bar-meta span { display: inline-flex; align-items: center; gap: var(--s-2); }
.bar-meta .ico { width: .875rem; height: .875rem; }

/* Floating chips sit on the panel's outer corners so they never cover its text */
.panel-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  background: #FFF8F0;
  color: var(--fg);
  box-shadow: var(--e-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  animation: float 6s ease-in-out infinite;
}
.panel-chip .ico { width: 1rem; height: 1rem; color: var(--sage-ink); }
.chip-1 { top: -22px; left: -20px; }
.chip-2 { bottom: -22px; right: -20px; animation-delay: -3s; }

/* ---------- Stats ---------- */
.stats {
  position: relative;
  z-index: var(--z-raised);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-2);
  padding: var(--s-6) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--surface), rgb(var(--surface-rgb) / .55));
  box-shadow: var(--e-2);
}
.stats li { text-align: center; padding-inline: var(--s-3); }
.stats li + li { border-left: 1px solid var(--border); }
.stats strong {
  display: block;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  text-shadow: var(--glow-text);
}
.stats span { font-size: var(--fs-xs); color: var(--fg-muted); }

/* ---------- Trust strip ---------- */
.strip {
  padding-block: var(--s-10);
  border-block: 1px solid var(--border);
  background: var(--bg-alt);
}
.strip-label {
  margin-bottom: var(--s-5);
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.strip-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
}
.strip-list li {
  padding: var(--s-2) var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--fg-muted);
}

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

/* Two-pillar layout for the residential / commercial split */
.cards-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6);
}
.cards-2 .service-card { padding-inline: var(--s-8); }
.card-kinds {
  margin: var(--s-5) 0 var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
}

.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-8) var(--s-6);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--e-2);
  transition: border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out);
}
.card:hover { border-color: var(--border-strong); box-shadow: var(--e-3); }

/* Neon-tube icon plate: lit ring outside, ambient bloom inside */
.card-icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: var(--s-5);
  border: 1px solid rgb(var(--lilac-rgb) / .95);
  border-radius: var(--r-lg);
  background: var(--lilac);
  color: var(--lilac-ink);
  transition: box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.card-icon .ico { width: 1.5rem; height: 1.5rem; }
.card:hover .card-icon { box-shadow: var(--e-2); }

/* Neon plate for the security + infrastructure services, matching the hero panel's
   logic: cool = devices and network, warm = comfort and brand. */
.card-icon.is-neon {
  border-color: rgb(var(--sage-rgb) / .9);
  background: var(--sage);
  color: var(--sage-ink);
  box-shadow: none;
}
.card:hover .card-icon.is-neon { box-shadow: var(--e-2); }

.card h3 { margin-bottom: var(--s-3); }
.card-lede { color: var(--fg-muted); font-size: var(--fs-sm); margin-bottom: var(--s-5); }

/* ==========================================================================
   Services — the lit showroom
   The section runs dark so the fixtures read. Each card carries a CSS downlight
   on its top edge; pointing at a card fires it like an occupancy sensor tripping,
   and a 3000K cone washes down over the copy.

   The light is decoration only. Every card is fully legible with every lamp off
   (11.98:1 for headings, 6.76:1 for body), and lighting one only raises contrast,
   because the beam lands on the background rather than on the letters.
   ========================================================================== */
.section-dark {
  position: relative;
  background: var(--bg);
  border-block: 1px solid var(--border);
}
/* Lit seams top and bottom, so the dark bands read as illuminated edges
   rather than as a flat colour change */
.section-dark::before,
.section-dark::after {
  content: "";
  position: absolute;
  left: 6%; right: 6%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--accent-rgb) / .85) 30%, rgb(var(--neon-rgb) / .7) 70%, transparent);
  pointer-events: none;
}
/* The halo is offset inward, because a warm glow on the cream side of the
   boundary has no contrast to work with — it only reads against the dark. */
.section-dark::before { top: 0;    box-shadow: 0 6px 18px rgb(var(--accent-rgb) / .5); }
.section-dark::after  { bottom: 0; box-shadow: 0 -6px 18px rgb(var(--neon-rgb) / .4); }
/* Two dark bands in a row would otherwise stack two lines at the join */
.section-dark + .section-dark::before { display: none; }

.service-card {
  position: relative;
  overflow: hidden;                 /* clips the beam to the card */
  padding-top: var(--s-10);         /* headroom for the fixture */
}

/* The fixture itself: a small recessed downlight hanging off the top edge */
.lamp {
  position: absolute;
  top: 0; left: 50%;
  z-index: 2;
  width: 54px; height: 13px;
  transform: translateX(-50%);
  border: 1px solid var(--border-strong);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
}
/* The lens — a cold filament at rest, incandescent at 3000K when it fires */
.lamp i {
  position: absolute;
  left: 50%; bottom: 2px;
  width: 32px; height: 4px;
  transform: translateX(-50%);
  border-radius: var(--r-full);
  background: var(--hairline);
  transition: background 380ms var(--ease-out), box-shadow 380ms var(--ease-out);
}

/* The beam: a cone widening downward, blurred so it reads as light, not as a shape */
.beam {
  position: absolute;
  top: 0; left: 50%;
  z-index: 1;
  width: 300px; height: 100%;
  transform: translateX(-50%);
  clip-path: polygon(45% 0, 55% 0, 100% 88%, 0 88%);
  background: linear-gradient(180deg,
              rgb(255 214 170 / .34) 0%,
              rgb(255 186 128 / .14) 38%,
              transparent 66%);       /* fades out well before the clip edge */
  filter: blur(20px);
  opacity: 0;
  transition: opacity 460ms var(--ease-out);
  pointer-events: none;
}

/* The pool of light the beam lays down across the card face */
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse 64% 48% at 50% 0%,
              rgb(255 198 143 / .22) 0%,
              rgb(255 177 110 / .07) 46%,
              transparent 72%);
  opacity: 0;
  transition: opacity 460ms var(--ease-out);
  pointer-events: none;
}

/* Occupancy readout, top-right, like a real sensor's status line */
.sensor {
  position: absolute;
  top: var(--s-4); right: var(--s-5);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  transition: color 380ms var(--ease-out);
}
.sensor::after { content: "Standby"; }
.sensor i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--hairline);
  transition: background 380ms var(--ease-out), box-shadow 380ms var(--ease-out);
}

/* Card content has to sit above the light layers.
   .card-flag is excluded: it is already absolutely positioned and this
   selector outranks its own rule, which would drop it back into flow. */
.service-card > *:not(.beam):not(.lamp):not(.sensor):not(.card-flag) {
  position: relative;
  z-index: 1;
}
.service-card > .card-flag { z-index: 3; }

/* --- Lit: pointer over the card, or keyboard focus anywhere inside it --- */
.service-card:hover,
.service-card:focus-within,
.service-card.is-lit { border-color: rgb(var(--accent-rgb) / .5); }

.service-card:hover::before,
.service-card:focus-within::before,
.service-card.is-lit::before,
.service-card:hover .beam,
.service-card:focus-within .beam,
.service-card.is-lit .beam { opacity: 1; }

.service-card:hover .lamp i,
.service-card:focus-within .lamp i,
.service-card.is-lit .lamp i {
  background: #FFE4C0;
  box-shadow: 0 0 10px #FFB16E,
              0 0 24px rgb(255 177 110 / .85),
              0 0 46px rgb(255 177 110 / .45);
}

.service-card:hover .sensor,
.service-card:focus-within .sensor,
.service-card.is-lit .sensor { color: var(--neon); }
.service-card:hover .sensor::after,
.service-card:focus-within .sensor::after,
.service-card.is-lit .sensor::after { content: "Occupied"; }
.service-card:hover .sensor i,
.service-card:focus-within .sensor i,
.service-card.is-lit .sensor i {
  background: var(--neon);
  box-shadow: 0 0 8px var(--neon);
  animation: sensor-ping 1.7s ease-in-out infinite;
}

/* No pointer means no hover. Idle the lamps low, and let main.js light whichever
   card is crossing the middle of the screen as you scroll — see §9. */
@media (hover: none) {
  .service-card::before { opacity: .22; }
  .service-card .beam { opacity: .2; }
  .service-card .lamp i { background: #9A7A55; }
}

/* Icon plates need dark-scope values — the light-page lilac-on-lilac would vanish */
.on-dark .card-icon {
  border-color: rgb(var(--accent-rgb) / .42);
  background: rgb(var(--accent-rgb) / .12);
  color: var(--accent);
}
.on-dark .card-icon.is-neon {
  border-color: rgb(var(--neon-rgb) / .42);
  background: rgb(var(--neon-rgb) / .12);
  color: var(--neon);
}
.on-dark .card:hover .card-icon,
.on-dark .card:hover .card-icon.is-neon { box-shadow: none; }
.on-dark .card-link { color: var(--accent); }
.on-dark .card-flag { background: var(--accent); color: var(--on-accent); }

/* On dark the brand tile is a lit object, not a flat plate */
.on-dark .brand-mark {
  box-shadow: 0 0 18px rgb(var(--accent-rgb) / .32),
              inset 0 0 12px rgb(var(--accent-rgb) / .25);
}

.service-card.is-featured {
  border-color: rgb(var(--lilac-rgb) / 1);
  background: linear-gradient(180deg, rgb(var(--lilac-rgb) / .55), var(--surface) 46%);
  box-shadow: var(--e-3);
}
.on-dark .service-card.is-featured {
  border-color: rgb(var(--lilac-rgb) / .55);
  background: linear-gradient(180deg, rgb(var(--lilac-rgb) / .13), var(--surface) 46%);
}
.card-flag {
  position: absolute;
  top: var(--s-4); left: var(--s-6);
  padding: 3px var(--s-3);
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.feature-list { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
.feature-list li {
  display: grid;
  grid-template-columns: 1.375rem 1fr;
  gap: var(--s-3);
  align-items: start;
  font-size: var(--fs-sm);
  color: var(--fg);
}
.feature-list .ico { width: 1.125rem; height: 1.125rem; margin-top: .2em; color: var(--sage-ink); }

.card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: auto;
  padding-block: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent-hi);
  transition: gap var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.card-link .ico { width: 1rem; height: 1rem; }
.card-link:hover { gap: var(--s-3); color: var(--accent-hi); text-shadow: var(--glow-text); }

.segment-card p { color: var(--fg-muted); font-size: var(--fs-sm); margin-bottom: var(--s-5); }
.tag-list { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: auto; }
.tag-list li {
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface-2);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}

/* ---------- Capabilities grid ---------- */
/* ---------- Capabilities: pointer-tracked neon ----------
   One light source for the whole grid. The pointer coordinates are written to
   :root by main.js, and `background-attachment: fixed` anchors every gradient
   to the viewport rather than to its own card — so the glow sweeps across the
   grid as one light instead of eight independent hovers.

   The section runs dark because neon needs somewhere to glow. Colour comes
   from the brand pastels, shifting amber -> lilac -> sage with the pointer's
   horizontal position.                                                        */
.cap {
  --spot: 620px;
  background-image: radial-gradient(
      var(--spot) var(--spot) at calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
      rgb(var(--accent-rgb) / .34), rgb(var(--accent-rgb) / .10) 42%, transparent 72%);
  background-attachment: fixed;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

/* The lit edge. Masked so the gradient only paints the 1px border ring.
   Fixed colour stops, not color-mix: a calc() percentage inside color-mix
   silently invalidates the whole value in several engines, which leaves the
   gradient painting nothing at all. */
.cap-edge {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 2px;
  background-image: radial-gradient(
      calc(var(--spot) * .9) calc(var(--spot) * .9)
      at calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
      #FFE8C4 0%, #E8C9A3 24%, #D4C5D9 50%, rgb(var(--border-strong-rgb, 122 100 73) / .55) 74%);
  background-attachment: fixed;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.cap > *:not(.cap-edge) { position: relative; z-index: 2; }

/* Sage on sage is invisible in the dark scope, so the plate becomes lit glass.
   It reads the same pointer variables as the card edge and inherits --spot from
   .cap, so plate and edge brighten together as the light sweeps past. */
.on-dark .cap-icon {
  position: relative;
  border: 1px solid rgb(var(--neon-rgb) / .38);
  color: var(--neon);
  box-shadow: 0 0 14px rgb(var(--accent-rgb) / .10);
  background-color: rgb(var(--neon-rgb) / .10);
  background-image: radial-gradient(
      calc(var(--spot) * .55) calc(var(--spot) * .55)
      at calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
      rgb(255 232 196 / .50), rgb(212 197 217 / .16) 40%, transparent 68%);
  background-attachment: fixed;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.on-dark .cap-icon .ico { position: relative; z-index: 1; }

/* Pointer glow is a hover affordance, not motion — but if the visitor asked for
   less movement, pin the light to the centre and stop it tracking. */
@media (prefers-reduced-motion: reduce) {
  .cap, .cap-edge, .on-dark .cap-icon { background-attachment: scroll; }
}


.cap-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5);
}
.cap {
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  /* background-color, NOT the `background` shorthand: the shorthand resets
     background-image to none and would wipe the pointer-tracked gradient. */
  background-color: var(--surface);
  box-shadow: var(--e-1);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.cap:hover { border-color: var(--border-strong); box-shadow: var(--e-3); }
.cap-icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin-bottom: var(--s-4);
  border-radius: var(--r-md);
  background: var(--sage);
  color: var(--sage-ink);
}
.cap h3 { font-size: var(--fs-base); font-weight: 700; margin-bottom: var(--s-4); }
.cap ul { display: grid; gap: var(--s-2); }
.cap li {
  position: relative;
  padding-left: var(--s-4);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  line-height: 1.55;
}
/* A hairline tick rather than a bullet glyph, so it stays on-style */
.cap li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 6px; height: 6px;
  border-left: 1.5px solid var(--sage-ink);
  border-bottom: 1.5px solid var(--sage-ink);
  transform: rotate(-45deg);
}

/* ---------- Benefit pillars ---------- */
.benefit p { font-size: var(--fs-base); color: var(--fg-muted); line-height: 1.6; }
.benefit-note {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--hairline);
  font-style: italic;
  color: var(--fg-subtle) !important;
}

/* ---------- Automation scenes ---------- */
.scenes {
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--e-3);
  overflow: hidden;
}

.scene-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--border);
  background: rgb(var(--bg-rgb) / .45);
}
.scene-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 84px;
  padding: var(--s-4) var(--s-3);
  border: 0;
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  transition: color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.scene-tab + .scene-tab { border-left: 1px solid var(--border); }
.scene-tab .ico { width: 1.25rem; height: 1.25rem; }
.scene-tab strong { font-size: var(--fs-sm); font-weight: 700; }
.scene-tab span { font-size: 0.75rem; color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
.scene-tab:hover { color: var(--fg); background: rgb(var(--accent-rgb) / .05); }
.scene-tab[aria-selected="true"] {
  color: var(--accent);
  background: rgb(var(--accent-rgb) / .09);
}
.scene-tab[aria-selected="true"] .ico { filter: drop-shadow(0 0 8px rgb(var(--accent-rgb) / .55)); }
.scene-tab[aria-selected="true"] span { color: var(--accent-hi); }

/* Auto-advance indicator — restarted from JS on every scene change */
.scene-progress {
  position: absolute;
  left: 0; bottom: -1px;
  width: 25%;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 12px rgb(var(--accent-rgb) / .7);
  transition: transform var(--dur-slow) var(--ease-out);
  transform: translateX(0);
}
.scene-progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(var(--bg-rgb) / .55);
  transform-origin: right;
  transform: scaleX(0);
}
.scenes.is-cycling .scene-progress::after { animation: scene-countdown 5.6s linear forwards; }

.scene-board { padding: var(--s-6); }
.scene-board:focus-visible { outline-offset: -3px; }
.scene-caption {
  margin-bottom: var(--s-5);
  max-width: 68ch;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

.device-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}

/* A device tile. Everything that changes between scenes animates on
   transform/opacity/colour only — no layout is touched, so switching is jank-free. */
.device {
  position: relative;
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: rgb(var(--bg-rgb) / .5);
  transition: border-color 420ms var(--ease-out),
              background-color 420ms var(--ease-out),
              box-shadow 420ms var(--ease-out);
  transition-delay: var(--stagger, 0ms);
}
.device .ico {
  width: 1.25rem; height: 1.25rem;
  color: var(--fg-subtle);
  transition: color 420ms var(--ease-out), filter 420ms var(--ease-out);
  transition-delay: var(--stagger, 0ms);
}
.device-name {
  display: block;
  margin-top: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
}
.device-value {
  display: block;
  min-height: 1.5em;
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.device .switch { top: var(--s-4); right: var(--s-4); }

.level {
  display: block;
  height: 4px;
  margin-top: var(--s-3);
  border-radius: var(--r-full);
  background: rgb(var(--shadow-rgb) / .5);
  overflow: hidden;
}
.level i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--fg-subtle);
  transform-origin: left;
  transform: scaleX(var(--lv, 0));           /* scaleX, not width — no reflow */
  transition: transform 620ms var(--ease-out), background-color 420ms var(--ease-out),
              box-shadow 420ms var(--ease-out);
  transition-delay: var(--stagger, 0ms);
}

/* Warm (comfort) devices */
.device.is-on {
  border-color: rgb(var(--accent-rgb) / .6);
  background: rgb(var(--accent-rgb) / .14);
  box-shadow: inset 0 0 30px rgb(var(--accent-rgb) / .16);
}
.device.is-on .ico { color: var(--accent); filter: drop-shadow(0 0 8px rgb(var(--accent-rgb) / .55)); }
.device.is-on .level i { background: var(--accent); box-shadow: 0 0 10px rgb(var(--accent-rgb) / .6); }

/* Cool (security / device) tiles */
.device.is-on.is-neon {
  border-color: rgb(var(--neon-rgb) / .6);
  background: rgb(var(--neon-rgb) / .14);
  box-shadow: inset 0 0 30px rgb(var(--neon-rgb) / .15);
}
.device.is-on.is-neon .ico { color: var(--neon); filter: drop-shadow(0 0 8px rgb(var(--neon-rgb) / .55)); }
.device.is-on.is-neon .level i { background: var(--neon); box-shadow: 0 0 10px rgb(var(--neon-rgb) / .6); }

/* The moment a device flips: a short bloom, like a lamp catching */
.device.just-on  { animation: device-on  560ms var(--ease-out) var(--stagger, 0ms) both; }
.device.just-off { animation: device-off 420ms var(--ease-out) var(--stagger, 0ms) both; }
.device-value.is-swapping { animation: value-swap 420ms var(--ease-out) var(--stagger, 0ms) both; }

/* ---------- Automation triggers ---------- */
.triggers { margin-top: var(--s-12); }
.triggers-title {
  margin-bottom: var(--s-6);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  text-align: center;
}
.trigger-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}
.trigger-list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-rows: auto auto;
  gap: var(--s-1) var(--s-3);
  padding: var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease-out);
}
.trigger-list li:hover { border-color: rgb(var(--accent-rgb) / .38); }
.trigger-list .ico { grid-row: span 2; margin-top: 2px; color: var(--sage-ink); }
.trigger-list strong { font-size: var(--fs-sm); font-weight: 700; }
.trigger-list span { font-size: var(--fs-xs); color: var(--fg-muted); line-height: 1.6; }

/* ---------- Why us ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(2.5rem, 1rem + 5vw, 4.5rem);
  align-items: start;
}
.split-head { position: sticky; top: calc(var(--header-h) + var(--s-8)); margin-bottom: 0; }
.split-head .btn { margin-top: var(--s-6); }

.why-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}
.why-item {
  padding: var(--s-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.why-item:hover { border-color: var(--border-strong); }
.why-icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin-bottom: var(--s-4);
  border-radius: var(--r-md);
  background: var(--sage);
  color: var(--sage-ink);
}
.why-item h3 { font-size: var(--fs-base); font-weight: 700; margin-bottom: var(--s-2); }
.why-item p { font-size: var(--fs-sm); color: var(--fg-muted); }

/* ---------- Process ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5);
  counter-reset: step;
}
.step {
  position: relative;
  padding: var(--s-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
/* connector line between steps */
.step::after {
  content: "";
  position: absolute;
  top: calc(var(--s-6) + 26px);
  right: calc(var(--s-5) * -1);
  width: var(--s-5);
  height: 1px;
  background: linear-gradient(90deg, var(--border-strong), transparent);
}
.step:last-child::after { display: none; }

.step-num {
  position: absolute;
  top: var(--s-5); right: var(--s-5);
  font-size: var(--fs-2xl);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: rgb(var(--warm-rgb) / .16);
  font-variant-numeric: tabular-nums;
}
.step-icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: var(--s-4);
  border: 1px solid rgb(var(--sage-rgb) / .95);
  border-radius: var(--r-md);
  background: var(--sage);
  color: var(--sage-ink);
}
.step h3 { font-size: var(--fs-base); font-weight: 700; margin-bottom: var(--s-2); }
.step p { font-size: var(--fs-sm); color: var(--fg-muted); }

/* ---------- Testimonials ---------- */
.sample-note {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
  padding: var(--s-2) var(--s-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
}
.sample-note .ico { width: 1rem; height: 1rem; }

.quote-card { overflow: hidden; }
.quote-glyph {
  position: absolute;
  top: var(--s-5); right: var(--s-5);
  width: 2.75rem; height: 2.75rem;
  fill: none;
  stroke: rgb(var(--warm-rgb) / .14);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.stars { display: flex; gap: 2px; margin-bottom: var(--s-4); }
.stars .ico { width: 1rem; height: 1rem; fill: #A9741A; stroke: #A9741A; stroke-width: 1.2; }

.quote-card blockquote { margin-bottom: var(--s-6); }
.quote-card blockquote p { font-size: var(--fs-sm); color: var(--fg); line-height: 1.7; }

.quote-card figcaption {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
}
.avatar {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--fg-muted);
}
.who { display: flex; flex-direction: column; line-height: 1.35; }
.who strong { font-size: var(--fs-sm); font-weight: 700; }
.who em { font-style: normal; font-size: var(--fs-xs); color: var(--fg-subtle); }

/* ---------- Service area ---------- */
.area-box {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
  padding: clamp(2rem, 1rem + 4vw, 3.5rem);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background:
    radial-gradient(ellipse 80% 120% at 100% 0%, rgb(var(--lilac-rgb) / .5), transparent 62%),
    var(--surface);
}
.area-copy h2 { margin-bottom: var(--s-4); }
.area-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-6);
}
.area-list li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--fg);
}
.area-list .ico { width: 1rem; height: 1rem; color: var(--sage-ink); }

.area-aside { display: grid; gap: var(--s-3); }
.area-stat {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  gap: 0 var(--s-4);
  align-items: center;
  padding: var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: rgb(var(--bg-rgb) / .55);
}
.area-stat .ico {
  grid-row: span 2;
  width: 1.5rem; height: 1.5rem;
  justify-self: center;
  color: var(--sage-ink);
}
.area-stat strong { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.02em; }
.area-stat span { font-size: var(--fs-xs); color: var(--fg-muted); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: var(--s-3); }
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.faq-item:hover { border-color: var(--border-strong); }
.faq-item[open] { border-color: var(--border-strong); background: var(--surface-2); box-shadow: var(--e-2); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 56px;
  padding: var(--s-4) var(--s-5);
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-chevron {
  color: var(--fg-muted);
  transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.faq-item[open] .faq-chevron { transform: rotate(180deg); color: var(--accent-hi); }

.faq-body { padding: 0 var(--s-5) var(--s-5); }
.faq-body p { font-size: var(--fs-sm); color: var(--fg-muted); max-width: 68ch; }
.faq-item[open] .faq-body { animation: slide-down var(--dur-slow) var(--ease-out); }

/* ---------- Contact ---------- */
.section-contact {
  background:
    radial-gradient(ellipse 70% 90% at 15% 0%, rgb(var(--lilac-rgb) / .45), transparent 62%),
    var(--bg);
  border-top: 1px solid var(--border);
}
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 1rem + 5vw, 4.5rem);
  align-items: start;
}
.contact-copy h2 { margin-bottom: var(--s-4); }

.contact-list { display: grid; gap: var(--s-5); margin-top: var(--s-8); }
.contact-list li { display: flex; gap: var(--s-4); align-items: flex-start; }
.ci {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border: 1px solid rgb(var(--sage-rgb) / .95);
  border-radius: var(--r-md);
  background: var(--sage);
  color: var(--sage-ink);
}
.contact-list em {
  display: block;
  font-style: normal;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.contact-list span > a { font-weight: 700; color: var(--fg); }
.contact-list span > a:hover { color: var(--accent-hi); }
.contact-list li > span:last-child { font-size: var(--fs-sm); color: var(--fg-muted); }

/* Form */
.form-card {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--e-4);
}
.form-title { font-size: var(--fs-xl); margin-bottom: var(--s-6); }

.field { margin-bottom: var(--s-5); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }

.field label {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.req { color: var(--accent); }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: rgb(var(--bg-rgb) / .7);
  color: var(--fg);
  font-size: var(--fs-base);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.field textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
.field input::placeholder,
.field textarea::placeholder { color: var(--fg-subtle); }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: #6B5A48; }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .22);
}

.select-wrap { position: relative; }
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--s-10);
  cursor: pointer;
}
/* An unchosen select should read as a placeholder, matching the text inputs */
.field select:invalid { color: var(--fg-subtle); }
.field select:has(option[value=""]:checked) { color: var(--fg-subtle); }
/* Native dropdown lists ignore the dark page theme without this */
.field select option { background: var(--surface); color: var(--fg); }
.select-chevron {
  position: absolute;
  top: 50%; right: var(--s-4);
  transform: translateY(-50%);
  width: 1.125rem; height: 1.125rem;
  color: var(--fg-muted);
  pointer-events: none;
}

.hint { margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--fg-subtle); }

.error {
  display: none;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--danger);
}
.error::before { content: "!"; display: grid; place-items: center; width: 15px; height: 15px; flex: none;
  border: 1.5px solid currentColor; border-radius: 50%; font-size: 10px; font-weight: 800; }
.field.has-error .error { display: flex; }
.field.has-error input,
.field.has-error select { border-color: var(--danger); }

.spinner { display: none; width: 18px; height: 18px; border: 2px solid rgb(var(--on-accent-rgb) / .45);
  border-top-color: var(--on-accent); border-radius: 50%; animation: spin .7s linear infinite; }
.btn.is-loading { pointer-events: none; opacity: .85; }
.btn.is-loading .spinner { display: block; }

.form-foot {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
}
.form-foot .ico { width: 1rem; height: 1rem; color: var(--sage-ink); }

.form-status {
  display: none;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding: var(--s-4);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.form-status.is-visible { display: flex; animation: slide-down var(--dur) var(--ease-out); }
/* Success uses sage, not terracotta — the brand colour on a form reads as "warning".
   The wording and the leading glyph carry the meaning too; colour is never alone. */
.form-status.is-success {
  border: 1px solid var(--sage);
  background: rgb(var(--sage-rgb) / .38);
  color: var(--sage-ink);
}
.form-status.is-error {
  border: 1px solid rgb(var(--danger-rgb) / .4);
  background: rgb(var(--danger-rgb) / .1);
  color: var(--danger);
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  padding-block: var(--s-16) var(--s-8);
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
}
/* Lit seam where the cream page meets the dark footer */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 6%; right: 6%;
  height: 1px;
  background: linear-gradient(90deg,
              transparent,
              var(--accent) 32%,
              var(--neon) 68%,
              transparent);
  box-shadow: 0 8px 22px rgb(var(--accent-rgb) / .5),
              0 14px 44px rgb(var(--neon-rgb) / .25);
  pointer-events: none;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: var(--s-10) var(--s-8);
  padding-bottom: var(--s-10);
  border-bottom: 1px solid var(--border);
}
.footer-brand .brand { margin-bottom: var(--s-5); }
.footer-brand p { font-size: var(--fs-sm); color: var(--fg-muted); max-width: 44ch; }
.footer-brand .license { margin-top: var(--s-4); font-size: var(--fs-xs); color: var(--fg-subtle); }

.footer-col h3 {
  margin-bottom: var(--s-4);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.footer-col ul { display: grid; gap: var(--s-3); }
.footer-col li { font-size: var(--fs-sm); color: var(--fg-muted); }
.footer-col a { transition: color var(--dur) var(--ease-out); }
.footer-col a:hover { color: var(--accent); text-shadow: var(--glow-text); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-6);
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
}
.footer-links a:hover { color: var(--accent); text-shadow: var(--glow-text); }

/* ---------- Sticky mobile bar ---------- */
.mobile-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: var(--z-sticky);
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: rgb(var(--bg-rgb) / .96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.mobile-bar .btn { flex: 1; }
.mobile-bar .btn-outline { flex: 0 0 34%; }

/* ---------- Animations ---------- */
@keyframes pulse    { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes float    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes rise-in  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* A lamp catching: quick bloom, then settle to the resting glow */
@keyframes device-on {
  0%   { box-shadow: inset 0 0 0 rgb(var(--accent-rgb) / 0); }
  38%  { box-shadow: inset 0 0 40px rgb(var(--accent-rgb) / .34), 0 0 28px rgb(var(--accent-rgb) / .28); }
  100% { box-shadow: inset 0 0 28px rgb(var(--accent-rgb) / .13); }
}
@keyframes device-off {
  0%   { box-shadow: inset 0 0 28px rgb(var(--accent-rgb) / .2); }
  100% { box-shadow: inset 0 0 0 rgb(var(--accent-rgb) / 0); }
}
@keyframes value-swap {
  0%   { opacity: 1; transform: translateY(0); }
  40%  { opacity: 0; transform: translateY(-5px); }
  41%  { opacity: 0; transform: translateY(5px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes scene-countdown { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Occupancy LED, once it has tripped */
@keyframes sensor-ping {
  0%, 100% { box-shadow: 0 0 8px var(--neon); }
  50%      { box-shadow: 0 0 14px var(--neon), 0 0 24px rgb(var(--neon-rgb) / .6); }
}

/* The hero lamp is on — a slow breath, not a blink */
@keyframes lamp-breathe {
  0%, 100% { box-shadow: inset 0 0 28px rgb(var(--accent-rgb) / .14); }
  50%      { box-shadow: inset 0 0 36px rgb(var(--accent-rgb) / .24); }
}
.tile-warm { animation: lamp-breathe 5s ease-in-out infinite; }
@keyframes slide-down {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Above-the-fold entrance — runs on load, never waits on JS or an observer,
   so the LCP heading paints on the first frame budget rather than on scroll. */
.rise {
  animation: rise-in 480ms var(--ease-out) both;
  animation-delay: var(--rise-delay, 0ms);
}

/* Scroll reveal — transform/opacity only, no layout thrash.
   Scoped to .js so content stays visible when JavaScript is off or fails. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive — 1024 / 768 / 480
   ========================================================================== */

@media (max-width: 1200px) {
  .cap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-panel { max-width: 520px; margin-inline: auto; width: 100%; }
  .chip-1 { left: 0; }
  .chip-2 { right: 0; }
  .split { grid-template-columns: 1fr; }
  .split-head { position: static; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
  .nav {
    position: fixed;
    top: var(--header-h);
    right: var(--s-4);
    left: var(--s-4);
    z-index: var(--z-nav);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-4);
    max-height: calc(100dvh - var(--header-h) - var(--s-8));
    overflow-y: auto;
    padding: var(--s-5);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-xl);
    background: var(--surface);
    box-shadow: var(--e-4);
  }
  .nav.is-open { display: flex; animation: slide-down var(--dur) var(--ease-out); }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list a { padding: var(--s-3) var(--s-4); font-size: var(--fs-base); min-height: 48px; display: flex; align-items: center; }
  .nav-list li + li { border-top: 1px solid var(--border); }
  .nav-cta { flex-direction: column; align-items: stretch; padding-top: var(--s-4); border-top: 1px solid var(--border); }
  .nav-cta .btn { width: 100%; }
  .nav-toggle { display: grid; }

  /* Tablet: two columns rather than three full-width stacked cards */
  .cards-3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .cards-2 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step:nth-child(2n)::after { display: none; }
  .device-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trigger-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area-box { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-2); }
  .stats li:nth-child(2n+1) { border-left: 0; }
  .stats li:nth-child(n+3) { padding-top: var(--s-5); border-top: 1px solid var(--border); }
}

@media (max-width: 640px) {
  :root { --header-h: 64px; }

  body { padding-bottom: 76px; }        /* clear the sticky mobile bar */
  .mobile-bar { display: flex; }

  .cards-3 { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .trigger-list { grid-template-columns: 1fr; }
  .cap-grid { grid-template-columns: 1fr; }
  .device-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .device { padding: var(--s-3); }
  .device .switch { top: var(--s-3); right: var(--s-3); }
  .scene-board { padding: var(--s-4); }
  /* Four tabs will not fit one phone row — wrap to 2x2 */
  .scene-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scene-tab:nth-child(odd) { border-left: 0; }
  .scene-tab:nth-child(n+3) { border-top: 1px solid var(--border); }
  .scene-progress { display: none; }
  .steps { grid-template-columns: 1fr; }
  .step::after { display: none; }
  .field-row { grid-template-columns: 1fr; }
  .area-list { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .footer-bottom { flex-direction: column; }

  .hero-actions .btn { width: 100%; }

  /* The panel is decorative — keep it compact so it doesn't push the fold */
  .panel { padding: var(--s-4); }
  .panel-tiles { gap: var(--s-2); }
  .tile { padding: var(--s-3); }
  .switch { top: var(--s-3); right: var(--s-3); }
  .panel-bar { display: none; }
  .chip-1, .chip-2 { display: none; }   /* keep the panel readable at small widths */
  .brand-text em { display: none; }
  .section-head { margin-bottom: var(--s-8); }
}

@media (max-width: 380px) {
  .stats { grid-template-columns: 1fr; }
  .stats li { border-left: 0 !important; }
  .stats li + li { padding-top: var(--s-4); border-top: 1px solid var(--border); }
}

/* ---------- Preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .tile-warm { animation: none; }
  .scenes.is-cycling .scene-progress::after { animation: none; }
}

@media print {
  .site-header, .mobile-bar, .hero-panel, .nav-scrim { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .js .reveal { opacity: 1; transform: none; }
}