/* Generated by site-tools/build-static.mjs. Edit site-src/styles/*.css. */
:root {
  color-scheme: dark;
  --bg: oklch(9% 0.022 255);
  --bg-soft: oklch(14% 0.028 252);
  --surface: rgba(8, 17, 32, 0.78);
  --surface-strong: rgba(12, 24, 43, 0.94);
  --surface-muted: rgba(255, 255, 255, 0.055);
  --ink: oklch(97% 0.01 250);
  --ink-bright: oklch(98% 0.008 250);
  --muted: oklch(75% 0.035 255);
  --muted-strong: oklch(88% 0.026 255);
  --panel-deep: oklch(10% 0.025 255);
  --line: rgba(177, 202, 235, 0.18);
  --line-strong: rgba(209, 225, 247, 0.28);
  --blue: oklch(68% 0.17 258);
  --blue-strong: oklch(56% 0.2 258);
  --red: oklch(60% 0.14 24);
  --red-deep: oklch(30% 0.1 24);
  --cta-blue: oklch(52% 0.12 254);
  --cta-red: oklch(42% 0.07 246);
  --cta-face: oklch(27% 0.055 250);
  --cta-face-hover: oklch(32% 0.07 250);
  --cta-border: rgba(151, 190, 238, 0.44);
  --amber: oklch(79% 0.15 79);
  --orange: oklch(69% 0.18 41);
  --violet: oklch(68% 0.17 294);
  --cyan: oklch(76% 0.14 205);
  --green: oklch(75% 0.16 152);
  --magenta: oklch(68% 0.17 335);
  --wide: 1540px;
  --content: 1160px;
  --radius: 8px;
  --header: 66px;
  --shadow: 0 24px 90px rgba(0, 0, 0, 0.38);

  /* Une seule famille. Le site en chargeait deux — Sora pour les titres, Work
     Sans pour le texte — ce qui coûte deux requêtes de police et fait cohabiter
     deux dessins de lettres sans que la hiérarchie y gagne quoi que ce soit.
     Elle se construit ici par la graisse et l'échelle, sur une seule fonte.
     Les deux jetons restent distincts : le jour où un titre mérite un dessin à
     part, il y a un point d'entrée pour ça, et un seul. */
  --font: Geist, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: var(--font);

  /* Filet en dégradé. Le fond de l'élément est peint jusqu'au bord intérieur,
     le dégradé jusqu'au bord extérieur : le liseré n'existe donc que sur
     l'épaisseur de la bordure. Une seule boîte, aucun élément d'emballage. */
  --edge: linear-gradient(158deg, rgb(255 255 255 / 16%) 0%, rgb(255 255 255 / 4%) 46%, rgb(91 140 245 / 28%) 100%);

  font-family: var(--font);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header) + 14px);
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    linear-gradient(125deg, rgba(42, 128, 255, 0.12), transparent 24rem),
    linear-gradient(238deg, rgba(255, 122, 61, 0.08), transparent 30rem),
    linear-gradient(180deg, oklch(10% 0.028 255) 0%, oklch(15% 0.034 250) 46%, oklch(11% 0.03 270) 100%);
  overflow-x: clip;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px 92px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px 92px);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 72%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 0 30%, rgba(141, 124, 255, 0.075) 30% 50%, transparent 50% 100%),
    linear-gradient(74deg, transparent 0 62%, rgba(65, 211, 145, 0.055) 62% 74%, transparent 74% 100%),
    linear-gradient(180deg, rgba(2, 7, 15, 0), rgba(2, 7, 15, 0.7));
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

p {
  margin: 0;
  color: var(--muted);
  line-height: 1.72;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: 0;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: var(--header);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(2, 7, 15, 0.76);
  backdrop-filter: blur(18px);
}

.nav {
  width: min(var(--wide), calc(100% - 40px));
  min-height: var(--header);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 800;
}

.brand img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.nav-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 12px;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.08);
}

.nav-links .nav-cta {
  color: var(--ink);
  border-radius: calc(var(--radius) + 2px);
  padding-inline: 15px;
  background:
    linear-gradient(180deg, rgba(151, 190, 238, 0.18), rgba(12, 24, 43, 0.74)),
    var(--cta-face);
  border-color: var(--cta-border);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(244, 247, 251, 0.14);
}

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  border-radius: 999px;
  background: currentColor;
}

.home-hero {
  position: relative;
  min-height: min(720px, calc(100svh - var(--header)));
  isolation: isolate;
  overflow: hidden;
}

.home-hero::before,
.home-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.home-hero::before {
  inset: -18% -8% auto -8%;
  height: 72%;
  background:
    radial-gradient(circle at 18% 35%, rgba(76, 156, 255, 0.35), transparent 24rem),
    radial-gradient(circle at 78% 34%, rgba(255, 75, 75, 0.38), transparent 28rem);
  filter: blur(8px);
}

.home-hero::after {
  inset: auto 0 0;
  height: 38%;
  background: linear-gradient(180deg, transparent, rgba(2, 7, 15, 0.94));
}

.hero-noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 2;
}

.hero-stage {
  width: min(var(--wide), calc(100% - 48px));
  min-height: min(720px, calc(100svh - var(--header)));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(500px, 0.82fr);
  align-items: center;
  gap: clamp(28px, 4vw, 72px);
  padding: clamp(30px, 4vw, 58px) 0 clamp(46px, 5vw, 68px);
}

.hero-content {
  position: relative;
  z-index: 4;
  max-width: 760px;
}

.hero-kicker,
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted-strong);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.hero-kicker::before,
.eyebrow::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--amber));
  box-shadow: 0 0 24px rgba(66, 213, 255, 0.58);
}

.hero-title {
  margin-top: 20px;
  color: var(--ink-bright);
  font-size: clamp(2.55rem, 3.45vw, 4.05rem);
  line-height: 1.02;
  font-weight: 800;
  max-width: 700px;
  text-wrap: balance;
}

.hero-title span {
  display: block;
  opacity: 0;
  transform: translateY(34px);
  filter: blur(6px);
}

.is-ready .hero-title span {
  animation: titleIn 620ms cubic-bezier(0.2, 0.9, 0.15, 1) forwards;
  animation-delay: calc(var(--i) * 90ms);
}

.hero-lead {
  max-width: 620px;
  margin-top: 22px;
  color: rgba(229, 238, 250, 0.84);
  font-size: clamp(1rem, 1.05vw, 1.12rem);
}

.hero-actions,
.section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 26px;
}

.button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 2px);
  padding: 0 20px;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.005em;
  background:
    linear-gradient(180deg, rgba(244, 247, 251, 0.075), rgba(244, 247, 251, 0.025)),
    rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px 0 rgba(244, 247, 251, 0.09);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.button:hover {
  transform: translateY(-1px);
  border-color: var(--line-strong);
}

.button:active {
  transform: translateY(0);
}

.button.primary {
  color: var(--ink);
  border-color: var(--cta-border);
  background:
    linear-gradient(180deg, rgba(151, 190, 238, 0.26), rgba(151, 190, 238, 0.05)),
    linear-gradient(180deg, var(--cta-blue), var(--cta-face));
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.28),
    0 10px 28px rgba(61, 116, 183, 0.16),
    inset 0 1px 0 rgba(244, 247, 251, 0.16);
}

.button.primary:hover,
.nav-links .nav-cta:hover {
  background:
    linear-gradient(180deg, rgba(173, 206, 246, 0.28), rgba(151, 190, 238, 0.08)),
    linear-gradient(180deg, var(--cta-blue), var(--cta-face-hover));
  border-color: rgba(184, 214, 249, 0.58);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.3),
    0 10px 30px rgba(61, 116, 183, 0.2),
    inset 0 1px 0 rgba(244, 247, 251, 0.18);
}

.button.secondary {
  color: rgba(235, 243, 252, 0.92);
  border-color: rgba(209, 225, 247, 0.2);
  background:
    linear-gradient(180deg, rgba(244, 247, 251, 0.055), rgba(244, 247, 251, 0.018)),
    rgba(4, 10, 20, 0.56);
}

.button.secondary:hover {
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(244, 247, 251, 0.085), rgba(244, 247, 251, 0.028)),
    rgba(8, 17, 32, 0.72);
}

.hero-rules {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-rules span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 0 13px;
  color: rgba(230, 239, 250, 0.78);
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.045);
}

.hero-visual {
  --mx: 0;
  --my: 0;
  position: relative;
  z-index: 3;
  min-height: clamp(340px, 32vw, 520px);
  perspective: 1000px;
  overflow: clip;
}

.scan-frame {
  position: absolute;
  inset: 4% 0 0 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: var(--panel-deep);
  box-shadow: var(--shadow);
  transform: rotateX(calc(var(--my) * -4deg)) rotateY(calc(var(--mx) * 5deg));
  transition: transform 180ms ease-out;
}

.scan-frame::before {
  content: "";
  position: absolute;
  inset: -24%;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(circle at calc(50% + var(--mx) * 22%) calc(50% + var(--my) * 18%), rgba(255, 75, 75, 0.32), transparent 18rem),
    radial-gradient(circle at calc(42% - var(--mx) * 18%) calc(42% - var(--my) * 12%), rgba(76, 156, 255, 0.32), transparent 20rem);
  mix-blend-mode: screen;
}

.scan-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.78;
  filter: saturate(1.08) contrast(1.05) brightness(0.78);
  transform: scale(1.08) translate3d(calc(var(--mx) * -12px), calc(var(--my) * -10px), 0);
  transition: transform 180ms ease-out;
}

.scan-depth,
.scan-grid,
.scan-line,
.scan-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scan-depth {
  z-index: 4;
  background:
    radial-gradient(circle at 34% 58%, rgba(76, 156, 255, 0.42) 0 1px, transparent 2px),
    radial-gradient(circle at 64% 56%, rgba(255, 75, 75, 0.38) 0 1px, transparent 2px);
  background-size: 26px 26px, 32px 32px;
  mix-blend-mode: screen;
  opacity: 0.42;
  mask-image: linear-gradient(180deg, transparent, black 24%, black 82%, transparent);
  animation: depthPulse 4.8s ease-in-out infinite;
}

.scan-grid {
  z-index: 5;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px 64px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.065) 1px, transparent 1px 64px);
  opacity: 0.24;
}

.scan-line {
  z-index: 6;
  height: 22%;
  top: -24%;
  background:
    linear-gradient(180deg, transparent, rgba(255, 75, 75, 0.06), rgba(255, 75, 75, 0.42), rgba(255, 255, 255, 0.32), transparent),
    linear-gradient(90deg, transparent, rgba(255, 75, 75, 0.56), transparent);
  filter: blur(0.4px);
  animation: scanMove 5.4s ease-in-out infinite;
}

.scan-vignette {
  z-index: 7;
  background:
    linear-gradient(90deg, rgba(2, 7, 15, 0.88), transparent 24%, transparent 68%, rgba(80, 8, 17, 0.64)),
    linear-gradient(180deg, rgba(2, 7, 15, 0.72), transparent 32%, rgba(2, 7, 15, 0.78));
}

.hud {
  position: absolute;
  z-index: 8;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  padding: 12px 14px;
  color: rgba(244, 247, 251, 0.9);
  background: rgba(2, 7, 15, 0.64);
  backdrop-filter: blur(16px);
}

.hud span {
  color: rgba(216, 225, 237, 0.72);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hud strong {
  font-size: 0.95rem;
}

.hud-top {
  top: 18px;
  right: 18px;
}

.hud-bottom {
  left: 18px;
  bottom: 18px;
}

.orbit-chip {
  position: absolute;
  z-index: 10;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 0 16px;
  color: var(--ink);
  font-weight: 900;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px);
  animation: chipFloat 5s ease-in-out infinite;
}

.chip-a {
  top: 12%;
  left: 1%;
}

.chip-b {
  top: 44%;
  right: 1%;
  animation-delay: -1.4s;
}

.chip-c {
  bottom: 10%;
  left: 9%;
  animation-delay: -2.7s;
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 12;
  transform: translateX(-50%);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(234, 241, 250, 0.76);
  font-size: 0.84rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.scroll-cue svg {
  animation: arrowDrop 1.9s ease-in-out infinite;
}

.statement-band {
  overflow: hidden;
  width: 100%;
  max-width: 100vw;
  contain: layout paint;
  border-block: 1px solid rgba(255, 255, 255, 0.09);
  background:
    linear-gradient(90deg, rgba(4, 18, 36, 0.88), rgba(17, 38, 48, 0.78), rgba(58, 28, 49, 0.76)),
    linear-gradient(90deg, rgba(66, 213, 255, 0.1), rgba(65, 211, 145, 0.08), rgba(255, 184, 75, 0.09));
}

.statement-track {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2.2vw, 30px);
  padding: 14px clamp(14px, 2vw, 24px);
}

.statement-track p {
  white-space: nowrap;
  color: rgba(244, 247, 251, 0.78);
  font-family: var(--font-display);
  font-size: clamp(0.88rem, 1.05vw, 1.05rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.statement-track p:nth-child(n + 6) {
  display: none;
}

.method-section,
.modules-strip,
.platform-showcase,
.frame-section,
.examples-section,
.final-panel,
.page-hero,
.content-page,
.section {
  width: min(var(--content), calc(100% - 40px));
  margin-inline: auto;
  scroll-margin-top: 96px;
}

.method-section,
.modules-strip,
.platform-showcase,
.frame-section,
.examples-section {
  padding: clamp(38px, 3.8vw, 64px) 0;
}

.platform-showcase {
  width: min(var(--wide), calc(100% - 40px));
}

.section-intro,
.section-header {
  max-width: 780px;
}

.section-header.compact {
  max-width: 680px;
}

.section-intro h2,
.section-header h2,
.frame-copy h2,
.final-panel h2,
.page-hero h1 {
  margin-top: 16px;
  color: var(--ink-bright);
  font-size: clamp(1.9rem, 2.45vw, 2.9rem);
  line-height: 1.05;
  font-weight: 800;
  text-wrap: balance;
}

.section-intro p,
.section-header p,
.frame-copy p,
.page-hero p {
  margin-top: 18px;
  max-width: 700px;
  font-size: clamp(0.98rem, 1.05vw, 1.08rem);
}

.method-rail {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(9, 23, 42, 0.78), rgba(4, 12, 23, 0.72));
}

.method-visual,
.module-atlas {
  position: relative;
  overflow: hidden;
  margin: 16px 0 0;
  border: 1px solid rgba(209, 225, 247, 0.18);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(10, 22, 41, 0.92), rgba(4, 10, 20, 0.9)),
    repeating-linear-gradient(135deg, rgba(244, 247, 251, 0.045) 0 1px, transparent 1px 22px);
  box-shadow:
    0 32px 100px rgba(0, 0, 0, 0.42),
    0 18px 48px rgba(65, 211, 145, 0.08);
}

.method-visual::before,
.module-atlas::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(244, 247, 251, 0.12), transparent 22%, transparent 68%, rgba(255, 184, 75, 0.12)),
    linear-gradient(180deg, transparent 46%, rgba(2, 7, 15, 0.42));
}

.method-visual img,
.module-atlas img {
  width: 100%;
  height: clamp(320px, 32vw, 520px);
  min-height: 0;
  object-fit: cover;
  opacity: 0.88;
  filter: saturate(1.08) contrast(1.04) brightness(0.88);
  transform: scale(1.01);
}

.method-visual figcaption,
.module-atlas figcaption {
  position: absolute;
  z-index: 3;
  left: clamp(16px, 2.4vw, 28px);
  right: clamp(16px, 2.4vw, 28px);
  bottom: clamp(16px, 2.4vw, 28px);
  max-width: 720px;
  border: 1px solid rgba(209, 225, 247, 0.18);
  border-radius: var(--radius);
  padding: clamp(14px, 1.8vw, 20px);
  background: rgba(3, 8, 17, 0.8);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.32);
}

.method-visual span,
.module-atlas span {
  display: block;
  margin-bottom: 8px;
  color: var(--cyan);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.method-visual strong,
.module-atlas strong {
  color: var(--ink-bright);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.2vw, 1.24rem);
  line-height: 1.22;
}

.platform-showcase {
  position: relative;
  isolation: isolate;
}

.platform-showcase::before {
  content: "";
  position: absolute;
  inset: 26px 0 auto 0;
  height: 78%;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(118deg, rgba(66, 213, 255, 0.15), transparent 34%),
    linear-gradient(204deg, rgba(65, 211, 145, 0.11), transparent 42%),
    linear-gradient(290deg, rgba(255, 184, 75, 0.12), transparent 38%),
    repeating-linear-gradient(90deg, rgba(244, 247, 251, 0.055) 0 1px, transparent 1px 96px);
  mask-image: linear-gradient(180deg, transparent, black 14%, black 74%, transparent);
}

.showcase-copy {
  max-width: 820px;
}

.showcase-copy h2 {
  margin-top: 16px;
  color: var(--ink-bright);
  font-size: clamp(1.95rem, 2.55vw, 3rem);
  line-height: 1.04;
  font-weight: 800;
  text-wrap: balance;
}

.showcase-copy p {
  max-width: 700px;
  margin-top: 18px;
  color: rgba(216, 225, 237, 0.86);
  font-size: clamp(0.98rem, 1.05vw, 1.08rem);
}

.showcase-board {
  margin-top: clamp(28px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(330px, 0.68fr);
  gap: 16px;
  align-items: stretch;
}

.product-gallery {
  align-items: start;
}

.showcase-main,
.showcase-card,
.module-screen {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(209, 225, 247, 0.2);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(13, 26, 48, 0.94), rgba(4, 11, 22, 0.9)),
    repeating-linear-gradient(135deg, rgba(244, 247, 251, 0.05) 0 1px, transparent 1px 18px);
  box-shadow:
    0 34px 120px rgba(0, 0, 0, 0.5),
    0 18px 60px rgba(66, 213, 255, 0.1),
    inset 0 1px 0 rgba(244, 247, 251, 0.08);
}

.showcase-main::before,
.showcase-card::before,
.module-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(244, 247, 251, 0.14), transparent 18%, transparent 72%, rgba(255, 184, 75, 0.12)),
    linear-gradient(180deg, transparent, rgba(2, 7, 15, 0.24));
  opacity: 0.7;
}

.showcase-main::after,
.module-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(244, 247, 251, 0.11), transparent);
  transform: translateX(-120%);
  animation: sheenSweep 7.8s ease-in-out infinite;
}

.showcase-main img,
.showcase-card img,
.module-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  filter: saturate(1.05) contrast(1.06) brightness(0.9);
  transform: scale(1.012);
  transition: transform 420ms cubic-bezier(0.2, 0.9, 0.15, 1), filter 420ms ease;
}

.showcase-main:hover img,
.showcase-card:hover img,
.module-screen:hover img {
  transform: scale(1.035);
  filter: saturate(1.12) contrast(1.08) brightness(0.96);
}

.showcase-main {
  min-height: clamp(390px, 34vw, 560px);
}

.showcase-side {
  display: grid;
  gap: 16px;
}

.showcase-card {
  min-height: 250px;
}

.showcase-card.warm {
  min-height: 300px;
}

.showcase-card.selector-card {
  min-height: 320px;
  display: grid;
  place-items: center;
  padding: 22px 18px 88px;
  background:
    linear-gradient(145deg, rgba(8, 21, 35, 0.96), rgba(20, 23, 48, 0.94)),
    linear-gradient(315deg, rgba(141, 124, 255, 0.16), transparent 52%);
}

.showcase-card.selector-card img {
  width: min(68%, 280px);
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
  opacity: 0.96;
  box-shadow:
    0 26px 72px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(244, 247, 251, 0.12);
}

.showcase-card.explain {
  display: grid;
  align-content: center;
  gap: 18px;
  padding: clamp(22px, 3.4vw, 34px);
  background:
    linear-gradient(135deg, rgba(21, 42, 72, 0.94), rgba(44, 20, 58, 0.86)),
    linear-gradient(180deg, rgba(255, 122, 61, 0.14), transparent);
}

.showcase-card.explain::before {
  background:
    linear-gradient(135deg, rgba(66, 213, 255, 0.13), transparent 42%),
    linear-gradient(315deg, rgba(255, 122, 61, 0.14), transparent 48%);
}

.showcase-card.explain h3 {
  position: relative;
  z-index: 4;
  max-width: 460px;
  color: var(--ink);
  font-size: clamp(1.35rem, 2.1vw, 2.35rem);
  line-height: 1.04;
  font-weight: 800;
  text-wrap: balance;
}

.showcase-card.explain p {
  position: relative;
  z-index: 4;
  color: rgba(230, 239, 250, 0.82);
}

.showcase-main figcaption,
.showcase-card figcaption,
.module-screen figcaption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 4;
  display: grid;
  gap: 5px;
  border: 1px solid rgba(244, 247, 251, 0.14);
  border-radius: var(--radius);
  padding: 14px 16px;
  color: var(--ink);
  background: rgba(3, 8, 17, 0.78);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px);
}

.showcase-main figcaption span,
.showcase-card figcaption span {
  color: var(--cyan);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.showcase-main figcaption strong,
.showcase-card figcaption strong,
.module-screen figcaption {
  font-family: var(--font-display);
  font-weight: 900;
}

.platform-proof {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.micro-screens {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 0.92fr 0.92fr 0.64fr 1.2fr;
  gap: 12px;
}

.micro-screens figure {
  position: relative;
  min-height: 260px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(209, 225, 247, 0.17);
  border-radius: var(--radius);
  background:
    linear-gradient(150deg, rgba(10, 24, 42, 0.92), rgba(6, 12, 24, 0.9)),
    linear-gradient(42deg, rgba(66, 213, 255, 0.08), rgba(255, 184, 75, 0.07));
  box-shadow:
    0 24px 88px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(244, 247, 251, 0.08);
}

.micro-screens figure::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 45%, rgba(2, 7, 15, 0.88)),
    linear-gradient(110deg, rgba(244, 247, 251, 0.08), transparent 28%);
}

.micro-screens img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  opacity: 0.9;
  filter: saturate(1.06) contrast(1.04) brightness(0.92);
  transform: scale(1.01);
  transition: transform 420ms cubic-bezier(0.2, 0.9, 0.15, 1), filter 420ms ease;
}

.micro-screens figure:hover img {
  transform: scale(1.04);
  filter: saturate(1.12) contrast(1.06) brightness(0.98);
}

.micro-screens figure:nth-child(1) img,
.micro-screens figure:nth-child(2) img,
.micro-screens figure:nth-child(3) img {
  object-fit: contain;
  padding: 18px;
  background: rgba(4, 9, 18, 0.92);
}

.micro-screens figure:nth-child(4) {
  min-height: 300px;
}

.micro-screens figure:nth-child(4) img {
  object-position: top center;
}

.micro-screens figcaption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  display: grid;
  gap: 6px;
  border: 1px solid rgba(244, 247, 251, 0.13);
  border-radius: var(--radius);
  padding: 13px 14px;
  background: rgba(3, 8, 17, 0.78);
  backdrop-filter: blur(14px);
}

.micro-screens strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.15;
}

.micro-screens span {
  color: rgba(216, 225, 237, 0.78);
  font-size: 0.86rem;
  line-height: 1.45;
}

.platform-proof article {
  min-height: 164px;
  display: grid;
  align-content: start;
  gap: 12px;
  border: 1px solid rgba(209, 225, 247, 0.16);
  border-radius: var(--radius);
  padding: 20px;
  background:
    linear-gradient(160deg, rgba(8, 22, 42, 0.86), rgba(7, 14, 26, 0.74)),
    linear-gradient(90deg, rgba(66, 213, 255, 0.08), rgba(255, 122, 61, 0.06));
  box-shadow: 0 18px 58px rgba(0, 0, 0, 0.22);
}

.platform-proof span {
  color: var(--orange);
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.08em;
}

.platform-proof strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 900;
}

.method-rail article {
  min-height: 210px;
  display: grid;
  align-content: center;
  gap: 18px;
  padding: clamp(22px, 2.6vw, 36px);
}

.method-rail article + article {
  border-left: 1px solid var(--line);
}

.method-rail span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  font-weight: 900;
  background: rgba(255, 255, 255, 0.1);
}

.method-rail h3,
.module-lanes strong,
.example-wall strong,
.frame-card span,
.guide-item h2,
.method-step h3,
.exercise strong,
.module h3,
.legal h3,
.faq-item summary,
.cta-band h2 {
  color: var(--ink-bright);
  font-family: var(--font-display);
  font-weight: 900;
}

.method-rail h3 {
  font-size: clamp(1.2rem, 1.55vw, 1.55rem);
}

.module-lanes {
  margin-top: 34px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr;
  gap: 12px;
}

.lane {
  min-height: 180px;
  display: grid;
  align-content: end;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  overflow: hidden;
  position: relative;
  background:
    linear-gradient(135deg, rgba(8, 22, 42, 0.94), rgba(14, 20, 32, 0.9)),
    radial-gradient(circle at 92% 10%, rgba(76, 156, 255, 0.22), transparent 15rem);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.lane::before {
  content: "";
  position: absolute;
  inset: auto -20% -34% auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 75, 75, 0.28), transparent 70%);
}

.lane:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
}

.lane-large {
  grid-row: span 2;
  min-height: 372px;
  align-content: start;
  background:
    linear-gradient(160deg, rgba(7, 20, 39, 0.9), rgba(12, 17, 30, 0.86)),
    url("/assets/img/product/app-training-dashboard.jpg") top right / cover;
}

.lane span,
.tag {
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lane strong {
  position: relative;
  z-index: 1;
  max-width: 500px;
  font-size: clamp(1.12rem, 1.65vw, 1.8rem);
  line-height: 1.05;
}

.frame-section {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(400px, 1fr);
  align-items: center;
  gap: clamp(34px, 6vw, 84px);
}

.frame-grid {
  display: grid;
  gap: 12px;
}

.frame-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  background: rgba(255, 255, 255, 0.055);
}

.frame-card.allow {
  background: linear-gradient(135deg, rgba(14, 54, 95, 0.72), rgba(7, 20, 36, 0.72));
}

.frame-card.deny {
  background: linear-gradient(135deg, rgba(95, 20, 22, 0.72), rgba(7, 20, 36, 0.72));
}

.frame-card span {
  display: block;
  margin-bottom: 12px;
  font-size: clamp(1.12rem, 1.55vw, 1.45rem);
}

.example-wall {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
}

.example-wall article {
  min-height: 182px;
  display: grid;
  align-content: center;
  gap: 16px;
  padding: 22px;
  background: rgba(8, 19, 34, 0.68);
}

.example-wall article + article {
  border-left: 1px solid var(--line);
}

.example-wall strong {
  font-size: 1.05rem;
}

.final-panel,
.cta-band {
  margin-bottom: clamp(58px, 7vw, 94px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 44px);
  background:
    linear-gradient(135deg, rgba(8, 28, 54, 0.9), rgba(24, 24, 36, 0.86)),
    url("/assets/img/product/app-chat-home.jpg") center / cover;
  overflow: hidden;
  position: relative;
}

.final-panel::before,
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(2, 7, 15, 0.88), rgba(2, 7, 15, 0.32));
}

.final-panel > *,
.cta-band > * {
  position: relative;
  z-index: 1;
}

.final-panel h2,
.cta-band h2 {
  max-width: 680px;
  font-size: clamp(1.9rem, 2.55vw, 3rem);
  line-height: 1.04;
  font-weight: 800;
}

.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(2, 7, 15, 0.92);
}

.footer-inner {
  width: min(var(--wide), calc(100% - 40px));
  min-height: 92px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: var(--muted);
  font-weight: 700;
}

.footer-inner nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-inner a:hover {
  color: var(--ink);
}

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

.legal-page {
  display: grid;
  gap: 18px;
  padding-bottom: clamp(42px, 5vw, 74px);
}

.legal-card {
  border: 1px solid rgba(209, 225, 247, 0.16);
  border-radius: var(--radius);
  padding: clamp(20px, 2.4vw, 30px);
  background:
    linear-gradient(180deg, rgba(13, 28, 50, 0.82), rgba(5, 13, 25, 0.78)),
    rgba(255, 255, 255, 0.03);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.22);
}

.legal-card h2 {
  color: var(--ink-bright);
  font-size: clamp(1.15rem, 1.45vw, 1.45rem);
  line-height: 1.2;
}

.legal-card h3 {
  margin-top: 18px;
  color: var(--ink);
  font-size: 1rem;
}

.legal-card p,
.legal-card li {
  color: var(--muted);
  line-height: 1.72;
}

.legal-card p {
  margin-top: 12px;
}

.legal-card ul {
  margin: 14px 0 0;
  padding-left: 20px;
}

.legal-card strong {
  color: var(--ink);
}

.legal-note {
  border-color: rgba(255, 184, 75, 0.28);
  background:
    linear-gradient(180deg, rgba(76, 58, 21, 0.32), rgba(12, 24, 43, 0.76)),
    rgba(255, 184, 75, 0.045);
}

.is-ready [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 620ms ease, transform 620ms cubic-bezier(0.2, 0.9, 0.15, 1);
}

.is-ready [data-reveal].is-visible,
[data-reveal] {
  opacity: 1;
  transform: translateY(0);
}

.page-hero {
  padding: clamp(48px, 5.5vw, 82px) 0 clamp(30px, 4vw, 54px);
}

.page-hero h1 {
  max-width: 980px;
}

.page-hero p {
  max-width: 820px;
}

.content-page {
  padding-bottom: clamp(58px, 8vw, 104px);
}

.module-grid,
.method-grid,
.audience-grid,
.legal-grid,
.exercise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.module-grid {
  grid-template-columns: repeat(2, 1fr);
}

.module-product-stage {
  position: relative;
  width: min(1280px, calc(100vw - 40px));
  margin-left: 50%;
  transform: translateX(-50%);
  margin-bottom: clamp(34px, 4.8vw, 58px);
  padding: clamp(22px, 3.4vw, 38px);
  border: 1px solid rgba(209, 225, 247, 0.16);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(7, 20, 39, 0.82), rgba(30, 15, 41, 0.76)),
    linear-gradient(90deg, rgba(66, 213, 255, 0.1), rgba(255, 122, 61, 0.08));
  box-shadow: 0 36px 120px rgba(0, 0, 0, 0.36);
  overflow: hidden;
}

.module-product-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(244, 247, 251, 0.05) 0 1px, transparent 1px 92px),
    linear-gradient(180deg, rgba(244, 247, 251, 0.07), transparent 28%);
}

.module-product-stage > * {
  position: relative;
  z-index: 1;
}

.module-screens {
  margin-top: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(330px, 0.82fr);
  gap: 14px;
  align-items: stretch;
}

.module-screen {
  min-height: 280px;
}

.module-screen.large {
  grid-row: span 2;
  min-height: 500px;
}

.module-screen.portrait {
  min-height: 360px;
}

.module-screen.portrait img {
  object-fit: contain;
  padding: 18px;
  background: rgba(4, 9, 18, 0.92);
}

.module-screen.news {
  grid-column: 1 / -1;
  min-height: 320px;
}

.module-screen.news img {
  object-position: top center;
}

.module-screen.large img {
  object-fit: contain;
  object-position: top center;
  padding: 18px;
  background: rgba(4, 9, 18, 0.92);
}

.module,
.method-step,
.legal,
.exercise,
.guide-item,
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(8, 19, 34, 0.72);
}

.module {
  overflow: hidden;
  display: grid;
  grid-template-columns: 160px 1fr;
}

.module img {
  width: 100%;
  height: 100%;
  min-height: 190px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.05);
}

.module-body,
.method-step,
.legal,
.exercise {
  padding: 22px;
}

.module-body h3,
.method-step h3,
.legal h3 {
  margin-top: 10px;
  margin-bottom: 12px;
  font-size: 1.22rem;
}

.section {
  padding: clamp(42px, 5.5vw, 72px) 0 0;
}

.method-grid,
.exercise-grid,
.legal-grid {
  margin-top: 28px;
}

.step-number {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  font-weight: 900;
  background: linear-gradient(135deg, var(--blue), var(--red));
}

.guide-list {
  display: grid;
  gap: 12px;
}

.guide-item {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 20px;
  padding: 22px;
}

.guide-item > span {
  color: var(--blue);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 900;
}

.guide-item h2 {
  margin-bottom: 10px;
  font-size: clamp(1.25rem, 1.65vw, 1.65rem);
}

.faq-list {
  display: grid;
  gap: 12px;
  margin-top: 34px;
}

.faq-item {
  padding: 22px 24px;
}

.faq-item summary {
  min-height: 44px;
  padding-block: 8px;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1.25;
}

.faq-item p {
  margin-top: 12px;
}

/* Professional product-proof pass */
.home-hero {
  min-height: min(680px, calc(100svh - var(--header)));
}

.home-hero::before {
  inset: -20% -8% auto -8%;
  height: 68%;
  background:
    radial-gradient(circle at 18% 30%, rgba(76, 156, 255, 0.2), transparent 26rem),
    radial-gradient(circle at 82% 28%, rgba(255, 122, 61, 0.11), transparent 30rem);
  filter: blur(12px);
}

.hero-stage {
  min-height: min(680px, calc(100svh - var(--header)));
  grid-template-columns: minmax(0, 0.82fr) minmax(520px, 0.92fr);
  gap: clamp(34px, 4vw, 76px);
  padding: clamp(34px, 4vw, 56px) 0 clamp(48px, 5vw, 66px);
}

.hero-title {
  max-width: 640px;
  font-size: clamp(2.2rem, 2.75vw, 3.15rem);
  line-height: 1.04;
}

.hero-title span {
  opacity: 1;
  transform: none;
  filter: none;
}

.is-ready .hero-title span {
  animation: none;
}

.hero-lead {
  max-width: 650px;
  font-size: clamp(0.98rem, 0.98vw, 1.08rem);
}

.hero-product {
  position: relative;
  z-index: 3;
  min-height: clamp(380px, 32vw, 560px);
}

.product-window {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(209, 225, 247, 0.2);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(8, 18, 34, 0.96), rgba(4, 9, 18, 0.96));
  box-shadow:
    0 26px 86px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(244, 247, 251, 0.035) inset;
}

.product-window img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top left;
  background: rgba(4, 9, 18, 0.96);
  filter: saturate(0.98) contrast(1.02) brightness(0.93);
}

.product-window-main {
  inset: 0 11% 7% 0;
}

.product-window-main img {
  padding: 0;
}

.product-window-main figcaption {
  position: absolute;
  left: clamp(14px, 2vw, 22px);
  right: clamp(14px, 2vw, 22px);
  bottom: clamp(14px, 2vw, 22px);
  display: grid;
  gap: 6px;
  border: 1px solid rgba(209, 225, 247, 0.16);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: rgba(3, 8, 17, 0.86);
}

.product-window-main figcaption span,
.product-window-selector figcaption,
.product-window-training figcaption {
  color: var(--cyan);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-window-main figcaption strong {
  max-width: 560px;
  color: var(--ink-bright);
  font-family: var(--font-display);
  font-size: clamp(0.94rem, 1vw, 1.08rem);
  line-height: 1.35;
}

.product-window-selector {
  top: 9%;
  right: 0;
  width: min(31%, 278px);
  aspect-ratio: 0.82;
  padding: 14px 14px 44px;
}

.product-window-selector img {
  object-position: center;
}

.product-window-training {
  right: 5%;
  bottom: 0;
  width: min(43%, 380px);
  aspect-ratio: 1.12;
  padding: 14px 14px 44px;
}

.product-window-selector figcaption,
.product-window-training figcaption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 13px;
  color: rgba(230, 239, 250, 0.86);
}

.statement-band {
  background:
    linear-gradient(90deg, rgba(4, 18, 36, 0.76), rgba(17, 38, 48, 0.58), rgba(42, 32, 48, 0.54)),
    linear-gradient(90deg, rgba(66, 213, 255, 0.06), rgba(65, 211, 145, 0.05), rgba(255, 184, 75, 0.05));
}

.section-intro h2,
.section-header h2,
.frame-copy h2,
.final-panel h2,
.page-hero h1,
.showcase-copy h2,
.cta-band h2 {
  font-size: clamp(1.72rem, 2vw, 2.38rem);
  line-height: 1.08;
}

.page-hero {
  padding: clamp(42px, 4.8vw, 72px) 0 clamp(28px, 3.6vw, 46px);
}

.showcase-board {
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
}

.showcase-main,
.showcase-card,
.module-screen,
.method-visual,
.module-atlas {
  box-shadow:
    0 24px 86px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(244, 247, 251, 0.07);
}

.showcase-main::before,
.showcase-card::before,
.module-screen::before,
.method-visual::before,
.module-atlas::before {
  opacity: 0.38;
}

.showcase-main::after,
.module-screen::after {
  display: none;
}

.showcase-main {
  min-height: clamp(360px, 30vw, 500px);
}

.showcase-main img,
.showcase-card img,
.module-screen img,
.method-visual img,
.module-atlas img {
  opacity: 0.96;
  filter: saturate(0.98) contrast(1.02) brightness(0.92);
  transform: none;
}

.showcase-main:hover img,
.showcase-card:hover img,
.module-screen:hover img {
  transform: none;
  filter: saturate(1.02) contrast(1.03) brightness(0.96);
}

.showcase-card.explain {
  background:
    linear-gradient(135deg, rgba(17, 35, 60, 0.94), rgba(22, 24, 40, 0.9)),
    linear-gradient(180deg, rgba(255, 184, 75, 0.07), transparent);
}

.showcase-card.explain h3 {
  font-size: clamp(1.18rem, 1.45vw, 1.75rem);
  line-height: 1.12;
}

.micro-screens figure {
  min-height: 238px;
  box-shadow:
    0 18px 58px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(244, 247, 251, 0.07);
}

.micro-screens figure::before {
  background:
    linear-gradient(180deg, transparent 52%, rgba(2, 7, 15, 0.86)),
    linear-gradient(110deg, rgba(244, 247, 251, 0.05), transparent 34%);
}

.method-visual,
.module-atlas {
  margin-top: 20px;
  background: linear-gradient(180deg, rgba(8, 18, 34, 0.96), rgba(4, 9, 18, 0.96));
}

.method-visual img,
.module-atlas img {
  height: clamp(280px, 24vw, 410px);
  object-fit: contain;
  object-position: top center;
  padding: clamp(12px, 1.5vw, 18px);
  background: rgba(4, 9, 18, 0.96);
}

.method-visual figcaption,
.module-atlas figcaption {
  background: rgba(3, 8, 17, 0.86);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.26);
}

.module-product-stage {
  background:
    linear-gradient(135deg, rgba(7, 20, 39, 0.82), rgba(18, 22, 36, 0.76)),
    linear-gradient(90deg, rgba(66, 213, 255, 0.06), rgba(255, 184, 75, 0.05));
  box-shadow: 0 28px 96px rgba(0, 0, 0, 0.32);
}

.module-product-stage::before {
  background:
    repeating-linear-gradient(90deg, rgba(244, 247, 251, 0.032) 0 1px, transparent 1px 104px),
    linear-gradient(180deg, rgba(244, 247, 251, 0.045), transparent 30%);
}

.module-screen.large {
  min-height: 460px;
}

.module-screen.news {
  min-height: 300px;
}

.lane-large {
  background:
    linear-gradient(160deg, rgba(7, 20, 39, 0.9), rgba(12, 17, 30, 0.86)),
    url("/assets/img/product/app-training-dashboard.jpg") top right / cover;
}

.lane::before {
  background: radial-gradient(circle, rgba(66, 213, 255, 0.16), transparent 70%);
}

.frame-card.allow {
  background: linear-gradient(135deg, rgba(14, 54, 95, 0.58), rgba(7, 20, 36, 0.72));
}

.frame-card.deny {
  background: linear-gradient(135deg, rgba(92, 38, 28, 0.5), rgba(7, 20, 36, 0.72));
}

.final-panel,
.cta-band {
  background:
    linear-gradient(135deg, rgba(8, 28, 54, 0.9), rgba(24, 24, 36, 0.86)),
    url("/assets/img/product/app-chat-home.jpg") center / cover;
}

.final-panel::before,
.cta-band::before {
  background: linear-gradient(90deg, rgba(2, 7, 15, 0.92), rgba(2, 7, 15, 0.62));
}

/* Modules page refinement */
.modules-page {
  width: min(1240px, calc(100% - 40px));
}

.module-hero {
  width: min(1240px, calc(100% - 40px));
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(380px, 0.72fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: end;
  padding-bottom: clamp(34px, 4.2vw, 56px);
}

.module-hero-copy {
  max-width: 860px;
}

.module-hero-proof {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(209, 225, 247, 0.16);
  border-radius: var(--radius);
  aspect-ratio: 16 / 11;
  background: rgba(3, 8, 17, 0.92);
  box-shadow: 0 20px 76px rgba(0, 0, 0, 0.28);
}

.module-hero-proof img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
  padding: 12px;
  filter: saturate(0.96) contrast(1.02) brightness(0.9);
}

.module-hero-proof figcaption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  border: 1px solid rgba(209, 225, 247, 0.13);
  border-radius: var(--radius);
  padding: 10px 12px;
  color: rgba(235, 243, 252, 0.9);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
  background: rgba(3, 8, 17, 0.78);
}

.module-orientation {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(480px, 1.15fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: start;
  padding: clamp(22px, 3vw, 34px) 0 clamp(44px, 5.5vw, 72px);
  border-bottom: 1px solid rgba(209, 225, 247, 0.14);
}

.orientation-copy {
  position: sticky;
  top: calc(var(--header) + 28px);
}

.orientation-copy h2,
.module-directory h2,
.module-routing-note h2 {
  margin-top: 16px;
  color: var(--ink-bright);
  font-size: clamp(1.72rem, 2vw, 2.36rem);
  line-height: 1.08;
  font-weight: 800;
  text-wrap: balance;
}

.orientation-copy p,
.module-directory .section-header p {
  margin-top: 18px;
  max-width: 650px;
}

.orientation-list {
  border-top: 1px solid rgba(209, 225, 247, 0.16);
}

.orientation-list article {
  display: grid;
  grid-template-columns: minmax(155px, 0.38fr) minmax(0, 0.62fr);
  gap: clamp(18px, 2.4vw, 32px);
  padding: clamp(18px, 2.4vw, 28px) 0;
  border-bottom: 1px solid rgba(209, 225, 247, 0.14);
}

.orientation-list span {
  color: var(--cyan);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.orientation-list strong {
  display: block;
  color: var(--ink-bright);
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 1.2vw, 1.28rem);
  line-height: 1.18;
}

.orientation-list p {
  grid-column: 2;
  margin-top: -8px;
  color: rgba(216, 225, 237, 0.78);
  line-height: 1.58;
}

.module-proof-strip {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.72fr);
  gap: 14px;
  padding: clamp(36px, 5vw, 66px) 0;
  border-bottom: 1px solid rgba(209, 225, 247, 0.14);
}

.proof-panel {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(209, 225, 247, 0.16);
  border-radius: var(--radius);
  background: rgba(4, 9, 18, 0.7);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.26);
}

.proof-panel img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  object-position: top center;
  filter: saturate(0.98) contrast(1.02) brightness(0.92);
}

.proof-panel-wide {
  min-height: clamp(420px, 39vw, 560px);
}

.proof-panel-wide img {
  object-fit: contain;
  padding: clamp(10px, 1.4vw, 16px);
  background: rgba(3, 8, 17, 0.96);
}

.proof-panel-stack {
  display: grid;
  gap: 14px;
}

.proof-panel-stack .proof-panel {
  min-height: 272px;
}

.proof-panel.portrait img {
  object-fit: contain;
  padding: 14px;
  background: rgba(3, 8, 17, 0.96);
}

.proof-panel figcaption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: grid;
  gap: 6px;
  border: 1px solid rgba(209, 225, 247, 0.14);
  border-radius: var(--radius);
  padding: 12px 14px;
  color: var(--ink);
  background: rgba(3, 8, 17, 0.82);
}

.proof-panel figcaption span {
  color: var(--cyan);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.proof-panel figcaption strong,
.proof-panel-stack figcaption {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.28;
}

.module-directory {
  padding: clamp(42px, 5.6vw, 76px) 0 0;
}

.module-list {
  margin-top: clamp(26px, 3.6vw, 42px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(209, 225, 247, 0.16);
}

.module-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 18px;
  min-height: 180px;
  padding: clamp(20px, 2.8vw, 32px) clamp(14px, 2.2vw, 26px);
  border-bottom: 1px solid rgba(209, 225, 247, 0.14);
}

.module-item:nth-child(odd) {
  border-right: 1px solid rgba(209, 225, 247, 0.14);
}

.module-index {
  color: rgba(151, 190, 238, 0.78);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.module-item h3 {
  margin-top: 8px;
  color: var(--ink-bright);
  font-family: var(--font-display);
  font-size: clamp(1.18rem, 1.4vw, 1.48rem);
  line-height: 1.12;
}

.module-item p {
  max-width: 520px;
  margin-top: 12px;
  color: rgba(216, 225, 237, 0.76);
  line-height: 1.58;
}

.module-routing-note {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(380px, 1.08fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin-top: clamp(44px, 5.5vw, 76px);
  padding: clamp(24px, 3.4vw, 38px) 0;
  border-block: 1px solid rgba(209, 225, 247, 0.14);
}

.module-routing-note ol {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(209, 225, 247, 0.16);
}

.module-routing-note li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: center;
  min-height: 64px;
  border-bottom: 1px solid rgba(209, 225, 247, 0.14);
  color: rgba(230, 239, 250, 0.86);
  font-weight: 700;
}

.module-routing-note li span {
  color: var(--cyan);
  font-family: var(--font-display);
  font-weight: 900;
}

/* Guide and usage frame refinement */
.guide-page,
.cadre-page {
  width: min(1240px, calc(100% - 40px));
}

.guide-hero,
.cadre-hero {
  width: min(1240px, calc(100% - 40px));
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.62fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  padding-bottom: clamp(34px, 4.2vw, 56px);
}

.guide-hero-copy,
.cadre-hero-copy {
  max-width: 860px;
}

.guide-hero-proof,
.cadre-hero-note {
  margin: 0;
  border: 1px solid rgba(209, 225, 247, 0.16);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(12, 26, 45, 0.92), rgba(5, 12, 23, 0.92)),
    linear-gradient(90deg, rgba(65, 211, 145, 0.08), rgba(151, 190, 238, 0.08));
  box-shadow: 0 20px 76px rgba(0, 0, 0, 0.26);
}

.guide-hero-proof {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 0.9;
}

.guide-hero-proof img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
  padding: clamp(14px, 2vw, 22px);
  background: rgba(3, 8, 17, 0.92);
  filter: saturate(0.92) contrast(1.03) brightness(0.9);
}

.guide-hero-proof figcaption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: grid;
  gap: 5px;
  border: 1px solid rgba(209, 225, 247, 0.13);
  border-radius: var(--radius);
  padding: 11px 12px;
  background: rgba(3, 8, 17, 0.84);
}

.guide-hero-proof figcaption strong {
  color: var(--ink-bright);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 850;
}

.guide-hero-proof figcaption span {
  color: rgba(216, 225, 237, 0.72);
  font-size: 0.82rem;
  line-height: 1.45;
}

.guide-flow,
.cadre-rules,
.cadre-trust {
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(470px, 1.16fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: start;
  padding: clamp(24px, 3.2vw, 36px) 0 clamp(44px, 5.5vw, 72px);
  border-bottom: 1px solid rgba(209, 225, 247, 0.14);
}

.guide-flow-copy,
.cadre-rules-copy,
.cadre-trust-copy {
  position: sticky;
  top: calc(var(--header) + 28px);
}

.guide-flow-copy h2,
.guide-examples-head h2,
.guide-faq-copy h2,
.cadre-rules-copy h2,
.cadre-trust-copy h2 {
  margin-top: 16px;
  color: var(--ink-bright);
  font-size: clamp(1.68rem, 2vw, 2.34rem);
  line-height: 1.08;
  font-weight: 800;
  text-wrap: balance;
}

.guide-flow-copy p,
.guide-examples-head p,
.cadre-rules-copy p,
.cadre-trust-copy p {
  margin-top: 18px;
  max-width: 660px;
}

.guide-flow-list,
.guide-example-lines,
.guide-faq-lines,
.cadre-rule-list,
.trust-list {
  border-top: 1px solid rgba(209, 225, 247, 0.16);
}

.guide-flow-list article,
.cadre-rule-list article {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 18px;
  padding: clamp(18px, 2.4vw, 28px) 0;
  border-bottom: 1px solid rgba(209, 225, 247, 0.14);
}

.guide-flow-list span,
.cadre-rule-list span {
  color: rgba(151, 190, 238, 0.82);
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.guide-flow-list h3,
.cadre-rule-list h3 {
  color: var(--ink-bright);
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 1.24vw, 1.3rem);
  line-height: 1.18;
}

.cadre-rule-list h3,
.cadre-rule-list p {
  grid-column: 2;
}

.guide-flow-list p,
.cadre-rule-list p {
  margin-top: 10px;
  color: rgba(216, 225, 237, 0.76);
  line-height: 1.58;
}

.guide-examples,
.guide-faq {
  padding: clamp(42px, 5.6vw, 76px) 0 0;
}

.guide-examples-head {
  max-width: 820px;
}

.guide-example-lines {
  margin-top: clamp(26px, 3.4vw, 40px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.guide-example-lines article {
  min-height: 132px;
  padding: clamp(18px, 2.4vw, 28px) clamp(14px, 2.2vw, 24px);
  border-bottom: 1px solid rgba(209, 225, 247, 0.14);
}

.guide-example-lines article:nth-child(odd) {
  border-right: 1px solid rgba(209, 225, 247, 0.14);
}

.guide-example-lines span {
  display: block;
  color: var(--cyan);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.guide-example-lines p {
  margin-top: 12px;
  color: rgba(230, 239, 250, 0.86);
  font-weight: 700;
  line-height: 1.55;
}

.guide-faq {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(480px, 1.22fr);
  gap: clamp(34px, 5vw, 72px);
  padding-bottom: clamp(58px, 7vw, 94px);
}

.guide-faq-lines details {
  border-bottom: 1px solid rgba(209, 225, 247, 0.14);
  padding: 18px 0;
}

.guide-faq-lines summary {
  min-height: 42px;
  color: var(--ink-bright);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.12vw, 1.14rem);
  font-weight: 850;
  line-height: 1.3;
}

.guide-faq-lines p {
  max-width: 720px;
  margin-top: 10px;
  color: rgba(216, 225, 237, 0.74);
  line-height: 1.6;
}

.cadre-hero-note {
  display: grid;
  gap: 14px;
  padding: clamp(22px, 2.8vw, 34px);
}

.cadre-hero-note span,
.boundary-column > span {
  color: var(--cyan);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cadre-hero-note strong {
  color: var(--ink-bright);
  font-family: var(--font-display);
  font-size: clamp(1.42rem, 1.7vw, 1.86rem);
  line-height: 1.08;
}

.cadre-hero-note p {
  color: rgba(216, 225, 237, 0.76);
  line-height: 1.58;
}

.cadre-boundaries {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(26px, 4vw, 56px);
  padding: clamp(24px, 3.2vw, 36px) 0 clamp(44px, 5.5vw, 72px);
  border-bottom: 1px solid rgba(209, 225, 247, 0.14);
}

.boundary-column {
  border-top: 1px solid rgba(209, 225, 247, 0.18);
}

.boundary-column ul {
  display: grid;
  gap: 0;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.boundary-column li {
  min-height: 58px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(209, 225, 247, 0.12);
  color: rgba(230, 239, 250, 0.84);
  font-weight: 700;
  line-height: 1.45;
}

.boundary-column.allow li::before,
.boundary-column.deny li::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  margin-right: 12px;
  border-radius: 50%;
}

.boundary-column.allow li::before {
  background: var(--green);
  box-shadow: 0 0 18px rgba(65, 211, 145, 0.28);
}

.boundary-column.deny li::before {
  background: oklch(68% 0.12 34);
  box-shadow: 0 0 18px rgba(255, 122, 61, 0.22);
}

.trust-list article {
  display: grid;
  gap: 9px;
  padding: clamp(18px, 2.4vw, 26px) 0;
  border-bottom: 1px solid rgba(209, 225, 247, 0.14);
}

.trust-list strong {
  color: var(--ink-bright);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.18vw, 1.24rem);
  font-weight: 850;
}

.trust-list p {
  color: rgba(216, 225, 237, 0.74);
  line-height: 1.58;
}

/* Guide and usage frame professional pass */
.guide-hero-pro,
.cadre-hero-pro {
  grid-template-columns: minmax(0, 0.82fr) minmax(440px, 0.78fr);
  align-items: center;
  gap: clamp(42px, 5.6vw, 86px);
}

.guide-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 24px;
}

.guide-hero-points span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(209, 225, 247, 0.16);
  border-radius: var(--radius);
  padding: 0 12px;
  color: rgba(230, 239, 250, 0.78);
  font-size: 0.78rem;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.045);
}

.guide-proof-stage {
  position: relative;
  min-height: clamp(390px, 32vw, 540px);
}

.guide-proof-main,
.guide-proof-inset,
.cadre-scope-screen,
.cadre-evidence figure,
.guide-strip-screen {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(209, 225, 247, 0.18);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(12, 26, 45, 0.94), rgba(5, 12, 23, 0.94)),
    linear-gradient(90deg, rgba(65, 211, 145, 0.07), rgba(151, 190, 238, 0.08));
  box-shadow:
    0 24px 86px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(244, 247, 251, 0.07);
}

.guide-proof-main {
  position: absolute;
  inset: 0 12% 12% 0;
}

.guide-proof-main img,
.guide-strip-screen img,
.cadre-scope-screen img,
.cadre-evidence img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top left;
  background: rgba(4, 9, 18, 0.96);
  filter: saturate(0.98) contrast(1.03) brightness(0.92);
}

.guide-proof-main figcaption,
.guide-proof-inset figcaption,
.guide-strip-screen figcaption,
.cadre-scope-screen figcaption,
.cadre-evidence figcaption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  border: 1px solid rgba(209, 225, 247, 0.14);
  border-radius: var(--radius);
  padding: 12px 13px;
  color: rgba(230, 239, 250, 0.88);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.35;
  background: rgba(3, 8, 17, 0.82);
  backdrop-filter: blur(14px);
}

.guide-proof-inset {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(42%, 270px);
  aspect-ratio: 1 / 0.92;
  padding: 12px 12px 50px;
}

.guide-proof-inset img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: calc(var(--radius) - 2px);
  background: rgba(4, 9, 18, 0.96);
  filter: saturate(0.98) contrast(1.03) brightness(0.94);
}

.guide-flow-pro,
.guide-examples-pro,
.guide-faq-pro,
.cadre-rules-pro,
.cadre-trust-pro {
  border-bottom-color: rgba(209, 225, 247, 0.11);
}

.guide-product-strip,
.cadre-scope,
.cadre-evidence {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(360px, 0.88fr) minmax(240px, 0.42fr);
  gap: 14px;
  align-items: start;
  padding: clamp(40px, 5.6vw, 78px) 0;
  border-bottom: 1px solid rgba(209, 225, 247, 0.12);
}

.guide-product-strip > div,
.cadre-scope-copy,
.cadre-evidence > div {
  align-self: start;
  max-width: 540px;
}

.guide-product-strip h2,
.cadre-scope h2,
.cadre-evidence h2 {
  margin-top: 16px;
  color: var(--ink-bright);
  font-size: clamp(1.58rem, 1.85vw, 2.18rem);
  line-height: 1.1;
  font-weight: 800;
  text-wrap: balance;
}

.guide-product-strip p,
.cadre-scope p,
.cadre-evidence p {
  margin-top: 16px;
  max-width: 600px;
}

.guide-strip-screen.wide {
  min-height: clamp(320px, 28vw, 470px);
}

.guide-strip-screen.portrait {
  min-height: clamp(320px, 28vw, 470px);
  padding: 14px 14px 52px;
}

.guide-strip-screen.portrait img {
  object-position: center;
}

.guide-examples-pro {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(520px, 1.28fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: start;
  padding-bottom: clamp(42px, 5.6vw, 72px);
  border-bottom: 1px solid rgba(209, 225, 247, 0.12);
}

.guide-examples-pro .guide-examples-head {
  position: sticky;
  top: calc(var(--header) + 28px);
}

.guide-examples-pro .guide-example-lines {
  margin-top: 0;
}

.guide-faq-pro {
  padding-top: clamp(44px, 5.8vw, 78px);
}

.guide-cta {
  margin-top: 0;
}

.cadre-guardrail {
  display: grid;
  gap: 16px;
  border: 1px solid rgba(209, 225, 247, 0.16);
  border-radius: var(--radius);
  padding: clamp(22px, 2.8vw, 34px);
  background:
    linear-gradient(145deg, rgba(10, 24, 42, 0.94), rgba(5, 12, 23, 0.94)),
    radial-gradient(circle at 95% 0%, rgba(65, 211, 145, 0.16), transparent 16rem);
  box-shadow: 0 20px 76px rgba(0, 0, 0, 0.26);
}

.cadre-guardrail span {
  color: var(--cyan);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cadre-guardrail strong {
  color: var(--ink-bright);
  font-family: var(--font-display);
  font-size: clamp(1.42rem, 1.7vw, 1.86rem);
  line-height: 1.08;
}

.cadre-guardrail ul {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cadre-guardrail li {
  border-top: 1px solid rgba(209, 225, 247, 0.12);
  padding: 13px 0;
  color: rgba(230, 239, 250, 0.82);
  font-weight: 750;
  line-height: 1.45;
}

.cadre-scope {
  grid-template-columns: minmax(0, 0.8fr) minmax(360px, 0.46fr);
}

.cadre-scope-screen {
  min-height: 420px;
  padding: 22px 22px 58px;
}

.cadre-scope-screen img {
  object-position: center;
}

.cadre-boundaries-pro {
  gap: clamp(32px, 5vw, 78px);
}

.cadre-boundaries-pro .boundary-column {
  padding-top: 18px;
}

.cadre-evidence {
  grid-template-columns: minmax(320px, 0.42fr) minmax(0, 0.72fr);
}

.cadre-evidence figure {
  min-height: 430px;
  padding: 18px 18px 62px;
}

.cadre-evidence img {
  object-position: center top;
}

.cadre-evidence > div {
  align-self: center;
  max-width: 660px;
  margin-left: auto;
}

@keyframes titleIn {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes scanMove {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  58% {
    opacity: 1;
  }
  72% {
    transform: translateY(620%);
    opacity: 0;
  }
}

@keyframes depthPulse {
  0%,
  100% {
    transform: translateY(-8px);
    opacity: 0.28;
  }
  50% {
    transform: translateY(8px);
    opacity: 0.52;
  }
}

@keyframes chipFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

@keyframes arrowDrop {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 1120px) {
  .hero-stage {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    min-height: 460px;
  }

  .frame-section,
  .module-lanes,
  .example-wall,
  .method-rail,
  .showcase-board,
  .platform-proof,
  .micro-screens,
  .module-screens {
    grid-template-columns: 1fr;
  }

  .showcase-main,
  .module-screen.large {
    min-height: 400px;
  }

  .module-product-stage {
    width: 100%;
    margin-left: 0;
    transform: none;
  }

  .module-screen.large,
  .module-screen.news {
    grid-column: auto;
    grid-row: auto;
  }

  .module-screen.news {
    min-height: 320px;
  }

  .showcase-side {
    grid-template-columns: 1fr 1fr;
  }

  .micro-screens {
    grid-template-columns: 1fr 1fr;
  }

  .lane-large {
    grid-row: auto;
    min-height: 280px;
  }

  .method-rail article + article,
  .example-wall article + article {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .frame-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  :root {
    --header: 64px;
  }

  .nav {
    width: min(var(--wide), calc(100% - 28px));
  }

  .nav-toggle {
    display: inline-grid;
    place-items: center;
  }

  .nav-links {
    position: fixed;
    inset: calc(var(--header) + 10px) 14px auto 14px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px;
    /* Opaque, sans exception. Les 4 % de transparence d'un rgba(_, 0.96)
       paraissent négligeables sur le papier, mais le panneau se superpose à des
       titres blancs en gras sur fond sombre : ces 4 % suffisaient à les laisser
       transparaître et à rendre les liens du menu illisibles. */
    background: rgb(2 7 15);
    box-shadow: var(--shadow);
  }

  .nav-links[data-open="true"] {
    display: flex;
  }

  .nav-links a {
    justify-content: center;
  }

  .home-hero {
    min-height: auto;
  }

  .hero-stage {
    width: min(var(--wide), calc(100% - 28px));
    min-height: auto;
    padding: 36px 0 72px;
    gap: 28px;
  }

  .hero-title {
    max-width: 100%;
    overflow-wrap: normal;
    text-wrap: wrap;
    font-size: clamp(2.05rem, 8.7vw, 2.65rem);
    line-height: 1.04;
  }

  .hero-visual {
    min-height: 340px;
  }

  .scan-frame {
    inset: 0;
  }

  .orbit-chip {
    display: none;
  }

  .hud {
    max-width: calc(100% - 28px);
  }

  .scroll-cue {
    bottom: 18px;
  }

  .method-section,
  .modules-strip,
  .platform-showcase,
  .frame-section,
  .examples-section,
  .final-panel,
  .page-hero,
  .content-page,
  .section {
    width: min(var(--content), calc(100% - 28px));
  }

  .platform-showcase {
    width: min(var(--wide), calc(100% - 28px));
  }

  .method-section,
  .modules-strip,
  .platform-showcase,
  .frame-section,
  .examples-section {
    padding: 58px 0;
  }

  .module-grid,
  .method-grid,
  .audience-grid,
  .legal-grid,
  .exercise-grid,
  .showcase-side,
  .micro-screens {
    grid-template-columns: 1fr;
  }

  .module {
    grid-template-columns: 1fr;
  }

  .module img {
    max-height: 240px;
  }

  .final-panel,
  .cta-band,
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .platform-proof article {
    min-height: auto;
  }

  .module-product-stage {
    width: 100%;
    padding: 24px;
  }

  .showcase-card.selector-card {
    min-height: 300px;
  }

  .micro-screens figure,
  .micro-screens img {
    min-height: 260px;
  }

  .micro-screens figure:nth-child(3),
  .micro-screens figure:nth-child(3) img {
    min-height: 420px;
  }
}

@media (max-width: 540px) {
  .brand img {
    width: 36px;
    height: 36px;
  }

  .hero-actions,
  .section-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .statement-track p:nth-child(n + 3) {
    display: none;
  }

  .button {
    width: 100%;
    padding-inline: 16px;
    text-align: center;
    white-space: normal;
  }

  .hero-visual {
    min-height: 300px;
  }

  .showcase-main,
  .showcase-card.warm,
  .module-screen,
  .module-screen.large {
    min-height: 280px;
  }

  .micro-screens figure,
  .micro-screens img {
    min-height: 260px;
  }

  .micro-screens figure:nth-child(3),
  .micro-screens figure:nth-child(3) img {
    min-height: 390px;
  }

  .showcase-main figcaption,
  .showcase-card figcaption,
  .module-screen figcaption {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 11px 12px;
  }

  .hero-lead {
    font-size: 1rem;
  }

  .method-rail article,
  .example-wall article {
    min-height: auto;
  }

  .guide-item {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 1120px) {
  .hero-stage {
    grid-template-columns: 1fr;
    max-width: 920px;
  }

  .hero-product {
    min-height: clamp(420px, 60vw, 620px);
  }

  .product-window-main {
    inset: 0 8% 9% 0;
  }

  .product-window-selector {
    width: min(28%, 250px);
  }

  .product-window-training {
    width: min(40%, 350px);
  }

  .module-orientation,
  .module-hero,
  .module-proof-strip,
  .module-routing-note {
    grid-template-columns: 1fr;
  }

  .module-hero {
    align-items: start;
  }

  .module-hero-proof {
    max-width: 720px;
  }

  .orientation-copy {
    position: static;
  }

  .proof-panel-wide {
    min-height: 420px;
  }

  .proof-panel-stack {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 860px) {
  .hero-stage {
    padding: 34px 0 56px;
  }

  .hero-title {
    font-size: clamp(2rem, 8vw, 2.7rem);
  }

  .hero-product {
    min-height: auto;
  }

  .product-window-main {
    position: relative;
    inset: auto;
    aspect-ratio: 16 / 10;
  }

  .product-window-selector,
  .product-window-training {
    display: none;
  }

  .product-window-main figcaption {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 12px;
  }

  .method-visual img,
  .module-atlas img,
  .module-screen.large img,
  .module-screen.portrait img {
    padding: 10px;
  }

  .section-intro h2,
  .section-header h2,
  .frame-copy h2,
  .final-panel h2,
  .page-hero h1,
  .showcase-copy h2,
  .cta-band h2 {
    font-size: clamp(1.65rem, 7vw, 2.3rem);
  }

  .modules-page {
    width: min(100% - 28px, var(--content));
  }

  .module-hero {
    width: min(100% - 28px, var(--content));
    gap: 24px;
  }

  .module-hero-proof {
    aspect-ratio: 16 / 10;
  }

  .module-orientation {
    padding-top: 12px;
  }

  .orientation-list article {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .orientation-list p {
    grid-column: auto;
    margin-top: 0;
  }

  .module-proof-strip {
    padding: 38px 0;
  }

  .proof-panel-stack,
  .module-list {
    grid-template-columns: 1fr;
  }

  .proof-panel-wide {
    min-height: 340px;
  }

  .proof-panel-stack .proof-panel {
    min-height: 250px;
  }

  .module-item {
    grid-template-columns: 42px 1fr;
    min-height: auto;
    padding-inline: 0;
  }

  .module-item:nth-child(odd) {
    border-right: 0;
  }

  .module-routing-note {
    margin-top: 42px;
  }
}

@media (max-width: 540px) {
  .product-window-main {
    aspect-ratio: 4 / 3;
  }

  .product-window-main figcaption strong {
    display: none;
  }

  .method-visual img,
  .module-atlas img {
    height: 300px;
  }

  .proof-panel-wide {
    min-height: 300px;
  }

  .module-hero-proof figcaption {
    display: none;
  }

  .proof-panel figcaption {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 10px 11px;
  }

  .proof-panel-wide figcaption strong {
    display: none;
  }

  .module-routing-note li {
    grid-template-columns: 34px 1fr;
    min-height: 58px;
  }
}

@media (max-width: 1120px) {
  .guide-hero,
  .cadre-hero,
  .guide-flow,
  .guide-faq,
  .cadre-rules,
  .cadre-trust {
    grid-template-columns: 1fr;
  }

  .guide-hero-proof,
  .cadre-hero-note {
    max-width: 720px;
  }

  .guide-flow-copy,
  .cadre-rules-copy,
  .cadre-trust-copy {
    position: static;
  }
}

@media (max-width: 860px) {
  .guide-page,
  .cadre-page,
  .guide-hero,
  .cadre-hero {
    width: min(100% - 28px, var(--content));
  }

  .guide-hero,
  .cadre-hero {
    gap: 24px;
  }

  .guide-hero-proof {
    aspect-ratio: 4 / 3;
  }

  .guide-flow,
  .cadre-rules,
  .cadre-trust {
    padding-top: 12px;
  }

  .guide-example-lines,
  .cadre-boundaries {
    grid-template-columns: 1fr;
  }

  .guide-example-lines article:nth-child(odd) {
    border-right: 0;
  }

  .guide-flow-list article,
  .cadre-rule-list article {
    grid-template-columns: 42px minmax(0, 1fr);
  }
}

@media (max-width: 540px) {
  .guide-hero-proof figcaption {
    position: static;
    border-inline: 0;
    border-bottom: 0;
    border-radius: 0;
  }

  .guide-hero-proof {
    aspect-ratio: auto;
  }

  .guide-hero-proof img {
    height: 290px;
    padding: 10px;
  }

  .cadre-hero-note {
    padding: 20px;
  }

  .guide-flow-list article,
  .cadre-rule-list article {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .cadre-rule-list h3,
  .cadre-rule-list p {
    grid-column: auto;
  }

  .guide-example-lines article {
    min-height: auto;
    padding-inline: 0;
  }

  .boundary-column li {
    min-height: auto;
    align-items: flex-start;
    padding: 14px 0;
  }
}

@media (max-width: 1120px) {
  .guide-hero-pro,
  .cadre-hero-pro,
  .guide-product-strip,
  .guide-examples-pro,
  .cadre-scope,
  .cadre-evidence {
    grid-template-columns: 1fr;
  }

  .guide-proof-stage {
    max-width: 820px;
  }

  .guide-product-strip,
  .cadre-scope,
  .cadre-evidence {
    gap: 18px;
  }

  .guide-examples-pro .guide-examples-head {
    position: static;
  }

  .guide-strip-screen.portrait {
    max-width: 520px;
  }

  .cadre-evidence > div {
    margin-left: 0;
  }
}

@media (max-width: 860px) {
  .guide-proof-stage {
    min-height: auto;
  }

  .guide-proof-main {
    position: relative;
    inset: auto;
    aspect-ratio: 16 / 10;
  }

  .guide-proof-inset {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(100%, 420px);
    margin-top: 12px;
  }

  .guide-product-strip,
  .cadre-scope,
  .cadre-evidence {
    padding: 36px 0;
  }

  .guide-strip-screen.wide,
  .guide-strip-screen.portrait,
  .cadre-scope-screen,
  .cadre-evidence figure {
    min-height: 320px;
  }

  .guide-strip-screen.portrait,
  .cadre-scope-screen,
  .cadre-evidence figure {
    padding: 12px 12px 52px;
  }
}

@media (max-width: 540px) {
  .guide-hero-points {
    gap: 8px;
  }

  .guide-hero-points span {
    width: 100%;
  }

  .guide-proof-main {
    aspect-ratio: 4 / 3;
  }

  .guide-proof-main figcaption,
  .guide-proof-inset figcaption,
  .guide-strip-screen figcaption,
  .cadre-scope-screen figcaption,
  .cadre-evidence figcaption {
    position: static;
    border-inline: 0;
    border-bottom: 0;
    border-radius: 0;
  }

  .guide-proof-inset,
  .guide-strip-screen.portrait,
  .cadre-scope-screen,
  .cadre-evidence figure {
    padding-bottom: 0;
  }

  .guide-proof-inset img,
  .guide-strip-screen.portrait img,
  .cadre-scope-screen img,
  .cadre-evidence img {
    height: 280px;
  }

  .cadre-guardrail {
    padding: 20px;
  }
}

.connected-experience,
.agents-missions,
.module-scenarios,
.guide-toolbox,
.cadre-agent-boundaries {
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(54px, 7vw, 96px) 0;
  border-top: 1px solid rgba(209, 225, 247, 0.13);
}

.experience-grid,
.agent-mission-grid,
.scenario-grid,
.toolbox-grid,
.agent-boundary-list {
  display: grid;
  gap: 12px;
  margin-top: clamp(24px, 3.4vw, 42px);
}

.experience-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.agent-mission-grid,
.scenario-grid,
.toolbox-grid,
.agent-boundary-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.experience-grid article,
.agent-mission-grid article,
.scenario-grid article,
.toolbox-grid article,
.agent-boundary-list article {
  min-height: 190px;
  display: grid;
  align-content: start;
  gap: 12px;
  border: 1px solid rgba(209, 225, 247, 0.15);
  border-radius: var(--radius);
  padding: clamp(18px, 2vw, 24px);
  background:
    linear-gradient(155deg, rgba(12, 25, 43, 0.82), rgba(7, 13, 25, 0.74)),
    linear-gradient(105deg, rgba(151, 190, 238, 0.06), rgba(65, 211, 145, 0.05));
  box-shadow:
    0 18px 58px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(244, 247, 251, 0.06);
}

.experience-grid article span,
.agent-mission-grid article span {
  color: var(--cyan);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.experience-grid strong,
.agent-mission-grid h3,
.scenario-grid strong,
.toolbox-grid strong,
.agent-boundary-list strong {
  color: var(--ink-bright);
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.12vw, 1.18rem);
  font-weight: 900;
  line-height: 1.18;
}

.experience-grid p,
.agent-mission-grid p,
.scenario-grid p,
.toolbox-grid p,
.agent-boundary-list p {
  color: rgba(216, 225, 237, 0.76);
  line-height: 1.58;
}

.agent-mission-grid article:first-child,
.scenario-grid article:first-child {
  background:
    linear-gradient(155deg, rgba(14, 38, 58, 0.88), rgba(7, 13, 25, 0.78)),
    linear-gradient(105deg, rgba(65, 211, 145, 0.08), rgba(151, 190, 238, 0.06));
}

.agent-mission-grid article:nth-child(2),
.toolbox-grid article:nth-child(2) {
  background:
    linear-gradient(155deg, rgba(25, 27, 48, 0.86), rgba(7, 13, 25, 0.78)),
    linear-gradient(105deg, rgba(151, 190, 238, 0.08), rgba(243, 184, 92, 0.05));
}

.agent-mission-grid article:nth-child(3),
.agent-boundary-list article:nth-child(3) {
  background:
    linear-gradient(155deg, rgba(28, 24, 36, 0.86), rgba(7, 13, 25, 0.78)),
    linear-gradient(105deg, rgba(243, 184, 92, 0.08), rgba(151, 190, 238, 0.04));
}

.guide-toolbox {
  border-bottom: 1px solid rgba(209, 225, 247, 0.13);
}

.guide-toolbox-copy {
  max-width: 780px;
}

.guide-toolbox-copy h2,
.cadre-agent-boundaries h2 {
  margin-top: 16px;
  color: var(--ink-bright);
  font-size: clamp(1.68rem, 2vw, 2.34rem);
  line-height: 1.08;
  font-weight: 800;
  text-wrap: balance;
}

.guide-toolbox-copy p,
.cadre-agent-boundaries > div > p {
  margin-top: 18px;
  max-width: 720px;
}

.cadre-agent-boundaries {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(520px, 1.28fr);
  gap: clamp(28px, 4.6vw, 68px);
  align-items: start;
}

.cadre-agent-boundaries > div:first-child {
  position: sticky;
  top: calc(var(--header) + 28px);
}

.agent-boundary-list {
  margin-top: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.agent-boundary-list article {
  min-height: 166px;
}

@media (max-width: 1120px) {
  .experience-grid,
  .agent-mission-grid,
  .scenario-grid,
  .toolbox-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cadre-agent-boundaries {
    grid-template-columns: 1fr;
  }

  .cadre-agent-boundaries > div:first-child {
    position: static;
  }
}

@media (max-width: 680px) {
  .connected-experience,
  .agents-missions,
  .module-scenarios,
  .guide-toolbox,
  .cadre-agent-boundaries {
    width: min(100% - 28px, var(--content));
    padding: 42px 0;
  }

  .experience-grid,
  .agent-mission-grid,
  .scenario-grid,
  .toolbox-grid,
  .agent-boundary-list {
    grid-template-columns: 1fr;
  }

  .experience-grid article,
  .agent-mission-grid article,
  .scenario-grid article,
  .toolbox-grid article,
  .agent-boundary-list article {
    min-height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }

  .hero-title span,
  [data-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* Impeccable final audit pass */
:root {
  --cyan: oklch(72% 0.075 215);
  --green: oklch(70% 0.105 154);
  --amber: oklch(78% 0.11 82);
  --caption-bg: oklch(8% 0.024 255);
  --caption-line: rgba(221, 234, 250, 0.24);
}

body {
  background:
    linear-gradient(125deg, rgba(86, 112, 148, 0.1), transparent 24rem),
    linear-gradient(238deg, rgba(132, 88, 70, 0.07), transparent 30rem),
    linear-gradient(180deg, oklch(10% 0.028 255) 0%, oklch(14% 0.028 250) 46%, oklch(10% 0.026 270) 100%);
}

body::before {
  opacity: 0.62;
}

body::after {
  background:
    linear-gradient(120deg, transparent 0 36%, rgba(124, 146, 185, 0.045) 36% 52%, transparent 52% 100%),
    linear-gradient(180deg, rgba(2, 7, 15, 0), rgba(2, 7, 15, 0.72));
}

.hero-kicker,
.eyebrow,
.statement-track p,
.tag,
.lane span,
.orientation-list span,
.guide-example-lines span,
.cadre-hero-note span,
.boundary-column > span,
.cadre-guardrail span,
.product-window-main figcaption span,
.product-window-selector figcaption,
.product-window-training figcaption,
.showcase-main figcaption span,
.showcase-card figcaption span,
.method-visual span,
.module-atlas span,
.proof-panel figcaption span,
.experience-grid article span,
.agent-mission-grid article span {
  text-transform: none;
  letter-spacing: 0.035em;
  font-size: max(0.82rem, 13.12px);
}

.hero-kicker::before,
.eyebrow::before {
  background: oklch(74% 0.08 78);
  box-shadow: 0 0 14px rgba(221, 186, 104, 0.22);
}

.hero-lead,
.section-intro p,
.section-header p,
.frame-copy p,
.page-hero p,
.showcase-copy p,
.guide-flow-copy p,
.guide-examples-head p,
.guide-toolbox-copy p,
.guide-faq-lines p,
.cadre-rules-copy p,
.cadre-trust-copy p,
.cadre-scope p,
.cadre-evidence p,
.cadre-agent-boundaries > div > p {
  max-width: 68ch;
}

.section-intro h2,
.section-header h2,
.frame-copy h2,
.final-panel h2,
.page-hero h1,
.showcase-copy h2,
.cta-band h2,
.guide-flow-copy h2,
.guide-examples-head h2,
.guide-faq-copy h2,
.guide-toolbox-copy h2,
.cadre-rules-copy h2,
.cadre-trust-copy h2,
.cadre-scope h2,
.cadre-evidence h2,
.cadre-agent-boundaries h2 {
  line-height: 1.14;
}

.button.primary,
.nav-links .nav-cta {
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(244, 247, 251, 0.16);
}

.button.secondary {
  color: var(--ink-bright);
  border-color: rgba(221, 234, 250, 0.28);
  background: oklch(14% 0.028 252);
}

.button.secondary:hover {
  color: var(--ink-bright);
  background: oklch(17% 0.032 252);
}

.button.primary:hover,
.nav-links .nav-cta:hover {
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(244, 247, 251, 0.18);
}

.product-window-main figcaption,
.method-visual figcaption,
.module-atlas figcaption,
.showcase-main figcaption,
.showcase-card figcaption,
.module-screen figcaption,
.micro-screens figcaption,
.module-hero-proof figcaption,
.proof-panel figcaption,
.guide-hero-proof figcaption,
.guide-proof-main figcaption,
.guide-proof-inset figcaption,
.guide-strip-screen figcaption,
.cadre-scope-screen figcaption,
.cadre-evidence figcaption {
  border-color: var(--caption-line);
  color: var(--ink-bright);
  background: var(--caption-bg);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.32);
  backdrop-filter: none;
}

.product-window-selector figcaption,
.product-window-training figcaption {
  display: block;
  border: 1px solid var(--caption-line);
  border-radius: var(--radius);
  padding: 8px 10px;
  background: var(--caption-bg);
}

.product-window-selector figcaption,
.product-window-training figcaption,
.module-hero-proof figcaption,
.proof-panel figcaption,
.guide-proof-main figcaption,
.guide-proof-inset figcaption,
.guide-strip-screen figcaption,
.cadre-scope-screen figcaption,
.cadre-evidence figcaption {
  color: var(--ink-bright);
}

.method-visual strong,
.module-atlas strong,
.showcase-main figcaption strong,
.showcase-card figcaption strong,
.module-screen figcaption,
.proof-panel figcaption strong,
.proof-panel-stack figcaption,
.guide-proof-main figcaption,
.guide-proof-inset figcaption,
.guide-strip-screen figcaption,
.cadre-scope-screen figcaption,
.cadre-evidence figcaption,
.micro-screens strong {
  line-height: 1.38;
}

.hero-title,
.lane strong,
.method-rail h3,
.module-item h3,
.guide-flow-list h3,
.cadre-rule-list h3,
.final-panel h2,
.cta-band h2 {
  line-height: 1.34;
}

.hero-lead,
.section-intro p,
.section-header p,
.frame-copy p,
.page-hero p,
.showcase-copy p,
.guide-flow-copy p,
.guide-examples-head p,
.guide-toolbox-copy p,
.guide-faq-lines p,
.cadre-rules-copy p,
.cadre-trust-copy p,
.cadre-scope p,
.cadre-evidence p,
.cadre-agent-boundaries > div > p {
  max-width: 64ch;
}

.showcase-main,
.showcase-card,
.module-screen,
.method-visual,
.module-atlas,
.micro-screens figure,
.module-product-stage,
.module-hero-proof,
.proof-panel,
.guide-proof-main,
.guide-proof-inset,
.cadre-scope-screen,
.cadre-evidence figure,
.guide-strip-screen {
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(244, 247, 251, 0.07);
}

.platform-showcase::before {
  background:
    linear-gradient(118deg, rgba(151, 190, 238, 0.09), transparent 34%),
    linear-gradient(290deg, rgba(255, 184, 75, 0.08), transparent 38%),
    repeating-linear-gradient(90deg, rgba(244, 247, 251, 0.036) 0 1px, transparent 1px 112px);
}

.statement-band {
  background:
    linear-gradient(90deg, rgba(4, 18, 36, 0.82), rgba(16, 32, 46, 0.66), rgba(39, 34, 42, 0.6)),
    linear-gradient(90deg, rgba(151, 190, 238, 0.055), rgba(221, 186, 104, 0.045));
}

.showcase-card.explain,
.module-product-stage,
.cadre-guardrail {
  background:
    linear-gradient(145deg, rgba(12, 26, 45, 0.95), rgba(5, 12, 23, 0.94)),
    linear-gradient(90deg, rgba(151, 190, 238, 0.055), rgba(255, 184, 75, 0.04));
}

.product-window,
.showcase-main,
.showcase-card,
.micro-screens figure,
.module-hero-proof,
.proof-panel,
.guide-proof-main,
.guide-proof-inset,
.guide-strip-screen,
.cadre-scope-screen,
.cadre-evidence figure {
  background:
    linear-gradient(145deg, rgba(10, 23, 40, 0.96), rgba(5, 12, 23, 0.96)),
    linear-gradient(90deg, rgba(151, 190, 238, 0.045), rgba(221, 186, 104, 0.035));
}

.micro-screens figure::before {
  background:
    linear-gradient(180deg, transparent 42%, rgba(2, 7, 15, 0.94)),
    linear-gradient(110deg, rgba(244, 247, 251, 0.04), transparent 34%);
}

.frame-card p,
.experience-grid p,
.agent-mission-grid p,
.scenario-grid p,
.toolbox-grid p,
.agent-boundary-list p,
.module-item p,
.orientation-list p,
.guide-flow-list p,
.cadre-rule-list p,
.trust-list p,
.boundary-column li,
.cadre-guardrail li {
  color: rgba(230, 239, 250, 0.84);
}

.hero-rules span,
.guide-hero-points span {
  color: var(--ink-bright);
  background: oklch(14% 0.028 252);
  border-color: rgba(221, 234, 250, 0.22);
}

.method-rail span {
  width: auto;
  min-width: 72px;
  padding: 0 14px;
  border-radius: var(--radius);
  color: var(--ink-bright);
  background: rgba(209, 225, 247, 0.11);
}

.platform-proof span,
.experience-grid article span,
.module-index,
.guide-flow-list span,
.cadre-rule-list span,
.module-routing-note li span {
  color: oklch(83% 0.07 82);
}

.module-item {
  grid-template-columns: 76px minmax(0, 1fr);
}

.module-index {
  font-size: 0.78rem;
  letter-spacing: 0.035em;
}

.module-routing-note ol {
  padding-block: 8px;
}

.module-routing-note li {
  grid-template-columns: 92px 1fr;
  padding-block: 8px;
}

.guide-flow-list article,
.cadre-rule-list article {
  grid-template-columns: 94px minmax(0, 1fr);
}

.guide-flow-list span,
.cadre-rule-list span {
  font-size: 0.8rem;
  letter-spacing: 0.035em;
}

.module-hero-proof > figcaption {
  color: rgb(244, 247, 251) !important;
  background: rgb(3, 8, 17) !important;
  border-color: rgba(221, 234, 250, 0.28) !important;
}

.module-hero-proof[data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
/* Parcours ProPM — expérience cinématographique pilotée par le scroll. */

.ps-root {
  position: relative;
  background: var(--bg);
}

/* La piste ne porte que la hauteur de scroll. Elle est calculée en JS à partir
   du nombre de séquences ; une hauteur de repli est posée ici pour qu'aucun
   décalage de mise en page ne survienne avant l'exécution du script. */
.ps-track {
  position: relative;
  height: 900vh;
}

/* L'en-tête est collant ET occupe l'espace du flux. La fenêtre du film se cale
   donc juste dessous et retranche sa hauteur, sinon elle déborde du viewport et
   sa partie haute reste masquée derrière l'en-tête pendant tout le défilement. */
.ps-viewport {
  position: sticky;
  top: var(--header, 66px);
  height: calc(100svh - var(--header, 66px));
  overflow: hidden;
  background: var(--panel-deep, #060d18);
}

.ps-stage {
  position: absolute;
  inset: 0;
}

.ps-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  will-change: opacity;
}

/* La séquence d'images utilise la même classe que la vidéo : même cadrage,
   même révélation, seul le mode de rendu change. */
.ps-scene__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* La vidéo ne remplace le poster qu'une fois une image réellement peinte. */
.ps-scene.has-clip .ps-scene__video {
  opacity: 1;
}

/* Voile de lisibilité : le texte passe sur des plans nocturnes très contrastés. */
.ps-viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  background:
    linear-gradient(180deg, rgb(4 9 18 / 62%) 0%, rgb(4 9 18 / 12%) 34%, rgb(4 9 18 / 78%) 100%),
    linear-gradient(90deg, rgb(4 9 18 / 72%) 0%, rgb(4 9 18 / 30%) 42%, rgb(4 9 18 / 0%) 68%);
}

.ps-copy-layer {
  position: absolute;
  inset: 0;
  z-index: 300;
  display: grid;
  align-items: end;
  padding:
    clamp(1.75rem, 5svh, 3rem)
    clamp(1.25rem, 5vw, 5rem)
    calc(clamp(2rem, 6svh, 4.5rem) + env(safe-area-inset-bottom));
  pointer-events: none;
  overflow: hidden;
}

/* La colonne reste étroite pour que le texte n'empiète jamais sur le sujet, qui
   se tient au centre ou à droite du cadre sur la totalité des plans. C'est ce
   qui garde les quatre barrettes lisibles sur la dernière image. */
.ps-copy {
  grid-area: 1 / 1;
  max-width: min(34rem, 56vw);
  opacity: 0;
  transition: opacity 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ps-copy .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.9rem;
  color: var(--muted-strong, #d6e2f5);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ps-copy h2,
.ps-copy h1 {
  margin: 0 0 0.75rem;
  color: var(--ink-bright, #fff);
  font-family: var(--font-display);
  /* La borne haute dépend aussi de la hauteur : sur un écran bas, un titre
     dimensionné à la seule largeur déborde sous l'en-tête. */
  font-size: clamp(1.6rem, min(4.2vw, 7.4svh), 3.6rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgb(3 8 16 / 55%);
}

.ps-copy p {
  margin: 0;
  max-width: 34rem;
  color: var(--muted-strong, #d6e2f5);
  font-size: clamp(0.98rem, 1.3vw, 1.15rem);
  line-height: 1.6;
  text-shadow: 0 1px 14px rgb(3 8 16 / 60%);
}

.ps-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.6rem;
  pointer-events: auto;
}

.ps-progress-rail {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 320;
  height: 3px;
  background: rgb(255 255 255 / 12%);
}

.ps-progress {
  height: 100%;
  background: var(--blue, #5b8cf5);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* Repli sans JavaScript : la piste reprend une hauteur normale et les scènes
   se lisent comme une suite d'images fixes légendées. Le contenu reste donc
   entièrement accessible même si le script ne s'exécute jamais. */
.ps-root:not(.is-mounted) .ps-track {
  height: auto;
}

.ps-root:not(.is-mounted) .ps-viewport {
  position: static;
  height: auto;
}

.ps-root:not(.is-mounted) .ps-stage {
  position: static;
}

.ps-root:not(.is-mounted) .ps-copy-layer {
  position: static;
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.ps-root:not(.is-mounted) .ps-copy {
  grid-area: auto;
  opacity: 1;
  pointer-events: auto;
}

/* Mouvement réduit : aucune vidéo n'est téléchargée par le moteur. Les posters
   restent affichés et les textes ne dépendent d'aucune animation. */
@media (prefers-reduced-motion: reduce) {
  .ps-scene,
  .ps-scene__video,
  .ps-copy {
    transition: none;
  }
}

.ps-root.is-reduced .ps-copy {
  transition: none;
}

/* Bande d'accès placée après le film : elle donne du contenu indexable et une
   porte de sortie vers chaque section, sans reprendre la grille de cartes
   uniformes qui alourdissait l'ancienne page d'accueil. */
.ps-access {
  max-width: var(--content, 1160px);
  margin-inline: auto;
  padding: clamp(3rem, 8vw, 6rem) clamp(1.25rem, 5vw, 2.5rem);
}

.ps-access > h2 {
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  color: var(--ink-bright, #fff);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.ps-access__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line, rgb(177 202 235 / 18%));
}

.ps-access__list a {
  display: grid;
  gap: 0.35rem 2.5rem;
  padding-block: clamp(1.1rem, 2.4vw, 1.75rem);
  border-bottom: 1px solid var(--line, rgb(177 202 235 / 18%));
  color: inherit;
  text-decoration: none;
}

.ps-access__list strong {
  color: var(--ink-bright, #fff);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 600;
}

.ps-access__list span {
  max-width: 58ch;
  color: var(--muted, #9db0cc);
  font-size: 0.98rem;
  line-height: 1.55;
}

.ps-access__list a:hover strong,
.ps-access__list a:focus-visible strong {
  color: var(--blue, #5b8cf5);
}

@media (width >= 720px) {
  .ps-access__list a {
    grid-template-columns: minmax(12rem, 22%) 1fr;
    align-items: baseline;
  }
}

@media (width <= 860px) {
  .ps-copy-layer {
    align-items: end;
  }

  .ps-copy p {
    font-size: 0.98rem;
  }

  /* Les rushes sont en 16:9 et servent de repli mobile. On recadre légèrement
     vers la gauche du cadre, où le personnage se tient sur la majorité des
     plans, plutôt que de rogner au centre. */
  .ps-scene {
    background-position: 38% center;
  }

  .ps-scene__video {
    object-position: 38% center;
  }
}
/* Remasterisation des pages intérieures — échelle, rythme et lisibilité. */

/* ---------------------------------------------------------------------------
   1. Discipline d'échelle des captures produit

   Les sources sont des captures pleine page : 1500x1440 pour le tableau de
   bord, 520x1083 pour NATINF. Laissées libres, elles imposent leur hauteur et
   une seule capture occupe alors plus de place que trois sections de texte.

   On impose donc un ratio au conteneur et on recadre l'image dedans. Le point
   d'ancrage est le haut : dans une interface, l'information utile est en haut
   de l'écran, jamais dans le pied de page.
   --------------------------------------------------------------------------- */

.proof-panel,
.module-hero-proof,
.guide-proof-main,
.guide-proof-inset,
.guide-strip-screen,
.cadre-scope-screen,
.product-window,
.showcase-main,
.showcase-card,
.module-screen,
.method-visual,
.module-atlas {
  overflow: hidden;
}

/* On cible par chemin de source plutôt que par classe : une capture ajoutée
   demain dans une figure sans classe sera disciplinée d'office. C'est la règle
   de base, les sélecteurs plus spécifiques ne font que l'ajuster. */
main img[src*="/assets/img/product/"] {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  /* Le plafond est ce qui compte vraiment : un ratio seul laisse la hauteur
     croître avec la largeur, et sur un grand écran la capture réoccupe toute
     la place qu'on vient de lui retirer. */
  max-height: min(46svh, 400px);
  object-fit: cover;
  object-position: top center;
}

main figure:has(> img[src*="/assets/img/product/"]) {
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   1 bis. Les légendes passent sous l'image

   Elles étaient posées en absolu sur le visuel, fond opaque, à 16 px du bas :
   une légende qui recouvre précisément ce qu'elle décrit. Elle descend en flux,
   où elle se lit sans rien masquer.
   --------------------------------------------------------------------------- */

main figure[class] figcaption,
main figure figcaption {
  position: static;
  inset: auto;
  margin: 0.9rem 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  color: var(--muted, #9db0cc);
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  text-wrap: pretty;
}

main figure[class] figcaption > strong,
main figure[class] figcaption > span,
main figure[class] figcaption > b,
main figure figcaption > strong,
main figure figcaption > span,
main figure figcaption > b {
  display: inline;
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

/* Le cadre visuel n'entoure plus que l'image ; la légende s'aligne dessous. */
main figure:has(> img[src*="/assets/img/product/"]) {
  display: grid;
  overflow: visible;
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
}

/* Relief. Une capture posée à plat sur le fond se confond avec lui. On la
   décolle par une ombre portée en deux couches — une proche et dense qui
   dessine le contour, une lointaine et diffuse qui creuse la profondeur — plus
   un filet clair en haut qui simule la lumière rasante d'un écran. */
main figure:has(> img[src*="/assets/img/product/"]) > img {
  border: 1px solid var(--line-strong, rgb(209 225 247 / 28%));
  border-radius: 10px;
  box-shadow:
    0 1px 0 rgb(255 255 255 / 7%) inset,
    0 2px 6px rgb(2 6 14 / 45%),
    0 18px 48px -12px rgb(2 6 14 / 70%);
}

/* Ces captures sont recadrées à la fabrication : leur réimposer un ratio les
   recadrerait une seconde fois et rognerait ce qu'on a pris soin de garder. */
/* La boîte épouse l'image au lieu de l'inverse. Avec une largeur imposée et un
   plafond de hauteur, object-fit laissait l'image flotter au centre d'un cadre
   plus large qu'elle : la bordure entourait du vide. */
main img[src*="/assets/img/product/"][src$=".webp"] {
  aspect-ratio: auto;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(52svh, 460px);
  object-fit: contain;
}

/* Les captures étroites gardent leur échelle native. Les réduire pour tenir en
   hauteur rendrait leur texte illisible : on préfère montrer moins, mais à
   taille lisible, en rognant par le bas ce qui dépasse. */
/* Rogner cette capture revenait à ne montrer que la barre de recherche : les
   résultats et leurs pourcentages de correspondance, qui font toute la
   démonstration, tombaient hors champ. On la réduit en entier plutôt que de la
   couper — mieux vaut un texte plus petit qu'un propos amputé. */
main img[src*="/assets/img/product/"][src$="app-natinf.webp"] {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(62svh, 560px);
  object-fit: contain;
  object-position: center;
}

main img[src*="/assets/img/product/"][src$="app-selecteur.webp"] {
  width: 352px;
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}

/* La légende s'aligne sur le bord gauche de la figure, comme le reste du
   texte : centrée sous une image étroite, elle rompait l'alignement. */
main figure:has(> img[src*="/assets/img/product/"]) {
  justify-items: start;
}

/* Le visuel dominant d'une section peut respirer davantage, sans jamais
   dépasser une hauteur d'écran utile. */
.showcase-main {
  min-height: 0;
}

.proof-panel-wide img,
.guide-proof-main img,
.showcase-main img,
.module-hero-proof img {
  aspect-ratio: 16 / 9;
}

/* Les captures verticales — NATINF fait 520x1083, le sélecteur d'agents
   336x408 — sont les pires : en pleine largeur elles écrasent tout le reste.
   On les traite en vignette portrait bornée, jamais en bloc dominant. */
.proof-panel.portrait img,
.guide-proof-inset img,
main img[data-portrait] {
  aspect-ratio: 3 / 4;
  max-height: min(42svh, 380px);
  object-position: top center;
}

/* Le conteneur d'une pile de vignettes ne doit plus s'étirer sur la hauteur du
   panneau voisin : chaque vignette garde sa propre proportion. */
.proof-panel-stack {
  align-content: start;
}

.proof-panel-stack .proof-panel img {
  aspect-ratio: 4 / 3;
  max-height: min(34svh, 300px);
}

/* ---------------------------------------------------------------------------
   1 ter. Bannière de tête

   Le relief vient d'ici, pas d'un fond posé derrière le texte : une bande
   courte en tête de page, que le dégradé fond dans le fond du site. Le texte
   reste sur aplat, donc parfaitement lisible, et l'image ancre le sujet.

   Image décorative : elle passe en fond CSS et non en <img>, puisqu'elle ne
   porte aucune information qu'un lecteur d'écran devrait annoncer.
   --------------------------------------------------------------------------- */

.page-banner {
  position: relative;
  height: clamp(170px, 30svh, 300px);
  margin-bottom: clamp(-2.5rem, -3.5vw, -1.5rem);
  background-color: var(--panel-deep, #060d18);
  background-position: 28% 42%;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Le dégradé descend jusqu'à l'opacité pleine : la bannière n'a pas de bord
   inférieur visible, elle se dissout dans la page. */
.page-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(4 9 18 / 62%) 0%, rgb(4 9 18 / 8%) 26%, rgb(4 9 18 / 30%) 62%, var(--bg, #060d18) 100%);
}

.page-banner--modules {
  background-image: url("/assets/img/banner/modules.webp");
}

.page-banner--guide {
  background-image: url("/assets/img/banner/guide.webp");
}

/* Des dos d'ouvrages de référence plutôt qu'une façade de mairie : le sujet de
   la page, ce sont les textes sur lesquels on s'appuie, pas l'institution. Leur
   rythme vertical tient à n'importe quelle hauteur de recadrage, et leur
   lumière chaude tranche utilement avec le bleu froid du reste du site. */
.page-banner--cadre {
  background-image: url("/assets/img/banner/cadre.webp");
  background-position: center 45%;
}

/* Sous la bannière, le hero remonte dans le dégradé plutôt que de commencer
   après une césure nette. */
.page-banner + .page-hero {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .page-banner {
    background-attachment: scroll;
  }
}

/* ---------------------------------------------------------------------------
   2. Bandeau de confiance

   Les quatre faits qui décident un visiteur — gratuit, sans limite, assisté
   par IA, écrit par un professionnel du métier — n'apparaissaient nulle part.
   Ils sont posés en haut de page, avant toute démonstration produit.
   --------------------------------------------------------------------------- */

.trust-band {
  max-width: var(--content, 1160px);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.trust-band__list {
  display: grid;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  margin: 0;
  padding: clamp(1.1rem, 2.6vw, 1.6rem) 0 0;
  border-top: 1px solid var(--line, rgb(177 202 235 / 18%));
  list-style: none;
}

@media (width >= 760px) {
  .trust-band__list {
    grid-template-columns: repeat(4, 1fr);
  }
}

.trust-band__list li {
  display: grid;
  gap: 0.3rem;
  align-content: start;
}

.trust-band__list b {
  color: var(--ink-bright, #fff);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.trust-band__list span {
  color: var(--muted, #9db0cc);
  font-size: 0.92rem;
  line-height: 1.5;
  text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
   2 bis. Liste des modules

   Un seul passage sur les cinq modules, en lignes réglées. L'ancienne page les
   présentait trois fois sous trois habillages : le visiteur relisait la même
   information sans jamais savoir laquelle faisait autorité.
   --------------------------------------------------------------------------- */

.mod-section {
  max-width: var(--content, 1160px);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.mod-section > h2 {
  margin: 0 0 0.6rem;
  color: var(--ink-bright, #fff);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.mod-section > .mod-lede {
  max-width: 60ch;
  margin: 0 0 clamp(1.75rem, 4vw, 3rem);
  color: var(--muted, #9db0cc);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.6;
  text-wrap: pretty;
}

.mod-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line, rgb(177 202 235 / 18%));
}

.mod-list > li {
  display: grid;
  gap: 0.5rem 2.5rem;
  padding-block: clamp(1.4rem, 3vw, 2.2rem);
  border-bottom: 1px solid var(--line, rgb(177 202 235 / 18%));
}

@media (width >= 820px) {
  .mod-list > li {
    grid-template-columns: minmax(11rem, 20%) 1fr;
  }
}

.mod-name {
  color: var(--ink-bright, #fff);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.mod-name small {
  display: block;
  margin-top: 0.25rem;
  color: var(--blue, #5b8cf5);
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mod-body p {
  max-width: 60ch;
  margin: 0;
  color: var(--muted-strong, #d6e2f5);
  font-size: 1rem;
  line-height: 1.62;
  text-wrap: pretty;
}

/* Les sujets réellement couverts. C'est ce qui prouve la connaissance du
   métier : un candidat reconnaît « fourrière » ou « IPM » au premier coup
   d'œil, là où « entraînement structuré » ne lui apprend rien. */
.mod-subjects {
  margin: 0.85rem 0 0;
  padding: 0;
  color: var(--muted, #9db0cc);
  font-size: 0.9rem;
  line-height: 1.75;
  list-style: none;
}

.mod-subjects li {
  display: inline;
}

.mod-subjects li::after {
  content: " · ";
  color: var(--line-strong, rgb(209 225 247 / 28%));
}

.mod-subjects li:last-child::after {
  content: "";
}

/* ---------------------------------------------------------------------------
   2 quater. Comparaison avant / après

   Un guide qui énonce « soyez précis » n'apprend rien. Montrer les deux
   consignes côte à côte, avec leur texte réel, apprend en une lecture.
   --------------------------------------------------------------------------- */

.guide-compare {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
}

@media (width >= 820px) {
  .guide-compare {
    grid-template-columns: 1fr 1fr;
  }
}

.guide-compare > div {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  border: 1px solid var(--line, rgb(177 202 235 / 18%));
  border-radius: var(--radius, 8px);
}

.guide-compare__label {
  color: var(--muted, #9db0cc);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.guide-compare__weak .guide-compare__label {
  color: oklch(70% 0.13 40);
}

.guide-compare__strong .guide-compare__label {
  color: oklch(72% 0.14 152);
}

.guide-compare q {
  display: block;
  color: var(--ink-bright, #fff);
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  font-style: italic;
  line-height: 1.55;
  quotes: "« " " »";
  text-wrap: pretty;
}

.guide-compare p {
  margin: 0;
  color: var(--muted, #9db0cc);
  font-size: 0.92rem;
  line-height: 1.55;
  text-wrap: pretty;
}

/* Étapes numérotées : la numérotation porte la structure, pas une carte. */
.guide-steps {
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  border-top: 1px solid var(--line, rgb(177 202 235 / 18%));
}

.guide-steps > li {
  display: grid;
  gap: 0.4rem 1.75rem;
  padding-block: clamp(1.2rem, 2.6vw, 1.8rem);
  border-bottom: 1px solid var(--line, rgb(177 202 235 / 18%));
  counter-increment: step;
}

@media (width >= 720px) {
  .guide-steps > li {
    grid-template-columns: 3.5rem 1fr;
  }
}

.guide-steps > li::before {
  content: counter(step, decimal-leading-zero);
  color: var(--blue, #5b8cf5);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.guide-steps strong {
  display: block;
  color: var(--ink-bright, #fff);
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  font-weight: 600;
}

.guide-steps p {
  max-width: 62ch;
  margin: 0.35rem 0 0;
  color: var(--muted-strong, #d6e2f5);
  font-size: 0.98rem;
  line-height: 1.6;
  text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
   2 ter. Signature de l'auteur

   Le fait que la plateforme soit écrite par un policier municipal en poste est
   le seul argument qu'un éditeur généraliste ne peut pas copier. Il a droit à
   son propre bloc, pas à une ligne perdue dans une liste.
   --------------------------------------------------------------------------- */

.mod-author {
  max-width: var(--content, 1160px);
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 2.5rem);
  border-block: 1px solid var(--line, rgb(177 202 235 / 18%));
}

.mod-author p {
  max-width: 46ch;
  margin: 0;
  color: var(--ink-bright, #fff);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.mod-author p + p {
  margin-top: 1.1rem;
  max-width: 62ch;
  color: var(--muted, #9db0cc);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: 0;
}

/* ---------------------------------------------------------------------------
   2 quinquies. Bande d'appel à l'action

   C'est le moment de conversion et c'était le bloc le plus faible de la page :
   trois colonnes serrées, un bouton principal qui se coupait sur deux lignes,
   et moins de présence visuelle que n'importe quelle section de texte.

   On l'empile — titre, phrase, boutons — et on lui donne le poids qui revient
   à une fin de page.

   Correction ultérieure : ce poids était devenu excessif. Le bloc mesurait
   389 px de haut, 72 px de rembourrage, un titre à 41,6 px — presque celui de
   la page. Il se lisait comme un second héros et non comme une conclusion.

   Il reprend donc l'échelle d'une fin de page, et la disposition du langage de
   surface : texte à gauche, actions à droite dès qu'il y a la place. Son fond
   radial cède au filet dégradé, comme les autres surfaces du site.
   --------------------------------------------------------------------------- */

main .cta-band {
  display: grid;
  justify-items: start;
  gap: 0.85rem;
  max-width: var(--content, 1160px);
  margin-inline: auto;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid transparent;
  border-radius: 14px;
  background:
    linear-gradient(var(--panel-deep), var(--panel-deep)) padding-box,
    var(--edge) border-box;
  box-shadow:
    0 1px 0 rgb(255 255 255 / 6%) inset,
    0 2px 8px rgb(2 6 14 / 40%),
    0 28px 64px -28px rgb(91 140 245 / 22%);
}

/* Dès qu'il y a la place, les actions montent à droite du texte au lieu de
   s'empiler dessous : la hauteur du bloc tombe de moitié à contenu identique. */
@media (width >= 900px) {
  main .cta-band {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: clamp(2rem, 4vw, 3.5rem);
    row-gap: 0.85rem;
  }

  main .cta-band > h2,
  main .cta-band > p {
    grid-column: 1;
  }

  main .cta-band .cta-actions {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
  }
}

main .cta-band > h2 {
  max-width: 28ch;
  margin: 0;
  color: var(--ink-bright, #fff);
  font-family: var(--font-display);
  /* Une conclusion se dimensionne sous les titres de section, jamais au-dessus. */
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

main .cta-band > p {
  max-width: 58ch;
  margin: 0;
  color: var(--muted, #9db0cc);
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  line-height: 1.6;
  text-wrap: pretty;
}

main .cta-band .cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(0.75rem, 1.6vw, 1.25rem);
}

/* Un libellé de bouton ne passe jamais à la ligne : coupé en deux, il perd sa
   forme de bouton et lit comme un bloc de texte encadré. */
main .cta-band .cta-actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  padding-inline: clamp(1.1rem, 2.4vw, 1.75rem);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   2 sexies. Grille cinétique

   Fond animé des pages intérieures. Le canvas est fixe, derrière tout le
   contenu, et ne capte aucun événement : le clic qui déclenche une onde est
   écouté sur la fenêtre, pas sur le canvas, donc les liens restent cliquables.

   L'en-tête et le pied de page gardent un fond opaque : le texte doit rester
   lisible quand la grille s'illumine sous le curseur.
   --------------------------------------------------------------------------- */

.kinetic-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* L'en-tête est délibérément absent de cette liste. Il est déjà `sticky` avec
   un `z-index` de 50, donc déjà au-dessus de la grille. L'inclure lui imposait
   `position: relative`, ce qui lui retirait son collage, et le ramenait au même
   niveau que `main` — qui, venant après dans le document, passait alors devant.
   Le menu déroulant du mobile s'ouvrait derrière le contenu de la page. */
body:has(> .kinetic-grid) > main,
body:has(> .kinetic-grid) > footer {
  position: relative;
  z-index: 1;
}

body:has(> .kinetic-grid) > footer {
  background: var(--bg, #060b16);
}

/* ---------------------------------------------------------------------------
   3. Rythme vertical

   L'ancienne mise en page appliquait le même écart partout, ce qui empêche de
   distinguer une rupture de chapitre d'un simple paragraphe suivant.
   --------------------------------------------------------------------------- */

main > section + section {
  margin-top: clamp(3rem, 7vw, 6rem);
}

main > section.content-page + section.content-page {
  margin-top: clamp(2rem, 4.5vw, 3.5rem);
}

.page-hero > p {
  max-width: 62ch;
  text-wrap: pretty;
}
/* Traitement de surface — filet dégradé, relief teinté, focus, pastilles.

   Transposition en CSS natif du langage visuel d'un composant shadcn fourni en
   React. Ce qui est repris : le filet en dégradé, l'ombre légèrement colorée,
   l'anneau de focus généreux, la pastille de statut. Ce qui ne l'est pas : les
   halos flous en fond, que la grille cinétique occupe déjà, et la mise en carte
   systématique, qui uniformise une page au lieu de la hiérarchiser.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   1. La surface

   Un seul utilitaire, appliqué avec parcimonie. Il ne s'agit pas de transformer
   chaque bloc en carte : le filet ne se justifie que là où un ensemble doit se
   détacher du fond comme une unité.
   --------------------------------------------------------------------------- */

.surface {
  border: 1px solid transparent;
  border-radius: 14px;
  background:
    linear-gradient(var(--panel-deep), var(--panel-deep)) padding-box,
    var(--edge) border-box;
  box-shadow:
    0 1px 0 rgb(255 255 255 / 6%) inset,
    0 2px 8px rgb(2 6 14 / 40%),
    0 28px 64px -28px rgb(91 140 245 / 22%);
}

/* Le bandeau de confiance devient une surface unique, pas quatre cartes
   identiques. Les quatre affirmations restent une liste : elles se lisent, se
   comparent et s'indexent comme du texte, ce qu'une grille de cartes détruit. */
.trust-band__list {
  padding: clamp(1.2rem, 2.8vw, 1.8rem);
  border-top: 0;
  border: 1px solid transparent;
  border-radius: 14px;
  background:
    linear-gradient(var(--panel-deep), var(--panel-deep)) padding-box,
    var(--edge) border-box;
  box-shadow:
    0 1px 0 rgb(255 255 255 / 6%) inset,
    0 2px 8px rgb(2 6 14 / 40%),
    0 28px 64px -28px rgb(91 140 245 / 22%);
}

/* Le bandeau de fin de page reçoit le même traitement, mais ses règles vivent
   dans 09 : elles y sont écrites en `main .cta-band`, donc plus spécifiques
   qu'un sélecteur de classe seul. Les dupliquer ici obligerait à surenchérir
   sur la spécificité pour se battre contre soi-même. */

/* Le bloc d'auteur est le seul passage écrit à la première personne du site.
   Il gagne le filet parce qu'il doit se lire comme une prise de parole, pas
   comme un paragraphe de plus. */
.mod-author {
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid transparent;
  border-radius: 14px;
  background:
    linear-gradient(var(--panel-deep), var(--panel-deep)) padding-box,
    var(--edge) border-box;
  box-shadow:
    0 1px 0 rgb(255 255 255 / 6%) inset,
    0 2px 8px rgb(2 6 14 / 40%),
    0 28px 64px -28px rgb(91 140 245 / 22%);
}

/* ---------------------------------------------------------------------------
   2. Focus

   L'anneau du composant d'origine est ce qu'il a de plus utile : large, teinté,
   nettement séparé du bord. Il devient la règle du site, pour tout ce qui se
   parcourt au clavier. C'est le seul point de ce fichier qui relève de
   l'accessibilité plutôt que du goût.
   --------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  border-color: rgb(91 140 245 / 55%);
  box-shadow: 0 0 0 3px rgb(91 140 245 / 24%);
}

/* ---------------------------------------------------------------------------
   3. Pastilles

   Les sur-titres étaient un texte capitalisé précédé d'une puce. La pastille
   leur donne un contour, ce qui les distingue enfin d'un paragraphe court.
   --------------------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.75rem 0.3rem 0.6rem;
  border: 1px solid var(--line, rgb(177 202 235 / 18%));
  border-radius: 999px;
  background: rgb(255 255 255 / 4%);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* Le sur-titre du film reste sans contour : il se lit sur des plans nocturnes
   très contrastés, où une pastille ajouterait un bord à suivre plutôt qu'un
   repère. Le voile de lisibilité y suffit déjà. */
.ps-copy .eyebrow {
  padding: 0;
  border: 0;
  background: none;
}

/* ---------------------------------------------------------------------------
   4. Composition alternée

   La page Modules enchaînait quatre sections de structure rigoureusement
   identique : titre, paragraphe, image, empilés sur toute la largeur. Le défaut
   n'est pas dans le contenu mais dans la répétition — l'œil apprend la forme au
   deuxième bloc et cesse de lire les suivants.

   Dès qu'il y a la place, texte et image passent côte à côte, et le côté de
   l'image alterne d'une section à l'autre. Le côté est déclaré dans le balisage
   plutôt que déduit d'un rang : une section ajoutée demain énonce sa place au
   lieu de dépendre de sa position parmi ses voisines.
   --------------------------------------------------------------------------- */

@media (width >= 900px) {
  .mod-section[data-media] {
    display: grid;
    /* L'image prend la part large : ce sont des captures d'interface, illisibles
       en dessous d'une certaine taille, alors qu'un paragraphe gagne à rester
       sous les 70 caractères de large. */
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(2.5rem, 5vw, 5rem);
    row-gap: 0.85rem;
  }

  /* Le titre et son paragraphe restent groupés serré : c'est leur proximité qui
     les désigne comme un seul bloc face à l'image. */
  .mod-section[data-media] > h2 {
    grid-row: 1;
    align-self: end;
    margin: 0;
  }

  .mod-section[data-media] > .mod-lede {
    grid-row: 2;
    align-self: start;
    max-width: 46ch;
    margin: 0;
  }

  .mod-section[data-media] > figure {
    grid-row: 1 / span 2;
    margin: 0;
  }

  .mod-section[data-media="right"] > h2,
  .mod-section[data-media="right"] > .mod-lede {
    grid-column: 1;
  }

  .mod-section[data-media="right"] > figure {
    grid-column: 2;
  }

  /* Le ratio suit le côté, sinon l'image inversée atterrit dans la colonne
     étroite : c'est la colonne de l'image qui doit rester la large, quel que
     soit le côté où elle se trouve. */
  .mod-section[data-media="left"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  }

  .mod-section[data-media="left"] > h2,
  .mod-section[data-media="left"] > .mod-lede {
    grid-column: 2;
  }

  .mod-section[data-media="left"] > figure {
    grid-column: 1;
  }

  /* Aucun plafond de hauteur n'est levé en bloc : chaque capture a le sien,
     réglé cas par cas dans le fragment précédent selon ce qu'elle doit montrer.
     Une règle générale posée par-dessus les écrasait toutes et rognait le
     sélecteur d'assistants.

     Seules les deux captures panoramiques sont libérées. Leur plafond était
     exprimé en hauteur d'écran pour les empêcher d'écraser une page en pleine
     largeur ; dans une colonne de moitié, ce risque n'existe plus et le plafond
     ne fait que laisser du vide à côté d'elles. Les deux captures étroites
     gardent le leur, où se joue la lisibilité de leur texte. */
  .mod-section[data-media] > figure > img[src$="app-parcours.webp"],
  .mod-section[data-media] > figure > img[src$="app-actu.webp"] {
    width: 100%;
    max-height: none;
  }

  /* Les blocs côte à côte sont deux fois moins hauts : sans séparation plus
     franche, la page se relit comme une liste serrée. Le rythme se fait ici,
     entre les sections, pas à l'intérieur. */
  .mod-section[data-media] + .mod-section[data-media] {
    margin-top: clamp(4rem, 8vw, 7rem);
  }
}

/* ---------------------------------------------------------------------------
   5. Typographie

   Geist est dessinée pour l'interface : chasses régulières, chiffres lisibles,
   contreformes ouvertes en petit corps. Le site parle d'articles de code et de
   numéros NATINF, où la confusion d'un caractère coûte cher.

   La hiérarchie ne repose plus sur deux familles mais sur la graisse et
   l'échelle. On resserre donc l'interlettrage des titres, qu'une fonte neutre
   laisse autrement flotter, et on n'y descend jamais sous 600.
   --------------------------------------------------------------------------- */

h1,
h2,
h3 {
  letter-spacing: -0.022em;
}

h1 {
  font-weight: 700;
}

h2,
h3 {
  font-weight: 600;
}

/* Le texte courant gagne en régularité ce que Work Sans lui donnait en
   caractère. On compense par une ligne un peu plus aérée. */
p {
  text-wrap: pretty;
}