/* SK & Co — 2D hero (replaces the WebGL black-hole sphere). Transform/opacity-only animation, no WebGL, no blur filters. */
#bh{display:none!important}
.tour-pill{display:none!important}

/* soft static backdrop where the sphere used to be */
body{background-color:#08050a}
.hero2d-bg{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
   radial-gradient(ellipse 46% 38% at 50% 44%,rgba(227,168,148,.16),rgba(201,138,126,.07) 45%,transparent 72%),
   radial-gradient(ellipse 90% 70% at 50% 110%,rgba(120,60,90,.18),transparent 70%);
  opacity:var(--bhfade,1)}
.hero2d-ring{position:absolute;left:50%;top:44%;width:min(62vw,560px);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);border:1px solid rgba(239,201,184,.14)}
.hero2d-ring.r2{width:min(84vw,780px);border-color:rgba(239,201,184,.07)}
.hero2d-ring.r3{width:min(40vw,360px);border:1px dashed rgba(239,201,184,.22);animation:h2dspin 90s linear infinite}
@keyframes h2dspin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* big logo in the hero */
.hero-logo{position:absolute;left:50%;top:44svh;transform:translate(-50%,-50%);z-index:13;margin:0;text-align:center;
  pointer-events:none;max-width:none!important;opacity:0}
.hero-logo .hl-mark{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(54px,9.5vw,128px);line-height:1;
  letter-spacing:.14em;margin-right:-.14em;white-space:nowrap;
  background:linear-gradient(180deg,#fff3ec 0%,var(--rg-soft) 45%,var(--rg) 100%);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--rg-soft)}
.hero-logo .hl-rule{display:block;width:64px;height:1px;margin:18px auto 12px;background:linear-gradient(90deg,transparent,var(--rg),transparent)}
.hero-logo .hl-sub{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--muted)}
body.hero-in .hero-logo{animation:h2dLogo .9s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes h2dLogo{from{opacity:0;translate:0 14px}to{opacity:calc(1 - var(--leave,0));translate:0 0}}

/* small top-left brand only once the hero logo has scrolled away */
body:not(.scrolled) .topbar .brand{opacity:0!important;pointer-events:none}
body.scrolled .topbar .brand{opacity:1!important;transform:none!important;pointer-events:auto}

/* pinpoints: same #orbit links, now laid out in 2D around the logo */
#orbit.flat a.pin{left:var(--x);top:var(--y);opacity:0;pointer-events:none;visibility:visible;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(16,10,14,.82)!important;
  font-size:11px;letter-spacing:.14em;padding:8px 16px 8px 11px;will-change:auto;
  transition:color .3s,border-color .3s,box-shadow .3s,transform .3s}
body.hero-in #orbit.flat a.pin{animation:h2dPin .7s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.35s + var(--i,0) * .11s)}
@keyframes h2dPin{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0;pointer-events:auto}}
body.hero-in #orbit.flat a.pin{pointer-events:auto}
#orbit.flat.pins-off a.pin{visibility:hidden;pointer-events:none}
#orbit.flat a.pin:hover,#orbit.flat a.pin:focus-visible{transform:translate(-50%,-50%) scale(1.06);outline:none}
#orbit.flat a.pin.active{transform:translate(-50%,-50%) scale(1.06);background:linear-gradient(135deg,var(--rg-soft),var(--rg))!important;border-color:var(--rg)!important;color:#2a1418!important;box-shadow:0 0 18px rgba(227,168,148,.45)}
#orbit.flat a.pin.active .pin-lb{-webkit-text-fill-color:#2a1418!important}
#orbit.flat a.pin.active .pin-ic{color:#2a1418!important}
#orbit.flat a.pin .pin-ic{filter:none}
/* desktop positions (order: pour qui, ce qu'on fait, comment ça marche, votre audit, questions, candidature, discord) */
#orbit.flat a.pin:nth-child(1){--x:25%;--y:28%}
#orbit.flat a.pin:nth-child(2){--x:75%;--y:28%}
#orbit.flat a.pin:nth-child(3){--x:84%;--y:48%}
#orbit.flat a.pin:nth-child(4){--x:72%;--y:66%}
#orbit.flat a.pin:nth-child(5){--x:28%;--y:66%}
#orbit.flat a.pin:nth-child(6){--x:50%;--y:18%}
#orbit.flat a.pin:nth-child(7){--x:16%;--y:48%}
@media (max-width:820px){
  .hero-logo{top:27svh}
  .hero-logo .hl-mark{font-size:clamp(46px,14vw,72px)}
  .hero-logo .hl-rule{margin:12px auto 8px}
  .hero-logo .hl-sub{font-size:9.5px;letter-spacing:.28em}
  .hero2d-ring{top:27%}
  .hero2d-ring{width:78vw}.hero2d-ring.r2{width:120vw}.hero2d-ring.r3{width:56vw}
  .hero2d-bg{background:radial-gradient(ellipse 70% 30% at 50% 27%,rgba(227,168,148,.16),transparent 72%),radial-gradient(ellipse 120% 60% at 50% 110%,rgba(120,60,90,.18),transparent 70%)}
  #orbit.flat a.pin{font-size:9.5px;letter-spacing:.1em;padding:7px 12px 7px 9px}
  #orbit.flat a.pin:nth-child(1){--x:28%;--y:45%}
  #orbit.flat a.pin:nth-child(2){--x:72%;--y:45%}
  #orbit.flat a.pin:nth-child(3){--x:31%;--y:52.5%}
  #orbit.flat a.pin:nth-child(4){--x:73%;--y:52.5%}
  #orbit.flat a.pin:nth-child(5){--x:28%;--y:60%}
  #orbit.flat a.pin:nth-child(7){--x:72%;--y:60%}
  #orbit.flat a.pin:nth-child(6){--x:50%;--y:67.5%}
}
@media (prefers-reduced-motion:reduce){
  .hero2d-ring.r3{animation:none}
  body.hero-in .hero-logo,body.hero-in #orbit.flat a.pin{animation:none;opacity:1}
  body.hero-in .hero-logo{opacity:calc(1 - var(--leave,0))}
}

/* Arabic: no letter-spacing (breaks letter joining) */
html[lang="ar"] .hero-logo .hl-sub,[dir="rtl"] .hero-logo .hl-sub{letter-spacing:0;text-transform:none;font-size:13px}

/* WhatsApp "instant reply" tag */
.wa-fast{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:500;letter-spacing:.03em;text-transform:none;color:#8fd6a8;white-space:nowrap;font-style:normal}
.wa-fast:before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:#5fe08a}
.wa .wa-fast{margin-left:2px;padding-left:9px;border-left:1px solid rgba(143,214,168,.3)}
.faq-contact .wa-fast{margin-left:10px}
.mdock-wa{width:auto!important;padding:0 14px 0 12px;gap:7px}
.mdock-wa,.mdock-wa .wa-fast{text-decoration:none}.mdock-wa .wa-fast{font-size:.64rem;color:#8fd6a8}

.wa .wa-lbl{display:none}
.wa .wa-fast{margin-left:0;padding-left:0;border-left:0;font-size:.74rem}