/* Bizspaces homepage redesign: "Nuit" palette (violet-cyan), process rail,
   uniform sector matrix, gradient hero accent.
   Loaded LAST on the homepage (after audit-fixes.css). Scoped to homepage
   sections only. Content stays verbatim; only color and composition layers change.
   The full palette applies to every homepage section, including pricing,
   footer and the cookie banner (no gold on the homepage). */

/* === Palette tokens =================================================== */
:root {
  --rd-violet: #8B5CF6;
  --rd-violet-soft: #A78BFA;
  --rd-violet-deep: #6D28D9;
  --rd-cyan: #22D3EE;
  --rd-cyan-soft: #67E8F9;
  --rd-grad: linear-gradient(135deg, #8B5CF6, #22D3EE);
  --rd-line: rgba(139, 92, 246, 0.28);
  --rd-line-soft: rgba(139, 92, 246, 0.18);
  --rd-line-strong: rgba(139, 92, 246, 0.5);
  --rd-eyebrow: rgba(167, 139, 250, 0.95);
}

/* === Token remap: shared gold tokens now resolve to violet ============
   --qs-ink / --qs-panel / --qs-copy / --vz-* / --bz-ink stay as-is. */
:root {
  --qs-gold: #8B5CF6;
  --qs-gold-soft: #A78BFA;
  --qs-line: rgba(139, 92, 246, 0.28);
  --vz-gold: #8B5CF6;
  --vz-gold-soft: #A78BFA;
  --c-gold: #8B5CF6;
  --c-gold-soft: rgba(139, 92, 246, 0.12);
  --bz-gold: #8B5CF6;
  --bz-gold-soft: #A78BFA;
  --bz-rule: rgba(139, 92, 246, 0.28);
  --bz-rule-soft: rgba(139, 92, 246, 0.18);
  --bz-rule-strong: rgba(139, 92, 246, 0.5);
  --bz-eyebrow: rgba(167, 139, 250, 0.95);
}

/* === Hero: gradient accent ============================================ */
.hero { background: #0d0b12; }

.hero-bg__static {
  background:
    radial-gradient(ellipse at 78% 28%, rgba(139, 92, 246, 0.16), transparent 38%),
    radial-gradient(ellipse at 12% 78%, rgba(34, 211, 238, 0.10), transparent 44%),
    linear-gradient(160deg, #0a0a0a 0%, #14111d 55%, #0c0c0c 100%);
}
@media (max-width: 760px) {
  .hero-bg__static {
    background:
      radial-gradient(ellipse at 84% 22%, rgba(139, 92, 246, 0.14), transparent 36%),
      linear-gradient(165deg, #0a0a0a 0%, #14111d 60%, #0a0a0a 100%);
  }
}

#hero .hero__title { line-height: 1.06; letter-spacing: -0.045em; }

#hero .hero__title-line:last-child {
  background: var(--rd-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}

#hero .hero__eyebrow-dot {
  background: var(--rd-grad);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.18);
}

#hero .hero__divider { background: var(--rd-grad); }

#hero .hero__meta-item strong { color: var(--rd-violet-soft); }

#hero .btn--primary {
  background: var(--rd-grad);
  border-color: var(--rd-violet-soft);
  box-shadow: 0 15px 34px rgba(139, 92, 246, 0.22);
}

/* === Primary buttons: violet (all homepage sections, incl. pricing/footer/cookie) = */
.btn--primary,
.pricing-cta:not(.pricing-cta--ghost),
.ds-hero__btn-primary,
.ds-final-cta__btn-primary,
.city-cta,
.pillar-cta__btn,
.ds-financing__cta {
  background: var(--rd-grad);
  border-color: var(--rd-violet-soft);
  box-shadow: 0 10px 24px rgba(139, 92, 246, 0.18);
}
.bz-cookie-banner .btn--primary {
  background: var(--rd-grad) !important;
  border-color: var(--rd-violet-soft) !important;
  color: #ffffff !important;
}
.bz-cookie-banner {
  border-color: rgba(139, 92, 246, 0.45) !important;
}

/* === Ghost buttons on homepage sections =============================== */
#services .btn--ghost,
#sectors .btn--ghost,
#process .btn--ghost,
#zones .btn--ghost,
#faq .btn--ghost,
#testimonials .btn--ghost,
#contact .btn--ghost,
#pricing .btn--ghost,
#pricing .pricing-cta--ghost {
  color: var(--rd-violet-soft);
  border-color: rgba(139, 92, 246, 0.45);
}
#services .btn--ghost:hover,
#sectors .btn--ghost:hover,
#process .btn--ghost:hover,
#zones .btn--ghost:hover,
#faq .btn--ghost:hover,
#testimonials .btn--ghost:hover,
#contact .btn--ghost:hover,
#pricing .btn--ghost:hover,
#pricing .btn.pricing-cta--ghost:hover {
  background: rgba(139, 92, 246, 0.10);
  border-color: rgba(167, 139, 250, 0.8);
}

/* === Spotlight: violet on every homepage section ====================== */
.spotlight { --spot-color: 139, 92, 246; }

/* === Trust band ======================================================= */
#trust {
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.13), rgba(255, 255, 255, 0.025) 30%, rgba(255, 255, 255, 0.025) 70%, rgba(34, 211, 238, 0.10));
}
#trust .trust__number,
#trust .trust__number--large {
  background: var(--rd-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
#trust .trust__stars { color: var(--rd-violet-soft); }

/* === Section headers ================================================== */
.section-header h2::before {
  background: linear-gradient(90deg, var(--rd-violet), var(--rd-cyan), transparent);
}
.section-header h2 em { color: var(--rd-cyan-soft); }

/* === Section backgrounds and hairlines ================================ */
#services,
#portfolio,
#contact {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.06), transparent 42%);
}
#sectors,
#process {
  background: linear-gradient(120deg, #0c0b0f, #151120 55%, #0c0b0f);
}
#services::before,
#sectors::before,
#portfolio::before,
#pricing::before,
#testimonials::before,
#contact::before,
#process::before,
#zones::before,
#faq::before,
#project-fit-home::before {
  background: linear-gradient(90deg, var(--rd-violet), rgba(139, 92, 246, 0.14) 44%, transparent 76%);
}
#portfolio {
  background: radial-gradient(circle at 82% 12%, rgba(139, 92, 246, 0.10), transparent 28%);
}
#pricing {
  background: radial-gradient(circle at 15% 35%, rgba(139, 92, 246, 0.13), transparent 31%);
}

/* === Card hover accents (violet) ====================================== */
#services .service-card::after,
#sectors .sector::after,
#portfolio .portfolio-card::after {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.10), transparent 42%);
}
#services [class*="icon"],
#services [class*="emoji"] { filter: saturate(0.85); }

@media (hover: hover) and (pointer: fine) {
  #services .service-card:hover,
  #sectors .sector:hover,
  #portfolio .portfolio-card:hover {
    transform: translateY(-6px);
    border-color: rgba(167, 139, 250, 0.78);
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.30);
  }
  .service-card:hover,
  .sector:hover,
  .zone-card:hover,
  .fit-card:hover,
  .pillar-article-card:hover {
    border-color: rgba(167, 139, 250, 0.72);
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.27);
  }
  #pricing .pricing-card:hover {
    border-color: rgba(167, 139, 250, 0.72);
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.27);
  }
  #services .service-card:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(139, 92, 246, 0.055));
  }
}

#portfolio .portfolio-card__badge {
  border-color: var(--rd-line-strong);
  background: rgba(139, 92, 246, 0.10);
  color: var(--rd-violet-soft);
}
#portfolio .portfolio-card:focus-within {
  border-color: var(--rd-violet-soft);
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.24), 0 24px 52px rgba(0, 0, 0, 0.28);
}

/* === Sectors: uniform matrix (undo featured first-card layout) ======== */
#sectors .sector__index,
#zones .zone-card__index { color: var(--rd-violet-soft); }

@media (min-width: 1100px) {
  #sectors .sector:first-child {
    grid-column: auto;
    display: block;
    grid-template-columns: none;
    align-items: normal;
    gap: normal;
    padding: var(--space-5);
    background: var(--c-bg-elevated);
  }
  #sectors .sector:first-child .sector__icon {
    width: 32px;
    height: 32px;
    margin-bottom: var(--space-4);
  }
  #sectors .sector:first-child .sector__index {
    position: static;
    top: auto;
    right: auto;
    margin: 0 0 var(--space-4);
  }
  #sectors .sector:first-child .sector__title {
    font-size: var(--fs-h3);
    max-width: none;
  }
  #sectors .sector:first-child .sector__pos { max-width: none; }
  #sectors .sector:first-child .sector__example,
  #sectors .sector:first-child .sector__stats { color: var(--c-fg-dim); }
}

/* === Process: 4-step horizontal rail (no decorative numbers) ========== */
#process .process {
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rd-line-strong);
  counter-reset: none;
}
#process .process-step {
  display: block;
  position: relative;
  padding: var(--space-7) var(--space-5) var(--space-5);
  border-left: 1px solid var(--rd-line);
  border-top: 0;
  border-radius: 0;
  counter-increment: none;
}
#process .process-step:first-child { border-left: 0; }
#process .process-step__index {
  position: absolute;
  top: -1.15rem;
  left: var(--space-5);
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: var(--rd-grad);
  color: transparent;
  font-size: 0;
}
#process .process-step__index::before { content: ""; }
#process .process-step:hover {
  border-color: rgba(139, 92, 246, 0.48);
  transform: translateY(-3px);
}

@media (max-width: 960px) {
  #process .process {
    grid-template-columns: 1fr;
    border-top: 0;
    border-left: 1px solid var(--rd-line-strong);
    padding-left: var(--space-6);
  }
  #process .process-step {
    padding: var(--space-7) 0 var(--space-5);
    border-left: 0;
  }
  #process .process-step__index {
    top: 0.5rem;
    left: calc(-1 * var(--space-6) - 1.25rem);
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* === Testimonials, FAQ, forms ========================================= */
.testimonial {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(139, 92, 246, 0.065));
}
#testimonials .testimonial--featured {
  border-color: rgba(167, 139, 250, 0.55);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(255, 255, 255, 0.03));
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.35) inset;
}
#testimonials .testimonial--featured:hover {
  border-color: rgba(167, 139, 250, 0.55);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(139, 92, 246, 0.45) inset;
}
#testimonials .testimonial__badge {
  color: var(--rd-violet-soft);
  border: 1px solid rgba(139, 92, 246, 0.5);
}
#testimonials .testimonial__stars { color: var(--rd-violet-soft); }
.testimonials--rail .testimonials__track {
  scrollbar-color: rgba(139, 92, 246, 0.72) rgba(255, 255, 255, 0.08);
}

#pricing .pricing-amount,
#pricing [class*="amount"] {
  text-shadow: 0 0 30px rgba(139, 92, 246, 0.15);
}
#pricing [class*="cta"]:hover,
#pricing .btn:hover {
  background: var(--rd-violet-deep);
  color: #ffffff;
  border-color: rgba(167, 139, 250, 0.8);
}

#faq .faq { border-top-color: rgba(139, 92, 246, 0.4); }
#faq .faq-item { border-bottom-color: rgba(139, 92, 246, 0.4); }
#faq .faq-item__icon { border-color: rgba(139, 92, 246, 0.55); }
#faq .faq-item.is-open .faq-item__icon {
  background: var(--rd-violet);
  color: var(--qs-ink, #101112);
  border-color: var(--rd-violet);
}

.contact-form,
.fit-form,
.project-fit-form {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(139, 92, 246, 0.065));
}
.contact-form :is(input, textarea, select):focus,
.fit-form :is(input, textarea, select):focus,
.project-fit-form :is(input, textarea, select):focus {
  border-color: var(--rd-violet-soft);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
}

/* === Project Fit home section ========================================= */
#project-fit-home {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(34, 211, 238, 0.05));
}
.project-fit-home::before {
  background:
    radial-gradient(circle at 88% 10%, rgba(139, 92, 246, 0.20), transparent 27%),
    linear-gradient(112deg, rgba(139, 92, 246, 0.09), transparent 52%);
}
.project-fit-home__shell {
  border-color: var(--rd-line);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(139, 92, 246, 0.075));
}
.project-fit-home__intro { border-bottom-color: var(--rd-line); }
.project-fit-home__eyebrow { color: var(--rd-eyebrow); }
.project-fit-home__eyebrow::before {
  background: var(--rd-violet);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.09);
}
.project-fit-home__item { border-right-color: var(--rd-line); }
.project-fit-home__item:last-child { border-right-color: transparent; }
.project-fit-home__icon {
  border-color: var(--rd-line-strong);
  color: var(--rd-violet-soft);
  background: rgba(139, 92, 246, 0.08);
}
.project-fit-home__footer { border-top-color: var(--rd-line); }
.project-fit-home__footer .btn--primary {
  border-color: var(--rd-violet-soft);
  box-shadow: 0 14px 34px rgba(139, 92, 246, 0.22);
}
@media (max-width: 760px) {
  .project-fit-home__item { border-bottom-color: var(--rd-line); }
}

/* === Zones ============================================================ */
#zones .section-title { max-width: 26ch; }

/* === Footer: violet underline + hover (overrides gold) =============== */
footer.footer a,
footer.site-footer a,
.site-footer a {
  text-decoration-color: rgba(139, 92, 246, 0.5);
}
footer.footer a:hover,
footer.site-footer a:hover,
.site-footer a:hover {
  color: var(--rd-violet-soft);
}
.footer-premium__socials a:hover {
  color: #101112;
  background: var(--rd-violet);
  border-color: var(--rd-violet);
}
.footer-premium__fit-link,
.footer-premium__contact-link {
  color: var(--rd-violet-soft) !important;
}

/* === Hero: editorial split with client proof ===========================
   Left: copy (unchanged). Right: framed Bilal orbit shot as proof of work.
   Loaded after home-refresh.css so the left-aligned grid overrides win. */
#hero {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: clamp(2rem, 5vw, 4.75rem);
  align-items: center;
  justify-content: center;
  text-align: left;
}
/* hero-bg.css forces .hero > :not(.hero-bg) to position: relative, which
   would pull the light-rays scrim into the grid flow. Restore absolute. */
#hero .hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
#hero .hero__inner {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: 660px;
  margin-inline: 0;
  padding-inline: 0;
  text-align: left;
}
#hero .hero__eyebrow { margin-inline: 0; }
#hero .hero__title {
  width: auto;
  max-width: 17ch;
  margin: var(--space-6) 0 var(--space-5);
  text-align: left;
}
#hero .hero__inner > .hero__divider { margin: var(--space-4) 0; }
#hero .hero__inner > .hero__lead,
#hero .hero__inner > .tldr { margin: 0 0 var(--space-4); }
#hero .hero__inner > .hero__cta { margin: 0 0 var(--space-3); justify-content: flex-start; }
#hero .hero__inner > .hero__meta { margin-top: var(--space-4); justify-content: flex-start; }

/* --- Proof frame ------------------------------------------------ */
#hero .hero__scroll-hint {
  position: absolute;
  bottom: 24px;
  left: 50%;
  z-index: 2;
}
#hero .hero__proof {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 520px;
}
#hero .hero__proof::before {
  content: "";
  position: absolute;
  inset: -9%;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 50%, rgba(139, 92, 246, 0.28), transparent 64%);
  filter: blur(24px);
}
.hero__proof-frame {
  position: relative;
  padding: 10px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(139, 92, 246, 0.22), rgba(34, 211, 238, 0.10) 60%, rgba(139, 92, 246, 0.14));
  border: 1px solid var(--rd-line-strong);
  box-shadow: 0 42px 90px rgba(0, 0, 0, 0.5);
}
.hero__proof-bar {
  display: flex;
  gap: 6px;
  padding: 0 2px 10px;
}
.hero__proof-bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
.hero__proof-bar span:first-child { background: rgba(167, 139, 250, 0.85); }
.hero__proof-shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.hero__proof-caption {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 14px;
  padding: 7px 14px;
  border: 1px solid var(--rd-line);
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.55);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rd-eyebrow);
}
.hero__proof-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rd-grad);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
}
@keyframes hero-proof-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
#hero .hero__proof-frame { animation: hero-proof-float 7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  #hero .hero__proof-frame { animation: none; }
}
@media (max-width: 1024px) {
  #hero {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 3rem);
  }
  #hero .hero__inner,
  #hero .hero__proof {
    grid-column: auto;
    grid-row: auto;
    justify-self: start;
  }
  #hero .hero__inner { max-width: 640px; }
  #hero .hero__proof { max-width: 480px; }
}

/* === Process: white vector icons inside gradient circles =============== */
#process .process-step__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
#process .process-step__index svg {
  width: 17px;
  height: 17px;
}

/* === Portfolio: live button clearance (was clipped flush) ============== */
#portfolio .portfolio-card { padding-bottom: var(--space-4); }

/* === WhatsApp float: violet on the homepage ============================ */
.bz-wa-float {
  background: var(--rd-grad);
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.45),
              0 2px 4px rgba(0, 0, 0, 0.18);
  animation-name: bz-wa-pulse-violet;
}
.bz-wa-float:hover,
.bz-wa-float:focus-visible {
  box-shadow: 0 10px 24px rgba(139, 92, 246, 0.6),
              0 4px 8px rgba(0, 0, 0, 0.22);
}
@keyframes bz-wa-pulse-violet {
  0%   { box-shadow: 0 6px 16px rgba(139, 92, 246, 0.45), 0 0 0 0 rgba(139, 92, 246, 0.55); }
  70%  { box-shadow: 0 6px 16px rgba(139, 92, 246, 0.45), 0 0 0 20px rgba(139, 92, 246, 0); }
  100% { box-shadow: 0 6px 16px rgba(139, 92, 246, 0.45), 0 0 0 0 rgba(139, 92, 246, 0); }
}

/* === Contact: premium info panel (Donnez vie à votre projet) =========== */
#contact .contact__info {
  position: relative;
  margin-top: clamp(3.5rem, 6vw, 6rem);
  padding: clamp(1.75rem, 4vw, 3.25rem);
  border: 1px solid var(--rd-line);
  border-radius: 26px;
  background:
    radial-gradient(ellipse at 90% 0%, rgba(139, 92, 246, 0.14), transparent 46%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.035), rgba(139, 92, 246, 0.06));
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
#contact .contact__info h3 {
  margin: 0;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  line-height: 1.15;
  color: var(--c-fg);
  max-width: 18ch;
}
#contact .contact__info h3::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: var(--space-4);
  border-radius: 999px;
  background: var(--rd-grad);
}
#contact .contact__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0 0 var(--space-5);
}
#contact .contact__link {
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--rd-line-soft);
  border-radius: 14px;
  background: rgba(9, 9, 11, 0.4);
  font-size: 0.9rem;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
#contact .contact__link:hover,
#contact .contact__link:focus-visible {
  border-color: rgba(167, 139, 250, 0.65);
  background: rgba(139, 92, 246, 0.10);
  color: var(--c-fg);
  transform: translateY(-1px);
}
#contact .contact__link-icon { opacity: 0.85; }
#contact .contact__socials { gap: 0.6rem; }
#contact .contact__social {
  width: 42px;
  height: 42px;
  border-color: var(--rd-line-strong);
  color: var(--rd-violet-soft);
  font-size: 0.68rem;
  transition: border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
#contact .contact__social:hover,
#contact .contact__social:focus-visible {
  border-color: transparent;
  background: var(--rd-grad);
  color: #fff;
  transform: translateY(-2px);
}
@media (max-width: 760px) {
  #contact .contact__info { grid-template-columns: 1fr; }
  #contact .contact__list { grid-template-columns: 1fr; }
}

/* Contact anti-spam field on the homepage. */
.form-honeypot {
  position: absolute;
  top: -9999px;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}