/* ============================================================
   PROTEC SOLUTIONS — design system
   Direction: industrial dark graphite + gold, precision-tech
   ============================================================ */

:root {
  --bg: #060b14;
  --bg-raised: #0b1220;
  --bg-panel: #101a2a;
  --line: #1c2b45;
  --line-strong: #2a3d5c;
  --text: #e9ecf1;
  --text-dim: #9aa3b2;
  --text-faint: #626c7d;
  --gold: #2ad4f0;
  --gold-deep: #1b74d8;
  --gold-soft: rgba(42, 212, 240, 0.12);
  --teal: #45db66;
  --teal-soft: rgba(69, 219, 102, 0.1);
  --danger: #ef6a5a;

  --font-display: "Archivo", sans-serif;
  --font-body: "Instrument Sans", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --text-hero: clamp(2.6rem, 1.2rem + 6vw, 6.4rem);
  --text-h2: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem);
  --text-h3: clamp(1.15rem, 1rem + 0.8vw, 1.6rem);
  --text-base: clamp(1rem, 0.95rem + 0.2vw, 1.08rem);

  --space-section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --radius: 14px;
  --radius-lg: 22px;

  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.6s;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

::selection { background: var(--gold); color: #03101a; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 1rem; }

/* ---------- atmosphere ---------- */
.grain::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

#bg-canvas {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
}

main, header.site-header, footer.site-footer { position: relative; z-index: 2; }

/* ---------- typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 800;
}

.kicker {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.2rem;
}
.kicker::before {
  content: "";
  width: 2rem; height: 1px;
  background: var(--gold);
}
.kicker--teal { color: var(--teal); }
.kicker--teal::before { background: var(--teal); }

.lede {
  color: var(--text-dim);
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  max-width: 56ch;
}

.gold-text {
  background: linear-gradient(100deg, #93eeff, var(--gold) 45%, var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* clip-to-text shaves glyph strokes that overhang the text box;
     pad the paint area and pull following text back into place */
  padding-right: 0.08em;
  margin-right: -0.08em;
}
.teal-text { color: var(--teal); }

/* ---------- header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem clamp(1.2rem, 4vw, 3rem);
  transition: background var(--dur), border-color var(--dur), backdrop-filter var(--dur);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(6, 11, 20, 0.85);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

.logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.logo img { flex-shrink: 0; filter: drop-shadow(0 0 12px rgba(42, 212, 240, 0.35)); }
.logo-word { line-height: 1; letter-spacing: 0.03em; }
.logo-word em {
  font-style: normal;
  background: linear-gradient(95deg, #2ad4f0, #1b74d8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.1em;
}
.logo-word small {
  display: block;
  font-size: 0.52em;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 3px;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.8rem);
}
.nav a {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-dim);
  padding: 0.35rem 0;
  position: relative;
  transition: color 0.25s;
}
.nav a:hover, .nav a:focus-visible { color: var(--text); }
.nav a.active { color: var(--gold); }
.nav a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}

.search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  color: var(--text-faint);
  padding: 0.42rem 0.8rem;
  border-radius: 9px;
  font-size: 0.8rem;
  transition: border-color 0.25s, color 0.25s;
}
.search-trigger:hover { border-color: var(--gold); color: var(--text-dim); }
.search-trigger kbd {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  background: var(--line);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--text);
  position: relative;
  /* must outrank .nav's z-index:150 (mobile overlay) so the button that
     opens the menu is still clickable to CLOSE it — without this, the
     full-viewport overlay covers its own toggle button the moment it
     opens, and there is no way to dismiss the menu from the page */
  z-index: 200;
}
.nav-toggle .nt-close { display: none; }
.nav-toggle.open .nt-open { display: none; }
.nav-toggle.open .nt-close { display: block; }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  /* .nav is the DESKTOP inline nav — simply hidden below 860px rather
     than repurposed as the mobile overlay. Three rounds of "fixed it,
     still broken on a real phone" all traced back to .nav being a DOM
     child of .site-header: something on the header (backdrop-filter,
     then separately view-transition-name) kept leaking into how the
     fixed-position overlay rendered, in ways this session's testing
     tools could not detect but a real device kept proving were still
     there. Rather than keep hunting for the next ancestor property
     that might cause the same class of bug, the mobile menu is now
     .mobile-nav below — a physically separate element, NOT nested
     inside <header>, so there is no ancestor chain left for anything
     to leak through at all. See .mobile-nav for the actual overlay. */
  .nav { display: none; }
  .search-trigger span.label { display: none; }
}

/* ---------- mobile nav overlay: deliberately NOT inside <header> ---------- */
.mobile-nav {
  display: none;
}
@media (max-width: 860px) {
  .mobile-nav {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 150;
    background: var(--bg);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    transform: translateY(-100%);
    transition: transform 0.5s var(--ease-expo);
  }
  .mobile-nav.open { transform: translateY(0); }
  .mobile-nav a {
    font-size: 1.4rem;
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--text-dim);
    transition: color 0.25s;
  }
  .mobile-nav a:hover, .mobile-nav a:focus-visible { color: var(--text); }
  .mobile-nav a.active { color: var(--gold); }
  @media (prefers-reduced-motion: reduce) {
    .mobile-nav { transition: none; }
  }
}

/* ---------- layout ---------- */
.wrap {
  width: min(1200px, calc(100% - clamp(2.4rem, 8vw, 6rem)));
  margin-inline: auto;
}
section { padding-block: var(--space-section); }
@media (max-width: 640px) {
  section { padding-block: clamp(2.5rem, 2rem + 5vw, 3.5rem); }
}

/* ---------- hero ---------- */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 7rem;
  position: relative;
}
.hero h1 {
  font-size: var(--text-hero);
  font-weight: 900;
  max-width: 14ch;
  text-wrap: balance;
}
.hero .lede { margin-top: 1.6rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.6rem; }
@media (max-width: 480px) {
  .hero-cta { flex-wrap: nowrap; gap: 0.6rem; align-items: stretch; }
  .hero-cta .btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.7rem 0.6rem;
    font-size: 0.8rem;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
  }
}

.hero-meta {
  margin-top: auto;
  padding-block: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 4rem);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-faint);
  letter-spacing: 0.08em;
}
.hero-meta strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--text);
  letter-spacing: 0;
}
.hero-meta strong .unit { color: var(--gold); font-size: 1.1rem; }
@media (max-width: 640px) {
  .hero-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
    border-top: 0;
    padding-block: 1.6rem 0;
  }
  .hero-meta > div {
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    position: relative;
    overflow: hidden;
  }
  .hero-meta > div::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--teal));
    opacity: 0.6;
  }
  .hero-meta strong { font-size: 1.5rem; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.7rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: transform 0.3s var(--ease-expo), box-shadow 0.3s, background 0.3s, border-color 0.3s;
}
.btn:active { transform: scale(0.97); }
.btn-gold {
  background: linear-gradient(120deg, #6fe4ff, var(--gold-deep));
  color: #04131f;
}
.btn-gold:hover { box-shadow: 0 8px 32px rgba(42, 212, 240, 0.35); transform: translateY(-2px); }
.btn-ghost {
  border-color: var(--line-strong);
  color: var(--text);
  background: transparent;
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.btn-teal { background: var(--teal); color: #04200f; }
.btn-teal:hover { box-shadow: 0 8px 32px rgba(69, 219, 102, 0.3); transform: translateY(-2px); }

/* ---------- section headers ---------- */
.sec-head { max-width: 760px; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.sec-head h2 { font-size: var(--text-h2); text-wrap: balance; }
.sec-head p { margin-top: 1.1rem; color: var(--text-dim); }

/* ---------- split panels (dual proposition) ---------- */
.dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}
@media (max-width: 820px) { .dual { grid-template-columns: 1fr; } }

.panel {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 3.5vw, 3rem);
  overflow: hidden;
  transition: transform 0.5s var(--ease-expo), border-color 0.4s;
}
.panel:hover { transform: translateY(-6px); }
.panel--gold:hover { border-color: rgba(42, 212, 240, 0.5); }
.panel--teal:hover { border-color: rgba(69, 219, 102, 0.5); }
.panel h3 { font-size: var(--text-h3); margin-bottom: 0.8rem; }
.panel p { color: var(--text-dim); font-size: 0.97rem; }
.panel .panel-glow {
  position: absolute;
  top: -40%; right: -20%;
  width: 60%; aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.35;
  pointer-events: none;
}
.panel--gold .panel-glow { background: var(--gold-deep); }
.panel--teal .panel-glow { background: var(--teal); }
.panel .btn { margin-top: 1.8rem; }
.panel ul {
  list-style: none;
  margin-top: 1.4rem;
  display: grid;
  gap: 0.55rem;
  font-size: 0.92rem;
  color: var(--text-dim);
}
.panel ul li { display: flex; gap: 0.6rem; align-items: baseline; }
.panel ul li::before { content: "▸"; font-size: 0.75rem; }
.panel--gold ul li::before { color: var(--gold); }
.panel--teal ul li::before { color: var(--teal); }

/* ---------- feature grid ---------- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
@media (max-width: 980px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.7rem;
  transition: transform 0.45s var(--ease-expo), border-color 0.35s, background 0.35s;
}
.card:hover {
  transform: translateY(-5px);
  border-color: var(--line-strong);
  background: var(--bg-panel);
}
.card .icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--gold-soft);
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.card .icon--teal { background: var(--teal-soft); color: var(--teal); }
.card h3 { font-size: 1.08rem; margin-bottom: 0.55rem; font-weight: 700; }
.card p { font-size: 0.92rem; color: var(--text-dim); }
.card .tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(42, 212, 240, 0.35);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  margin-bottom: 0.9rem;
}

/* ---------- marquee ---------- */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: 1.1rem;
  display: flex;
  user-select: none;
}
.marquee-track {
  display: flex;
  gap: 3.5rem;
  flex-shrink: 0;
  align-items: center;
  animation: marquee 30s linear infinite;
  padding-right: 3.5rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
.marquee-track em { color: var(--gold); font-style: normal; }
@keyframes marquee { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- reveal animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-expo), transform 0.9s var(--ease-expo);
}
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- forms ---------- */
.field { display: grid; gap: 0.45rem; }
.field label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.field input, .field select, .field textarea {
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--text);
  padding: 0.8rem 1rem;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.field textarea { resize: vertical; min-height: 120px; }

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239aa3b2' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.6rem;
}

/* ---------- range sliders ---------- */
input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--line-strong);
  outline: none;
  padding: 0;
  border: 0;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6fe4ff, var(--gold-deep));
  border: 3px solid var(--bg);
  box-shadow: 0 2px 10px rgba(42, 212, 240, 0.45);
  transition: transform 0.2s var(--ease-expo), box-shadow 0.2s;
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.18);
  box-shadow: 0 2px 18px rgba(42, 212, 240, 0.7);
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6fe4ff, var(--gold-deep));
  border: 3px solid var(--bg);
  box-shadow: 0 2px 10px rgba(42, 212, 240, 0.45);
  cursor: pointer;
}
input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--line-strong);
}
input[type="range"]:focus-visible {
  box-shadow: 0 0 0 3px var(--gold-soft);
}

/* ---------- chips / choices ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip {
  border: 1px solid var(--line-strong);
  background: var(--bg-raised);
  color: var(--text-dim);
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 500;
  transition: all 0.25s;
}
.chip:hover { border-color: var(--gold); color: var(--text); }
.chip.selected {
  background: var(--gold);
  border-color: var(--gold);
  color: #04131f;
  font-weight: 700;
}
.chip.selected--teal { background: var(--teal); border-color: var(--teal); color: #04200f; }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 3.5rem 0 2rem;
  background: var(--bg-raised);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid h4 {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 1rem;
  font-family: var(--font-mono);
  font-weight: 500;
}
.footer-grid ul { list-style: none; display: grid; gap: 0.55rem; }
.footer-grid a { color: var(--text-dim); font-size: 0.92rem; transition: color 0.2s; }
.footer-grid a:hover { color: var(--gold); }
.footer-brand p { color: var(--text-dim); font-size: 0.92rem; max-width: 34ch; margin-top: 0.9rem; }
.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--text-faint);
  font-family: var(--font-mono);
}

/* ============================================================
   AI ASSISTANT WIDGET
   ============================================================ */
.ai-fab {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 200;
  width: 62px; height: 62px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #6fe4ff, var(--gold-deep));
  color: #04131f;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 40px rgba(42, 212, 240, 0.4);
  transition: transform 0.35s var(--ease-expo);
}
.ai-fab:hover { transform: scale(1.08) rotate(6deg); }
.ai-fab .pulse {
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(42, 212, 240, 0.5);
  animation: aiPulse 2.4s ease-out infinite;
}
@keyframes aiPulse {
  0% { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

.ai-panel {
  position: fixed;
  right: clamp(0.6rem, 3vw, 2rem);
  bottom: clamp(5.6rem, 3vw + 5rem, 6.8rem);
  z-index: 200;
  width: min(400px, calc(100vw - 1.2rem));
  height: min(580px, calc(100svh - 8rem));
  background: var(--bg-panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  transform: scale(0.85) translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s var(--ease-expo), opacity 0.3s;
}
.ai-panel.open { transform: none; opacity: 1; pointer-events: auto; }

.ai-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg-raised);
}
.ai-avatar {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, #6fe4ff, var(--gold-deep));
  display: grid; place-items: center;
  color: #04131f;
  flex-shrink: 0;
}
.ai-head-txt strong { font-family: var(--font-display); font-size: 0.98rem; display: block; }
.ai-head-txt span {
  font-size: 0.72rem;
  color: var(--teal);
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.ai-head-txt span::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal);
  animation: blink 1.8s infinite;
}
@keyframes blink { 50% { opacity: 0.3; } }
.ai-close {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--text-faint);
  font-size: 1.3rem;
  line-height: 1;
  padding: 0.3rem;
}
.ai-close:hover { color: var(--text); }

.ai-log {
  flex: 1;
  overflow-y: auto;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.msg {
  max-width: 86%;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  font-size: 0.92rem;
  line-height: 1.55;
  animation: msgIn 0.4s var(--ease-expo);
}
@keyframes msgIn { from { opacity: 0; transform: translateY(10px); } }
.msg-bot {
  align-self: flex-start;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}
.msg-bot strong { color: var(--gold); }
.msg-bot a { color: var(--teal); text-decoration: underline; }
.msg-user {
  align-self: flex-end;
  background: var(--gold);
  color: #04131f;
  font-weight: 500;
  border-bottom-right-radius: 4px;
}
.msg .typing { display: inline-flex; gap: 4px; padding: 0.2rem 0; }
.msg .typing i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
  animation: tDot 1.2s infinite;
}
.msg .typing i:nth-child(2) { animation-delay: 0.15s; }
.msg .typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes tDot { 30% { transform: translateY(-5px); background: var(--gold); } }

.ai-quick {
  display: flex;
  gap: 0.5rem;
  padding: 0 1.1rem 0.7rem;
  flex-wrap: wrap;
}
.ai-quick button {
  font-size: 0.75rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-dim);
  transition: all 0.2s;
}
.ai-quick button:hover { border-color: var(--gold); color: var(--gold); }

.ai-input {
  display: flex;
  gap: 0.5rem;
  padding: 0.8rem 1.1rem;
  border-top: 1px solid var(--line);
  background: var(--bg-raised);
}
.ai-input input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  color: var(--text);
  font-size: 0.9rem;
}
.ai-input input:focus { outline: none; border-color: var(--gold); }
.ai-input button {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: none;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform 0.25s;
}
.ai-input button:hover { transform: scale(1.08); }
.ai-send { background: var(--gold); color: #04131f; }
.ai-mic { background: var(--bg-panel); border: 1px solid var(--line-strong) !important; color: var(--text-dim); }
.ai-mic.listening { background: var(--danger); color: #fff; animation: blink 1s infinite; }

/* ============================================================
   COMMAND PALETTE (Ctrl+K search)
   ============================================================ */
.palette-overlay {
  position: fixed; inset: 0;
  z-index: 300;
  background: rgba(3, 6, 12, 0.72);
  backdrop-filter: blur(6px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 1rem 0;
}
.palette-overlay.open { display: flex; }
.palette {
  width: min(620px, 100%);
  background: var(--bg-panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
  animation: palIn 0.3s var(--ease-expo);
}
@keyframes palIn { from { opacity: 0; transform: translateY(-16px) scale(0.98); } }
.palette input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 1.1rem 1.3rem;
  color: var(--text);
  font-size: 1.05rem;
}
.palette input:focus { outline: none; }
.palette-results { max-height: 46vh; overflow-y: auto; padding: 0.5rem; }
.palette-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  color: var(--text);
  transition: background 0.15s;
}
.palette-item:hover, .palette-item.active { background: var(--bg-raised); }
.palette-item .pi-icon {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--gold-soft);
  color: var(--gold);
  border-radius: 9px;
  flex-shrink: 0;
  font-size: 0.85rem;
}
.palette-item .pi-txt { overflow: hidden; }
.palette-item .pi-txt strong { display: block; font-size: 0.92rem; font-weight: 600; }
.palette-item .pi-txt span {
  display: block;
  font-size: 0.78rem;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.palette-empty { padding: 2rem; text-align: center; color: var(--text-faint); font-size: 0.9rem; }
.palette-hint {
  padding: 0.6rem 1.2rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-faint);
  display: flex;
  gap: 1.2rem;
}

/* ============================================================
   PAGE-SPECIFIC SHARED PIECES
   ============================================================ */

/* stat band — interactive cells with cursor glow and sweep underline */
.stat-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-raised);
}
@media (max-width: 760px) { .stat-band { grid-template-columns: 1fr 1fr; } }
.stat {
  position: relative;
  padding: 2.2rem 1.7rem 2.4rem;
  border-right: 1px solid var(--line);
  overflow: hidden;
  transition: background 0.35s;
}
.stat:last-child { border-right: 0; }
@media (max-width: 760px) {
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
.stat::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(42, 212, 240, 0.1), transparent 65%);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}
.stat:hover::before { opacity: 1; }
.stat strong {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.3rem);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}
.stat strong > span:first-child {
  background: linear-gradient(120deg, #93eeff, var(--gold) 55%, var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.06em;
}
.stat .unit {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--gold);
}
.stat-label {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: var(--text-faint);
  transition: color 0.3s;
}
.stat:hover .stat-label { color: var(--text-dim); }
.stat-detail {
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-dim);
  transition: max-height 0.45s var(--ease-expo), opacity 0.35s, margin-top 0.45s var(--ease-expo);
}
.stat:hover .stat-detail, .stat:focus-within .stat-detail {
  max-height: 4.5em;
  opacity: 1;
  margin-top: 0.55rem;
}
.stat-sweep {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--line);
}
.stat-sweep i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold) 55%, var(--teal));
  transition: width 1.1s var(--ease-expo);
}
.stat-band.in .stat:nth-child(1) .stat-sweep i { width: 100%; transition-delay: 0.05s; }
.stat-band.in .stat:nth-child(2) .stat-sweep i { width: 100%; transition-delay: 0.2s; }
.stat-band.in .stat:nth-child(3) .stat-sweep i { width: 100%; transition-delay: 0.35s; }
.stat-band.in .stat:nth-child(4) .stat-sweep i { width: 100%; transition-delay: 0.5s; }
@media (prefers-reduced-motion: reduce) {
  .stat-band.in .stat-sweep i { transition: none; }
}

/* interactive tool shells */
.tool {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3.5vw, 2.8rem);
}
.tool-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.8rem; }
.tool-head .icon {
  width: 48px; height: 48px;
  border-radius: 13px;
  display: grid; place-items: center;
  background: var(--gold-soft);
  color: var(--gold);
  flex-shrink: 0;
}
.tool-head .icon--teal { background: var(--teal-soft); color: var(--teal); }
.tool-head h3 { font-size: 1.25rem; }
.tool-head p { font-size: 0.85rem; color: var(--text-faint); margin-top: 0.15rem; }

.tool-result {
  margin-top: 1.6rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 1.4rem;
  background: var(--bg);
  font-size: 0.95rem;
  animation: msgIn 0.5s var(--ease-expo);
}
.tool-result h4 { color: var(--gold); margin-bottom: 0.6rem; font-size: 1rem; }
.tool-result .big {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.1;
}
.tool-result table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin-top: 0.8rem; }
.tool-result td { padding: 0.45rem 0; border-bottom: 1px solid var(--line); color: var(--text-dim); }
.tool-result td:last-child { text-align: right; color: var(--text); font-weight: 600; }

/* wizard steps */
.wiz-steps {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1.8rem;
}
.wiz-steps i {
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: var(--line);
  transition: background 0.4s;
}
.wiz-steps i.done { background: var(--teal); }
.wiz-q { font-size: 1.15rem; font-weight: 700; font-family: var(--font-display); margin-bottom: 1.2rem; }

/* progress meter */
.meter { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 0.4rem; }
.meter i {
  display: block; height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-deep), #6fe4ff);
  transition: width 1s var(--ease-expo);
}
.meter.teal i { background: linear-gradient(90deg, #1d9e85, var(--teal)); }

/* compact meter for dense card layouts */
.meter-sm { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 0.35rem; }
.meter-sm i {
  display: block; height: 100%;
  border-radius: 999px;
  width: 0;
  transition: width 1.1s var(--ease-expo);
}

/* compact certification chip */
.chip-sm {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--text-dim);
  cursor: default;
  transition: border-color 0.25s, color 0.25s, transform 0.25s var(--ease-expo);
}
.product-card:hover .chip-sm { border-color: rgba(42, 212, 240, 0.4); color: var(--text); }

/* ---------- product grid: one row, cursor-tracking cards ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}
@media (max-width: 1180px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .product-grid { grid-template-columns: 1fr; } }

.product-card {
  position: relative;
  overflow: hidden;
  will-change: transform;
  transition: transform 0.5s var(--ease-expo), border-color 0.35s, background 0.35s;
}
.product-card.tracking { transition: transform 0.12s ease-out, border-color 0.35s, background 0.35s; }
.product-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
    rgba(42, 212, 240, 0.13), transparent 65%);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}
.product-card:hover::before { opacity: 1; }
.product-card .pc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.84rem;
  margin-top: 0.9rem;
}
.product-card .pc-row:first-of-type { margin-top: 1.1rem; }
.product-card .pc-row span:first-child { color: var(--text-faint); }
.product-card .pc-row span:last-child { font-weight: 600; }
.product-card .pc-certs {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-top: 1rem;
}
@media (prefers-reduced-motion: reduce) {
  .product-card, .product-card.tracking { transition: border-color 0.35s, background 0.35s; }
}

/* page hero (sub pages) */
.page-hero {
  padding-top: clamp(9rem, 8rem + 6vw, 14rem);
  padding-bottom: clamp(3rem, 5vw, 5rem);
}
.page-hero h1 { font-size: clamp(2.4rem, 1.4rem + 4.5vw, 5rem); max-width: 16ch; text-wrap: balance; }
.page-hero .lede { margin-top: 1.4rem; }

/* comparison table */
.spec-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.spec-table th, .spec-table td { padding: 0.9rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
.spec-table th { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-faint); font-weight: 500; }
.spec-table td:first-child { font-weight: 600; }
.spec-table tr:hover td { background: var(--bg-raised); }
.spec-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }

/* toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  transform: translate(-50%, 120%);
  background: var(--bg-panel);
  border: 1px solid var(--gold);
  color: var(--text);
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  font-size: 0.9rem;
  z-index: 400;
  transition: transform 0.5s var(--ease-expo);
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.toast.show { transform: translate(-50%, 0); }

/* skip link */
.skip-link {
  position: absolute;
  top: -100px; left: 1rem;
  background: var(--gold);
  color: #04131f;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  z-index: 500;
  font-weight: 700;
  transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

/* ============================================================
   SECTION DOT-NAV — sticky in-page jump list
   Desktop only: below 1200px there isn't clear margin space
   beside the content column, and the header nav + Ctrl+K search
   already cover navigation on smaller screens.
   ============================================================ */
.dotnav {
  position: fixed;
  left: clamp(0.9rem, 2vw, 1.6rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: none;
  flex-direction: column;
  gap: 0.85rem;
  opacity: 0;
  transition: opacity 0.4s;
}
.dotnav.ready { opacity: 1; }
@media (min-width: 1200px) { .dotnav { display: flex; } }
@media (prefers-reduced-motion: reduce) { .dotnav { transition: none; } }

.dotnav a {
  position: relative;
  display: flex;
  align-items: center;
  width: 11px; height: 11px;
}
.dotnav a i {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: transparent;
  transition: all 0.35s var(--ease-expo);
}
.dotnav a:hover i { border-color: var(--gold); transform: scale(1.25); }
.dotnav a.current i {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(42, 212, 240, 0.16);
}
.dotnav a span {
  position: absolute;
  left: 1.6rem;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  opacity: 0;
  transform: translateX(-6px);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s var(--ease-expo);
}
.dotnav a:hover span, .dotnav a:focus-visible span {
  opacity: 1;
  transform: none;
}
.dotnav a:focus-visible i { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- back to top ---------- */
.to-top {
  position: fixed;
  left: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 190;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg-panel);
  border: 1px solid var(--line-strong);
  color: var(--text-dim);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.35s, transform 0.35s var(--ease-expo),
              border-color 0.25s, color 0.25s;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { border-color: var(--gold); color: var(--gold); }
.to-top:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: opacity 0.2s; transform: none; }
}

/* ============================================================
   Cross-document View Transitions were here and have been removed.
   Two mobile bug reports came in against a real device after this
   shipped: first the mobile nav rendering translucent, then — after
   a fix that checked out on every computed-style and hit-test check
   this session's tooling could run, but which the real device proved
   wrong anyway — the menu becoming genuinely unclosable. The second
   fix pulled view-transition-name off .nav specifically, but .nav is
   a DOM child of .site-header, which still carried its own name, and
   the transparency persisted on the actual phone regardless. An
   element with an active view-transition-name can behave like
   transform/filter do — forcing a new compositing layer and
   containing block for fixed-position descendants — which is the
   same category of bug already diagnosed and fixed once this session
   for backdrop-filter, just from a property that wasn't reconsidered
   the second time.
   Given two consecutive "verified fixed, still broken on the real
   device" cycles, this was pulled entirely rather than patched a
   third time on a theory this session's tools can't actually confirm
   against real Android Chrome compositing behaviour. Nothing else on
   the site depended on it. Re-adding it later needs testing against
   a real device before being called fixed, not computed-style checks
   in a sandboxed browser tool.
   ============================================================ */

/* ============================================================
   NATIVE SCROLL-DRIVEN REVEALS (progressive enhancement)
   Runs entirely on the compositor via animation-timeline: view()
   in browsers that support it. js/site.js feature-detects with
   CSS.supports('animation-timeline','view()') and skips its own
   IntersectionObserver reveal loop (initReveal()) whenever this
   block is active, so the two mechanisms never fight over the
   same element. Browsers without support are completely
   untouched: they keep the existing .reveal / .reveal.in
   JS-driven rules further up this file exactly as they were.

   Wrapped in `prefers-reduced-motion: no-preference` so reduced-
   motion users always fall through to the existing
   `@media (prefers-reduced-motion: reduce) { .reveal {...} }`
   rule above -- opacity:1, transform:none, transition:none,
   content immediately visible, no animation of any kind.

   Design note -- opacity only, no rise: a CSS animation with
   fill-mode "both" that has finished its active range keeps
   holding its end-state value at a cascade priority ABOVE any
   normal-priority transform declaration on that same element --
   including the :hover lift on .card/.panel and the JS-driven
   pointermove tilt on .product-card (both of which also carry
   .reveal / .reveal-dN in the page markup). If this animation
   touched `transform`, those hover/tilt effects would silently
   stop working forever after the first reveal, in every browser
   that supports this feature. Animating opacity only sidesteps
   that collision entirely while still delivering a real, visible,
   compositor-driven reveal. transform is neutralised to a static
   `none` (not animated) so supporting browsers don't sit
   permanently offset by the 28px the JS fallback starts from.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

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

    /* RANGE SAFETY (do not widen these without re-checking):
       the end point of every range below must be reachable given the
       page's actual maximum scroll distance. A `cover N%` end point is
       NOT guaranteed reachable for the last elements on a page: if the
       document cannot scroll far enough, the animation never reaches
       100%, and because `fill-mode: both` holds the animation's current
       value at a cascade priority ABOVE normal declarations, such an
       element would sit permanently at partial (or zero) opacity with
       no way for any CSS rule or class to override it.
       `entry N%` end points complete as soon as the element has entered
       the viewport by that fraction, which is always reachable for
       anything that becomes visible at all. Every .reveal lives inside
       <main>, with the site footer below it, so full entry is always
       achievable. See also the watchdog in js/site.js initReveal(). */
    .reveal {
      opacity: 0;
      transform: none;
      transition: none;
      animation: protec-reveal-fade linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    .reveal-d1 { animation-range: entry 8% entry 65%; }
    .reveal-d2 { animation-range: entry 16% entry 75%; }
    .reveal-d3 { animation-range: entry 24% entry 85%; }

    /* Escape hatch for the watchdog in js/site.js. A filling animation
       outranks normal declarations, so simply setting opacity:1 cannot
       rescue a stuck element -- the animation itself has to be removed.
       This only ever applies if the watchdog finds an element visible
       but still transparent, which should never happen. */
    .reveal.reveal-force {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }

    /* ---- stat-sweep underline fill ----
       The named view-timeline is sourced from .stat (a full-size
       grid cell, ~150-200px tall) rather than self-timing the 3px
       -tall sweep bar: animation-timeline: view() applied directly
       to the bar would size its entry/cover percentages against
       the bar's own ~3px height, so the fill would snap almost
       instantly instead of animating over a visible scroll
       distance. Sourcing the timeline from the ancestor .stat cell
       reproduces the same gradual, staggered fill the JS/
       .stat-band.in version gives. No transform/hover collision
       risk here -- width on this element is never touched by any
       other rule, hover state, or script. */
    .stat {
      view-timeline: --protec-stat-tl block;
    }
    /* entry-based end points for the same reachability reason as
       .reveal above: a stat band near the foot of a short page must
       still be able to complete its sweep. */
    .stat-sweep i {
      transition: none;
      animation: protec-sweep-fill linear both;
      animation-timeline: --protec-stat-tl;
      animation-range: entry 0% entry 60%;
    }
    .stat:nth-child(2) .stat-sweep i { animation-range: entry 8% entry 70%; }
    .stat:nth-child(3) .stat-sweep i { animation-range: entry 16% entry 80%; }
    .stat:nth-child(4) .stat-sweep i { animation-range: entry 24% entry 90%; }

    @keyframes protec-sweep-fill {
      from { width: 0; }
      to   { width: 100%; }
    }
  }
}

/* ============================================================
   MECHANISM VISUALISATION (goldshield.html "How it works")
   Raw-WebGL scroll-scrubbed diagram of the three-stage
   antimicrobial mechanism, lazy-initialised by js/mechanism.js
   only once this panel scrolls into view. The panel itself is
   never display:none by default -- it needs real layout so the
   IntersectionObserver in mechanism.js can see it arrive -- so
   the pre-JS / no-WebGL state is a designed empty panel (gradient
   surface, caption, stage buttons) rather than a blank box. If
   WebGL is unavailable, js/mechanism.js hides this whole block
   and the existing static .card grid below carries the
   explanation on its own.
   ============================================================ */
.mech-viz {
  display: grid;
  gap: 1.2rem;
  margin-bottom: clamp(2.2rem, 4.5vw, 3.6rem);
}
.mech-canvas-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: radial-gradient(120% 140% at 50% 0%, var(--bg-panel), var(--bg-raised) 70%);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  max-height: 460px;
}
@media (max-width: 640px) {
  .mech-canvas-wrap { aspect-ratio: 4 / 5; max-height: 420px; }
}
.mech-canvas-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 0.6s var(--ease-expo);
}
.mech-canvas-wrap.is-ready canvas { opacity: 1; }
.mech-stage-label {
  position: absolute;
  left: clamp(1rem, 3vw, 1.8rem);
  top: clamp(1rem, 3vw, 1.8rem);
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--font-mono);
  pointer-events: none;
}
.mech-stage-num {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--gold);
  border: 1px solid rgba(42, 212, 240, 0.4);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
}
.mech-stage-name {
  font-size: 0.82rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.mech-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.mech-btn {
  border: 1px solid var(--line-strong);
  background: var(--bg-raised);
  color: var(--text-dim);
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.mech-btn:hover { border-color: var(--gold); color: var(--text); }
.mech-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.mech-btn.is-active { background: var(--gold); border-color: var(--gold); color: #04131f; }

/* card highlight synced to the active stage */
.grid-3 .card.mech-active {
  border-color: var(--gold);
  background: var(--bg-panel);
}

@media (prefers-reduced-motion: reduce) {
  .mech-canvas-wrap canvas { transition: none; }
  .mech-btn { transition: none; }
}

/* visually-hidden text alternative, kept in the accessibility tree */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}