:root{--alt:#F1F5FB;--sp:100px;--acc:#0C6684;}
.h--kin{position:relative;overflow:hidden;padding:100px 0 56px;}
.h__bg{position:absolute;inset:-20% -10% 0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle at 30% 34%,rgba(14,58,121,.10) 0 1.6px,transparent 2.2px);
  background-size:52px 52px;will-change:transform;}
.h--kin .h__in{position:relative;z-index:1;}
.h__t--kin{display:flex;flex-wrap:wrap;gap:0 .28em;max-width:18ch;}
/* Le hero n'utilise AUCUNE opacité : quand un document est caché, ni les animations,
   ni le rAF, ni les minuteurs ne tournent — un état invisible ne pourrait plus être
   levé. L'entrée se fait donc par translation seule. Pire cas : texte décalé de 18 px,
   toujours lisible. */
.kin-armed{transform:translateY(18px);transition:transform .78s var(--ease);}
.kin-armed.on{transform:none;}
.h__t--kin .w{display:inline-block;}
.h__scroll{margin-top:40px;display:flex;align-items:center;gap:12px;font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-500);}
.h__scroll span{width:34px;height:1px;background:var(--ink-300);position:relative;overflow:hidden;}
.h__scroll span::after{content:'';position:absolute;inset:0;background:var(--navy-700);
  animation:sweep 1.9s var(--ease) infinite;}
@keyframes sweep{0%{transform:translateX(-100%);}60%,100%{transform:translateX(100%);}}
.prog{position:fixed;top:0;left:0;right:0;height:2px;background:var(--gold-500);z-index:400;
  transform:scaleX(0);transform-origin:0 50%;will-change:transform;}
.card,.fcard{border-radius:16px;}
.card:hover,.fcard:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);}
.big:hover{transform:translateX(16px);}
/* Pas d'opacité ici non plus : une pastille figée à opacity 0 disparaîtrait.
   L'entrée se fait par échelle, transform-box sur la forme. */
.zone-dot{animation:dotin .55s var(--ease) backwards;transform-box:fill-box;transform-origin:center;}
.zone-dot:nth-child(2n){animation-delay:.08s;} .zone-dot:nth-child(3n){animation-delay:.16s;}
@keyframes dotin{from{transform:scale(.45);}to{transform:scale(1);}}
.zone-ring{stroke-dasharray:6 6;animation:spin 44s linear infinite;transform-origin:center;}
@keyframes spin{to{stroke-dashoffset:-480;}}
@media(prefers-reduced-motion:reduce){
  .kin-armed{opacity:1 !important;transform:none !important;transition:none !important;}
  .h__scroll span::after,.zone-ring,.zone-dot{animation:none;transform:none;}}
.cta{background:var(--navy-700);}