:root {
  --bg: #f7f7fb;
  --surface: #ffffff;
  --text: #17131f;
  --muted: #656071;
  --purple: #6514f4;
  --purple-2: #7b17ff;
  --blue: #3e6dfb;
  --pink: #f052c6;
  --coral: #ff6568;
  --coral-dark: #ef515c;
  --line: rgba(23, 19, 31, .09);
  --shadow: 0 22px 65px rgba(39, 19, 104, .13);
  --shadow-soft: 0 12px 38px rgba(39, 19, 104, .08);
  --shadow-hover: 0 32px 80px rgba(39, 19, 104, .18);
  --radius: 26px;
  --max: 1180px;
 
  /* Premium easing curves */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
 
  /* Mouse parallax (set by JS, default 0) */
  --mx: 0;
  --my: 0;
}
 
* {
  box-sizing: border-box;
}
 
*:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
  border-radius: 6px;
}
 
html {
  scroll-behavior: smooth;
}
 
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top right, rgba(255, 101, 104, .14), transparent 28rem),
    radial-gradient(circle at 25% 8%, rgba(101, 20, 244, .12), transparent 24rem),
    var(--bg);
  line-height: 1.5;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
 
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.72) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.72) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: .24;
  mask-image: linear-gradient(to bottom, #000, transparent 70%);
}
 
img {
  max-width: 100%;
  display: block;
}
 
a {
  color: inherit;
  text-decoration: none;
}
 
.skip-link {
  position: absolute;
  left: -999px;
  top: 1rem;
  z-index: 1000;
  background: var(--text);
  color: white;
  padding: .75rem 1rem;
  border-radius: 999px;
}
 
.skip-link:focus {
  left: 1rem;
}
 
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
 
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: min(var(--max), calc(100% - 32px));
  margin: 18px auto 0;
  padding: 10px 12px;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, .82);
  box-shadow: 0 18px 45px rgba(28, 20, 54, .08);
  border-radius: 999px;
  transition: box-shadow .35s var(--ease-out), background .35s var(--ease-out);
}
 
.site-header.is-scrolled {
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 14px 38px rgba(28, 20, 54, .1);
}
 
.brand {
  display: flex;
  align-items: center;
  min-width: 205px;
}
 
.brand-logo {
  width: 225px;
  height: 68px;
  object-fit: contain;
  object-position: left center;
  mix-blend-mode: multiply;
  transition: transform .4s var(--ease-out);
}
 
.brand:hover .brand-logo {
  transform: scale(1.02);
}
 
.site-nav {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #332a45;
  font-size: .95rem;
  font-weight: 700;
}
 
.site-nav a {
  position: relative;
  padding: .72rem .9rem;
  border-radius: 999px;
  transition: background .25s var(--ease-out), color .25s var(--ease-out), transform .25s var(--ease-out);
}
 
.site-nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 0;
  height: 2px;
  background: var(--purple);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width .35s var(--ease-out);
}
 
.site-nav a:not(.nav-cta):hover {
  background: rgba(101, 20, 244, .06);
  color: var(--purple);
}
 
.site-nav a:not(.nav-cta):hover::after {
  width: 18px;
}
 
.site-nav a[aria-current="page"] {
  color: var(--purple);
}
 
.site-nav a[aria-current="page"]::after {
  width: 18px;
}
 
.nav-cta {
  background: var(--text) !important;
  color: white !important;
  box-shadow: 0 12px 25px rgba(23, 19, 31, .18);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
 
.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 35px rgba(23, 19, 31, .26);
}
 
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--text);
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-direction: column;
  cursor: pointer;
  transition: transform .3s var(--ease-out);
}
 
.nav-toggle:hover {
  transform: scale(1.05);
}
 
.nav-toggle span:not(.sr-only) {
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: white;
  transition: transform .3s var(--ease-out), opacity .2s ease;
}
 
.site-header.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
 
.site-header.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}
 
.site-header.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}
 
.hero {
  width: min(var(--max), calc(100% - 32px));
  margin: 72px auto 0;
  min-height: 620px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) 420px;
  gap: 42px;
  align-items: center;
}
 
.hero-copy {
  position: relative;
  z-index: 2;
}
 
.eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 28px;
  padding: .28em 1.08em .34em;
  min-width: 365px;
  border-radius: 15px;
  background: linear-gradient(100deg, var(--blue), var(--purple-2) 54%, var(--pink));
  color: white;
  font-size: clamp(2.25rem, 5.2vw, 4.6rem);
  line-height: .95;
  letter-spacing: .02em;
  font-weight: 500;
  text-transform: uppercase;
  box-shadow: 0 16px 38px rgba(101, 20, 244, .18);
}
 
h1, h2, h3, p {
  margin-top: 0;
}
 
h1 {
  margin-bottom: 22px;
  color: var(--purple);
  font-size: clamp(2.5rem, 5.7vw, 5.45rem);
  line-height: .98;
  letter-spacing: -.075em;
  font-weight: 850;
  text-wrap: balance;
}
 
h1 span {
  display: block;
}
 
mark {
  display: inline-block;
  background: var(--coral);
  color: white;
  padding: 0 .12em .05em;
  border-radius: .24em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
 
.hero-subtitle {
  max-width: 760px;
  color: var(--muted);
  font-size: clamp(1.03rem, 1.65vw, 1.28rem);
  line-height: 1.55;
  font-weight: 620;
}
 
.hero-actions, .cta-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 34px;
}
 
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 1.24rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 820;
  cursor: pointer;
  will-change: transform;
  transition:
    transform .35s var(--ease-out),
    box-shadow .35s var(--ease-out),
    background .25s var(--ease-out),
    color .25s var(--ease-out);
}
 
.btn:hover {
  transform: translateY(-3px);
}
 
.btn:active {
  transform: translateY(-1px);
  transition-duration: .12s;
}
 
.btn-primary {
  color: white;
  background: var(--text);
  box-shadow: 0 18px 34px rgba(23, 19, 31, .22);
}
 
.btn-primary:hover {
  box-shadow: 0 26px 44px rgba(23, 19, 31, .3);
}
 
.btn-secondary {
  color: var(--purple);
  background: white;
  border: 1px solid rgba(101, 20, 244, .16);
  box-shadow: 0 14px 34px rgba(101, 20, 244, .09);
}
 
.btn-secondary:hover {
  border-color: rgba(101, 20, 244, .35);
  box-shadow: 0 22px 44px rgba(101, 20, 244, .16);
}
 
.btn-light {
  color: var(--coral-dark);
  background: white;
  box-shadow: 0 18px 34px rgba(73, 17, 55, .17);
}
 
.btn-light:hover {
  box-shadow: 0 26px 44px rgba(73, 17, 55, .24);
}
 
.hero-panel {
  justify-self: end;
  width: min(420px, 100%);
  min-height: 520px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.hero-panel::before {
  content: "";
  position: absolute;
  inset: 0 -60px 0 28px;
  background: linear-gradient(145deg, #ff6866 0%, #ff6268 58%, #f85a72 100%);
  clip-path: polygon(30% 0, 100% 13%, 88% 100%, 16% 93%, 0 42%);
  border-radius: 28px;
  filter: drop-shadow(0 28px 42px rgba(255, 101, 104, .28));
  transform: rotate(2deg) translate3d(calc(var(--mx) * 6px), calc(var(--my) * 6px), 0);
  transition: transform .6s var(--ease-out);
}
 
.panel-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 64px 42px 48px 70px;
  color: white;
  transform: translate3d(calc(var(--mx) * -3px), calc(var(--my) * -3px), 0);
  transition: transform .6s var(--ease-out);
}
 
.panel-inner p {
  margin-bottom: 12px;
  font-size: clamp(1.75rem, 3vw, 3.1rem);
  line-height: 1.03;
  letter-spacing: -.04em;
  font-weight: 950;
  text-transform: uppercase;
}
 
.channel-icons {
  margin-top: 54px;
  display: flex;
  gap: 16px;
}
 
.channel-icons span,
.channel-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .72);
  color: white;
  font-size: 1.24rem;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  transition: transform .35s var(--ease-out), background .35s var(--ease-out), border-color .35s var(--ease-out);
}
 
.channel-icons span:hover,
.channel-icons a:hover {
  background: rgba(255, 255, 255, .15);
  transform: translateY(-3px);
}
 
.proof-strip {
  width: min(920px, calc(100% - 32px));
  margin: 8px auto 82px;
  padding: 19px 26px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(95deg, var(--purple), #5417f1 62%, #4c19ea);
  color: white;
  text-align: center;
  box-shadow: 0 28px 50px rgba(101, 20, 244, .18);
}
 
.proof-strip p {
  margin: 0;
  font-size: clamp(1.08rem, 2.35vw, 2.05rem);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -.045em;
}
 
.section, .split-section, .cta-section {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto 94px;
}
 
.section-heading {
  max-width: 760px;
  margin-bottom: 30px;
}
 
.mini-label {
  display: inline-flex;
  margin-bottom: 14px;
  color: var(--coral-dark);
  font-weight: 920;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .78rem;
}
 
.mini-label.light {
  color: rgba(255, 255, 255, .75);
}
 
h2 {
  margin-bottom: 15px;
  color: var(--text);
  font-size: clamp(2rem, 4.2vw, 4rem);
  line-height: 1;
  letter-spacing: -.065em;
  font-weight: 900;
  text-wrap: balance;
}
 
.section-heading p:not(.mini-label), .split-copy p, .cta-section p {
  color: var(--muted);
  font-size: 1.08rem;
}
 
.cards {
  display: grid;
  gap: 18px;
}
 
.cards-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
 
.card {
  min-height: 260px;
  padding: 28px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  transition:
    transform .45s var(--ease-out),
    box-shadow .45s var(--ease-out),
    border-color .45s var(--ease-out);
}
 
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(101, 20, 244, .18);
}
 
.card::after {
  content: "";
  position: absolute;
  right: -56px;
  top: -56px;
  width: 145px;
  height: 145px;
  border-radius: 42px;
  background: linear-gradient(135deg, rgba(101, 20, 244, .14), rgba(255, 101, 104, .22));
  transform: rotate(18deg);
  transition: transform .6s var(--ease-out);
}
 
.card:hover::after {
  transform: rotate(28deg) scale(1.08);
}
 
.card-number {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  margin-bottom: 38px;
  color: white;
  background: linear-gradient(135deg, var(--purple), var(--pink));
  font-weight: 920;
  transition: transform .4s var(--ease-out);
}
 
.card:hover .card-number {
  transform: scale(1.06);
}
 
.card h3, .timeline h3 {
  margin-bottom: 10px;
  font-size: 1.42rem;
  letter-spacing: -.035em;
  line-height: 1.06;
}
 
.card p, .timeline p {
  margin-bottom: 0;
  color: var(--muted);
  font-weight: 560;
}
 
.split-section {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 38px;
  align-items: center;
  padding: 42px;
  border-radius: calc(var(--radius) + 8px);
  background: rgba(255, 255, 255, .64);
  border: 1px solid rgba(255,255,255,.88);
  box-shadow: 0 25px 80px rgba(23, 19, 31, .08);
}
 
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 18px;
  color: var(--purple);
  font-weight: 850;
  transition: gap .3s var(--ease-out), color .25s var(--ease-out);
}
 
.text-link:hover {
  gap: 10px;
  color: var(--purple-2);
}
 
.timeline {
  display: grid;
  gap: 14px;
}
 
.timeline article {
  padding: 22px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 16px 45px rgba(21, 16, 42, .06);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
}
 
.timeline article:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 55px rgba(21, 16, 42, .1);
  border-color: rgba(101, 20, 244, .14);
}
 
.timeline span {
  display: inline-flex;
  margin-bottom: 10px;
  padding: .35rem .68rem;
  border-radius: 999px;
  background: rgba(255, 101, 104, .13);
  color: var(--coral-dark);
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}
 
.compact {
  margin-bottom: 78px;
}
 
.pills-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
 
.pills-grid span {
  padding: .72rem 1rem;
  border-radius: 999px;
  color: var(--purple);
  background: white;
  border: 1px solid rgba(101, 20, 244, .13);
  box-shadow: 0 10px 24px rgba(101, 20, 244, .07);
  font-weight: 800;
  transition: transform .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
 
.pills-grid span:hover {
  transform: translateY(-2px);
  border-color: rgba(101, 20, 244, .3);
  box-shadow: 0 14px 30px rgba(101, 20, 244, .14);
}
 
.cta-section {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  align-items: center;
  padding: 48px;
  border-radius: 34px;
  background: linear-gradient(135deg, var(--purple), #6b14ff 58%, var(--coral));
  box-shadow: 0 35px 90px rgba(101, 20, 244, .22);
  color: white;
}
 
.cta-section h2 {
  color: white;
  margin-bottom: 12px;
}
 
.cta-section p {
  color: rgba(255,255,255,.78);
  max-width: 650px;
  margin-bottom: 0;
}
 
.cta-actions {
  justify-content: flex-end;
  margin-top: 0;
  min-width: 265px;
}
 
.cta-actions p {
  width: 100%;
  text-align: center;
  font-size: .94rem;
}
 
.site-footer {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--muted);
  font-size: .95rem;
}
 
.site-footer p {
  margin: 0;
}
 
.site-footer a {
  color: var(--purple);
  font-weight: 760;
  transition: color .25s var(--ease-out);
}
 
.site-footer a:hover {
  color: var(--purple-2);
}
 
@media (max-width: 980px) {
  .site-header {
    border-radius: 28px;
  }
 
  .brand-logo {
    width: 205px;
  }
 
  .nav-toggle {
    display: flex;
  }
 
  .site-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    padding: 14px;
    border-radius: 24px;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(255,255,255,.92);
    box-shadow: var(--shadow);
    flex-direction: column;
    align-items: stretch;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .3s var(--ease-out), visibility .3s var(--ease-out), transform .3s var(--ease-out);
  }
 
  .site-header.nav-open .site-nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
 
  .site-nav a {
    text-align: center;
    min-height: 44px;
  }
 
  .site-nav a:not(.nav-cta)::after {
    display: none;
  }
 
  .hero {
    grid-template-columns: 1fr;
    gap: 22px;
    min-height: auto;
    margin-top: 54px;
  }
 
  .hero-panel {
    justify-self: start;
    width: min(520px, 100%);
    min-height: 390px;
  }
 
  .hero-panel::before {
    inset: 0 0 0 0;
    transform: rotate(2deg);
  }
 
  .panel-inner {
    transform: none;
  }
 
  .cards-3, .split-section {
    grid-template-columns: 1fr;
  }
 
  .cta-section, .site-footer {
    flex-direction: column;
    align-items: flex-start;
  }
 
  .cta-actions {
    justify-content: flex-start;
  }
 
  .cta-actions p {
    text-align: left;
  }
}
 
@media (max-width: 640px) {
  .site-header, .hero, .proof-strip, .section, .split-section, .cta-section, .site-footer {
    width: min(100% - 22px, var(--max));
  }
 
  .site-header {
    min-height: 66px;
    padding: 8px;
  }
 
  .brand-logo {
    width: 172px;
    height: 54px;
  }
 
  .hero {
    margin-top: 42px;
  }
 
  .eyebrow {
    min-width: 0;
    width: 100%;
    font-size: clamp(2.05rem, 11vw, 3.3rem);
  }
 
  h1 {
    font-size: clamp(2.25rem, 11vw, 3.9rem);
  }
 
  .hero-subtitle {
    font-size: 1rem;
  }
 
  .hero-actions .btn, .cta-actions .btn {
    width: 100%;
  }
 
  .hero-panel {
    min-height: 330px;
  }
 
  .panel-inner {
    padding: 50px 26px 38px 44px;
  }
 
  .channel-icons span,
.channel-icons a {
    width: 49px;
    height: 49px;
  }
 
  .proof-strip {
    margin-bottom: 60px;
  }
 
  .card, .split-section, .cta-section {
    padding: 24px;
  }
 
  .cta-section {
    border-radius: 28px;
  }
 
  .section, .split-section, .cta-section {
    margin-bottom: 64px;
  }
}
 
.offer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
 
.offer-card {
  min-height: 520px;
  padding: 34px;
  border-radius: 34px;
  background: rgba(255, 255, 255, .84);
  border: 1px solid rgba(255, 255, 255, .92);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition:
    transform .5s var(--ease-out),
    box-shadow .5s var(--ease-out),
    border-color .5s var(--ease-out);
}
 
.offer-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(101, 20, 244, .18);
}
 
.offer-card::after {
  content: "";
  position: absolute;
  right: -72px;
  top: -72px;
  width: 190px;
  height: 190px;
  border-radius: 48px;
  background: linear-gradient(135deg, rgba(101, 20, 244, .12), rgba(255, 101, 104, .24));
  transform: rotate(18deg);
  transition: transform .6s var(--ease-out);
}
 
.offer-card:hover::after {
  transform: rotate(26deg) scale(1.05);
}
 
.offer-card-featured {
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78)),
    radial-gradient(circle at top right, rgba(255, 101, 104, .22), transparent 19rem),
    radial-gradient(circle at top left, rgba(101, 20, 244, .18), transparent 20rem);
}
 
.offer-topline {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 38px;
  position: relative;
  z-index: 2;
}
 
.offer-badge, .offer-price {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 920;
  text-transform: uppercase;
  letter-spacing: .055em;
}
 
.offer-badge {
  color: white;
  background: linear-gradient(100deg, var(--blue), var(--purple-2) 54%, var(--pink));
  padding: .48rem .74rem;
}
 
.offer-price {
  color: var(--coral-dark);
  background: rgba(255, 101, 104, .13);
  padding: .48rem .72rem;
}
 
.offer-card h3 {
  margin-bottom: 14px;
  color: var(--purple);
  font-size: clamp(2rem, 3.2vw, 3.35rem);
  line-height: .96;
  letter-spacing: -.065em;
  font-weight: 930;
  position: relative;
  z-index: 2;
}
 
.offer-card p {
  color: var(--muted);
  font-size: 1.05rem;
  font-weight: 590;
  position: relative;
  z-index: 2;
}
 
.offer-card ul {
  margin: 12px 0 28px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  position: relative;
  z-index: 2;
}
 
.offer-card li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #332a45;
  font-weight: 760;
}
 
.offer-card li::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: white;
  background: var(--coral);
  font-size: .78rem;
  font-weight: 950;
  margin-top: 1px;
}
 
.offer-card .btn {
  margin-top: auto;
  position: relative;
  z-index: 2;
}
 
.cta-actions a:not(.btn) {
  color: white;
  font-weight: 820;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-underline-offset .25s var(--ease-out);
}
 
.cta-actions a:not(.btn):hover {
  text-underline-offset: 5px;
}
 
@media (max-width: 980px) {
  .offer-grid {
    grid-template-columns: 1fr;
  }
 
  .offer-card {
    min-height: auto;
  }
}
 
@media (max-width: 640px) {
  .offer-card {
    padding: 24px;
    border-radius: 28px;
  }
 
  .offer-topline {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 28px;
  }
}
 
 
/* ============ Blog architecture ============ */
.eyebrow-small {
  min-width: 0;
  font-size: clamp(1.7rem, 3.7vw, 3.3rem);
}
 
.blog-hero {
  width: min(var(--max), calc(100% - 32px));
  margin: 72px auto 70px;
  padding: 78px 58px;
  border-radius: 38px;
  background:
    radial-gradient(circle at 82% 20%, rgba(255, 101, 104, .21), transparent 23rem),
    radial-gradient(circle at 13% 10%, rgba(101, 20, 244, .16), transparent 24rem),
    rgba(255, 255, 255, .72);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
 
.blog-hero::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -40px;
  width: 360px;
  height: 420px;
  background: linear-gradient(145deg, #ff6866 0%, #ff6268 58%, #f85a72 100%);
  clip-path: polygon(30% 0, 100% 13%, 88% 100%, 16% 93%, 0 42%);
  border-radius: 28px;
  opacity: .92;
  transform: rotate(4deg) translate3d(calc(var(--mx) * 8px), calc(var(--my) * 8px), 0);
  transition: transform .8s var(--ease-out);
}
 
.blog-hero-copy {
  max-width: 820px;
  position: relative;
  z-index: 2;
}
 
.blog-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin-bottom: 28px;
}
 
.blog-toolbar h2 {
  margin-bottom: 0;
}
 
.blog-note {
  color: var(--muted);
  font-weight: 650;
}
 
.blog-note code,
.empty-state code {
  padding: .18rem .38rem;
  border-radius: 8px;
  background: rgba(101, 20, 244, .08);
  color: var(--purple);
  font-weight: 850;
}
 
.featured-article {
  margin-bottom: 22px;
}
 
.articles-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
 
.post-card {
  min-height: 330px;
  padding: 30px;
  border-radius: 30px;
  background: rgba(255, 255, 255, .84);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
  transition:
    transform .5s var(--ease-out),
    box-shadow .5s var(--ease-out),
    border-color .5s var(--ease-out);
}
 
.post-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(101, 20, 244, .18);
}
 
.post-card::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 165px;
  height: 165px;
  border-radius: 42px;
  background: linear-gradient(135deg, rgba(101, 20, 244, .12), rgba(255, 101, 104, .24));
  transform: rotate(18deg);
  transition: transform .6s var(--ease-out);
}
 
.post-card:hover::after {
  transform: rotate(26deg) scale(1.06);
}
 
.post-card-featured {
  min-height: 390px;
  padding: 40px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.76)),
    radial-gradient(circle at top right, rgba(255, 101, 104, .24), transparent 20rem),
    radial-gradient(circle at top left, rgba(101, 20, 244, .18), transparent 20rem);
}
 
.post-card-featured h3 {
  max-width: 820px;
  font-size: clamp(2rem, 4vw, 4rem);
}
 
.post-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  position: relative;
  z-index: 2;
}
 
.post-meta span {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .38rem .64rem;
  color: var(--coral-dark);
  background: rgba(255, 101, 104, .13);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .035em;
  text-transform: uppercase;
}
 
.post-card h3 {
  margin-bottom: 14px;
  color: var(--purple);
  font-size: clamp(1.75rem, 2.7vw, 2.7rem);
  line-height: 1;
  letter-spacing: -.058em;
  font-weight: 930;
  position: relative;
  z-index: 2;
}
 
.post-card h3 a {
  background-image: linear-gradient(var(--purple-2), var(--purple-2));
  background-size: 0 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .4s var(--ease-out), color .25s var(--ease-out);
}
 
.post-card:hover h3 a {
  background-size: 100% 2px;
  color: var(--purple-2);
}
 
.post-card p {
  color: var(--muted);
  font-size: 1.03rem;
  font-weight: 590;
  position: relative;
  z-index: 2;
}
 
.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 24px;
  position: relative;
  z-index: 2;
}
 
.post-tags span {
  padding: .42rem .7rem;
  border-radius: 999px;
  color: var(--purple);
  background: white;
  border: 1px solid rgba(101, 20, 244, .13);
  font-size: .82rem;
  font-weight: 820;
}
 
.post-card .text-link {
  margin-top: auto;
  position: relative;
  z-index: 2;
}
 
.empty-state {
  padding: 36px;
  border-radius: 30px;
  background: white;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
 
/* ============ Article (lecture) ============ */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--purple), var(--coral));
  z-index: 100;
  transition: width .12s linear;
  border-radius: 0 3px 3px 0;
  pointer-events: none;
}
 
.article-shell {
  width: min(900px, calc(100% - 32px));
  margin: 72px auto 92px;
}
 
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 26px;
  color: var(--purple);
  font-weight: 860;
  transition: gap .3s var(--ease-out), color .25s var(--ease-out);
}
 
.back-link:hover {
  gap: 10px;
  color: var(--purple-2);
}
 
.article-header {
  padding: 48px;
  border-radius: 36px;
  background:
    radial-gradient(circle at 86% 15%, rgba(255, 101, 104, .2), transparent 23rem),
    radial-gradient(circle at 14% 18%, rgba(101, 20, 244, .16), transparent 23rem),
    rgba(255, 255, 255, .78);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: var(--shadow);
}
 
.article-header h1 {
  margin-bottom: 18px;
  color: var(--purple);
}
 
.article-description {
  max-width: 760px;
  color: var(--muted);
  font-size: 1.18rem;
  font-weight: 620;
  line-height: 1.55;
}
 
.article-meta {
  margin: 24px 0 0;
}
 
.article-content {
  margin-top: 28px;
  padding: 56px;
  border-radius: 32px;
  background: white;
  border: 1px solid var(--line);
  box-shadow: 0 20px 70px rgba(23, 19, 31, .07);
  color: #272134;
  font-size: 1.13rem;
  line-height: 1.78;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
 
/* Lead paragraph: only the very first paragraph after content */
.article-content > p:first-of-type {
  font-size: 1.24rem;
  line-height: 1.65;
  color: #1f1a2c;
  font-weight: 520;
}
 
.article-content h2 {
  margin-top: 56px;
  margin-bottom: 16px;
  font-size: clamp(1.75rem, 2.8vw, 2.4rem);
  letter-spacing: -.05em;
  color: var(--text);
  scroll-margin-top: 100px;
}
 
.article-content h3 {
  margin-top: 38px;
  margin-bottom: 12px;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  letter-spacing: -.025em;
  color: var(--text);
  scroll-margin-top: 100px;
}
 
.article-content p {
  margin-bottom: 22px;
}
 
.article-content a {
  color: var(--purple);
  font-weight: 700;
  background-image: linear-gradient(var(--purple), var(--purple));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 95%;
  transition: background-size .35s var(--ease-out), color .25s var(--ease-out);
}
 
.article-content a:hover {
  background-size: 100% 2px;
  color: var(--purple-2);
}
 
.article-content blockquote {
  margin: 38px 0;
  padding: 28px 32px;
  border-left: 4px solid var(--coral);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(101, 20, 244, .04), rgba(255, 101, 104, .04));
  color: var(--text);
  font-size: 1.22rem;
  line-height: 1.5;
  font-weight: 600;
  font-style: italic;
}
 
.article-content blockquote p:last-child {
  margin-bottom: 0;
}
 
.article-content ul,
.article-content ol {
  padding-left: 1.4rem;
  margin: 0 0 26px;
}
 
.article-content li {
  margin-bottom: 10px;
}
 
.article-content li::marker {
  color: var(--purple);
  font-weight: 800;
}
 
.article-content code {
  padding: .14rem .42rem;
  border-radius: 6px;
  background: rgba(101, 20, 244, .07);
  color: var(--purple);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .92em;
  font-weight: 600;
}
 
.article-content pre {
  margin: 28px 0;
  padding: 24px 26px;
  border-radius: 18px;
  background: #16131e;
  color: #eae7f3;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .94rem;
  line-height: 1.6;
}
 
.article-content pre code {
  padding: 0;
  background: transparent;
  color: inherit;
}
 
.article-content img {
  margin: 30px auto;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(23, 19, 31, .12);
}
 
.article-content hr {
  margin: 42px 0;
  border: 0;
  height: 1px;
  background: var(--line);
}
 
.article-content strong {
  color: var(--text);
  font-weight: 800;
}
 
.article-cta {
  margin-top: 28px;
  padding: 38px;
  border-radius: 32px;
  background: linear-gradient(135deg, var(--purple), #6b14ff 58%, var(--coral));
  color: white;
  box-shadow: 0 35px 90px rgba(101, 20, 244, .22);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 26px;
}
 
.article-cta h2 {
  color: white;
  margin-bottom: 12px;
}
 
.article-cta p {
  color: rgba(255,255,255,.78);
  max-width: 620px;
  margin-bottom: 0;
}
 
.blog-teaser-section {
  margin-bottom: 80px;
}
 
.blog-teaser-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 34px;
  border-radius: 34px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: var(--shadow);
  transition:
    transform .5s var(--ease-out),
    box-shadow .5s var(--ease-out),
    border-color .5s var(--ease-out);
}
 
.blog-teaser-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(101, 20, 244, .18);
}
 
.blog-teaser-card h3 {
  margin: 18px 0 8px;
  color: var(--purple);
  font-size: clamp(1.9rem, 3.1vw, 3.1rem);
  line-height: 1;
  letter-spacing: -.06em;
}
 
.blog-teaser-card p {
  color: var(--muted);
  font-weight: 590;
  max-width: 720px;
  margin-bottom: 0;
}
 
@media (max-width: 980px) {
  .blog-toolbar,
  .blog-teaser-card,
  .article-cta {
    flex-direction: column;
    align-items: flex-start;
  }
 
  .articles-grid {
    grid-template-columns: 1fr;
  }
 
  .blog-hero::after {
    opacity: .18;
    transform: rotate(4deg);
  }
 
  .blog-hero {
    padding: 56px 36px;
  }
}
 
@media (max-width: 640px) {
  .blog-hero,
  .article-shell {
    width: min(100% - 22px, var(--max));
    margin-top: 42px;
  }
 
  .blog-hero {
    padding: 36px 24px;
    border-radius: 28px;
  }
 
  .article-header,
  .article-content,
  .article-cta,
  .blog-teaser-card,
  .post-card,
  .post-card-featured {
    padding: 26px;
    border-radius: 24px;
  }
 
  .article-content {
    font-size: 1.04rem;
    line-height: 1.72;
    padding: 28px 24px;
  }
 
  .article-content > p:first-of-type {
    font-size: 1.1rem;
  }
 
  .article-content h2 {
    margin-top: 40px;
  }
}
 
/* ============ Scroll reveal ============ */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  will-change: opacity, transform;
}
 
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
 
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
 
[data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
 
[data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 80ms; }
[data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 160ms; }
[data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 240ms; }
[data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 320ms; }
[data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 400ms; }
 
/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
 
  [data-reveal],
  [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
  }
 
  .hero-panel::before,
  .panel-inner,
  .blog-hero::after {
    transform: none !important;
  }
}

/* ============================================================
   Couche artistique desktop — Prosp'r Corp
   Objectif :
   - Mobile conservé.
   - Desktop plus espacé.
   - Glow souris, objet flottant, magnetic buttons,
     tilt 3D léger, spotlight cards, line reveal.
   - Zero dependency, respect prefers-reduced-motion.
   ============================================================ */

:root {
  --cursor-x: 50vw;
  --cursor-y: 50vh;
  --float-x: 0px;
  --float-y: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --lift-y: 0px;
  --mag-x: 0px;
  --mag-y: 0px;
  --spot-x: 50%;
  --spot-y: 20%;
}

/* On garde le rendu mobile proche de l'existant : tout ce bloc est desktop-first. */
@media (min-width: 981px) {
  :root {
    --max: 1240px;
  }

  html.motion-desktop body {
    overflow-x: hidden;
  }

  html.motion-desktop body > * {
    position: relative;
    z-index: 1;
  }

  html.motion-desktop body::before {
    z-index: 0;
  }

  /* Glow souris en arrière-plan : doux, flou, non cliquable. */
  html.motion-desktop body::after {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 620px;
    height: 620px;
    pointer-events: none;
    z-index: 0;
    opacity: .42;
    transform:
      translate3d(
        calc(var(--cursor-x) - 310px),
        calc(var(--cursor-y) - 310px),
        0
      );
    background:
      radial-gradient(circle at 42% 42%, rgba(101, 20, 244, .18), transparent 34%),
      radial-gradient(circle at 62% 58%, rgba(240, 82, 198, .14), transparent 38%),
      radial-gradient(circle at 38% 64%, rgba(255, 101, 104, .12), transparent 40%);
    filter: blur(24px) saturate(120%);
    mix-blend-mode: multiply;
    transition: opacity .35s var(--ease-out);
  }

  /* Version desktop plus respirante. */
  .site-header {
    margin-top: 24px;
  }

  .hero {
    margin-top: 96px;
    min-height: 690px;
    gap: clamp(54px, 6vw, 92px);
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, 470px);
  }

  .hero-subtitle {
    max-width: 820px;
  }

  .hero-actions,
  .cta-actions {
    gap: 18px;
    margin-top: 42px;
  }

  .proof-strip {
    margin-top: 18px;
    margin-bottom: 116px;
  }

  .section,
  .split-section,
  .cta-section {
    margin-bottom: 128px;
  }

  .section.compact {
    margin-bottom: 112px;
  }

  .section-heading {
    max-width: 840px;
    margin-bottom: 46px;
  }

  .offer-grid {
    gap: 34px;
  }

  .offer-card {
    padding: 42px;
  }

  .cards {
    gap: 30px;
  }

  .card {
    min-height: 288px;
    padding: 34px;
  }

  .split-section {
    gap: 58px;
    padding: 58px;
  }

  .timeline {
    gap: 20px;
  }

  .timeline article {
    padding: 28px;
  }

  .pills-grid {
    gap: 16px;
  }

  .cta-section {
    padding: 62px;
  }

  .blog-hero {
    margin-top: 96px;
    margin-bottom: 104px;
    padding: 104px 76px;
  }

  .blog-list-section {
    margin-bottom: 128px;
  }

  .blog-toolbar {
    margin-bottom: 42px;
  }

  .featured-article {
    margin-bottom: 34px;
  }

  .articles-grid {
    gap: 32px;
  }

  .post-card {
    padding: 36px;
  }

  .post-card-featured {
    padding: 50px;
  }

  .article-shell {
    margin-top: 92px;
  }

  .article-header {
    margin-bottom: 54px;
  }
}

/* Objet flottant dans le hero : mascotte très discrète + forme organique. */
@media (min-width: 981px) {
  html.motion-desktop .hero::before,
  html.motion-desktop .hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
  }

  html.motion-desktop .hero::before {
    right: 360px;
    top: 18px;
    width: 118px;
    height: 118px;
    border-radius: 38% 62% 54% 46% / 50% 42% 58% 50%;
    background:
      radial-gradient(circle at 35% 30%, rgba(255,255,255,.72), transparent 28%),
      linear-gradient(135deg, rgba(101, 20, 244, .22), rgba(240, 82, 198, .16) 52%, rgba(255, 101, 104, .18));
    filter: blur(.2px) drop-shadow(0 28px 50px rgba(101, 20, 244, .16));
    transform:
      translate3d(calc(var(--float-x) * .32), calc(var(--float-y) * .32), 0)
      rotate(calc(8deg + (var(--mx) * 4deg)));
    opacity: .62;
  }

  html.motion-desktop .hero::after {
    right: -28px;
    top: 76px;
    width: 152px;
    height: 152px;
    background: url("assets/prospr-mascot.png") center / contain no-repeat;
    opacity: .115;
    filter: drop-shadow(0 34px 48px rgba(101, 20, 244, .20));
    transform:
      translate3d(calc(var(--float-x) * -0.42), calc(var(--float-y) * -0.42), 0)
      rotate(calc(-7deg + (var(--mx) * -3deg)));
  }

  html.motion-desktop .hero-copy,
  html.motion-desktop .hero-panel {
    z-index: 2;
  }
}

/* Amélioration du bloc hero existant : un peu plus vivant, toujours subtil. */
@media (min-width: 981px) {
  html.motion-desktop .hero-panel::before {
    transform:
      rotate(calc(2deg + (var(--mx) * 1.2deg)))
      translate3d(calc(var(--mx) * 10px), calc(var(--my) * 10px), 0)
      scale(1.01);
  }

  html.motion-desktop .panel-inner {
    transform:
      translate3d(calc(var(--mx) * -7px), calc(var(--my) * -7px), 0);
  }

  html.motion-desktop .blog-hero::after {
    transform:
      rotate(calc(4deg + (var(--mx) * 1.2deg)))
      translate3d(calc(var(--mx) * 12px), calc(var(--my) * 12px), 0);
  }
}

/* Magnetic buttons : l'effet est piloté par JS via --mag-x / --mag-y. */
@media (min-width: 981px) {
  html.motion-desktop .can-magnet {
    transform: translate3d(var(--mag-x), var(--mag-y), 0);
    transition:
      transform .42s var(--ease-out),
      box-shadow .35s var(--ease-out),
      background .25s var(--ease-out),
      color .25s var(--ease-out);
  }

  html.motion-desktop .can-magnet:hover {
    transform:
      translate3d(
        var(--mag-x),
        calc(var(--mag-y) - 3px),
        0
      );
  }
}

/* Tilt 3D léger : le JS met à jour --tilt-x / --tilt-y. */
@media (min-width: 981px) {
  html.motion-desktop .can-tilt {
    transform-style: preserve-3d;
    will-change: transform;
    transform:
      perspective(1100px)
      rotateX(var(--tilt-x))
      rotateY(var(--tilt-y))
      translateY(var(--lift-y));
    transition:
      transform .48s var(--ease-out),
      box-shadow .48s var(--ease-out),
      border-color .48s var(--ease-out);
  }

  html.motion-desktop .can-tilt:hover {
    --lift-y: -7px;
  }

  html.motion-desktop .timeline article.can-tilt:hover {
    --lift-y: -4px;
  }
}

/* Spotlight doux dans les cards. */
@media (min-width: 981px) {
  html.motion-desktop .has-spotlight {
    isolation: isolate;
    overflow: hidden;
  }

  html.motion-desktop .has-spotlight::before {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    background:
      radial-gradient(
        circle at var(--spot-x) var(--spot-y),
        rgba(255, 255, 255, .62) 0%,
        rgba(240, 82, 198, .18) 13%,
        rgba(101, 20, 244, .10) 27%,
        transparent 48%
      );
    transition: opacity .35s var(--ease-out);
    mix-blend-mode: soft-light;
  }

  html.motion-desktop .has-spotlight:hover::before {
    opacity: 1;
  }

  html.motion-desktop .has-spotlight::after {
    z-index: 0;
  }

  html.motion-desktop .has-spotlight > * {
    position: relative;
    z-index: 2;
  }
}

/* Reveal texte ligne par ligne : appliqué par JS aux grands titres. */
@media (min-width: 981px) {
  html.motion-desktop .line-reveal > span {
    display: block;
    opacity: 0;
    transform: translate3d(0, .62em, 0);
    filter: blur(8px);
    transition:
      opacity .72s var(--ease-out),
      transform .86s var(--ease-out),
      filter .86s var(--ease-out);
    transition-delay: calc(var(--line-i, 0) * 90ms);
  }

  html.motion-desktop .line-reveal.is-line-visible > span {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

/* Reveal scroll un peu plus éditorial. */
@media (min-width: 981px) {
  html.motion-desktop [data-reveal] {
    transform: translate3d(0, 34px, 0);
    filter: blur(5px);
    transition:
      opacity .72s var(--ease-out-soft),
      transform .82s var(--ease-out-soft),
      filter .82s var(--ease-out-soft);
  }

  html.motion-desktop [data-reveal].is-visible {
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

/* Sécurité accessibilité / mobile : pas d'effets décoratifs lourds. */
@media (max-width: 980px), (prefers-reduced-motion: reduce) {
  body::after,
  .hero::before,
  .hero::after {
    content: none !important;
    display: none !important;
  }

  .line-reveal > span {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .can-tilt,
  .can-magnet {
    transform: none !important;
  }

  .has-spotlight::before {
    display: none !important;
  }
}



/* ============================================================
   Patch WOW desktop v2 — plus espacé + grilles desktop forcées
   But : éviter le rendu "tout en file" sur grande fenêtre.
   ============================================================ */

@media (min-width: 981px) {
  /* Sécurité responsive : desktop = grilles desktop, même si une règle précédente tente de passer en mobile. */
  .hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1.12fr) minmax(410px, 500px) !important;
  }

  .offer-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .cards-3 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .split-section {
    display: grid !important;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
  }

  .articles-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .cta-section {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  /* Espace et respiration desktop. */
  :root {
    --max: 1320px;
  }

  .section,
  .split-section,
  .cta-section {
    margin-bottom: 148px;
  }

  .section-heading {
    margin-bottom: 56px;
  }

  .offer-grid,
  .articles-grid {
    gap: 42px;
  }

  .cards {
    gap: 36px;
  }

  .offer-card,
  .post-card {
    padding: 46px;
  }

  .card {
    padding: 38px;
  }

  .split-section {
    gap: 70px;
    padding: 68px;
  }

  .timeline {
    gap: 24px;
  }

  .timeline article {
    padding: 32px;
  }

  .proof-strip {
    margin-bottom: 136px;
  }
}

@media (min-width: 1280px) {
  :root {
    --max: 1400px;
  }

  .site-header {
    width: min(1320px, calc(100% - 72px));
  }

  .hero {
    width: min(1400px, calc(100% - 88px));
    min-height: 760px;
    margin-top: 112px;
    gap: clamp(82px, 7vw, 132px);
    grid-template-columns: minmax(0, 1.15fr) minmax(480px, 580px) !important;
  }

  .hero-subtitle {
    max-width: 860px;
    font-size: clamp(1.12rem, 1.25vw, 1.42rem);
  }

  .hero-panel {
    width: min(540px, 100%);
    min-height: 600px;
  }

  .hero-panel::before {
    inset: -20px -82px -10px 34px;
  }

  .panel-inner {
    padding: 82px 52px 60px 82px;
  }

  .section,
  .split-section,
  .cta-section,
  .blog-hero,
  .site-footer {
    width: min(var(--max), calc(100% - 88px));
  }

  .section,
  .split-section,
  .cta-section {
    margin-bottom: 168px;
  }

  .blog-hero {
    margin-top: 112px;
    margin-bottom: 128px;
    padding: 118px 92px;
  }

  .post-card-featured {
    min-height: 450px;
  }
}

@media (min-width: 1540px) {
  :root {
    --max: 1480px;
  }

  .site-header {
    width: min(1420px, calc(100% - 104px));
  }

  .hero {
    width: min(1480px, calc(100% - 112px));
    grid-template-columns: minmax(0, 1.18fr) minmax(520px, 620px) !important;
    gap: 148px;
  }

  .section,
  .split-section,
  .cta-section,
  .blog-hero,
  .site-footer {
    width: min(var(--max), calc(100% - 112px));
  }
}

/* Effet "whaou" plus visible, mais toujours premium : aurora, halo et relief. */
@media (min-width: 981px) {
  html.motion-desktop body::after {
    width: 820px;
    height: 820px;
    opacity: .56;
    transform:
      translate3d(
        calc(var(--cursor-x) - 410px),
        calc(var(--cursor-y) - 410px),
        0
      );
    background:
      radial-gradient(circle at 38% 38%, rgba(101, 20, 244, .24), transparent 30%),
      radial-gradient(circle at 64% 55%, rgba(240, 82, 198, .18), transparent 34%),
      radial-gradient(circle at 42% 68%, rgba(255, 101, 104, .16), transparent 38%),
      radial-gradient(circle at 68% 32%, rgba(62, 109, 251, .12), transparent 36%);
    filter: blur(32px) saturate(138%);
  }

  main {
    position: relative;
    overflow: hidden;
  }

  main::before {
    content: "";
    position: fixed;
    inset: auto -18vw -36vh auto;
    width: 62vw;
    height: 62vw;
    max-width: 980px;
    max-height: 980px;
    pointer-events: none;
    z-index: 0;
    opacity: .24;
    border-radius: 36% 64% 52% 48% / 48% 42% 58% 52%;
    background:
      radial-gradient(circle at 34% 32%, rgba(255,255,255,.58), transparent 18%),
      radial-gradient(circle at 50% 50%, rgba(101, 20, 244, .22), transparent 36%),
      radial-gradient(circle at 62% 66%, rgba(255, 101, 104, .18), transparent 42%);
    filter: blur(10px) saturate(125%);
    transform:
      translate3d(calc(var(--float-x) * -.22), calc(var(--float-y) * -.22), 0)
      rotate(calc(14deg + (var(--mx) * 3deg)));
  }

  main > * {
    position: relative;
    z-index: 1;
  }

  html.motion-desktop .hero::before {
    width: 178px;
    height: 178px;
    right: 430px;
    top: -8px;
    opacity: .78;
    filter: blur(.1px) drop-shadow(0 34px 70px rgba(101, 20, 244, .22));
  }

  html.motion-desktop .hero::after {
    width: 210px;
    height: 210px;
    right: -42px;
    top: 38px;
    opacity: .18;
    filter: drop-shadow(0 42px 70px rgba(101, 20, 244, .24));
  }

  .hero-panel::after {
    content: "";
    position: absolute;
    inset: 32px -34px 38px 78px;
    pointer-events: none;
    z-index: 1;
    border-radius: 38px;
    background:
      linear-gradient(135deg, rgba(255,255,255,.42), transparent 28%),
      repeating-linear-gradient(135deg, rgba(255,255,255,.22) 0 1px, transparent 1px 15px);
    opacity: .34;
    mix-blend-mode: soft-light;
    transform:
      translate3d(calc(var(--mx) * -10px), calc(var(--my) * -10px), 0)
      rotate(calc(-3deg + (var(--mx) * -1deg)));
  }

  .eyebrow {
    box-shadow:
      0 18px 44px rgba(101, 20, 244, .20),
      0 0 0 1px rgba(255,255,255,.34) inset;
  }

  h1 {
    text-shadow: 0 18px 70px rgba(101, 20, 244, .10);
  }

  .offer-card,
  .card,
  .post-card,
  .timeline article,
  .split-section,
  .cta-section,
  .blog-hero {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  html.motion-desktop .can-tilt:hover {
    --lift-y: -11px;
  }

  html.motion-desktop .has-spotlight::before {
    background:
      radial-gradient(
        circle at var(--spot-x) var(--spot-y),
        rgba(255, 255, 255, .82) 0%,
        rgba(240, 82, 198, .24) 14%,
        rgba(101, 20, 244, .14) 28%,
        transparent 52%
      );
    mix-blend-mode: soft-light;
  }

  .btn {
    min-height: 58px;
    padding-inline: 1.42rem;
  }

  .btn-primary,
  .nav-cta {
    box-shadow:
      0 18px 38px rgba(23, 19, 31, .25),
      0 0 0 1px rgba(255,255,255,.08) inset;
  }

  .btn-primary:hover,
  .nav-cta:hover {
    box-shadow:
      0 30px 60px rgba(23, 19, 31, .32),
      0 0 0 1px rgba(255,255,255,.12) inset;
  }
}

/* Sécurité : si le navigateur a un zoom très élevé, on garde quand même un desktop lisible tant que la fenêtre dépasse 1100px. */
@media (min-width: 1100px) and (max-width: 1279px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 440px) !important;
    gap: 56px;
  }

  .offer-grid,
  .articles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .cards-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}


/* ============================================================
   Pages dédiées + animation “essaim / têtards” desktop
   ============================================================ */

.page-hero {
  width: min(var(--max), calc(100% - 32px));
  margin: 72px auto 92px;
  padding: 74px 58px;
  border-radius: 38px;
  background:
    radial-gradient(circle at 82% 20%, rgba(255, 101, 104, .22), transparent 24rem),
    radial-gradient(circle at 14% 12%, rgba(101, 20, 244, .18), transparent 25rem),
    rgba(255, 255, 255, .74);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.page-hero::after {
  content: "";
  position: absolute;
  right: -90px;
  top: -70px;
  width: 410px;
  height: 470px;
  pointer-events: none;
  background: linear-gradient(145deg, #ff6866 0%, #ff6268 58%, #f85a72 100%);
  clip-path: polygon(30% 0, 100% 13%, 88% 100%, 16% 93%, 0 42%);
  border-radius: 34px;
  opacity: .86;
  transform: rotate(5deg) translate3d(calc(var(--mx) * 10px), calc(var(--my) * 10px), 0);
  filter: drop-shadow(0 42px 75px rgba(255, 101, 104, .22));
}

.page-hero-copy {
  max-width: 880px;
  position: relative;
  z-index: 2;
}

.page-section-large {
  margin-bottom: 112px;
}

.page-method-split {
  margin-top: 0;
}

.page-proof-strip {
  margin-top: -42px;
}

.page-section-card {
  padding: 40px;
  border-radius: 34px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.86);
  box-shadow: 0 25px 80px rgba(23, 19, 31, .08);
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.contact-card h3 {
  max-width: 620px;
}

@media (min-width: 981px) {
  .page-hero {
    width: min(var(--max), calc(100% - 72px));
    margin-top: 96px;
    margin-bottom: 132px;
    padding: 104px 82px;
  }

  .page-hero h1 {
    max-width: 1040px;
  }

  .page-hero .hero-subtitle {
    max-width: 780px;
  }

  .page-section-large {
    margin-bottom: 150px;
  }
}

@media (min-width: 1280px) {
  .page-hero {
    width: min(var(--max), calc(100% - 96px));
    padding: 122px 96px;
  }
}

@media (max-width: 980px) {
  .page-hero {
    width: min(100% - 32px, var(--max));
    margin: 54px auto 70px;
    padding: 56px 32px;
  }

  .page-hero::after {
    opacity: .34;
    right: -150px;
    top: -90px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .page-hero {
    width: min(100% - 22px, var(--max));
    margin-top: 42px;
    padding: 42px 24px;
    border-radius: 28px;
  }

  .page-section-card {
    padding: 24px;
  }
}


/* ============ Cursor bee swarm v5: vraies abeilles dessinées, premier plan ============ */
.bee-cursor-swarm {
  --bee-swarm-x: 50vw;
  --bee-swarm-y: 50vh;
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
  contain: layout style;
  opacity: 0;
  transition: opacity .12s var(--ease-out);
  mix-blend-mode: normal !important;
  isolation: isolate;
  filter: none !important;
  color-scheme: light !important;
  forced-color-adjust: none !important;
}

.bee-cursor-swarm.is-active,
html.motion-desktop .bee-cursor-swarm.is-active {
  opacity: 1;
}

.bee-cursor-swarm::before {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  transform: translate3d(calc(var(--bee-swarm-x) - 55px), calc(var(--bee-swarm-y) - 55px), 0);
  background:
    radial-gradient(circle, rgba(255, 224, 64, .42) 0 16%, rgba(255, 168, 0, .20) 34%, rgba(101, 20, 244, .12) 54%, transparent 76%);
  box-shadow:
    0 0 30px rgba(255, 214, 38, .52),
    0 0 58px rgba(101, 20, 244, .22),
    0 0 84px rgba(255, 101, 104, .16);
  opacity: .78;
  filter: none !important;
}

.cursor-bee,
.cursor-bee *,
.cursor-bee *::before,
.cursor-bee *::after {
  box-sizing: border-box;
  pointer-events: none;
  color-scheme: light !important;
  forced-color-adjust: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.cursor-bee {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483647;
  display: block;
  width: var(--bee-size, 38px);
  height: calc(var(--bee-size, 38px) * .72);
  opacity: var(--bee-opacity, 1);
  transform: translate3d(-120px, -120px, 0);
  transform-origin: 50% 50%;
  will-change: transform;
  background: transparent !important;
  border: 0 !important;
  animation: beeDrawnBuzz .28s infinite alternate ease-in-out;
  animation-delay: var(--bee-delay, 0s);
  -webkit-user-select: none;
  user-select: none;
  filter:
    drop-shadow(0 1px 1px rgba(255,255,255,.96))
    drop-shadow(0 6px 9px rgba(0,0,0,.48))
    drop-shadow(0 0 8px rgba(255, 214, 38, .72)) !important;
}

.cursor-bee:nth-child(odd) { animation-duration: .22s; }
.cursor-bee:nth-child(3n) { animation-duration: .34s; }

.bee-wing {
  position: absolute;
  top: -18%;
  width: 34%;
  height: 52%;
  border: 2px solid rgba(23, 19, 31, .74);
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.98), rgba(255,255,255,.62) 52%, rgba(179, 222, 255, .50) 100%);
  border-radius: 70% 70% 58% 58%;
  z-index: 1;
  opacity: .93;
  transform-origin: 50% 90%;
  box-shadow: inset 0 0 8px rgba(255,255,255,.92), 0 2px 3px rgba(0,0,0,.18);
}

.bee-wing-left {
  left: 30%;
  transform: rotate(-32deg);
  animation: beeWingLeft .18s infinite alternate ease-in-out;
}

.bee-wing-right {
  right: 11%;
  transform: rotate(35deg);
  animation: beeWingRight .18s infinite alternate ease-in-out;
}

.bee-body {
  position: absolute;
  left: 27%;
  top: 30%;
  width: 60%;
  height: 52%;
  border-radius: 50% 62% 62% 50%;
  border: 2px solid #17131f !important;
  background: linear-gradient(90deg, #ffe45f 0%, #ffd11a 45%, #ffb21a 100%) !important;
  overflow: hidden;
  z-index: 3;
  box-shadow: inset -4px -3px 0 rgba(145, 79, 0, .18), inset 3px 3px 0 rgba(255,255,255,.38);
}

.bee-stripes {
  position: absolute;
  inset: -10% 0;
  background:
    linear-gradient(90deg,
      transparent 0 18%,
      #17131f 19% 30%,
      transparent 31% 45%,
      #17131f 46% 57%,
      transparent 58% 72%,
      #17131f 73% 82%,
      transparent 83% 100%) !important;
  opacity: .96;
}

.bee-head {
  position: absolute;
  left: 8%;
  top: 28%;
  width: 28%;
  height: 44%;
  border-radius: 50%;
  border: 2px solid #17131f !important;
  background: #17131f !important;
  z-index: 4;
  box-shadow: inset 3px 2px 0 rgba(255, 221, 89, .18);
}

.bee-eye {
  position: absolute;
  right: 17%;
  top: 24%;
  width: 23%;
  height: 23%;
  border-radius: 50%;
  background: #ffffff !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.55);
}

.bee-stinger {
  position: absolute;
  right: 0;
  top: 42%;
  width: 0;
  height: 0;
  border-top: calc(var(--bee-size, 38px) * .085) solid transparent;
  border-bottom: calc(var(--bee-size, 38px) * .085) solid transparent;
  border-left: calc(var(--bee-size, 38px) * .18) solid #17131f;
  z-index: 2;
}

.bee-antenna {
  position: absolute;
  left: 12%;
  top: 17%;
  width: 22%;
  height: 2px;
  background: #17131f !important;
  border-radius: 999px;
  transform-origin: 0 50%;
  z-index: 2;
}

.bee-antenna::after {
  content: "";
  position: absolute;
  right: -3px;
  top: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #17131f !important;
}

.bee-antenna-left { transform: rotate(-42deg); }
.bee-antenna-right { top: 23%; transform: rotate(-12deg); }

.bee-cursor-swarm.is-idle .cursor-bee {
  opacity: calc(var(--bee-opacity, 1) * .88);
}

@keyframes beeDrawnBuzz {
  from { margin-top: -1px; }
  to { margin-top: 2px; }
}

@keyframes beeWingLeft {
  from { transform: rotate(-28deg) scaleY(.95); }
  to { transform: rotate(-48deg) scaleY(1.12); }
}

@keyframes beeWingRight {
  from { transform: rotate(30deg) scaleY(.96); }
  to { transform: rotate(52deg) scaleY(1.12); }
}

/* Dark Reader : on garde les abeilles en couleurs franches, au-dessus de tout. */
html[data-darkreader-mode] .bee-cursor-swarm,
html[data-darkreader-scheme] .bee-cursor-swarm,
html[data-darkreader-mode] .cursor-bee,
html[data-darkreader-scheme] .cursor-bee {
  z-index: 2147483647 !important;
  mix-blend-mode: normal !important;
  color-scheme: light !important;
  forced-color-adjust: none !important;
  filter:
    drop-shadow(0 1px 1px rgba(255,255,255,1))
    drop-shadow(0 6px 10px rgba(0,0,0,.82))
    drop-shadow(0 0 13px rgba(255, 221, 56, .92)) !important;
}

html[data-darkreader-mode] .bee-body,
html[data-darkreader-scheme] .bee-body {
  background: linear-gradient(90deg, #ffe45f 0%, #ffd11a 45%, #ffb21a 100%) !important;
  border-color: #17131f !important;
}

html[data-darkreader-mode] .bee-head,
html[data-darkreader-scheme] .bee-head,
html[data-darkreader-mode] .bee-stripes,
html[data-darkreader-scheme] .bee-stripes,
html[data-darkreader-mode] .bee-antenna,
html[data-darkreader-scheme] .bee-antenna,
html[data-darkreader-mode] .bee-antenna::after,
html[data-darkreader-scheme] .bee-antenna::after {
  background-color: #17131f !important;
}

@media (max-width: 980px), (prefers-reduced-motion: reduce) {
  .bee-cursor-swarm {
    display: none !important;
  }
}



/* ============================================================
   Cursor bees v7 — abeilles bourdonnantes en premier plan, sans halo de fond
   ============================================================ */
@media (min-width: 981px) {
  /* Supprime l'ancien halo qui suivait la souris en arrière-plan. */
  html.motion-desktop body::after,
  html.motion-desktop main::before,
  .bee-cursor-swarm,
  .bee-cursor-swarm::before,
  .cursor-bee {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    content: none !important;
  }

  .bee-canvas-cursor {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2147483647 !important;
    pointer-events: none !important;
    display: block;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    filter: none !important;
    isolation: isolate !important;
    color-scheme: light !important;
    forced-color-adjust: none !important;
  }

  html[data-darkreader-mode] .bee-canvas-cursor,
  html[data-darkreader-scheme] .bee-canvas-cursor {
    z-index: 2147483647 !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    filter: none !important;
  }
}

@media (max-width: 980px) {
  .bee-canvas-cursor {
    display: none !important;
  }
}


/* v7 — sécurité : aucun halo curseur en arrière-plan, uniquement les abeilles canvas. */
@media (min-width: 981px) {
  html.motion-desktop body::after,
  html.motion-desktop main::before {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    content: none !important;
    background: none !important;
  }

  .bee-canvas-cursor {
    z-index: 2147483647 !important;
    opacity: 1 !important;
    pointer-events: none !important;
    mix-blend-mode: normal !important;
    filter: none !important;
    forced-color-adjust: none !important;
  }
}


/* ============================================================
   v10 — sections commerciales : livrables, avant/après, pipeline, FAQ
   ============================================================ */
.deliverables-section,
.before-after-section,
.pipeline-section,
.faq-section {
  position: relative;
}

.deliverables-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: 24px;
  align-items: stretch;
}

.deliverables-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.deliverable-card,
.comparison-card,
.pipeline-card,
.faq-item,
.deliverables-preview {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: rgba(255, 255, 255, .84);
  border: 1px solid rgba(255, 255, 255, .92);
  box-shadow: var(--shadow-soft);
}

.deliverable-card {
  min-height: 220px;
  padding: 26px;
}

.deliverable-card span,
.pipeline-card span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 28px;
  border-radius: 15px;
  color: white;
  background: linear-gradient(135deg, var(--purple), var(--pink));
  font-weight: 920;
  letter-spacing: -.03em;
}

.deliverable-card h3,
.comparison-card h3,
.pipeline-card h3,
.deliverables-preview h3 {
  margin-bottom: 10px;
  color: var(--text);
  font-size: clamp(1.28rem, 2vw, 1.72rem);
  line-height: 1.05;
  letter-spacing: -.04em;
}

.deliverable-card p,
.comparison-card p,
.pipeline-card p,
.deliverables-preview p,
.faq-item p {
  color: var(--muted);
  font-weight: 590;
}

.deliverables-preview {
  padding: 34px;
  min-height: 100%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.76)),
    radial-gradient(circle at top right, rgba(255, 101, 104, .22), transparent 19rem),
    radial-gradient(circle at top left, rgba(101, 20, 244, .18), transparent 20rem);
}

.preview-lines {
  display: grid;
  gap: 10px;
  margin: 28px 0 28px;
}

.preview-lines span {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(101, 20, 244, .22), rgba(255, 101, 104, .16));
}

.preview-lines span:nth-child(1) { width: 90%; }
.preview-lines span:nth-child(2) { width: 68%; }
.preview-lines span:nth-child(3) { width: 82%; }
.preview-lines span:nth-child(4) { width: 56%; }
.preview-lines span:nth-child(5) { width: 74%; }

.deliverables-preview ul,
.comparison-card ul {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  list-style: none;
}

.deliverables-preview li,
.comparison-card li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: #332a45;
  font-weight: 760;
}

.deliverables-preview li::before,
.comparison-after li::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: white;
  background: var(--coral);
  font-size: .78rem;
  font-weight: 950;
  margin-top: 1px;
}

.comparison-before li::before {
  content: "";
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  margin-top: .52em;
  border-radius: 50%;
  background: rgba(23, 19, 31, .28);
}

.before-after-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.comparison-card {
  padding: 34px;
  min-height: 430px;
}

.comparison-card::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 180px;
  height: 180px;
  border-radius: 48px;
  background: linear-gradient(135deg, rgba(101, 20, 244, .12), rgba(255, 101, 104, .24));
  transform: rotate(18deg);
  transition: transform .6s var(--ease-out);
}

.comparison-card:hover::after {
  transform: rotate(28deg) scale(1.08);
}

.comparison-kicker {
  display: inline-flex;
  margin-bottom: 20px;
  padding: .45rem .72rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 920;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.comparison-before .comparison-kicker {
  color: var(--muted);
  background: rgba(23, 19, 31, .08);
}

.comparison-after {
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.76)),
    radial-gradient(circle at top right, rgba(255, 101, 104, .22), transparent 19rem),
    radial-gradient(circle at top left, rgba(101, 20, 244, .18), transparent 20rem);
}

.comparison-after .comparison-kicker {
  color: white;
  background: linear-gradient(100deg, var(--blue), var(--purple-2) 54%, var(--pink));
}

.prospection-pipeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding: 24px;
  border-radius: 34px;
  background: rgba(255,255,255,.54);
  border: 1px solid rgba(255,255,255,.86);
  box-shadow: 0 25px 80px rgba(23, 19, 31, .08);
  overflow: hidden;
}

.pipeline-line {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 3px;
  border-radius: 999px;
  background: rgba(101, 20, 244, .12);
  overflow: hidden;
  transform: translateY(-50%);
  pointer-events: none;
}

.pipeline-line span {
  display: block;
  width: 34%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--purple), var(--coral), transparent);
  animation: pipelinePulse 3.6s linear infinite;
}

.pipeline-card {
  min-height: 250px;
  padding: 26px;
  z-index: 2;
}

.pipeline-card p {
  margin-bottom: 0;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.faq-item {
  padding: 0;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out);
}

.faq-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(101, 20, 244, .16);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 56px 22px 24px;
  color: var(--text);
  font-size: 1.08rem;
  font-weight: 880;
  line-height: 1.2;
  position: relative;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: white;
  background: var(--purple);
  transform: translateY(-50%);
  transition: transform .3s var(--ease-out), background .3s var(--ease-out);
}

.faq-item[open] summary::after {
  content: "−";
  background: var(--coral);
  transform: translateY(-50%) rotate(180deg);
}

.faq-item p {
  margin: -4px 24px 24px;
  max-width: 94%;
}

@keyframes pipelinePulse {
  0% { transform: translateX(-120%); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateX(330%); opacity: 0; }
}

@media (min-width: 981px) {
  html.motion-desktop .page-hero.can-tilt {
    --lift-y: 0px;
  }

  html.motion-desktop .page-hero.can-tilt:hover {
    --lift-y: -10px;
    box-shadow: 0 48px 110px rgba(39, 19, 104, .18);
    border-color: rgba(101, 20, 244, .18);
  }

  html.motion-desktop .page-hero.has-spotlight::before {
    mix-blend-mode: soft-light;
    opacity: 0;
    background:
      radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(255,255,255,.68) 0 6%, rgba(255,101,104,.20) 18%, rgba(101,20,244,.12) 36%, transparent 58%);
  }

  html.motion-desktop .page-hero.has-spotlight:hover::before {
    opacity: 1;
  }

  html.motion-desktop .page-hero.has-spotlight:hover::after {
    transform: rotate(8deg) translate3d(calc(var(--mx) * 18px), calc(var(--my) * 18px), 0) scale(1.05);
    filter: drop-shadow(0 54px 90px rgba(255, 101, 104, .34));
  }

  html.motion-desktop .deliverable-card:hover,
  html.motion-desktop .comparison-card:hover,
  html.motion-desktop .pipeline-card:hover {
    box-shadow: var(--shadow-hover);
    border-color: rgba(101, 20, 244, .18);
  }
}

@media (max-width: 980px) {
  .deliverables-layout,
  .before-after-grid,
  .prospection-pipeline,
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .deliverables-grid {
    grid-template-columns: 1fr;
  }

  .pipeline-line {
    display: none;
  }

  .deliverable-card,
  .comparison-card,
  .pipeline-card,
  .deliverables-preview {
    min-height: auto;
    padding: 24px;
  }
}

@media (max-width: 640px) {
  .deliverables-preview,
  .deliverable-card,
  .comparison-card,
  .pipeline-card {
    border-radius: 24px;
  }

  .prospection-pipeline {
    padding: 14px;
    border-radius: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pipeline-line span {
    animation: none !important;
  }
}


/* ============ Accueil allégé v11 ============ */
.home-routing-section {
  margin-top: 0;
}

.home-route-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.home-route-card {
  min-height: 300px;
  padding: 28px;
  border-radius: 30px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition:
    transform .45s var(--ease-out),
    box-shadow .45s var(--ease-out),
    border-color .45s var(--ease-out);
}

.home-route-card::after {
  content: "";
  position: absolute;
  right: -68px;
  top: -68px;
  width: 158px;
  height: 158px;
  border-radius: 42px;
  background: linear-gradient(135deg, rgba(101, 20, 244, .13), rgba(255, 101, 104, .22));
  transform: rotate(18deg);
  transition: transform .6s var(--ease-out), opacity .35s var(--ease-out);
  opacity: .85;
}

.home-route-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(101, 20, 244, .18);
}

.home-route-card:hover::after {
  transform: rotate(28deg) scale(1.08);
  opacity: 1;
}

.route-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 34px;
  border-radius: 15px;
  color: white;
  background: linear-gradient(135deg, var(--purple), var(--pink));
  font-weight: 920;
  position: relative;
  z-index: 2;
}

.home-route-card h3 {
  margin-bottom: 12px;
  color: var(--purple);
  font-size: clamp(1.55rem, 2.3vw, 2.35rem);
  line-height: 1;
  letter-spacing: -.055em;
  font-weight: 930;
  position: relative;
  z-index: 2;
}

.home-route-card p {
  color: var(--muted);
  font-weight: 590;
  position: relative;
  z-index: 2;
}

.home-route-card .text-link {
  margin-top: auto;
  position: relative;
  z-index: 2;
}

@media (min-width: 981px) {
  html.motion-desktop .home-route-card.has-spotlight::before {
    opacity: 0;
    background:
      radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(255,255,255,.68) 0 7%, rgba(255,101,104,.18) 18%, rgba(101,20,244,.11) 38%, transparent 60%);
  }

  html.motion-desktop .home-route-card.has-spotlight:hover::before {
    opacity: 1;
  }
}

@media (max-width: 1120px) {
  .home-route-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .home-route-grid {
    grid-template-columns: 1fr;
  }

  .home-route-card {
    min-height: auto;
    padding: 24px;
    border-radius: 26px;
  }
}


/* ============================================================
   v12 — accueil minimal + restauration animation gros encarts
   ============================================================ */
.home-hero-minimal {
  margin-bottom: 120px;
}

@media (min-width: 981px) {
  html.motion-desktop .page-hero.can-tilt {
    --lift-y: 0px;
    transform-origin: center center;
    will-change: transform;
    transform:
      perspective(1050px)
      rotateX(calc(var(--tilt-x) * .95))
      rotateY(calc(var(--tilt-y) * .95))
      translateY(var(--lift-y))
      scale(1);
    transition:
      transform .46s var(--ease-out),
      box-shadow .46s var(--ease-out),
      border-color .46s var(--ease-out),
      background .46s var(--ease-out);
  }

  html.motion-desktop .page-hero.can-tilt:hover {
    --lift-y: -18px;
    border-color: rgba(101, 20, 244, .26);
    box-shadow:
      0 62px 140px rgba(39, 19, 104, .24),
      0 26px 62px rgba(255, 101, 104, .16),
      0 0 0 1px rgba(255,255,255,.72) inset;
  }

  html.motion-desktop .page-hero.has-spotlight::before {
    z-index: 2;
    opacity: 0;
    background:
      radial-gradient(
        circle at var(--spot-x) var(--spot-y),
        rgba(255,255,255,.95) 0%,
        rgba(240,82,198,.30) 15%,
        rgba(101,20,244,.18) 32%,
        transparent 58%
      );
    mix-blend-mode: soft-light;
    transition: opacity .38s var(--ease-out);
  }

  html.motion-desktop .page-hero.has-spotlight:hover::before {
    opacity: 1;
  }

  html.motion-desktop .page-hero.has-spotlight:hover::after {
    opacity: 1;
    filter: drop-shadow(0 58px 100px rgba(255, 101, 104, .36));
    transform:
      rotate(calc(8deg + (var(--mx) * 4deg)))
      translate3d(calc(var(--mx) * 42px), calc(var(--my) * 34px), 0)
      scale(1.085);
  }

  .page-hero .eyebrow {
    transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
  }

  .page-hero:hover .eyebrow {
    transform: translateY(-4px) scale(1.02);
    box-shadow:
      0 26px 64px rgba(101, 20, 244, .28),
      0 0 0 1px rgba(255,255,255,.50) inset;
  }
}

@media (max-width: 980px) {
  .home-hero-minimal {
    margin-bottom: 64px;
  }
}


/* ============================================================
   v13 — accueil équilibré + animation du gros encart blog
   ============================================================ */

.home-offers-snapshot {
  margin-bottom: 108px;
}

.home-section-heading-center {
  max-width: 840px;
}

.home-offers-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.home-offer-card {
  min-height: 315px;
  padding: 32px;
  border-radius: 34px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition:
    transform .5s var(--ease-out),
    box-shadow .5s var(--ease-out),
    border-color .5s var(--ease-out);
}

.home-offer-card::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 175px;
  height: 175px;
  border-radius: 44px;
  background: linear-gradient(135deg, rgba(101, 20, 244, .12), rgba(255, 101, 104, .26));
  transform: rotate(18deg);
  transition: transform .6s var(--ease-out);
  pointer-events: none;
}

.home-offer-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(101, 20, 244, .20);
}

.home-offer-card:hover::after {
  transform: rotate(29deg) scale(1.08);
}

.home-offer-card-featured {
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.78)),
    radial-gradient(circle at top right, rgba(255, 101, 104, .22), transparent 18rem),
    radial-gradient(circle at top left, rgba(101, 20, 244, .18), transparent 19rem);
}

.home-offer-card h3 {
  margin: 28px 0 12px;
  color: var(--purple);
  font-size: clamp(1.9rem, 2.8vw, 3.05rem);
  line-height: .98;
  letter-spacing: -.06em;
  font-weight: 930;
  position: relative;
  z-index: 2;
}

.home-offer-card p {
  color: var(--muted);
  font-size: 1.04rem;
  font-weight: 610;
  position: relative;
  z-index: 2;
}

.home-card-link {
  margin-top: auto;
  color: var(--purple);
  font-weight: 900;
  position: relative;
  z-index: 2;
}

.home-method-snapshot {
  margin-bottom: 108px;
}

.home-method-steps {
  display: grid;
  gap: 14px;
}

.home-method-steps article {
  padding: 22px;
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  box-shadow: 0 16px 45px rgba(21, 16, 42, .06);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
}

.home-method-steps article:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 58px rgba(21, 16, 42, .11);
  border-color: rgba(101, 20, 244, .16);
}

.home-method-steps span {
  display: inline-flex;
  margin-bottom: 10px;
  padding: .35rem .68rem;
  border-radius: 999px;
  background: rgba(255, 101, 104, .13);
  color: var(--coral-dark);
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.home-method-steps h3 {
  margin-bottom: 8px;
  font-size: 1.32rem;
  letter-spacing: -.035em;
}

.home-method-steps p {
  margin: 0;
  color: var(--muted);
  font-weight: 590;
}

@media (min-width: 981px) {
  /* Le blog hero devient un vrai gros encart interactif, comme les pages dédiées. */
  html.motion-desktop .blog-hero.can-tilt {
    --lift-y: 0px;
    transform-origin: center center;
    will-change: transform;
    transform:
      perspective(1050px)
      rotateX(calc(var(--tilt-x) * .95))
      rotateY(calc(var(--tilt-y) * .95))
      translateY(var(--lift-y))
      scale(1);
    transition:
      transform .46s var(--ease-out),
      box-shadow .46s var(--ease-out),
      border-color .46s var(--ease-out),
      background .46s var(--ease-out);
  }

  html.motion-desktop .blog-hero.can-tilt:hover {
    --lift-y: -18px;
    border-color: rgba(101, 20, 244, .26);
    box-shadow:
      0 62px 140px rgba(39, 19, 104, .24),
      0 26px 62px rgba(255, 101, 104, .16),
      0 0 0 1px rgba(255,255,255,.72) inset;
  }

  html.motion-desktop .blog-hero.has-spotlight::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    background:
      radial-gradient(
        circle at var(--spot-x) var(--spot-y),
        rgba(255,255,255,.95) 0%,
        rgba(240,82,198,.30) 15%,
        rgba(101,20,244,.18) 32%,
        transparent 58%
      );
    mix-blend-mode: soft-light;
    transition: opacity .38s var(--ease-out);
  }

  html.motion-desktop .blog-hero.has-spotlight:hover::before {
    opacity: 1;
  }

  html.motion-desktop .blog-hero.has-spotlight:hover::after {
    opacity: 1;
    filter: drop-shadow(0 58px 100px rgba(255, 101, 104, .36));
    transform:
      rotate(calc(8deg + (var(--mx) * 4deg)))
      translate3d(calc(var(--mx) * 42px), calc(var(--my) * 34px), 0)
      scale(1.085);
  }

  .blog-hero .eyebrow {
    transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
  }

  .blog-hero:hover .eyebrow {
    transform: translateY(-4px) scale(1.02);
    box-shadow:
      0 26px 64px rgba(101, 20, 244, .28),
      0 0 0 1px rgba(255,255,255,.50) inset;
  }

  /* Même traitement interactif léger pour les nouveaux blocs d'accueil. */
  html.motion-desktop .home-offer-card.has-spotlight::before,
  html.motion-desktop .home-method-steps article.has-spotlight::before {
    opacity: 0;
    background:
      radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(255,255,255,.74) 0 8%, rgba(255,101,104,.18) 20%, rgba(101,20,244,.12) 42%, transparent 64%);
  }

  html.motion-desktop .home-offer-card.has-spotlight:hover::before,
  html.motion-desktop .home-method-steps article.has-spotlight:hover::before {
    opacity: 1;
  }
}

@media (max-width: 980px) {
  .home-offers-snapshot,
  .home-method-snapshot {
    margin-bottom: 72px;
  }

  .home-offers-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .home-offer-card {
    min-height: auto;
    padding: 24px;
    border-radius: 28px;
  }
}


/* Lien discret vers la page diagnostic — ajouté sans modifier la structure de la home */
.hero-diagnostic-link {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: .98rem;
  font-weight: 650;
  line-height: 1.45;
}

.hero-diagnostic-link a {
  position: relative;
  display: inline-block;
  color: var(--purple);
  font-weight: 850;
  white-space: nowrap;
}

.hero-diagnostic-link a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  opacity: .32;
  transform: scaleX(.36);
  transform-origin: left center;
  transition: transform .32s var(--ease-out), opacity .32s var(--ease-out);
}

.hero-diagnostic-link a:hover::after,
.hero-diagnostic-link a:focus-visible::after {
  opacity: .86;
  transform: scaleX(1);
}

/* ============================================================
   V27 — Clients / preuve sociale (section marquee)
   Bloc additif uniquement. Aucune classe existante n'est modifiée.
   Toutes les classes ci-dessous sont préfixées `.client-` et sont
   utilisées exclusivement dans la section "Ils nous ont fait confiance"
   ajoutée en fin de <main> dans index.html.
   ============================================================ */

.client-marquee-section {
  width: min(var(--max), calc(100% - 32px));
  margin: 90px auto 110px;
  padding: 56px 0 64px;
  position: relative;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(101, 20, 244, .04), rgba(255, 101, 104, .04)),
    rgba(255, 255, 255, .55);
  border: 1px solid rgba(101, 20, 244, .08);
  box-shadow: 0 18px 60px -30px rgba(101, 20, 244, .18);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  overflow: hidden;
}

.client-marquee-section::before {
  /* Halo radial subtil, dans l'esprit DA du site */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(700px 320px at 0% 0%, rgba(101, 20, 244, .07), transparent 60%),
    radial-gradient(700px 320px at 100% 100%, rgba(255, 101, 104, .06), transparent 60%);
}

.client-marquee-header {
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 0 auto 38px;
  padding: 0 24px;
  max-width: 720px;
}

.client-marquee-header h2 {
  margin: 8px 0 0;
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -.01em;
}

.client-marquee {
  position: relative;
  z-index: 1;
  /* Fondu sur les bords (mask) pour l'élégance */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 60px,
    #000 calc(100% - 60px),
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 60px,
    #000 calc(100% - 60px),
    transparent 100%
  );
  overflow: hidden;
}

.client-marquee-track {
  display: flex;
  align-items: stretch;
  gap: 22px;
  width: max-content;
  padding: 8px 0;
  animation: clientMarquee 44s linear infinite;
  will-change: transform;
}

.client-marquee:hover .client-marquee-track,
.client-marquee:focus-within .client-marquee-track {
  animation-play-state: paused;
}

@keyframes clientMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.client-card {
  flex: 0 0 auto;
  width: 220px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(23, 19, 31, .06);
  box-shadow: 0 4px 20px -12px rgba(23, 19, 31, .18);
  transition:
    transform .35s var(--ease-out, ease),
    box-shadow .35s var(--ease-out, ease);
}

.client-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -16px rgba(23, 19, 31, .22);
}

.client-logo {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

.client-card:not(.client-card-quote) .client-logo {
  transform: scale(1.08);
}

/* Carte spéciale Ironhack : logo + citation discrète */
.client-card-quote {
  width: 360px;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  padding: 18px 22px;
  text-align: left;
}

.client-card-quote .client-logo {
  width: auto;
  height: auto;
  max-width: 170px;
  max-height: 34px;
  align-self: flex-start;
  object-fit: contain;
}

.client-quote {
  margin: 0;
  padding: 0;
  border: 0;
}

.client-quote p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #2c2436;
  font-style: italic;
  letter-spacing: .005em;
}

.client-quote-author {
  display: block;
  margin-top: 6px;
  font-style: normal;
}

.client-quote-name {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: #2c2436;
  letter-spacing: .01em;
}

.client-quote-role {
  display: block;
  font-size: 11px;
  color: var(--muted, #656071);
  margin-top: 1px;
}

/* prefers-reduced-motion : pas d'animation, scroll horizontal manuel
   et masquage des duplicats (déjà aria-hidden). */
@media (prefers-reduced-motion: reduce) {
  .client-marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
    scrollbar-width: thin;
  }
  .client-marquee-track {
    animation: none !important;
    width: max-content;
    padding-bottom: 14px;
  }
  .client-marquee-track > .client-card[aria-hidden="true"] {
    display: none;
  }
}

/* Mobile : ralentir l'animation et compacter les cartes pour préserver
   la lisibilité sans surcharger. */
@media (max-width: 720px) {
  .client-marquee-section {
    margin: 60px auto 80px;
    padding: 40px 0 48px;
    border-radius: 22px;
  }
  .client-marquee-track {
    gap: 16px;
    animation-duration: 60s; /* plus lent sur mobile */
  }
  .client-card {
    width: 180px;
    height: 110px;
    padding: 12px 14px;
  }
  .client-card-quote {
    width: 280px;
  }
  .client-card:not(.client-card-quote) .client-logo {
    transform: scale(1.06);
  }
  .client-card-quote .client-logo {
    max-width: 140px;
    max-height: 28px;
  }
  .client-quote p {
    font-size: 12px;
  }
}


/* ============================================================
   V27 POLISH — 3 ajouts subtils, 100 % additifs.
   Aucune règle existante n'a été modifiée. Aucun layout, aucun
   espacement, aucune couleur de marque, aucune typo touchée.
   ============================================================ */

/* 1. Sélection texte cohérente avec la DA violet/corail.
   Sans cette règle, la sélection utilise le bleu navigateur par défaut. */
::-moz-selection {
  background: var(--purple);
  color: #fff;
  text-shadow: none;
}
::selection {
  background: var(--purple);
  color: #fff;
  text-shadow: none;
}

/* 2. Flash de tap mobile cohérent avec la DA (au lieu du bleu navigateur).
   Appliqué uniquement sur les éléments interactifs pour ne pas peindre
   accidentellement des zones non cliquables. */
a,
button,
[role="button"],
input[type="submit"],
input[type="button"],
.nav-toggle {
  -webkit-tap-highlight-color: rgba(101, 20, 244, .12);
}

/* 3. scroll-padding-top global pour que les sauts d'ancre (#offres,
   #methode, #contact, #top, #diagnostic-tool, #preuves, #main) ne
   soient pas masqués par le header sticky (~85 px de hauteur).
   Complète les `scroll-margin-top` déjà présents sur certains éléments. */
html {
  scroll-padding-top: 100px;
}