/* ============================================================
   MAESTROW — hub multicolore. Identité 2026-07, fond clair.
   Les 3 accents (bleu/violet/orange) cohabitent.
   ============================================================ */
body{
  --dc-accent:#6d28d9;      /* accent "maison" : header CTA, eyebrow */
  --dc-accent-2:#1d4ed8;
  --dc-accent-deep:#c2410c; /* le trio alimente 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é + tuiles flottantes ---------- */
.hub-hero{position:relative;padding:78px 0 92px;}
.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(52px,9vw,104px);letter-spacing:-0.04em;line-height:0.96;}
.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;}

.hub-hero__tiles{position:absolute;inset:0;z-index:1;pointer-events:none;}
.hub-tile{position:absolute;border-radius:12px;}
.hub-tile--a{left:5%;top:110px;width:74px;height:74px;background:#1d4ed8;}
.hub-tile--b{left:12%;top:330px;width:52px;height:52px;background:#c2410c;}
.hub-tile--c{left:3%;top:520px;width:40px;height:40px;background:#0b0b0e;}
.hub-tile--d{right:6%;top:96px;width:60px;height:60px;background:#6d28d9;}
.hub-tile--e{right:12%;top:300px;width:80px;height:80px;background:#f4f1fb;border:1px solid var(--dc-line);}
.hub-tile--f{right:4%;top:520px;width:46px;height:46px;background:#3b82f6;}

/* ---------- 2. Scroll animé : 3 apps révélées une par une ---------- */
.hub-reveal{position:relative;height:280vh;}
.hub-reveal__pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden;}
.hub-reveal__stage{position:relative;width:100%;max-width:1240px;margin:0 auto;padding:0 32px;min-height:58vh;}
.hub-reveal__lead{
  position:absolute;top:6vh;left:32px;
  font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:13px;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--dc-muted);
}
.hub-app{
  position:absolute;left:32px;right:32px;top:50%;
  opacity:var(--on,0);
  transform:translateY(calc(-50% + (1 - var(--on,0)) * 26px));
}
.hub-app__idx{
  display:block;
  font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:14px;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--acc);margin-bottom:10px;
}
.hub-app__name{
  display:block;
  font-family:"Space Grotesk",sans-serif;font-weight:700;
  font-size:clamp(64px,14vw,184px);line-height:0.9;letter-spacing:-0.045em;
  color:var(--acc);
  overflow-wrap:anywhere;
}
.hub-app__desc{margin-top:18px;max-width:34ch;font-size:clamp(16px,2vw,21px);color:var(--dc-body);}
.hub-reveal__track{
  position:absolute;bottom:4vh;left:32px;display:flex;gap:9px;
}
.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 : apps empilées, pas de pin */
.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-reveal__stage{min-height:0;}
.hub-reveal.is-static .hub-reveal__lead{position:static;margin-bottom:28px;}
.hub-reveal.is-static .hub-app{position:static;transform:none;opacity:1;margin-bottom:44px;left:0;right:0;}
.hub-reveal.is-static .hub-reveal__track{display: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__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-hero__tiles{display:none;}
  .hub-reveal{height:auto;}
  .hub-reveal__pin{position:static;height:auto;display:block;overflow:visible;padding:48px 0;}
  .hub-reveal__stage{min-height:0;}
  .hub-reveal__lead{position:static;margin-bottom:24px;}
  .hub-app{position:static;transform:none;opacity:1;left:0;right:0;margin-bottom:40px;}
  .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){
  .hub-hero h1{font-size:clamp(44px,15vw,60px);}
  .hub-app__name{font-size:clamp(52px,18vw,74px);}
}