/* ==========================================================================
   Stihia — Design Tokens & Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design Tokens
   -------------------------------------------------------------------------- */

:root {
  /* ── Typography — Families ───────────────────────────────────────────── */
  --font-family-base: "Space Grotesk", sans-serif;
  --font-family-brand: "Goldman", serif;
  --font-family-mono: "JetBrains Mono", "Fira Code", "SF Mono", monospace;

  /* ── Typography — Size Scale ─────────────────────────────────────────── */
  --fs-display: clamp(2.5rem, 5vw, 4rem);
  --fs-h1: 3rem;
  --fs-h2: clamp(2rem, 3vw, 2.5rem);
  --fs-lead: 1.25rem;
  --fs-body-lg: 1.15rem;
  --fs-body: 1.1rem;
  --fs-code: 0.9rem;
  --fs-card-title: 1.35rem;
  --fs-card-body: 0.98rem;
  --fs-sm: 0.76rem;
  --fs-xs: 0.74rem;
  --fs-icon: 36px;
  --fs-icon-sm: 0.85rem;

  /* ── Typography — Weight ─────────────────────────────────────────────── */
  --fw-medium: 500;
  --fw-semibold: 600;

  /* ── Typography — Line Height ────────────────────────────────────────── */
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;
  --lh-double: 2;

  /* ── Typography — Letter Spacing ─────────────────────────────────────── */
  --ls-tight: 0.04em;
  --ls-wide: 0.18em;
  --ls-button: 0.5px;

  /* ── Color — Backgrounds ─────────────────────────────────────────────── */
  --color-bg: oklch(16% 0.012 76);
  --color-bg-darker: oklch(20% 0.013 76);
  --color-panel: oklch(24% 0.014 76);
  --color-band: oklch(28% 0.015 76);
  --color-card-surface: oklch(18% 0.012 76 / 0.93);
  --color-zmey-bg: oklch(16% 0.012 76);

  /* ── Color — Text ────────────────────────────────────────────────────── */
  --color-text: oklch(86% 0.012 78);
  --color-text-strong: oklch(94% 0.01 80);
  --color-text-soft: oklch(78% 0.012 78);
  --color-text-muted: oklch(72% 0.011 78);
  --color-text-muted-utility: oklch(64% 0.01 78);
  --color-text-inverse: oklch(17% 0.012 76);
  --color-text-gray: oklch(58% 0.011 78);
  --color-text-dim: oklch(72% 0.012 78);

  /* ── Color — Borders ─────────────────────────────────────────────────── */
  --color-border-subtle: oklch(74% 0.025 72 / 0.08);
  --color-border-soft: oklch(74% 0.025 72 / 0.12);
  --color-border-medium: oklch(74% 0.025 72 / 0.17);
  --color-border-image: oklch(31% 0.015 76);

  /* ── Color — Card Decorative ─────────────────────────────────────────── */
  --color-card-sheen: oklch(84% 0.015 78 / 0.05);
  --color-card-sheen-faint: oklch(84% 0.015 78 / 0.02);
  --color-card-deep-shadow: oklch(8% 0.01 76 / 0.24);
  --color-card-deep-shadow-hover: oklch(8% 0.01 76 / 0.3);

  /* ── Color — Accents ─────────────────────────────────────────────────── */
  --accent-signature: oklch(76% 0.09 70);
  --accent-semantic: oklch(72% 0.065 48);
  --accent-anomaly: oklch(80% 0.08 88);
  --accent-cool: oklch(64% 0.045 246);
  --accent-cool-soft: oklch(64% 0.045 246 / 0.26);

  /* ── Color — Detection Card Default ────────────────────────────────── */
  --color-layer-accent-default: oklch(86% 0.02 78 / 0.16);

  /* ── Shadows ─────────────────────────────────────────────────────────── */
  --shadow-overlay: 0 8px 20px oklch(9% 0.01 76 / 0.55);
  --shadow-card-hover: 0 12px 36px oklch(9% 0.01 76 / 0.5);
  --shadow-zmey-inset: inset 0 0 24px oklch(8% 0.01 76 / 0.8);
  --shadow-nav-collapse: 0 8px 24px oklch(9% 0.01 76 / 0.45);

  /* ── Transitions ─────────────────────────────────────────────────────── */
  --transition-fast: all 0.2s ease;
  --transition-fade: opacity 0.6s ease-out, transform 0.6s ease-out;
  --transition-lift: transform 0.3s ease, box-shadow 0.3s ease;
  --transition-card-speed: 0.28s ease;

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --max-w-hero: 1000px;
  --max-w-text: 600px;
  --max-w-detection-copy: 31ch;

  /* ── Spacing ─────────────────────────────────────────────────────────── */
  --space-spacer: 40px;
  --space-section: 4rem;
  --space-band: 3rem;

  /* ── Radii ───────────────────────────────────────────────────────────── */
  --radius-card: 24px;
  --radius-card-sm: 20px;
  --radius-pill: 999px;

  /* ── Transforms ──────────────────────────────────────────────────────── */
  --lift-sm: -5px;
  --lift-md: -6px;
  --fade-offset: 20px;

  /* ── Focus ───────────────────────────────────────────────────────────── */
  --focus-ring-size: 0.25rem;

  /* ── Z-index ─────────────────────────────────────────────────────────── */
  --z-dropdown: 1000;

  /* ── Bootstrap Theme Overrides ───────────────────────────────────────── */
  --bs-body-color: var(--color-text);
  --bs-heading-color: var(--color-text-strong);
  --bs-secondary-color: var(--color-text-muted);
  --bs-tertiary-color: var(--color-text-muted-utility);
  --bs-emphasis-color: var(--color-text-strong);
  --bs-body-bg: var(--color-bg);
  --bs-secondary-bg: var(--color-panel);
  --bs-tertiary-bg: var(--color-band);
  --bs-border-color: var(--color-border-soft);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
  font-family: var(--font-family-base);
  color: var(--color-text);
  background-color: var(--color-bg);
}

a {
  color: var(--color-text);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

a:hover {
  color: var(--color-text-strong);
}

h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
}

/* --------------------------------------------------------------------------
   Focus States (WCAG 2.4.7 / 2.4.11)
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--accent-cool);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */

.navbar {
  background-color: var(--color-bg) !important;
}

.nav-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.nav-container .navbar-brand {
  grid-column: 1;
  justify-self: start;
}

.nav-container .navbar-collapse {
  grid-column: 2;
}

.nav-container .nav-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.navbar .nav-link {
  color: var(--color-text-soft);
  position: relative;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus-visible,
.navbar .nav-link.show {
  color: var(--color-text-strong);
}

.navbar .nav-link:focus-visible {
  outline: none;
  box-shadow: inset 0 -1px 0 var(--accent-signature);
}

.navbar .nav-link.dropdown-toggle.show {
  box-shadow: inset 0 -1px 0 var(--accent-signature);
}

.navbar .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.4em;
  vertical-align: 0.2em;
  width: 0.4em;
  height: 0.4em;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
  opacity: 0.7;
  transition: transform 0.2s ease;
}

.navbar .dropdown-toggle.show::after {
  transform: rotate(225deg);
  vertical-align: -0.05em;
}

.navbar .mega-menu {
  --bs-dropdown-bg: var(--color-bg-darker);
  --bs-dropdown-border-color: var(--color-border-soft);
  --bs-dropdown-border-radius: 0;
  --bs-dropdown-padding-x: 0;
  --bs-dropdown-padding-y: 0;
  --bs-dropdown-spacer: 0;
  box-shadow: var(--shadow-nav-collapse);
}

.navbar .mega-menu-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.navbar .mega-menu-intro {
  display: none;
}

.navbar .mega-menu-title {
  margin: 0 0 0.55rem;
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-muted-utility);
}

.navbar .mega-menu-tagline {
  margin: 0;
  max-width: 22ch;
  font-size: 0.88rem;
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
}

.navbar .mega-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}

.navbar .mega-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 0.7rem 0.85rem;
  border-radius: 8px;
  border-inline-start: 2px solid transparent;
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  white-space: normal;
  color: var(--color-text-soft);
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.navbar .mega-link:hover,
.navbar .mega-link:focus-visible {
  background-color: var(--color-band);
  color: var(--color-text-strong);
}

.navbar .mega-link-title {
  color: var(--color-text-strong);
  font-weight: var(--fw-semibold);
  font-size: 0.95rem;
  line-height: var(--lh-snug);
}

.navbar .mega-link-desc {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--color-text-muted-utility);
  line-height: var(--lh-snug);
}

.navbar .mega-link:hover .mega-link-desc,
.navbar .mega-link:focus-visible .mega-link-desc {
  color: var(--color-text-muted);
}

@keyframes mega-menu-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   Layout Utilities
   -------------------------------------------------------------------------- */

.spacer {
  height: var(--space-spacer);
}

/* Keep in-page anchor targets clear of the fixed navbar */
main [id] {
  scroll-margin-top: 5rem;
}

.panel {
  background-color: var(--color-panel);
}

.bg-darker {
  background-color: var(--color-bg-darker);
}

.text-muted {
  color: var(--color-text-muted-utility) !important;
}

.text-secondary {
  color: var(--color-text-muted) !important;
}

.overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.overlay img {
  border: 1px solid var(--color-border-image);
  box-shadow: var(--shadow-overlay);
}

/* Amber-gold monochrome — luminance ramp to stage-card / pill gold */
.img-monochrome {
  filter: url(#img-monochrome);
}

.svg-filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.section-divider {
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--space-section);
}

.border-end-md {
  border-right: 1px solid var(--color-border-subtle);
}

.border-bottom-subtle {
  border-bottom: 1px solid var(--color-border-subtle);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero-content {
  max-width: var(--max-w-hero);
  margin: 0 auto;
}

.hero-product {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.15rem;
  margin-bottom: 1.5rem;
  border: 1px solid
    color-mix(in srgb, var(--accent-signature) 30%, var(--color-border-medium));
  border-radius: var(--radius-pill);
  background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent-signature) 13%, transparent) 0%,
      transparent 80%
    ),
    var(--color-card-surface);
  box-shadow: inset 0 1px 0 var(--color-card-sheen);
  font-family: var(--font-family-brand);
  font-size: var(--fs-card-body);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-product-logo {
  flex: none;
  width: 1.5em;
  height: 1.5em;
  background-color: var(--color-text-soft);
  mask: url("../logo/stihia-logo.svg") center / contain no-repeat;
  -webkit-mask: url("../logo/stihia-logo.svg") center / contain no-repeat;
}

.hero-product .brand-text {
  color: var(--color-text-soft);
}

.hero-product-name {
  margin-left: 0.2rem;
  padding-left: 0.7rem;
  border-left: 1px solid var(--color-border-medium);
  color: var(--accent-signature);
}

/* Service-page counterpart of .hero-product — no brand wordmark font */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 1.1rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-pill);
  background: var(--color-card-surface);
  box-shadow: inset 0 1px 0 var(--color-card-sheen);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.hero-eyebrow-accent {
  padding-left: 0.65rem;
  border-left: 1px solid var(--color-border-medium);
  color: var(--accent-signature);
}

.hero-title {
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  margin-bottom: 1.5rem;
}

.hero-image-bg {
  background-image: url("../../assets/img/albena.webp");
  background-size: cover;
  background-position: center;
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* Hero photo — a cinematic plate rather than a card: no padding, panel,
   or accent chrome (that "bubble" recipe stays on the stage cards).
   Just the photo itself, a moderate radius, and a deep soft shadow,
   with the bottom edge dissolving into the page background so the image
   grounds the hero instead of floating in a frame below it. */
.hero-image-frame {
  position: relative;
  border-radius: var(--radius-card-sm);
  box-shadow: 0 24px 48px var(--color-card-deep-shadow);
  overflow: hidden;
}

.hero-image-frame img {
  display: block;
  width: 100%;
}

/* Portrait source photos would otherwise stretch the frame far taller than the
   text column beside it. Cap the height instead of the aspect ratio: the photo
   scales down whole and the frame shrinks to it, staying centred in its column. */
.hero-image-frame--portrait {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

.hero-image-frame--portrait img {
  width: auto;
  max-width: 100%;
  max-height: 30rem;
}

/* Bottom fade into the page background */
.hero-image-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 45%,
    color-mix(in srgb, var(--color-bg) 55%, transparent) 72%,
    var(--color-bg) 96%
  );
  pointer-events: none;
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hero-facts > li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.95rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-pill);
  background-color: var(--color-card-surface);
  color: var(--color-text-muted);
  font-size: var(--fs-card-body);
}

.hero-facts > li > i {
  color: color-mix(
    in srgb,
    var(--accent-signature) 70%,
    var(--color-text-muted-utility)
  );
  font-size: var(--fs-icon-sm);
}

/* --------------------------------------------------------------------------
   Section Typography
   -------------------------------------------------------------------------- */

.hero-subtitle,
.section-subtitle,
.code-keyword {
  color: var(--color-text-muted);
}

.hero-subtitle,
.section-subtitle,
.cta-description {
  max-width: var(--max-w-text);
}

.hero-subtitle {
  font-size: var(--fs-lead);
  margin: 0 auto;
  line-height: var(--lh-normal);
}

.section-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  margin-bottom: 0.5rem;
}

.section-subtitle {
  font-size: var(--fs-body-lg);
  margin: 0 auto;
}

.cta-description {
  font-size: var(--fs-body);
  margin-inline: auto;
}

.brand-text {
  font-family: var(--font-family-brand);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Section Band
   -------------------------------------------------------------------------- */

.section-band {
  background-color: var(--color-band);
  padding-bottom: var(--space-band);
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
}

.section-band .section-divider {
  border-top: none;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn-primary.rounded-pill,
.btn-outline-light.rounded-pill {
  letter-spacing: var(--ls-button);
  transition: var(--transition-fast);
}

.btn-primary.rounded-pill {
  background-color: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-text-inverse);
  font-weight: var(--fw-semibold);
}

.btn-primary.rounded-pill:hover,
.btn-primary.rounded-pill:focus-visible {
  background-color: var(--color-text-strong);
  border-color: var(--color-text-strong);
  color: var(--color-text-inverse);
  text-decoration: none;
}

.btn-primary.rounded-pill:focus-visible {
  box-shadow: 0 0 0 var(--focus-ring-size) var(--accent-cool-soft);
  outline: none;
}

.btn-outline-light.rounded-pill {
  border-width: 1px;
}

.btn-outline-light.rounded-pill:hover,
.btn-outline-light.rounded-pill:focus-visible {
  color: var(--color-text-inverse);
  background: var(--color-text-strong);
  text-decoration: none;
}

.btn-outline-light.rounded-pill:focus-visible {
  box-shadow: 0 0 0 var(--focus-ring-size) var(--accent-cool-soft);
  outline: none;
}

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

.feature-card {
  border: 1px solid var(--color-border-subtle);
  transition: var(--transition-lift);
}

.feature-card:hover,
.feature-card:focus-within {
  transform: translateY(var(--lift-sm));
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-border-medium);
}

/* --------------------------------------------------------------------------
   Code
   -------------------------------------------------------------------------- */

code {
  font-family: var(--font-family-mono);
  font-size: var(--fs-code);
  color: var(--accent-semantic);
  background: var(--color-card-sheen);
  border: 1px solid var(--color-border-soft);
  border-radius: 6px;
  padding: 0.1rem 0.4rem;
  word-break: break-word;
}

pre code {
  color: inherit;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: inherit;
  word-break: normal;
}

.code-block {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border-medium);
}

.code-block pre {
  color: var(--color-text);
  font-family: var(--font-family-mono);
  font-size: var(--fs-code);
}

/* --------------------------------------------------------------------------
   Hairline List — icon + text rows separated by hairline rules
   -------------------------------------------------------------------------- */

.hairline-list {
  --_gap: 0.75rem;
  --_item-py: 0.7rem;
  --_icon-size: 1.1rem;
  --_icon-offset: 0.22rem;

  list-style: none;
  padding: 0;
  margin: 0;
}

.hairline-list > li {
  display: flex;
  align-items: flex-start;
  gap: var(--_gap);
  padding: var(--_item-py) 0;
  color: var(--color-text-muted);
  font-size: var(--fs-card-body);
  line-height: var(--lh-snug);
  border-bottom: 1px solid var(--color-border-subtle);
}

.hairline-list > li:last-child {
  border-bottom: none;
}

.hairline-list > li > i,
.hairline-list > li > svg {
  width: var(--_icon-size);
  text-align: center;
  flex-shrink: 0;
  margin-top: var(--_icon-offset);
  font-size: var(--fs-icon-sm);
  color: color-mix(
    in srgb,
    var(--accent-signature) 68%,
    var(--color-text-muted-utility)
  );
}

.hairline-list > li strong {
  color: var(--color-text-soft);
  font-weight: var(--fw-medium);
}

/* Muted icon variant for neutral, non-emphasised rows */
.hairline-list-muted > li > i,
.hairline-list-muted > li > svg {
  color: var(--color-text-muted-utility);
}

/* --------------------------------------------------------------------------
   Detection Layer Cards
   -------------------------------------------------------------------------- */

.detection-layer-grid {
  --detection-card-radius: var(--radius-card);
}

.detection-layer-column {
  position: relative;
  display: flex;
}

.detection-layer-card {
  --layer-accent: var(--color-layer-accent-default);

  /* Component-scoped layout tokens (overridden in responsive) */
  --_padding: 1.6rem;
  --_gap: 1.2rem;
  --_radius: var(--detection-card-radius);
  --_meta-gap: 0.75rem;
  --_meta-pb: 0.95rem;
  --_indent: 1rem;
  --_pill-py: 0.35rem;
  --_pill-px: 0.8rem;
  --_pill-min-h: 2rem;
  --_sidebar-inset: 1rem;
  --_sidebar-width: 2px;

  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--_gap);
  padding: var(--_padding);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--_radius);
  background-color: var(--color-card-surface);
  background-image:
    radial-gradient(
      circle at top left,
      color-mix(in srgb, var(--layer-accent) 18%, transparent) 0%,
      transparent 55%
    ),
    linear-gradient(
      180deg,
      var(--color-card-sheen) 0%,
      var(--color-card-sheen-faint) 100%
    );
  box-shadow:
    inset 0 1px 0 var(--color-card-sheen),
    0 18px 40px var(--color-card-deep-shadow);
  overflow: hidden;
  transition:
    transform var(--transition-card-speed),
    border-color var(--transition-card-speed),
    box-shadow var(--transition-card-speed),
    background-color var(--transition-card-speed);
}

.detection-layer-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--layer-accent) 18%,
    transparent 72%
  );
  opacity: 0.9;
}

.detection-layer-card::after {
  content: "";
  position: absolute;
  inset: var(--_sidebar-inset) auto var(--_sidebar-inset) var(--_sidebar-inset);
  width: var(--_sidebar-width);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--layer-accent) 0%, transparent 78%);
  opacity: 0.75;
}

.detection-layer-card:hover,
.detection-layer-card:focus-within {
  transform: translateY(var(--lift-md));
  border-color: color-mix(
    in srgb,
    var(--layer-accent) 40%,
    var(--color-border-soft)
  );
  box-shadow:
    inset 0 1px 0 var(--color-border-subtle),
    0 24px 44px var(--color-card-deep-shadow-hover);
}

.detection-layer-meta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--_meta-gap);
  padding-bottom: var(--_meta-pb);
  border-bottom: 1px solid var(--color-border-soft);
}

.detection-layer-index {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--layer-accent) 72%, var(--color-text-soft));
}

.detection-layer-pill {
  display: inline-flex;
  align-items: center;
  min-height: var(--_pill-min-h);
  padding: var(--_pill-py) var(--_pill-px);
  border: 1px solid
    color-mix(in srgb, var(--layer-accent) 52%, var(--color-border-medium));
  border-radius: var(--radius-pill);
  background: color-mix(
    in srgb,
    var(--layer-accent) 12%,
    var(--color-card-sheen-faint)
  );
  color: color-mix(in srgb, var(--layer-accent) 78%, var(--color-text-soft));
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
}

.detection-layer-title,
.detection-layer-copy {
  position: relative;
  z-index: 1;
  margin: 0;
  padding-left: var(--_indent);
}

.detection-layer-title {
  color: var(--color-text-strong);
  font-size: var(--fs-card-title);
  line-height: var(--lh-snug);
}

.detection-layer-copy {
  color: var(--color-text-dim);
  font-size: var(--fs-card-body);
  line-height: var(--lh-relaxed);
  max-width: var(--max-w-detection-copy);
}

.detection-layer-card-signature {
  --layer-accent: var(--accent-signature);
}
.detection-layer-card-semantic {
  --layer-accent: var(--accent-semantic);
}
.detection-layer-card-anomaly {
  --layer-accent: var(--accent-anomaly);
}

/* --------------------------------------------------------------------------
   Stage Cards — ordered steps in a sequence (workshop stages, engagement flow)
   -------------------------------------------------------------------------- */

.stage-card {
  --stage-accent: var(--color-layer-accent-default);

  --_padding: 1.7rem;
  --_gap: 1.1rem;
  --_radius: var(--radius-card);
  --_numeral-size: 5.5rem;

  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--_gap);
  height: 100%;
  padding: var(--_padding);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--_radius);
  background-color: var(--color-card-surface);
  background-image: linear-gradient(
    180deg,
    var(--color-card-sheen) 0%,
    var(--color-card-sheen-faint) 100%
  );
  box-shadow:
    inset 0 1px 0 var(--color-card-sheen),
    0 18px 40px var(--color-card-deep-shadow);
  overflow: hidden;
  transition:
    transform var(--transition-card-speed),
    border-color var(--transition-card-speed),
    box-shadow var(--transition-card-speed);
}

/* Top hairline in the stage accent */
.stage-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--stage-accent) 0%,
    transparent 68%
  );
  opacity: 0.9;
}

/* Oversized ghost numeral marking the position in the sequence */
.stage-card::after {
  content: attr(data-stage);
  position: absolute;
  top: -0.35em;
  right: 0.15em;
  z-index: 0;
  font-size: var(--_numeral-size);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--stage-accent);
  opacity: 0.09;
  pointer-events: none;
  user-select: none;
}

.stage-card:hover,
.stage-card:focus-within {
  transform: translateY(var(--lift-md));
  border-color: color-mix(
    in srgb,
    var(--stage-accent) 40%,
    var(--color-border-soft)
  );
  box-shadow:
    inset 0 1px 0 var(--color-border-subtle),
    0 24px 44px var(--color-card-deep-shadow-hover);
}

.stage-meta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--color-border-soft);
}

.stage-index {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--stage-accent) 72%, var(--color-text-soft));
}

.stage-pill {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid
    color-mix(in srgb, var(--stage-accent) 52%, var(--color-border-medium));
  border-radius: var(--radius-pill);
  background: color-mix(
    in srgb,
    var(--stage-accent) 12%,
    var(--color-card-sheen-faint)
  );
  color: color-mix(in srgb, var(--stage-accent) 78%, var(--color-text-soft));
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
}

.stage-title,
.stage-copy,
.stage-card > .hairline-list,
.stage-card > .media-placeholder {
  position: relative;
  z-index: 1;
}

.stage-title {
  margin: 0;
  color: var(--color-text-strong);
  font-size: var(--fs-card-title);
  line-height: var(--lh-snug);
}

.stage-copy {
  margin: 0;
  color: var(--color-text-dim);
  font-size: var(--fs-card-body);
  line-height: var(--lh-relaxed);
}

.stage-card-theory {
  --stage-accent: var(--accent-signature);
}
.stage-card-demos {
  --stage-accent: var(--accent-semantic);
}
.stage-card-practice {
  --stage-accent: var(--accent-anomaly);
}
.stage-card-retest {
  --stage-accent: color-mix(
    in srgb,
    var(--accent-signature) 55%,
    var(--accent-anomaly)
  );
}

/* --------------------------------------------------------------------------
   Attack surface cards — icon treatment + panel depth for red-teaming grid
   -------------------------------------------------------------------------- */

.attack-card {
  position: relative;
  border: 1px solid var(--color-border-soft);
  background-color: var(--color-card-surface);
  background-image:
    radial-gradient(
      circle at top left,
      color-mix(in srgb, var(--accent-signature) 10%, transparent) 0%,
      transparent 52%
    ),
    linear-gradient(
      180deg,
      var(--color-card-sheen) 0%,
      var(--color-card-sheen-faint) 100%
    );
  box-shadow:
    inset 0 1px 0 var(--color-card-sheen),
    0 14px 32px var(--color-card-deep-shadow);
  overflow: hidden;
}

.attack-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent-signature) 70%, transparent) 0%,
    transparent 68%
  );
  opacity: 0.85;
}

.attack-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 1rem;
  border-radius: 0.65rem;
  border: 1px solid
    color-mix(in srgb, var(--accent-signature) 28%, var(--color-border-soft));
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--accent-signature) 14%, transparent) 0%,
    transparent 70%
  );
  color: color-mix(
    in srgb,
    var(--accent-signature) 78%,
    var(--color-text-soft)
  );
  font-size: var(--fs-icon-sm);
}

/* --------------------------------------------------------------------------
   Findings report mockup — monochrome document with amber severity tags
   -------------------------------------------------------------------------- */

.findings-report {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-card-sm);
  background-color: var(--color-card-surface);
  background-image: linear-gradient(
    180deg,
    var(--color-card-sheen) 0%,
    var(--color-card-sheen-faint) 100%
  );
  box-shadow:
    inset 0 1px 0 var(--color-card-sheen),
    0 18px 40px var(--color-card-deep-shadow);
  overflow: hidden;
}

.findings-report-chrome {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--color-border-subtle);
  background: color-mix(in srgb, var(--color-panel) 70%, transparent);
}

.findings-report-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-border-medium);
}

.findings-report-dot:first-child {
  background: color-mix(in srgb, var(--accent-semantic) 55%, var(--color-border-medium));
}

.findings-report-label {
  margin-left: 0.55rem;
  font-family: var(--font-family-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-tight);
  color: var(--color-text-muted-utility);
}

.findings-report-header {
  padding: 1.5rem 1.5rem 1.1rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

.findings-report-kicker {
  margin: 0 0 0.4rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: color-mix(
    in srgb,
    var(--accent-signature) 72%,
    var(--color-text-soft)
  );
}

.findings-report-title {
  margin: 0 0 0.35rem;
  font-size: var(--fs-card-title);
  color: var(--color-text-strong);
}

.findings-report-meta {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted-utility);
}

.findings-list {
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
}

.finding-entry {
  padding: 1.15rem 1.5rem;
  border-bottom: 1px solid var(--color-border-subtle);
  /* Severity rail: hairline accent in the entry's severity colour */
  box-shadow: inset 2px 0 0
    color-mix(in srgb, var(--_sev, var(--accent-signature)) 45%, transparent);
}

.finding-entry:last-child {
  border-bottom: none;
}

.finding-top {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.55rem;
}

.finding-sev {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  border: 1px solid
    color-mix(in srgb, var(--_sev, var(--accent-signature)) 45%, var(--color-border-medium));
  background: color-mix(
    in srgb,
    var(--_sev, var(--accent-signature)) 14%,
    transparent
  );
  color: color-mix(
    in srgb,
    var(--_sev, var(--accent-signature)) 82%,
    var(--color-text-soft)
  );
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
}

.finding-entry[data-severity="critical"] {
  --_sev: oklch(68% 0.12 48);
}

.finding-entry[data-severity="high"] {
  --_sev: var(--accent-signature);
}

.finding-entry[data-severity="medium"] {
  --_sev: var(--accent-anomaly);
}

.finding-entry[data-severity="low"] {
  --_sev: var(--color-text-muted-utility);
}

.finding-id {
  font-family: var(--font-family-mono);
  font-size: var(--fs-xs);
  color: var(--color-text-muted-utility);
}

.finding-name {
  margin: 0 0 0.35rem;
  color: var(--color-text-strong);
  font-size: var(--fs-card-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

.finding-impact {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.finding-repro {
  margin: 0.75rem 0 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--color-bg) 80%, transparent);
  overflow-x: auto;
}

.finding-repro code {
  display: block;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-dim);
  font-family: var(--font-family-mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  white-space: pre;
}

/* --------------------------------------------------------------------------
   Handoff flow — connected step diagrams
   (red team → Sense continuous cover, solution journey)
   -------------------------------------------------------------------------- */

.handoff-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0.75rem;
}

/* Three-node variant for the solution journey. Single-class selector on
   purpose: the mobile collapse below must keep winning at equal specificity. */
.handoff-flow-journey {
  grid-template-columns: 1fr auto 1fr auto 1fr;
}

.handoff-node {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.5rem 1.4rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-card-sm);
  background-color: var(--color-card-surface);
  background-image: linear-gradient(
    180deg,
    var(--color-card-sheen) 0%,
    var(--color-card-sheen-faint) 100%
  );
  box-shadow:
    inset 0 1px 0 var(--color-card-sheen),
    0 14px 32px var(--color-card-deep-shadow);
  overflow: hidden;
}

.handoff-node::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--accent-signature) 0%,
    transparent 70%
  );
  opacity: 0.85;
}

.handoff-node-sense {
  border-color: color-mix(
    in srgb,
    var(--accent-cool) 38%,
    var(--color-border-soft)
  );
  background-image:
    radial-gradient(
      circle at top right,
      color-mix(in srgb, var(--accent-cool) 16%, transparent) 0%,
      transparent 55%
    ),
    linear-gradient(
      180deg,
      var(--color-card-sheen) 0%,
      var(--color-card-sheen-faint) 100%
    );
}

.handoff-node-sense::before {
  background: linear-gradient(
    90deg,
    var(--accent-cool) 0%,
    transparent 70%
  );
}

/* Journey node accents — the stage-card colour trio. The first node keeps the
   default signature accent, so only the second and third are overridden. */
.handoff-node-govern::before {
  background: linear-gradient(
    90deg,
    var(--accent-semantic) 0%,
    transparent 70%
  );
}

.handoff-node-sustain::before {
  background: linear-gradient(
    90deg,
    var(--accent-anomaly) 0%,
    transparent 70%
  );
}

.handoff-kicker {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: color-mix(
    in srgb,
    var(--accent-signature) 70%,
    var(--color-text-soft)
  );
}

.handoff-node-sense .handoff-kicker {
  color: oklch(72% 0.055 246);
}

.handoff-node-govern .handoff-kicker {
  color: color-mix(
    in srgb,
    var(--accent-semantic) 70%,
    var(--color-text-soft)
  );
}

.handoff-node-sustain .handoff-kicker {
  color: color-mix(
    in srgb,
    var(--accent-anomaly) 70%,
    var(--color-text-soft)
  );
}

.handoff-title {
  margin: 0;
  font-size: var(--fs-card-title);
  color: var(--color-text-strong);
  line-height: var(--lh-snug);
}

.handoff-copy {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-card-body);
  line-height: var(--lh-normal);
}

.handoff-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 3.5rem;
  padding: 0 0.25rem;
}

.handoff-connector-line {
  width: 1px;
  flex: 1 1 auto;
  min-height: 1.25rem;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--accent-signature) 55%, transparent) 50%,
    transparent 100%
  );
}

.handoff-connector-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: color-mix(
    in srgb,
    var(--accent-signature) 75%,
    var(--color-text-soft)
  );
}

/* The journey runs three nodes wide, so it needs the room a two-node flow does
   not: below lg the step kickers start wrapping. Collapse it a breakpoint
   earlier than the two-node flow below. */
@media (max-width: 991.98px) {
  .handoff-flow-journey {
    grid-template-columns: 1fr;
  }

  .handoff-flow-journey .handoff-connector {
    flex-direction: row;
    min-width: 0;
    padding: 0.15rem 0;
  }

  .handoff-flow-journey .handoff-connector-line {
    width: auto;
    height: 1px;
    min-height: 0;
    flex: 1 1 auto;
    background: linear-gradient(
      90deg,
      transparent 0%,
      color-mix(in srgb, var(--accent-signature) 55%, transparent) 50%,
      transparent 100%
    );
  }
}

@media (max-width: 767.98px) {
  .handoff-flow {
    grid-template-columns: 1fr;
  }

  .handoff-connector {
    flex-direction: row;
    min-width: 0;
    padding: 0.15rem 0;
  }

  .handoff-connector-line {
    width: auto;
    height: 1px;
    min-height: 0;
    flex: 1 1 auto;
    background: linear-gradient(
      90deg,
      transparent 0%,
      color-mix(in srgb, var(--accent-signature) 55%, transparent) 50%,
      transparent 100%
    );
  }
}

/* Frame around an image placed inside a stage-card */
.stage-card-frame {
  position: relative;
  margin-top: auto;
  padding: 0.75rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--_radius, var(--radius-card));
  background-color: var(--color-panel);
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--stage-accent) 6%, var(--color-panel)) 0%,
    var(--color-panel) 100%
  );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--stage-accent) 12%, transparent),
    0 10px 24px var(--color-card-deep-shadow);
  overflow: hidden;
}

/* Top hairline in the stage accent, mirroring the stage-card detail */
.stage-card-frame::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--stage-accent) 0%,
    transparent 68%
  );
  opacity: 0.9;
}

.stage-card-frame img {
  display: block;
  width: 100%;
  border-radius: var(--_radius, var(--radius-card));
}

/* Standalone ordinal label for lighter step lists */
.step-index {
  display: block;
  margin-bottom: 0.7rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: color-mix(
    in srgb,
    var(--accent-signature) 76%,
    var(--color-text-soft)
  );
}

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

.pricing-card {
  display: flex;
  flex-direction: column;
  padding: 2.5rem;
}

.pricing-card-business {
  border-top: 2px solid var(--accent-signature);
  background-image: radial-gradient(
    circle at top,
    color-mix(in srgb, var(--accent-signature) 12%, transparent) 0%,
    transparent 70%
  );
}

.pricing-title {
  font-size: var(--fs-card-title);
  color: var(--color-text-strong);
  margin-bottom: 0.5rem;
}

.pricing-price {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-family: var(--font-family-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--color-text-strong);
  margin-bottom: 0.25rem;
}

.pricing-period {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}

.pricing-subtitle {
  font-size: var(--fs-card-body);
  color: var(--color-text-muted);
}

.pricing-features {
  margin: 0;
  padding: 0;
}

.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
  color: var(--color-text-muted);
  font-size: var(--fs-card-body);
}

.pricing-features li:last-child {
  margin-bottom: 0;
}

.pricing-features i {
  color: var(--accent-signature);
  font-size: var(--fs-icon-sm);
  margin-top: 0.25rem;
}

/* --------------------------------------------------------------------------
   Media Placeholder
   Temporary stand-in describing artwork that is not produced yet.
   Replace the whole element with the real <img> when assets land.
   -------------------------------------------------------------------------- */

/* Sized with min-height rather than aspect-ratio so the description text can
   never overflow the box in a narrow column. Intended ratio is stated in the
   meta line and applies to the real asset. */
.media-placeholder {
  --_min-h: 15rem;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: var(--_min-h);
  padding: 1.6rem 1.4rem;
  text-align: center;
  border: 1px dashed
    color-mix(in srgb, var(--accent-signature) 32%, var(--color-border-medium));
  border-radius: var(--radius-card-sm);
  background-color: var(--color-bg-darker);
  background-image: repeating-linear-gradient(
    135deg,
    var(--color-card-sheen-faint) 0 10px,
    transparent 10px 20px
  );
}

.media-placeholder-wide {
  --_min-h: 22rem;
}
.media-placeholder-4x3 {
  --_min-h: 17rem;
}
.media-placeholder-square {
  --_min-h: 15rem;
}
.media-placeholder-auto {
  --_min-h: 8rem;
}

/* Practice section media grid — true aspect ratios. The ratio yields to
   content if a placeholder's description text needs more room, so the
   boxes never clip their copy. */
#practice .media-placeholder-4x3 {
  min-height: 0;
  aspect-ratio: 4 / 3;
}
#practice .media-placeholder-square {
  min-height: 0;
  aspect-ratio: 1 / 1;
}

/* Zmey logo tile — square geometry to match the medal placeholder beside
   it, framed like the Zmey product shot. */
#practice .practice-logo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-card-sm);
}

.media-placeholder-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: color-mix(
    in srgb,
    var(--accent-signature) 78%,
    var(--color-text-soft)
  );
}

.media-placeholder-text {
  margin: 0;
  max-width: 54ch;
  font-size: var(--fs-card-body);
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
}

.media-placeholder-meta {
  margin: 0;
  font-family: var(--font-family-mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--color-text-muted-utility);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */

.testimonial {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}

.testimonial-mark {
  font-size: 1.4rem;
  color: var(--accent-signature);
  opacity: 0.85;
}

.testimonial-quote {
  margin: 0;
  font-size: var(--fs-card-body);
  line-height: var(--lh-normal);
  color: var(--color-text);
}

.testimonial-author {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border-subtle);
}

.testimonial-name {
  font-weight: var(--fw-medium);
  color: var(--color-text);
}

.testimonial-role {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   FAQ Disclosures
   -------------------------------------------------------------------------- */

.faq-list {
  border-top: 1px solid var(--color-border-subtle);
}

.faq-item {
  border-bottom: 1px solid var(--color-border-subtle);
}

.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding: 1rem 0;
  cursor: pointer;
  list-style: none;
  color: var(--color-text-strong);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.faq-item > summary::-webkit-details-marker {
  display: none;
}

.faq-item > summary::after {
  content: "";
  flex: none;
  width: 0.45em;
  height: 0.45em;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
  opacity: 0.6;
  transition: transform 0.2s ease;
}

.faq-item[open] > summary::after {
  transform: rotate(225deg);
}

.faq-answer {
  margin: 0;
  padding: 0 0 1.3rem;
  max-width: 72ch;
  color: var(--color-text-muted);
  font-size: var(--fs-card-body);
  line-height: var(--lh-relaxed);
}

/* --------------------------------------------------------------------------
   Animations
   -------------------------------------------------------------------------- */

/* Default: visible, non-animated state (works without JS) */
.fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* JS-enabled: apply hidden/animated state only when a JS hook is present */
.js-enabled .fade-in {
  opacity: 0;
  transform: translateY(var(--fade-offset));
  transition: var(--transition-fade);
}

.js-enabled .fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

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

.team-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--color-panel);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: var(--transition-lift);
}

.team-card:hover,
.team-card:focus-within {
  transform: translateY(var(--lift-sm));
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-border-medium);
}

.team-photo-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.team-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.team-card:hover .team-photo {
  transform: scale(1.05);
}

.team-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--color-panel) 0%, transparent 35%);
  pointer-events: none;
}

.team-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0.75rem 1rem;
  z-index: 2;
  text-align: left;
}

.team-name {
  font-size: var(--fs-card-title);
  font-weight: var(--fw-semibold);
  color: var(--color-text-strong);
  margin-bottom: 0.25rem;
}

.team-role {
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-bottom: 0;
}

.team-socials {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.25rem 1rem;
  background-color: var(--color-panel);
  border-top: 1px solid var(--color-border-subtle);
  position: relative;
  z-index: 3;
}

.team-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-soft);
  color: var(--color-text-gray);
  font-size: 1rem;
  transition: var(--transition-fast);
}

.team-social-link:hover,
.team-social-link:focus-visible {
  color: var(--color-text-strong);
  border-color: var(--color-border-medium);
  background-color: var(--color-bg-darker);
}

/* Headshot-scale portrait for presenter/author bios, where the person is a
   credibility signal rather than the subject of the section. Square because the
   team source assets are square; height is pinned so the intrinsic height
   attribute cannot win over aspect-ratio. */
.presenter-photo {
  flex: none;
  width: 112px;
  height: 112px;
  object-fit: cover;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-card-sm);
}

/* --------------------------------------------------------------------------
   Zmey & Misc
   -------------------------------------------------------------------------- */

.zmey-image {
  background-color: var(--color-zmey-bg);
  box-shadow: var(--shadow-zmey-inset);
}

.list-spaced {
  line-height: var(--lh-double);
}

.social-icon {
  font-size: var(--fs-icon);
  color: var(--color-text-gray);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer-redesign {
  margin-top: var(--space-section);
}

.footer-brand .brand-text {
  color: var(--color-text-strong);
}

.footer-desc {
  max-width: 320px;
  font-size: var(--fs-card-body);
  line-height: var(--lh-relaxed);
}

.footer-heading {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-text-strong);
  margin-bottom: 1.2rem;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.footer-links a {
  color: var(--color-text-muted);
  font-size: var(--fs-card-body);
  font-weight: var(--fw-medium);
  transition: var(--transition-fast);
  padding: 0.25rem 0;
  justify-content: flex-start;
  overflow-wrap: break-word;
  line-height: var(--lh-snug);
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--color-text-strong);
}

.footer-socials {
  display: flex;
  gap: 1rem;
}

.footer-socials .social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background-color: var(--color-bg-darker);
  border: 1px solid var(--color-border-soft);
  color: var(--color-text-gray);
  font-size: 1.2rem;
  transition: var(--transition-fast);
}

.footer-socials .social-link:hover,
.footer-socials .social-link:focus-visible {
  color: var(--color-text-strong);
  border-color: var(--color-border-medium);
  background-color: var(--color-panel);
}

/* --------------------------------------------------------------------------
   Touch Target Sizing (WCAG 2.5.8)
   -------------------------------------------------------------------------- */

.navbar-toggler {
  min-width: 44px;
  min-height: 44px;
}

footer a {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
  .nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .nav-container .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-dropdown);
    background: var(--color-bg);
    padding: 0.75rem 0 1rem;
    border-bottom: 1px solid var(--color-border-soft);
    box-shadow: var(--shadow-nav-collapse);
  }

  .nav-container .navbar-collapse .navbar-nav {
    padding-inline: var(--bs-gutter-x, 0.75rem);
  }

  .nav-container .navbar-collapse .nav-item {
    width: 100%;
  }

  .nav-container .navbar-collapse .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding-block: 0.65rem;
  }

  .nav-container .navbar-collapse .mega-menu {
    position: static;
    float: none;
    width: 100%;
    margin: 0 0 0.5rem;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  .nav-container .navbar-collapse .mega-menu-inner {
    padding-left: 0;
    padding-right: 0;
    max-width: none;
  }

  .nav-container .navbar-collapse .mega-menu-intro {
    display: none;
  }

  .nav-container .navbar-collapse .mega-menu-list {
    border-inline-start: 1px solid var(--color-border-soft);
    margin-inline-start: 0.35rem;
    padding-inline-start: 0.65rem;
  }

  .nav-container .navbar-collapse .mega-link {
    min-height: 44px;
    justify-content: center;
    padding: 0.55rem 0.65rem;
  }

  .nav-container .btn-nav-cta {
    font-size: 0.7rem;
    padding: 0.35rem 0.75rem;
  }
}

@media (min-width: 992px) {
  .nav-container .navbar-toggler {
    display: none;
  }

  .navbar .nav-item.dropdown {
    position: static;
  }

  .navbar .mega-menu {
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    margin-top: 0;
    padding: 1.75rem 0 2rem;
    border-radius: 0;
    border: none;
    border-block: 1px solid var(--color-border-soft);
    background: var(--color-bg-darker);
  }

  .navbar .mega-menu.show {
    animation: mega-menu-in 0.2s ease-out;
  }

  .navbar .mega-menu-inner {
    --mega-cols: 3;
    grid-template-columns: minmax(12rem, 1fr) 3.5fr;
    gap: 1.75rem;
    align-items: stretch;
  }

  .navbar .mega-menu-intro {
    display: block;
    padding-block: 0.35rem;
    padding-inline-end: 0.5rem;
  }

  .navbar .mega-menu-list {
    grid-template-columns: repeat(var(--mega-cols), minmax(0, 1fr));
    gap: 0.2rem;
    padding: 0.55rem;
    border-inline-start: none;
    border-radius: 12px;
    background: var(--color-panel);
  }

  .navbar .mega-link:hover,
  .navbar .mega-link:focus-visible {
    background-color: var(--color-band);
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar .mega-menu-inner {
    --mega-cols: 2;
  }
}

@media (max-width: 767.98px) {
  .border-end-md {
    border-right: none;
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .detection-layer-card {
    --_padding: 1.35rem;
    --_radius: var(--radius-card-sm);
    --_indent: 0.85rem;
  }

  .detection-layer-meta {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .detection-layer-pill {
    white-space: normal;
  }

  .stage-card {
    --_padding: 1.35rem;
    --_radius: var(--radius-card-sm);
    --_numeral-size: 4.5rem;
  }

  .stage-meta {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .stage-pill {
    white-space: normal;
  }
}

@media (max-width: 400px) {
  .nav-container .btn-nav-cta {
    font-size: 0.65rem;
    padding: 0.3rem 0.6rem;
  }
}

/* --------------------------------------------------------------------------
   Visual Placeholder — dashed frame for described-but-unproduced imagery
   -------------------------------------------------------------------------- */

.visual-placeholder {
  border: 1px dashed color-mix(in srgb, var(--color-border-medium) 60%, transparent);
  border-radius: 0.5rem;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
}

.visual-placeholder-copy {
  color: var(--color-text-muted, var(--bs-secondary-color));
  font-style: italic;
  max-width: 56ch;
  font-size: 0.95rem;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .detection-layer-card,
  .stage-card {
    transition: none;
  }

  .detection-layer-card:hover,
  .stage-card:hover {
    transform: none;
  }

  .faq-item > summary::after {
    transition: none;
  }

  .navbar .dropdown-toggle::after,
  .navbar .dropdown-toggle.show::after {
    transition: none;
  }

  .navbar .mega-menu.show {
    animation: none;
  }

  .fade-in,
  .js-enabled .fade-in,
  .js-enabled .fade-in.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: none !important;
  }
}