/* ==========================================================================
   Hoss Electric Inc. — design-b — Night Garden (schema 0.6.1)
   All selectors scoped [data-design="b"]. Remapped verbatim from
   design.md's night-garden token/component/element system.
   ========================================================================== */

[data-design="b"] {
  /* ─── Color — the night plan ─────────────────────────────────────── */
  --design-b-primary: #E4B363;
  --ng-night:      #10151C;  /* page ground — blue-black, never #000       */
  --ng-pane:       #171E27;  /* raised panel — one stop up from night      */
  --ng-well:       #0B0F14;  /* recessed — the shadow side of panels       */
  --ng-moonpaper:  #E8ECEF;  /* primary ink (text) — paper by moonlight    */
  --ng-dim:        #9AA7B4;  /* muted — captions, meta, off-circuit        */
  --ng-hairline:   #2A3440;  /* rules, panel edges, conduit lines          */
  --ng-lamp:       #E4B363;  /* ACCENT 1 — 2700K lamp amber (<=2/screen)   */
  --ng-lamp-deep:  #C89440;  /* pressed / engaged amber                    */
  --ng-moon:       #A9C1D9;  /* ACCENT 2 — moonlight blue (links, success) */
  --ng-moon-deep:  #7FA0C0;  /* pressed moon / confirmed                   */
  --ng-critical:   #D96A5A;  /* open-circuit red — errors only             */

  /* ─── Typography ─────────────────────────────────────────────────── */
  --ng-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ng-font-body:    "IBM Plex Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --ng-font-mono:    "JetBrains Mono", ui-monospace, "IBM Plex Mono", Menlo, monospace;

  --ng-text-spec:  clamp(0.6875rem, 0.66rem + 0.15vw, 0.75rem);
  --ng-text-meta:  clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
  --ng-text-body:  clamp(1rem, 0.95rem + 0.35vw, 1.1875rem);
  --ng-text-lead:  clamp(1.1875rem, 1.1rem + 0.5vw, 1.4375rem);
  --ng-text-title: clamp(1.5rem, 1.35rem + 0.9vw, 2.125rem);
  --ng-text-hero:  clamp(2rem, 1.5rem + 2.8vw, 3.625rem);

  /* ─── Spacing — the fixture run (4px base) ───────────────────────── */
  --ng-gap:     4px;
  --ng-lead:    8px;
  --ng-run:     16px;
  --ng-span:    24px;
  --ng-zone:    40px;
  --ng-lot:     64px;
  --ng-grounds: 96px;
  --ng-acreage: 128px;

  /* ─── Motion — dimmer physics ────────────────────────────────────── */
  --ng-t-tap:     110ms;
  --ng-t-fadeup:  240ms;
  --ng-t-travel:  380ms;
  --ng-t-scene:   520ms;
  --ng-ease-fadeup: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ng-ease-travel: cubic-bezier(0.32, 0.9, 0.26, 1.01);
  --ng-ease-tap:    cubic-bezier(0.4, 0, 0.6, 1);

  /* ─── Radius ─────────────────────────────────────────────────────── */
  --ng-r-spec:   2px;
  --ng-r-tap:    6px;
  --ng-r-pane:   10px;

  /* ─── Shadow / Elevation ──────────────────────────────────────────── */
  --ng-pool-1: 0 1px 0 rgba(11, 15, 20, 0.7);
  --ng-pool-2: 0 4px 16px rgba(11, 15, 20, 0.55);
  --ng-pool-3: 0 10px 32px rgba(11, 15, 20, 0.6);
}

[data-design="b"].dq-design {
  background: var(--ng-night);
  color: var(--ng-moonpaper);
  font-family: var(--ng-font-body);
  font-size: var(--ng-text-body);
  line-height: 1.6;
  isolation: isolate;
}

/* ============================================================
   ELEMENT 1 — header (the Night Walk)
   ============================================================ */
[data-design="b"] .ng-header {
  position: sticky; top: 0; z-index: 40; background: var(--ng-night);
}
[data-design="b"] .ng-header__bar {
  max-width: 1320px; margin-inline: auto;
  padding: 16px clamp(20px, 5vw, 48px);
  display: flex; align-items: center; justify-content: space-between;
}
[data-design="b"] .ng-wordmark {
  font-family: var(--ng-font-display); font-weight: 600;
  font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.55rem);
  letter-spacing: -0.01em; color: var(--ng-moonpaper);
  text-decoration: none; display: inline-flex; min-width: 0; line-height: 1.15;
}
[data-design="b"] .ng-header__rule {
  position: absolute; left: 0; right: 0; bottom: 0; height: 12px;
  border-bottom: 1px solid var(--ng-hairline);
  overflow: hidden; pointer-events: none;
}
[data-design="b"] .ng-header__fixtures {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle 2px at 5px 9px, var(--ng-dim) 98%, transparent),
                    radial-gradient(circle 2px at 5px 9px, var(--ng-dim) 98%, transparent);
  background-size: calc(100% / 9) 12px; background-repeat: repeat-x;
  opacity: 0.55;
}
[data-design="b"] .ng-header__pool {
  position: absolute; top: 0; bottom: 0; left: 0; width: 26%;
  background: radial-gradient(ellipse 60% 100% at 50% 80%,
    var(--ng-lamp) 0%, transparent 70%);
  opacity: 0.6; transform: translateX(-120%);
  animation: ng-night-walk 26s linear infinite;
  will-change: transform;
}
@keyframes ng-night-walk {
  from { transform: translateX(-120%); }
  to   { transform: translateX(520%); }
}
[data-design="b"] .ng-burger {
  width: 44px; height: 44px; display: grid; place-content: center; gap: 7px;
  background: none; border: 0; cursor: pointer;
}
[data-design="b"] .ng-burger__pin {
  display: block; width: 22px; height: 2px; background: var(--ng-moonpaper);
  transition: transform var(--ng-t-fadeup) var(--ng-ease-travel);
}
[data-design="b"] .ng-burger[aria-expanded="true"] .ng-burger__pin:first-child {
  transform: translateY(4.5px) rotate(45deg);
}
[data-design="b"] .ng-burger[aria-expanded="true"] .ng-burger__pin:last-child {
  transform: translateY(-4.5px) rotate(-45deg);
}
[data-design="b"] .ng-panel {
  position: fixed; inset: 0; z-index: 50; background: var(--ng-well);
}
[data-design="b"] .ng-panel__inner {
  max-width: 1320px; margin-inline: auto; height: 100%;
  padding: 96px clamp(20px, 5vw, 48px) 48px;
  display: flex; flex-direction: column; gap: var(--ng-span);
  overflow-y: auto;
}
[data-design="b"] .ng-panel__link {
  font-family: var(--ng-font-display); font-size: var(--ng-text-title);
  font-weight: 600; letter-spacing: -0.01em;
  color: var(--ng-moonpaper); text-decoration: none;
  width: fit-content; position: relative; padding-bottom: 6px;
}
[data-design="b"] .ng-panel__link::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 6px;
  background: radial-gradient(ellipse 100% 100% at 50% 100%,
    var(--ng-lamp) 0%, transparent 75%);
  opacity: 0; transition: opacity var(--ng-t-fadeup) var(--ng-ease-fadeup);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .ng-panel__link:hover::after { opacity: 0.55; }
}
[data-design="b"] .ng-panel__link:focus-visible::after { opacity: 0.55; }
[data-design="b"] .ng-panel__link:focus-visible { outline: 2px solid var(--ng-moon); outline-offset: 3px; }
[data-design="b"] .ng-panel__ctas {
  margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--ng-run);
}
@media (max-width: 560px) {
  [data-design="b"] .ng-header__bar { padding-block: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .ng-header__pool {
    animation: none; transform: translateX(180%);
  }
  [data-design="b"] .ng-burger__pin,
  [data-design="b"] .ng-panel__link::after { transition: none; }
}

/* ============================================================
   ELEMENT 2 — CTA (the Master Switch) — shared .ng-lamp component
   ============================================================ */
[data-design="b"] .ng-lamp {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 14px 28px;
  font-family: var(--ng-font-body); font-weight: 700;
  font-size: var(--ng-text-body); line-height: 1.2;
  border-radius: var(--ng-r-tap); text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--ng-t-fadeup) var(--ng-ease-travel),
              box-shadow var(--ng-t-fadeup) var(--ng-ease-travel);
}
[data-design="b"] .ng-lamp--amber {
  background: var(--ng-lamp); color: var(--ng-well);
  box-shadow: var(--ng-pool-1);
}
[data-design="b"] .ng-lamp--line {
  background: transparent; color: var(--ng-moonpaper);
  border-color: var(--ng-hairline);
}
[data-design="b"] .ng-cta::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -14px; height: 14px;
  background: radial-gradient(ellipse 100% 100% at 50% 0%,
    var(--ng-lamp) 0%, transparent 72%);
  opacity: 0.35; pointer-events: none;
  animation: ng-cta-hold 5.5s var(--ng-ease-fadeup) infinite;
  will-change: opacity;
}
@keyframes ng-cta-hold {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.55; }
}
[data-design="b"] .ng-cta__beam { width: 20px; height: 20px; flex: none; }
[data-design="b"] .ng-cta__source { fill: currentColor; }
[data-design="b"] .ng-cta__cone {
  fill: currentColor; opacity: 0.5;
  transform-origin: 10px 6px; transform: scaleX(0.55);
  transition: transform var(--ng-t-fadeup) var(--ng-ease-travel);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .ng-cta:hover { transform: translateY(-1px); box-shadow: var(--ng-pool-2); }
  [data-design="b"] .ng-cta:hover .ng-cta__cone { transform: scaleX(1); }
}
[data-design="b"] .ng-cta:focus-visible {
  outline: 2px solid var(--ng-moon); outline-offset: 2px;
}
[data-design="b"] .ng-cta:focus-visible .ng-cta__cone { transform: scaleX(1); }
[data-design="b"] .ng-cta:active { transform: scale(0.98); box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .ng-cta::after { animation: none; opacity: 0.45; }
  [data-design="b"] .ng-cta__cone,
  [data-design="b"] .ng-lamp { transition: none; }
}

/* ============================================================
   ELEMENT 3 — hero backdrop (the Night Plan)
   ============================================================ */
[data-design="b"] .ng-hero {
  position: relative; overflow: clip;
  min-height: min(82vh, 860px);
  display: flex; align-items: center;
  background: linear-gradient(180deg, var(--ng-well) 0%, var(--ng-night) 55%, #131A22 100%);
  padding-block: var(--ng-acreage);
  isolation: isolate;
}
[data-design="b"] .ng-hero__plan { position: absolute; inset: 0; z-index: 0; }
[data-design="b"] .ng-hero__scene { width: 100%; height: 100%; display: block; }
[data-design="b"] .ng-scene__ground { stroke: var(--ng-dim); stroke-opacity: 0.5; stroke-width: 1; }
[data-design="b"] .ng-scene__canopy {
  fill: var(--ng-well); stroke: var(--ng-moon); stroke-opacity: 0.28; stroke-width: 1;
}
[data-design="b"] .ng-scene__trunk { stroke: var(--ng-moon); stroke-opacity: 0.3; stroke-width: 2; }
[data-design="b"] .ng-scene__fixture { fill: var(--ng-lamp); }
[data-design="b"] .ng-scene__cone--moon { fill: var(--ng-moon); opacity: 0.16; }
[data-design="b"] .ng-scene__cone--graze { fill: var(--ng-lamp); opacity: 0.3; }
[data-design="b"] .ng-scene__branchshadow path,
[data-design="b"] .ng-scene__branchshadow {
  stroke: var(--ng-well); stroke-opacity: 0.85; stroke-width: 3; fill: none;
}
[data-design="b"] .ng-scene__stake { fill: var(--ng-lamp); }
[data-design="b"] .ng-scene__pool { fill: var(--ng-lamp); opacity: 0.22; }
[data-design="b"] .ng-scene__wall {
  fill: var(--ng-pane); stroke: var(--ng-hairline); stroke-width: 1;
}
[data-design="b"] .ng-scene__specs line {
  stroke: var(--ng-dim); stroke-opacity: 0.35; stroke-width: 1; stroke-dasharray: 2 6;
}
[data-design="b"] .ng-hero__drift {
  position: absolute; top: -25%; bottom: -25%; left: -35%; width: 85%;
  background: linear-gradient(105deg,
    transparent 10%, rgba(169, 193, 217, 0.34) 42%,
    rgba(16, 21, 28, 0.5) 64%, transparent 90%);
  opacity: 0.5; filter: blur(3px);
  animation: ng-moon-drift 13s ease-in-out infinite alternate;
  will-change: transform, opacity; pointer-events: none;
}
@keyframes ng-moon-drift {
  from { transform: translateX(0);    opacity: 0.34; }
  to   { transform: translateX(78%);  opacity: 0.5; }
}
[data-design="b"] .ng-hero__col {
  position: relative; z-index: 2;
  width: 100%; max-width: 1320px; margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}
[data-design="b"] .ng-hero__title {
  font-family: var(--ng-font-display); font-weight: 600; letter-spacing: -0.015em;
  font-size: var(--ng-text-hero); line-height: 1.08;
  color: var(--ng-moonpaper); max-width: 17ch; text-wrap: balance;
  margin: 0 0 var(--ng-run); opacity: 1;
}
[data-design="b"] .ng-hero__sub {
  font-size: var(--ng-text-lead); line-height: 1.5; color: var(--ng-dim);
  max-width: 52ch; margin: 0 0 var(--ng-run); opacity: 1;
}
[data-design="b"] .ng-hero__proof {
  font-family: var(--ng-font-mono); font-size: var(--ng-text-meta);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ng-dim); margin: 0 0 var(--ng-span); opacity: 1;
}
[data-design="b"] .ng-hero.ng-enter .ng-hero__title { animation: ng-settle 0.6s var(--ng-ease-fadeup) both; }
[data-design="b"] .ng-hero.ng-enter .ng-hero__sub   { animation: ng-settle 0.6s 90ms var(--ng-ease-fadeup) both; }
[data-design="b"] .ng-hero.ng-enter .ng-hero__proof { animation: ng-settle 0.6s 180ms var(--ng-ease-fadeup) both; }
@keyframes ng-settle {
  from { transform: translateY(12px); }
  to   { transform: translateY(0); }
}
@media (max-width: 560px) {
  [data-design="b"] .ng-hero { min-height: 100svh; padding-block: var(--ng-grounds); }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .ng-hero__drift {
    animation: none; transform: translateX(38%); opacity: 0.44;
  }
  [data-design="b"] .ng-hero.ng-enter .ng-hero__title,
  [data-design="b"] .ng-hero.ng-enter .ng-hero__sub,
  [data-design="b"] .ng-hero.ng-enter .ng-hero__proof { animation: none; }
}

/* ============================================================
   ELEMENT 4 — Zone Board (mid-page ambient, Services)
   ============================================================ */
[data-design="b"] .ng-board {
  padding-block: var(--ng-grounds); background: var(--ng-pane);
  border-block: 1px solid var(--ng-hairline);
}
[data-design="b"] .ng-board__col {
  max-width: 1320px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px);
}
[data-design="b"] .ng-board__title {
  font-family: var(--ng-font-display); font-weight: 600; letter-spacing: -0.01em;
  font-size: var(--ng-text-title); color: var(--ng-moonpaper);
  margin: 0 0 var(--ng-zone);
}
[data-design="b"] .ng-board__rows { list-style: none; margin: 0; padding: 0; }
[data-design="b"] .ng-board__row {
  display: grid; grid-template-columns: auto auto 1fr auto;
  align-items: center; gap: var(--ng-run);
  min-height: 56px; border-bottom: 1px solid var(--ng-hairline);
  transform: translateY(0);
}
[data-design="b"] .ng-board.is-in .ng-board__row {
  animation: ng-settle 0.5s var(--ng-ease-fadeup) both;
  animation-delay: calc(var(--ng-i, 0) * 70ms);
}
[data-design="b"] .ng-board__num {
  font-family: var(--ng-font-mono); font-size: var(--ng-text-spec);
  letter-spacing: 0.08em; color: var(--ng-dim); min-width: 2ch;
}
[data-design="b"] .ng-board__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ng-lamp); opacity: 0.18;
  transition: opacity var(--ng-t-fadeup) var(--ng-ease-fadeup);
}
[data-design="b"] .ng-board__row.is-live .ng-board__dot { opacity: 1; }
[data-design="b"] .ng-board__row.is-live .ng-board__num { color: var(--ng-lamp); }
[data-design="b"] .ng-board__name {
  font-size: var(--ng-text-body); color: var(--ng-moonpaper); line-height: 1.4;
}
[data-design="b"] .ng-board__spec {
  font-family: var(--ng-font-mono); font-size: var(--ng-text-spec);
  letter-spacing: 0.08em; color: var(--ng-dim); text-align: right;
}
@media (max-width: 560px) {
  [data-design="b"] .ng-board__row {
    grid-template-columns: auto auto 1fr; grid-template-rows: auto auto;
    padding-block: 10px;
  }
  [data-design="b"] .ng-board__spec { grid-column: 3; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .ng-board.is-in .ng-board__row { animation: none; }
  [data-design="b"] .ng-board__dot { transition: none; }
}

/* ============================================================
   About panel — authored in the design's Component variants
   (Scene panel language: pane fill, mono credential line)
   ============================================================ */
[data-design="b"] .ng-about {
  padding-block: var(--ng-grounds); background: var(--ng-night);
}
[data-design="b"] .ng-about__col {
  max-width: 1320px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px);
  background: var(--ng-pane); border: 1px solid var(--ng-hairline);
  border-radius: var(--ng-r-pane); padding: var(--ng-zone) clamp(20px, 5vw, 48px);
}
[data-design="b"] .ng-about__title {
  font-family: var(--ng-font-display); font-weight: 600; letter-spacing: -0.01em;
  font-size: var(--ng-text-title); color: var(--ng-moonpaper);
  margin: 0 0 var(--ng-run);
}
[data-design="b"] .ng-about__body {
  font-size: var(--ng-text-body); line-height: 1.6; color: var(--ng-dim);
  max-width: 65ch; margin: 0 0 var(--ng-span);
}
[data-design="b"] .ng-about__mono {
  font-family: var(--ng-font-mono); font-size: var(--ng-text-spec);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ng-dim);
  margin: 0;
}

/* ============================================================
   ELEMENT 7 — scroll choreography (Dusk Falls)
   ============================================================ */
[data-design="b"] .ng-dusk {
  padding-block: var(--ng-grounds); background: var(--ng-night); overflow: clip;
}
[data-design="b"] .ng-dusk__col {
  max-width: 1320px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px);
  margin-bottom: var(--ng-zone);
}
[data-design="b"] .ng-dusk__title {
  font-family: var(--ng-font-display); font-weight: 600; letter-spacing: -0.01em;
  font-size: var(--ng-text-title); color: var(--ng-moonpaper);
  margin: 0 0 var(--ng-run); max-width: 22ch;
}
[data-design="b"] .ng-dusk__body {
  font-size: var(--ng-text-body); line-height: 1.6; color: var(--ng-dim);
  max-width: 65ch; margin: 0;
}
[data-design="b"] .ng-dusk__band {
  position: relative; min-height: 200px;
  background: var(--ng-well); border-block: 1px solid var(--ng-hairline);
}
[data-design="b"] .ng-dusk__sky {
  position: absolute; inset: 0 0 40% 0;
  background: linear-gradient(180deg, #3A465A 0%, transparent 90%);
  opacity: 0.12;
}
[data-design="b"] .ng-dusk__horizon {
  position: absolute; left: 0; right: 0; bottom: 40%; height: 1px;
  background: var(--ng-dim); opacity: 0.4;
}
[data-design="b"] .ng-dusk__glow {
  position: absolute; bottom: 12%; width: 90px; height: 26px;
  background: radial-gradient(ellipse 100% 100% at 50% 100%,
    var(--ng-lamp) 0%, transparent 70%);
  opacity: 0.75; transform: translateY(0);
}
[data-design="b"] .ng-dusk__glow--1 { left: 18%; }
[data-design="b"] .ng-dusk__glow--2 { left: 47%; }
[data-design="b"] .ng-dusk__glow--3 { left: 76%; }
@supports (animation-timeline: view()) {
  [data-design="b"] .ng-dusk__sky {
    animation: ng-dusk-dim 1ms linear both;
    animation-timeline: view(); animation-range: entry 0% cover 45%;
  }
  [data-design="b"] .ng-dusk__glow {
    animation: ng-dusk-up 1ms linear both;
    animation-timeline: view();
  }
  [data-design="b"] .ng-dusk__glow--1 { animation-range: entry 15% entry 70%; }
  [data-design="b"] .ng-dusk__glow--2 { animation-range: entry 30% entry 85%; }
  [data-design="b"] .ng-dusk__glow--3 { animation-range: entry 45% cover 25%; }
  [data-design="b"] .ng-dusk__title {
    animation: ng-dusk-drift 1ms linear both;
    animation-timeline: view(); animation-range: entry 0% cover 40%;
  }
}
@keyframes ng-dusk-dim {
  from { opacity: 0.5; }
  to   { opacity: 0.12; }
}
@keyframes ng-dusk-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 0.75; transform: translateY(0); }
}
@keyframes ng-dusk-drift {
  from { transform: translateY(16px); }
  to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .ng-dusk__sky,
  [data-design="b"] .ng-dusk__glow,
  [data-design="b"] .ng-dusk__title {
    animation: none; transform: none;
  }
  [data-design="b"] .ng-dusk__sky { opacity: 0.12; }
  [data-design="b"] .ng-dusk__glow { opacity: 0.75; }
}

/* ============================================================
   ELEMENT 6 — pointer (the Lit Path)
   ============================================================ */
[data-design="b"] .ng-pointer {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--ng-run); padding-block: var(--ng-zone);
  background: var(--ng-night);
  opacity: 1; min-height: 132px;
}
[data-design="b"] .ng-pointer__label {
  font-family: var(--ng-font-mono); font-size: var(--ng-text-spec);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ng-dim);
  white-space: nowrap;
}
[data-design="b"] .ng-pointer__run {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
[data-design="b"] .ng-pointer__light {
  display: flex; flex-direction: column; align-items: center;
  animation: ng-path-light 5s var(--ng-ease-fadeup) infinite;
}
[data-design="b"] .ng-pointer__light:nth-child(2) { animation-delay: 0.6s; }
[data-design="b"] .ng-pointer__light:nth-child(3) { animation-delay: 1.2s; }
[data-design="b"] .ng-pointer__stake {
  width: 4px; height: 4px; border-radius: 50%; background: var(--ng-lamp);
}
[data-design="b"] .ng-pointer__pool {
  width: 46px; height: 8px; border-radius: 50%;
  background: radial-gradient(ellipse 100% 100% at 50% 0%,
    var(--ng-lamp) 0%, transparent 72%);
  opacity: 0.6;
}
@keyframes ng-path-light {
  0%       { opacity: 0.3; }
  20%, 60% { opacity: 1; }
  100%     { opacity: 0.3; }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .ng-pointer__light {
    animation: none; opacity: 1;
  }
}

/* ============================================================
   ELEMENT 5 — the Transformer Dimmer (funnel)
   ============================================================ */
[data-design="b"] .ng-funnel {
  padding-block: var(--ng-grounds); background: var(--ng-night);
}
[data-design="b"] .ng-funnel__col {
  max-width: 1320px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px);
}
[data-design="b"] .ng-funnel__title {
  font-family: var(--ng-font-display); font-weight: 600; letter-spacing: -0.01em;
  font-size: var(--ng-text-title); color: var(--ng-moonpaper);
  margin: 0 0 var(--ng-zone); max-width: 24ch;
}
[data-design="b"] .ng-xfmr {
  background: var(--ng-pane); border: 1px solid var(--ng-hairline);
  border-radius: var(--ng-r-pane); padding: var(--ng-zone); overflow: clip;
  max-width: 820px; margin-inline: auto;
}
[data-design="b"] .ng-dimmer { margin-bottom: var(--ng-zone); }
[data-design="b"] .ng-dimmer__scene {
  position: relative; height: 56px; margin-bottom: var(--ng-run);
  background: var(--ng-well); border-radius: var(--ng-r-spec);
  overflow: clip;
}
[data-design="b"] .ng-dimmer__vignette {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity var(--ng-t-scene) var(--ng-ease-fadeup);
}
[data-design="b"] .ng-dimmer__vignette--path {
  background:
    radial-gradient(ellipse 44px 10px at 18% 82%, var(--ng-lamp) 0%, transparent 70%),
    radial-gradient(ellipse 44px 10px at 42% 82%, var(--ng-lamp) 0%, transparent 70%);
}
[data-design="b"] .ng-dimmer__vignette--graze {
  background: radial-gradient(ellipse 30px 44px at 66% 65%, var(--ng-lamp) 0%, transparent 72%);
}
[data-design="b"] .ng-dimmer__vignette--moon {
  background: radial-gradient(ellipse 120px 40px at 85% 45%, var(--ng-moon) 0%, transparent 74%);
}
[data-design="b"] .ng-xfmr[data-lit="1"] .ng-dimmer__vignette--path { opacity: 0.5; }
[data-design="b"] .ng-xfmr[data-lit="2"] .ng-dimmer__vignette--path { opacity: 0.7; }
[data-design="b"] .ng-xfmr[data-lit="2"] .ng-dimmer__vignette--graze { opacity: 0.6; }
[data-design="b"] .ng-xfmr[data-lit="3"] .ng-dimmer__vignette--path,
[data-design="b"] .ng-xfmr[data-lit="4"] .ng-dimmer__vignette--path { opacity: 0.85; }
[data-design="b"] .ng-xfmr[data-lit="3"] .ng-dimmer__vignette--graze,
[data-design="b"] .ng-xfmr[data-lit="4"] .ng-dimmer__vignette--graze { opacity: 0.8; }
[data-design="b"] .ng-xfmr[data-lit="3"] .ng-dimmer__vignette--moon { opacity: 0.5; }
[data-design="b"] .ng-xfmr[data-lit="4"] .ng-dimmer__vignette--moon { opacity: 0.85; }
[data-design="b"] .ng-dimmer__rail {
  position: relative; height: 44px;
  border-bottom: 2px solid var(--ng-hairline);
}
[data-design="b"] .ng-dimmer__detents {
  position: absolute; left: 0; right: 0; bottom: -2px;
  display: flex; justify-content: space-between;
}
[data-design="b"] .ng-dimmer__detents i {
  width: 2px; height: 10px; background: var(--ng-hairline);
  transform: translateY(-8px);
}
[data-design="b"] .ng-dimmer__knob {
  position: absolute; left: 0; bottom: -12px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ng-moonpaper);
  border: 3px solid var(--ng-night);
  box-shadow: var(--ng-pool-2); cursor: grab;
  transform: translateX(calc(var(--ng-detent, 0) * 1px - 22px));
  transition: transform var(--ng-t-travel) var(--ng-ease-travel);
  touch-action: none;
}
[data-design="b"] .ng-dimmer__knob:focus-visible {
  outline: 2px solid var(--ng-moon); outline-offset: 3px;
}
[data-design="b"] .ng-dimmer__knob.is-dragging { transition: none; cursor: grabbing; }
[data-design="b"] .ng-dimmer__legend {
  display: flex; justify-content: space-between; margin-top: var(--ng-run);
  font-family: var(--ng-font-mono); font-size: var(--ng-text-spec);
  letter-spacing: 0.08em; color: var(--ng-dim);
}
[data-design="b"] .ng-step { display: none; border: 0; margin: 0; padding: 0; }
[data-design="b"] .ng-step.is-active { display: block; }
[data-design="b"] .ng-step.is-active .ng-step__q,
[data-design="b"] .ng-step.is-active .ng-step__grid,
[data-design="b"] .ng-step.is-active .ng-step__rows {
  animation: ng-settle 0.42s var(--ng-ease-fadeup) both;
}
[data-design="b"] .ng-step.is-active .ng-step__grid { animation-delay: 60ms; }
[data-design="b"] .ng-step__q {
  font-family: var(--ng-font-display); font-weight: 600;
  font-size: var(--ng-text-lead); color: var(--ng-moonpaper);
  padding: 0; margin-bottom: var(--ng-span);
}
[data-design="b"] .ng-step__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--ng-run);
}
[data-design="b"] .ng-tap {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  column-gap: 10px; row-gap: 3px; text-align: left;
  min-height: 56px; padding: 14px 16px;
  background: var(--ng-night); border: 1px solid var(--ng-hairline);
  border-radius: var(--ng-r-tap); cursor: pointer;
  font-family: var(--ng-font-body); box-shadow: var(--ng-pool-1);
  transition: transform var(--ng-t-tap) var(--ng-ease-tap),
              border-color var(--ng-t-fadeup) ease,
              box-shadow var(--ng-t-tap) var(--ng-ease-tap);
}
[data-design="b"] .ng-tap__dot {
  grid-row: span 2; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ng-lamp); opacity: 0.18;
  transition: opacity var(--ng-t-tap) var(--ng-ease-fadeup);
}
[data-design="b"] .ng-tap__name {
  font-size: var(--ng-text-body); font-weight: 600; color: var(--ng-moonpaper);
  line-height: 1.35;
}
[data-design="b"] .ng-tap__spec {
  grid-column: 2; font-family: var(--ng-font-mono);
  font-size: var(--ng-text-spec); letter-spacing: 0.08em; color: var(--ng-dim);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .ng-tap:hover { border-color: var(--ng-dim); transform: translateY(-1px); }
}
[data-design="b"] .ng-tap:focus-visible { outline: 2px solid var(--ng-moon); outline-offset: 2px; }
[data-design="b"] .ng-tap:active,
[data-design="b"] .ng-tap.is-pressed { transform: scale(0.97); box-shadow: none; }
[data-design="b"] .ng-tap.is-pressed .ng-tap__dot,
[data-design="b"] .ng-tap.is-selected .ng-tap__dot { opacity: 1; }
[data-design="b"] .ng-tap.is-selected { border-color: var(--ng-lamp); }
[data-design="b"] .ng-step__rows { display: grid; gap: var(--ng-span); }
[data-design="b"] .ng-step__note {
  margin-top: var(--ng-run); font-family: var(--ng-font-mono);
  font-size: var(--ng-text-meta); color: var(--ng-lamp);
}
[data-design="b"] .ng-inline-phone { color: var(--ng-lamp); text-decoration: underline; }
[data-design="b"] .ng-lead { display: grid; gap: 6px; position: relative; }
[data-design="b"] .ng-lead__label {
  font-family: var(--ng-font-mono); font-size: var(--ng-text-spec);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ng-dim);
}
[data-design="b"] .ng-lead__input {
  font: inherit; font-size: var(--ng-text-body); color: var(--ng-moonpaper);
  background: transparent; border: 0; border-bottom: 1px solid var(--ng-hairline);
  padding: 10px 2px; border-radius: 0; min-height: 44px; width: 100%;
}
[data-design="b"] .ng-lead__input:focus {
  outline: none; border-bottom-color: var(--ng-moon);
  box-shadow: 0 1px 0 var(--ng-moon);
}
[data-design="b"] .ng-step__err {
  color: var(--ng-critical); font-size: var(--ng-text-meta); min-height: 1.4em;
}
[data-design="b"] .ng-xfmr__submit { margin-top: var(--ng-span); }
[data-design="b"] .ng-step--done { text-align: left; }
[data-design="b"] .ng-done__lamp { width: 48px; height: 48px; }
[data-design="b"] .ng-done__source { fill: var(--ng-lamp); }
[data-design="b"] .ng-done__cone {
  fill: var(--ng-lamp); opacity: 0;
  transform-origin: 24px 16px; transform: scaleX(0.5);
}
[data-design="b"] .ng-step--done.is-active .ng-done__cone {
  animation: ng-scene-set 0.9s var(--ng-ease-fadeup) forwards;
}
@keyframes ng-scene-set {
  from { opacity: 0;   transform: scaleX(0.5); }
  to   { opacity: 0.35; transform: scaleX(1); }
}
[data-design="b"] .ng-done__line {
  font-family: var(--ng-font-display); font-weight: 600;
  font-size: var(--ng-text-lead); color: var(--ng-moonpaper);
  margin-top: var(--ng-run); max-width: 42ch;
}
@media (max-width: 560px) {
  [data-design="b"] .ng-xfmr { padding: var(--ng-span); }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .ng-dimmer__knob,
  [data-design="b"] .ng-dimmer__vignette,
  [data-design="b"] .ng-tap { transition: none; }
  [data-design="b"] .ng-step.is-active .ng-step__q,
  [data-design="b"] .ng-step.is-active .ng-step__grid,
  [data-design="b"] .ng-step.is-active .ng-step__rows { animation: none; }
  [data-design="b"] .ng-step--done.is-active .ng-done__cone {
    animation: none; opacity: 0.35; transform: scaleX(1);
  }
}

/* ============================================================
   Footer — deepest band (--ng-well)
   ============================================================ */
[data-design="b"] .ng-footer {
  background: var(--ng-well); padding-block: var(--ng-grounds);
  border-top: 1px solid var(--ng-hairline);
}
[data-design="b"] .ng-footer__col {
  max-width: 1320px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px);
  display: flex; flex-direction: column; gap: var(--ng-run); align-items: flex-start;
}
[data-design="b"] .ng-footer__mono {
  font-family: var(--ng-font-mono); font-size: var(--ng-text-spec);
  letter-spacing: 0.08em; color: var(--ng-dim); margin: 0;
}
[data-design="b"] .ng-footer__links {
  display: flex; flex-wrap: wrap; gap: var(--ng-run); margin-top: var(--ng-lead);
}
[data-design="b"] .ng-footer__copyright {
  font-family: var(--ng-font-mono); font-size: var(--ng-text-spec);
  color: var(--ng-dim); margin-top: var(--ng-span);
}

/* ==========================================================================
   MANDATORY MOBILE-SAFETY BLOCK (appended per hard contract)
   ========================================================================== */
[data-design="b"].dq-design,
[data-design="b"] .dq-design{max-width:100%;overflow-x:clip;}
[data-design="b"].dq-design *{min-width:0;}
[data-design="b"].dq-design img,
[data-design="b"].dq-design svg:not([data-keep-size]){max-width:100%;height:auto;}

/* stranded-wrapper autofix (drain 2026-07-03): every fixed max-width column centers — gate content_uncentered_left_stranded */
[data-design="b"] .ng-hero__sub { margin-inline: auto; }
[data-design="b"] .ng-about__body { margin-inline: auto; }
[data-design="b"] .ng-dusk__body { margin-inline: auto; }
[data-design="b"] .ng-done__line { margin-inline: auto; }

/* Phase-3.4 hero visibility floor (forge_assemble) */
[data-design="b"] [data-mf-role="hero"] :is(h1,h2,p,.headline,.subtitle,.proof,[class*="headline"],[class*="subtitle"],[class*="proof"]),
[data-design="b"] [data-mf-role="cta"] { opacity: 1 !important; }