/* ============================================================
   MAESTROW — hub multicolore. Identité 2026-07, fond clair.
   Les 3 accents (bleu/violet/orange) cohabitent.
   ============================================================ */
body{
  /* Hub en NOIR & BLANC façon Mobbin : le chrome (header CTA, eyebrow, focus,
     bouton primaire) est neutre. Les 3 couleurs ne servent qu'au contenu qui
     REPRÉSENTE les apps (icônes flottantes, rangées, mots-clés, CTA sombre). */
  --dc-accent:#0b0b0e;      /* chrome neutre (noir) */
  --dc-accent-2:#1d4ed8;    /* bleu — pour les radials du CTA sombre */
  --dc-accent-deep:#c2410c; /* orange — pour les radials du CTA sombre */
}

/* Fond dégradé continu tri-couleur */
#bg-gradient{
  background:
    radial-gradient(560px 460px at 16% 740px, rgba(29,78,216,0.26), transparent 66%),
    radial-gradient(600px 480px at 52% 820px, rgba(109,40,217,0.26), transparent 66%),
    radial-gradient(560px 460px at 86% 740px, rgba(194,65,12,0.22), transparent 66%),
    linear-gradient(180deg, #ffffff 0%, #f4f1fb 46%, #ffffff 84%);
}

/* ---------- 1. Hero centré + icônes qui se succèdent ----------
   Le hero remplit le premier écran (contenu centré verticalement) pour qu'on
   ne voie pas le haut de la section suivante sous la ligne de flottaison. */
.hub-hero{
  position:relative;
  min-height:calc(100vh - 76px);
  min-height:calc(100svh - 76px);
  display:flex;flex-direction:column;justify-content:center;
  padding:32px 0 48px;
}
.hub-hero__inner{
  position:relative;z-index:2;
  max-width:900px;margin:0 auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.hub-hero__inner .dc-eyebrow{margin-bottom:22px;}
.hub-hero h1{font-size:clamp(28px,6.5vw,74px);letter-spacing:-0.04em;line-height:1.03;}
.hub-hero__sub{margin-top:24px;max-width:52ch;font-size:19px;line-height:1.55;color:var(--dc-body);}
.hub-hero__actions{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap;justify-content:center;}

/* Icônes qui se succèdent : une arrive, reste, part pour laisser la suivante
   (une seule visible à la fois — style Mobbin). Marque pac-man par accent. */
.hub-iconstage{
  position:relative;
  width:clamp(58px,10vw,86px);
  aspect-ratio:1;
  margin:0 auto 24px;
}
.hub-ic{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;
  opacity:0;
  /* 10s pour 4 icônes au décalage de 2,5s (labs, domain, server, cloud). */
  animation:hubIcon 10s cubic-bezier(0.22,1,0.36,1) infinite;
  animation-delay:calc(var(--d) * -2.5s);
}
@keyframes hubIcon{
  0%   {opacity:0;transform:translateY(22px) scale(0.9);}
  8%   {opacity:1;transform:translateY(0) scale(1);}
  26%  {opacity:1;transform:translateY(0) scale(1);}
  34%  {opacity:0;transform:translateY(-20px) scale(0.95);}
  100% {opacity:0;transform:translateY(22px) scale(0.9);}
}
@media (prefers-reduced-motion:reduce){
  .hub-ic{animation:none;opacity:0;}
  .hub-ic:first-child{opacity:1;}
}

/* ---------- 2. Section épinglée : icônes flottantes + 3 textes qui arrivent ---------- */
.hub-reveal{position:relative;height:220vh;}
.hub-reveal__pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden;}

/* Icônes du logo qui flottent en continu, réparties autour du texte central */
.hub-reveal__float{position:absolute;inset:0;pointer-events:none;z-index:1;}
.hub-float{position:absolute;object-fit:contain;animation:floaty 6.5s ease-in-out infinite;}
.hub-float--a{top:13%;left:7%;width:clamp(29px,4.2vw,55px);animation-duration:6.5s;}
.hub-float--b{top:22%;right:8%;width:clamp(24px,3.5vw,45px);animation-duration:7.6s;animation-delay:-1.5s;opacity:.82;}
.hub-float--c{bottom:15%;left:11%;width:clamp(27px,3.8vw,49px);animation-duration:8s;animation-delay:-3s;}
.hub-float--d{bottom:21%;right:9%;width:clamp(21px,3.2vw,39px);animation-duration:6.8s;animation-delay:-2s;opacity:.85;}
.hub-float--e{top:46%;left:3%;width:clamp(18px,2.8vw,34px);animation-duration:7.2s;animation-delay:-4s;opacity:.7;}
.hub-float--f{top:9%;left:40%;width:clamp(17px,2.5vw,31px);animation-duration:7.9s;animation-delay:-2.6s;opacity:.6;}
.hub-float--g{bottom:10%;right:36%;width:clamp(20px,2.8vw,36px);animation-duration:6.2s;animation-delay:-5s;opacity:.66;}

/* Le texte s'empile : chaque ligne apparaît au scroll et RESTE, en flux centré */
.hub-reveal__stack{position:relative;z-index:2;width:100%;max-width:1000px;margin:0 auto;padding:0 32px;text-align:center;}
.hub-say{
  opacity:var(--on,0);
  transform:translateY(calc((1 - var(--on,0)) * 22px));
  will-change:opacity,transform;
}
.hub-say--eyebrow{
  display:block;margin-bottom:26px;
  font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:14px;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--dc-muted);
}
p.hub-say{
  margin:0.1em 0;
  font-family:"Space Grotesk",sans-serif;font-weight:700;
  font-size:clamp(30px,5vw,62px);line-height:1.14;letter-spacing:-0.03em;color:var(--dc-ink);
}
p.hub-say em{font-style:normal;color:var(--em,var(--dc-accent));text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:color-mix(in srgb, var(--em) 45%, transparent);}
.hub-reveal__track{
  position:absolute;bottom:6vh;left:50%;transform:translateX(-50%);display:flex;gap:9px;z-index:2;
}
.hub-reveal__track span{
  width:26px;height:4px;border-radius:2px;background:var(--dc-line);
  transition:background .3s ease;
}
.hub-reveal__track span.is-on{background:var(--dc-ink);}
/* Repli mouvement réduit / mobile : tout empilé et visible, pas de pin, icônes figées */
.hub-reveal.is-static{height:auto;}
.hub-reveal.is-static .hub-reveal__pin{position:static;height:auto;display:block;overflow:visible;padding:56px 0;}
.hub-reveal.is-static .hub-say{opacity:1;transform:none;}
.hub-reveal.is-static .hub-reveal__track{display:none;}
.hub-reveal.is-static .hub-float{animation:none;}

/* ---------- 3. Apps en rangées éditoriales ---------- */
.hub-apps{padding:40px 0 20px;}
.hub-row{
  display:grid;grid-template-columns:72px 1.1fr 1.5fr 48px;align-items:center;gap:20px;
  padding:30px 12px;border-top:1px solid var(--dc-line);
  --racc:var(--dc-accent);
  transition:background .2s ease;
}
.hub-apps .hub-row:last-of-type{border-bottom:1px solid var(--dc-line);}
.hub-row:hover{background:color-mix(in srgb,var(--racc) 6%,transparent);}
.hub-row--labs{--racc:#1d4ed8;}
.hub-row--domain{--racc:#6d28d9;}
.hub-row--server{--racc:#c2410c;}
.hub-row--cloud{--racc:#0d9488;}
.hub-row__num{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:15px;color:var(--dc-muted);}
.hub-row__name{
  font-family:"Space Grotesk",sans-serif;font-weight:700;
  font-size:clamp(30px,4vw,44px);letter-spacing:-0.03em;color:var(--racc);
}
.hub-row__desc{font-size:16px;line-height:1.5;color:var(--dc-body);max-width:52ch;}
.hub-row__arrow{justify-self:end;font-size:24px;color:var(--racc);transition:transform .2s ease;}
.hub-row:hover .hub-row__arrow{transform:translateX(5px);}

/* ---------- 4. Boucle (3 étapes) ---------- */
.hub-loop{padding:80px 0 8px;}

/* ---------- 5. CTA ---------- */
.hub-cta-wrap{padding:76px 0 0;}

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .hub-hero{padding:52px 0 64px;}
  .hub-reveal{height:auto;}
  .hub-reveal__pin{position:static;height:auto;display:block;overflow:visible;padding:48px 0;}
  .hub-reveal__float{display:none;}
  .hub-say{opacity:1 !important;transform:none !important;}
  p.hub-say{margin:0.14em 0;}
  .hub-reveal__track{display:none;}
  .hub-apps{padding:20px 0 8px;}
  .hub-row{grid-template-columns:auto minmax(0,1fr);gap:6px 16px;padding:24px 4px;}
  .hub-row__num{grid-row:1;}
  .hub-row__name{grid-row:1;grid-column:2;min-width:0;overflow-wrap:anywhere;}
  .hub-row__desc{grid-column:2;grid-row:2;min-width:0;overflow-wrap:anywhere;}
  .hub-row__arrow{display:none;}
  .hub-hero__actions .dc-btn{min-height:40px;}
  .hub-loop{padding:56px 0 4px;}
  .hub-cta-wrap{padding:56px 0 0;}
}
@media (max-width:400px){
  /* garde le H1 sur 2 lignes (« tous vos services. » tient sur une ligne) */
  .hub-hero h1{font-size:clamp(25px,7.2vw,34px);}
  p.hub-say{font-size:clamp(26px,8.5vw,44px);}
}