/* ===================================================================
   ZONE GROUP BUILDING SYSTEMS
   -------------------------------------------------------------------
   DIRECTION OF FLOW: left to right — the direction of entry. Pulses
   travel right along the wires, the ticker moves right, section fills
   grow from the left, the active state floods in from the left. One
   rule, applied everywhere, the way the sibling site uses "down and
   to the right".

   MOTION CHARACTER: damped, not bouncy. Real estate reads as liquid;
   building systems read as mechanism. Nothing overshoots more than a
   mechanism would.

   PALETTE: the Zone Group teal system on an architectural dark base.
   All five brand values are declared once, here, and used through
   semantic tokens. Do not hardcode hex values in components.
   =================================================================== */

:root {
  /* --- brand tokens: the official ZONE BUILDING SYSTEMS palette --- */
  --background: #091513;
  --surface:    #10201E;
  --primary:    #4CB5A7;
  --secondary:  #96D6C8;
  --text:       #EFFAF7;

  /* --- derived surfaces ------------------------------------------ */
  --surface-2:  #16302C;   /* raised: panels inside cards            */
  --surface-3:  #0C1A18;   /* recessed: table stripes, inputs        */
  --foreground: var(--text);

  --text-mid:   rgba(239, 250, 247, 0.66);
  --text-dim:   rgba(239, 250, 247, 0.42);
  --text-faint: rgba(239, 250, 247, 0.24);

  --edge:        rgba(150, 214, 200, 0.13);
  --edge-strong: rgba(150, 214, 200, 0.26);
  --edge-active: rgba(76, 181, 167, 0.55);

  --primary-soft:   rgba(76, 181, 167, 0.14);
  --primary-ghost:  rgba(76, 181, 167, 0.07);
  --secondary-soft: rgba(150, 214, 200, 0.12);

  --gradient: linear-gradient(100deg, var(--primary), var(--secondary));

  --shadow-sm: 0 8px 24px rgba(3, 9, 8, 0.45);
  --shadow-md: 0 20px 48px rgba(3, 9, 8, 0.55);
  --shadow-lg: 0 40px 90px rgba(2, 7, 6, 0.7);

  /* --- type ------------------------------------------------------ */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Outfit", system-ui, sans-serif;
  --font-mono:    "DM Mono", ui-monospace, monospace;

  /* --- layout ---------------------------------------------------- */
  --shell: 1180px;
  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 22px;

  /* --- easing: mechanical, barely any overshoot ------------------- */
  --settle: cubic-bezier(0.22, 1.06, 0.32, 1);
  --glide:  cubic-bezier(0.62, 0.02, 0.2, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

.skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--primary);
  color: var(--background);
  padding: 12px 20px;
  font-family: var(--font-mono);
  font-size: 13px;
}

.skiplink:focus { left: 12px; top: 12px; }

/* ===================================================================
   AMBIENT FIELD
   A blueprint grid with two slow teal masses over it. Opacity is
   deliberately a third of the sibling site's: this base has to stay
   architectural, not atmospheric.
   =================================================================== */
.field {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.field__grid {
  position: absolute;
  inset: -2px;
  background-image:
    linear-gradient(to right, rgba(150, 214, 200, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(150, 214, 200, 0.055) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 0%, transparent 78%);
}

.field__mass {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}

.field__mass--a {
  width: 52vw; height: 52vw;
  left: -12vw; top: -6vh;
  background: radial-gradient(circle at 50% 50%, var(--primary), transparent 68%);
  opacity: 0.13;
  animation: drift-a 58s ease-in-out infinite;
}

.field__mass--b {
  width: 40vw; height: 40vw;
  left: 58vw; top: 46vh;
  background: radial-gradient(circle at 50% 50%, var(--secondary), transparent 66%);
  opacity: 0.08;
  animation: drift-b 74s ease-in-out infinite;
}

/* Both drift RIGHT — the flow rule, applied to ambience. */
@keyframes drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(9vw, 6vh, 0) scale(1.12); }
}
@keyframes drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(7vw, -9vh, 0) scale(0.9); }
}

.field__grain {
  position: absolute;
  inset: -50%;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===================================================================
   SIGNATURE — the access rail
   A circulation path down the right edge. Every section is a control
   point; each one clears from pending to authorised as you reach it.
   =================================================================== */
.rail {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.rail__track {
  position: absolute;
  top: 4px;
  bottom: 26px;
  width: 1px;
  background: var(--edge);
  overflow: hidden;
}

.rail__fill {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 0%;
  background: linear-gradient(180deg, var(--primary), var(--secondary));
}

.rail__nodes {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

.rail__node {
  position: relative;
  width: 9px;
  height: 9px;
  display: grid;
  place-items: center;
}

.rail__node button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid var(--edge-strong);
  border-radius: 2px;
  background: var(--background);
  transition: background 0.4s var(--glide), border-color 0.4s var(--glide), transform 0.5s var(--settle);
}

.rail__node.is-cleared button {
  background: var(--primary);
  border-color: var(--primary);
}

.rail__node.is-current button {
  transform: scale(1.5) rotate(45deg);
  border-color: var(--secondary);
  background: var(--secondary);
}

/* The zone name appears only for the section you are actually in. */
.rail__node::after {
  content: attr(data-label);
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secondary);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--glide), transform 0.45s var(--glide);
}

.rail__node.is-current::after,
.rail__node:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.rail__readout {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}

@media (max-width: 1120px) { .rail { display: none; } }

/* ===================================================================
   REVEAL — content rises and sharpens as it enters view
   =================================================================== */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  filter: blur(6px);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition:
    opacity 0.7s var(--glide),
    transform 0.9s var(--settle),
    filter 0.7s var(--glide);
}

.reveal[data-delay="1"].is-in { transition-delay: 0.08s; }
.reveal[data-delay="2"].is-in { transition-delay: 0.16s; }
.reveal[data-delay="3"].is-in { transition-delay: 0.24s; }
.reveal[data-delay="4"].is-in { transition-delay: 0.32s; }
.reveal[data-delay="5"].is-in { transition-delay: 0.40s; }

/* ===================================================================
   WORDMARK
   The dot in the sibling wordmark is a droplet. Here it is a pair of
   door leaves that part and close — the same idea, made mechanical.
   =================================================================== */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.wordmark__gate {
  display: flex;
  gap: 2px;
  width: 20px;
  height: 20px;
  padding: 3px;
  border: 1px solid var(--edge-strong);
  border-radius: 4px;
  overflow: hidden;
}

.wordmark__leaf {
  flex: 1;
  background: var(--gradient);
  border-radius: 1px;
  animation: leaf-l 6.5s var(--settle) infinite;
}

.wordmark__leaf:last-child { animation-name: leaf-r; }

@keyframes leaf-l {
  0%, 55%   { transform: translateX(0); }
  68%, 84%  { transform: translateX(-120%); }
  97%, 100% { transform: translateX(0); }
}
@keyframes leaf-r {
  0%, 55%   { transform: translateX(0); }
  68%, 84%  { transform: translateX(120%); }
  97%, 100% { transform: translateX(0); }
}

.wordmark__text { display: flex; flex-direction: column; line-height: 1.05; }

.wordmark__top {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.14em;
}

.wordmark__bottom {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.24em;
  color: var(--text-dim);
}

.wordmark--footer .wordmark__top { font-size: 18px; }

/* ===================================================================
   TOP BAR
   =================================================================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(9, 21, 19, 0.72);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--glide), background 0.4s var(--glide);
}

.topbar.is-stuck {
  border-bottom-color: var(--edge);
  background: rgba(9, 21, 19, 0.9);
}

.topbar__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.mainnav {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.mainnav a {
  position: relative;
  padding: 8px 13px;
  font-size: 14px;
  color: var(--text-mid);
  border-radius: 40px;
  transition: color 0.35s var(--glide);
}

.mainnav a::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 2px;
  height: 1px;
  background: var(--gradient);
  transform: scaleX(0);
  transform-origin: left;   /* floods in from the left */
  transition: transform 0.45s var(--glide);
}

.mainnav a:hover { color: var(--text); }
.mainnav a:hover::after,
.mainnav a.is-active::after { transform: scaleX(1); }
.mainnav a.is-active { color: var(--secondary); }

.topbar__actions { display: flex; align-items: center; gap: 10px; }

.ghostbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--edge);
  border-radius: 40px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-mid);
  transition: border-color 0.4s var(--glide), color 0.4s var(--glide);
}

.ghostbtn:hover { border-color: var(--edge-active); color: var(--text); }
.ghostbtn__icon { display: grid; place-items: center; color: var(--primary); }

/* --- burger + mobile nav ------------------------------------------ */
.burger {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: none;
  place-items: center;
  gap: 4px;
  flex-direction: column;
}

.burger span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--text);
  transition: transform 0.4s var(--settle), opacity 0.3s var(--glide);
}

.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.mobilenav {
  display: flex;
  flex-direction: column;
  padding: 8px 18px 22px;
  border-top: 1px solid var(--edge);
  background: var(--surface);
}

.mobilenav[hidden] { display: none; }

.mobilenav a {
  padding: 13px 4px;
  font-size: 15.5px;
  color: var(--text-mid);
  border-bottom: 1px solid var(--edge);
}

.mobilenav a:last-child { border-bottom: none; }

.mobilenav__cta {
  margin-top: 14px;
  text-align: center;
  color: var(--background) !important;
  background: var(--gradient);
  border-radius: 40px;
  font-family: var(--font-mono);
  font-size: 14px;
}

/* ===================================================================
   BUTTONS
   =================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 40px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: 0.02em;
  overflow: hidden;
  transition: transform 0.45s var(--settle), border-color 0.4s var(--glide),
              box-shadow 0.45s var(--glide), color 0.4s var(--glide);
}

.btn--sm { padding: 10px 18px; font-size: 12.5px; }

/* The fill sweeps from primary to secondary, left to right, on hover.
   This is done with background-position rather than an overlay so the
   label can never end up painted underneath it. */
.btn--primary {
  color: var(--background);
  font-weight: 500;
  background-image: linear-gradient(100deg,
    var(--primary) 0%, var(--primary) 42%, var(--secondary) 100%);
  background-size: 230% 100%;
  background-position: 0% 0;
  box-shadow: 0 6px 20px rgba(76, 181, 167, 0.18);
  transition: transform 0.45s var(--settle), background-position 0.6s var(--glide),
              box-shadow 0.45s var(--glide);
}

.btn--primary:hover {
  background-position: 100% 0;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(76, 181, 167, 0.28);
}

.btn--secondary {
  color: var(--secondary);
  border-color: var(--edge-strong);
  background: var(--primary-ghost);
}

.btn--secondary:hover {
  border-color: var(--secondary);
  color: var(--text);
  transform: translateY(-2px);
}

.btn--ghost { color: var(--text-mid); border-color: var(--edge); }
.btn--ghost:hover { color: var(--text); border-color: var(--edge-strong); }

.btn[disabled] { opacity: 0.5; pointer-events: none; }

/* ===================================================================
   SHARED TYPE + SECTION SCAFFOLD
   =================================================================== */
.shell {
  position: relative;
  z-index: 2;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  position: relative;
  z-index: 2;
  padding: 108px 0;
}

.section--tight { padding: 78px 0; }

/* Elevated bands. A 1px top rule keeps the change of surface legible
   at the exact scroll position where it happens. */
.section--surface {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--secondary);
  margin: 0 0 20px;
}

/* Entry-status indicator: a small open gate mark, used as the eyebrow
   bullet everywhere. Structural, not decorative — it marks a section
   opening. */
.tick {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 8px;
  border-left: 1px solid var(--primary);
  border-right: 1px solid var(--primary);
}

.tick::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 8px;
  height: 2px;
  background: var(--primary);
}

.secttitle {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 106;
  font-weight: 600;
  font-size: clamp(27px, 3.6vw, 42px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  max-width: 20ch;
}

.secttitle--sm { font-size: clamp(23px, 2.6vw, 30px); }

.sectlead {
  font-size: 16.5px;
  color: var(--text-mid);
  margin: 0 0 26px;
  max-width: 60ch;
}

.secthead { margin-bottom: 44px; }
.secthead .secttitle { max-width: 24ch; }

.secthead--center {
  text-align: center;
  margin-inline: auto;
  max-width: 720px;
}

.secthead--center .secttitle,
.secthead--center .sectlead { max-width: none; margin-inline: auto; }

/* ===================================================================
   HERO
   =================================================================== */
.hero {
  position: relative;
  z-index: 2;
  padding: 84px 0 96px;
}

.hero__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--secondary);
  margin: 0 0 22px;
}

.hero__title {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 108;
  font-weight: 600;
  font-size: clamp(38px, 6.2vw, 68px);
  line-height: 1.03;
  letter-spacing: -0.03em;
  margin: 0 0 22px;
}

.hero__line { display: block; }

.hero__line--accent {
  background: linear-gradient(100deg, var(--primary) 0%, var(--secondary) 60%, var(--text) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__tagline {
  max-width: 52ch;
  font-size: 17px;
  color: var(--text-mid);
  margin: 0 0 32px;
}

.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin: 48px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--edge);
}

.hero__facts > div { margin: 0; }

.hero__facts dt {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.hero__facts dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--secondary);
}

/* ===================================================================
   HERO DIAGRAM
   Two lanes, one 14s cycle, one thing moving at a time. It runs
   identify → authorise → open, first for a person, then for a vehicle.
   =================================================================== */
.diagram {
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  padding: 18px 20px 16px;
  box-shadow: var(--shadow-md);
}

.diagram__head,
.diagram__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.diagram__head { padding-bottom: 12px; border-bottom: 1px solid var(--edge); }
.diagram__foot { padding-top: 12px; border-top: 1px solid var(--edge); }

.diagram__label,
.diagram__live,
.diagram__hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.diagram__live { display: inline-flex; align-items: center; gap: 7px; color: var(--text-dim); }

.diagram__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
  animation: beat 3.4s ease-in-out infinite;
}

@keyframes beat {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1); }
}

.diag { display: block; width: 100%; height: auto; margin: 6px 0; }

.diag__lane {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  fill: var(--text-faint);
}

.diag__cap {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  fill: var(--text-dim);
}

.diag__rule { stroke: var(--edge); stroke-width: 1; }
.diag__wire { stroke: var(--edge-strong); stroke-width: 1.2; stroke-dasharray: 3 4; fill: none; }

.diag__glyph {
  fill: none;
  stroke: var(--text-dim);
  stroke-width: 1.4;
  stroke-linejoin: round;
}

.diag__unit rect { fill: var(--surface-2); stroke: var(--edge-strong); stroke-width: 1.2; }
.diag__unit path { fill: none; stroke: var(--text-faint); stroke-width: 1.4; stroke-linecap: round; }
.diag__unit--cam path { fill: var(--surface-2); stroke: var(--edge-strong); }

.diag__led { fill: var(--text-faint); }

.diag__frame { fill: none; stroke: var(--edge-strong); stroke-width: 1.2; }
.diag__track { stroke: var(--primary); stroke-width: 1.6; opacity: 0.5; }

.diag__pocket { fill: var(--surface); }

.diag__leaf {
  transform-box: view-box;
  fill: var(--primary-soft);
  stroke: var(--edge-active);
  stroke-width: 1;
}

.diag__housing { fill: var(--surface-2); stroke: var(--edge-strong); stroke-width: 1.2; }
.diag__ground  { stroke: var(--edge); stroke-width: 1; stroke-dasharray: 2 5; }

.diag__arm line { stroke: var(--primary); stroke-width: 3.4; stroke-linecap: round; }
.diag__arm rect { fill: var(--background); }

.diag__pulse {
  fill: none;
  stroke: var(--secondary);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 18 600;
  opacity: 0;
}

/* --- the 14s cycle ------------------------------------------------- */
.diag__pulse--a { animation: run-a 14s linear infinite; }
.diag__pulse--b { animation: run-b 14s linear infinite; }
.diag__pulse--c { animation: run-c 14s linear infinite; }
.diag__pulse--d { animation: run-d 14s linear infinite; }

@keyframes run-a {
  0%, 3.6%   { stroke-dashoffset: 18; opacity: 0; }
  5%         { opacity: 1; }
  13%        { opacity: 1; }
  14.3%      { stroke-dashoffset: -100; opacity: 0; }
  100%       { stroke-dashoffset: -100; opacity: 0; }
}
@keyframes run-b {
  0%, 21.4%  { stroke-dashoffset: 18; opacity: 0; }
  23%        { opacity: 1; }
  29%        { opacity: 1; }
  30%        { stroke-dashoffset: -80; opacity: 0; }
  100%       { stroke-dashoffset: -80; opacity: 0; }
}
@keyframes run-c {
  0%, 53.6%  { stroke-dashoffset: 18; opacity: 0; }
  55%        { opacity: 1; }
  63%        { opacity: 1; }
  64.3%      { stroke-dashoffset: -95; opacity: 0; }
  100%       { stroke-dashoffset: -95; opacity: 0; }
}
@keyframes run-d {
  0%, 71.4%  { stroke-dashoffset: 18; opacity: 0; }
  73%        { opacity: 1; }
  79%        { opacity: 1; }
  80%        { stroke-dashoffset: -90; opacity: 0; }
  100%       { stroke-dashoffset: -90; opacity: 0; }
}

/* Readers acknowledge, then the opening happens */
.diag__unit--reader .diag__led { animation: ack 14s linear infinite; }
.diag__unit--cam .diag__led { animation: ack-late 14s linear infinite; }

@keyframes ack {
  0%, 14%    { fill: var(--text-faint); }
  16%, 52%   { fill: var(--primary); }
  54%, 100%  { fill: var(--text-faint); }
}
@keyframes ack-late {
  0%, 64%    { fill: var(--text-faint); }
  66%, 98%   { fill: var(--primary); }
  100%       { fill: var(--text-faint); }
}

.diag__leaf--l { animation: leaf-open-l 14s var(--glide) infinite; }
.diag__leaf--r { animation: leaf-open-r 14s var(--glide) infinite; }

@keyframes leaf-open-l {
  0%, 30%    { transform: translateX(0); }
  36%, 47%   { transform: translateX(-30px); }
  53%, 100%  { transform: translateX(0); }
}
@keyframes leaf-open-r {
  0%, 30%    { transform: translateX(0); }
  36%, 47%   { transform: translateX(30px); }
  53%, 100%  { transform: translateX(0); }
}

.diag__arm {
  transform-box: view-box;
  transform-origin: 297px 244px;
  animation: arm-lift 14s var(--glide) infinite;
}

@keyframes arm-lift {
  0%, 80%    { transform: rotate(0deg); }
  86%, 94%   { transform: rotate(-55deg); }
  100%       { transform: rotate(0deg); }
}

/* --- status chip --------------------------------------------------- */
.chip.chip--state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px;
  border-radius: 40px;
  border: 1px solid var(--edge-strong);
  background: var(--surface-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.4s var(--glide), border-color 0.4s var(--glide), background 0.4s var(--glide);
}

.chip__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
  transition: background 0.4s var(--glide), box-shadow 0.4s var(--glide);
}

.chip.chip--state.is-ok {
  color: var(--secondary);
  border-color: var(--edge-active);
  background: var(--primary-ghost);
}

.chip.chip--state.is-ok .chip__dot {
  background: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* ===================================================================
   TICKER — capability strip, flowing right
   =================================================================== */
.ticker {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  background: var(--surface-3);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.ticker__row {
  display: flex;
  width: max-content;
  padding: 13px 0;
  animation: ticker 44s linear infinite;
}

.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding-right: 22px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}

.ticker__item::after {
  content: "";
  width: 5px;
  height: 5px;
  border: 1px solid var(--primary);
  transform: rotate(45deg);
}

/* Half the row is a duplicate, so -50% is a seamless loop. */
@keyframes ticker {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

.ticker:hover .ticker__row { animation-play-state: paused; }

/* ===================================================================
   FILTER BAR
   =================================================================== */
.filterbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.filterbar__buttons { display: flex; gap: 8px; flex-wrap: wrap; }

.filter {
  position: relative;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-mid);
  background: var(--primary-ghost);
  border: 1px solid var(--edge);
  padding: 9px 18px;
  border-radius: 40px;
  overflow: hidden;
  transition: color 0.4s var(--glide), border-color 0.4s var(--glide);
}

.filter span { position: relative; z-index: 2; }

/* Active state floods in from the left — the flow rule */
.filter::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient);
  transform: translateX(-101%);
  transition: transform 0.55s var(--glide);
  z-index: 1;
}

.filter:hover { color: var(--text); border-color: var(--edge-active); }

.filter.is-active {
  color: var(--background);
  border-color: transparent;
  font-weight: 500;
}

.filter.is-active::before { transform: translateX(0); }

.filterbar__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-dim);
}

/* ===================================================================
   GRIDS + SYSTEM CARDS
   =================================================================== */
.grid { display: grid; gap: 22px; align-items: start; }

.grid--systems { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid--why { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.55s var(--settle), border-color 0.4s var(--glide),
              box-shadow 0.5s var(--glide);
}

.card:hover {
  transform: translateY(-5px);
  border-color: var(--edge-active);
  box-shadow: var(--shadow-md);
}

/* A teal line draws across the top edge on hover, left to right */
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--glide);
  z-index: 3;
}

.card:hover::before,
.card:focus-visible::before { transform: scaleX(1); }

.card__figure { position: relative; margin: 0; overflow: hidden; background: var(--surface-3); }

.card__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1.1s var(--glide);
}

.card:hover .card__photo { transform: scale(1.04); }

.card__code {
  position: absolute;
  top: 13px; left: 13px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--secondary);
  background: rgba(9, 21, 19, 0.78);
  border: 1px solid var(--edge-strong);
  padding: 4px 9px;
  border-radius: 30px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.card__body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }

.card__title {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 104;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}

.card__summary {
  font-size: 14.5px;
  color: var(--text-mid);
  margin: 0 0 20px;
  flex: 1;
}

.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--edge);
}

.card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--secondary);
  background: none;
  border: none;
  padding: 0;
}

.card__more svg { transition: transform 0.45s var(--settle); }
.card:hover .card__more svg { transform: translateX(4px); }

.card__cat {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ===================================================================
   FLOW — from entry to control
   =================================================================== */
.flow { position: relative; }

.flow__track {
  position: absolute;
  top: 12px;
  left: 0; right: 0;
  height: 1px;
  background: var(--edge);
  overflow: hidden;
}

.flow__fill {
  display: block;
  width: 0%;
  height: 100%;
  background: var(--gradient);
  transition: width 1.6s var(--glide);
}

.flow__steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
}

.flow__step { position: relative; padding-top: 40px; }

.flow__step::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 11px;
  height: 11px;
  border: 1px solid var(--edge-strong);
  background: var(--background);
  border-radius: 2px;
  transition: background 0.5s var(--glide), border-color 0.5s var(--glide), transform 0.5s var(--settle);
}

.section--surface .flow__step::before { background: var(--surface); }

.flow__step.is-lit::before {
  background: var(--primary);
  border-color: var(--primary);
  transform: rotate(45deg);
}

.flow__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--text-faint);
  margin-bottom: 10px;
  transition: color 0.5s var(--glide);
}

.flow__step.is-lit .flow__num { color: var(--secondary); }

.flow__title {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 104;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.flow__text { font-size: 14px; color: var(--text-mid); margin: 0; }

/* ===================================================================
   SPLIT SECTIONS
   =================================================================== */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.split--narrow { gap: 44px; align-items: start; }
.split__text .sectlead:last-child { margin-bottom: 0; }

@media (min-width: 921px) {
  .split--reverse .split__text { order: 2; }
  .split--reverse .split__visual { order: 1; }
}

.split__visual { margin: 0; }

.shot {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--edge);
  box-shadow: var(--shadow-md);
}

.shot__cap {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 12px;
  padding-left: 14px;
  border-left: 1px solid var(--edge-active);
}

/* --- tick list ----------------------------------------------------- */
.ticklist { display: grid; gap: 12px; margin: 0 0 28px; }

.ticklist li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  color: var(--text-mid);
}

/* Bullet is an entry mark: a small gate opening */
.ticklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 12px;
  height: 1.5px;
  background: var(--primary);
}

.ticklist li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 1.5px;
  height: 9px;
  background: var(--secondary);
  opacity: 0.5;
}

/* --- stat row ------------------------------------------------------ */
.statrow {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.stat {
  flex: 1;
  min-width: 110px;
  padding: 16px 18px;
  background: var(--surface-3);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
}

.stat__value {
  display: block;
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 500;
  color: var(--secondary);
  margin-bottom: 4px;
}

.stat__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ===================================================================
   ACCESS RULES PANEL
   =================================================================== */
.panel {
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--edge);
}

.panel__title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondary);
}

.panel__meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-dim);
}

.panel__scroll { overflow-x: auto; }

.ruletable {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 11.5px;
  white-space: nowrap;
}

.ruletable th {
  text-align: left;
  padding: 12px 16px;
  font-weight: 400;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 1px solid var(--edge);
}

.ruletable td {
  padding: 13px 16px;
  color: var(--text-mid);
  border-bottom: 1px solid var(--edge);
}

.ruletable tr:last-child td { border-bottom: none; }
.ruletable tbody tr:nth-child(odd) { background: var(--surface-3); }
.ruletable td:first-child { color: var(--text); }

.state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border-radius: 30px;
  border: 1px solid var(--edge);
  font-size: 10.5px;
  letter-spacing: 0.06em;
}

.state::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.state--ok   { color: var(--primary);   border-color: var(--edge-active); background: var(--primary-ghost); }
.state--warn { color: var(--secondary); border-color: var(--edge-strong); }
.state--no   { color: var(--text-dim);  border-color: var(--edge); }

.panel__note {
  margin: 0;
  padding: 14px 20px 16px;
  border-top: 1px solid var(--edge);
  font-size: 12px;
  color: var(--text-dim);
}

/* ===================================================================
   ENVIRONMENT GRID (dyer automatike)
   =================================================================== */
.envgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 52px;
}

.env {
  padding: 20px 18px;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  transition: border-color 0.4s var(--glide), transform 0.5s var(--settle);
}

.env:hover { border-color: var(--edge-active); transform: translateY(-3px); }

.env__name {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 104;
  font-weight: 600;
  font-size: 15.5px;
  margin-bottom: 6px;
}

.env__text { font-size: 13px; color: var(--text-mid); margin: 0; }

/* ===================================================================
   INTEGRATION HUB
   =================================================================== */
.hub { text-align: center; }

.hub__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 16px;
}

.hub__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.hub__chip {
  padding: 10px 18px;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: 40px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-mid);
  transition: border-color 0.4s var(--glide), color 0.4s var(--glide);
}

.hub__chip:hover { border-color: var(--edge-active); color: var(--text); }
.hub__chips--out .hub__chip { color: var(--text-dim); }

.hub__funnel { display: block; width: 100%; height: 78px; }

.hub__lines path {
  fill: none;
  stroke: var(--edge-strong);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

/* Lines draw when the section arrives, staggered so they read as
   connections being made rather than a single sweep. */
.hub.is-drawn .hub__lines path {
  animation: draw 1.5s var(--glide) forwards;
  stroke: var(--edge-active);
}

.hub.is-drawn .hub__lines path:nth-child(2) { animation-delay: 0.1s; }
.hub.is-drawn .hub__lines path:nth-child(3) { animation-delay: 0.2s; }
.hub.is-drawn .hub__lines path:nth-child(4) { animation-delay: 0.3s; }
.hub.is-drawn .hub__lines path:nth-child(5) { animation-delay: 0.4s; }
.hub.is-drawn .hub__lines path:nth-child(6) { animation-delay: 0.5s; }
.hub.is-drawn .hub__lines path:nth-child(7) { animation-delay: 0.6s; }

@keyframes draw { to { stroke-dashoffset: 0; } }

.hub__core {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 46px;
  background: var(--surface);
  border: 1px solid var(--edge-active);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 6px var(--primary-ghost), var(--shadow-md);
}

.hub__core-mark {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  font-size: clamp(17px, 2.4vw, 23px);
  letter-spacing: 0.06em;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hub__core-text { font-size: 14px; color: var(--text-mid); }

.hub__note {
  max-width: 60ch;
  margin: 30px auto 0;
  font-size: 13px;
  color: var(--text-dim);
  padding-top: 20px;
  border-top: 1px solid var(--edge);
}

/* ===================================================================
   CHIPS (facilities + form select)
   =================================================================== */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }

.chip {
  padding: 9px 16px;
  border: 1px solid var(--edge);
  border-radius: 40px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-mid);
  background: var(--primary-ghost);
}

.chips:not(.chips--select) .chip { transition: border-color 0.4s var(--glide), color 0.4s var(--glide); }
.chips:not(.chips--select) .chip:hover { border-color: var(--edge-active); color: var(--text); }

/* selectable variant used in the quote form */
.chips--select .chip {
  cursor: pointer;
  background: var(--surface-3);
  transition: border-color 0.35s var(--glide), color 0.35s var(--glide), background 0.35s var(--glide);
}

.chips--select .chip:hover { border-color: var(--edge-active); color: var(--text); }

.chips--select .chip.is-on {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--background);
  font-weight: 500;
}

/* ===================================================================
   WHY GRID
   =================================================================== */
.why {
  padding: 26px 24px 28px;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  transition: border-color 0.4s var(--glide), transform 0.5s var(--settle);
}

.why:hover { border-color: var(--edge-active); transform: translateY(-3px); }

.why__mark {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--gradient);
  margin-bottom: 18px;
}

.why__title {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 104;
  font-weight: 600;
  font-size: 17px;
  margin: 0 0 8px;
}

.why__text { font-size: 14px; color: var(--text-mid); margin: 0; }

/* ===================================================================
   PROCESS STEPS
   =================================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  overflow: hidden;
}

.step {
  position: relative;
  padding: 26px 24px 28px;
  background: var(--surface);
  transition: background 0.4s var(--glide);
}

.step:hover { background: var(--surface-2); }

.step__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--primary);
  margin-bottom: 14px;
}

.step__title {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 104;
  font-weight: 600;
  font-size: 16.5px;
  margin: 0 0 7px;
}

.step__text { font-size: 13.5px; color: var(--text-mid); margin: 0; }

/* ===================================================================
   CALLOUT (maintenance)
   =================================================================== */
.callout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 46px;
  padding: 44px;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
}

.callout .sectlead { margin-bottom: 0; }
.callout__list { display: grid; gap: 11px; align-content: center; }

.callout__list li {
  position: relative;
  padding-left: 22px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-mid);
}

.callout__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border: 1px solid var(--primary);
  transform: rotate(45deg);
}

/* ===================================================================
   QUOTE FORM
   =================================================================== */
.quote {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: start;
}

.quote__contact {
  display: grid;
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 32px;
}

.quote__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  background: var(--surface);
  transition: background 0.4s var(--glide);
}

a.quote__line:hover { background: var(--surface-2); }

.quote__line-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.quote__line-value {
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--secondary);
  text-align: right;
}

.form {
  padding: 34px;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.form__group { border: none; padding: 0; margin: 0 0 26px; }

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}

.form__field { margin-bottom: 18px; }
.form__row .form__field { margin-bottom: 0; }

.form__label {
  display: block;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 9px;
}

.form__hint {
  font-size: 12.5px;
  color: var(--text-dim);
  margin: -4px 0 12px;
}

.form__input {
  width: 100%;
  padding: 13px 15px;
  background: var(--surface-3);
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  transition: border-color 0.35s var(--glide), background 0.35s var(--glide);
}

.form__input::placeholder { color: var(--text-faint); }

.form__input:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--background);
}

.form__input.is-bad { border-color: #E4A0A0; }

.form__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2396D6C8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
}

.form__select option { background: var(--surface); color: var(--text); }

.form__textarea { resize: vertical; min-height: 110px; font-size: 15px; }

.form__error {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: #E4A0A0;
}

.form__error[hidden] { display: none; }

.form__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.form__privacy {
  margin: 18px 0 0;
  font-size: 12px;
  color: var(--text-faint);
}

/* --- prepared request state ---------------------------------------- */
.sent {
  padding: 40px 34px;
  background: var(--surface);
  border: 1px solid var(--edge-active);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.sent[hidden] { display: none; }

.sent__mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: var(--primary);
  background: var(--primary-ghost);
  border: 1px solid var(--edge-active);
  margin-bottom: 20px;
}

.sent__title {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 106;
  font-weight: 600;
  font-size: 24px;
  margin: 0 0 10px;
}

.sent__text { color: var(--text-mid); margin: 0 0 22px; font-size: 15px; }

.sent__body {
  margin: 0;
  padding: 20px;
  background: var(--surface-3);
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-mid);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 260px;
  overflow-y: auto;
}

/* ===================================================================
   DETAIL PANEL
   Opens the way a door opens: it moves, it does not wobble.
   =================================================================== */
.detail {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.detail[hidden] { display: none; }

.detail__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 11, 10, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fade 0.4s ease both;
}

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.detail__panel {
  position: relative;
  width: min(760px, 100%);
  max-height: min(88vh, 940px);
  background: var(--surface);
  border: 1px solid var(--edge-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  animation: slide-open 0.55s var(--settle) both;
}

@keyframes slide-open {
  from { opacity: 0; transform: translateY(24px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.detail__scroll { overflow-y: auto; max-height: min(88vh, 940px); }

.detail__close {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 3;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--edge-strong);
  border-radius: 50%;
  background: rgba(9, 21, 19, 0.8);
  color: var(--text);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.35s var(--glide), border-color 0.35s var(--glide), transform 0.5s var(--settle);
}

.detail__close:hover { background: var(--primary); color: var(--background); border-color: var(--primary); transform: rotate(90deg); }

.detail__photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.detail__body { padding: 30px 34px 36px; }

.detail__code {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--secondary);
  border: 1px solid var(--edge-active);
  background: var(--primary-ghost);
  padding: 5px 12px;
  border-radius: 30px;
  margin-bottom: 16px;
}

.detail__title {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 106;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.detail__headline {
  font-size: 16.5px;
  color: var(--secondary);
  margin: 0 0 22px;
}

.detail__text {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-mid);
  margin: 0 0 30px;
}

.detail__subhead {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  margin: 0 0 14px;
}

.detail__list { display: grid; gap: 10px; margin: 0 0 30px; }

.detail__list li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  color: var(--text-mid);
}

.detail__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 11px;
  height: 1.5px;
  background: var(--primary);
}

.detail__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }

.detail__chip {
  padding: 7px 14px;
  border: 1px solid var(--edge);
  border-radius: 30px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-dim);
}

.detail__cta { width: 100%; }

.detail__note {
  text-align: center;
  font-size: 12px;
  color: var(--text-faint);
  margin: 14px 0 0;
}

/* ===================================================================
   FOOTER
   =================================================================== */
.footer {
  position: relative;
  z-index: 2;
  padding: 78px 0 30px;
  border-top: 1px solid var(--edge);
  background: var(--surface);
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.4fr) minmax(0, 0.9fr);
  gap: 44px;
  padding-bottom: 46px;
}

.footer__line {
  color: var(--text-mid);
  font-size: 14.5px;
  margin: 20px 0 24px;
  max-width: 34ch;
}

.footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }

.footer__coltitle {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 16px;
}

.footer__link {
  display: block;
  font-size: 14px;
  color: var(--text-mid);
  margin: 0 0 11px;
  transition: color 0.35s var(--glide);
}

a.footer__link:hover { color: var(--secondary); }

.footer__link--strong {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--secondary);
}

.footer__link--muted { color: var(--text-dim); }

.footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--edge);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 1020px) {
  .quote { grid-template-columns: 1fr; gap: 34px; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__contact { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
  .mainnav { display: none; }
  .burger { display: flex; }
  .flow__steps { grid-template-columns: repeat(2, 1fr); gap: 30px 22px; }
  .flow__track { display: none; }
  .hero__inner { grid-template-columns: 1fr; gap: 44px; }
  .hero { padding: 62px 0 76px; }
}

@media (max-width: 920px) {
  .split { grid-template-columns: 1fr; gap: 38px; }
  .callout { grid-template-columns: 1fr; gap: 30px; padding: 32px 26px; }
  .section { padding: 78px 0; }
  .section--tight { padding: 58px 0; }
}

@media (max-width: 620px) {
  html { scroll-padding-top: 74px; }
  .topbar__inner { padding: 12px 16px; }
  .shell, .hero__inner { padding-left: 18px; padding-right: 18px; }
  .topbar__actions .ghostbtn { display: none; }
  .wordmark__bottom { font-size: 7.5px; letter-spacing: 0.18em; }
  .flow__steps { grid-template-columns: 1fr; gap: 26px; }
  .form { padding: 24px 20px; }
  .sent { padding: 30px 22px; }
  .form__row { grid-template-columns: 1fr; gap: 18px; }
  .form__row .form__field { margin-bottom: 0; }
  .detail { padding: 0; }
  .detail__panel { width: 100%; height: 100%; max-height: 100vh; border-radius: 0; border: none; }
  .detail__scroll { max-height: 100vh; }
  .detail__body { padding: 24px 20px 32px; }
  .detail__title { font-size: 25px; }
  .footer__top { grid-template-columns: 1fr; gap: 34px; }
  .footer__bar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hub__core { padding: 22px 24px; }
  .hub__funnel { height: 56px; }
  .btn { padding: 13px 22px; }
  .hero__facts { gap: 22px; }
}

@media (max-width: 430px) {
  .grid--systems { grid-template-columns: 1fr; }
  .hero__ctas .btn { flex: 1; }
  .form__actions .btn { flex: 1; }
}

/* ===================================================================
   REDUCED MOTION
   Everything ambient stops. Content stays visible and in place.
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.001ms !important;
  }

  .js .reveal { opacity: 1; transform: none; filter: none; }
  .field__mass { opacity: 0.08; }
  .hub__lines path { stroke-dashoffset: 0; stroke: var(--edge-active); }
  .flow__fill { width: 100% !important; }
  .card:hover { transform: none; }
  .diag__leaf--l { transform: translateX(-30px); }
  .diag__leaf--r { transform: translateX(30px); }
  .diag__arm { transform: rotate(-55deg); }
  .diag__led { fill: var(--primary); }
}