/* Entrées hero */
@keyframes sgn-reveal-in{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:none}
}

@keyframes sgn-glow-pulse{
  0%,100%{opacity:.85;transform:scale(1)}
  50%{opacity:1;transform:scale(1.04)}
}

@keyframes sgn-hero-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

@keyframes sgn-scan{
  0%{top:12%;opacity:0}
  8%{opacity:.7}
  92%{opacity:.7}
  100%{top:48%;opacity:0}
}

@keyframes sgn-display-pulse{
  0%,100%{filter:drop-shadow(0 0 0 rgba(255,106,61,0))}
  50%{filter:drop-shadow(0 0 14px rgba(255,106,61,.35))}
}

@keyframes sgn-dot-live{
  0%,100%{box-shadow:0 0 0 4px rgba(62,207,142,.15)}
  50%{box-shadow:0 0 0 7px rgba(62,207,142,.28)}
}

@keyframes sgn-btn-shine{
  to{transform:translateX(120%)}
}

@keyframes sgn-cta-shift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

@keyframes sgn-cta-orb{
  0%,100%{opacity:.45;transform:translate(0,0) scale(1)}
  50%{opacity:.75;transform:translate(6%,-4%) scale(1.08)}
}

@keyframes sgn-band-glow{
  0%,100%{box-shadow:inset 0 0 0 rgba(255,106,61,0),0 0 0 rgba(255,106,61,0)}
  50%{box-shadow:inset 0 1px 0 rgba(255,106,61,.12),0 0 48px -12px rgba(255,106,61,.18)}
}

@keyframes sgn-steps-flow{
  0%{background-position:0% 50%}
  100%{background-position:200% 50%}
}

@keyframes sgn-cta-pulse{
  0%,100%{box-shadow:0 6px 22px -8px rgba(255,106,61,.55)}
  50%{box-shadow:0 10px 32px -6px rgba(255,106,61,.8)}
}

@keyframes sgn-icon-pop{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}

@keyframes sgn-status-blink{
  0%,100%{opacity:1}
  50%{opacity:.45}
}

/* Hero */
.sgn .glow{animation:sgn-glow-pulse 7s ease-in-out infinite}

.sgn .hero-grid > div:first-child > .eyebrow{animation:sgn-reveal-in .65s cubic-bezier(.22,1,.36,1) .05s both}

.sgn .hero-grid > div:first-child > h1{animation:sgn-reveal-in .7s cubic-bezier(.22,1,.36,1) .12s both}

.sgn .hero-grid > div:first-child > .lede{animation:sgn-reveal-in .7s cubic-bezier(.22,1,.36,1) .2s both}

.sgn .hero-grid > div:first-child > .hero-cta{animation:sgn-reveal-in .7s cubic-bezier(.22,1,.36,1) .28s both}

.sgn .hero-grid > div:first-child > .hero-note{animation:sgn-reveal-in .7s cubic-bezier(.22,1,.36,1) .36s both}

.sgn .hero-visual{
  position:relative;
  animation:sgn-reveal-in .85s cubic-bezier(.22,1,.36,1) .18s both,sgn-hero-float 6s ease-in-out 1.1s infinite
}

.sgn .hero-visual::before{
  content:"";
  position:absolute;
  left:36%;
  width:34%;
  height:2px;
  border-radius:2px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,106,61,.55),transparent);
  animation:sgn-scan 5s ease-in-out 1.4s infinite;
  z-index:2
}

.sgn .hero-display{animation:sgn-display-pulse 3.5s ease-in-out infinite}

.sgn .hero-board-row{transition:opacity .35s ease}

.sgn .hero-board-row.is-dim{opacity:.55}

.sgn .hero-board-row.is-active{opacity:1}

.sgn .hero-board-row.is-active .hero-board-dest{fill:#F4F6F8}

.sgn .hero-status-delayed{animation:sgn-status-blink 2s ease-in-out infinite}

.sgn .dot{animation:sgn-dot-live 2.4s ease-in-out infinite}

.sgn .aud{animation:sgn-reveal-in .7s cubic-bezier(.22,1,.36,1) .45s both}

.sgn .aud a{
  transition:color .15s ease,transform .15s ease;
  display:inline-block
}

.sgn .aud a:hover{color:var(--text);transform:translateY(-1px)}

/* Boutons */
.sgn .btn-primary{position:relative;overflow:hidden;isolation:isolate}

.sgn .btn-primary::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);
  transform:translateX(-130%);
  pointer-events:none
}

.sgn .btn-primary:hover::before{animation:sgn-btn-shine .75s ease}

.sgn .top-cta.btn-primary{animation:sgn-cta-pulse 4s ease-in-out infinite}

/* Scroll reveal */
.sgn .reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--reveal-delay,0ms)
}

.sgn .reveal.is-visible{opacity:1;transform:none}

.sgn .card:hover .ico{animation:sgn-icon-pop .45s ease}

/* Étapes — connecteurs entre les cartes (desktop, 3 colonnes) */
@media(min-width:901px){
  .sgn .steps .step:not(:last-child)::after{
    content:"";
    position:absolute;
    top:38px;
    left:100%;
    width:22px;
    height:2px;
    border-radius:2px;
    pointer-events:none;
    background:linear-gradient(90deg,var(--accent),var(--accent-amber));
    background-size:200% 100%;
    animation:sgn-steps-flow 5s linear infinite;
    opacity:.35
  }
}

.sgn .step .num{
  display:inline-block;
  transition:text-shadow .25s ease
}

.sgn .step:hover .num{text-shadow:0 0 18px rgba(255,106,61,.45)}

/* Bande fiabilité */
.sgn .band{animation:sgn-band-glow 5s ease-in-out infinite}

.sgn .rob .ico{transition:transform .25s ease,box-shadow .25s ease}

.sgn .rob:hover .ico{
  transform:scale(1.06);
  box-shadow:0 0 20px -4px rgba(255,106,61,.35)
}

/* CTA final */
.sgn .finalcta{
  background-size:200% 200%;
  animation:sgn-cta-shift 10s ease infinite
}

.sgn .finalcta::before,
.sgn .finalcta::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(40px)
}

.sgn .finalcta::before{
  width:220px;height:220px;
  top:-60px;right:8%;
  background:rgba(255,106,61,.22);
  animation:sgn-cta-orb 8s ease-in-out infinite
}

.sgn .finalcta::after{
  width:180px;height:180px;
  bottom:-50px;left:6%;
  background:rgba(255,200,87,.16);
  animation:sgn-cta-orb 8s ease-in-out infinite reverse
}

.sgn .finalcta > *{position:relative;z-index:1}

/* Header */
.sgn .topbar{
  background:linear-gradient(180deg,rgba(10,12,15,.88),rgba(10,12,15,.72));
  border-bottom-color:transparent;
  background-clip:padding-box;
  box-shadow:inset 0 -1px 0 var(--line-soft)
}

.sgn .brand svg{transition:transform .25s ease,filter .25s ease}

.sgn .brand:hover svg{
  transform:scale(1.04) rotate(-2deg);
  filter:drop-shadow(0 0 10px rgba(255,106,61,.35))
}

.sgn .hubcard .tag{transition:background .25s ease,border-color .25s ease}

.sgn .hubcard:hover .tag{
  border-color:rgba(255,106,61,.35);
  background:rgba(255,106,61,.12)
}

@media(prefers-reduced-motion:reduce){
  .sgn .reveal{opacity:1;transform:none}

  .sgn .hero-board-row.is-dim{opacity:1}
}