/* home-v31.css — the homepage in the look of Ido Peretz's v31 site (Ofir, 2026-10-22).
   Loaded by index.html ONLY, and every rule is scoped to main.v31 or .v-footer, so no
   other page changes. Sizes come from site.css's φ tokens (--s-*, --fs-*, --lh-*) like
   everything else on this site; the spacing and type locks scan this file too.
   v31 itself is light-only; the header keeps the theme toggle, so the palette below is
   written for BOTH themes. Navy bands (hero, applications, closing, footer) are navy in
   both, the same way the cast bar is dark in both. */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-var-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --v-navy: #102333;
  --v-navy-2: #0c1c2a;
  --v-navy-card: #0d2330;
  --v-on-navy: #f5f9fa;
  --v-on-navy-muted: #b4c8d0;
  --v-navy-line: #2a4352;
  --v-mint: #91ebd2;
  --v-on-mint: #123735;
  --v-paper: #ffffff;
  --v-tint: #edf5f2;
  --v-mist: #f3f6f8;
  --v-card: #f7faf9;
  --v-ink: #152f3b;
  --v-muted: #4f6570;
  --v-accent: #12676c;
  --v-line: #d9e4e7;
  --v-chip: #eef7f4;
  --v-chip-line: #c8ded8;
  --v-tab-on: #e6f4ee;
  --v-shadow: 0 24px 60px -36px rgb(23 62 76 / 0.38);
}
:root[data-theme="dark"] {
  --v-paper: #0b1620;
  --v-tint: #0e1f28;
  --v-mist: #0d1b26;
  --v-card: #10202c;
  --v-ink: #e8f2f4;
  --v-muted: #9db3bc;
  --v-accent: #91ebd2;
  --v-line: #1e3340;
  --v-chip: #13283a;
  --v-chip-line: #24414f;
  --v-tab-on: #123040;
  --v-shadow: 0 24px 60px -36px rgb(0 0 0 / 0.7);
}

/* ---- base ---------------------------------------------------------------- */
main.v31, .v-footer {
  font-family: "Manrope", "DM Sans", system-ui, sans-serif;
  color: var(--v-ink);
}
main.v31 { background: var(--v-paper); }
.v-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.v31 .i, .v-footer .i {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.v31 .i-sm { width: 0.9em; height: 0.9em; }
.v31 .i-lg { width: 1.4em; height: 1.4em; }
.v-wrap { width: min(1360px, 90%); margin-inline: auto; }
.v31 em { font-style: normal; color: var(--v-accent); }
.v31 h2 {
  font-size: clamp(var(--fs-h1), 3.6vw, var(--fs-display));
  line-height: var(--lh-display);
  font-weight: 500; letter-spacing: -0.035em;
  margin: var(--s-xs) 0 0;
  max-width: 18ch;
}
.v31 .v-h-xl { font-size: clamp(var(--fs-h1), 4.4vw, var(--fs-display)); }
.v31 p { line-height: var(--lh-body); }

/* The banding rule in site.css stripes main's children; v31 colours every band itself. */
main.pitch.v31 > .v-section, main.pitch.v31 > header.hero { background: var(--v-paper); }
.v-section { padding-block: var(--s-xl); scroll-margin-top: 4rem; }

.v-eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2xs);
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  font-family: inherit; color: var(--v-accent); margin: 0;
}
.v-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--v-mint); }
.v-product {
  display: inline-flex; align-items: center; gap: var(--s-xs);
  font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.02em;
  color: var(--v-accent); margin: 0;
}
.v-intro {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--s-s) 7%; align-items: end; margin-bottom: var(--s-l);
}
.v-intro > p, .v-intro > div > p:not(.v-eyebrow):not(.v-product) {
  color: var(--v-muted); font-size: var(--fs-body); margin: 0; max-width: 34ch;
}
.v-center-head { text-align: center; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; margin-bottom: var(--s-l); }
.v-center-head h2 { margin-inline: auto; }
.v-center-head > p:not(.v-eyebrow) { color: var(--v-muted); max-width: 52ch; margin: var(--s-s) 0 0; }

.v-btn {
  display: inline-flex; align-items: center; gap: var(--s-s);
  padding: var(--s-xs) var(--s-s); border-radius: 6px;
  background: var(--v-mint); color: var(--v-on-mint);
  font-weight: 600; font-size: var(--fs-xs); text-decoration: none;
  transition: transform var(--t-hover) var(--e-hover), box-shadow var(--t-hover) var(--e-hover);
}
.v-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgb(145 235 210 / 0.7); }
.v-link {
  display: inline-flex; align-items: center; gap: var(--s-2xs);
  color: var(--v-accent); font-weight: 600; font-size: var(--fs-xs); text-decoration: none;
  margin-top: var(--s-s);
}
.v-link .i { transition: transform var(--t-hover) var(--e-hover); }
.v-link:hover .i { transform: translate(3px, -1px); }

/* ---- expand chip (site.css .shot-expand, re-dressed) ---------------------- */
.v31 .shot-expand { right: var(--s-2xs); bottom: var(--s-2xs); }
.v31 .shot-expand-box {
  background: rgb(16 35 51 / 0.92); color: #fff;
  border-color: rgb(190 216 220 / 0.5); opacity: 0.92;
}

/* ---- hero ---------------------------------------------------------------- */
main.pitch.v31 > header.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(ellipse at 85% 18%, rgb(35 117 114 / 0.22), transparent 56%),
              linear-gradient(120deg, #132637, #0b2030);
  color: var(--v-on-navy);
  padding-block: var(--s-l) var(--s-xl);
}
.v-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: var(--s-l) 5%; align-items: center;
}
.v-hero-intro .v-eyebrow { color: var(--v-mint); }
.v-hero-intro h1 {
  font-size: clamp(var(--fs-h1), 4vw, var(--fs-display));
  line-height: var(--lh-display); font-weight: 500; letter-spacing: -0.035em;
  margin: var(--s-s) 0; max-width: 13ch; color: var(--v-on-navy);
}
.v-hero-intro h1 em { color: var(--v-mint); display: block; }
.v-hero-lede { color: var(--v-on-navy-muted); font-size: var(--fs-body); max-width: 40ch; margin: 0; }
.v-roles { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: var(--s-s); border-top: 1px solid var(--v-navy-line); }
.v-roles a {
  display: flex; align-items: center; gap: var(--s-xs);
  padding: var(--s-xs) 0; border-bottom: 1px solid var(--v-navy-line);
  color: var(--v-on-navy); text-decoration: none;
}
.v-roles a > .i:first-child { color: var(--v-mint); width: 1.3em; height: 1.3em; }
.v-roles a > span { flex: 1; }
.v-roles strong { display: block; font-size: var(--fs-body); font-weight: 650; }
.v-roles strong + span { display: block; color: var(--v-on-navy-muted); font-size: var(--fs-xs); }
.v-roles a > .i:last-child { color: var(--v-on-navy-muted); transition: transform var(--t-hover) var(--e-hover); }
.v-roles a:hover > .i:last-child { transform: translate(3px, -3px); color: var(--v-mint); }
.v-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-s); margin-top: var(--s-m); }
.v-actions .v-link { color: #d6e7ec; margin: 0; }

.v31 .v-stage {
  border: 1px solid rgb(107 166 173 / 0.25); border-radius: 17px;
  background: rgb(12 28 42 / 0.85); box-shadow: 0 30px 80px -40px rgb(0 0 0 / 0.6);
  overflow: hidden;
}
.v31 .v-stage .tools { margin: 0; display: grid; grid-template-columns: 1fr; }
.v31 .v-stage .tool-panel {
  grid-area: 1 / 1; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  grid-template-columns: none; gap: 0; padding: 0; margin: 0;
}
.v31 .v-stage .tool-tabs {
  grid-row: 2; margin: 0; padding: 0 var(--s-s) var(--s-s); gap: var(--s-s);
}
.v-stage-top {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-s); border-bottom: 1px solid rgb(118 155 169 / 0.12);
}
.v-stage-name { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.02em; color: #eff8fa; }
.v-stage-count { font-size: var(--fs-2xs); letter-spacing: 0.08em; color: #8fadb8; }
.v31 .v-stage .tool-media {
  aspect-ratio: 3 / 2; border: 0; border-radius: 0; background: #0c0f14;
}
.v31 .v-stage .tool-media img, .v31 .v-stage .tool-media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.v31 .tool-panel.is-active .tool-media img { animation: v-arrive 550ms var(--e-reveal) both; }
@keyframes v-arrive { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: none; } }
.v-vr-label {
  position: absolute; left: var(--s-s); top: var(--s-s);
  display: inline-flex; align-items: center; gap: var(--s-2xs);
  padding: var(--s-3xs) var(--s-xs); border-radius: 999px;
  background: rgb(16 35 51 / 0.8); color: #fff; font-size: var(--fs-2xs);
}
.v-stage-caption {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-s);
  padding: var(--s-s);
}
.v-stage-caption strong { font-size: var(--fs-body); font-weight: 500; color: #e7f6f7; }
.v-stage-caption a {
  display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; width: 44px; height: 44px; flex: none;
  border: 1px solid rgb(122 181 180 / 0.32); border-radius: 50%; color: var(--v-mint);
  transition: background var(--t-hover) var(--e-hover);
}
.v-stage-caption a:hover { background: rgb(145 235 210 / 0.12); }
.v31 .v-stage .tool-tab { --tool-dwell: 9s; color: #9eb9c4; font-size: var(--fs-2xs); gap: var(--s-3xs); }
.v31 .v-stage .tool-tab[aria-selected="true"] { color: #c5f9e9; }
.v-tab-num { color: #8dabb8; letter-spacing: 0.06em; }
.v31 .v-stage .tool-tab-track { height: 2px; background: rgb(66 96 113 / 0.55); margin-top: var(--s-2xs); }
.v31 .v-stage .tool-tab-track i { background: var(--v-mint); }

/* ---- platform -------------------------------------------------------------- */
.v-equation { display: flex; align-items: center; gap: var(--s-m); margin: var(--s-s) 0 0; flex-wrap: wrap; }
.v-equation > span { display: inline-flex; align-items: center; gap: var(--s-xs); }
.v-equation strong { font-size: var(--fs-xs); font-weight: 600; max-width: 10ch; line-height: var(--lh-heading); }
.v-equation img { width: 2.2em; height: auto; }
:root[data-theme="dark"] .v-equation img { filter: brightness(0) invert(1); }
.v-plus { font-size: var(--fs-h2); font-weight: 300; color: var(--v-muted); }
.v-figure { margin: 0; border-radius: 16px; border: 1px solid var(--v-line); box-shadow: var(--v-shadow); }
.v-figure img { display: block; width: 100%; height: auto; }

/* ---- why ------------------------------------------------------------------- */
main.pitch.v31 > .v-why { background: var(--v-tint); border-block: 1px solid var(--v-line); }
.v-why-grid {
  display: grid; grid-template-columns: minmax(0, 0.66fr) minmax(0, 1fr);
  gap: var(--s-l) 6%; align-items: start; margin-top: var(--s-l);
}
.v-lede { color: var(--v-muted); font-size: var(--fs-body); max-width: 30ch; margin: 0; }
.v-points { list-style: none; padding: 0; margin: var(--s-m) 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-s); }
.v-points li { display: flex; align-items: center; gap: var(--s-xs); font-size: var(--fs-body); color: var(--v-ink); }
.v-points .i { color: var(--v-accent); width: 1.3em; height: 1.3em; }
.v-photo { margin: 0; border-radius: 16px; overflow: hidden; background: var(--v-navy); box-shadow: var(--v-shadow); }
.v-photo img { display: block; width: 100%; height: auto; }
.v-photo figcaption { color: #fff; font-size: var(--fs-body); padding: var(--s-s); }

/* ---- studio ---------------------------------------------------------------- */
.v-workspace {
  border: 1px solid var(--v-line); border-radius: 12px; overflow: hidden;
  background: var(--v-card); box-shadow: var(--v-shadow);
}
.v-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--v-line); background: var(--v-paper); }
.v-step {
  appearance: none; border: 0; background: none; cursor: pointer; font: inherit;
  display: flex; align-items: center; gap: var(--s-xs);
  padding: var(--s-s); color: var(--v-muted); font-size: var(--fs-xs);
  border-right: 1px solid var(--v-line);
  transition: background var(--t-hover) var(--e-hover), color var(--t-hover) var(--e-hover);
}
.v-step:last-child { border-right: 0; }
.v-step small { margin-left: auto; font-size: var(--fs-2xs); opacity: 0.7; }
.v-step:hover { color: var(--v-ink); }
.v-step[aria-selected="true"] { background: var(--v-tab-on); color: var(--v-accent); box-shadow: inset 0 -3px 0 var(--v-accent); }
.v-step-panel { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.v-step-panel[hidden] { display: none; }
.v-film { background: var(--v-navy); color: var(--v-on-navy); min-width: 0; }
.v-film-label {
  display: flex; justify-content: space-between; gap: var(--s-s); margin: 0;
  padding: var(--s-xs) var(--s-s); font-size: var(--fs-2xs); letter-spacing: 0.02em;
  color: #b5cfd5; border-bottom: 1px solid rgb(119 153 161 / 0.2);
}
.v31 .v-film-media { border: 0; border-radius: 0; background: var(--v-navy-2); }
.v31 .v-film-media img, .v31 .v-film-media video { display: block; width: 100%; height: auto; }
.v31 .v-film-light { background: #fff; padding: var(--s-s); }
.v-step-copy { padding: var(--s-m); }
.v-step-copy h3 { font-size: var(--fs-h2); line-height: var(--lh-heading); font-weight: 500; letter-spacing: -0.03em; margin: 0 0 var(--s-xs); }
.v-step-copy p { color: var(--v-muted); font-size: var(--fs-xs); margin: 0; }
.v-chips-label { margin-top: var(--s-m) !important; font-weight: 600; color: var(--v-ink) !important; }
.v-chips, .v-list { list-style: none; padding: 0; margin: var(--s-xs) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-2xs); }
.v-chips li {
  font-size: var(--fs-2xs); color: var(--v-accent); background: var(--v-chip);
  border: 1px solid var(--v-chip-line); border-radius: 5px; padding: var(--s-3xs) var(--s-xs);
}
.v-list { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: var(--s-s); }
.v-list li { display: flex; align-items: center; gap: var(--s-xs); font-size: var(--fs-xs); }
.v-list .i, .v-callout > .i { color: var(--v-accent); }
.v-callout {
  display: flex; gap: var(--s-xs); margin-top: var(--s-s); padding: var(--s-s);
  border: 1px solid var(--v-chip-line); border-radius: 10px; background: var(--v-chip);
}
.v-callout h4 { margin: 0 0 var(--s-4xs); font-size: var(--fs-xs); }
.v-guide { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: var(--s-xs); padding: var(--s-xs); }
.v-guide figure { margin: 0; min-width: 0; }
.v-guide figcaption { font-size: var(--fs-2xs); color: #b5cfd5; margin-bottom: var(--s-3xs); }
.v-guide img { display: block; width: 100%; height: auto; border-radius: 6px; }
.v-story {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-s);
  margin: var(--s-m) 0 0; color: var(--v-accent); font-size: var(--fs-xs); font-weight: 600;
}

/* ---- hub ------------------------------------------------------------------- */
main.pitch.v31 > .v-hub { background: var(--v-mist); border-block: 1px solid var(--v-line); }
.v-hub-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-m); align-items: stretch; }
.v-map {
  border-radius: 16px; padding: var(--s-m); color: #f5fbfa;
  background: radial-gradient(at 50% 0, #214c58, transparent 65%), var(--v-navy-card);
  border: 1px solid rgb(128 185 181 / 0.17);
}
.v-map-core { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: var(--s-4xs); }
.v-map-core img { width: 2.6em; height: auto; filter: brightness(0) invert(1); }
.v-map-core strong { font-size: var(--fs-h3); font-weight: 550; }
.v-map-core span { color: #c6dbe0; font-size: var(--fs-xs); }
.v-map-areas { list-style: none; padding: 0; margin: var(--s-m) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-xs); }
.v-map-areas li {
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: var(--s-3xs);
  padding: var(--s-s) var(--s-xs); border-radius: 10px;
  border: 1px solid rgb(141 212 200 / 0.23); background: rgb(255 255 255 / 0.03);
  transition: transform var(--t-hover) var(--e-hover), border-color var(--t-hover) var(--e-hover);
}
.v-map-areas li:hover { transform: translateY(-3px); border-color: rgb(145 235 210 / 0.5); }
.v-map-areas .i { color: var(--v-mint); }
.v-map-areas strong { font-size: var(--fs-body); font-weight: 500; }
.v-map-areas span { font-size: var(--fs-2xs); color: #c6dbe0; }
.v-map-ai {
  display: flex; align-items: center; gap: var(--s-xs); margin: var(--s-m) 0 0;
  padding-top: var(--s-s); border-top: 1px solid rgb(166 228 213 / 0.18);
  color: #cde6e4; font-size: var(--fs-xs);
}
.v-map-ai .i { color: var(--v-mint); }
.v-hub-grid .v-film { border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.v-hub-grid .v-film-media { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; }
.v-hardware {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-s) var(--s-m);
  margin-top: var(--s-m); padding-top: var(--s-s); border-top: 1px solid var(--v-line);
  color: var(--v-muted); font-size: var(--fs-xs);
}
.v-hardware p { display: flex; gap: var(--s-m); margin: 0; }
.v-hardware strong { font-size: var(--fs-body); font-weight: 600; letter-spacing: -0.02em; color: var(--v-ink); }
.v-hardware .v-link { margin: 0 0 0 auto; }
.v-note { color: var(--v-muted); font-size: var(--fs-2xs); margin: var(--s-xs) 0 0; }

/* ---- applications (navy) ---------------------------------------------------- */
main.pitch.v31 > .v-applications { background: var(--v-navy); color: var(--v-on-navy); }
.v-applications em, .v-applications .v-eyebrow { color: var(--v-mint); }
.v-applications .v-intro > p { color: var(--v-on-navy-muted); }
.v-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-m) var(--s-m); }
.v-gallery article { min-width: 0; }
.v31 .v-gallery-media { aspect-ratio: 16 / 10; border: 0; border-radius: 12px; background: var(--v-navy-2); }
.v-gallery-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--e-reveal); }
.v-gallery article:hover .v-gallery-media img { transform: scale(1.035); }
.v-gallery h3 { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.02em; margin: var(--s-s) 0 0; color: #fff; }
.v-gallery p { color: #c4d7df; font-size: var(--fs-xs); margin: var(--s-4xs) 0 0; }

/* ---- customer story ----------------------------------------------------------- */
.v-story-section .v-product { color: var(--v-accent); border-left: 3px solid var(--v-accent); padding-left: var(--s-xs); }
.v-quote {
  margin: 0; display: grid; grid-template-columns: minmax(0, 0.35fr) minmax(0, 1fr); gap: var(--s-l);
  padding: var(--s-l); border-radius: 13px; color: #fff;
  background: radial-gradient(at 0 0, #2d5b5d, transparent 65%), #102d3a;
  border: 1px solid rgb(165 206 202 / 0.26);
}
.v-quote-org { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--s-xs); font-size: var(--fs-xs); color: #d7e8ec; }
.v-quote-logo { background: #fff; border-radius: 8px; padding: var(--s-xs); width: max-content; max-width: 100%; }
.v-quote-logo img { display: block; height: 3.2em; width: auto; }
.v-quote blockquote { margin: 0; }
.v-quote blockquote p { font-size: var(--fs-h3); line-height: var(--lh-heading); margin: 0; letter-spacing: -0.01em; }
.v-quote figcaption { margin-top: var(--s-s); color: #c4d7df; font-size: var(--fs-2xs); }
.v-quote-note { display: block; opacity: 0.75; margin-top: var(--s-4xs); }

/* ---- plans (the site's own cards, v31's dress) -------------------------------- */
main.pitch.v31 > .v-plans { background: var(--v-mist); border-block: 1px solid var(--v-line); }
.v-plans .tier {
  background: var(--v-paper); border: 1px solid var(--v-line); border-radius: 12px;
  box-shadow: var(--v-shadow);
  transition: transform var(--t-hover) var(--e-hover);
}
.v-plans .tier:hover { transform: translateY(-4px); }
.v-plans .tier.is-featured { border-top: 3px solid var(--v-accent); }
.v-plans .btn { background: var(--v-accent); border-color: var(--v-accent); color: var(--v-paper); }
.v-plans .compare { margin-top: var(--s-m); }

/* ---- questions ---------------------------------------------------------------- */
.v-faq-grid { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr); gap: var(--s-l) 12%; align-items: start; }
.v-faq-head > p:not(.v-eyebrow) { color: var(--v-muted); margin: var(--s-s) 0 0; }
.v-faq .faq-list { margin: 0; }
.v-faq .faq-item { border-top: 1px solid var(--v-line); }
.v-faq .faq-item:last-child { border-bottom: 1px solid var(--v-line); }

/* ---- closing + contact (navy) --------------------------------------------------- */
main.pitch.v31 > .v-closing { background: var(--v-navy); color: var(--v-on-navy); }
.v-closing em, .v-closing .v-eyebrow { color: var(--v-mint); }
.v-closing .v-center-head > p:not(.v-eyebrow) { color: var(--v-on-navy-muted); }
.v-contact-card {
  background: var(--v-paper); color: var(--v-ink);
  border-radius: 16px; padding: var(--s-l); box-shadow: 0 30px 80px -40px rgb(0 0 0 / 0.6);
}

/* ---- footer (navy) ------------------------------------------------------------ */
.v-footer { background: var(--v-navy-2); color: var(--v-on-navy); padding-block: var(--s-l) var(--s-s); border-top: 1px solid var(--v-navy-line); }
.v-foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--s-m); }
.v-foot-brand .brand-name { color: var(--v-on-navy); }
.v-foot-brand p { color: var(--v-on-navy-muted); font-size: var(--fs-xs); margin: var(--s-xs) 0 0; max-width: 22ch; }
.v-foot-col { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--s-2xs); }
/* The track is clamped and long links may break: an auto track took the width of
   contact@minervaxr.com and pushed the phone layout 5px past the screen. */
.v-foot-col a { overflow-wrap: anywhere; }
.v-foot-col h2 { font-size: var(--fs-2xs); font-weight: 600; color: #adcbce; margin: 0 0 var(--s-2xs); letter-spacing: 0.04em; max-width: none; }
.v-footer a { color: var(--v-on-navy); text-decoration: none; font-size: var(--fs-xs); }
.v-footer a:hover { color: var(--v-mint); }
.v-footer .foot-identity { margin-top: var(--s-m); color: var(--v-on-navy-muted); }
.v-footer .foot-identity a { color: var(--v-on-navy); }
.v-foot-bottom {
  display: flex; flex-wrap: wrap; gap: var(--s-s); align-items: center;
  margin-top: var(--s-m); padding-top: var(--s-s); border-top: 1px solid var(--v-navy-line);
  color: var(--v-on-navy-muted); font-size: var(--fs-2xs);
}
.v-foot-bottom span { margin-right: auto; }
.v-footer .legal-note { color: var(--v-on-navy-muted); }
/* 🪤 The kept identity row and legal note are coloured by site.css on their CHILDREN
   (`.foot-identity p`, `.legal-note strong`…), so a colour on the container never
   reaches them — and in the light theme --ink on navy is 1.09:1, invisible. Every
   such child rule is re-coloured here; site-v31-contrast.test.ts lists them from
   site.css and fails if one is missing. */
.v-footer .foot-identity p,
.v-footer .legal-note p { color: var(--v-on-navy-muted); }
.v-footer .foot-identity .cert strong,
.v-footer .legal-note strong { color: var(--v-on-navy); }
.v-footer .legal-note a { color: var(--v-mint); }

/* ---- motion off ----------------------------------------------------------------- */
html[data-motion="off"] .v31 *, html[data-motion="off"] .v31 *::before, html[data-motion="off"] .v31 *::after {
  transition: none !important;
}
html[data-motion="off"] .v31 .tool-panel.is-active .tool-media img { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .v31 .tool-panel.is-active .tool-media img { animation: none; }
  .v-gallery article:hover .v-gallery-media img, .v-map-areas li:hover, .v-plans .tier:hover, .v-btn:hover { transform: none; }
}

/* ---- layout steps ---------------------------------------------------------------- */
@media (max-width: 1100px) {
  .v-hero-grid { grid-template-columns: 1fr; }
  .v-hero-intro h1 { max-width: 16ch; }
  .v-step-panel { grid-template-columns: 1fr; }
  .v-hub-grid { grid-template-columns: 1fr; }
  .v-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .v-section { padding-block: var(--s-l); }
  .v-intro, .v-why-grid, .v-faq-grid, .v-quote { grid-template-columns: 1fr; }
  .v-gallery { grid-template-columns: 1fr; }
  .v-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-step { border-bottom: 1px solid var(--v-line); }
  .v-map-areas li { padding: var(--s-xs) var(--s-2xs); }
  .v-foot-bottom span { flex-basis: 100%; }
  .v-quote, .v-contact-card { padding: var(--s-m) var(--s-s); }
  .v-stage-name { font-size: var(--fs-body); }
  .v-hardware .v-link { margin-left: 0; }
}