/* ═══════════════════════════════════════════════════════════════════════════
   InnoAgentic — Autonomous AI Systems
   Système visuel unique et volontairement sombre : la lumière est traitée comme
   un matériau (halos, verre, chrome) plutôt que comme une couleur décorative.
   Un seul fichier CSS = une seule requête bloquante.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Inter var";
  src: url("/assets/inter-var.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

/* ─────────────────────────── TOKENS ─────────────────────────── */

:root {
  /* Fondations */
  --ink:        #05070D;
  --navy:       #071426;
  --navy-lift:  #0A1B31;
  --blue:       #006BFF;
  --cyan:       #00D9FF;
  --chrome:     #D9E1EA;
  --white:      #F7FAFF;
  --accent:     #7AA7FF;

  /* Texte — dérivés, jamais des littéraux dispersés */
  --text:       #F7FAFF;
  --text-2:     #A9BAD0;
  --text-3:     #6D7F97;

  /* Surfaces de verre */
  --glass:      rgba(122, 167, 255, 0.045);
  --glass-2:    rgba(122, 167, 255, 0.075);
  --edge:       rgba(122, 167, 255, 0.14);
  --edge-lit:   rgba(0, 217, 255, 0.42);

  /* Typographie */
  --font: "Inter var", ui-sans-serif, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --t-hero:  clamp(2.4rem, 5.6vw, 4.6rem);
  --t-h2:    clamp(1.9rem, 4.2vw, 3.2rem);
  --t-h3:    clamp(1.05rem, 1.7vw, 1.3rem);
  --t-lede:  clamp(1.02rem, 1.65vw, 1.32rem);
  --t-body:  1rem;
  --t-micro: 0.72rem;

  /* Rythme */
  --gutter:  clamp(1.15rem, 4vw, 2.5rem);
  --bay:     clamp(5rem, 11vw, 9.5rem);
  --measure: 60ch;

  /* Mouvement — cinématique mais retenu */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:       0.55s;
}

/* ─────────────────────────── BASE ─────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Compense la barre de navigation fixe lors d'un saut d'ancre */
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3 { margin: 0; line-height: 1.06; letter-spacing: -0.035em; font-weight: 600; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

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

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: 1rem; z-index: 200;
  padding: 0.7rem 1.1rem; background: var(--cyan); color: var(--ink);
  font-weight: 600; border-radius: 6px; transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

.wrap {
  width: min(1180px, 100% - var(--gutter) * 2);
  margin-inline: auto;
}
.wrap--narrow { width: min(800px, 100% - var(--gutter) * 2); }

/* ─────────────────────────── ATOMES ─────────────────────────── */

.eyebrow {
  font-size: var(--t-micro);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--cyan);
  margin-bottom: 1.15rem;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.85rem 1.6rem;
  font-size: 0.9rem; font-weight: 550; letter-spacing: 0.005em;
  border-radius: 100px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
              background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.btn--lg { padding: 1.05rem 2.2rem; font-size: 0.98rem; }

.btn--primary {
  color: var(--ink);
  background: linear-gradient(135deg, var(--cyan), var(--blue) 78%);
  box-shadow: 0 0 0 1px rgba(0, 217, 255, 0.28),
              0 12px 34px -14px rgba(0, 107, 255, 0.85);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(0, 217, 255, 0.5),
              0 18px 44px -14px rgba(0, 170, 255, 0.95);
}

.btn--ghost {
  color: var(--text);
  border-color: var(--edge);
  background: var(--glass);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover { border-color: var(--edge-lit); background: var(--glass-2); transform: translateY(-2px); }

/* ─────────────────────────── NAVIGATION ─────────────────────────── */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease),
              backdrop-filter 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
/* Au repos la navigation flotte sur le hero ; au défilement elle devient une
   barre de verre compacte. */
.nav[data-scrolled] {
  background: rgba(5, 7, 13, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: rgba(122, 167, 255, 0.1);
}

.nav__inner {
  width: min(1180px, 100% - var(--gutter) * 2);
  margin-inline: auto;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.7rem 0;
  transition: padding 0.4s var(--ease);
}
.nav[data-scrolled] .nav__inner { padding: 0.45rem 0; }

.nav__brand { display: flex; align-items: center; gap: 0.6rem; margin-right: auto; }
.nav__mark {
  width: 68px; height: auto; object-fit: contain;
  transition: width 0.4s var(--ease), height 0.4s var(--ease);
}
.nav[data-scrolled] .nav__mark { width: 56px; height: auto; }
.nav__wordmark {
  font-weight: 600; font-size: 1.24rem; letter-spacing: -0.025em;
  background: linear-gradient(100deg, var(--chrome) 20%, var(--white) 45%, var(--accent) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.nav__links { display: flex; gap: 1.75rem; }
.nav__links a {
  font-size: 0.855rem; color: var(--text-2); position: relative;
  transition: color 0.25s var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -5px;
  width: 100%; height: 1px; background: var(--cyan);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.35s var(--ease);
}
.nav__links a:hover { color: var(--text); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__cta { padding: 0.62rem 1.2rem; font-size: 0.83rem; }

.nav__toggle {
  display: none; width: 42px; height: 42px; padding: 0;
  background: var(--glass); border: 1px solid var(--edge); border-radius: 10px;
  cursor: pointer; position: relative;
}
.nav__toggle-bar,
.nav__toggle-bar::before,
.nav__toggle-bar::after {
  position: absolute; left: 50%; width: 17px; height: 1.5px;
  background: var(--text); border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav__toggle-bar { top: 50%; transform: translate(-50%, -50%); }
.nav__toggle-bar::before { content: ""; left: 0; transform: translateY(-6px); }
.nav__toggle-bar::after  { content: ""; left: 0; transform: translateY(6px); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar { transform: translate(-50%, -50%) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar::before { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar::after  { transform: rotate(-90deg); }

.nav__mobile {
  display: none; flex-direction: column; gap: 0.35rem;
  padding: 0.75rem var(--gutter) 1.6rem;
  background: rgba(5, 7, 13, 0.96);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(122, 167, 255, 0.08);
}
.nav__mobile a { padding: 0.72rem 0; font-size: 1rem; color: var(--text-2); }
.nav__mobile .btn { margin-top: 0.8rem; align-self: flex-start; }

/* ─────────────────────────── HERO ─────────────────────────── */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid; place-items: center;
  padding: 8rem 0 4rem;
  isolation: isolate;
  overflow: hidden;
}

/* Atmosphère : deux halos très diffus, jamais un dégradé franc. */
.hero__aura {
  position: absolute; inset: -25% -10% auto -10%; height: 145%;
  z-index: -2; pointer-events: none;
  background:
    radial-gradient(58% 46% at 50% 34%, rgba(0, 107, 255, 0.17), transparent 68%),
    radial-gradient(38% 34% at 50% 40%, rgba(0, 217, 255, 0.11), transparent 72%);
}
.hero__field {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 3;
  width: min(1180px, 100% - var(--gutter) * 2);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}

.hero__logo {
  width: min(360px, 72vw);
  height: auto;
  margin: -0.2rem 0 1.3rem;
  filter: drop-shadow(0 0 70px rgba(0, 130, 255, 0.35));
}

.hero__title {
  font-size: var(--t-hero);
  font-weight: 600;
  letter-spacing: -0.045em;
  background: linear-gradient(180deg, var(--white) 30%, #9FC4E8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-wrap: balance;
  margin-bottom: 1.15rem;
}

.hero__lede {
  font-size: var(--t-lede);
  color: var(--text);
  max-width: 34ch;
  text-wrap: balance;
  margin-bottom: 0.85rem;
}
.hero__sub {
  font-size: 0.97rem;
  color: var(--text-3);
  max-width: 56ch;
  text-wrap: pretty;
}

.hero__actions {
  display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center;
  margin-top: 2.1rem;
}

/* ───────────────────── VORTEX D'INTELLIGENCE ───────────────────── */

/* Couche plein hero, derrière le texte. Les concepts orbitent AUTOUR de la
   colonne centrale : le vortex n'est pas une illustration posée sous le titre,
   c'est l'espace dans lequel le titre se trouve. */
.vortex {
  position: absolute; inset: 0;
  z-index: 2;
  /* Décoratif au-dessus de contenu réel : ne capture le pointeur que sur les
     mots eux-mêmes. */
  pointer-events: none;
}
.vortex__stage {
  position: absolute; inset: 0;
  /* Pas de `perspective` ici : la projection des concepts est calculée en
     JavaScript, et un contexte 3D coûterait une couche de composition par mot
     sans rien changer au rendu. La perspective est portée par le noyau seul. */
}

/* Les mots : vrai texte HTML, transformé en 3D. Indexable et focalisable. */
.vortex__words { position: absolute; inset: 0; }
.vortex__words li { position: absolute; top: 0; left: 0; }

.vword {
  position: absolute; top: 0; left: 0;
  padding: 0.28em 0.55em; margin: 0;
  font-family: inherit;
  font-size: 0.715rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #93B8F5;
  background: none; border: 0; border-radius: 5px;
  cursor: pointer;
  pointer-events: auto;
  /* transform + opacity uniquement : composé sur le GPU, jamais de reflow. */
  will-change: transform, opacity;
  transition: color 0.3s var(--ease), text-shadow 0.3s var(--ease);
}
.vword:hover,
.vword:focus-visible,
.vword[data-active] {
  color: var(--white);
  text-shadow: 0 0 18px rgba(0, 217, 255, 0.85), 0 0 42px rgba(0, 130, 255, 0.5);
}

/* Panneau contextuel — apparaît au survol, au focus clavier et au toucher. */
.vortex__panel {
  position: absolute; z-index: 6;
  width: min(280px, 74vw);
  padding: 0.85rem 1rem;
  text-align: left;
  background: rgba(7, 20, 38, 0.9);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--edge);
  border-radius: 12px;
  box-shadow: 0 20px 50px -22px rgba(0, 0, 0, 0.95),
              0 0 0 1px rgba(0, 217, 255, 0.08);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.vortex__panel[data-open] { opacity: 1; transform: translateY(0); }
.vortex__panel-term {
  display: block;
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 0.4rem;
}
.vortex__panel-desc {
  display: block; font-size: 0.845rem; line-height: 1.5; color: var(--text-2);
}

/* ───────────────────── NOYAU INNOAGENTIC ───────────────────── */

.core {
  position: absolute; top: 50%; left: 50%;
  width: 320px; height: 320px;
  transform: translate(-50%, -50%);
  /* Donne aux anneaux orbitaux leur profondeur réelle plutôt qu'une ellipse plate. */
  perspective: 620px;
  z-index: 3;
  pointer-events: none;
}
.core > * { position: absolute; inset: 0; border-radius: 50%; }

.core__shell, .core__seed { display: none; }

.core__halo {
  inset: -62%;
  background: radial-gradient(circle, rgba(0, 150, 255, 0.16), rgba(0, 107, 255, 0.06) 44%, transparent 68%);
  animation: corePulse 7s var(--ease-soft) infinite;
}
.core__shell {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.9), transparent 34%),
    radial-gradient(circle at 50% 50%, rgba(0, 217, 255, 0.42), rgba(0, 60, 160, 0.5) 62%, rgba(4, 10, 24, 0.9) 100%);
  box-shadow:
    inset 0 0 34px rgba(0, 200, 255, 0.42),
    inset 0 -10px 26px rgba(0, 0, 0, 0.6),
    0 0 64px rgba(0, 140, 255, 0.45);
  border: 1px solid rgba(190, 225, 255, 0.28);
}
.core__seed {
  inset: 41%;
  background: radial-gradient(circle, var(--white), var(--cyan) 48%, transparent 74%);
  box-shadow: 0 0 26px rgba(0, 230, 255, 0.95);
  animation: seedPulse 3.6s var(--ease-soft) infinite;
}

/* Trajectoires orbitales : agents, outils, savoir, workflows. */
.core__ring {
  border: 1px solid rgba(140, 200, 255, 0.2);
  border-radius: 50%;
}
/* Inclinaison au repos. La rotation n'est ajoutée que par [data-live],
   c'est-à-dire hors « mouvement réduit » — sinon les anneaux restent figés
   dans une pose stable et lisible. */
.core__ring--a { inset: -18%; transform: rotateX(76deg); border-color: rgba(140, 200, 255, 0.13); }
.core__ring--b { inset: -46%; transform: rotateX(68deg) rotateY(26deg);  border-color: rgba(0, 217, 255, 0.1); }
.core__ring--c { inset: -78%; transform: rotateX(60deg) rotateY(-32deg); border-color: rgba(122, 167, 255, 0.07); }

@keyframes corePulse { 0%, 100% { opacity: 0.62; transform: scale(1); } 50% { opacity: 1; transform: scale(1.09); } }
@keyframes seedPulse { 0%, 100% { opacity: 0.82; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1.1); } }

/* Chaque anneau tourne autour de sa propre inclinaison : le rotateZ est
   composé avec le rotateX de repos plutôt que de l'écraser. */
.core[data-live] .core__ring--a { animation: ringA 17s linear infinite; }
.core[data-live] .core__ring--b { animation: ringB 27s linear infinite; }
.core[data-live] .core__ring--c { animation: ringC 41s linear infinite; }
@keyframes ringA { from { transform: rotateX(74deg) rotateZ(0deg); }   to { transform: rotateX(74deg) rotateZ(360deg); } }
@keyframes ringB { from { transform: rotateX(66deg) rotateZ(360deg); } to { transform: rotateX(66deg) rotateZ(0deg); } }
@keyframes ringC { from { transform: rotateX(58deg) rotateZ(0deg); }   to { transform: rotateX(58deg) rotateZ(360deg); } }

/* ─────────────────────────── SECTIONS ─────────────────────────── */

.section { position: relative; padding: var(--bay) 0; }

.section__title {
  font-size: var(--t-h2);
  text-wrap: balance;
  background: linear-gradient(180deg, var(--white) 34%, #A8C3E0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 1.1rem;
}
.section__lede {
  font-size: var(--t-lede);
  color: var(--text-3);
  max-width: var(--measure);
  text-wrap: pretty;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Séparation par la lumière plutôt que par un trait. */
.section + .section::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(122, 167, 255, 0.16) 30%,
                              rgba(0, 217, 255, 0.24) 50%, rgba(122, 167, 255, 0.16) 70%, transparent);
}

/* ───── From AI to Autonomy ───── */

.flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* 8 étapes → 4 + 4 */
  gap: 1px;
  background: rgba(122, 167, 255, 0.09);
  border: 1px solid rgba(122, 167, 255, 0.09);
  border-radius: 16px;
  overflow: hidden;
}
.flow__stage {
  position: relative;
  padding: 1.7rem 1.5rem 1.9rem;
  background: var(--ink);
  transition: background 0.6s var(--ease);
}
/* Chaque étape s'allume au défilement — la barre supérieure se remplit. */
.flow__stage::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.75s var(--ease);
}
.flow__stage[data-lit]::before { transform: scaleX(1); }
.flow__stage[data-lit] { background: linear-gradient(180deg, rgba(0, 107, 255, 0.07), transparent 62%); }

.flow__idx {
  display: block; font-size: 0.68rem; letter-spacing: 0.22em;
  color: var(--text-3); margin-bottom: 0.85rem;
  font-variant-numeric: tabular-nums;
  transition: color 0.6s var(--ease);
}
.flow__stage[data-lit] .flow__idx { color: var(--cyan); }

.flow__name {
  font-size: var(--t-h3); font-weight: 550; letter-spacing: -0.02em;
  margin-bottom: 0.55rem; color: var(--text);
}
.flow__text { font-size: 0.88rem; color: var(--text-3); line-height: 1.55; }

.flow__stage--terminal { background: linear-gradient(180deg, rgba(0, 217, 255, 0.06), transparent 70%); }
.flow__stage--terminal .flow__name {
  background: linear-gradient(100deg, var(--cyan), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ───── Architecture ───── */

.arch { display: flex; flex-direction: column; align-items: stretch; }

.arch__band {
  padding: clamp(1.5rem, 3vw, 2.3rem);
  background: var(--glass);
  border: 1px solid var(--edge);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease),
              border-color 0.75s var(--ease);
}
.arch__band[data-lit] { opacity: 1; transform: none; }

.arch__band--orch {
  border-color: rgba(0, 217, 255, 0.26);
  background: linear-gradient(135deg, rgba(0, 107, 255, 0.1), rgba(0, 217, 255, 0.045));
  box-shadow: 0 0 70px -30px rgba(0, 150, 255, 0.65);
}
.arch__band--apps { background: rgba(122, 167, 255, 0.025); }

.arch__label {
  font-size: var(--t-micro); letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 1.15rem;
}
.arch__band--apps .arch__label { color: var(--text-3); }

.arch__desc { font-size: 0.95rem; color: var(--text-2); max-width: 62ch; }

.arch__nodes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.9rem;
}
.arch__node {
  padding: 1rem 1.1rem;
  background: rgba(5, 7, 13, 0.55);
  border: 1px solid rgba(122, 167, 255, 0.1);
  border-radius: 11px;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.arch__node:hover { border-color: var(--edge-lit); transform: translateY(-3px); }
.arch__node span {
  display: block; font-weight: 550; font-size: 0.97rem;
  color: var(--text); margin-bottom: 0.22rem; letter-spacing: -0.01em;
}
.arch__node em { font-style: normal; font-size: 0.79rem; color: var(--text-3); }

/* La colonne vertébrale : un flux lumineux qui descend entre les bandes. */
.arch__spine { height: 46px; display: grid; place-items: center; }
.arch__spine span {
  display: block; width: 1px; height: 100%;
  background: linear-gradient(180deg, rgba(0, 217, 255, 0.55), rgba(0, 107, 255, 0.12));
  position: relative; overflow: visible;
}
.arch__spine span::after {
  content: ""; position: absolute; left: 50%; top: 0;
  width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 12px var(--cyan);
  animation: descend 2.8s var(--ease-soft) infinite;
}
@keyframes descend {
  0%   { top: -4px; opacity: 0; }
  22%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* ───── Capabilities ───── */

.caps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 6 propriétés → 3 + 3 */
  gap: 1.1rem;
}
.cap {
  padding: 1.9rem 1.7rem 2.1rem;
  background: var(--glass);
  border: 1px solid var(--edge);
  border-radius: 16px;
  position: relative; overflow: hidden;
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease),
              border-color 0.4s var(--ease);
}
.cap[data-lit] { opacity: 1; transform: none; }
.cap:hover { border-color: var(--edge-lit); }
/* Lueur d'angle qui suit le survol, sans coût de rendu. */
.cap::after {
  content: ""; position: absolute; top: -60%; right: -40%;
  width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 180, 255, 0.16), transparent 68%);
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.cap:hover::after { opacity: 1; }

.cap__glyph {
  display: block; width: 40px; height: 40px; margin-bottom: 1.25rem;
  border-radius: 10px; position: relative;
  background: rgba(0, 107, 255, 0.09);
  border: 1px solid rgba(0, 217, 255, 0.24);
}
/* Symboles abstraits construits en CSS pur — aucun fichier, aucune requête. */
.cap__glyph::before, .cap__glyph::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.cap__glyph--autonomous::before { width: 15px; height: 15px; border: 1.5px solid var(--cyan); border-radius: 50%; }
.cap__glyph--autonomous::after  { width: 5px; height: 5px; background: var(--white); border-radius: 50%; box-shadow: 0 0 9px var(--cyan); }

.cap__glyph--orchestrated::before { width: 19px; height: 1.5px; background: var(--cyan); box-shadow: 0 -6px 0 var(--accent), 0 6px 0 var(--accent); }
.cap__glyph--orchestrated::after  { width: 1.5px; height: 19px; background: rgba(0, 217, 255, 0.4); }

.cap__glyph--contextual::before { width: 17px; height: 17px; border: 1.5px solid var(--cyan); border-radius: 4px; transform: translate(-50%, -50%) rotate(45deg); }
.cap__glyph--contextual::after  { width: 7px; height: 7px; border: 1.5px solid var(--accent); border-radius: 2px; transform: translate(-50%, -50%) rotate(45deg); }

.cap__glyph--actionable::before { width: 0; height: 0; border-left: 11px solid var(--cyan); border-top: 7px solid transparent; border-bottom: 7px solid transparent; transform: translate(-40%, -50%); }
.cap__glyph--actionable::after  { width: 3px; height: 3px; background: var(--accent); border-radius: 50%; transform: translate(-190%, -50%); }

.cap__glyph--verifiable::before { width: 15px; height: 15px; border: 1.5px solid rgba(0, 217, 255, 0.35); border-radius: 50%; }
.cap__glyph--verifiable::after  { width: 9px; height: 5px; border-left: 1.5px solid var(--white); border-bottom: 1.5px solid var(--white); transform: translate(-50%, -62%) rotate(-45deg); }

.cap__glyph--adaptive::before { width: 16px; height: 16px; border: 1.5px solid var(--cyan); border-radius: 50%; border-right-color: transparent; border-bottom-color: transparent; transform: translate(-50%, -50%) rotate(-40deg); }
.cap__glyph--adaptive::after  { width: 4px; height: 4px; background: var(--accent); border-radius: 50%; transform: translate(140%, -230%); }

.cap__name { font-size: var(--t-h3); font-weight: 550; margin-bottom: 0.55rem; }
.cap__text { font-size: 0.9rem; color: var(--text-3); line-height: 1.58; }

/* ───── Beyond AI Assistants ───── */

.compare {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  align-items: start;
}
.compare__side {
  padding: 2rem 1.8rem;
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: var(--glass);
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.compare__side[data-lit] { opacity: 1; transform: none; }

.compare__side--new {
  border-color: rgba(0, 217, 255, 0.24);
  background: linear-gradient(160deg, rgba(0, 107, 255, 0.08), transparent 70%);
  box-shadow: 0 0 80px -40px rgba(0, 150, 255, 0.7);
}
.compare__title {
  font-size: var(--t-h3); font-weight: 550; margin-bottom: 1.5rem; letter-spacing: -0.02em;
}
.compare__side--old .compare__title { color: var(--text-3); }

.chain { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.5rem; }
.chain__node {
  display: inline-flex; align-items: center;
  padding: 0.4rem 0.78rem;
  font-size: 0.755rem; letter-spacing: 0.09em; text-transform: uppercase;
  border-radius: 100px; border: 1px solid;
}
.chain--old .chain__node { color: var(--text-3); border-color: rgba(122, 167, 255, 0.13); }
.chain--new .chain__node {
  color: var(--text); border-color: rgba(0, 217, 255, 0.3);
  background: rgba(0, 107, 255, 0.09);
}
/* Le dernier maillon de la chaîne autonome est le résultat vérifié. */
.chain--new .chain__node:last-child {
  color: var(--ink); background: linear-gradient(135deg, var(--cyan), var(--blue));
  border-color: transparent; font-weight: 600;
}
.compare__note { font-size: 0.885rem; color: var(--text-3); line-height: 1.6; }

/* ───── Synapro ───── */

.eco {
  text-align: center;
  padding: clamp(2.2rem, 5vw, 3.6rem) clamp(1.2rem, 3vw, 2.5rem);
  border: 1px solid var(--edge);
  border-radius: 18px;
  background:
    radial-gradient(60% 52% at 50% 0%, rgba(0, 107, 255, 0.13), transparent 70%),
    var(--glass);
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.eco[data-lit] { opacity: 1; transform: none; }

.eco__crown {
  font-size: clamp(1.5rem, 3.4vw, 2.2rem); font-weight: 600; letter-spacing: -0.035em;
  background: linear-gradient(100deg, var(--chrome) 15%, var(--white) 42%, var(--cyan) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.eco__crown-sub {
  font-size: var(--t-micro); letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--cyan); margin-top: 0.45rem;
}
.eco__stem { height: 54px; display: grid; place-items: center; }
.eco__stem span {
  width: 1px; height: 100%;
  background: linear-gradient(180deg, rgba(0, 217, 255, 0.6), rgba(122, 167, 255, 0.1));
}
.eco__products {
  display: grid; gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.eco__product {
  padding: 1.15rem 1rem;
  border: 1px solid rgba(122, 167, 255, 0.11);
  border-radius: 12px;
  background: rgba(5, 7, 13, 0.5);
}
.eco__product-name {
  display: block; font-weight: 550; color: var(--text-2); font-size: 0.95rem;
}
.eco__product em {
  font-style: normal; display: block; margin-top: 0.2rem;
  font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-3);
}
.eco__note {
  margin-top: 1.8rem; text-align: center;
  font-size: 0.92rem; color: var(--text-3);
  max-width: 58ch; margin-inline: auto;
}

/* ───── FAQ ───── */

.faq { border-top: 1px solid rgba(122, 167, 255, 0.1); }

.faq__item { border-bottom: 1px solid rgba(122, 167, 255, 0.1); }

.faq__q {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.4rem 0; cursor: pointer; list-style: none;
  transition: color 0.3s var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q h3 {
  font-size: clamp(1rem, 1.9vw, 1.13rem); font-weight: 500;
  letter-spacing: -0.018em; color: var(--text-2);
  transition: color 0.3s var(--ease); flex: 1;
}
.faq__q::after {
  content: ""; flex: none; width: 11px; height: 11px;
  border-right: 1.5px solid var(--cyan); border-bottom: 1.5px solid var(--cyan);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.35s var(--ease);
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg) translateY(-2px); }
.faq__item[open] .faq__q h3 { color: var(--white); }
.faq__q:hover h3 { color: var(--text); }

.faq__a { padding-bottom: 1.5rem; }
.faq__a p {
  font-size: 0.945rem; color: var(--text-3); line-height: 1.68;
  max-width: 68ch; text-wrap: pretty;
}

/* ───── CTA final ───── */

.section--build { text-align: center; }
.build { position: relative; display: flex; flex-direction: column; align-items: center; }
.build .section__lede { margin-inline: auto; margin-bottom: 2.2rem; }

.build__core {
  display: block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 22px 5px rgba(0, 200, 255, 0.72), 0 0 90px 26px rgba(0, 107, 255, 0.26);
  margin-bottom: 2.4rem;
  animation: seedPulse 3.6s var(--ease-soft) infinite;
}
.build__meta {
  margin-top: 1.9rem;
  font-size: var(--t-micro); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-3);
}

/* ─────────────────────────── FOOTER ─────────────────────────── */

.foot {
  padding: clamp(3rem, 6vw, 4.5rem) 0 2.2rem;
  border-top: 1px solid rgba(122, 167, 255, 0.1);
  background: linear-gradient(180deg, transparent, rgba(7, 20, 38, 0.55));
}
.foot__inner {
  display: flex; flex-wrap: wrap; gap: 2.5rem;
  justify-content: space-between; align-items: flex-start;
}
.foot__mark { width: 40px; height: 40px; object-fit: contain; margin-bottom: 0.9rem; }
.foot__name { font-weight: 600; font-size: 1.08rem; letter-spacing: -0.02em; }
.foot__tag  { font-size: 0.8rem; color: var(--cyan); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 0.3rem; }
.foot__cat  { font-size: 0.8rem; color: var(--text-3); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 0.15rem; }

.foot__links { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.foot__links a { font-size: 0.87rem; color: var(--text-3); transition: color 0.25s var(--ease); }
.foot__links a:hover { color: var(--cyan); }

.foot__legal {
  width: min(1180px, 100% - var(--gutter) * 2); margin: 3rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(122, 167, 255, 0.07);
  font-size: 0.79rem; color: var(--text-3);
}

/* ─────────────────────────── RÉVÉLATIONS ─────────────────────────── */

[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
[data-reveal][data-lit] { opacity: 1; transform: none; }

/* ─────────────────────────── RESPONSIVE ─────────────────────────── */

@media (max-width: 1080px) {
  .flow { grid-template-columns: repeat(2, 1fr); }
  .caps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__mark { width: 52px; height: auto; }
  .nav[data-scrolled] .nav__mark { width: 44px; height: auto; }
  .nav__wordmark { font-size: 1.1rem; }
  .nav__toggle { display: grid; place-items: center; }
  .nav__mobile { display: flex; }
  .nav__mobile[hidden] { display: none; }
}

/* Composition mobile dédiée : le vortex n'est pas rétréci, il est recomposé —
   noyau plus présent, moins de mots, orbite resserrée, texte lisible. */
@media (max-width: 640px) {
  .hero { padding: 6.5rem 0 3rem; min-height: auto; }
  .hero__logo { margin-bottom: 0.6rem; }
  .hero__actions { width: 100%; flex-direction: column; }
  .hero__actions .btn { width: 100%; }

  .vortex { height: 340px; margin-top: 2.2rem; }
  .core { width: 96px; height: 96px; }
  .vword { font-size: 0.66rem; letter-spacing: 0.1em; padding: 0.24em 0.4em; }
  .vortex__panel { width: min(260px, 80vw); padding: 0.75rem 0.9rem; }

  .flow { grid-template-columns: 1fr; }
  .caps { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; }
  .arch__spine { height: 34px; }
  .foot__inner { flex-direction: column; gap: 2rem; }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .vortex { height: clamp(360px, 46vw, 480px); }
  .core { width: 112px; height: 112px; }
}

/* ─────────────────────── MOUVEMENT RÉDUIT ───────────────────────
   Le vortex s'immobilise dans une composition statique équilibrée, le champ de
   particules est masqué, et TOUT le contenu textuel reste présent et lisible.
   Le site n'a jamais besoin de l'animation pour être compris. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

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

  .hero__field { display: none; }

  /* Rien ne reste caché derrière une animation qui ne se déclenchera pas. */
  [data-reveal], .cap, .arch__band, .compare__side, .eco {
    opacity: 1 !important; transform: none !important;
  }
  .flow__stage::before { transform: scaleX(1) !important; }
}

/* ═══════════════════════ PAGES LÉGALES ═══════════════════════
   Même système visuel, mais composition de lecture : une seule colonne
   étroite, hiérarchie sobre, aucun effet. Ces pages se lisent, elles ne
   se contemplent pas. */

.legal { padding: 9rem 0 var(--bay); }

.legal__head { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.legal__title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  background: linear-gradient(180deg, var(--white) 34%, #A8C3E0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 0.9rem;
}
.legal__meta {
  font-size: var(--t-micro); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-3);
}

/* Bandeau d'avertissement : ces documents sont des gabarits tant qu'un
   juriste ne les a pas revus. Le signaler visuellement évite qu'ils partent
   en production tels quels par inadvertance. */
.legal__draft {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 1.1rem 1.3rem; margin-bottom: 3rem;
  border-left: 3px solid var(--warn, #D9A254);
  border-radius: 3px;
  background: rgba(217, 162, 84, 0.07);
}
.legal__draft strong {
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: #E0B978;
}
.legal__draft p { font-size: 0.9rem; color: var(--text-2); }

.legal__toc {
  padding: 1.4rem 1.6rem; margin-bottom: 3.5rem;
  border: 1px solid var(--edge); border-radius: 14px; background: var(--glass);
}
.legal__toc p {
  font-size: var(--t-micro); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 0.9rem;
}
.legal__toc ol { counter-reset: toc; display: grid; gap: 0.42rem; }
.legal__toc li { counter-increment: toc; }
.legal__toc a { font-size: 0.9rem; color: var(--text-2); transition: color 0.25s var(--ease); }
.legal__toc a::before {
  content: counter(toc) ". "; color: var(--text-3); font-variant-numeric: tabular-nums;
}
.legal__toc a:hover { color: var(--cyan); }

.legal__section { margin-bottom: 2.8rem; scroll-margin-top: 6rem; }
.legal__section h2 {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem); font-weight: 550;
  margin-bottom: 1rem; color: var(--white);
}
.legal__section h3 {
  font-size: 1rem; font-weight: 550; margin: 1.6rem 0 0.6rem; color: var(--text);
}
.legal__section p,
.legal__section li {
  font-size: 0.95rem; color: var(--text-2); line-height: 1.72; text-wrap: pretty;
}
.legal__section p + p { margin-top: 0.9rem; }
.legal__section ul {
  list-style: disc; padding-left: 1.3rem; margin-top: 0.8rem;
  display: flex; flex-direction: column; gap: 0.45rem;
}
.legal__section a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }

/* Emplacement à remplir : visible, impossible à confondre avec du texte final. */
.fill {
  display: inline; padding: 0.08em 0.42em; border-radius: 4px;
  background: rgba(217, 162, 84, 0.14);
  border: 1px dashed rgba(217, 162, 84, 0.45);
  color: #E9C489; font-size: 0.92em;
}

.legal__back {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 2rem; font-size: 0.88rem; color: var(--text-3);
  transition: color 0.25s var(--ease);
}
.legal__back:hover { color: var(--cyan); }

@media (max-width: 640px) { .legal { padding: 7rem 0 4rem; } }

/* ═══════════════ SIGNATURE D'APPARTENANCE ═══════════════
   L'association aux deux marques doit se lire d'un coup d'œil sans jamais
   renverser la hiérarchie : sur ce site, InnoAgentic reste la marque
   dominante et Synapro l'écosystème qu'elle sert. */

.eco__link { margin-top: 1.5rem; text-align: center; }
.eco__link a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.9rem; color: var(--cyan);
  padding: 0.6rem 1.1rem; border-radius: 100px;
  border: 1px solid rgba(0, 217, 255, 0.22);
  background: rgba(0, 107, 255, 0.06);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), gap 0.3s var(--ease);
}
.eco__link a:hover {
  border-color: var(--edge-lit); background: rgba(0, 107, 255, 0.12); gap: 0.75rem;
}

.foot__eco { margin-top: 0.85rem; font-size: 0.83rem; color: var(--text-3); }
.foot__eco a {
  color: var(--text-2); border-bottom: 1px solid rgba(0, 217, 255, 0.32);
  padding-bottom: 1px; transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.foot__eco a:hover { color: var(--cyan); border-color: var(--cyan); }