/* ---------- descender / punctuation clipping fixes ----------
   The base Neon stylesheet uses very tight line-heights (0.92 / 0.94 / 1.0)
   on display titles, which clips italic descenders and trailing punctuation
   like the period at end of "editions." or "rooms.". We loosen those just
   enough to give them breathing room without changing the visual rhythm.
*/
.hero-title    { line-height: 1.0;  padding-bottom: 0.06em; }
.bhero-title   { line-height: 1.0;  padding-bottom: 0.06em; }
.sec-head h2   { line-height: 1.06; padding-bottom: 0.08em; }
.branch-title  { line-height: 1.05; }
.svc-title     { line-height: 1.15; }
.tpl-name      { line-height: 1.15; }
.cat-head h3   { line-height: 1.1;  padding-bottom: 0.04em; }
.man-list h3   { line-height: 1.2;  }
.ihub-tile h4  { line-height: 1.25; }

/* DESIGN CREED HUB — additions on top of base.css (the Neon palette).
   base.css supplies the shell, nav, hero, manifesto, marquee, contact, footer,
   plus the .card / .caps-grid pattern. This file adds:
     - 3-up branch grid for the home page
     - branch-page heroes
     - service grids (slightly tighter than caps-grid)
     - external-CTA banner card
     - iHub capability tiles + stat strip
     - templates gallery (curated cards w/ swatches)
     - active-nav indicator
*/

/* ---------- nav active state ---------- */
.nav nav a.is-on { color: var(--lime); }

/* ---------- HERO MOTTO ----------
   Sits tight under the DESIGN/CREED title as an editorial tagline. Display
   font in light weight so it reads as supporting voice, not competing
   headline. "practical" gets a hairline gradient underline (the same
   magenta→cyan as the title slash) — a subtle accent that ties the brand
   palette in without using background-clip:text, which clips italic
   letters at the slant. No vertical bar; no decorative ornament. */
.hero-motto {
  display: block;
  margin: -2px 0 30px;
  max-width: 40ch;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(18px, 1.85vw, 26px);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  font-variation-settings: "opsz" 24;
}
.hero-motto em {
  position: relative;
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
  padding: 0 0.04em;
}
.hero-motto em::after {
  content: "";
  position: absolute;
  left: 0.04em;
  right: 0.18em;          /* extra room on the right so the slanted final glyph isn't crowded by the rule */
  bottom: -0.16em;
  height: 1.5px;
  background: linear-gradient(90deg, var(--magenta), var(--cyan));
  border-radius: 1px;
  box-shadow: 0 0 8px rgba(255,45,214,0.55);
  transform-origin: left center;
  animation: motto-rule-draw 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s both;
}
@keyframes motto-rule-draw {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}
@media (max-width: 540px) {
  .hero-motto { margin: 0 0 24px; }
}
.nav nav a.is-on::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -22px;
  height: 1px; background: var(--lime);
  box-shadow: 0 0 12px var(--lime);
}

/* ════════════════════════════════════════════════════════════════════
   BRANCH CARDS · three editorial specimens
   Each card is its own piece of paper with its own typography:
     · iPrintat   → drafting paper · cream + red ochre · italic serif
     · Webdesign  → type specimen · off-white + magenta · Bodoni italic
     · Software   → system plate · graphite + lime · sans + slab mono
   Sit on the dark Neon page like exhibits in a gallery.
══════════════════════════════════════════════════════════════════════ */
.branches-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  position: relative;
  z-index: 1;
}
/* Frosted-glass blur layer for the card reflections — sits below the
   grid (top: 100%) covering the area where each card's
   -webkit-box-reflect renders. backdrop-filter blurs whatever is
   painted *behind* the layer, which is precisely the reflection
   pixels. Now that the cards no longer ship outer-halo box-shadows
   (which used to mirror as a rectangular ghost), the reflection is
   already cleaner and we can use a *lighter* blur — just enough to
   dissolve micro-detail (text antialiasing, fine strokes) without
   smearing colour and silhouette. */
.branches-grid::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -2vw;
  right: -2vw;
  /* Sized to the visible reflection band (≈ 65% of card height). */
  height: clamp(150px, 24vw, 360px);
  pointer-events: none;
  backdrop-filter: blur(2px) saturate(95%);
  -webkit-backdrop-filter: blur(2px) saturate(95%);
  /* Stay above the cards' painted reflection layer so the
     backdrop-filter has reflection pixels to actually blur. */
  z-index: 2;
}
/* Mobile 3-up scaling lives further down in the file (search "MOBILE 3-UP")
   — the cards stay shoulder-to-shoulder at every width and the grid never
   collapses to a single column. */

/* ── PAINTERLY SPLASH BACKDROP ───────────────────────────────────
   Sits behind the three branch cards. Three large blurred blobs (cyan,
   magenta, lime) positioned to overlap at the column seams so where the
   colours meet they mix additively. Three smaller "flicks" off to the
   sides add hand-painted texture. Pointer events disabled so cards stay
   clickable. Mobile viewports collapse to a vertical stack with a single
   centered spread so the composition still reads at narrow widths. */
.branches-splash {
  position: absolute;
  inset: -180px -6% -120px;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
  filter: saturate(110%);
}
.branches-splash .bs-blob,
.branches-splash .bs-flick {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(70px);
  mix-blend-mode: screen;
  pointer-events: none;
}
.branches-splash .bs-blob-cyan {
  /* sits behind the iPrintat (left) card; bleeds right into the design seam */
  top: 8%; left: 4%;
  width: 44%; height: 70%;
  background:
    radial-gradient(ellipse 60% 70% at 60% 50%, rgba(0,204,255,0.85), rgba(0,204,255,0.45) 55%, transparent 80%);
  transform: rotate(-8deg);
}
.branches-splash .bs-blob-magenta {
  /* center splash — slightly higher and wider to bleed left + right */
  top: 0%; left: 28%;
  width: 44%; height: 78%;
  background:
    radial-gradient(ellipse 65% 60% at 50% 55%, rgba(216,25,92,0.85), rgba(255,45,160,0.50) 55%, transparent 80%);
  transform: rotate(6deg);
}
.branches-splash .bs-blob-lime {
  /* right splash — symmetric to the cyan blob, bleeds left into design seam */
  top: 8%; right: 4%;
  width: 44%; height: 70%;
  background:
    radial-gradient(ellipse 60% 70% at 40% 50%, rgba(200,255,92,0.78), rgba(200,255,92,0.42) 55%, transparent 80%);
  transform: rotate(8deg);
}
/* Smaller satellite splatters — drips and flecks in mixed positions */
.branches-splash .bs-flick-1 {
  /* cyan drop above-left */
  top: -4%; left: 12%;
  width: 12%; height: 22%;
  background: radial-gradient(ellipse 50% 55% at 50% 50%, rgba(0,204,255,0.7), transparent 75%);
  filter: blur(40px);
  transform: rotate(-22deg);
}
.branches-splash .bs-flick-2 {
  /* magenta drop low-center */
  bottom: -2%; left: 42%;
  width: 16%; height: 26%;
  background: radial-gradient(ellipse 50% 55% at 50% 50%, rgba(255,45,160,0.65), transparent 75%);
  filter: blur(48px);
  transform: rotate(14deg);
}
.branches-splash .bs-flick-3 {
  /* lime drop above-right */
  top: -2%; right: 14%;
  width: 13%; height: 24%;
  background: radial-gradient(ellipse 50% 55% at 50% 50%, rgba(200,255,92,0.6), transparent 75%);
  filter: blur(42px);
  transform: rotate(20deg);
}

@media (max-width: 1100px) {
  /* Cards stay 3-up — keep splash horizontal too, just trim the bleed
     so the painterly mix doesn't overshoot the smaller frame. */
  .branches-splash { inset: -90px -4% -60px; }
}
@media (prefers-reduced-motion: reduce) {
  .branches-splash { filter: saturate(100%); }
}

/* ════════════════════════════════════════════════════════════════════
   BRANCH CARDS · glass + glow panels
   Each card is a translucent glass panel suspended over the painterly
   splash. Per-kind tokens drive every coloured layer (rim, glow, ink,
   CTA) so the rules below stay generic. Light flows: splash beneath
   → glass blur diffuses it → bottom-up internal glow tints it in the
   kind's hue → border catches a hairline rim. The card content is
   intentionally spare — a top intake port, a small meta tag, a
   line-art glyph, a single-line title and descriptor, one CTA pill.
══════════════════════════════════════════════════════════════════════ */
.branch-card[data-kind="physical"] {
  --c-hue: 0, 204, 255;          /* cyan */
  --c-glow: 95, 184, 255;
  --c-ink: #E8F8FF;
  --c-cta-bg: #00CCFF;
  --c-cta-bg-hover: #5BDFFF;
  --c-cta-fg: #06182F;
}
.branch-card[data-kind="design"] {
  --c-hue: 255, 55, 150;         /* rose-magenta — brighter than the prior 216,25,92 */
  --c-glow: 255, 90, 170;
  --c-ink: #FFEBF2;
  --c-cta-bg: #FF3A8E;
  --c-cta-bg-hover: #FF5BA3;
  --c-cta-fg: #1A0510;
}
.branch-card[data-kind="code"] {
  --c-hue: 168, 255, 80;         /* neon green — pushed greener, less olive */
  --c-glow: 200, 255, 120;
  --c-ink: #F0FFE0;
  --c-cta-bg: #B4FF50;
  --c-cta-bg-hover: #D8FF80;
  --c-cta-fg: #0A1402;
}

.branch-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  padding: 28px 26px 22px;
  text-decoration: none;
  color: var(--c-ink);
  min-height: 540px;
  /* Glass-floor reflection — mirrors the card below itself. WebKit/
     Blink only. Paired with a soft backdrop-filter blur layer on
     `.branches-grid::after` for a diffused-glass look.
     Mask quirk: 100% sits at the seam right under the card, 0% at
     the far end. The bottom 35% of the gradient is transparent, so
     the reflection is ≈ 65% of the card's height while keeping the
     full card width intact. With the outer halo box-shadows retired
     above, the reflection no longer drags a coloured rectangle ghost
     behind it — only the card's actual content + border reflects,
     which we can let sit a touch brighter (max alpha bumped from
     0.22 → 0.32) without the page feeling cluttered. */
  -webkit-box-reflect:
    below 1px linear-gradient(
      transparent 0%,
      transparent 35%,
      rgba(0, 0, 0, 0.10) 48%,
      rgba(0, 0, 0, 0.22) 70%,
      rgba(0, 0, 0, 0.32) 100%
    );
  /* SMOKED GLASS — translucent so the painterly splash reads through.
     Internal kind glow on top of the glass tint pulls the bottom of the
     card toward the branch hue without recolouring the whole panel. */
  background:
    radial-gradient(ellipse 110% 60% at 50% 110%,
      rgba(var(--c-hue), 0.30), transparent 70%),
    linear-gradient(178deg,
      rgba(20, 24, 32, 0.55) 0%,
      rgba(12, 14, 20, 0.72) 100%);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(var(--c-hue), 0.35);
  box-shadow:
    /* Lifted shadow — separates the glass panel from the painterly
       splash backdrop. Stays as a downward black drop, which mirrors
       cleanly in the reflection (just a darker tail under the card,
       no coloured rectangle ghost). */
    0 24px 60px -20px rgba(0, 0, 0, 0.65),
    /* Inner highlights — top edge picks up light from the bus above
       and the inset hue ring keeps the panel "lit" in its branch
       colour without a spreading outer halo. The previous outer
       halos (0 0 90px / 0 0 30px in --c-glow / --c-hue) were
       retired here because -webkit-box-reflect mirrored them as a
       second rectangular halo below the card. The per-kind ambient
       glow now comes from .branches-splash (bigger blobs) + the
       border + the bottom-up internal radial gradient. */
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(var(--c-hue), 0.18),
    inset 0 -40px 60px -30px rgba(var(--c-glow), 0.18);
  transition:
    transform .45s var(--ease),
    box-shadow .45s var(--ease),
    border-color .45s var(--ease);
}
.branch-card:hover { transform: translateY(-6px); }

/* ── Top-edge specular sheen + corner glint ─────────────────────────
   A single ::before delivers the "live panel" feel: a hairline highlight
   at the very top edge (like a screen lit from above) and a soft
   diagonal sheen sweeping toward the bottom-right corner. mix-blend-mode
   keeps it from darkening the panel.                                 */
.branch-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle 180px at 12% 4%,
      rgba(255, 255, 255, 0.14), transparent 60%),
    linear-gradient(125deg,
      rgba(255, 255, 255, 0.06) 0%,
      transparent 35%,
      transparent 70%,
      rgba(var(--c-glow), 0.10) 100%);
  mix-blend-mode: screen;
  opacity: 0.85;
  transition: opacity .45s var(--ease);
}
.branch-card:hover::before { opacity: 1; }

/* All children sit above the sheen layer */
.branch-card > * { position: relative; z-index: 1; }

/* Hover brightens the border, lifts the drop shadow, and pushes the
   internal hue glow harder. Outer halo box-shadows were retired here
   for the same reason as the rest state — they get mirrored by
   -webkit-box-reflect and read as a coloured rectangle under the
   reflection. The brighter border + stronger internal glow + lifted
   shadow give the same "card jumps forward" feel without spilling
   colour past the panel edges. */
.branch-card:hover {
  border-color: rgba(var(--c-hue), 0.7);
  box-shadow:
    0 30px 80px -22px rgba(0, 0, 0, 0.70),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(var(--c-hue), 0.32),
    inset 0 -50px 80px -32px rgba(var(--c-glow), 0.30);
}

/* ── INTAKE PORT · top-edge glow inlet ──────────────────────────────
   A small horizontal half-pill at the very top of each card, centered.
   Always-on dim glow in the kind colour; pass-2 (router JS) brightens
   it when the card is the bus's active target.                       */
.bc-port {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 6px;
  border-radius: 0 0 999px 999px;
  background: rgba(var(--c-glow), 0.85);
  box-shadow:
    0 0 10px rgba(var(--c-glow), 0.55),
    0 0 22px rgba(var(--c-hue), 0.32);
  opacity: 0.55;
  z-index: 2;
  pointer-events: none;
  transition: opacity .35s var(--ease), box-shadow .35s var(--ease);
}
.branch-card:hover .bc-port {
  opacity: 1;
  box-shadow:
    0 0 18px rgba(var(--c-glow), 0.85),
    0 0 36px rgba(var(--c-hue), 0.55);
}

/* ── GLYPH · line-art illustration ──────────────────────────────────
   Square-ish well, ~52% of card height. Hairline strokes inherit
   currentColor (= --c-ink). Stack:
     ::before — a soft radial backdrop glow in the kind hue, blurred,
                so the line art reads against a gentle "lit panel"
                behind it (boosts perceived stroke contrast without
                thickening the strokes themselves).
     <svg>   — the line drawing on top, with its own drop-shadow for
                the neon edge bloom.
   Each glyph has up to three animation hooks:
     · .glyph-accent   — draws on hover or on-view (one-shot)
     · .glyph-particle — continuous dash flow along a connector
                         (Software only — feels like data moving)
     · .glyph-pulse    — gentle node breath (Software only)        */
.bc-glyph {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  margin: 6px 0 22px;
  color: var(--c-ink);
  filter: drop-shadow(0 0 8px rgba(var(--c-glow), 0.55));
  transition: transform .45s var(--ease), filter .45s var(--ease);
}
.bc-glyph::before {
  content: "";
  position: absolute;
  inset: 6% 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(var(--c-glow), 0.20) 0%,
    rgba(var(--c-hue), 0.10) 35%,
    transparent 70%);
  filter: blur(18px);
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
  transition: opacity .45s var(--ease), filter .45s var(--ease);
}
.bc-glyph svg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
}
.branch-card:hover .bc-glyph {
  transform: scale(1.03);
  filter: drop-shadow(0 0 14px rgba(var(--c-glow), 0.85));
}
.branch-card:hover .bc-glyph::before {
  opacity: 1;
  filter: blur(24px);
}

/* ── glyph-accent · one-shot stroke-draw ─────────────────────────
   Hidden by default (full dashoffset). Draws when the card is hovered,
   or when `.is-in` is toggled by the IntersectionObserver in pass 2. */
.bc-glyph .glyph-accent {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  transition: stroke-dashoffset 1.4s var(--ease);
}
.branch-card:hover .bc-glyph .glyph-accent,
.bc-glyph.is-in .glyph-accent {
  stroke-dashoffset: 0;
}

/* ── glyph-particle · continuous flow dash (Software only) ───────
   A short-on / long-off dasharray rides the connector at a slow,
   steady pace — reads as data moving through a pipe. Hover speeds it
   up so the "system activates" on focus. */
.bc-glyph .glyph-particle {
  fill: none;
  opacity: 0.85;
  filter: drop-shadow(0 0 4px rgba(var(--c-glow), 0.7));
  animation: glyph-flow 4.2s linear infinite;
}
.branch-card:hover .bc-glyph .glyph-particle {
  animation-duration: 1.6s;
  opacity: 1;
}
@keyframes glyph-flow {
  to { stroke-dashoffset: -36; }
}

/* ── glyph-pulse · gentle node breath (Software only) ────────────
   Three small filled dots inside the service nodes. Slightly different
   delays so they don't pulse in lockstep — feels like independent
   services with their own heartbeat. */
.bc-glyph .glyph-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: glyph-pulse 3s ease-in-out infinite;
}
.bc-glyph .glyph-pulse:nth-of-type(2) { animation-delay: 0.7s; }
.bc-glyph .glyph-pulse:nth-of-type(3) { animation-delay: 1.4s; }
@keyframes glyph-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(1.4); }
}

/* ── glyph-head · 3D toolhead sweep (3D only, hover only) ────────
   The gantry/heater/nozzle assembly slides a few pixels left and
   right on hover, reading as the print head moving across the bed.
   Idle is fully still — the static silhouette already tells the
   story; motion only fires when the user signals interest.        */
.bc-glyph .glyph-head { transform: translateX(0); }
.branch-card:hover .bc-glyph .glyph-head {
  animation: glyph-head-sweep 2.4s ease-in-out infinite;
}
@keyframes glyph-head-sweep {
  0%, 100% { transform: translateX(-3px); }
  50%      { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .bc-glyph .glyph-particle,
  .bc-glyph .glyph-pulse,
  .branch-card:hover .bc-glyph .glyph-head { animation: none; }
}

/* ── TITLE ──────────────────────────────────────────────────────────
   Single line, display sans, white-ivory. No per-kind serif/Bodoni
   differentiation — colour and glyph carry the identity now.       */
.bc-title {
  margin: 0 0 6px;
  color: var(--c-ink);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* ── DESCRIPTOR · single line, ≤8 words ─────────────────────────── */
.bc-desc {
  margin: 0 0 22px;
  color: var(--c-ink);
  opacity: 0.68;
  font-family: var(--display);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.4;
  font-variation-settings: "opsz" 18;
}

/* ── CTA · single pill, kind-colour fill ──────────────────────────── */
.bc-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--c-cta-bg);
  color: var(--c-cta-fg);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px -4px rgba(var(--c-hue), 0.55);
  transition:
    background-color .3s var(--ease),
    box-shadow .3s var(--ease),
    transform .3s var(--ease);
}
.bc-cta em {
  font-style: normal;
  font-size: 14px;
  transition: transform .3s var(--ease);
}
/* Short label is for phone widths only — hidden on desktop, shown
   inside the @media (max-width: 640px) block below. */
.bc-cta-label-short { display: none; }
.branch-card:hover .bc-cta {
  background: var(--c-cta-bg-hover);
  box-shadow: 0 10px 26px -6px rgba(var(--c-hue), 0.75);
}
.branch-card:hover .bc-cta em { transform: translateX(4px); }

/* ════════════════════════════════════════════════════════════════════
   BRANCHES TREE · descending from the page hero
   No duplicate wordmark — instead the trunk's top fades out so the
   line appears to spill DOWN from the actual DESIGN/CREED hero above.
   Trunk + crossbar + three coloured leaves drop into glowing nodes
   that sit directly above each card column.
══════════════════════════════════════════════════════════════════════ */
.branches-tree {
  position: relative;
  /* The SVG was previously shipped with a 260-unit-tall trunk + a
     -96px negative top margin so most of the trunk overlapped with
     the hero. The trunk is now ~3× shorter (90 units), so we use a
     proportionally smaller upward overlap (-24px) to keep the cards
     close to the hero without leaving an awkward empty band above
     the bar. */
  margin: -24px auto 8px;
  pointer-events: none;
  max-width: var(--max);
  isolation: isolate;
}
/* spotlight backdrop — bleeds upward into the hero so the circuit feels
   electrically connected to the DESIGN/CREED wordmark above */
.branches-tree::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: -220px -10% -50px;
  background:
    radial-gradient(ellipse 48% 38% at 50% 28%, rgba(255,45,214,0.20), transparent 65%),
    radial-gradient(ellipse 70% 32% at 50% 72%, rgba(0,204,255,0.11), transparent 65%),
    radial-gradient(ellipse 22% 18% at 17% 78%, rgba(0,204,255,0.16), transparent 70%),
    radial-gradient(ellipse 22% 18% at 83% 78%, rgba(200,255,92,0.14), transparent 70%);
  filter: blur(14px);
  z-index: -1;
  animation: bt-spotlight-breath 6.2s ease-in-out infinite;
}
@keyframes bt-spotlight-breath {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1.05; }
}
.branches-tree-svg {
  width: 100%;
  /* No fixed height — let the SVG keep its viewBox aspect ratio (1200×220)
     and fill the full container width. With a fixed 220px height + meet
     aspect-ratio, the SVG used to letterbox itself in wide containers,
     pulling the side nodes ~100px inward of the branch-card column centers.
     Letting it scale removes that letterbox and aligns the side nodes. */
  display: block;
  overflow: visible;
}

/* tighter top-of-page rhythm so the tree sits right under the hero CTA */
body[data-page="home"] .hero {
  padding-bottom: clamp(24px, 3vw, 56px);
}
body[data-page="home"] #branches.caps {
  padding-top: clamp(20px, 2.4vw, 48px);
  /* Bottom space sized to fully contain the visible reflection band
     (now ≈65% of the card's height after the recent trim) plus a
     small buffer so the reflection's faded tail dissolves entirely
     within the section, before the footer. */
  padding-bottom: clamp(150px, 24vw, 380px);
}

/* ───────────────────────────────────────────────────────────────────
   Home · page-bottom finale
   The default .foot border-top is a flat #1f1f3d hairline that cut
   visibly through the reflection's fading edge. On the home page we
   trade it for a softer composition: no hard rule, instead a tri-
   colour gradient micro-line (cyan → rose → lime) that echoes the
   three branch hues and dissolves at both ends, plus extra breathing
   room above the footer text so the reflections, the line, and the
   © metadata all read as separate beats with air between them.
─────────────────────────────────────────────────────────────────── */
body[data-page="home"] .foot {
  border-top: none;
  position: relative;
  margin-top: 0;
  padding-top: clamp(36px, 4vw, 64px);
}
body[data-page="home"] .foot::before {
  content: "";
  position: absolute;
  top: clamp(14px, 1.6vw, 24px);
  left: 50%;
  transform: translateX(-50%);
  width: min(46%, 480px);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 204, 255, 0.45) 28%,
    rgba(216, 25, 92, 0.55) 50%,
    rgba(200, 255, 92, 0.45) 72%,
    transparent 100%
  );
  /* Soft halo so the line reads as an emitted glow rather than a
     pasted-on stroke — pairs with the circuit's neon language above. */
  filter: drop-shadow(0 0 6px rgba(216, 25, 92, 0.18));
  pointer-events: none;
}

/* ---------- HOME · centered hero (desktop + mobile) ----------
   Center every element in the hero (title, motto, lede, CTAs) so the
   page reads as a centered stack that visually anchors to the centered
   circuit + branch-card columns below. Applied unconditionally so the
   composition stays consistent across viewports. */
body[data-page="home"] .hero {
  text-align: center;
}
body[data-page="home"] .hero-title {
  text-align: center;
}
body[data-page="home"] .hero-motto {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
/* underline accent on "practical" — keep its absolute positioning anchored
   beneath the word regardless of viewport width */
body[data-page="home"] .hero-motto em::after {
  left: 0.04em;
  right: 0.18em;
}
body[data-page="home"] .hero-lede {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
body[data-page="home"] .hero-cta {
  justify-content: center;
}

/* ════════════════════════════════════════════════════════════════════
   CIRCUIT — five wire segments share one uniform stroke style
   (.bt-pipe). Per-segment classes only swap the stroke colour /
   gradient and the matching glow. All segments meet at common
   coordinates so their round caps overlap and the joints are seamless.
   • trunk   — hero down to bar centre, rose gradient fading in from top
   • bar     — horizontal bus, cyan→rose→lime gradient COMBINING the 3
   • physical / design / code — three coloured drops down to the
     bottom stations, each carrying its own neon branch hue
══════════════════════════════════════════════════════════════════════ */
.branches-tree-svg .bt-pipe {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.branches-tree-svg .bt-pipe-trunk {
  stroke: url(#trunkFade);
  filter:
    drop-shadow(0 0 8px rgba(216,25,92,0.55))
    drop-shadow(0 0 16px rgba(216,25,92,0.3));
}
.branches-tree-svg .bt-pipe-bar {
  stroke: url(#barFade);
  /* Composite halo that picks up all three branch colours so the
     bar's glow reads as the three branches combining into one bus. */
  filter:
    drop-shadow(0 0 7px rgba(0,204,255,0.4))
    drop-shadow(0 0 7px rgba(216,25,92,0.4))
    drop-shadow(0 0 7px rgba(200,255,92,0.4));
}
.branches-tree-svg .bt-pipe-physical {
  stroke: #00CCFF;
  filter:
    drop-shadow(0 0 8px rgba(0,204,255,0.85))
    drop-shadow(0 0 16px rgba(0,204,255,0.45));
}
.branches-tree-svg .bt-pipe-design {
  stroke: #d8195c;
  filter:
    drop-shadow(0 0 8px rgba(216,25,92,0.85))
    drop-shadow(0 0 16px rgba(216,25,92,0.45));
}
.branches-tree-svg .bt-pipe-code {
  stroke: #c8ff5c;
  filter:
    drop-shadow(0 0 8px rgba(200,255,92,0.85))
    drop-shadow(0 0 16px rgba(200,255,92,0.45));
}

/* Per-station pulse bursts — three short tracer dashes, one per
   station. Each starts at its station and travels ~100 SVG units
   along the wire (up the drop, slightly into the bar/trunk) over
   ~1 s, then fades out. The 3.6 s cycle matches the strobe/sonar
   timing. Staggered animation-delays so the bursts don't fire
   simultaneously, giving the network an organic "blinking"
   conversation between branches instead of a continuous flow. */
.branches-tree-svg .bt-pulse-burst {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  /* Single 14-unit dash followed by a 600-unit gap so only one
     bright tracer is visible per path (paths are at most 485 units
     long, so the second dash never appears). */
  stroke-dasharray: 14 600;
  stroke-dashoffset: 0;
  pointer-events: none;
  opacity: 0;
}
.branches-tree-svg .bt-pulse-burst-physical {
  stroke: rgba(220, 245, 255, 0.98);
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,0.85))
    drop-shadow(0 0 14px #00CCFF);
  animation: bt-pulse-burst 3.6s ease-out 0s infinite;
}
.branches-tree-svg .bt-pulse-burst-design {
  stroke: rgba(255, 220, 235, 0.98);
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,0.85))
    drop-shadow(0 0 14px #d8195c);
  animation: bt-pulse-burst 3.6s ease-out 1.2s infinite;
}
.branches-tree-svg .bt-pulse-burst-code {
  stroke: rgba(240, 255, 220, 0.98);
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,0.85))
    drop-shadow(0 0 14px #c8ff5c);
  animation: bt-pulse-burst 3.6s ease-out 2.4s infinite;
}
/* Burst keyframes — visible from 3% to ~32% of the cycle (≈ 1 s of
   3.6 s), travelling 100 units along the path during that window,
   then invisible for the rest of the cycle. */
@keyframes bt-pulse-burst {
  0%   { stroke-dashoffset:    0; opacity: 0; }
  3%   { opacity: 1; }
  31%  { stroke-dashoffset: -100; opacity: 1; }
  35%  { opacity: 0; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}

/* Stations — single colored dots that sit ON the circuit at the spine
   bottom (T-junction) and the bar's endpoints. No surrounding rings,
   halos, or pads — those would interrupt the line. The dot is
   rendered AFTER the path so it overlays cleanly on top.
   Each strobes when the pulse cascade reaches its position. */
.branches-tree-svg .bt-station {
  transform-box: fill-box;
  transform-origin: center;
}
.branches-tree-svg .bt-station-physical {
  fill: #00CCFF;
  filter: drop-shadow(0 0 14px #00CCFF);
  animation: bt-strobe-cyan 3.6s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
.branches-tree-svg .bt-station-design {
  fill: #d8195c;
  filter: drop-shadow(0 0 14px #d8195c);
  animation: bt-strobe-magenta 3.6s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
.branches-tree-svg .bt-station-code {
  fill: #c8ff5c;
  filter: drop-shadow(0 0 14px #c8ff5c);
  animation: bt-strobe-lime 3.6s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
/* Middle station strobes earliest — energy arrives via spine first.
   Side stations strobe a beat later — energy has to traverse the bar. */
@keyframes bt-strobe-magenta {
  0%, 28%  { transform: scale(1);    filter: drop-shadow(0 0 14px #d8195c); }
  31%      { transform: scale(1.55); filter: drop-shadow(0 0 28px #d8195c) drop-shadow(0 0 48px #ff2dd6); }
  44%      { transform: scale(1);    filter: drop-shadow(0 0 14px #d8195c); }
  100%     { transform: scale(1);    filter: drop-shadow(0 0 14px #d8195c); }
}
@keyframes bt-strobe-cyan {
  0%, 50%  { transform: scale(1);    filter: drop-shadow(0 0 14px #00CCFF); }
  53%      { transform: scale(1.55); filter: drop-shadow(0 0 28px #00CCFF) drop-shadow(0 0 48px #00CCFF); }
  68%      { transform: scale(1);    filter: drop-shadow(0 0 14px #00CCFF); }
  100%     { transform: scale(1);    filter: drop-shadow(0 0 14px #00CCFF); }
}
@keyframes bt-strobe-lime {
  0%, 50%  { transform: scale(1);    filter: drop-shadow(0 0 14px #c8ff5c); }
  53%      { transform: scale(1.55); filter: drop-shadow(0 0 28px #c8ff5c) drop-shadow(0 0 48px #c8ff5c); }
  68%      { transform: scale(1);    filter: drop-shadow(0 0 14px #c8ff5c); }
  100%     { transform: scale(1);    filter: drop-shadow(0 0 14px #c8ff5c); }
}

/* Sonar pings — radial expansion outward from each station on the
   strobe beat, sells the "energy delivered" feel. */
.branches-tree-svg .bt-sonar {
  fill: none;
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
}
.branches-tree-svg .bt-sonar-design   { stroke: #ff2dd6; animation: bt-sonar-mid  3.6s cubic-bezier(0.16, 0.84, 0.44, 1) infinite; }
.branches-tree-svg .bt-sonar-physical { stroke: #00CCFF; animation: bt-sonar-side 3.6s cubic-bezier(0.16, 0.84, 0.44, 1) infinite; }
.branches-tree-svg .bt-sonar-code     { stroke: #c8ff5c; animation: bt-sonar-side 3.6s cubic-bezier(0.16, 0.84, 0.44, 1) infinite; }

@keyframes bt-sonar-mid {
  0%, 28%  { transform: scale(0.55); opacity: 0; stroke-width: 3; }
  31%      { opacity: 0.85; }
  56%      { transform: scale(5);    opacity: 0; stroke-width: 1; }
  100%     { transform: scale(5);    opacity: 0; }
}
@keyframes bt-sonar-side {
  0%, 50%  { transform: scale(0.55); opacity: 0; stroke-width: 3; }
  53%      { opacity: 0.85; }
  78%      { transform: scale(5);    opacity: 0; stroke-width: 1; }
  100%     { transform: scale(5);    opacity: 0; }
}

/* honour reduced-motion — drop the bursts + sonar, keep the static glow */
@media (prefers-reduced-motion: reduce) {
  .branches-tree::before,
  .branches-tree-svg .bt-pulse-burst,
  .branches-tree-svg .bt-sonar,
  .branches-tree-svg .bt-station {
    animation: none !important;
  }
  .branches-tree-svg .bt-pulse-burst,
  .branches-tree-svg .bt-sonar { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE 3-UP · keep the desktop circuit composition (fan-tree + three
   shoulder-to-shoulder cards), just scale everything down so the whole
   composition still fits a 360–768px viewport. The cards never collapse
   to a single column — instead padding, type, glyph, and gap all shrink
   proportionally so the three columns and their nodes align with the
   tree above them at every width. Below 380px the type is brought even
   closer to the floor and the descriptor is hidden so the card still
   reads at a glance.
══════════════════════════════════════════════════════════════════════ */

/* Tablet & narrow desktop (≤1100px) — keep 3 columns, tighten gap, and
   shrink the desktop tree's negative top-margin so it sits closer to the
   smaller hero. Cards lose their min-height and slim padding. */
@media (max-width: 1100px) {
  body[data-page="home"] .hero        { padding-bottom: clamp(8px, 2vw, 24px); }
  body[data-page="home"] #branches.caps { padding-top: clamp(8px, 2vw, 24px); }

  /* Pull the fan-tree right up under the hero CTAs. The trunk is now
     ~3× shorter (see .branches-tree-svg viewBox), so the overlap can
     be smaller too — just enough to remove the air between the hero
     CTA row and the bar. */
  .branches-tree { margin: clamp(-12px, -1.4vw, -4px) auto 0; }

  /* Hero CTAs stay on a single row at every width. Shrink the buttons
     so both fit even on a 360px viewport, and disable the flex-wrap
     that was kicking the second button to its own line. (mobile-polish
     forces gap: 10px !important on every [class*="-cta"] — beat it.) */
  body[data-page="home"] .hero-cta {
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin-bottom: clamp(20px, 4vw, 36px);
  }
  body[data-page="home"] .hero-cta .btn {
    padding: 10px 14px;
    font-size: 11px;
    gap: 6px;
    /* Keep label on one line — if it overflows the slim button,
       tail-truncate so the layout never breaks. */
    white-space: nowrap;
    min-width: 0;
  }
  body[data-page="home"] .hero-cta .btn svg {
    flex: 0 0 auto;
  }

  /* mobile-polish.css forces every [class*="-grid"] to 1fr !important
     at ≤480px — beat it with a page-specific selector so the home grid
     stays 3-up at every width. */
  body[data-page="home"] .branches-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: clamp(8px, 1.6vw, 20px) !important;
  }

  .branch-card {
    padding: clamp(14px, 2vw, 22px) clamp(10px, 1.6vw, 18px) clamp(12px, 1.8vw, 18px);
    min-height: 0;
    border-radius: 12px;
  }

  .bc-glyph { margin: 4px 0 14px; }
  /* mobile-polish.css forces [class*="-title"] to clamp(36px,11vw,64px)
     !important — outscope it via body[data-page="home"] + !important so
     the card titles stay sane in the slim 3-up columns. */
  body[data-page="home"] .bc-title {
    font-size: clamp(15px, 2.4vw, 26px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.015em !important;
  }
  .bc-desc {
    margin: 0 0 14px;
    font-size: clamp(11px, 1.4vw, 13px);
    line-height: 1.35;
  }
  .bc-cta {
    padding: 9px 12px;
    font-size: 10px;
    letter-spacing: 0.16em;
    gap: 6px;
  }
  .bc-cta em { font-size: 12px; }
}

/* Phone (≤640px) — the cards are now ~110–180px wide. Drop the
   long-form descriptor and the CTA label (the title + glyph + arrow
   still convey the branch), tighten the glyph well, and shrink the
   intake port so it doesn't dominate the slim card top. */
@media (max-width: 640px) {
  body[data-page="home"] .branches-grid {
    gap: 6px !important;
  }

  /* Circuit pipes are rendered with vector-effect: non-scaling-stroke
     so they stay 12 screen-px on every viewport. At phone widths the
     SVG is ~360–640px wide and the pipes look proportionally heavy.
     Shrink the stroke (and the per-station bursts) to ~⅓ of desktop
     so the wires read as fine traces. */
  .branches-tree-svg .bt-pipe        { stroke-width: 5; }
  .branches-tree-svg .bt-pulse-burst { stroke-width: 2.5; }

  .branch-card { padding: 10px 8px 10px; border-radius: 10px; }

  .bc-port { width: 36px; height: 4px; }

  .bc-glyph { margin: 2px 0 10px; aspect-ratio: 1 / 1; }

  body[data-page="home"] .bc-title {
    font-size: clamp(12px, 3.2vw, 16px) !important;
    margin: 0 0 4px !important;
    /* Keep title to one tight line — single ellipsis if it overshoots. */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* Drop the descriptor on phones — title + colour + glyph are enough
     to identify the branch at a glance, and the descriptor pushes the
     CTA off-screen at this width. */
  .bc-desc { display: none; }

  /* CTA pill is hidden on phone widths — the whole card is clickable
     and the kind colour comes through via the card's background glow,
     splash backdrop, and top-edge port. The slim 3-up cards don't
     have room for a readable label without truncation, so the bubble
     is dropped entirely rather than shrunk to ornamentation. */
  .bc-cta { display: none; }
}

/* Tiniest viewports (≤380px) — push glyph and type one notch smaller
   so the three columns still fit cleanly inside the 14px section gutter
   imposed by mobile-polish.css. */
@media (max-width: 380px) {
  body[data-page="home"] .branches-grid {
    gap: 4px !important;
  }
  .branch-card  { padding: 8px 6px 8px; }
  body[data-page="home"] .bc-title {
    font-size: 11px !important;
    line-height: 1.05 !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   BRANCH VISUAL · windows into each workshop
   Three distinct miniatures, one per `data-kind`. Each lives in the
   first slot of the branch-card and runs a slow, looping animation
   that hints at activity inside that branch.
══════════════════════════════════════════════════════════════════════ */
.bv {
  position: relative;
  height: 132px;
  border-radius: 12px;
  margin: 0 0 22px;
  overflow: hidden;
  isolation: isolate;
  contain: paint;
}
.bv-corner-tag {
  position: absolute; top: 8px; right: 10px;
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  z-index: 5;
  pointer-events: none;
}
.bv-readout {
  position: absolute; left: 12px; right: 12px; bottom: 8px;
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  z-index: 4;
}
.bv-readout > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bv-readout-clock {
  font-family: var(--mono); font-size: 9px;
  font-weight: 600; letter-spacing: 0.1em;
}
.bv-led {
  width: 5px; height: 5px; border-radius: 50%;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════
   PHYSICAL · iPrintat filament spool
   Front-on view of a 1 KG PETG roll mounted on a horizontal rod. Outer
   flange is static; the filament wraps + spokes + index notch spin
   together so rotation reads at a glance. The center label stays
   upright (PETG · 1 KG · BLACK). A strand pulls off the bottom-right
   with an animated dash flow, suggesting feed. A subtle filament-
   remaining meter sits along the bottom.
══════════════════════════════════════════════════════════════════════ */
.bv-spool {
  background:
    radial-gradient(140% 80% at 50% 110%, rgba(255,138,61,0.18), transparent 60%),
    linear-gradient(180deg, rgba(255,138,61,0.05), rgba(0,0,0,0.55));
  border: 1px solid rgba(255,138,61,0.22);
}
.bv-spool .bv-readout { color: rgba(255,205,165,0.82); }
.bv-spool .bv-readout-clock { color: var(--orange); font-weight: 600; }
.bv-spool .bv-led {
  background: var(--orange);
  box-shadow: 0 0 8px var(--orange);
  animation: bv-pulse 1.6s ease-in-out infinite;
}
.bv-spool-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

/* the spinning innards — wraps + spokes + index notch */
.bv-spool-svg .bv-spool-spin {
  animation: bv-spool-rotate 4.4s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes bv-spool-rotate {
  to { transform: rotate(360deg); }
}

/* center label — typography stays upright while spool spins */
.bv-spool-svg .spool-brand {
  fill: var(--orange);
  font-family: var(--display);
  font-weight: 800;
  font-size: 8px;
  letter-spacing: 0.06em;
}
.bv-spool-svg .spool-spec {
  fill: rgba(255,200,150,0.78);
  font-family: var(--mono);
  font-size: 4px;
  letter-spacing: 0.16em;
}
.bv-spool-svg .spool-color {
  fill: rgba(255,180,120,0.7);
  font-family: var(--mono);
  font-size: 3.5px;
  letter-spacing: 0.18em;
}

/* material rotator: PLA → ABS → ASA → TPU on a 12s cycle, ~2.4s per
   material with crossfade. Each colour name uses a distinct hue so
   the eye sees a real material change, not just a text swap. */
.bv-spool-svg .mat-grp {
  opacity: 0;
  animation: bv-spool-mat-cycle 12s ease-in-out infinite;
}
.bv-spool-svg .mat-pla { animation-delay: 0s; }
.bv-spool-svg .mat-abs { animation-delay: 3s; }
.bv-spool-svg .mat-asa { animation-delay: 6s; }
.bv-spool-svg .mat-tpu { animation-delay: 9s; }
@keyframes bv-spool-mat-cycle {
  0%, 2%    { opacity: 0; }
  6%        { opacity: 1; }
  22%       { opacity: 1; }
  25%, 100% { opacity: 0; }
}
/* per-material colour hue */
.bv-spool-svg .mat-pla .spool-color { fill: #ffb35a; }   /* amber */
.bv-spool-svg .mat-abs .spool-color { fill: #b8b8b8; }   /* carbon-grey */
.bv-spool-svg .mat-asa .spool-color { fill: #f3ead4; }   /* ivory */
.bv-spool-svg .mat-tpu .spool-color { fill: #d4823a; }   /* ochre */

/* filament strand — animated dash feed; gives the sense of being pulled
   off the spool toward the printer below */
.bv-spool-svg .filament-feed path {
  animation: bv-spool-feed 0.7s linear infinite;
}
@keyframes bv-spool-feed {
  to { stroke-dashoffset: -12.4; }
}

/* remaining-filament meter strip */
.bv-spool-meter {
  position: absolute; left: 14px; right: 14px; bottom: 26px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 4;
  pointer-events: none;
}
.bv-spool-meter-key { color: rgba(255,180,120,0.6); }
.bv-spool-meter-bar {
  position: relative;
  height: 4px;
  background: rgba(255,138,61,0.10);
  border: 1px solid rgba(255,138,61,0.22);
  border-radius: 2px;
  overflow: hidden;
}
.bv-spool-meter-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ffaa55, #ffd089);
  border-right: 1px solid rgba(255,210,160,0.8);
  box-shadow: 0 0 6px rgba(255,138,61,0.5);
}
.bv-spool-meter-val {
  color: var(--orange);
  font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════════
   PHYSICAL · iPrintat CAD engineering drawing
   A draftsman's sheet: isometric wireframe of an industrial bracket
   with hidden lines, dimension callouts, coordinate gizmo, title block,
   and a horizontal scan sweep. Speaks "design engineering."
══════════════════════════════════════════════════════════════════════ */
.bv-cad {
  background:
    radial-gradient(140% 80% at 50% 110%, rgba(255,138,61,0.16), transparent 60%),
    linear-gradient(180deg, rgba(255,138,61,0.04), rgba(0,0,0,0.5));
  border: 1px solid rgba(255,138,61,0.22);
}
.bv-cad .bv-corner-tag {
  color: var(--orange);
  background: rgba(255,138,61,0.10);
  border: 1px solid rgba(255,138,61,0.28);
}
.bv-cad .bv-readout { color: rgba(255,205,165,0.82); }
.bv-cad .bv-readout-clock { color: var(--orange); font-weight: 600; }
.bv-cad .bv-led {
  background: var(--orange);
  box-shadow: 0 0 8px var(--orange);
  animation: bv-pulse 1.6s ease-in-out infinite;
}
.bv-cad-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block;
}
.bv-cad-svg .cad-border {
  fill: none;
  stroke: rgba(255,138,61,0.20);
  stroke-width: 0.6;
}
.bv-cad-svg .cad-section-label {
  font-family: var(--mono); font-size: 5px;
  fill: rgba(255,180,120,0.55);
  letter-spacing: 0.16em;
}
.bv-cad-svg .axis-x { stroke: #ff6b6b; stroke-width: 0.9; stroke-linecap: round; }
.bv-cad-svg .axis-y { stroke: #5fff7f; stroke-width: 0.9; stroke-linecap: round; }
.bv-cad-svg .axis-z { stroke: #5fb3ff; stroke-width: 0.9; stroke-linecap: round; }
.bv-cad-svg .axis-x-lbl { fill: #ff6b6b; font-family: var(--mono); font-size: 6px; font-weight: 700; }
.bv-cad-svg .axis-y-lbl { fill: #5fff7f; font-family: var(--mono); font-size: 6px; font-weight: 700; }
.bv-cad-svg .axis-z-lbl { fill: #5fb3ff; font-family: var(--mono); font-size: 6px; font-weight: 700; }
.bv-cad-svg .cad-face-top {
  fill: url(#cadFaceTop);
  stroke: var(--orange);
  stroke-width: 0.9;
  stroke-linejoin: round;
}
.bv-cad-svg .cad-face-front {
  fill: rgba(255,138,61,0.05);
  stroke: var(--orange);
  stroke-width: 0.9;
  stroke-linejoin: round;
}
.bv-cad-svg .cad-face-right {
  fill: rgba(255,138,61,0.14);
  stroke: var(--orange);
  stroke-width: 0.9;
  stroke-linejoin: round;
}
.bv-cad-svg .cad-step {
  fill: rgba(255,138,61,0.32);
  stroke: var(--orange);
  stroke-width: 0.9;
  stroke-linejoin: round;
}
.bv-cad-svg .cad-step-side {
  fill: rgba(255,138,61,0.22);
  stroke: var(--orange);
  stroke-width: 0.7;
  stroke-linejoin: round;
}
.bv-cad-svg .cad-hidden {
  stroke: rgba(255,138,61,0.5);
  stroke-width: 0.5;
  stroke-dasharray: 1.5 1;
  fill: none;
}
.bv-cad-svg .cad-hole {
  fill: rgba(8,4,2,0.85);
  stroke: var(--orange);
  stroke-width: 0.7;
}
.bv-cad-svg .cad-hole-edge {
  stroke: var(--orange);
  stroke-width: 0.7;
}
.bv-cad-svg .cad-hole-bottom {
  fill: none;
  stroke: rgba(255,138,61,0.5);
  stroke-width: 0.5;
  stroke-dasharray: 1 0.8;
}
.bv-cad-svg .cad-centerline {
  stroke: rgba(255,138,61,0.45);
  stroke-width: 0.4;
  stroke-dasharray: 3 1 1 1;
}
.bv-cad-svg .dim-line, .bv-cad-svg .dim-leader, .bv-cad-svg .dim-leader-thin {
  stroke: rgba(255,138,61,0.6);
  stroke-width: 0.4;
  fill: none;
}
.bv-cad-svg .dim-leader-thin {
  stroke-width: 0.35;
  stroke-dasharray: 1 0.6;
}
.bv-cad-svg .dim-arrow {
  fill: rgba(255,138,61,0.7);
}
.bv-cad-svg .dim-text {
  font-family: var(--mono); font-size: 6.5px;
  fill: var(--orange);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-anchor: middle;
}
.bv-cad-svg .dim-text-small {
  font-family: var(--mono); font-size: 5.5px;
  fill: rgba(255,180,120,0.85);
  letter-spacing: 0.06em;
}
.bv-cad-svg .title-box {
  fill: rgba(8,4,2,0.45);
  stroke: rgba(255,138,61,0.5);
  stroke-width: 0.5;
}
.bv-cad-svg .title-divider {
  stroke: rgba(255,138,61,0.4);
  stroke-width: 0.4;
}
.bv-cad-svg .title-key {
  font-family: var(--mono); font-size: 4px;
  fill: rgba(255,180,120,0.55);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.bv-cad-svg .title-val {
  font-family: var(--display); font-weight: 700; font-size: 6px;
  fill: rgba(255,210,170,0.95);
  letter-spacing: 0.04em;
}
.bv-cad-svg .cad-dim {
  opacity: 0;
  animation: bv-cad-dim-appear 9s ease-in-out infinite;
}
.bv-cad-svg .cad-dim-1 { animation-delay: 0.4s; }
.bv-cad-svg .cad-dim-2 { animation-delay: 1.4s; }
.bv-cad-svg .cad-dim-3 { animation-delay: 2.4s; }
.bv-cad-svg .cad-dim-4 { animation-delay: 3.4s; }
@keyframes bv-cad-dim-appear {
  0%, 5%   { opacity: 0; }
  12%      { opacity: 1; }
  85%      { opacity: 1; }
  95%, 100%{ opacity: 0; }
}
.bv-cad-svg .cad-scan {
  stroke: rgba(255,138,61,0.65);
  stroke-width: 1;
  filter: drop-shadow(0 0 3px rgba(255,138,61,0.7));
  animation: bv-cad-scan 6s ease-in-out infinite;
}
@keyframes bv-cad-scan {
  0%, 100% { transform: translateY(20px); opacity: 0; }
  20%      { opacity: 0.9; }
  80%      { opacity: 0.9; }
  100%     { transform: translateY(96px); opacity: 0; }
}

/* ════════════════════════════════════════════════════════════════════
   DESIGN · webdesign morph
   A single browser frame whose contents cycle through four web styles:
   cyber → editorial → modern → industrial. The DESIGN/CREED title is
   the constant — every state restyles it. 16s cycle, ~3s per state,
   crossfade between them. A small badge in the corner names the active
   morph (cyberpunk / editorial / modern / industrial).
══════════════════════════════════════════════════════════════════════ */
.bv-morph {
  background:
    radial-gradient(140% 80% at 50% 110%, rgba(0,230,255,0.16), transparent 60%),
    linear-gradient(180deg, rgba(0,230,255,0.04), rgba(0,0,0,0.5));
  border: 1px solid rgba(0,230,255,0.22);
  padding: 8px 10px 26px;
  display: flex; flex-direction: column;
}
.bv-morph .bv-corner-tag {
  color: var(--cyan);
  background: rgba(0,230,255,0.10);
  border: 1px solid rgba(0,230,255,0.28);
}
.bv-morph .bv-readout { color: rgba(170,235,255,0.82); }
.bv-morph .bv-readout-clock { color: var(--cyan); font-weight: 600; }
.bv-morph .bv-led {
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  animation: bv-pulse 1.6s ease-in-out infinite;
}
.bv-morph-frame {
  position: relative;
  flex: 1;
  background: var(--bg);
  border: 1px solid rgba(0,230,255,0.4);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,230,255,0.1);
}
.bv-morph-chrome {
  height: 12px;
  background: rgba(15,15,28,0.95);
  display: flex; align-items: center; gap: 3px;
  padding: 0 6px;
  border-bottom: 1px solid rgba(0,230,255,0.18);
}
.bv-morph-url {
  margin-left: 8px;
  font-family: var(--mono); font-size: 6px;
  color: rgba(0,230,255,0.6);
  letter-spacing: 0.08em;
}
.bv-morph-stage {
  position: relative;
  height: calc(100% - 12px);
}
.bv-morph-state {
  position: absolute; inset: 0;
  padding: 6px 9px 5px;
  display: flex; flex-direction: column;
  gap: 3px;
  opacity: 0;
  animation: bv-morph-cycle 8s ease-in-out infinite;
  overflow: hidden;
}
.morph-cyber { animation-delay: 0s; }
.morph-edit  { animation-delay: 2s; }
.morph-mod   { animation-delay: 4s; }
.morph-indus { animation-delay: 6s; }
@keyframes bv-morph-cycle {
  0%, 2%    { opacity: 0; transform: scale(1.05); }
  6%        { opacity: 1; transform: scale(1); }
  22%       { opacity: 1; transform: scale(1); }
  25%, 100% { opacity: 0; transform: scale(0.97); }
}
.bv-morph-nav {
  display: flex; align-items: center; gap: 5px;
  padding-bottom: 2px;
}
.bv-morph-logo {
  font-family: var(--display); font-weight: 800; font-size: 7px;
  letter-spacing: -0.04em;
  margin-right: auto;
}
.bv-morph-link {
  width: 9px; height: 1.5px;
  border-radius: 1px;
}
.bv-morph-rule {
  height: 0.5px;
  background: rgba(26,24,20,0.4);
  margin-bottom: 1px;
}
.bv-morph-title {
  font-family: var(--display); font-weight: 800;
  font-size: 13px; line-height: 1;
  letter-spacing: -0.05em;
  margin: 1px 0 2px;
}
.bv-morph-sub {
  height: 1.5px;
  width: 70%;
  border-radius: 1px;
}
.bv-morph-cta {
  display: flex; gap: 3px;
  margin-top: auto;
}
.bv-morph-btn {
  width: 18px; height: 4.5px;
  border-radius: 2.5px;
}
.bv-morph-btn-2 {
  width: 14px; height: 4.5px;
  border-radius: 2.5px;
  background: transparent;
}

/* State 1 · cyberpunk */
.morph-cyber {
  background:
    radial-gradient(60% 40% at 80% 0%, rgba(255,45,214,0.25), transparent 70%),
    linear-gradient(180deg, #050511 0%, #0a0a18 100%);
}
.morph-cyber .bv-morph-orb {
  position: absolute; border-radius: 50%;
  filter: blur(8px);
  mix-blend-mode: screen;
  pointer-events: none;
}
.morph-cyber .bv-morph-orb-1 { width: 30px; height: 30px; background: var(--magenta); top: -6px; left: -6px; opacity: 0.6; }
.morph-cyber .bv-morph-orb-2 { width: 24px; height: 24px; background: var(--cyan);    bottom: -4px; right: -4px; opacity: 0.5; }
.morph-cyber .bv-morph-logo  { color: var(--ink); }
.morph-cyber .bv-morph-logo i{ color: var(--magenta); font-style: normal; }
.morph-cyber .bv-morph-link  { background: rgba(0,230,255,0.55); }
.morph-cyber .bv-morph-title {
  background: linear-gradient(135deg, var(--magenta), var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.morph-cyber .bv-morph-title i { font-style: italic; }
.morph-cyber .bv-morph-sub   { background: rgba(255,255,255,0.18); }
.morph-cyber .bv-morph-btn   { background: linear-gradient(90deg, var(--cyan), var(--magenta)); box-shadow: 0 0 8px rgba(0,230,255,0.4); }
.morph-cyber .bv-morph-btn-2 { border: 1px solid rgba(0,230,255,0.5); }

/* State 2 · editorial */
.morph-edit {
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 7px, rgba(184,153,104,0.04) 7px, rgba(184,153,104,0.04) 8px),
    linear-gradient(180deg, #f6f1e7 0%, #ede5d2 100%);
}
.morph-edit .bv-morph-logo  { color: #1a1a1a; }
.morph-edit .bv-morph-logo i{ color: #b89968; font-style: italic; }
.morph-edit .bv-morph-link  { background: rgba(26,26,26,0.55); }
.morph-edit .bv-morph-rule  { background: #1a1a1a; height: 0.6px; }
.morph-edit .bv-morph-title {
  color: #1a1a1a;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.04em;
}
.morph-edit .bv-morph-title i { color: #b89968; font-style: italic; }
.morph-edit .bv-morph-sub   { background: rgba(26,26,26,0.4); }
.morph-edit .bv-morph-btn   { background: #1a1a1a; }
.morph-edit .bv-morph-btn-2 { border: 1px solid rgba(26,26,26,0.55); }

/* State 3 · modern */
.morph-mod {
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
}
.morph-mod .bv-morph-logo  { color: #0a0a0c; }
.morph-mod .bv-morph-logo i{ color: #5b5cf0; font-style: normal; }
.morph-mod .bv-morph-link  { background: rgba(10,10,12,0.55); }
.morph-mod .bv-morph-title {
  color: #0a0a0c;
  letter-spacing: -0.055em;
  font-weight: 700;
}
.morph-mod .bv-morph-title i {
  color: #5b5cf0;
  font-style: normal;
  font-weight: 700;
}
.morph-mod .bv-morph-sub   { background: rgba(10,10,12,0.35); }
.morph-mod .bv-morph-btn   { background: #5b5cf0; }
.morph-mod .bv-morph-btn-2 { border: 1px solid rgba(10,10,12,0.4); }

/* State 4 · industrial */
.morph-indus {
  background: linear-gradient(180deg, #0e1218 0%, #1a2230 100%);
}
.morph-indus .bv-morph-stripe {
  position: absolute; left: 0; right: 0; top: 0;
  height: 4px;
  background: repeating-linear-gradient(90deg, #ffaa00 0, #ffaa00 6px, #1a1a1a 6px, #1a1a1a 12px);
}
.morph-indus .bv-morph-logo  { color: #ffaa00; font-family: var(--mono); font-weight: 700; letter-spacing: 0.04em; }
.morph-indus .bv-morph-logo i{ color: #00d889; font-style: normal; }
.morph-indus .bv-morph-link  { background: rgba(255,170,0,0.55); }
.morph-indus .bv-morph-title {
  color: #ffaa00;
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 11.5px;
  text-transform: uppercase;
}
.morph-indus .bv-morph-title i { color: #00d889; font-style: normal; }
.morph-indus .bv-morph-sub   { background: rgba(255,170,0,0.45); }
.morph-indus .bv-morph-btn   { background: #ffaa00; }
.morph-indus .bv-morph-btn-2 { border: 1px solid rgba(255,170,0,0.55); }

.bv-morph-badge {
  position: absolute;
  top: 17px; right: 6px;
  font-family: var(--mono); font-size: 7px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 5;
}
.bv-morph-badge-state {
  position: absolute; right: 0; top: 0;
  white-space: nowrap;
  background: rgba(8,12,18,0.7);
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(0,230,255,0.3);
  color: rgba(0,230,255,0.85);
  opacity: 0;
  animation: bv-morph-badge-cycle 8s ease-in-out infinite;
}
.badge-cyber { animation-delay: 0s; }
.badge-edit  { animation-delay: 2s; color: #b89968; border-color: rgba(184,153,104,0.5); background: rgba(245,240,225,0.85); }
.badge-mod   { animation-delay: 4s; color: #5b5cf0; border-color: rgba(91,92,240,0.5);  background: rgba(255,255,255,0.92); }
.badge-indus { animation-delay: 6s; color: #ffaa00; border-color: rgba(255,170,0,0.5);  background: rgba(14,18,24,0.9); }
@keyframes bv-morph-badge-cycle {
  0%, 3%    { opacity: 0; transform: translateY(-2px); }
  7%        { opacity: 1; transform: translateY(0); }
  22%       { opacity: 1; transform: translateY(0); }
  25%, 100% { opacity: 0; transform: translateY(-2px); }
}

/* ════════════════════════════════════════════════════════════════════
   CODE · iHub payroll REPL
   Modern code-panel aesthetic (no Mac chrome dots). A breadcrumb path
   header replaces the title bar. Body shows a real Romanian payroll
   calculation: gross → CAS → CASS → income tax → net. Numbers are
   right-aligned monospace with subtle grouping. The "net" line gets
   a lime accent.
══════════════════════════════════════════════════════════════════════ */
.bv-repl {
  background:
    radial-gradient(140% 80% at 50% 110%, rgba(184,255,61,0.16), transparent 60%),
    linear-gradient(180deg, rgba(184,255,61,0.04), rgba(0,0,0,0.55));
  border: 1px solid rgba(184,255,61,0.22);
  padding: 10px 12px 26px;
  display: flex; flex-direction: column;
}
.bv-repl .bv-readout { color: rgba(220,255,170,0.82); }
.bv-repl .bv-readout-clock { color: var(--lime); font-weight: 600; }
.bv-repl .bv-led {
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime);
  animation: bv-pulse 1.6s ease-in-out infinite;
}
.bv-repl-window {
  flex: 1;
  background:
    linear-gradient(180deg, rgba(8,14,8,0.95), rgba(4,8,4,0.95));
  border: 1px solid rgba(184,255,61,0.28);
  border-radius: 6px;
  overflow: hidden;
  display: flex; flex-direction: column;
  font-family: var(--mono);
  box-shadow:
    inset 0 0 24px rgba(184,255,61,0.04),
    0 6px 14px rgba(0,0,0,0.5);
}
.bv-repl-bar {
  background: rgba(0,0,0,0.4);
  border-bottom: 1px solid rgba(184,255,61,0.2);
  padding: 4px 8px;
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.bv-repl-bullet {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 6px var(--lime);
  flex-shrink: 0;
}
.bv-repl-path {
  font-family: var(--mono); font-size: 7px;
  color: rgba(184,255,61,0.85);
  letter-spacing: 0.06em;
  display: inline-flex; align-items: center; gap: 4px;
  flex: 1;
}
.bv-repl-path b { color: var(--lime); font-weight: 700; }
.bv-repl-path i { color: rgba(184,255,61,0.4); font-style: normal; }
.bv-repl-path span { color: rgba(220,255,170,0.7); }
.bv-repl-tag {
  font-family: var(--mono); font-size: 7px;
  color: var(--lime);
  letter-spacing: 0.16em;
  padding: 1px 5px;
  border-radius: 999px;
  border: 1px solid rgba(184,255,61,0.4);
  background: rgba(184,255,61,0.08);
}
.bv-repl-body {
  padding: 5px 9px 0;
  font-size: 7.5px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: rgba(220,255,170,0.85);
  flex: 1;
}
.bv-repl-line {
  display: grid;
  grid-template-columns: 12px 1fr auto auto;
  gap: 6px;
  align-items: baseline;
  white-space: nowrap;
  opacity: 0;
  animation: bv-repl-appear 10s ease-in-out infinite;
}
.bv-repl-l1 { animation-delay: 0s;   }
.bv-repl-l2 { animation-delay: 0.5s; }
.bv-repl-l3 { animation-delay: 1.1s; }
.bv-repl-l4 { animation-delay: 1.7s; }
.bv-repl-l5 { animation-delay: 2.3s; }
.bv-repl-l6 { animation-delay: 2.9s; }
.bv-repl-l7 { animation-delay: 3.4s; }
@keyframes bv-repl-appear {
  0%      { opacity: 0; transform: translateX(-2px); }
  4%      { opacity: 1; transform: translateX(0); }
  90%     { opacity: 1; transform: translateX(0); }
  94%     { opacity: 0; }
  100%    { opacity: 0; transform: translateX(-2px); }
}
.bv-repl-line .t-prompt {
  color: var(--lime);
  font-weight: 700;
  text-shadow: 0 0 6px rgba(184,255,61,0.6);
  text-align: center;
}
.bv-repl-cmd {
  grid-column: 2 / -1;
  color: rgba(220,255,170,0.95);
}
.bv-repl-cmd b { color: var(--cyan); font-weight: 700; }
.bv-repl-cmd em { color: rgba(184,255,61,0.55); font-style: normal; }
.bv-repl-cmd u { color: #ffd35a; text-decoration: none; font-weight: 700; }
.bv-repl-row .bv-repl-key {
  color: rgba(220,255,170,0.65);
  letter-spacing: 0.04em;
}
.bv-repl-row .bv-repl-key s {
  color: rgba(184,255,61,0.4);
  text-decoration: none;
  font-style: normal;
  margin-left: 2px;
}
.bv-repl-num {
  font-family: var(--display);
  font-weight: 700;
  font-size: 9px;
  color: rgba(220,255,170,0.95);
  letter-spacing: -0.02em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.bv-repl-num i { font-style: normal; color: rgba(184,255,61,0.45); font-size: 7px; }
.bv-repl-deduct { color: rgba(255,150,120,0.9); }
.bv-repl-unit {
  font-family: var(--mono); font-size: 6.5px;
  color: rgba(184,255,61,0.5);
  letter-spacing: 0.1em;
}
.bv-repl-divider {
  grid-column: 1 / -1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184,255,61,0.4), transparent);
  margin: 1px 0;
  white-space: normal;
}
.bv-repl-net .bv-repl-key {
  color: var(--lime);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 7px;
}
.bv-repl-net .bv-repl-num {
  font-size: 11px;
  color: var(--lime);
  text-shadow: 0 0 8px rgba(184,255,61,0.4);
}
.bv-repl-net .bv-repl-num i { color: rgba(184,255,61,0.6); }
.bv-repl-net .bv-repl-unit { color: var(--lime); font-weight: 700; }

/* shared LED pulse used across all three visuals */
@keyframes bv-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.18); }
}

/* ---------- branch-page hero (smaller than home hero) ---------- */
.bhero {
  padding: clamp(56px, 8vw, 110px) var(--gutter) clamp(40px, 6vw, 72px);
  max-width: var(--max); margin: 0 auto;
}
.bhero-tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11.5px;
  color: var(--ink-soft);
  padding: 7px 13px;
  border: 1px solid var(--rule); border-radius: 999px;
  background: rgba(11,11,30,0.5); backdrop-filter: blur(8px);
  margin-bottom: 28px;
}
.bhero-tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.bhero-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(44px, 9vw, 144px);
  line-height: 0.94;
  letter-spacing: -0.04em;
  margin: 0 0 22px;
  font-variation-settings: "opsz" 96;
}
.bhero-title .accent {
  display: inline-block;
  background: linear-gradient(135deg, var(--magenta), var(--cyan));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; font-style: italic;
  padding-right: 0.12em;   /* italic overhang on the trailing 'o' */
  margin-right: -0.04em;
}
.bhero-lede {
  max-width: 64ch;
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 28px;
}
.bhero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  max-width: 720px;
}
.bhero-stats > div {
  display: grid; gap: 4px;
  padding: 16px 18px;
  background: rgba(10,10,24,0.7);
  backdrop-filter: blur(8px);
}
.bhero-stats strong {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(20px, 2.4vw, 32px);
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--cyan), var(--magenta));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; line-height: 1;
}
.bhero-stats span { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.05em; }
@media (max-width: 720px) { .bhero-stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- service grid (iPrintat 9-card layout) ---------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 1000px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .svc-grid { grid-template-columns: 1fr; } }

.svc {
  position: relative;
  display: flex; flex-direction: column;
  padding: 22px 22px 18px;
  background: rgba(10,10,24,0.55);
  backdrop-filter: blur(10px);
  border: 1px solid var(--rule);
  border-radius: 14px;
  min-height: 220px;
  transition: transform .4s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.svc:hover { transform: translateY(-3px); border-color: var(--magenta); background: rgba(255,45,214,0.04); }
.svc-num   { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); margin-bottom: 18px; }
.svc-title { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; margin: 0 0 6px; }
.svc-tag   { font-family: var(--mono); font-size: 11.5px; color: var(--lime); margin: 0 0 10px; }
.svc-blurb { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 14px; flex: 1; }
.svc-stack { display: flex; flex-wrap: wrap; gap: 5px; }
.svc-stack li {
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-soft);
  padding: 2px 7px;
  background: rgba(0,230,255,0.08);
  border: 1px solid rgba(0,230,255,0.18);
  border-radius: 999px;
}

/* ---------- external CTA banner ---------- */
.cta-banner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center; gap: 24px;
  padding: 32px 36px;
  border: 1px solid var(--rule);
  border-radius: 20px;
  background: linear-gradient(120deg, rgba(255,45,214,0.10), rgba(0,230,255,0.10));
  backdrop-filter: blur(10px);
  overflow: hidden;
}
.cta-banner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at top right, rgba(184,255,61,0.18), transparent 60%);
}
.cta-banner h3 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(22px, 2.6vw, 34px);
  letter-spacing: -0.02em; line-height: 1.1;
  margin: 0 0 8px;
}
.cta-banner p { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; }
.cta-banner .links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.cta-banner .links a {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft);
  padding: 4px 10px; border: 1px solid var(--rule); border-radius: 999px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.cta-banner .links a:hover { color: var(--cyan); border-color: var(--cyan); }
@media (max-width: 720px) {
  .cta-banner { grid-template-columns: 1fr; }
}

/* ---------- equipment strip ---------- */
.equip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 28px;
}
.equip > div {
  background: rgba(10,10,24,0.7); padding: 18px 18px;
  display: grid; gap: 4px;
}
.equip strong { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--ink); letter-spacing: -0.01em; }
.equip span { font-family: var(--mono); font-size: 10.5px; color: var(--magenta); letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 900px) { .equip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .equip { grid-template-columns: 1fr; } }

/* ---------- iHub capability tiles ---------- */
.ihub-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) { .ihub-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .ihub-tiles { grid-template-columns: 1fr; } }

.ihub-tile {
  display: flex; flex-direction: column;
  padding: 20px 20px 18px;
  background: rgba(10,10,24,0.55);
  border: 1px solid var(--rule);
  border-radius: 14px;
  min-height: 180px;
  transition: border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease);
}
.ihub-tile:hover { border-color: var(--lime); background: rgba(184,255,61,0.05); transform: translateY(-2px); }
.ihub-tile .n { font-family: var(--mono); font-size: 11px; color: var(--lime); margin-bottom: 12px; }
.ihub-tile h4 { font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -0.015em; margin: 0 0 6px; }
.ihub-tile p  { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.55; }

.ihub-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  margin: 22px 0;
}
.ihub-stats > div { background: rgba(10,10,24,0.7); padding: 18px 20px; display: grid; gap: 4px; }
.ihub-stats strong {
  font-family: var(--display); font-weight: 600; font-size: 26px; line-height: 1;
  background: linear-gradient(135deg, var(--lime), var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ihub-stats span { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); }
@media (max-width: 720px) { .ihub-stats { grid-template-columns: repeat(2, 1fr); } }

.ihub-stack {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 14px 0 24px;
}
.ihub-stack li {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-soft);
  padding: 4px 10px;
  background: rgba(184,255,61,0.06);
  border: 1px solid rgba(184,255,61,0.22);
  border-radius: 999px;
}
.ihub-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px;
  color: var(--lime);
  padding: 5px 11px;
  border: 1px solid rgba(184,255,61,0.4);
  background: rgba(184,255,61,0.06);
  border-radius: 999px;
}
.ihub-status .led { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); animation: pulse 1.6s var(--ease) infinite; }

.coming-soon {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 28px;
}
@media (max-width: 720px) { .coming-soon { grid-template-columns: 1fr; } }
.coming-soon .slot {
  padding: 28px;
  border: 1px dashed var(--rule);
  border-radius: 14px;
  background: rgba(10,10,24,0.3);
  color: var(--ink-mute);
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.06em;
  text-align: center;
}
.coming-soon .slot strong { display: block; font-family: var(--display); font-size: 18px; color: var(--ink-soft); letter-spacing: -0.01em; margin-bottom: 4px; }

/* ---------- templates gallery (web branch) ---------- */
.cat-stack {
  display: grid; gap: 64px;
}
.cat-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end; gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 24px;
}
.cat-head h3 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -0.02em;
  margin: 0;
}
.cat-head .cat-blurb {
  font-family: var(--mono); font-size: 12px; color: var(--ink-soft);
  text-align: right;
}

.tpl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 1000px) { .tpl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .tpl-grid { grid-template-columns: 1fr; } }

.tpl {
  position: relative;
  display: flex; flex-direction: column;
  padding: 22px 22px 18px;
  background: rgba(10,10,24,0.55);
  border: 1px solid var(--rule);
  border-radius: 14px;
  color: var(--ink);
  min-height: 280px;
  overflow: hidden;
  transition: transform .4s var(--ease), border-color .3s var(--ease);
}
.tpl:hover { transform: translateY(-3px); border-color: var(--cyan); }
.tpl[data-signature="true"] {
  border-color: rgba(255,45,214,0.4);
  background: linear-gradient(160deg, rgba(255,45,214,0.06), rgba(10,10,24,0.55));
}
.tpl[data-signature="true"]:hover { border-color: var(--magenta); }

/* live iframe thumbnail */
.tpl-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1600 / 1000;
  border-radius: 10px;
  border: 1px solid var(--rule);
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,45,214,0.06), rgba(0,230,255,0.06)), var(--bg-2);
  margin-bottom: 18px;
  pointer-events: none;
  isolation: isolate;
}
.tpl-thumb iframe {
  position: absolute; top: 0; left: 0;
  width: 1600px; height: 1000px;
  border: 0;
  transform-origin: top left;
  transform: scale(0.2);   /* JS overrides with the exact fit */
  pointer-events: none;
  background: var(--bg);
}
.tpl-thumb-veil {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(5,5,17,0.35) 100%);
  transition: opacity .4s var(--ease);
  z-index: 1;
}
.tpl:hover .tpl-thumb { border-color: var(--cyan); }
.tpl:hover .tpl-thumb-veil { opacity: 0.5; }
.tpl[data-signature="true"]:hover .tpl-thumb { border-color: var(--magenta); }

/* On phones the brand customization widget is hidden entirely. Static
   thumbnails (forced by the iframe OOM constraint) can't show the brand
   swap, and a "previewing as ACME" pill over default-branded thumbs is
   confusing. Customization stays a desktop/tablet feature where the
   live iframes actually deliver on the promise. JS still runs so any
   `?b=ACME` shared link continues to propagate onto tile hrefs for
   tap-through. */
@media (max-width: 700px) {
  [data-brand-trigger],
  [data-brand-shell],
  [data-brand-pill] {
    display: none !important;
  }
}

/* Static thumbnail image — pre-rendered via scripts/gen_thumbs.py.
   Hidden on tablet/desktop where the live iframe is the preview;
   shown on phones where iframes are too memory-heavy to keep alive. */
.tpl-thumb-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: none;
  z-index: 0;
  border: 0;
}

/* ---------- PHONE FALLBACK · static thumbnail image ----------
   On phones (≤700px) we never load iframes. 62 simultaneous live
   themed previews — many of them animation-heavy (Matrix rain, Neural
   net, Foundry sparks) — push past the per-tab memory budget on
   low-RAM Android devices and the OS kills the tab. We swap to the
   pre-rendered WebP under .tpl-thumb-img. If the image is missing
   (e.g. before gen_thumbs.py has been run), the swatch gradient
   bleeds through as a stylised fallback. */
@media (max-width: 700px) {
  .tpl-thumb iframe { display: none !important; }
  .tpl-thumb-img { display: block; }
  .tpl-thumb {
    /* Gradient fallback shown only if the img fails to load */
    background:
      linear-gradient(135deg,
        var(--s1, #1a1a2e) 0%,
        var(--s2, #16213e) 55%,
        var(--s3, #0f3460) 100%);
  }
  /* keep the existing veil on top so the bottom-fade still reads */
  .tpl-thumb-veil { z-index: 2; }
}

.tpl-row {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-mute);
  margin-bottom: 18px;
}
.tpl-sig {
  font-family: var(--mono); font-size: 10px;
  color: var(--magenta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tpl-name { font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; margin: 0 0 4px; }
.tpl-tag  { font-family: var(--mono); font-size: 11.5px; color: var(--lime); margin: 0 0 12px; }
.tpl-blurb { font-size: 13px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 14px; flex: 1; }
.tpl-swatches { display: flex; gap: 6px; margin-bottom: 14px; }
.tpl-swatches span {
  width: 22px; height: 22px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
}
.tpl-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px;
  color: var(--ink);
  border-top: 1px solid var(--rule);
  padding-top: 12px;
  margin-top: auto;
  transition: gap .3s var(--ease), color .3s var(--ease);
}
.tpl:hover .tpl-cta { gap: 12px; color: var(--cyan); }

/* ---------- archive callout ---------- */
.archive {
  margin-top: 56px;
  padding: 28px 32px;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: rgba(10,10,24,0.45);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center; gap: 24px;
}
.archive p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.55; max-width: 60ch; }
@media (max-width: 720px) { .archive { grid-template-columns: 1fr; } }


/* ====================================================================== */
/* IPRINTAT — INTERFACE PREVIEW + DEPARTURE GATE                          */
/* Showcases the iprintat.ro UI inside the page and makes the cross-domain*/
/* forwarding feel like a deliberate, designed transition.                */
/* ====================================================================== */

/* ---------- section subtitle ---------- */
.sec-head .sec-sub {
  margin: 0;
  max-width: 64ch;
  color: var(--ink-soft);
  font-size: clamp(14px, 1.05vw, 16.5px);
  line-height: 1.6;
}

/* ---------- tighter section flow on /iprintat ---------- */
body[data-page="iprintat"] .bhero {
  padding-bottom: clamp(20px, 2.5vw, 36px);
}
body[data-page="iprintat"] .caps {
  padding-top:    clamp(20px, 3vw, 44px);
  padding-bottom: clamp(20px, 3vw, 44px);
}
body[data-page="iprintat"] .preview { scroll-margin-top: 80px; }
body[data-page="iprintat"] .sec-head {
  margin-bottom: clamp(24px, 3.5vw, 44px);
}

/* Two-version lede: short shows on phones, full shows on tablet+. */
.bhero-lede .bhero-lede-short { display: none; }
.bhero-lede .bhero-lede-full  { display: inline; }

/* ════════════════════════════════════════════════════════════════════
   IPRINTAT · phone optimisation
   On phones the big iprintat.ro homepage replica (.browser-frame.is-
   hero) is too dense to read at a glance — the live site is one tap
   away via the hero CTA. We drop it entirely and let the smaller
   /quote and /contact frames carry the preview. The /quote frame's
   widget grid is restacked from 4 columns to 2 so values aren't
   squeezed into 25%-wide cells. Hero, section headings, and the nine
   service cards all centre into a single readable column.
══════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  /* Hero lede — swap the multi-sentence paragraph for a one-line
     summary. Saves ~3 lines of vertical real estate above the fold. */
  body[data-page="iprintat"] .bhero-lede .bhero-lede-short { display: inline; }
  body[data-page="iprintat"] .bhero-lede .bhero-lede-full  { display: none; }

  /* Section subtitles in /iprintat (the "A preview of the iPrintat.ro
     front desk…" line) push the actual content further down without
     adding info on a phone. Drop them. */
  body[data-page="iprintat"] .sec-head .sec-sub { display: none; }

  /* Tighten the gap between the hero CTA row ("Visit iPrintat.ro" /
     "instant quote →") and the next section heading ("The site you'll
     land on, before you click."). On phones the hero already finishes
     with the CTA pills — there's no need for the desktop section
     padding stack on top. Trim bhero-bottom, preview-top, and the
     sec-head bottom margin into a single tight transition. */
  body[data-page="iprintat"] .bhero        { padding-bottom: 8px; }
  body[data-page="iprintat"] .caps         { padding-top: 16px; }
  body[data-page="iprintat"] .sec-head     { margin-bottom: 18px; }

  /* Drop the entire big homepage replica on phones. The chrome+hero
     fragment looked OK at 720px but it's still ~5 cards' worth of
     vertical space describing what's already promoted by the "Visit
     iPrintat.ro" CTA in the hero just above. The two .bf-grid mini
     frames below it (/quote and /contact) carry the preview from
     here on. */
  body[data-page="iprintat"] .browser-frame.is-hero { display: none; }

  /* Drop the /quote mini frame on phones — even compressed, the
     stacked `Get a quote` widget (drop-zone + 6 spec rows + send
     button) made for an oversized panel that didn't read well at
     this width. The "instant quote →" pill in the hero already
     points users to the live tool. The /contact frame below carries
     the preview from here on, taking the full single-column row in
     `.bf-grid`. The /quote frame is the FIRST child of `.bf-grid`,
     hence :first-child. */
  body[data-page="iprintat"] .bf-grid .browser-frame.is-mini:first-child {
    display: none;
  }

  /* /contact mini frame (now the only preview) — centre the send
     button under the form rows, lighten the heading, and trim the
     screen padding so the widget fills the frame cleanly. */
  body[data-page="iprintat"] .cpage-h {
    font-size: 14px;
    padding-bottom: 6px;
  }
  body[data-page="iprintat"] .cpage-go {
    justify-self: center;
  }
  body[data-page="iprintat"] .browser-frame.is-mini .bf-screen {
    padding: 14px 16px 16px;
    min-height: 0;
  }

  /* ─── Centre the hero stack ─── */
  body[data-page="iprintat"] .bhero { text-align: center; }
  body[data-page="iprintat"] .bhero-tag,
  body[data-page="iprintat"] .bhero-lede {
    margin-left: auto;
    margin-right: auto;
  }
  body[data-page="iprintat"] .bhero .hero-cta {
    justify-content: center;
    /* base.css ships .hero-cta with margin-bottom: 64px which, stacked
       on top of the trimmed bhero/caps paddings above, still left a
       big gap between the "instant quote →" CTA and the next section
       heading. Pull it back so the CTA flows directly into the
       preview section. */
    margin-bottom: 4px;
  }

  /* ─── Centre section headings (h2 + sec-sub when present) ─── */
  body[data-page="iprintat"] .sec-head {
    text-align: center;
    justify-items: center;
  }

  /* ─── Centre service-card content ───
     `.svc` is `flex-direction: column`. Using `text-align: center` on
     it centres the inline text in svc-title / svc-tag / svc-blurb /
     svc-go (so the dashed border-top on .svc-go still spans the full
     card width). The svc-stack is a flex row, so it needs its own
     justify-content: center to centre the technology pills. */
  body[data-page="iprintat"] .svc { text-align: center; }
  body[data-page="iprintat"] .svc-stack { justify-content: center; }
}

/* ---------- tighter hero → catalogue on /web ---------- */
body[data-page="web"] .bhero {
  padding-bottom: clamp(20px, 2.5vw, 36px);
}
body[data-page="web"] #catalogue {
  padding-top: clamp(20px, 3vw, 44px);
  scroll-margin-top: 80px;
}

/* "Found one? Make it yours." heading lives directly above the
   .archive callout on /web. It's the H2 for the commission frame, so
   we tighten its bottom margin (default sec-head spacing was too
   loose between heading and frame) and zero out the archive's top
   margin so the heading-frame pair reads as one unit. The top
   margin pushes the heading well clear of the catalogue grid above. */
.archive-heading {
  margin-top: clamp(56px, 7vw, 96px);
  margin-bottom: clamp(20px, 2.4vw, 32px);
}
.archive-heading + .archive {
  margin-top: 0;
}

/* ════════════════════════════════════════════════════════════════════
   WEB · phone optimisation
   At ≤720px the entire /web page collapses to a centred single-
   column composition — hero, section headings, per-category headers,
   each template card, and the archive callout all centre their text,
   tags, and CTAs. The post-catalogue contact strip was already
   retired in the desktop HTML, so nothing extra to hide here.
══════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  /* ─── Hero ─── */
  body[data-page="web"] .bhero { text-align: center; }
  body[data-page="web"] .bhero-tag,
  body[data-page="web"] .bhero-lede {
    margin-left: auto;
    margin-right: auto;
  }
  body[data-page="web"] .bhero .hero-cta {
    justify-content: center;
  }

  /* ─── Section headings (h2 + sec-sub when present) ───
     Catches the catalogue's "62 designs, 7 rooms." and the
     archive heading "Found one? Make it yours." */
  body[data-page="web"] .sec-head {
    text-align: center;
    justify-items: center;
  }

  /* ─── Per-category header ───
     Desktop is a 2-column row (h3 left, blurb right). On phones
     collapse to a centred single column. The 1px rule stays as the
     section divider underneath both elements. */
  body[data-page="web"] .cat-head {
    grid-template-columns: 1fr;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding-bottom: 16px;
    margin-bottom: 20px;
  }
  body[data-page="web"] .cat-head .cat-blurb { text-align: center; }

  /* ─── Template cards ───
     Each .tpl is a flex column with stretch-aligned children, so
     the .tpl-thumb image keeps its full width naturally. Centre
     the inline text via `text-align: center` on the card, and
     centre flex children individually:
       • .tpl-row was `space-between` (number left / signature flag
         right) → flow them to centre.
       • .tpl-swatches was a flex row left-aligned → centre.
       • .tpl-cta was inline-flex stretched to full width with its
         border-top spanning — keep the full-width border and just
         centre its inner content via `justify-content: center`. */
  body[data-page="web"] .tpl { text-align: center; }
  body[data-page="web"] .tpl-row {
    justify-content: center;
    gap: 10px;
  }
  body[data-page="web"] .tpl-swatches { justify-content: center; }
  body[data-page="web"] .tpl-cta { justify-content: center; }

  /* ─── Archive callout ───
     Single column already (.archive { grid-template-columns: 1fr }
     at this breakpoint); centre its paragraph + button so the close
     of the page reads as a single centred stack. */
  body[data-page="web"] .archive {
    text-align: center;
    justify-items: center;
  }
  body[data-page="web"] .archive p {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------- /web brand-CTA row alignment ----------
   The /web hero CTA contains "Try custom experience / brand-shell /
   brand-pill / browse all 62 →" in one flex row. The brand-shell is the
   tallest sibling (label + input + hint ≈ 140px), and the default
   align-items: stretch was making the buttons grow to match it — that
   was the real cause of the oversized pills, not the padding.
   Centering the row lets every CTA keep its intrinsic height. */
body[data-page="web"] .bhero .hero-cta {
  align-items: center;
}

/* ---------- BROWSER-FRAME MOCKUP ---------- */
.browser-frame {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #11112a 0%, #08081a 100%);
  border: 1px solid var(--rule);
  box-shadow:
    0 30px 80px -30px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.02) inset;
  transition: transform .5s var(--ease), border-color .4s var(--ease), box-shadow .5s var(--ease);
  color: var(--ink);
}
.browser-frame::before {
  /* outer animated glow ring (pre-hover hint) */
  content: ""; position: absolute; inset: -1px;
  border-radius: 16px;
  pointer-events: none;
  background: conic-gradient(from 0deg, var(--magenta), var(--cyan), var(--lime), var(--magenta));
  z-index: -1; opacity: 0; filter: blur(2px);
  transition: opacity .5s var(--ease);
}
.browser-frame:hover::before { opacity: 0.55; animation: bf-spin 6s linear infinite; }
@keyframes bf-spin { to { transform: rotate(360deg); } }
.browser-frame:hover {
  transform: translateY(-4px);
  border-color: var(--cyan);
  box-shadow:
    0 40px 120px -40px rgba(0,230,255,0.45),
    0 0 0 1px rgba(0,230,255,0.4) inset;
}

/* chrome */
.bf-chrome {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
  border-bottom: 1px solid var(--rule);
}
.bf-chrome-thin { padding: 8px 10px; gap: 7px; }
.bf-light { width: 11px; height: 11px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,0.2) inset; }
.bf-r { background: #ff5f57; }
.bf-y { background: #febc2e; }
.bf-g { background: #28c840; }

.bf-tabs { display: flex; gap: 6px; margin-left: 12px; flex: 0 1 auto; min-width: 0; }
.bf-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-mute);
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--rule);
  border-radius: 8px 8px 0 0;
  white-space: nowrap;
  max-width: 240px; overflow: hidden; text-overflow: ellipsis;
}
.bf-tab.is-active {
  color: var(--ink); background: rgba(0,230,255,0.06);
  border-color: rgba(0,230,255,0.3);
}
.bf-tab svg { color: var(--cyan); flex: none; }

.bf-url {
  flex: 1; display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  font-family: var(--mono); font-size: 11.5px;
  color: var(--ink-soft);
  background: rgba(5,5,17,0.6);
  border: 1px solid var(--rule);
  border-radius: 999px;
  margin-left: 8px;
  min-width: 0;
}
.bf-url svg { color: var(--lime); flex: none; }
.bf-url b { color: var(--ink); font-weight: 600; }
.bf-url-cursor {
  display: inline-block;
  width: 1px; height: 12px;
  background: var(--cyan);
  margin-left: 1px;
  animation: caret 1s steps(2) infinite;
  vertical-align: middle;
}
@keyframes caret { 50% { opacity: 0; } }
.bf-url-tag {
  margin-left: auto;
  padding: 2px 8px;
  font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--lime);
  background: rgba(184,255,61,0.08);
  border: 1px solid rgba(184,255,61,0.3);
  border-radius: 999px;
}

/* the rendered "screen" inside the frame */
.bf-screen {
  position: relative;
  background:
    radial-gradient(900px 400px at 80% -10%, rgba(255,45,214,0.10), transparent 60%),
    radial-gradient(700px 400px at -10% 80%, rgba(0,230,255,0.10), transparent 60%),
    linear-gradient(180deg, #0a0a18 0%, #050511 100%);
  padding: 28px 32px 26px;
  min-height: 460px;
  overflow: hidden;
}

/* mini-nav */
.mini-nav {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(31,31,61,0.7);
  margin-bottom: 26px;
}
.mini-logo {
  font-family: var(--display); font-weight: 600;
  font-size: 18px; letter-spacing: -0.02em;
  color: var(--ink);
}
.mini-logo i { font-style: normal; color: var(--ink); }
.mini-logo b  { color: var(--magenta); font-weight: 600; }
.mini-links {
  display: inline-flex; gap: 22px; justify-content: center;
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-soft);
}
.mini-links span:nth-child(2) { color: var(--lime); }
.mini-lang {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-mute); letter-spacing: 0.1em;
  padding: 4px 8px; border: 1px solid var(--rule); border-radius: 999px;
}
@media (max-width: 760px) {
  .mini-nav { grid-template-columns: auto auto; }
  .mini-links { display: none; }
}

/* mini-hero */
.mini-hero {
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  padding: 8px 0 24px;
}
.mini-hero-text { padding: 4px 0; }
.mini-kicker {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--magenta); letter-spacing: 0.06em;
}
.mini-title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 0.94; letter-spacing: -0.035em;
  margin: 10px 0 12px;
  font-variation-settings: "opsz" 96;
}
.mini-title i {
  font-weight: 500; font-style: italic;
  background: linear-gradient(135deg, var(--magenta), var(--cyan));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.mini-lede { font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 14px; max-width: 36ch; }
.mini-cta { display: flex; gap: 8px; flex-wrap: wrap; }
.mini-btn {
  display: inline-flex; align-items: center;
  padding: 8px 14px;
  font-family: var(--mono); font-size: 11px;
  color: var(--bg); background: var(--lime);
  border-radius: 999px;
  box-shadow: 0 0 24px rgba(184,255,61,0.35);
  font-weight: 600;
}
.mini-btn-ghost {
  display: inline-flex; align-items: center;
  padding: 8px 14px;
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-soft);
  border: 1px solid var(--rule); border-radius: 999px;
  background: rgba(11,11,30,0.5);
}

/* fake quote widget */
.mini-quote {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(0,230,255,0.25);
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(0,230,255,0.05) inset,
    0 20px 60px -20px rgba(0,230,255,0.25);
}
.mini-quote-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px;
  color: var(--cyan); letter-spacing: 0.12em; text-transform: uppercase;
}
.qdot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: pulse 1.4s var(--ease) infinite; }
.q-clock { margin-left: auto; color: var(--ink-mute); font-family: var(--mono); }
.mini-quote-drop {
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  border: 1.5px dashed rgba(0,230,255,0.4);
  border-radius: 10px;
  background:
    repeating-linear-gradient(45deg, rgba(0,230,255,0.04) 0, rgba(0,230,255,0.04) 8px, transparent 8px, transparent 16px);
  color: var(--ink-soft);
}
.mini-quote-drop svg { color: var(--cyan); flex: none; }
.mini-quote-drop b { font-family: var(--display); font-weight: 600; font-size: 12.5px; color: var(--ink); letter-spacing: -0.005em; }
.mini-quote-drop i { font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--ink-mute); }
.mini-quote-rows { display: grid; gap: 5px; font-family: var(--mono); font-size: 10.5px; }
.mini-quote-rows > div { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed rgba(31,31,61,0.7); }
.mini-quote-rows span { color: var(--ink-mute); letter-spacing: 0.06em; text-transform: uppercase; }
.mini-quote-rows b { color: var(--ink); font-weight: 500; }
.mini-quote-rows .hi b { color: var(--lime); }
.mini-quote-rows .hi span { color: var(--lime); }
.mini-quote-cta {
  align-self: flex-end;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px;
  color: var(--bg); background: var(--cyan);
  padding: 7px 12px; border-radius: 999px;
  font-weight: 600; letter-spacing: 0.04em;
  margin-top: 4px;
}
.mini-quote-cta svg { flex: none; }

/* mini marquee */
.mini-marquee {
  position: relative;
  margin: 4px -32px 22px;
  padding: 8px 0;
  border-top: 1px solid rgba(31,31,61,0.7);
  border-bottom: 1px solid rgba(31,31,61,0.7);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mini-marquee-track {
  display: inline-flex; gap: 18px;
  white-space: nowrap;
  animation: mm-marq 32s linear infinite;
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-soft);
  width: max-content;
}
.mini-marquee-track span:nth-child(odd)  { color: var(--ink); }
.mini-marquee-track span:nth-child(2n+1):nth-child(3n+1) { color: var(--magenta); }
@keyframes mm-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* mini service strip */
.mini-svc {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
}
.mini-card {
  display: grid; gap: 4px;
  padding: 12px;
  border: 1px solid var(--rule); border-radius: 10px;
  background: rgba(11,11,30,0.6);
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.browser-frame:hover .mini-card { border-color: rgba(0,230,255,0.25); }
.mini-card i { font-style: normal; font-family: var(--mono); font-size: 9.5px; color: var(--ink-mute); letter-spacing: 0.1em; }
.mini-card strong { font-family: var(--display); font-weight: 600; font-size: 12.5px; letter-spacing: -0.005em; color: var(--ink); }
.mini-card em { font-style: normal; font-family: var(--mono); font-size: 9.5px; color: var(--lime); }

@media (max-width: 1000px) {
  .mini-svc { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .mini-hero { grid-template-columns: 1fr; }
  .bf-screen { padding: 22px 18px; min-height: auto; }
  .mini-marquee { margin: 4px -18px 22px; }
}
@media (max-width: 480px) {
  .mini-svc { grid-template-columns: repeat(2, 1fr); }
  .bf-tabs { display: none; }
}

/* hover veil = "click to leave" emphasis */
.bf-veil {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  background:
    radial-gradient(ellipse at center, rgba(5,5,17,0.85) 0%, rgba(5,5,17,0.4) 70%, transparent 100%);
  opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ease);
  z-index: 5;
  text-align: center; padding: 20px;
}
.browser-frame:hover .bf-veil { opacity: 1; }
.bf-veil-tag {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--lime); letter-spacing: 0.18em; text-transform: uppercase;
  padding: 5px 12px;
  border: 1px solid var(--lime);
  border-radius: 999px;
  background: rgba(5,5,17,0.7);
  box-shadow: 0 0 24px rgba(184,255,61,0.4);
}
.bf-veil-title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(22px, 3vw, 36px);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.bf-veil-title b {
  background: linear-gradient(135deg, var(--magenta), var(--cyan), var(--lime));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-weight: 700;
}
.bf-veil-sub { font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft); }

/* ---------- secondary frames row ---------- */
.bf-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 800px) { .bf-grid { grid-template-columns: 1fr; } }

.browser-frame.is-mini { box-shadow: 0 16px 50px -20px rgba(0,0,0,0.6); }
.browser-frame.is-mini .bf-screen { padding: 16px 18px; min-height: 220px; }

.bf-tag {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--rule);
  background: rgba(5,5,17,0.6);
  font-family: var(--mono); font-size: 11.5px;
}
.bf-tag span { color: var(--ink); font-weight: 600; }
.bf-tag em   { font-style: normal; color: var(--ink-mute); margin-left: 2px; }
.bf-tag svg  { margin-left: auto; color: var(--ink-mute); transition: color .3s var(--ease), transform .3s var(--ease); }
.browser-frame:hover .bf-tag svg { color: var(--cyan); transform: translate(2px, -2px); }

/* /quote screen */
.qpage { display: grid; gap: 10px; }
.qpage-h, .gpage-h, .cpage-h {
  font-family: var(--display); font-weight: 600; font-size: 16px;
  letter-spacing: -0.015em; color: var(--ink);
  padding-bottom: 8px; border-bottom: 1px solid var(--rule);
}
.qpage-drop {
  display: flex; align-items: center; gap: 10px;
  padding: 12px;
  border: 1.5px dashed rgba(0,230,255,0.45);
  border-radius: 10px;
  background: repeating-linear-gradient(45deg, rgba(0,230,255,0.04) 0, rgba(0,230,255,0.04) 8px, transparent 8px, transparent 16px);
  color: var(--ink-soft);
}
.qpage-drop svg { color: var(--cyan); }
.qpage-drop em { font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--ink); letter-spacing: 0.04em; }
.qpage-grid {
  display: grid; grid-template-columns: auto 1fr auto 1fr;
  gap: 6px 10px;
  font-family: var(--mono); font-size: 10.5px;
}
.qpage-grid span { color: var(--ink-mute); letter-spacing: 0.06em; text-transform: uppercase; align-self: center; }
.qpage-grid b    { color: var(--ink); font-weight: 500; }
.qpage-grid .hi  { color: var(--lime); }
.qpage-go {
  align-self: end; justify-self: end;
  padding: 6px 12px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  color: var(--bg); background: var(--cyan);
  border-radius: 999px;
  margin-top: 4px;
}

/* /gallery screen */
.gpage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 38px;
  gap: 6px;
  margin: 10px 0;
}
.gpage-grid span {
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.gpage-grid span[style*="--c:1"] { background: linear-gradient(135deg, rgba(255,45,214,0.4), rgba(255,138,61,0.2)); }
.gpage-grid span[style*="--c:2"] { background: linear-gradient(135deg, rgba(0,230,255,0.35), rgba(184,255,61,0.18)); }
.gpage-grid span[style*="--c:3"] { background: linear-gradient(135deg, rgba(184,255,61,0.35), rgba(0,230,255,0.18)); }
.gpage-grid span::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(0,0,0,0.18) 6px 7px);
  mix-blend-mode: overlay;
}
.gpage-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.gpage-tags i {
  font-style: normal; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--rule); color: var(--ink-soft);
  background: rgba(11,11,30,0.6);
}

/* /contact screen */
.cpage-form { display: grid; gap: 6px; margin: 6px 0 8px; }
.cpage-row {
  display: grid; grid-template-columns: 60px 1fr;
  align-items: center; gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--rule); border-radius: 8px;
  background: rgba(5,5,17,0.5);
  font-family: var(--mono); font-size: 10.5px;
}
.cpage-row span { color: var(--ink-mute); letter-spacing: 0.06em; text-transform: uppercase; }
.cpage-row b { color: var(--ink); font-weight: 500; min-height: 12px; }
.cpage-row.tall b { min-height: 36px; display: block; }
.cpage-go {
  align-self: end; justify-self: end;
  padding: 6px 12px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  color: var(--bg); background: var(--magenta);
  border-radius: 999px;
}
.cpage-meta {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px;
  font-family: var(--mono); font-size: 10px;
  margin-top: 4px;
}
.cpage-meta div { padding: 8px 10px; border: 1px solid var(--rule); border-radius: 8px; background: rgba(5,5,17,0.4); display: grid; gap: 2px; }
.cpage-meta i { font-style: normal; color: var(--magenta); letter-spacing: 0.08em; text-transform: uppercase; font-size: 9px; }
.cpage-meta b { color: var(--ink); font-weight: 500; }

/* ---------- service-card "go" hint (under existing svc) ---------- */
.svc-go {
  display: block;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--rule);
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.svc:hover .svc-go { color: var(--magenta); border-color: rgba(255,45,214,0.5); }


/* ====================================================================== */
/* DEPARTURE GATE                                                         */
/* ====================================================================== */
.gate-section { padding-bottom: clamp(40px, 6vw, 90px); }

.gate {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(140px, 1.4fr) 1fr;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: 24px;
  padding: 28px;
  background:
    radial-gradient(900px 300px at 50% 100%, rgba(184,255,61,0.10), transparent 60%),
    radial-gradient(700px 300px at 0% 0%, rgba(255,45,214,0.10), transparent 60%),
    radial-gradient(700px 300px at 100% 0%, rgba(0,230,255,0.10), transparent 60%),
    rgba(10,10,24,0.5);
  backdrop-filter: blur(10px);
  overflow: hidden;
}
.gate::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(31,31,61,0.6) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(31,31,61,0.6) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black 30%, transparent 80%);
  pointer-events: none; opacity: 0.5;
}

.gate-here, .gate-there {
  display: grid;
  align-content: center; justify-items: start;
  gap: 6px;
  padding: 20px 22px;
  position: relative;
  z-index: 1;
}
.gate-there { justify-items: end; text-align: right; transition: transform .4s var(--ease); }
.gate-there:hover { transform: translateX(4px); }

.gate-pin {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-mute); letter-spacing: 0.14em; text-transform: uppercase;
}
.gate-pin-go {
  color: var(--lime);
  text-shadow: 0 0 14px rgba(184,255,61,0.45);
}
.gate-host {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(22px, 3vw, 36px);
  letter-spacing: -0.025em; line-height: 1;
  color: var(--ink);
}
.gate-there .gate-host {
  background: linear-gradient(135deg, var(--lime), var(--cyan));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.gate-path {
  font-family: var(--mono); font-size: 12px;
  color: var(--magenta); letter-spacing: 0.04em;
}
.gate-role {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-soft); letter-spacing: 0.04em;
  margin-top: 4px;
}
.gate-cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px;
  padding: 10px 16px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  color: var(--bg); background: var(--lime);
  border-radius: 999px;
  box-shadow: 0 0 28px rgba(184,255,61,0.35);
  transition: gap .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.gate-there:hover .gate-cta {
  gap: 12px;
  background: var(--cyan);
  box-shadow: 0 0 28px rgba(0,230,255,0.5);
}

/* trace */
.gate-trace {
  position: relative;
  display: grid; place-items: center;
  padding: 12px;
}
.gate-trace svg { width: 100%; height: 80px; display: block; }
.gate-path-anim { stroke-dashoffset: 0; animation: gate-dash 2.4s linear infinite; }
@keyframes gate-dash { to { stroke-dashoffset: -28; } }
.gate-comet { filter: drop-shadow(0 0 6px var(--lime)) drop-shadow(0 0 12px var(--cyan)); }
.gate-trace-tag {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-mute); letter-spacing: 0.12em; text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 800px) {
  .gate {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 22px;
  }
  .gate-here, .gate-there { justify-items: start; text-align: left; }
  .gate-trace svg { transform: rotate(90deg); height: 100px; }
}

/* destination directory */
.gate-dir {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 900px) { .gate-dir { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .gate-dir { grid-template-columns: 1fr; } }

.gate-link {
  position: relative;
  display: grid; gap: 4px;
  padding: 18px 18px 18px 44px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: rgba(10,10,24,0.55);
  font-family: var(--mono);
  transition: border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease);
}
.gate-link::before {
  content: attr(data-glyph);
  position: absolute; left: 14px; top: 16px;
  font-size: 18px;
  color: var(--magenta);
  text-shadow: 0 0 12px rgba(255,45,214,0.5);
  transition: color .3s var(--ease), text-shadow .3s var(--ease);
}
.gate-link:hover { border-color: var(--cyan); background: rgba(0,230,255,0.05); transform: translateY(-2px); }
.gate-link:hover::before { color: var(--cyan); text-shadow: 0 0 12px rgba(0,230,255,0.6); }
.gate-link .gl-path { font-size: 10.5px; color: var(--ink-mute); letter-spacing: 0.04em; }
.gate-link .gl-name {
  font-family: var(--display); font-weight: 600;
  font-size: 20px; letter-spacing: -0.02em;
  color: var(--ink);
}
.gate-link .gl-blurb { font-size: 11px; color: var(--ink-soft); line-height: 1.5; }

/* gate footer */
.gate-foot {
  margin-top: 18px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: 18px;
  padding: 18px 22px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: rgba(5,5,17,0.6);
}
.gate-foot .gf-led {
  width: 8px; height: 8px; border-radius: 50%; background: var(--lime);
  box-shadow: 0 0 12px var(--lime); animation: pulse 1.6s var(--ease) infinite;
}
.gate-foot .gf-text {
  font-family: var(--mono); font-size: 12px;
  color: var(--ink-soft); line-height: 1.6;
}
.gate-foot .gf-text b { color: var(--ink); font-weight: 600; }
@media (max-width: 720px) {
  .gate-foot { grid-template-columns: auto 1fr; }
  .gate-foot .btn { grid-column: 1 / -1; justify-self: start; }
}