/* ═══════════════════════════════════════════
   STYLE BLOCK 1 — Main Styles (lines 32–2657)
   ═══════════════════════════════════════════ */

    /* ═══════════════════════════════════════════
       RESET: zéro border-radius sur tout le site
       ═══════════════════════════════════════════ */
    *,
    *::before,
    *::after {
      border-radius: 0 !important;
    }

    /* ═══════════════════════════════════════
       PALETTE FINALE
       ═══════════════════════════════════════ */
    :root {
      --bg: #ffffff;
      --surface: #F7F8FA;
      --card: #ffffff;
      --border: #E2E6EA;
      --border-hover: #C8D0D6;
      --mint: #4DDBB1;
      --mint-d: #3BB894;
      --text: #1A1F2E;
      --text2: #5C6370;
      --muted: #8C919D;
      --shadow: 0 2px 8px rgba(26, 31, 46, .06), 0 8px 30px rgba(26, 31, 46, .06);
    }

    /* ═══════════════════════════════════════
       TYPOGRAPHIE UNIFIÉE
       ═══════════════════════════════════════ */
    body,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .title,
    .hero-title,
    .card h3,
    .service-t h3,
    .why-card h3,
    .proof-card h3,
    .method h3,
    .result,
    .trust-item strong,
    .footer strong {
      font-family: 'Inter', Arial, sans-serif;
    }

    h1,
    .hero-title {
      font-size: clamp(40px, 4.5vw, 56px);
      font-weight: 800;
      line-height: 1.05;
      letter-spacing: -0.03em;
    }

    h2,
    .title {
      font-size: clamp(28px, 3vw, 40px);
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -0.025em;
    }

    h3,
    .card h3,
    .service-t h3,
    .why-card h3,
    .proof-card h3,
    .method h3 {
      font-size: 20px;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -0.02em;
    }

    body {
      font-size: 16px;
      line-height: 1.6;
    }

    .intro,
    .hero-sub {
      font-size: 17px;
      line-height: 1.6;
    }

    .eyebrow,
    .mono,
    .pill-l,
    .type,
    .tag,
    .quote-badge {
      font-size: 13px;
      font-family: 'Inter', Arial, sans-serif;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    /* ═══════════════════════════════════════
       ESPACEMENT UNIFIÉ
       ═══════════════════════════════════════ */
    .section {
      padding: 80px 0;
    }

    @media (max-width: 720px) {
      .section {
        padding: 56px 0;
      }
    }

    .head {
      margin-bottom: 48px;
    }

    .head .eyebrow {
      margin-bottom: 12px;
    }

    .head .title {
      margin-top: 12px;
      margin-bottom: 16px;
    }

    .head .intro {
      margin-top: 0;
    }

    .pain,
    .pillars,
    .services,
    .why,
    .proof,
    .trust-grid {
      gap: 24px;
    }

    /* ═══════════════════════════════════════
       ANTI-AI : Design propre et humain
       ═══════════════════════════════════════ */
    .gridfx {
      background-image: none !important;
    }

    body {
      background: #ffffff;
    }

    .hero-shell::before {
      display: none;
    }

    .pill:hover,
    .why-card:hover,
    .faq-item.open {
      box-shadow: 0 8px 30px rgba(26, 31, 46, .1);
      border-color: #c8d0d6;
    }

    .eyebrow::before {
      box-shadow: none;
    }

    .reass div::before {
      box-shadow: none;
    }

    .btn-p {
      box-shadow: 0 4px 16px rgba(26, 31, 46, .1);
    }

    .btn-p:hover {
      box-shadow: 0 8px 24px rgba(26, 31, 46, .14);
    }

    .hero-card {
      background: #ffffff;
      border: 1px solid #e3e8eb;
      box-shadow: 0 8px 30px rgba(26, 31, 46, .08);
    }

    /* ═══════════════════════════════════════
       BACKGROUNDS ALTERNÉS
       ═══════════════════════════════════════ */
    .bg-vector {
      background-color: #FFFFFF;
      background-image: url('../images/bg-vector.svg');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
    }

    .bg-light {
      background-color: #F7F8FA;
      border-top: 1px solid var(--border);
    }

    /* ═══════════════════════════════════════
       SÉPARATION DES SECTIONS — Services & Why
       ═══════════════════════════════════════ */
    section[aria-labelledby="services-heading"] {
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

    section[aria-labelledby="why-heading"] {
      border-bottom: 1px solid var(--border);
    }

    :root {
      --container: 1280px;
      --header: 72px;
      --err: #ff4a4a;
      --ok: #00c896;
      --glow: #C8D0D6;
    }

    * {
      box-sizing: border-box
    }

    html {
      /* Lenis setup: auto scrolling is handled inside JS */
      scroll-behavior: auto;
      scroll-padding-top: calc(var(--header) + 16px);
    }
    
    html.lenis, html.lenis body {
      height: auto;
    }

    .lenis.lenis-smooth {
      scroll-behavior: auto !important;
    }

    .lenis.lenis-smooth [data-lenis-prevent] {
      overscroll-behavior: contain;
    }

    .lenis.lenis-stopped {
      overflow: hidden;
    }

    .lenis.lenis-smooth iframe {
      pointer-events: none;
    }

    body {
      margin: 0;
      font: 16px/1.6 'Inter', Arial, sans-serif;
      color: var(--text);
      background: #ffffff;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden
    }

    img {
      display: block;
      max-width: 100%;
      height: auto
    }

    a {
      color: inherit
    }

    button,
    input,
    select {
      font: inherit
    }

    :focus-visible {
      outline: 2px solid var(--mint);
      outline-offset: 3px
    }

    .container {
      width: min(100% - 32px, var(--container));
      margin: 0 auto
    }

    .section {
      padding: 80px 0;
      position: relative
    }

    .surface {
      background: var(--surface)
    }

    .eyebrow,
    .mono {
      font: 700 13px/1 'Inter', Arial, sans-serif;
      letter-spacing: .1em;
      text-transform: uppercase
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--mint)
    }

    .eyebrow::before {
      content: "";
      width: 8px;
      height: 8px;
      background: var(--mint)
    }

    .head {
      margin: 0 0 48px
    }

    .head.center {
      text-align: center;
      margin-inline: auto
    }

    .title {
      margin: 12px 0 16px;
      font-size: clamp(28px, 3vw, 40px);
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -.025em
    }

    .intro {
      margin: 0;
      font-size: 17px;
      color: var(--text2)
    }

    .btn {
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 14px 24px;
      border-radius: 0px;
      border: 1px solid transparent;
      text-decoration: none;
      font-weight: 700;
      cursor: pointer;
      transition: transform .24s, border-color .24s, background .24s, color .24s, box-shadow .24s
    }

    .btn:hover {
      transform: translateY(-2px)
    }

    .btn-p {
      background: var(--mint);
      color: var(--bg);
      box-shadow: 0 14px 32px rgba(0, 229, 176, .18)
    }

    .btn-p:hover {
      background: #11f3c0
    }

    .btn-s {
      border-color: var(--glow);
      background: rgba(17, 28, 45, .48);
      color: var(--text)
    }

    .btn-s:hover {
      border-color: var(--mint);
      color: var(--mint)
    }

    .btn-g {
      padding: 0;
      min-height: auto;
      border: none;
      background: none;
      background: linear-gradient(135deg, var(--mint-d), #0d8c6a);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-weight: 700
    }

    .btn-g:hover {
      transform: none;
      text-decoration: underline
    }

    /* ── Top contact bar ── */
    .contact-topbar {
      background: rgba(4, 8, 16, .95);
      border-bottom: 1px solid rgba(30, 45, 66, .55);
      padding: 7px 0;
    }
    .contact-topbar-in {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 24px;
    }
    .contact-topbar-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
      text-decoration: none;
      transition: color .22s;
    }
    .contact-topbar-link:hover { color: var(--mint); }
    .contact-topbar-link svg {
      width: 12px;
      height: 12px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
    }
    .contact-topbar-social {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding-left: 14px;
      border-left: 1px solid rgba(77, 219, 177, .18);
    }
    .contact-topbar-social-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #7f8a96;
    }
    .contact-topbar-social-links {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .contact-topbar-social-link {
      width: 22px;
      height: 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(77, 219, 177, .24);
      color: var(--muted);
      background: rgba(77, 219, 177, .04);
      text-decoration: none;
      transition: color .22s, border-color .22s, background .22s;
    }
    .contact-topbar-social-link svg {
      width: 12px;
      height: 12px;
      fill: currentColor;
      stroke: none;
    }
    .contact-topbar-social-link:hover {
      color: var(--mint);
      border-color: rgba(77, 219, 177, .52);
      background: rgba(77, 219, 177, .1);
    }
    @media (max-width: 900px) {
      .contact-topbar-social {
        gap: 8px;
        padding-left: 10px;
      }
      .contact-topbar-social-label { display: none; }
    }
    @media (max-width: 640px) { .contact-topbar { display: none; } }

    /* ── Contact direct (section contact) ── */
    .contact-direct {
      margin-top: 28px;
      margin-bottom: 28px;
      padding-top: 24px;
      border-top: 1px solid rgba(30, 45, 66, .6);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .contact-direct-links {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
    }
    .contact-direct-label {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--mint-d);
      display: block;
      margin-bottom: 4px;
    }
    .contact-direct-link {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
    }
    .contact-direct-icon {
      width: 38px;
      height: 38px;
      background: rgba(0, 229, 176, .08);
      border: 1px solid rgba(0, 229, 176, .22);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background .22s, border-color .22s;
    }
    .contact-direct-icon svg {
      width: 16px;
      height: 16px;
      stroke: var(--mint);
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .contact-direct-link:hover .contact-direct-icon {
      background: var(--mint);
      border-color: var(--mint);
    }
    .contact-direct-link:hover .contact-direct-icon svg { stroke: #0d1520; }
    .contact-direct-text {
      font-size: 14px;
      font-weight: 500;
      color: var(--text2);
      transition: color .22s;
    }
    .contact-direct-link:hover .contact-direct-text { color: var(--mint); }

    .header {
      position: sticky;
      top: 0;
      z-index: 50;
      height: var(--header);
      background: rgba(6, 11, 20, .84);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(30, 45, 66, .72)
    }

    .header-in {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px
    }

    .logo {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font: 800 1rem 'Inter', Arial, sans-serif;
      letter-spacing: -.03em;
      text-decoration: none
    }

    .logo-mark {
      width: 38px;
      height: 38px;
      border-radius: 0px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(0, 229, 176, .25);
      background: linear-gradient(180deg, rgba(0, 229, 176, .18), rgba(17, 28, 45, .65));
      box-shadow: 0 0 32px rgba(0, 229, 176, .08)
    }

    .logo-mark svg {
      width: 20px;
      height: 20px
    }

    .nav {
      display: flex;
      gap: 28px;
      color: var(--text2)
    }

    .nav a {
      text-decoration: none;
      font-size: 15px
    }

    .nav a:hover {
      color: var(--text)
    }

    .actions {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .burger {
      display: none;
      width: 46px;
      height: 46px;
      border-radius: 0px;
      border: 1px solid var(--border);
      background: #ffffff;
      color: var(--text);
      justify-content: center;
      align-items: center;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s;
    }

    .burger:hover {
      background: var(--surface);
      border-color: var(--border-hover);
    }

    .burger span,
    .burger span::before,
    .burger span::after {
      width: 18px;
      height: 2px;
      background: currentColor;
      border-radius: 999px;
      display: block;
      position: relative;
      transition: transform .24s, opacity .24s;
      content: ""
    }

    .burger span::before {
      position: absolute;
      top: -6px;
      left: 0
    }

    .burger span::after {
      position: absolute;
      top: 6px;
      left: 0
    }

    .burger[aria-expanded=true] span {
      background: transparent
    }

    .burger[aria-expanded=true] span::before {
      transform: translateY(6px) rotate(45deg)
    }

    .burger[aria-expanded=true] span::after {
      transform: translateY(-6px) rotate(-45deg)
    }

    .mobile {
      display: none;
      border-bottom: 1px solid var(--border);
      background: #ffffff;
    }

    .mobile.open {
      display: block;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .mobile nav {
      padding: 16px 0 24px;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .mobile a {
      padding: 16px 20px;
      text-decoration: none;
      color: var(--text);
      font-weight: 500;
      border-bottom: 1px solid var(--border);
      transition: background 0.2s, color 0.2s;
    }

    .mobile a:last-of-type:not(.btn) {
      border-bottom: none;
      margin-bottom: 12px;
    }

    .mobile a.btn {
      margin: 12px 20px 0;
      padding: 14px 24px;
      text-align: center;
      border-bottom: none;
      color: #0d1a1e;
    }

    .hero {
      padding-top: clamp(24px, 3vw, 40px);
      padding-bottom: clamp(32px, 4vw, 56px);
      overflow: clip
    }

    .gridfx {
      position: absolute;
      inset: 0;
      background-image: linear-gradient(rgba(42, 74, 107, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(42, 74, 107, .12) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: linear-gradient(180deg, rgba(0, 0, 0, .52), transparent 72%);
      pointer-events: none
    }

    .hero-in {
      display: grid;
      grid-template-columns: 1fr;
      align-items: center;
      min-height: 45vh;
      padding-top: 4vh;
      padding-bottom: 2vh;
    }

    .hero-content {
      max-width: 800px;
      margin: 0;
      text-align: left;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .hero-title {
      margin: 18px 0;
      font-size: clamp(32px, 3.8vw, 48px);
      font-weight: 800;
      line-height: 1.05;
      letter-spacing: -.03em;
      max-width: none;
      color: #ffffff;
    }

    .hero .hero-sub {
      max-width: 40rem;
      margin: 0 0 28px;
      font-size: 17px;
      color: #ffffff;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }

    .hero-cta {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-bottom: 16px
    }

    .hero-micro {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 16px;
      color: var(--text2);
      font-size: 14px;
      margin-bottom: 26px
    }

    .hero-micro span::before {
      content: "•";
      color: var(--mint);
      margin-right: 8px
    }

    .mini {
      display: flex;
      flex-wrap: wrap;
      gap: 18px 24px;
      padding-top: 20px;
      border-top: 1px solid rgba(30, 45, 66, .82)
    }

    .mini strong {
      display: block;
      font-size: 18px;
      margin-bottom: 3px
    }

    .mini span {
      color: var(--text2);
      font-size: 14px
    }

    .hero-shell {
      position: relative;
      min-height: 520px;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .hero-shell::before {
      content: "";
      position: absolute;
      inset: 12% 8%;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(0, 229, 176, .2), transparent 62%);
      filter: blur(60px);
      opacity: .65
    }

    .hero-card {
      position: relative;
      width: min(100%, 620px);
      border-radius: 28px;
      overflow: hidden;
      border: 1px solid rgba(42, 74, 107, .78);
      background: linear-gradient(180deg, rgba(17, 28, 45, .86), rgba(12, 20, 32, .95));
      box-shadow: var(--shadow), 0 0 32px rgba(0, 229, 176, .08)
    }

    .hero-meta {
      position: absolute;
      top: 18px;
      left: 18px;
      right: 18px;
      display: flex;
      justify-content: space-between;
      gap: 12px;
      z-index: 2
    }

    .tag {
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(6, 11, 20, .74);
      border: 1px solid rgba(42, 74, 107, .72);
      backdrop-filter: blur(10px);
      font: 10px 'Inter', Arial, sans-serif;
      letter-spacing: .08em;
      text-transform: uppercase
    }

    .hero-status {
      color: var(--mint)
    }

    .hero-card img {
      width: 100%;
      aspect-ratio: 16/10;
      object-fit: cover
    }

    .hero-note {
      position: absolute;
      right: 18px;
      bottom: 18px;
      max-width: 220px;
      padding: 14px 16px;
      border-radius: 0px;
      background: rgba(6, 11, 20, .86);
      border: 1px solid rgba(42, 74, 107, .76);
      backdrop-filter: blur(12px)
    }

    .hero-note strong {
      display: block;
      font-size: 14px;
      margin-bottom: 6px
    }

    .hero-note span {
      display: block;
      font-size: 13px;
      color: var(--text2)
    }

    .trust {
      padding: 60px 0;
      border-top: 1px solid rgba(30, 45, 66, .72);
      border-bottom: 1px solid rgba(30, 45, 66, .72);
      background: rgba(12, 20, 32, .68);
      backdrop-filter: blur(12px)
    }

    .trust-grid,
    .pain,
    .pillars,
    .services,
    .why,
    .proof,
    .footer-grid {
      display: grid;
      gap: 24px
    }

    .trust-grid {
      grid-template-columns: repeat(5, 1fr);
      align-items: stretch;
      position: relative
    }

    .trust-grid::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(0, 229, 176, .04), transparent);
      pointer-events: none;
      border-radius: 20px
    }

    .trust-item {
      padding: 22px 16px;
      border-radius: 0;
      border: none;
      background: transparent;
      border-right: 1px solid rgba(42, 74, 107, .5);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 10px;
      position: relative
    }

    .trust-item:last-child {
      border-right: none
    }

    .trust-item .trust-icon {
      width: 36px;
      height: 36px;
      border-radius: 0px;
      border: 1px solid rgba(0, 229, 176, .25);
      background: rgba(0, 229, 176, .08);
      display: grid;
      place-items: center;
      margin-bottom: 2px
    }

    .trust-item .trust-icon svg {
      width: 17px;
      height: 17px;
      stroke: var(--mint);
      fill: none;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .trust-item strong {
      display: block;
      font: 600 24px/1 'Inter', Arial, sans-serif;
      letter-spacing: -.03em;
      color: var(--text);
      margin-bottom: 2px
    }

    .trust-item span {
      display: block;
      color: var(--text2);
      font-size: 11.5px;
      letter-spacing: .02em;
      text-transform: uppercase;
      font-weight: 500
    }

    .pain {
      grid-template-columns: repeat(3, 1fr);
      margin-top: 36px;
      margin-bottom: clamp(28px, 4vw, 56px);
      align-items: stretch
    }

    .pain .card {
      height: 100%
    }

    .card,
    .pill,
    .why-card,
    .proof-card,
    .form-card {
      border-radius: 20px;
      border: 1px solid rgba(30, 45, 66, .76);
      background: linear-gradient(180deg, rgba(14, 24, 40, .96), rgba(12, 20, 32, .96));
      box-shadow: var(--shadow)
    }

    .card {
      padding: 28px;
      display: flex;
      flex-direction: column;
      gap: 12px
    }

    .card h3,
    .service-t h3,
    .why-card h3,
    .proof-card h3,
    .method h3 {
      margin: 0;
      font-family: 'Inter', Arial, sans-serif;
      font-size: 20px;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -.02em
    }

    .card p,
    .service-t p,
    .why-card p,
    .proof-card p,
    .method p {
      margin: 0;
      color: var(--text2)
    }

    .trans {
      margin-top: clamp(36px, 4vw, 56px);
      padding-top: 36px;
      border-top: 1px solid var(--border);
      text-align: center;
      font-size: clamp(28px, 3vw, 40px);
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -.025em;
      color: var(--text)
    }

    .trans strong {
      background: linear-gradient(135deg, var(--mint-d), #0d8c6a);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text
    }

    .pillars {
      grid-template-columns: repeat(3, 1fr);
      gap: 24px
    }

    .pill {
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      position: relative;
      overflow: hidden;
      transition: transform .24s, border-color .24s, box-shadow .24s
    }

    .pill:hover {
      transform: translateY(-4px);
      border-color: var(--glow);
      box-shadow: var(--shadow), 0 0 32px rgba(0, 229, 176, .08)
    }

    .pill::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      opacity: 0;
      transition: opacity .24s
    }

    .pill:hover::before {
      opacity: 1
    }

    .pill.build::before {
      background: linear-gradient(90deg, #4aa8ff, transparent)
    }

    .pill.grow::before {
      background: linear-gradient(90deg, var(--mint), transparent)
    }

    .pill.run::before {
      background: linear-gradient(90deg, #9cabff, transparent)
    }

    .pill-img {
      overflow: hidden;
      border-radius: 18px;
      border: 1px solid rgba(42, 74, 107, .72);
      background: rgba(17, 28, 45, .64)
    }

    .pill-img img {
      width: 100%;
      aspect-ratio: 4/3;
      object-fit: cover
    }

    .pill-l {
      width: fit-content;
      padding: 8px 18px;
      border-radius: 999px;
      border: 1px solid transparent;
      font: 700 14px 'Inter', Arial, sans-serif;
      letter-spacing: .12em;
      text-transform: uppercase
    }

    .build .pill-l {
      color: #4aa8ff;
      border-color: rgba(74, 168, 255, .3);
      background: rgba(74, 168, 255, .08)
    }

    .grow .pill-l {
      color: var(--mint);
      border-color: rgba(0, 229, 176, .28);
      background: rgba(0, 229, 176, .08)
    }

    .run .pill-l {
      color: #9cabff;
      border-color: rgba(156, 171, 255, .32);
      background: rgba(156, 171, 255, .08)
    }

    .pill p {
      margin: 0;
      color: var(--text2);
      font-size: 15px
    }

    .list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 0;
      margin: 0;
      color: var(--text2);
      font-size: 15px;
      line-height: 1.5
    }

    .list li {
      display: flex;
      gap: 10px;
      align-items: baseline
    }

    .list li::before {
      content: "—";
      color: var(--mint);
      flex-shrink: 0
    }

    .cases {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px
    }

    .cases span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 36px;
      padding: 6px 14px;
      border-radius: 0px;
      background: rgba(17, 28, 45, .72);
      border: 1px solid rgba(30, 45, 66, .78);
      color: var(--text2);
      font-size: 13px;
      text-align: center;
      line-height: 1.3
    }

    .pill-ft {
      margin-top: auto;
      padding-top: 16px;
      border-top: 1px solid rgba(30, 45, 66, .72)
    }

    .services {
      grid-template-columns: repeat(2, 1fr)
    }

    .service {
      padding: 24px;
      display: flex;
      gap: 16px;
      align-items: flex-start
    }

    .service:last-child:nth-child(odd) {
      grid-column: 1/-1;
      max-width: calc(50% - 10px)
    }

    .icon {
      width: 48px;
      height: 48px;
      flex-shrink: 0;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: rgba(17, 28, 45, .85);
      border: 1px solid rgba(42, 74, 107, .72)
    }

    .icon svg {
      width: 24px;
      height: 24px;
      stroke: var(--mint);
      fill: none;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .service-t h3 {
      margin: 0 0 8px
    }

    .why {
      grid-template-columns: repeat(2, 1fr)
    }

    .why-card {
      padding: 28px;
      transition: transform .24s, border-color .24s
    }

    .why-card:hover {
      transform: translateY(-3px);
      border-color: var(--glow)
    }

    .why-card .why-card-head {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 16px;
    }

    .why-card .why-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      border-radius: 14px;
      border: 1px solid rgba(0, 229, 176, .25);
      background: rgba(0, 229, 176, .07);
      color: var(--mint);
      flex-shrink: 0;
      transition: background .28s, border-color .28s, transform .28s;
    }

    .why-card .why-icon svg {
      width: 24px;
      height: 24px;
    }

    .why-card:hover .why-icon {
      background: rgba(0, 229, 176, .12);
      border-color: rgba(0, 229, 176, .4);
      transform: scale(1.06);
    }

    .why-card .mono {
      display: flex;
      align-items: center;
      justify-content: center;
      width: auto;
      height: auto;
      border-radius: 0;
      border: none;
      background: none;
      color: var(--mint);
      font: 700 18px/1 'Inter', Arial, sans-serif;
      letter-spacing: -.02em;
      text-transform: none;
      margin-bottom: 0;
      flex-shrink: 0;
      opacity: .45;
    }

    .proof {
      grid-template-columns: repeat(2, 1fr)
    }

    .proof-card {
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0;
      overflow: hidden;
      border-radius: 20px
    }

    .proof-top {
      padding: 24px 28px 20px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      flex: 1
    }

    .proof-footer {
      padding: 16px 28px;
      border-top: 1px solid #edf0f3;
      display: flex;
      align-items: center;
      gap: 14px;
      background: #fafbfc
    }

    .proof-avatar {
      width: 40px;
      height: 40px;
      border-radius: 0px;
      background: #f2f4f6;
      border: 1px solid #e3e8eb;
      display: grid;
      place-items: center;
      font: 700 14px/1 'Inter', Arial, sans-serif;
      color: #fff;
      flex-shrink: 0;
      overflow: hidden
    }

    .proof-avatar img {
      width: 26px;
      height: 26px;
      object-fit: contain
    }

    .proof-avatar--letters {
      background: linear-gradient(135deg, var(--mint-d), #0d8c6a);
      border-color: transparent
    }

    .proof-client-name {
      font: 600 15px/1 'Inter', Arial, sans-serif;
      color: var(--text)
    }

    .proof-client-sub {
      font-size: 12px;
      color: var(--muted);
      margin-top: 2px
    }

    .sector {
      color: var(--muted);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: .04em;
      text-transform: uppercase
    }

    .result {
      margin: 0;
      font: 600 18px/1.3 'Inter', Arial, sans-serif;
      letter-spacing: -.02em;
      color: var(--text)
    }

    .proof-tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: auto;
      padding-top: 4px
    }

    .type {
      width: fit-content;
      padding: 5px 11px;
      border-radius: 999px;
      border: 1px solid rgba(0, 229, 176, .28);
      background: rgba(0, 229, 176, .08);
      color: var(--mint);
      font: 700 10px 'Inter', Arial, sans-serif;
      letter-spacing: .1em;
      text-transform: uppercase
    }

    .type-build {
      background: rgba(74, 168, 255, .08);
      border-color: rgba(74, 168, 255, .3);
      color: #4aa8ff
    }

    .type-run {
      background: rgba(156, 171, 255, .08);
      border-color: rgba(156, 171, 255, .32);
      color: #9cabff
    }

    .method-wrap {
      display: grid;
      grid-template-columns: 1fr 380px;
      gap: 72px;
      align-items: center;
    }

    .methods {
      display: flex;
      flex-direction: column;
      gap: 0;
      position: relative
    }

    .methods::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 22px;
      width: 2px;
      background: linear-gradient(180deg, transparent, rgba(0, 229, 176, .35), rgba(0, 229, 176, .35), transparent);
      z-index: 0
    }

    .method {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 44px 1fr;
      gap: 24px;
      align-items: start;
      padding-bottom: 40px
    }

    .method:last-child {
      padding-bottom: 0
    }

    .step {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      border: 2px solid rgba(0, 229, 176, .4);
      background: #fff;
      color: var(--mint-d);
      font: 700 14px 'Inter', Arial, sans-serif;
      flex-shrink: 0;
      position: relative;
      z-index: 2
    }

    .method-content {
      padding-top: 8px
    }

    .method-content h3 {
      margin: 0 0 8px;
      font: 700 20px/1.2 'Inter', Arial, sans-serif;
      letter-spacing: -.02em
    }

    .method-content p {
      margin: 0;
      color: var(--text2);
      font-size: 15px;
      line-height: 1.6
    }

    .method-v,
    .form-v {
      border-radius: 26px;
      overflow: hidden;
      border: 1px solid rgba(42, 74, 107, .78);
      background: rgba(14, 24, 40, .88);
      box-shadow: var(--shadow)
    }

    .method-v img {
      width: 100%;
      aspect-ratio: 4/5;
      object-fit: cover
    }

    .faq {
      max-width: 840px;
      margin: auto;
      display: grid;
      gap: 12px
    }

    .faq-item {
      border-radius: 0px;
      border: 1px solid #e3e8eb;
      background: #fff;
      overflow: hidden;
      transition: border-color .24s, box-shadow .24s;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .04)
    }

    .faq-item:hover {
      border-color: #bfd9d0
    }

    .faq-item.open {
      border-color: var(--mint-d);
      box-shadow: 0 4px 20px rgba(0, 0, 0, .06)
    }

    .q {
      width: 100%;
      min-height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 20px 24px;
      border: none;
      color: var(--text);
      background: transparent;
      text-align: left;
      cursor: pointer;
      font-size: 16px;
      font-weight: 600;
      line-height: 1.4;
      transition: color .24s
    }

    .q:hover {
      color: var(--mint-d)
    }

    .q span:last-child {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: #f2f7f5;
      border: 1px solid #e0ebe7;
      flex-shrink: 0;
      transition: transform .24s, background .24s, border-color .24s
    }

    .q span:last-child svg {
      width: 16px;
      height: 16px;
      stroke: var(--mint-d);
      stroke-width: 2;
      fill: none;
      stroke-linecap: round;
      transition: transform .3s
    }

    .faq-item.open .q span:last-child {
      background: var(--mint-d);
      border-color: var(--mint-d)
    }

    .faq-item.open .q span:last-child svg {
      stroke: #fff;
      transform: rotate(45deg)
    }

    .a {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows .3s ease
    }

    .faq-item.open .a {
      grid-template-rows: 1fr
    }

    .a>div {
      overflow: hidden
    }

    .a p {
      margin: 0;
      padding: 0 24px 22px;
      color: var(--text2);
      font-size: 15px;
      line-height: 1.65
    }

    .form-wrap {
      display: grid;
      grid-template-columns: .95fr 1.05fr;
      gap: clamp(24px, 4vw, 54px);
      align-items: center
    }

    .reass {
      display: grid;
      gap: 12px;
      margin: 30px 0
    }

    .reass div {
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--text2);
      font-size: 14px
    }

    .reass div::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--mint);
      box-shadow: 0 0 12px rgba(0, 229, 176, .35)
    }

    .form-v img {
      width: 100%;
      aspect-ratio: 4/3;
      object-fit: cover
    }

    .form-card {
      padding: clamp(22px, 3vw, 38px)
    }

    .status {
      margin-bottom: 16px;
      padding: 14px 16px;
      border-radius: 14px;
      font-size: 14px;
      display: none
    }

    .status.visible {
      display: block
    }

    .status.error {
      background: rgba(255, 74, 74, .08);
      border: 1px solid rgba(255, 74, 74, .22);
      color: #ffb5b5
    }

    .status.success {
      background: rgba(0, 200, 150, .1);
      border: 1px solid rgba(0, 200, 150, .22);
      color: #bff4e6
    }

    .form {
      display: grid;
      gap: 18px
    }

    .field {
      display: grid;
      gap: 8px
    }

    .req-star {
      color: var(--err);
      font-weight: 700;
      margin-left: 2px
    }

    .field label {
      font-size: 14px;
      font-weight: 700
    }

    .field small {
      color: var(--muted);
      font-size: 12px
    }

    .field input,
    .field select {
      width: 100%;
      min-height: 52px;
      padding: 14px 16px;
      border-radius: 0px;
      border: 1px solid rgba(30, 45, 66, .88);
      background: rgba(17, 28, 45, .78);
      color: var(--text);
      transition: border-color .24s, box-shadow .24s
    }

    .field input::placeholder {
      color: var(--muted)
    }

    .field input:focus,
    .field select:focus {
      border-color: var(--glow);
      box-shadow: 0 0 32px rgba(0, 229, 176, .08);
      outline: none
    }

    .field input.error,
    .field select.error,
    .field textarea.error {
      border-color: var(--err)
    }

    .ferr {
      display: none;
      color: #ffb5b5;
      font-size: 12px
    }

    .ferr.visible {
      display: block
    }

    .form-meta {
      margin-top: 4px;
      color: var(--text2);
      font-size: 13px
    }

    /* ════════════════════════════════════════════
       CONTACT — alignement image / form
       ════════════════════════════════════════════ */

    /* Les deux colonnes s'étirent à la même hauteur */
    #contact .form-wrap { align-items: stretch; }

    /* Colonne gauche : flex column pour que l'image remplisse le reste */
    #contact .contact-left {
      display: flex;
      flex-direction: column;
    }

    /* Photo : remplit tout l'espace restant */
    #contact .form-v {
      margin-top: 28px;
      flex: 1;
      min-height: 180px;
    }
    #contact .form-v img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* ════════════════════════════════════════════
       CONTACT — form-card fond mint #4ddbb1
       ════════════════════════════════════════════ */
    #contact .form-card {
      background: #4ddbb1 !important;
      border: 1px solid rgba(0, 160, 110, .3) !important;
      box-shadow: 0 24px 72px rgba(0, 160, 110, .2), 0 4px 16px rgba(0,0,0,.06) !important;
    }

    /* Labels */
    #contact .field label {
      color: #072017;
      font-weight: 700;
    }

    /* Étoile obligatoire */
    #contact .req-star { color: #0a3d25; }

    /* Inputs & select */
    #contact .field input,
    #contact .field select {
      background: rgba(255, 255, 255, .88);
      border: 1.5px solid rgba(7, 32, 23, .18);
      color: #072017;
      border-radius: 8px;
    }

    #contact .field input::placeholder { color: rgba(7, 32, 23, .38); }

    #contact .field input:focus,
    #contact .field select:focus {
      border-color: #072017;
      box-shadow: 0 0 0 3px rgba(7, 32, 23, .1);
      outline: none;
    }

    #contact .field input.error,
    #contact .field select.error,
    #contact .field textarea.error { border-color: #6b1111 !important; }

    /* Messages d'erreur inline */
    #contact .ferr { color: #5a0e0e; }

    /* Status banners */
    #contact .status.error {
      background: rgba(160, 20, 20, .12);
      border-color: rgba(160, 20, 20, .25);
      color: #5a0e0e;
    }
    #contact .status.success {
      background: rgba(255, 255, 255, .22);
      border-color: rgba(255, 255, 255, .4);
      color: #072017;
    }

    /* Bouton — foncé sur fond mint */
    #contact .form-card .btn-p {
      background: #072017;
      color: #4ddbb1;
      border-color: #072017;
      box-shadow: 0 8px 28px rgba(7, 32, 23, .28);
    }
    #contact .form-card .btn-p:hover {
      background: #0c2e1f;
      border-color: #0c2e1f;
      color: #ffffff;
    }

    /* Texte meta sous le bouton */
    #contact .form-meta { color: rgba(7, 32, 23, .6); }

    .footer {
      padding: 48px 0 36px;
      border-top: 1px solid rgba(30, 45, 66, .72);
      background: rgba(6, 11, 20, .92)
    }

    .footer-grid {
      grid-template-columns: 1.2fr 1fr 1fr auto;
      align-items: start;
      gap: 40px
    }

    .footer h3,
    .footer p,
    .footer a {
      margin: 0;
      color: var(--text2);
      text-decoration: none;
      font-size: 14px;
      line-height: 1.6
    }

    .footer a:hover {
      color: var(--mint-d)
    }

    .footer strong {
      display: block;
      font: 700 18px 'Inter', Arial, sans-serif;
      color: var(--text);
      margin-bottom: 6px
    }

    .footer-desc {
      color: var(--muted);
      font-size: 13px;
      margin-top: 4px
    }

    .foot-links {
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    .foot-links a {
      transition: color .2s
    }

    .footer-col-label {
      display: block;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--text);
      margin-bottom: 14px
    }

    .foot-services-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 9px
    }

    .foot-services-list li {
      font-size: 13px;
      color: var(--text2);
      line-height: 1.4;
      padding-left: 14px;
      position: relative
    }

    .foot-services-list li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 7px;
      width: 5px;
      height: 1px;
      background: var(--mint-d)
    }

    .footer-contact {
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .footer-contact-label {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 2px
    }

    .footer-email,
    .footer-phone {
      font-weight: 600;
      color: var(--text) !important;
      font-size: 15px;
      text-decoration: none;
      transition: color .22s;
    }

    .footer-email:hover,
    .footer-phone:hover {
      color: var(--mint) !important;
    }

    .legal {
      margin-top: 32px;
      padding-top: 20px;
      border-top: 1px solid rgba(30, 45, 66, .4);
      color: var(--muted);
      font-size: 13px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px
    }

    .legal-links {
      display: flex;
      gap: 16px
    }

    .legal-links a {
      color: var(--muted);
      text-decoration: none;
      font-size: 13px;
      transition: color .2s
    }

    .legal-links a:hover {
      color: var(--text2)
    }

    .sticky {
      position: fixed;
      left: 12px;
      right: 12px;
      bottom: 12px;
      z-index: 60;
      display: none;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 12px 14px;
      border-radius: 18px;
      background: rgba(6, 11, 20, .94);
      border: 1px solid rgba(42, 74, 107, .82);
      box-shadow: var(--shadow), 0 0 32px rgba(0, 229, 176, .08);
      transform: translateY(20px);
      opacity: 0;
      transition: opacity .24s, transform .24s
    }

    .sticky.visible {
      opacity: 1;
      transform: translateY(0)
    }

    .sticky strong,
    .sticky span {
      display: block
    }

    .sticky strong {
      font-size: 14px;
      line-height: 1.1
    }

    .sticky span {
      color: var(--text2);
      font-size: 12px;
      margin-top: 3px
    }

    /* .reveal: entrance state managed by GSAP initScrollReveals() + initPageLoad() */
    .reveal.visible {
      opacity: 1;
      transform: translateY(0)
    }

    /* Reveal elements visible by default (GSAP scroll reveals removed) */
    .reveal {
      opacity: 1 !important;
      transform: none !important;
    }

    @media (max-width:1180px) {

      .hero-in,
      .method-wrap,
      .form-wrap {
        grid-template-columns: 1fr
      }

      .hero-shell {
        min-height: auto
      }

      .hero-title {
        max-width: none
      }

      .method-v,
      .form-v {
        max-width: 640px;
        margin: 0 auto
      }
    }

    @media (max-width:980px) {

      .nav,
      .actions>.btn {
        display: none
      }

      .burger {
        display: inline-flex
      }

      .mobile {
        background: #ffffff;
      }

      .mobile a {
        color: var(--text);
        border-bottom-color: var(--border);
      }

      .mobile a:hover {
        color: var(--mint-d);
        background: rgba(77, 219, 177, 0.05);
      }

      .trust-grid,
      .pain,
      .pillars,
      .services,
      .why,
      .proof,
      .footer-grid {
        grid-template-columns: 1fr 1fr
      }

      .methods {
        gap: 0
      }

      .methods::before {
        display: none
      }
    }

    @media (max-width:720px) {
      .container {
        width: min(100% - 24px, var(--container))
      }

      .section {
        padding: 56px 0
      }

      .hero {
        padding-top: 28px
      }

      .hero-in {
        min-height: auto
      }

      .hero-title {
        font-size: clamp(38px, 11vw, 46px);
        max-width: 10ch
      }

      .hero-sub,
      .intro {
        font-size: 16px
      }

      .hero-cta {
        flex-direction: column
      }

      .hero-cta .btn {
        width: 100%
      }

      .trust-grid,
      .pain,
      .pillars,
      .services,
      .why,
      .proof,
      .footer-grid,
      .methods {
        grid-template-columns: 1fr
      }

      .service:last-child:nth-child(odd) {
        max-width: none
      }

      .sticky {
        display: flex
      }
    }

    @media (prefers-reduced-motion:reduce) {
      html {
        scroll-behavior: auto
      }

      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important
      }

      .reveal {
        opacity: 1;
        transform: none
      }
    }

/* ═══════════════════════════════════════
   CUSTOM CURSOR — GSAP Circle Follow
   ═══════════════════════════════════════ */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50% !important; /* override global reset */
  background-color: var(--mint);
  /* mix-blend-mode removed so the color stays exactly #4ddbb1 */
  pointer-events: none;
  z-index: 9999;
  will-change: transform, background-color, border;
  opacity: 0;
  transition: background-color 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease, opacity 0.3s ease;
  border: 1px solid transparent;
}

.cursor.active {
  opacity: 1;
}

.cursor.hovering {
  background-color: rgba(77, 219, 177, 0.1);  /* Very transparent mint */
  border-color: rgba(77, 219, 177, 0.5);      /* Clear border to maintain shape */
  /* Removed backdrop-filter so text is 100% sharp and readable */
}

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

@media (prefers-reduced-motion: reduce) {
  .cursor {
    display: none !important;
  }
}

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0
    }


    body {
      font-family: Inter, Arial, sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at top right, rgba(77, 219, 177, .12), transparent 24%),
        radial-gradient(circle at left 18%, rgba(26, 31, 46, .05), transparent 30%),
        #ffffff
    }

    .title,
    .hero-title,
    .card h3,
    .service-t h3,
    .why-card h3,
    .proof-card h3,
    .method h3,
    .result,
    .trust-item strong,
    .footer strong {
      font-family: Inter, Arial, sans-serif;
      font-weight: 800
    }

    /* light mode — top contact bar */
    .contact-topbar {
      background: #f5f7f9;
      border-bottom: 1px solid rgba(26, 31, 46, .08);
    }
    .contact-topbar-link { color: #7a8694; }
    .contact-topbar-link:hover { color: var(--mint-d); }
    .contact-topbar-social {
      border-left-color: rgba(26, 31, 46, .12);
    }
    .contact-topbar-social-label { color: #8a96a4; }
    .contact-topbar-social-link {
      color: #7a8694;
      border-color: rgba(26, 31, 46, .14);
      background: rgba(255, 255, 255, .6);
    }
    .contact-topbar-social-link:hover {
      color: var(--mint-d);
      border-color: rgba(0, 180, 130, .42);
      background: rgba(0, 180, 130, .1);
    }

    /* light mode — contact direct */
    .contact-direct { border-top-color: rgba(26, 31, 46, .1); }
    .contact-direct-icon {
      background: rgba(0, 180, 130, .07);
      border-color: rgba(0, 180, 130, .2);
    }

    .header {
      background: rgba(255, 255, 255, .92);
      border-bottom: 1px solid rgba(26, 31, 46, .08)
    }

    .logo {
      min-width: 220px
    }

    .logo-brand {
      width: auto;
      height: 44px;
      background: none;
      border: none;
      box-shadow: none;
      border-radius: 0;
      display: flex;
      align-items: center
    }

    .logo-brand img {
      height: 44px;
      width: auto;
      object-fit: contain
    }

    .nav a,
    .mobile a,
    .intro,
    .hero-sub,
    .hero-micro,
    .mini span,
    .trust-item span,
    .card p,
    .service-t p,
    .why-card p,
    .proof-card p,
    .form-meta,
    .testimonial-meta {
      color: var(--text2)
    }

    .btn-p {
      background: var(--mint);
      color: #0d1a1e;
      box-shadow: 0 14px 28px rgba(77, 219, 177, .22)
    }

    .btn-p:hover {
      background: #5ae4bc
    }

    .btn-s {
      background: #fff;
      border-color: #c9d3d7;
      color: var(--text)
    }

    .btn-s:hover {
      border-color: var(--mint-d);
      color: var(--mint-d)
    }

    .btn-g {
      background: linear-gradient(135deg, var(--mint-d), #0d8c6a);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text
    }

    .surface {
      background: linear-gradient(180deg, #f7f8fa, #f5f5f5)
    }

    .gridfx {
      background-image:
        linear-gradient(rgba(26, 31, 46, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26, 31, 46, .06) 1px, transparent 1px);
      mask-image: linear-gradient(180deg, rgba(0, 0, 0, .38), transparent 82%)
    }

    .hero {
      padding-top: 56px;
      /* Using a clean off-white so the Aurora Mesh pops perfectly */
      background: #fcfcfd;
    }

    .hero-shell::before {
      background: radial-gradient(circle, rgba(77, 219, 177, .18), transparent 62%)
    }

    .hero-card,
    .pill-img,
    .method-v,
    .form-v {
      background: linear-gradient(180deg, #fdfefe, #f4f6f7);
      border: 1px solid #dbe3e7;
      box-shadow: var(--shadow)
    }

    .hero-meta .tag {
      background: rgba(255, 255, 255, .92);
      border-color: #d9e2e5;
      color: #5f6876
    }

    .hero-status {
      color: var(--mint-d)
    }

    .hero-note {
      background: rgba(255, 255, 255, .94);
      border: 1px solid #dde3e8
    }

    .trust {
      background: linear-gradient(180deg, #f9fbfc 0%, #ffffff 100%);
      border-top: 1px solid #e2e8ec;
      border-bottom: 1px solid #e2e8ec
    }

    .trust-item {
      border-right-color: #e2e8ec;
      background: transparent;
      box-shadow: none
    }

    .trust-item .trust-icon {
      border-color: rgba(77, 219, 177, .35);
      background: rgba(77, 219, 177, .07)
    }

    .trust-item strong {
      color: #0d1520
    }

    .trust-item strong {
      background: linear-gradient(135deg, var(--mint-d), #0d8c6a);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text
    }

    .card,
    .pill,
    .why-card,
    .proof-card,
    .form-card,
    .faq-item,
    .service {
      background: #ffffff;
      border-color: #e3e8eb;
      box-shadow: var(--shadow)
    }

    .pill:hover,
    .why-card:hover,
    .faq-item.open {
      border-color: #bfd9d0
    }

    .cases span,
    .pill-l,
    .type,
    .step,
    .tag,
    .hero-note,
    .trust-item,
    .logo-chip,
    .quote-badge {
      box-shadow: none
    }

    .cases span {
      background: #f5f7f8;
      border-color: #e0e7ea;
      color: #60697a
    }

    .icon {
      background: #f7faf9;
      border-color: #d9e4e5
    }

    .icon svg {
      stroke: var(--mint-d)
    }

    .client-strip-section {
      background: #ffffff
    }

    .logo-wall {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 40px
    }

    .logo-chip {
      min-height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 28px 32px;
      border: 1px solid #e3e8eb;
      background: #fff;
      border-radius: 0px;
      text-align: center;
      transition: border-color .24s, box-shadow .24s
    }

    .logo-chip:hover {
      border-color: #bfd9d0;
      box-shadow: 0 4px 24px rgba(0, 0, 0, .06)
    }

    .logo-chip img {
      max-height: 100px;
      width: auto;
      max-width: 100%;
      object-fit: contain;
      filter: grayscale(100%) opacity(0.55);
      transition: filter .3s
    }

    .logo-chip:hover img {
      filter: grayscale(0%) opacity(1)
    }

    /* Desktop : 9 logos → cacher le 10ème */
    .logo-mobile-only { display: none; }
    .logo-desktop-only { display: flex; }

    /* Mobile (≤980px) : 10 logos → montrer le 10ème, cacher le doublon */
    @media (max-width: 980px) {
      .logo-mobile-only { display: flex; }
      .logo-desktop-only { display: none; }
    }

    .logo-dot {
      background: #d0d5dc
    }

    .logo-dot.active {
      background: var(--mint-d);
      transform: scale(1.3)
    }

    .logo-prev:hover,
    .logo-next:hover {
      border-color: var(--mint-d);
      color: var(--mint-d)
    }

    .testimonial-section {
      background-color: #f7f8fa;
    }

    .testimonial-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px
    }

    .testimonial-card {
      padding: 28px;
      border-radius: 20px;
      border: 1px solid #e3e8eb;
      background: #fff;
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column
    }

    .testimonial-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 18px
    }

    .stars {
      color: #f7b500;
      letter-spacing: .08em;
      font-size: 18px
    }

    .quote-badge {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 0 10px;
      border-radius: 999px;
      background: #f5f7f8;
      border: 1px solid #e0e7ea;
      color: #667081;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em
    }

    .testimonial-card blockquote {
      margin: 0 0 24px;
      font-size: 16px;
      line-height: 1.6;
      color: var(--text);
      font-weight: 500;
      font-style: italic;
      flex: 1
    }

    .testimonial-bottom {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-top: 18px;
      border-top: 1px solid #edf0f3;
      margin-top: auto
    }

    .testimonial-name {
      margin: 0;
      font: 600 14px/1.2 'Inter', Arial, sans-serif;
      color: var(--text)
    }

    .testimonial-meta {
      margin: 2px 0 0;
      font-size: 13px;
      color: var(--muted)
    }

    .field input,
    .field select {
      background: #fff;
      border-color: #d8e0e4;
      color: var(--text)
    }

    .field input:focus,
    .field select:focus {
      border-color: #a8d8c9;
      box-shadow: 0 0 0 4px rgba(77, 219, 177, .12)
    }

    .footer {
      background: #f8fafb;
      border-top: 1px solid #e3e8eb
    }

    .legal {
      border-top: 1px solid #e3e8eb
    }

    .sticky {
      background: rgba(255, 255, 255, .96);
      border-color: #dbe3e8
    }

    @media (max-width:980px) {

      .logo-wall,
      .testimonial-grid {
        grid-template-columns: 1fr 1fr
      }
    }

    @media (max-width:720px) {
      .logo-brand {
        height: 38px
      }

      .logo-brand img {
        height: 38px
      }

      .logo-wall {
        grid-template-columns: repeat(2, 1fr)
      }

      .testimonial-grid {
        grid-template-columns: 1fr
      }

      .logo-chip {
        min-height: 72px
      }

      .testimonial-card blockquote {
        font-size: 18px
      }
    }

    /* ══════════════════════════════════════════════════════════
       HERO — ULTRA PREMIUM AURORA MESH BACKGROUND (CSS ONLY)
       ══════════════════════════════════════════════════════════ */

    /* ── Entrance keyframes ── */
    @keyframes hero-in-up {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes hero-in-right {
      from { opacity: 0; transform: translateX(-24px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes hero-in-scale {
      from { opacity: 0; transform: translateY(36px) scale(.96); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* ── Scroll indicator keyframes ── */
    @keyframes scroll-wheel {
      0%  { transform: translateX(-50%) translateY(0);    opacity: 1; }
      70% { transform: translateX(-50%) translateY(12px); opacity: 0; }
      71% { transform: translateX(-50%) translateY(0);    opacity: 0; }
      100%{ transform: translateX(-50%) translateY(0);    opacity: 1; }
    }
    @keyframes scroll-bob {
      0%,100% { transform: translateX(-50%) translateY(0); }
      50%      { transform: translateX(-50%) translateY(5px); }
    }
    @keyframes scroll-fade-in {
      from { opacity: 0; transform: translateX(-50%) translateY(12px); }
      to   { opacity: 1; transform: translateX(-50%) translateY(0); }
    }

    /* ── Button & micro-interaction keyframes ── */
    @keyframes btn-pulse {
      0%,100% { box-shadow: 0 14px 28px rgba(77,219,177,.22); }
      50%      { box-shadow: 0 14px 48px rgba(77,219,177,.46), 0 0 0 8px rgba(77,219,177,.07); }
    }
    @keyframes dot-ping {
      0%  { box-shadow: 0 0 0 0 rgba(77,219,177,.6); }
      70% { box-shadow: 0 0 0 10px rgba(77,219,177,0); }
      100%{ box-shadow: 0 0 0 0 rgba(77,219,177,0); }
    }

    /* ── Aurora Animation Keyframes ── */
    @keyframes aurora-1 {
      0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
      33% { transform: translate(5%, -10%) scale(1.1) rotate(5deg); }
      66% { transform: translate(-5%, 5%) scale(0.9) rotate(-5deg); }
    }
    @keyframes aurora-2 {
      0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
      33% { transform: translate(-8%, 8%) scale(0.95) rotate(-3deg); }
      66% { transform: translate(8%, -5%) scale(1.05) rotate(3deg); }
    }
    @keyframes aurora-3 {
      0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
      33% { transform: translate(10%, 5%) scale(1.1) rotate(2deg); }
      66% { transform: translate(-5%, -10%) scale(0.9) rotate(-2deg); }
    }

    /* ── Hero positioning ── */
    .hero {
      position: relative;
      overflow: hidden;
      background: #fdfefe; /* Clean, extremely subtle off-white base */
    }

    /* ── CSS Mesh Gradient Aurora ── */
    .hero-bg-aurora {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 0;
      /* CSS vars for mouse tracking - default to center */
      --mouse-x: 50%;
      --mouse-y: 50%;
    }

    /* Base blur container for smooth color blending */
    .hero-bg-aurora::before {
      content: '';
      position: absolute;
      inset: -50%;
      backdrop-filter: blur(80px);
      -webkit-backdrop-filter: blur(80px);
      z-index: 2;
    }

    .aurora-gradient {
      position: absolute;
      border-radius: 50%;
      filter: blur(60px);
      opacity: 0.5;
      mix-blend-mode: multiply;
      transition: top 0.6s cubic-bezier(0.22, 1, 0.36, 1), left 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Primary Mint - Top Right (reacts heavily to mouse) */
    .aurora-1 {
      width: 60vw;
      height: 60vw;
      background: radial-gradient(circle, rgba(77,219,177,0.4) 0%, rgba(77,219,177,0) 70%);
      top: calc(var(--mouse-y) - 40vw);
      left: calc(var(--mouse-x) - 10vw);
      animation: aurora-1 18s ease-in-out infinite;
    }

    /* Secondary Teal - Bottom Left */
    .aurora-2 {
      width: 50vw;
      height: 50vw;
      background: radial-gradient(circle, rgba(59,184,148,0.25) 0%, rgba(59,184,148,0) 70%);
      bottom: -10vw;
      left: -10vw;
      animation: aurora-2 22s ease-in-out infinite;
    }

    /* Deep Green Accent - Center/Bottom */
    .aurora-3 {
      width: 45vw;
      height: 45vw;
      background: radial-gradient(circle, rgba(13,140,106,0.15) 0%, rgba(13,140,106,0) 70%);
      top: 40%;
      left: 30%;
      animation: aurora-3 25s ease-in-out infinite;
    }

    /* Crisp White Glow - Top Left */
    .aurora-4 {
      width: 40vw;
      height: 40vw;
      background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
      top: -10vw;
      left: -10vw;
      z-index: 1;
    }

    /* Grain/Noise overlay for organic premium texture */
    .hero-noise {
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
      opacity: 0.04;
      z-index: 3;
      mix-blend-mode: overlay;
    }

    /* Subtle grid overlay (crisp, professional) */
    .hero-grid-layer {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 4;
      background-image:
        linear-gradient(rgba(26,31,46,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26,31,46,.04) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.1) 70%, transparent 100%);
      -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.1) 70%, transparent 100%);
    }

    /* ── Content above canvas ── */
    .hero > .container { position: relative; z-index: 10; }

    /* ── Entrance animations (staggered) ── */
    .hero .eyebrow   { animation: hero-in-right  .80s cubic-bezier(.22,1,.36,1) .10s both; }
    .hero .hero-title{ animation: hero-in-up      .90s cubic-bezier(.22,1,.36,1) .26s both; }
    .hero .hero-sub  { animation: hero-in-up      .78s cubic-bezier(.22,1,.36,1) .44s both; }
    .hero .hero-cta  { animation: hero-in-up      .72s cubic-bezier(.22,1,.36,1) .60s both; }
    .hero .hero-micro{ animation: hero-in-up      .66s cubic-bezier(.22,1,.36,1) .76s both; }
    .hero .mini      { animation: hero-in-up      .62s cubic-bezier(.22,1,.36,1) .90s both; }
    .hero .hero-shell{ animation: hero-in-scale  1.00s cubic-bezier(.22,1,.36,1) .34s both; }

    /* ── Stat numbers ── */
    .hero .mini strong {
      background: linear-gradient(135deg, var(--mint-d) 0%, #0d8c6a 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* ── CTA pulse glow ── */
    .hero-cta .btn-p { animation: btn-pulse 3.2s ease-in-out 1.2s infinite; }

    /* ── Eyebrow dot ping ── */
    .hero .eyebrow::before { animation: dot-ping 2.4s ease-out .8s infinite; }

    /* ═══════════════════════════════════════════
       SCROLL DOWN INDICATOR  (position: fixed)
       ═══════════════════════════════════════════ */
    .scroll-indicator {
      position: fixed;           /* Fixed to bottom of screen, not hero container */
      bottom: 40px;              /* Always visible above the fold */
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      z-index: 50;               /* Above everything else */
      text-decoration: none;
      color: var(--text);        /* Dark color on light background */
      opacity: 0;
      /* Show immediately — 0.4s delay */
      /* fade-in handled by GSAP initPageLoad() */
      transition: color .2s, opacity .3s, transform .3s;
    }

    .scroll-indicator.hidden {
      opacity: 0 !important;
      pointer-events: none;
      transform: translate(-50%, 20px) !important;
    }
      pointer-events: none;
    }
    .scroll-indicator:hover { color: var(--mint-d); }

    .scroll-label {
      font-family: 'Inter', Arial, sans-serif;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      opacity: .55;
      transition: opacity .2s;
    }
    .scroll-indicator:hover .scroll-label { opacity: 1; }

    /* Mouse outline */
    .scroll-mouse {
      width: 24px;
      height: 38px;
      border: 2px solid currentColor;
      border-radius: 0px;
      position: relative;
      opacity: .5;
      transition: opacity .2s;
      animation: scroll-bob 2.2s ease-in-out 1.2s infinite;
    }
    .scroll-indicator:hover .scroll-mouse { opacity: 1; }

    /* Scrolling dot */
    .scroll-dot-inner {
      width: 4px;
      height: 8px;
      background: linear-gradient(180deg, var(--mint), var(--mint-d));
      border-radius: 2px;
      position: absolute;
      top: 5px;
      left: 50%;
      animation: scroll-wheel 2s ease-in-out 1.2s infinite;
    }

    /* Decorative line */
    .scroll-line {
      width: 1px;
      height: 22px;
      background: linear-gradient(180deg, currentColor 0%, transparent 100%);
      opacity: .2;
      transition: opacity .2s;
    }
    .scroll-indicator:hover .scroll-line { opacity: .5; }

    @media (max-width: 720px) {
      .scroll-indicator { bottom: 20px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero .eyebrow, .hero .hero-title, .hero .hero-sub,
      .hero .hero-cta, .hero .hero-micro, .hero .mini, .hero .hero-shell,
      .hero-cta .btn-p, .hero .eyebrow::before,
      .scroll-indicator, .scroll-mouse, .scroll-dot-inner, .scroll-line {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
      }
      .scroll-indicator { transform: translateX(-50%); }
    }

    /* ══════════════════════════════════════════
       GSAP ANIMATION SYSTEM — CSS LAYER
       ══════════════════════════════════════════ */

    :root {
      --ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);
      --ease-out:    cubic-bezier(0.25, 1, 0.5, 1);
      --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
      --dur-fast:   0.18s;
      --dur-base:   0.35s;
      --dur-slow:   0.65s;
      --dur-reveal: 0.75s;
    }

    /* Scroll progress bar removed (GSAP progress disabled) */
    /* #scroll-progress { display: none; } */

    /* Header scroll states */
    .header {
      transition:
        height 0.35s var(--ease-out),
        background 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.4s var(--ease-spring);
    }
    .header.scrolled {
      height: 60px;
      background: rgba(255, 255, 255, 0.93) !important;
      backdrop-filter: blur(22px) saturate(180%);
      -webkit-backdrop-filter: blur(22px) saturate(180%);
      box-shadow: 0 1px 0 rgba(26,31,46,0.07), 0 8px 32px rgba(26,31,46,0.05);
    }
    .header.header-hidden {
      transform: translateY(-110%);
    }

    /* Nav underline slide */
    .nav a {
      position: relative;
      padding-bottom: 3px;
    }
    .nav a::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0;
      width: 0; height: 1.5px;
      background: var(--mint);
      transition: width 0.32s var(--ease-spring);
    }
    .nav a:hover::after,
    .nav a:focus-visible::after { width: 100%; }

    /* Card hover — mint glow lift */
    .card, .pill, .why-card, .proof-card, .testimonial-card {
      transition:
        transform 0.38s var(--ease-spring),
        box-shadow 0.38s var(--ease-spring),
        border-color 0.38s ease;
    }
    .card:hover, .proof-card:hover, .testimonial-card:hover {
      transform: translateY(-8px) !important;
      box-shadow:
        0 24px 64px rgba(77, 219, 177, 0.10),
        0 8px 32px rgba(26, 31, 46, 0.08) !important;
      border-color: rgba(77, 219, 177, 0.3) !important;
    }
    .pill:hover {
      transform: translateY(-6px) !important;
      box-shadow: 0 20px 56px rgba(77, 219, 177, 0.10), 0 8px 28px rgba(26,31,46,0.07) !important;
      border-color: rgba(77, 219, 177, 0.28) !important;
    }
    .why-card:hover {
      transform: translateY(-6px) !important;
      box-shadow: 0 20px 56px rgba(77, 219, 177, 0.10), 0 8px 28px rgba(26,31,46,0.07) !important;
      border-color: rgba(77, 219, 177, 0.28) !important;
    }

    /* Performance: will-change only on parallax layers */
    .hero-shell, .hero-grid-layer {
      will-change: transform;
    }

    /* Deco shapes */
    .deco-shapes {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1;
      overflow: hidden;
    }
    .deco { position: absolute; }
    .deco-ring {
      width: 130px; height: 130px;
      border: 1px solid rgba(77,219,177,0.13);
      border-radius: 50% !important;
      top: 11%; right: 7%;
      animation: deco-spin 24s linear infinite;
    }
    .deco-square {
      width: 44px; height: 44px;
      background: rgba(77,219,177,0.05);
      border: 1px solid rgba(77,219,177,0.1);
      bottom: 20%; left: 5%;
      animation: deco-float 9s ease-in-out infinite;
      transform-origin: center;
    }
    .deco-line {
      width: 88px; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(77,219,177,0.2), transparent);
      top: 52%; right: 4%;
      animation: deco-float 11s ease-in-out infinite 2s;
    }
    .deco-dots {
      width: 5px; height: 5px;
      border-radius: 50% !important;
      background: rgba(77,219,177,0.22);
      top: 32%; left: 4%;
      box-shadow:
        16px 0  0 rgba(77,219,177,0.16),
        32px 0  0 rgba(77,219,177,0.10),
        0  16px 0 rgba(77,219,177,0.16),
        16px 16px 0 rgba(77,219,177,0.10),
        32px 16px 0 rgba(77,219,177,0.07);
      animation: deco-float 14s ease-in-out infinite 4s;
    }
    @keyframes deco-float {
      0%,100% { transform: translateY(0); }
      50% { transform: translateY(-20px); }
    }
    @keyframes deco-spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
      .deco-shapes { display: none; }
    }


/* ═══════════════════════════════════════════
   STYLE BLOCK 2 — Chatbot Styles (lines 3631–3762)
   ═══════════════════════════════════════════ */

    #chat-btn {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 100;
      width: 56px;
      height: 56px;
      background: var(--mint);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 20px rgba(26, 31, 46, .15);
      transition: transform .2s, box-shadow .2s
    }

    #chat-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(26, 31, 46, .2)
    }

    #chat-btn svg {
      width: 24px;
      height: 24px;
      fill: none;
      stroke: #1A1F2E;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    #chat-panel {
      position: fixed;
      bottom: 92px;
      right: 24px;
      z-index: 100;
      width: 340px;
      max-width: calc(100vw - 32px);
      background: #fff;
      border: 1px solid #E2E6EA;
      box-shadow: 0 8px 40px rgba(26, 31, 46, .12);
      display: none;
      flex-direction: column;
      max-height: 500px
    }

    #chat-panel.open {
      display: flex
    }

    #chat-header {
      padding: 16px 18px;
      border-bottom: 1px solid #E2E6EA;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #F7F8FA
    }

    #chat-header strong {
      font-size: 14px;
      font-weight: 700;
      color: #1A1F2E
    }

    #chat-header span {
      font-size: 12px;
      color: #5C6370
    }

    #chat-close {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 18px;
      color: #8C919D;
      padding: 0;
      line-height: 1
    }

    #chat-messages {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    .chat-msg {
      max-width: 85%;
      padding: 10px 14px;
      font-size: 14px;
      line-height: 1.5
    }

    .chat-msg.bot {
      background: #F7F8FA;
      border: 1px solid #E2E6EA;
      color: #1A1F2E;
      align-self: flex-start
    }

    .chat-msg.user {
      background: var(--mint);
      color: #1A1F2E;
      align-self: flex-end;
      font-weight: 500
    }

    #chat-options {
      padding: 10px 16px 16px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px
    }

    #chat-options button {
      padding: 8px 14px;
      border: 1px solid #E2E6EA;
      background: #fff;
      color: #1A1F2E;
      font: 600 12px/1 'Inter', Arial, sans-serif;
      cursor: pointer;
      transition: border-color .2s, background .2s
    }

    #chat-options button:hover {
      border-color: var(--mint-d);
      background: #f0fdf9
    }

/* ═══════════════════════════════════════════════════════════════════
   CASE STUDIES — CINEMATIC HORIZONTAL SCROLL
   Inspired by galvanite.io — unique design for Alfa 01 Digital
   ═══════════════════════════════════════════════════════════════════ */

/* ── Section wrapper ── */
.cs-section {
  padding: 0;
  overflow: hidden;
  background: var(--surface);
  position: relative;
}

.cs-header {
  padding: 96px 0 64px;
}

/* ═══════════════════════════════════════
   PROOF GRID — 2 par ligne
   ═══════════════════════════════════════ */
.proof-container {
  padding-bottom: 80px;
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Card wrapper — override existing .proof-card column layout */
.proof-grid .proof-card {
  display: flex !important;
  flex-direction: row !important;
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  overflow: hidden;
  padding: 0 !important;
  gap: 0 !important;
  transition: transform .26s, border-color .26s, box-shadow .26s;
}

.proof-grid .proof-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--mint) !important;
  box-shadow: 0 16px 48px rgba(77, 219, 177, .1), 0 4px 16px rgba(26, 31, 46, .07) !important;
}

/* Left — text zone */
.proof-card-left {
  flex: 1;
  padding: 26px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-right: 1px solid var(--border);
}

.proof-card-sector {
  font: 700 10px/1 'Inter', Arial, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mint-d);
  display: flex;
  align-items: center;
  gap: 8px;
}

.proof-card-sector::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 2px;
  background: var(--mint);
  flex-shrink: 0;
}

.proof-card-desc {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.proof-card-desc p {
  font: 400 13.5px/1.65 'Inter', Arial, sans-serif;
  color: var(--text2);
  margin: 0;
}

.proof-card-result {
  font-weight: 600 !important;
  color: var(--text) !important;
}

/* Right — brand zone */
.proof-card-right {
  width: 180px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 28px 18px 24px;
  gap: 16px;
  background: #f7f8fb;
  border-left: 1px solid var(--border);
}

.proof-brand-logo {
  width: 110px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--border);
}

.proof-brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Initials avatar (client confidentiel) */
.proof-brand-logo--letters {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 20px/1 'Inter', Arial, sans-serif;
  color: #fff;
  letter-spacing: .05em;
}

.proof-brand-info {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.proof-brand-info strong {
  display: block;
  font: 700 13px/1.2 'Inter', Arial, sans-serif;
  color: var(--text);
}

.proof-brand-info span {
  font: 400 11px/1.4 'Inter', Arial, sans-serif;
  color: var(--muted);
}

/* Responsive */
@media (max-width: 960px) {
  .proof-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .cs-header { padding: 48px 0 32px; }
  .proof-container { padding-bottom: 48px; }
  .proof-grid { gap: 14px; }

  /* Colonne verticale — !important pour écraser le row desktop */
  .proof-grid .proof-card {
    flex-direction: column !important;
    border-radius: 0px !important;
  }

  /* Zone texte — pleine largeur */
  .proof-card-left {
    padding: 20px 20px 16px;
    border-right: none;
    border-bottom: 1px solid var(--border);
    gap: 12px;
  }

  /* Zone logo — horizontale compacte en bas */
  .proof-card-right {
    width: 100% !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-start;
    padding: 14px 20px;
    gap: 14px;
    border-left: none;
    border-top: 1px solid var(--border);
    background: var(--surface);
  }

  /* Logo plus petit */
  .proof-brand-logo {
    width: 72px;
    height: 50px;
    flex-shrink: 0;
  }

  /* Infos marque sur une ligne */
  .proof-brand-info {
    text-align: left;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2px;
  }
  .proof-brand-info strong { font-size: 12px; }
  .proof-brand-info span   { font-size: 11px; }

  /* Texte carte */
  .proof-card-desc p { font-size: 13px; line-height: 1.6; }
  .proof-card-sector { font-size: 9.5px; }
}

/* ── Pinned stage ── */
.cs-stage {
  position: relative;
  padding-bottom: 56px;
}

/* ── Viewport: native horizontal scroll on all sizes ── */
.cs-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.cs-viewport::-webkit-scrollbar { display: none; }

/* ── Horizontal track ── */
.cs-track {
  display: flex;
  gap: 28px;
  padding: 20px calc((100vw - 1160px) / 2) 32px;
  width: max-content;
  will-change: transform;
}

/* ── Individual card ── */
.cs-card {
  position: relative;
  width: 460px;
  min-width: 460px;
  min-height: 520px;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
  transition:
    transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.42s ease,
    border-color 0.38s ease;
}

.cs-card { scroll-snap-align: start; }

.cs-card:hover {
  transform: translateY(-10px) scale(1.01) !important;
  box-shadow:
    0 24px 64px rgba(77, 219, 177, 0.18),
    0 6px 24px rgba(26, 31, 46, 0.1);
  border-color: var(--mint);
}

/* Top mint accent bar (animated on hover) */
.cs-card-accent {
  height: 3px;
  background: linear-gradient(90deg, var(--mint) 0%, var(--mint-d) 50%, transparent 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  transition: background-position 0.5s ease;
  flex-shrink: 0;
}

.cs-card:hover .cs-card-accent {
  background-position: 0% 0;
}

/* Ghost number — parallax layer */
.cs-card-num {
  position: absolute;
  top: 12px;
  right: -4px;
  font: 800 128px/1 'Inter', Arial, sans-serif;
  letter-spacing: -0.06em;
  color: rgba(26, 31, 46, 0.045);
  pointer-events: none;
  will-change: transform;
  z-index: 0;
  transition: color 0.38s ease;
}

.cs-card:hover .cs-card-num {
  color: rgba(77, 219, 177, 0.12);
}

/* ── Card body ── */
.cs-card-body {
  flex: 1;
  padding: 28px 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  z-index: 1;
  will-change: transform;
}

/* Sector label */
.cs-card-sector {
  font: 700 10.5px/1 'Inter', Arial, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mint-d);
  display: flex;
  align-items: center;
  gap: 8px;
}

.cs-card-sector::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 2px;
  background: var(--mint);
  flex-shrink: 0;
}

/* Result text */
.cs-card-result {
  font: 500 17px/1.6 'Inter', Arial, sans-serif;
  color: var(--text);
  margin: 0;
  flex: 1;
}

/* Tags row */
.cs-card-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── Card footer ── */
.cs-card-footer {
  padding: 20px 32px 26px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
  background: var(--card);
}

/* ── Progress row ── */
.cs-progress-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 calc((100vw - 1160px) / 2);
  margin-top: 28px;
}

/* Dots */
.cs-dots {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.cs-dot {
  width: 8px;
  height: 8px;
  border-radius: 50% !important;
  background: var(--border);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s ease, transform 0.3s ease, width 0.3s ease;
}

.cs-dot.active {
  background: var(--mint);
  width: 24px;
  border-radius: 4px !important;
}

/* Bar */
.cs-progress-bar-wrap {
  flex: 1;
  height: 2px;
  background: var(--border);
  position: relative;
  overflow: hidden;
}

.cs-progress-bar-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--mint), var(--mint-d));
  transition: width 0.08s linear;
}

/* Counter */
.cs-progress-count {
  font: 600 12px/1 'Inter', Arial, sans-serif;
  color: var(--muted);
  letter-spacing: 0.06em;
  white-space: nowrap;
  min-width: 44px;
  text-align: right;
}

/* ── Scroll hint chip ── */
.cs-hint {
  position: absolute;
  top: -44px;
  right: calc((100vw - 1160px) / 2);
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 12px/1 'Inter', Arial, sans-serif;
  color: var(--muted);
  letter-spacing: 0.05em;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.cs-hint.hidden {
  opacity: 0;
}

.cs-hint svg {
  animation: csHintPulse 1.8s ease-in-out infinite;
}

@keyframes csHintPulse {
  0%, 100% { transform: translateX(0); opacity: 1; }
  50%       { transform: translateX(6px); opacity: 0.5; }
}

/* ── Responsive ── */
@media (max-width: 1220px) {
  .cs-track        { padding: 20px 24px 32px; }
  .cs-progress-row { padding: 0 24px; }
  .cs-hint         { right: 24px; }
}

@media (max-width: 768px) {
  .cs-header { padding: 72px 0 48px; }

  .cs-card {
    min-width: calc(85vw);
    width: calc(85vw);
    min-height: 460px;
  }

  .cs-card-num  { font-size: 88px; }
  .cs-card-body { padding: 24px 24px 20px; }
  .cs-card-footer { padding: 16px 24px 22px; }
  .cs-card-result { font-size: 15px; }

  .cs-hint { top: -36px; right: 24px; }

  /* Mobile: native horizontal scroll */
  .cs-stage  { padding-bottom: 40px; }
  .cs-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cs-viewport::-webkit-scrollbar { display: none; }
  .cs-card { scroll-snap-align: start; }
}

@media (max-width: 480px) {
  .cs-card {
    min-width: calc(92vw);
    width: calc(92vw);
  }
}

/* ═══════════════════════════════════════
   BLOC DE CLÔTURE — build-grow-run
   ═══════════════════════════════════════ */
.bgn-closing {
  margin: 56px auto 0;
  max-width: 900px;
  text-align: center;
  padding-top: 48px;
  position: relative;
}

.bgn-closing::before { display: none; }

/* Paragraphe d'intro — discret */
.bgn-closing > p:first-child {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--text2);
  margin: 0 auto 28px;
  max-width: 640px;
  opacity: .72;
}

/* 3 cards côte à côte */
.bgn-closing ul {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}

.bgn-closing ul li {
  background: linear-gradient(160deg, rgba(14, 24, 42, .97), rgba(10, 18, 30, .98));
  border: 1px solid rgba(40, 56, 78, .5);
  border-left: 3px solid var(--mint);
  border-radius: 14px;
  padding: 24px 22px 22px;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.72;
  color: rgba(200, 210, 225, .88);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color .3s, transform .3s, box-shadow .3s, background .3s;
  min-height: 0;
}

.bgn-closing ul li:hover {
  border-color: rgba(0, 229, 176, .4);
  border-left-color: var(--mint);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .22), 0 0 24px rgba(0, 229, 176, .07);
  background: linear-gradient(160deg, rgba(18, 28, 48, .97), rgba(14, 22, 36, .98));
}

/* Label pilier — pill badge */
.bgn-closing ul li::before {
  content: attr(data-label);
  display: inline-block;
  width: fit-content;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 6px;
  color: var(--mint);
  background: rgba(0, 229, 176, .1);
  border: 1px solid rgba(0, 229, 176, .25);
  flex-shrink: 0;
}

/* Build card accent */
.bgn-closing ul li[data-label="Build"] {
  border-left-color: #4aa8ff;
}
.bgn-closing ul li[data-label="Build"]::before {
  color: #4aa8ff;
  background: rgba(74, 168, 255, .1);
  border-color: rgba(74, 168, 255, .28);
}

/* Grow card accent */
.bgn-closing ul li[data-label="Grow"] {
  border-left-color: var(--mint);
}

/* Run card accent */
.bgn-closing ul li[data-label="Run"] {
  border-left-color: #9cabff;
}
.bgn-closing ul li[data-label="Run"]::before {
  color: #9cabff;
  background: rgba(156, 171, 255, .1);
  border-color: rgba(156, 171, 255, .28);
}

@media (max-width: 720px) {
  .bgn-closing { padding-top: 32px; }
  .bgn-closing ul { grid-template-columns: 1fr; gap: 14px; }
}

/* ═══════════════════════════════════════
   MODALS BUILD / GROW / RUN
   ═══════════════════════════════════════ */
.bgn-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.bgn-modal[hidden] { display: none; }

.bgn-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 21, 32, .78);
  backdrop-filter: blur(4px);
}
.bgn-modal-box {
  position: relative;
  background: var(--bg);
  width: 100%;
  max-width: 760px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(13, 21, 32, .32);
  display: flex;
  flex-direction: column;
  animation: bgnModalIn .26s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes bgnModalIn {
  from { opacity: 0; transform: scale(.93) translateY(20px); }
  to   { opacity: 1; transform: scale(1)  translateY(0); }
}

/* Sticky header inside modal */
.bgn-modal-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 28px 20px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 1;
}
.bgn-modal-head h2 {
  flex: 1;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.bgn-modal-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid;
  flex-shrink: 0;
}
.bgn-modal-label.build { color: #4aa8ff; border-color: rgba(74, 168, 255, .3); background: rgba(74, 168, 255, .08); }
.bgn-modal-label.grow  { color: var(--mint); border-color: rgba(0, 229, 176, .28); background: rgba(0, 229, 176, .08); }
.bgn-modal-label.run   { color: #9cabff; border-color: rgba(156, 171, 255, .32); background: rgba(156, 171, 255, .08); }

/* Color-themed accents per modal */
#modal-build .bgn-modal-section > h3 { border-bottom-color: rgba(74, 168, 255, .2); }
#modal-build .bgn-modal-group h4 { color: #4aa8ff; }
#modal-build .bgn-modal-group ul li::before { color: #4aa8ff; }
#modal-build .bgn-tech-tags span { border-color: rgba(74, 168, 255, .2); color: #4aa8ff; }

#modal-grow .bgn-modal-section > h3 { border-bottom-color: rgba(0, 229, 176, .22); }
#modal-grow .bgn-modal-group h4 { color: var(--mint); }
#modal-grow .bgn-modal-group ul li::before { color: var(--mint); }
#modal-grow .bgn-tech-tags span { border-color: rgba(0, 229, 176, .22); color: var(--mint); }

#modal-run .bgn-modal-section > h3 { border-bottom-color: rgba(156, 171, 255, .25); }
#modal-run .bgn-modal-group h4 { color: #9cabff; }
#modal-run .bgn-modal-group ul li::before { color: #9cabff; }
#modal-run .bgn-tech-tags span { border-color: rgba(156, 171, 255, .25); color: #9cabff; }

.bgn-modal-close {
  background: none;
  border: 1px solid var(--border);
  color: var(--text2);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .2s, color .2s;
}
.bgn-modal-close:hover { border-color: var(--text); color: var(--text); }

/* Body */
.bgn-modal-body { padding: 28px 28px 32px; }

.bgn-modal-section { margin-bottom: 32px; }
.bgn-modal-section:last-of-type { margin-bottom: 0; }

.bgn-modal-section > h3 {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.bgn-modal-group { margin-bottom: 18px; }
.bgn-modal-group:last-child { margin-bottom: 0; }
.bgn-modal-group h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
}
.bgn-modal-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.bgn-modal-group ul li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text2);
  margin-bottom: 5px;
}
.bgn-modal-group ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--mint-d);
  font-weight: 700;
}

/* Tech grid */
.bgn-modal-techs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.bgn-modal-tech-col h4 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text);
  margin: 0 0 8px;
}
.bgn-tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.bgn-tech-tags span {
  font-size: 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text2);
  padding: 3px 8px;
}

/* CTA row */
.bgn-modal-cta {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  text-align: center;
}

/* Modal intro tagline */
.bgn-modal-tagline {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text2);
  margin: 0 0 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

/* Color top accent per modal */
#modal-build .bgn-modal-box { border-top: 3px solid #4aa8ff; }
#modal-grow .bgn-modal-box  { border-top: 3px solid var(--mint); }
#modal-run .bgn-modal-box   { border-top: 3px solid #9cabff; }

/* CTA buttons — one color per modal */
.btn-modal-build {
  background: rgba(74, 168, 255, .1);
  color: #4aa8ff;
  border: 1px solid rgba(74, 168, 255, .4);
  font-weight: 600;
}
.btn-modal-build:hover { background: #4aa8ff; color: #0d1520; border-color: #4aa8ff; }

.btn-modal-run {
  background: rgba(156, 171, 255, .1);
  color: #9cabff;
  border: 1px solid rgba(156, 171, 255, .4);
  font-weight: 600;
}
.btn-modal-run:hover { background: #9cabff; color: #0d1520; border-color: #9cabff; }

/* Responsive */
@media (max-width: 640px) {
  .bgn-modal { padding: 12px; }
  .bgn-modal-head { padding: 18px 20px 16px; }
  .bgn-modal-body { padding: 20px; }
  .bgn-modal-techs { grid-template-columns: 1fr; }
  .bgn-closing { padding: 24px 20px; }
}

/* ═══════════════════════════════════════
   LANGUAGE SWITCHER
   ═══════════════════════════════════════ */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border, rgba(77,219,177,.2));
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.lang-switch-btn {
  background: transparent;
  border: none;
  color: var(--muted, #8b95a3);
  font: 600 11px/1 'Inter', sans-serif;
  letter-spacing: .06em;
  padding: 6px 12px;
  cursor: pointer;
  transition: background .24s, color .24s;
  position: relative;
}
.lang-switch-btn + .lang-switch-btn {
  border-left: 1px solid var(--border, rgba(77,219,177,.2));
}
.lang-switch-btn.active {
  background: var(--mint, #4DDBB1);
  color: var(--bg, #fff);
  font-weight: 700;
}
.lang-switch-btn:hover:not(.active) {
  background: rgba(77,219,177,.08);
  color: var(--mint, #4DDBB1);
}

/* Topbar switcher */
.contact-topbar-in .lang-switcher {
  margin-left: 16px;
}

/* Header switcher */
.lang-switcher-header {
  margin-right: 12px;
}

/* Mobile menu switcher */
.lang-switcher-mobile {
  margin-top: 16px;
  justify-content: center;
  width: fit-content;
  align-self: center;
}
.lang-switcher-mobile .lang-switch-btn {
  padding: 10px 20px;
  font-size: 13px;
}

@media (max-width: 720px) {
  .contact-topbar-in .lang-switcher { display: none; }
  .lang-switcher-header { display: none; }
}