:root {
      --bg: #08080F;
      --bg2: #0D0D18;
      --bg3: #12121F;
      --gold: #C9A227;
      --gold2: #E8BF45;
      --gold3: #F5D87A;
      --gold-light: rgba(201, 162, 39, .09);
      --gold-mid: rgba(201, 162, 39, .16);
      --gold-glow: rgba(201, 162, 39, .30);
      --gold-border: rgba(201, 162, 39, .22);
      --white: #F8F8F6;
      --muted: rgba(248, 248, 246, .58);
      --muted2: rgba(248, 248, 246, .32);
      --border: rgba(255, 255, 255, .08);
      --border2: rgba(200, 160, 32, 0.22);
      --surface: rgba(255, 255, 255, .032);
      --surface2: rgba(255, 255, 255, .055);
      --radius-sm: 10px;
      --radius-md: 16px;
      --radius-lg: 20px;
      --pad: max(5%, calc((100% - 1200px)/2 + 5%));
      --ffd: 'DM Sans', sans-serif;
      --ff: 'Inter', sans-serif;
      --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
      --ease-spring: cubic-bezier(.175, .885, .32, 1.275);
      --ease-smooth: cubic-bezier(.4, 0, .2, 1);
      --transition-base: .3s var(--ease-smooth);
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      background: var(--bg);
      color: var(--white);
      font-family: var(--ff);
      font-size: 16px;
      line-height: 1.6;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }

    /* Noise texture overlay */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
      opacity: 0.025;
      pointer-events: none;
      z-index: 9999;
    }

    /* PROGRESS BAR */
    #progress {
      position: fixed;
      top: 0;
      left: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--gold), var(--gold2), var(--gold3));
      z-index: 10000;
      transition: width .1s;
      box-shadow: 0 0 10px var(--gold-glow), 0 0 4px var(--gold);
    }

    /* NAV */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      padding: 0 var(--pad);
      height: 68px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      background: rgba(9, 9, 12, 0.72);
      border-bottom: 1px solid var(--border);
      transition: background .4s var(--ease-smooth), box-shadow .4s var(--ease-smooth);
    }

    nav.scrolled {
      background: rgba(9, 9, 12, 0.96);
      box-shadow: 0 1px 0 rgba(255, 255, 255, .05), 0 4px 20px rgba(0, 0, 0, .3);
    }

    .nav-logo {
      display: inline-flex;
      align-items: center;
      gap: 0;
      text-decoration: none;
      position: relative;
    }

    /* Fox mascot */
    .nav-fox {
      width: 46px;
      height: 46px;
      object-fit: contain;
      object-position: center;
      display: block;
      flex-shrink: 0;
      /* Suppression du fond noir — rognage serré sur le renard */
      filter: drop-shadow(0 2px 10px rgba(200, 160, 32, .35));
      transform: translateX(4px) scaleX(-1);
      /* orienté vers le texte */
      transition:
        transform .4s cubic-bezier(.175, .885, .32, 1.275),
        filter .35s ease;
      will-change: transform;
    }

    .nav-logo:hover .nav-fox {
      transform: translateX(2px) scaleX(-1) translateY(-2px) rotate(-6deg);
      filter: drop-shadow(0 6px 18px rgba(200, 160, 32, .55));
    }

    /* Texte "Velixio" */
    .nav-logo-text {
      font-family: var(--ffd);
      font-size: 1.42rem;
      font-weight: 900;
      letter-spacing: -0.07em;
      color: var(--white);
      line-height: 1;
      position: relative;
      /* Léger décalage pour aligner optiquement avec le corps du renard */
      top: 1px;
    }

    .nav-logo-accent {
      color: var(--gold);
    }

    /* Hover : shimmer doré sur le texte */
    .nav-logo:hover .nav-logo-text {
      background: linear-gradient(90deg, var(--white) 40%, var(--gold2) 70%, var(--white) 100%);
      background-size: 200% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: logoShimmer .6s ease forwards;
    }

    @keyframes logoShimmer {
      from {
        background-position: 100% center;
      }

      to {
        background-position: 0% center;
      }
    }

    .nav-links {
      display: flex;
      gap: 2rem;
      list-style: none;
    }

    .nav-links a {
      font-size: .82rem;
      font-weight: 500;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted);
      text-decoration: none;
      transition: color .2s;
    }

    .nav-links a:hover {
      color: var(--white);
    }

    .nav-cta {
      display: flex;
      align-items: center;
      gap: .5rem;
      padding: .55rem 1.4rem;
      background: var(--gold);
      color: #000;
      font-family: var(--ffd);
      font-size: .85rem;
      font-weight: 800;
      border-radius: 8px;
      text-decoration: none;
      transition: all .2s;
      letter-spacing: -.01em;
    }

    .nav-cta:hover {
      background: var(--gold2);
      transform: translateY(-1px);
    }

    /* HERO */
    #hero {
      min-height: 100vh;
      padding: 120px var(--pad) 80px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .hero-grid {
      position: absolute;
      inset: 0;
      background-image: linear-gradient(rgba(200, 160, 32, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200, 160, 32, .04) 1px, transparent 1px);
      background-size: 60px 60px;
      mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent);
    }

    .hero-orb1 {
      position: absolute;
      top: -20%;
      right: -10%;
      width: 650px;
      height: 650px;
      border-radius: 50%;
      background: radial-gradient(circle at 40% 40%, rgba(200, 160, 32, .15), rgba(232, 191, 69, .06) 45%, transparent 70%);
      filter: blur(50px);
    }

    .hero-orb2 {
      position: absolute;
      bottom: -15%;
      left: -12%;
      width: 480px;
      height: 480px;
      border-radius: 50%;
      background: radial-gradient(circle at 60% 60%, rgba(200, 160, 32, .09), transparent 65%);
      filter: blur(70px);
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      padding: .45rem 1rem;
      background: rgba(200, 160, 32, 0.08);
      border: 1px solid rgba(200, 160, 32, 0.2);
      border-radius: 50px;
      font-size: .75rem;
      font-weight: 600;
      color: var(--gold2);
      letter-spacing: .1em;
      text-transform: uppercase;
      margin-bottom: 1.5rem;
      width: fit-content;
      backdrop-filter: blur(8px);
    }

    .hero-badge::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--gold);
      animation: pulse 2s infinite;
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .4
      }
    }

    .hero-title {
      font-family: var(--ffd);
      font-size: clamp(2.8rem, 6.5vw, 5.2rem);
      font-weight: 900;
      line-height: .96;
      letter-spacing: -0.045em;
      color: var(--white);
      margin-bottom: 1.5rem;
      max-width: 820px;
    }

    .hero-title .line-gold {
      display: block;
    }

    .hero-sub {
      font-size: 1.1rem;
      color: var(--muted);
      max-width: 500px;
      line-height: 1.7;
      margin-bottom: 2.5rem;
    }

    .hero-actions {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      margin-bottom: 4rem;
    }

    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      padding: .9rem 2rem;
      background: var(--gold);
      color: #000;
      font-family: var(--ffd);
      font-size: .95rem;
      font-weight: 800;
      border-radius: var(--radius-sm);
      text-decoration: none;
      transition: background .25s, transform .35s var(--ease-spring), box-shadow .35s;
      letter-spacing: -.01em;
      will-change: transform;
    }

    .btn-primary:hover {
      background: var(--gold2);
      transform: translateY(-2px);
      box-shadow: 0 12px 40px var(--gold-glow);
    }

    .btn-secondary {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      padding: .9rem 2rem;
      background: transparent;
      color: var(--white);
      font-family: var(--ffd);
      font-size: .95rem;
      font-weight: 600;
      border-radius: var(--radius-sm);
      border: 1px solid rgba(255, 255, 255, 0.12);
      text-decoration: none;
      cursor: pointer;
      transition: border-color .25s, color .25s, background .25s, transform .35s var(--ease-spring);
      will-change: transform;
    }

    .btn-secondary:hover {
      border-color: var(--gold2);
      color: var(--gold2);
      background: rgba(200, 160, 32, 0.06);
    }

    .hero-stats {
      display: flex;
      gap: 3rem;
      flex-wrap: wrap;
    }

    .stat-item {}

    .stat-num {
      font-family: var(--ffd);
      font-size: 2.2rem;
      font-weight: 900;
      color: var(--white);
      letter-spacing: -.03em;
      line-height: 1;
    }

    .stat-num span {
      color: var(--gold);
    }

    .stat-label {
      font-size: .78rem;
      color: var(--muted2);
      margin-top: .2rem;
      text-transform: uppercase;
      letter-spacing: .1em;
    }

    /* CLIENTS MARQUEE */
    .marquee-section {
      padding: 2rem 0;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      overflow: hidden;
      background: var(--bg2);
    }

    .marquee-label {
      text-align: center;
      font-size: .7rem;
      text-transform: uppercase;
      letter-spacing: .2em;
      color: var(--muted2);
      margin-bottom: 1.5rem;
    }

    .marquee-track {
      display: flex;
      gap: 3rem;
      width: max-content;
      animation: marquee 28s linear infinite;
    }

    .marquee-track:hover {
      animation-play-state: running;
    }

    .marquee-item {
      display: flex;
      align-items: center;
      gap: .7rem;
      padding: .5rem 1.5rem;
      background: rgba(255, 255, 255, .04);
      border: none;
      border-radius: 50px;
      white-space: nowrap;
      font-size: .85rem;
      color: var(--muted);
      font-weight: 500;
    }

    .marquee-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--gold);
    }

    @keyframes marquee {
      0% {
        transform: translateX(0)
      }

      100% {
        transform: translateX(-50%)
      }
    }

    /* SECTIONS */
    section {
      padding: 7rem var(--pad);
      position: relative;
      overflow: visible;
    }

    .section-label {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 1rem;
      opacity: .9;
    }

    .section-label::before {
      content: '◆';
      font-size: .55rem;
      opacity: .7;
    }

    .section-title {
      font-family: var(--ffd);
      font-size: clamp(2rem, 4vw, 3.1rem);
      font-weight: 900;
      letter-spacing: -.045em;
      color: var(--white);
      line-height: 1.06;
      margin-bottom: 1rem;
    }

    .section-title .g {
      background: linear-gradient(90deg, var(--gold), var(--gold2));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .section-sub {
      font-size: .95rem;
      color: var(--muted);
      max-width: 520px;
      line-height: 1.8;
    }

    /* SERVICES */
    #services {
      background: var(--bg2);
      overflow: visible;
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      margin-top: 4rem;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
    }

    .service-card {
      padding: 2.5rem;
      background: var(--bg2);
      transition: background .35s var(--ease-smooth);
      position: relative;
      overflow: hidden;
    }

    .service-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 0%, rgba(200, 160, 32, .09), transparent 65%);
      opacity: 0;
      transition: opacity .4s var(--ease-smooth);
    }

    .service-card:hover::after {
      opacity: 1;
    }

    .service-card:hover .svc-icon {
      background: var(--gold);
      color: #000;
    }

    .service-sep {
      border-right: 1px solid var(--border);
    }

    .service-sep-b {
      border-bottom: 1px solid var(--border);
    }

    .svc-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: rgba(200, 160, 32, 0.08);
      border: 1px solid rgba(200, 160, 32, 0.15);
      color: var(--gold);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      margin-bottom: 1.2rem;
      transition: all .35s var(--ease-spring);
      position: relative;
      z-index: 1;
    }

    .svc-name {
      font-family: var(--ffd);
      font-size: 1.05rem;
      font-weight: 800;
      color: var(--white);
      margin-bottom: .5rem;
      letter-spacing: -.02em;
      position: relative;
      z-index: 1;
    }

    .svc-desc {
      font-size: .82rem;
      color: var(--muted);
      line-height: 1.7;
      position: relative;
      z-index: 1;
    }

    /* PORTFOLIO */
    .portfolio-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 3rem;
      flex-wrap: wrap;
      gap: 1rem;
    }

    .portfolio-tabs {
      display: flex;
      gap: .5rem;
      flex-wrap: wrap;
    }

    .ptab {
      padding: .45rem 1.1rem;
      border-radius: 50px;
      font-size: .78rem;
      font-weight: 600;
      background: rgba(255, 255, 255, .05);
      border: 1px solid var(--border);
      color: var(--muted);
      cursor: pointer;
      transition: all .2s;
    }

    .ptab.active,
    .ptab:hover {
      background: var(--gold);
      color: #000;
      border-color: var(--gold);
    }

    .portfolio-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
    }

    .portfolio-card {
      border-radius: var(--radius-md);
      overflow: hidden;
      border: 1px solid var(--border);
      background: var(--bg2);
      cursor: pointer;
      transition: transform .4s var(--ease-spring), box-shadow .4s var(--ease-smooth), border-color .3s;
    }

    .portfolio-card:hover {
      /* handled by v15 */
    }

    .portfolio-card.large {
      grid-row: span 2;
    }

    .portfolio-preview {
      height: 220px;
      overflow: hidden;
      position: relative;
    }

    .portfolio-card.large .portfolio-preview {
      height: 460px;
    }

    .portfolio-preview iframe {
      width: 100%;
      height: 100%;
      border: none;
      pointer-events: none;
      transform-origin: top left;
    }

    .portfolio-preview-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, .7));
    }

    .portfolio-info {
      padding: 1.5rem;
    }

    .portfolio-tag {
      display: inline-block;
      padding: .2rem .7rem;
      background: var(--gold-light);
      border: none;
      border-radius: 50px;
      font-size: .7rem;
      font-weight: 700;
      color: var(--gold);
      letter-spacing: .1em;
      text-transform: uppercase;
      margin-bottom: .6rem;
    }

    .portfolio-name {
      font-family: var(--ffd);
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--white);
      letter-spacing: -.02em;
    }

    .portfolio-desc {
      font-size: .8rem;
      color: var(--muted);
      margin-top: .3rem;
    }

    /* WHY */
    #why {
      background: var(--bg2);
    }

    .why-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: center;
      margin-top: 4rem;
    }

    .why-items {
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }

    .why-item {
      display: flex;
      gap: 1.2rem;
    }

    .why-icon {
      flex-shrink: 0;
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: var(--gold-light);
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      color: var(--gold);
    }

    .why-text h4 {
      font-family: var(--ffd);
      font-size: 1rem;
      font-weight: 800;
      color: var(--white);
      letter-spacing: -.02em;
      margin-bottom: .3rem;
    }

    .why-text p {
      font-size: .85rem;
      color: var(--muted);
      line-height: 1.7;
    }

    .why-visual {
      position: relative;
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid var(--border);
      background: var(--bg);
      padding: 2rem;
    }

    .why-visual::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 70% 30%, var(--gold-light), transparent 70%);
    }

    .metrics-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      position: relative;
    }

    .metric-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 1.5rem;
      transition: transform .4s var(--ease-spring), box-shadow .4s;
    }

    .metric-num {
      font-family: var(--ffd);
      font-size: 2.5rem;
      font-weight: 900;
      color: var(--white);
      letter-spacing: -.04em;
      line-height: 1;
    }

    .metric-num .g {
      color: var(--gold);
    }

    .metric-label {
      font-size: .75rem;
      color: var(--muted);
      margin-top: .4rem;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .metric-card.featured {
      background: linear-gradient(135deg, var(--gold) 0%, var(--gold2) 100%);
      border-color: transparent;
    }

    .metric-card.featured .metric-num,
    .metric-card.featured .metric-label {
      color: #000;
    }

    /* HOW IT WORKS */
    .how-steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
      margin-top: 4rem;
      position: relative;
    }

    .how-steps::before {
      content: '';
      position: absolute;
      top: 40px;
      left: calc(33% - 20px);
      right: calc(33% - 20px);
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
    }

    .step-card {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 2.5rem 2rem;
      text-align: center;
      position: relative;
      overflow: hidden;
      transition: border-color .3s, transform .4s var(--ease-spring), box-shadow .4s;
      will-change: transform;
    }

    .step-card:hover {
      border-color: var(--gold-border);
      transform: translateY(-5px);
    }

    .step-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 0%, rgba(200, 160, 32, .08), transparent 65%);
      opacity: 0;
      transition: opacity .4s var(--ease-smooth);
    }

    .step-card:hover::before {
      opacity: 1;
    }

    .step-num {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--gold);
      color: #000;
      font-family: var(--ffd);
      font-size: 1.3rem;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1.5rem;
      position: relative;
      z-index: 1;
    }

    .step-emoji {
      font-size: 3rem;
      display: block;
      margin-bottom: 1rem;
      position: relative;
      z-index: 1;
    }

    .step-title {
      font-family: var(--ffd);
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--white);
      letter-spacing: -.02em;
      margin-bottom: .7rem;
      position: relative;
      z-index: 1;
    }

    .step-desc {
      font-size: .82rem;
      color: var(--muted);
      line-height: 1.7;
      position: relative;
      z-index: 1;
    }

    .step-tags {
      display: flex;
      flex-wrap: wrap;
      gap: .4rem;
      justify-content: center;
      margin-top: 1rem;
      position: relative;
      z-index: 1;
    }

    .step-tag {
      padding: .2rem .7rem;
      background: var(--gold-light);
      border: none;
      border-radius: 50px;
      font-size: .7rem;
      color: var(--gold);
      font-weight: 600;
    }

    /* PRICING */
    #pricing {
      background: var(--bg2);
    }

    .pricing-intro {
      background: linear-gradient(135deg, rgba(200, 160, 32, .12), rgba(200, 160, 32, .04));
      border: none;
      border-radius: 20px;
      padding: 3rem;
      margin-bottom: 3rem;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 2rem;
      align-items: center;
    }

    .pricing-intro h3 {
      font-family: var(--ffd);
      font-size: clamp(1.5rem, 2.5vw, 2rem);
      font-weight: 900;
      color: var(--white);
      letter-spacing: -.04em;
      margin-bottom: .5rem;
    }

    .pricing-intro p {
      font-size: .9rem;
      color: var(--muted);
    }

    .pricing-badges {
      display: flex;
      flex-direction: column;
      gap: .5rem;
    }

    .pbadge {
      display: flex;
      align-items: center;
      gap: .5rem;
      padding: .5rem 1rem;
      background: rgba(255, 255, 255, .05);
      border: 1px solid var(--border);
      border-radius: 50px;
      font-size: .8rem;
      color: var(--white);
      white-space: nowrap;
    }

    .pbadge .ico {
      font-size: .9rem;
    }

    .ptoggle {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      margin-bottom: 2.5rem;
      font-size: .85rem;
      color: var(--muted);
    }

    .toggle-btn {
      width: 48px;
      height: 26px;
      border-radius: 13px;
      background: rgba(255, 255, 255, .1);
      border: 1px solid var(--border);
      position: relative;
      cursor: pointer;
      transition: background .3s;
    }

    .toggle-btn.on {
      background: var(--gold);
      border-color: var(--gold);
    }

    .toggle-knob {
      position: absolute;
      top: 3px;
      left: 3px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--white);
      transition: transform .3s;
    }

    .toggle-btn.on .toggle-knob {
      transform: translateX(22px);
    }

    .save-badge {
      background: var(--gold);
      color: #000;
      font-size: .7rem;
      font-weight: 800;
      padding: .2rem .6rem;
      border-radius: 50px;
    }

    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
      margin-bottom: 3rem;
    }

    .price-card {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 2rem;
      display: flex;
      flex-direction: column;
      transition: border-color .3s, transform .4s var(--ease-spring), box-shadow .4s;
      position: relative;
      overflow: hidden;
      will-change: transform;
    }

    .price-card:hover {
      border-color: rgba(255, 255, 255, .12);
      transform: translateY(-5px);
      box-shadow: 0 22px 55px rgba(0, 0, 0, .35);
    }

    .price-card.featured {
      background: linear-gradient(160deg, rgba(200, 160, 32, .1), rgba(200, 160, 32, .03) 60%);
      border-color: rgba(200, 160, 32, .35);
    }

    .price-card.featured:hover {
      border-color: rgba(200, 160, 32, .55);
    }

    .price-card.featured::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent 5%, var(--gold) 50%, transparent 95%);
    }

    .price-pop {
      position: absolute;
      top: 1rem;
      right: 1rem;
      background: var(--gold);
      color: #000;
      font-size: .65rem;
      font-weight: 800;
      padding: .25rem .65rem;
      border-radius: 50px;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .price-name {
      font-family: var(--ffd);
      font-size: 1rem;
      font-weight: 700;
      color: var(--muted);
      margin-bottom: 1rem;
      text-transform: uppercase;
      letter-spacing: .1em;
    }

    .price-amount {
      display: flex;
      align-items: baseline;
      gap: .3rem;
      margin-bottom: .3rem;
    }

    .price-cur {
      font-size: .85rem;
      color: var(--muted);
      font-weight: 500;
    }

    .price-num {
      font-family: var(--ffd);
      font-size: 2.2rem;
      font-weight: 900;
      color: var(--white);
      letter-spacing: -.04em;
      line-height: 1;
    }

    .price-period {
      font-size: .78rem;
      color: var(--muted2);
      margin-bottom: 1.2rem;
    }

    .price-sep {
      height: 1px;
      background: var(--border);
      margin: 1.2rem 0;
    }

    .price-desc {
      font-size: .82rem;
      color: var(--muted);
      margin-bottom: 1.5rem;
      line-height: 1.6;
      flex-grow: 1;
    }

    .price-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: .6rem;
      margin-bottom: 1.8rem;
      flex-grow: 1;
    }

    .price-list li {
      display: flex;
      align-items: flex-start;
      gap: .6rem;
      font-size: .8rem;
      color: var(--muted);
      line-height: 1.4;
    }

    .price-list li::before {
      content: '';
      color: var(--gold);
      font-weight: 700;
      flex-shrink: 0;
      margin-top: .05rem;
    }

    .price-cta {
      display: block;
      padding: .8rem;
      text-align: center;
      border-radius: 10px;
      font-family: var(--ffd);
      font-size: .85rem;
      font-weight: 700;
      text-decoration: none;
      transition: all .2s;
      background: rgba(255, 255, 255, .06);
      border: 1px solid var(--border);
      color: var(--white);
    }

    .price-cta:hover {
      background: rgba(255, 255, 255, .1);
    }

    .price-cta.gold {
      background: var(--gold);
      color: #000;
      border-color: var(--gold);
    }

    .price-cta.gold:hover {
      background: var(--gold2);
    }

    .pricing-block-label {
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 1.5rem;
      display: flex;
      align-items: center;
      gap: .5rem;
    }

    .pricing-block-label::before {
      content: '';
      flex-grow: 1;
      height: 1px;
      background: var(--border);
    }

    .pricing-block-label::after {
      content: '';
      flex-grow: 1;
      height: 1px;
      background: var(--border);
    }

    .maint-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
    }

    /* TESTIMONIALS */
    .testi-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      margin-top: 4rem;
    }

    .testi-card {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 1.8rem;
      transition: border-color .3s, transform .4s var(--ease-spring), box-shadow .4s;
      will-change: transform;
    }

    .testi-card:hover {
      border-color: var(--gold-border);
      transform: translateY(-5px);
      box-shadow: 0 20px 55px rgba(0, 0, 0, .35);
    }

    .testi-stars {
      color: var(--gold);
      font-size: .9rem;
      margin-bottom: .8rem;
      letter-spacing: .05em;
    }

    .testi-text {
      font-size: .88rem;
      color: var(--muted);
      line-height: 1.75;
      margin-bottom: 1.5rem;
      font-style: italic;
    }

    .testi-author {
      display: flex;
      align-items: center;
      gap: .75rem;
    }

    .testi-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(200, 160, 32, .1);
      border: 1px solid rgba(200, 160, 32, .18);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      transition: all .35s var(--ease-spring);
    }

    .testi-card:hover .testi-avatar {
      background: var(--gold);
      border-color: var(--gold);
      transform: scale(1.1);
    }

    .testi-name {
      font-family: var(--ffd);
      font-size: .9rem;
      font-weight: 700;
      color: var(--white);
    }

    .testi-role {
      font-size: .75rem;
      color: var(--muted);
    }

    /* FAQ */
    #faq {
      background: var(--bg2);
    }

    .faq-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin-top: 3rem;
    }

    .faq-item {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      overflow: hidden;
      transition: border-color .3s, box-shadow .3s;
    }

    .faq-item:hover {
      border-color: rgba(255, 255, 255, .1);
    }

    .faq-item.open {
      border-color: var(--gold-border);
      box-shadow: 0 6px 28px rgba(200, 160, 32, .07);
    }

    .faq-q {
      padding: 1.4rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      cursor: pointer;
      font-family: var(--ffd);
      font-size: .9rem;
      font-weight: 700;
      color: var(--white);
      letter-spacing: -.01em;
      transition: color .25s;
      user-select: none;
    }

    .faq-item.open .faq-q {
      color: var(--gold2);
    }

    .faq-arrow {
      color: var(--gold);
      font-size: 1rem;
      transition: transform .4s var(--ease-spring), color .25s;
      flex-shrink: 0;
    }

    .faq-item.open .faq-arrow {
      transform: rotate(45deg);
      color: var(--gold2);
    }

    .faq-a {
      padding: 0 1.4rem 1.4rem;
      font-size: .85rem;
      color: var(--muted);
      line-height: 1.8;
      display: none;
    }

    .faq-item.open .faq-a {
      display: block;
    }

    /* CTA SECTION */
    #cta {
      position: relative;
      overflow: hidden;
      text-align: center;
    }

    #cta::before {
      content: '';
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 700px;
      height: 450px;
      background: radial-gradient(ellipse at center, rgba(200, 160, 32, .14) 0%, rgba(200, 160, 32, .04) 45%, transparent 70%);
      filter: blur(35px);
      pointer-events: none;
    }

    .cta-box {
      position: relative;
      z-index: 1;
      max-width: 700px;
      margin: 0 auto;
    }

    .cta-emoji {
      font-size: 3.2rem;
      margin-bottom: 1.5rem;
      display: block;
    }

    .cta-title {
      font-family: var(--ffd);
      font-size: clamp(2.2rem, 5vw, 3.8rem);
      font-weight: 900;
      letter-spacing: -.045em;
      color: var(--white);
      margin-bottom: 1rem;
      line-height: 1;
    }

    .cta-title span {
      background: linear-gradient(90deg, var(--gold) 0%, var(--gold2) 40%, var(--gold3) 65%, var(--gold2) 100%);
      background-size: 200% 100%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: goldShimmer 8s ease-in-out infinite;
    }

    .cta-sub {
      font-size: .98rem;
      color: var(--muted);
      margin-bottom: 2.5rem;
      line-height: 1.7;
    }

    .cta-actions {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
    }

    /* CONTACT */
    #contact {
      background: var(--bg2);
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 5rem;
      align-items: start;
    }

    .contact-form {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 2.5rem;
    }

    .form-group {
      margin-bottom: 1.2rem;
    }

    .form-group label {
      display: block;
      font-size: .75rem;
      font-weight: 600;
      color: var(--muted2);
      margin-bottom: .45rem;
      letter-spacing: .07em;
      text-transform: uppercase;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
      width: 100%;
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: var(--radius-sm);
      padding: .85rem 1rem;
      color: var(--white);
      font-family: var(--ff);
      font-size: .9rem;
      outline: none;
      transition: border-color .2s;
      appearance: none;
    }

    .form-group select option,
    .form-group select optgroup {
      background: #1a1a2e;
      color: #ffffff;
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
      border-color: var(--gold);
    }

    .form-group select {
      cursor: pointer;
    }

    .form-group textarea {
      resize: vertical;
      min-height: 120px;
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    .form-submit {
      width: 100%;
      padding: 1rem;
      background: var(--gold);
      color: #000;
      font-family: var(--ffd);
      font-size: 1rem;
      font-weight: 800;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      transition: all .25s;
      letter-spacing: -.01em;
    }

    .form-submit:hover {
      background: var(--gold2);
      transform: translateY(-2px);
    }

    .contact-info h3 {
      font-family: var(--ffd);
      font-size: 2rem;
      font-weight: 900;
      color: var(--white);
      letter-spacing: -.04em;
      margin-bottom: 1.5rem;
      line-height: 1.1;
    }

    .contact-info h3 span {
      color: var(--gold);
    }

    .contact-points {
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
      margin-bottom: 2.5rem;
    }

    .contact-point {
      display: flex;
      gap: 1rem;
      align-items: flex-start;
    }

    .cp-icon {
      width: 42px;
      height: 42px;
      flex-shrink: 0;
      border-radius: 10px;
      background: rgba(200, 160, 32, .08);
      border: 1px solid rgba(200, 160, 32, .15);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      color: var(--gold);
      transition: all .3s var(--ease-spring);
    }

    .contact-point:hover .cp-icon {
      background: var(--gold);
      border-color: var(--gold);
      color: #000;
      transform: scale(1.08);
    }

    .cp-text .label {
      font-size: .72rem;
      color: var(--muted2);
      text-transform: uppercase;
      letter-spacing: .1em;
    }

    .cp-text .value {
      font-size: .9rem;
      color: var(--white);
      font-weight: 500;
      margin-top: .1rem;
    }

    .wa-btn {
      display: inline-flex;
      align-items: center;
      gap: .75rem;
      padding: 1rem 1.8rem;
      background: #25D366;
      color: #fff;
      font-family: var(--ffd);
      font-size: .95rem;
      font-weight: 800;
      border-radius: 12px;
      text-decoration: none;
      transition: all .25s;
    }

    .wa-btn:hover {
      background: #128C7E;
      transform: translateY(-2px);
      box-shadow: 0 12px 40px rgba(37, 211, 102, .3);
    }

    .wa-icon {
      font-size: 1.3rem;
    }

    .clocks {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      margin-top: 2rem;
    }

    .clock-item {
      background: rgba(255, 255, 255, .04);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 1rem;
      text-align: center;
    }

    .clock-time {
      font-family: var(--ffd);
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--white);
      letter-spacing: -.03em;
    }

    .clock-city {
      font-size: .72rem;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .1em;
      margin-top: .2rem;
    }

    /* FOOTER */
    footer {
      background: #06060A;
      border-top: 1px solid var(--border);
      border-radius: 32px 32px 0 0;
      padding: 4rem var(--pad) 2rem;
      position: relative;
    }

    footer::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 400px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(200, 160, 32, .3), transparent);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 4rem;
      margin-bottom: 3rem;
    }

    .footer-logo-text {
      font-family: var(--ffd);
      font-size: 1.8rem;
      font-weight: 900;
      letter-spacing: -.05em;
      color: var(--white);
      margin-bottom: .75rem;
    }

    .footer-logo-text span {
      color: var(--gold);
    }

    .footer-tagline {
      font-size: .85rem;
      color: var(--muted);
      line-height: 1.7;
      max-width: 280px;
      margin-bottom: 1.5rem;
    }

    .footer-social {
      display: flex;
      gap: .75rem;
    }

    .social-btn {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background: rgba(255, 255, 255, .05);
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      text-decoration: none;
      font-size: .9rem;
      transition: all .2s;
    }

    .social-btn:hover {
      background: var(--gold);
      color: #000;
      border-color: var(--gold);
    }

    .footer-col h5 {
      font-family: var(--ffd);
      font-size: .78rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .15em;
      color: var(--muted2);
      margin-bottom: 1rem;
    }

    .footer-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: .6rem;
    }

    .footer-links a {
      font-size: .85rem;
      color: var(--muted);
      text-decoration: none;
      transition: color .2s;
    }

    .footer-links a:hover {
      color: var(--gold);
    }

    .footer-bottom {
      padding-top: 2rem;
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
    }

    .footer-copy {
      font-size: .78rem;
      color: var(--muted2);
    }

    /* WHATSAPP FLOAT */
    .wa-float {
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      z-index: 999;
      width: 56px;
      height: 56px;
      background: #25D366;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.6rem;
      color: #fff;
      text-decoration: none;
      box-shadow: 0 6px 24px rgba(37, 211, 102, .35);
      transition: transform .35s var(--ease-spring), box-shadow .3s;
    }

    .wa-float:hover {
      transform: scale(1.08) translateY(-2px);
      box-shadow: 0 10px 35px rgba(37, 211, 102, .5);
    }

    /* Single pulse ring */
    .wa-float::after {
      content: '';
      position: absolute;
      inset: -6px;
      border-radius: 50%;
      border: 2px solid rgba(37, 211, 102, .28);
      animation: ring 2.4s ease-out infinite;
    }

    @keyframes ring {
      0% {
        transform: scale(.88);
        opacity: .6
      }

      100% {
        transform: scale(1.28);
        opacity: 0
      }
    }

    /* REVEAL — handled by the premium animations block below */

    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    /* ✦.✦✦.✦✦.✦ ENHANCED ANIMATIONS & INTERACTIONS ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */

    /* New Keyframes */
    @keyframes shimmer {
      0% {
        left: -100%;
      }

      100% {
        left: 120%;
      }
    }

    @keyframes glow-pulse {

      0%,
      100% {
        box-shadow: 0 0 5px rgba(200, 160, 32, 0.2);
      }

      50% {
        box-shadow: 0 0 20px rgba(200, 160, 32, 0.4), 0 0 40px rgba(200, 160, 32, 0.1);
      }
    }

    @keyframes orb-float-1 {

      0%,
      100% {
        transform: translate(0, 0) scale(1);
      }

      33% {
        transform: translate(20px, -14px) scale(1.03);
      }

      66% {
        transform: translate(-12px, 10px) scale(0.97);
      }
    }

    @keyframes orb-float-2 {

      0%,
      100% {
        transform: translate(0, 0) scale(1);
      }

      40% {
        transform: translate(-14px, 18px) scale(1.04);
      }

      70% {
        transform: translate(10px, -10px) scale(0.96);
      }
    }

    @keyframes gradient-text {

      0%,
      100% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }
    }

    @keyframes twinkle {

      0%,
      100% {
        opacity: 1;
        transform: scale(1);
      }

      50% {
        opacity: 0.7;
        transform: scale(1.2);
      }
    }

    @keyframes slide-up {
      from {
        opacity: 0;
        transform: translateY(30px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes border-glow {

      0%,
      100% {
        border-color: rgba(200, 160, 32, 0.2);
      }

      50% {
        border-color: rgba(200, 160, 32, 0.5);
      }
    }

    @keyframes float-badge {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-4px);
      }
    }

    @keyframes spin-slow {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    @keyframes hero-grid-pulse {

      0%,
      100% {
        opacity: .035;
      }

      50% {
        opacity: .065;
      }
    }

    @keyframes text-shimmer {
      0% {
        background-position: -200% center;
      }

      100% {
        background-position: 200% center;
      }
    }

    /*  Enhanced Nav  */
    .nav-links a {
      position: relative;
      padding-bottom: 4px;
    }

    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 1.5px;
      background: linear-gradient(90deg, var(--gold), var(--gold2));
      transition: width .35s var(--ease-smooth), left .35s var(--ease-smooth);
    }

    .nav-links a:hover::after {
      width: 100%;
      left: 0;
    }

    /* Nav CTA — shimmer only on hover, not looping */
    .nav-cta {
      position: relative;
      overflow: hidden;
    }

    .nav-cta::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 60%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
      transition: left .55s ease;
    }

    .nav-cta:hover::after {
      left: 140%;
    }

    /*  Enhanced Hero  */
    .hero-orb1 {
      animation: orb-float-1 18s ease-in-out infinite;
    }

    .hero-orb2 {
      animation: orb-float-2 22s ease-in-out infinite;
    }

    .hero-title .line-gold {
      background: linear-gradient(90deg, var(--gold) 0%, var(--gold2) 35%, var(--gold3) 55%, var(--gold2) 75%, var(--gold) 100%);
      background-size: 250% 100%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: gradient-text 7s ease infinite;
    }

    .hero-badge {
      animation: heroSlideDown .7s var(--ease-smooth) .2s both;
      backdrop-filter: blur(8px);
    }

    .hero-grid {
      animation: hero-grid-pulse 6s ease-in-out infinite;
    }

    .stat-num {
      transition: transform .3s cubic-bezier(.175, .885, .32, 1.275), color .3s;
    }

    .stat-item:hover .stat-num {
      transform: scale(1.12);
      color: var(--gold);
    }

    .stat-item {
      cursor: default;
      transition: transform .3s;
    }

    .stat-item:hover {
      transform: translateY(-3px);
    }

    /*  Enhanced Marquee  */
    .marquee-item {
      transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
    }

    .marquee-item:hover {
      background: transparent;
      border-color: var(--border);
      color: var(--muted);
      transform: none;
      box-shadow: none;
      cursor: default;
    }

    .marquee-dot {
      transition: transform .3s;
    }

    .marquee-item:hover .marquee-dot {
      transform: none;
      box-shadow: none;
    }

    /*  Enhanced Service Cards  */
    .service-card {
      transition: background .3s, transform .45s cubic-bezier(.175, .885, .32, 1.275), box-shadow .4s;
    }

    .service-card:hover {
      transform: none;
      box-shadow: none;
    }

    .svc-icon {
      transition: all .4s cubic-bezier(.175, .885, .32, 1.275);
    }

    .service-card:hover .svc-icon {
      transform: scale(1.18);
      box-shadow: 0 8px 20px rgba(200, 160, 32, .3);
    }

    .svc-name {
      transition: transform .3s, color .3s;
    }

    .service-card:hover .svc-name {
      transform: translateX(4px);
      color: var(--gold2);
    }

    /*  Enhanced Step Cards  */
    .step-card {
      transition: border-color .3s, transform .45s cubic-bezier(.175, .885, .32, 1.275), box-shadow .4s;
    }

    .step-card:hover {
      box-shadow: 0 24px 70px rgba(0, 0, 0, .3);
    }

    .step-num {
      transition: all .45s cubic-bezier(.175, .885, .32, 1.275);
    }

    .step-card:hover .step-num {
      transform: scale(1.18);
      box-shadow: 0 0 30px var(--gold-glow), 0 8px 20px rgba(200, 160, 32, .2);
    }

    .step-emoji {
      transition: transform .4s cubic-bezier(.175, .885, .32, 1.275);
    }

    .step-card:hover .step-emoji {
      transform: scale(1.25) translateY(-5px);
    }

    .step-tag {
      transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
    }

    .step-card:hover .step-tag {
      background: var(--gold);
      color: #000;
      border-color: var(--gold);
      transform: translateY(-1px);
    }

    /*  Enhanced Pricing  */
    .price-card {
      transition: border-color .3s, transform .45s cubic-bezier(.175, .885, .32, 1.275), box-shadow .5s;
    }

    .price-card:hover {
      box-shadow: 0 32px 90px rgba(0, 0, 0, .4);
    }

    .price-card.featured {
      animation: border-glow 3s ease-in-out infinite;
    }

    .price-pop {
      animation: float-badge 3s ease-in-out infinite;
    }

    .price-num {
      transition: color .3s, transform .3s;
    }

    .price-card:hover .price-num {
      color: var(--gold2);
      transform: scale(1.05);
    }

    .price-cta {
      position: relative;
      overflow: hidden;
      transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
    }

    .price-cta::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 60%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .15), transparent);
      transition: left .6s ease;
    }

    .price-cta:hover::before {
      left: 140%;
    }

    .price-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, .2);
    }

    /*  Enhanced Testimonials  */
    .testi-card {
      transition: border-color .3s, transform .45s cubic-bezier(.175, .885, .32, 1.275), box-shadow .4s;
    }

    .testi-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 28px 70px rgba(0, 0, 0, .35);
      border-color: var(--border2);
    }

    .testi-stars {
      transition: transform .3s;
    }

    .testi-card:hover .testi-stars {
      animation: twinkle .8s ease-in-out;
    }

    .testi-avatar {
      transition: all .4s cubic-bezier(.175, .885, .32, 1.275);
    }

    .testi-card:hover .testi-avatar {
      background: var(--gold);
      border-color: var(--gold);
      transform: scale(1.15);
    }

    .testi-text {
      transition: color .3s;
    }

    .testi-card:hover .testi-text {
      color: rgba(250, 250, 248, 0.75);
    }

    /*  Enhanced FAQ  */
    .faq-a {
      display: block !important;
      max-height: 0;
      overflow: hidden;
      padding-top: 0;
      padding-bottom: 0;
      transition: max-height .45s cubic-bezier(.4, 0, .2, 1), padding .35s cubic-bezier(.4, 0, .2, 1), opacity .3s;
      opacity: 0;
    }

    .faq-item.open .faq-a {
      max-height: 250px;
      padding-top: 0;
      padding-bottom: 1.4rem;
      opacity: 1;
    }

    .faq-q {
      transition: color .3s, background .3s;
    }

    .faq-q:hover {
      color: var(--gold2);
    }

    .faq-arrow {
      transition: transform .45s cubic-bezier(.175, .885, .32, 1.275), color .3s;
    }

    .faq-item.open .faq-arrow {
      color: var(--gold2);
    }

    .faq-item {
      transition: border-color .3s, box-shadow .3s;
    }

    .faq-item.open {
      border-color: var(--border2);
      box-shadow: 0 8px 30px rgba(200, 160, 32, .08);
    }

    /*  Enhanced Why Section  */
    .why-item {
      transition: transform .35s cubic-bezier(.175, .885, .32, 1.275), background .3s;
      padding: .8rem;
      border-radius: 12px;
    }

    .why-item:hover {
      transform: translateX(10px);
      background: rgba(200, 160, 32, .06);
    }

    .why-icon {
      transition: all .4s cubic-bezier(.175, .885, .32, 1.275);
    }

    .why-item:hover .why-icon {
      background: var(--gold);
      color: #000;
      border-color: var(--gold);
      transform: scale(1.12);
      box-shadow: 0 8px 20px rgba(200, 160, 32, .25);
    }

    .metric-card {
      transition: transform .45s cubic-bezier(.175, .885, .32, 1.275), box-shadow .4s;
    }

    .metric-card:hover {
      transform: translateY(-8px) scale(1.03);
      box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
    }

    /*  Enhanced CTA  */
    #cta::before {
      animation: orb-float-1 8s ease-in-out infinite;
    }

    #cta::after {
      content: '';
      position: absolute;
      top: 30%;
      left: 25%;
      width: 350px;
      height: 300px;
      background: radial-gradient(ellipse, rgba(200, 160, 32, .08), transparent 70%);
      filter: blur(45px);
      animation: orb-float-2 10s ease-in-out infinite;
      pointer-events: none;
    }

    .cta-emoji {
      animation: float-badge 3s ease-in-out infinite;
      display: inline-block;
    }

    /*  Enhanced Buttons  */
    .btn-primary {
      position: relative;
      overflow: hidden;
      transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
    }

    .btn-primary::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 50%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
      transition: left .5s ease;
    }

    .btn-primary:hover::after {
      left: 140%;
    }

    .btn-primary:hover {
      transform: translateY(-3px) scale(1.02);
      box-shadow: 0 16px 50px var(--gold-glow);
    }

    .btn-secondary {
      transition: all .35s cubic-bezier(.175, .885, .32, 1.275);
    }

    .btn-secondary:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 35px rgba(200, 160, 32, .12);
      background: rgba(200, 160, 32, .08);
    }

    /*  Enhanced Form  */
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px rgba(200, 160, 32, .12), 0 0 25px rgba(200, 160, 32, .06);
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
      transition: border-color .3s, box-shadow .3s, background .3s;
    }

    .form-group input:hover,
    .form-group select:hover,
    .form-group textarea:hover {
      border-color: rgba(255, 255, 255, .15);
      background: rgba(255, 255, 255, .06);
    }

    .form-submit {
      position: relative;
      overflow: hidden;
      background: var(--gold);
      transition: background .25s, transform .35s var(--ease-spring), box-shadow .35s;
      will-change: transform;
    }

    .form-submit::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 55%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
      transition: left .55s ease;
    }

    .form-submit:hover::before {
      left: 140%;
    }

    .form-submit:hover {
      background: var(--gold2);
      transform: translateY(-2px);
      box-shadow: 0 12px 40px rgba(200, 160, 32, .35);
    }

    /*  Enhanced Contact Points  */
    .contact-point {
      transition: transform .35s cubic-bezier(.175, .885, .32, 1.275), background .3s;
      padding: .6rem;
      border-radius: 10px;
    }

    .contact-point:hover {
      transform: translateX(8px);
      background: rgba(200, 160, 32, .06);
    }

    .cp-icon {
      transition: all .35s cubic-bezier(.175, .885, .32, 1.275);
    }

    .contact-point:hover .cp-icon {
      background: var(--gold);
      color: #000;
      border-color: var(--gold);
      transform: scale(1.1);
    }

    /*  Enhanced Footer  */
    .footer-links a {
      position: relative;
      padding-bottom: 2px;
    }

    .footer-links a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 1px;
      background: var(--gold);
      transition: width .35s cubic-bezier(.4, 0, .2, 1);
    }

    .footer-links a:hover::after {
      width: 100%;
    }

    .social-btn {
      transition: all .35s cubic-bezier(.175, .885, .32, 1.275);
    }

    .social-btn:hover {
      transform: translateY(-4px) scale(1.12);
      box-shadow: 0 10px 30px rgba(200, 160, 32, .3);
    }

    /*  WhatsApp — cleaned up  */
    .wa-float::before {
      display: none;
    }

    /* remove duplicate ring */
    .wa-float .wa-ring {
      animation-play-state: paused;
    }

    /*  Enhanced Clock Items  */
    .clock-item {
      transition: all .35s cubic-bezier(.175, .885, .32, 1.275);
    }

    .clock-item:hover {
      background: var(--gold-light);
      border-color: var(--border2);
      transform: translateY(-4px) scale(1.03);
      box-shadow: 0 8px 25px rgba(200, 160, 32, .12);
    }

    /*  Enhanced WhatsApp Button (in contact)  */
    .wa-btn {
      position: relative;
      overflow: hidden;
    }

    .wa-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 50%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
      transition: left .5s;
    }

    .wa-btn:hover::before {
      left: 140%;
    }

    /*  Pricing Badges  */
    .pbadge {
      transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
    }

    .pbadge:hover {
      background: var(--gold-light);
      border-color: var(--border2);
      transform: translateX(6px);
      box-shadow: 0 4px 15px rgba(200, 160, 32, .1);
    }

    /*  Progress Bar — static gradient, glow already in base style  */

    /*  Pricing Toggle Enhanced  */
    .toggle-btn {
      transition: background .35s, box-shadow .3s;
    }

    .toggle-btn.on {
      box-shadow: 0 0 15px rgba(200, 160, 32, .3);
    }

    .toggle-btn:hover {
      box-shadow: 0 0 15px rgba(200, 160, 32, .2);
    }

    /*  Section Labels Enhanced  */
    .section-label::before {
      transition: transform .3s;
    }

    .section-label:hover::before {
      transform: rotate(180deg);
    }

    /*  Reveal Variants  */
    .rv-left {
      opacity: 0;
      transform: translate3d(-32px, 0, 0);
      transition: opacity .65s var(--ease-smooth), transform .65s var(--ease-out-expo);
      will-change: transform, opacity;
    }

    .rv-left.in {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    .rv-right {
      opacity: 0;
      transform: translate3d(32px, 0, 0);
      transition: opacity .65s var(--ease-smooth), transform .65s var(--ease-out-expo);
      will-change: transform, opacity;
    }

    .rv-right.in {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    .rv-scale {
      opacity: 0;
      transform: translate3d(0, 0, 0) scale(.94);
      transition: opacity .6s var(--ease-smooth), transform .6s var(--ease-spring);
      will-change: transform, opacity;
    }

    .rv-scale.in {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }

    /*  Nav Logo Hover  */
    /* nav-logo overrides — gérés dans le bloc principal */

    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    /* ✦.✦✦.✦✦.✦ MODAL DÉMARRER — REDESIGN COMPLET ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    #start-modal {
      position: fixed;
      inset: 0;
      z-index: 99999;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      visibility: hidden;
      opacity: 0;
      display: flex;
      transition: opacity .3s, visibility .3s;
    }

    #start-modal.open {
      visibility: visible;
      opacity: 1;
    }

    .modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(4, 4, 6, 0.96);
      backdrop-filter: blur(20px);
      animation: backdrop-in .3s ease;
    }

    @keyframes backdrop-in {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    .modal-box {
      position: relative;
      z-index: 1;
      background: var(--bg2);
      border: 1px solid rgba(200, 160, 32, .25);
      border-radius: 32px;
      padding: 3rem 3rem 2.5rem;
      max-width: 780px;
      width: 100%;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 50px 120px rgba(0, 0, 0, .8), 0 0 100px rgba(200, 160, 32, .06);
      animation: modal-in .4s cubic-bezier(.175, .885, .32, 1.275);
    }

    @keyframes modal-in {
      from {
        opacity: 0;
        transform: scale(.88) translateY(30px);
      }

      to {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    .modal-close {
      position: absolute;
      top: 1.4rem;
      right: 1.4rem;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .06);
      border: 1px solid var(--border);
      color: var(--muted);
      font-size: 1rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .25s;
      line-height: 1;
    }

    .modal-close:hover {
      background: rgba(255, 255, 255, .12);
      color: var(--white);
      transform: rotate(90deg);
    }

    .modal-header {
      text-align: center;
      margin-bottom: 2.5rem;
    }

    .modal-top-badge {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      padding: .35rem .9rem;
      background: rgba(200, 160, 32, .12);
      border: 1px solid rgba(200, 160, 32, .25);
      border-radius: 50px;
      font-size: .7rem;
      font-weight: 700;
      color: var(--gold2);
      letter-spacing: .12em;
      text-transform: uppercase;
      margin-bottom: 1rem;
    }

    .modal-top-badge::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--gold);
      animation: pulse 2s infinite;
    }

    .modal-title {
      font-family: var(--ffd);
      font-size: clamp(1.6rem, 3vw, 2.1rem);
      font-weight: 900;
      color: var(--white);
      letter-spacing: -.04em;
      line-height: 1.05;
      margin-bottom: .6rem;
    }

    .modal-title span {
      color: var(--gold);
    }

    .modal-sub {
      font-size: .9rem;
      color: var(--muted);
      line-height: 1.6;
    }

    .modal-sub strong {
      color: var(--gold2);
    }

    /*  Les 3 cartes de contact  */
    .modal-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.2rem;
      margin-bottom: 2rem;
    }

    .modal-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 2rem 1.5rem 1.8rem;
      border-radius: 22px;
      text-decoration: none;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: transform .35s cubic-bezier(.175, .885, .32, 1.275), box-shadow .35s;
      border: 1px solid var(--border);
      background: rgba(255, 255, 255, .03);
    }

    .modal-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 22px;
      opacity: 0;
      transition: opacity .35s;
    }

    .modal-card:hover {
      transform: translateY(-8px);
    }

    .modal-card:hover::before {
      opacity: 1;
    }

    /* Carte Téléphone */
    .modal-card.phone {}

    .modal-card.phone::before {
      background: radial-gradient(ellipse at 50% 0%, rgba(201, 162, 39, .07), transparent 70%);
    }

    .modal-card.phone:hover {
      border-color: rgba(201, 162, 39, .3);
      box-shadow: 0 20px 60px rgba(201, 162, 39, .06);
    }

    /* Carte WhatsApp */
    .modal-card.whatsapp::before {
      background: radial-gradient(ellipse at 50% 0%, rgba(37, 211, 102, .08), transparent 70%);
    }

    .modal-card.whatsapp:hover {
      border-color: rgba(37, 211, 102, .35);
      box-shadow: 0 20px 60px rgba(37, 211, 102, .1);
    }

    /* Carte Formulaire */
    .modal-card.form::before {
      background: radial-gradient(ellipse at 50% 0%, rgba(200, 160, 32, .1), transparent 70%);
    }

    .modal-card.form:hover {
      border-color: rgba(200, 160, 32, .35);
      box-shadow: 0 20px 60px rgba(200, 160, 32, .08);
    }

    /* Illustrations SVG */
    .modal-card-illus {
      width: 100px;
      height: 100px;
      margin-bottom: 1.4rem;
      position: relative;
      z-index: 1;
    }

    /* Label + texte */
    .modal-card-label {
      font-family: var(--ffd);
      font-size: 1rem;
      font-weight: 800;
      color: var(--white);
      letter-spacing: -.02em;
      margin-bottom: .4rem;
      position: relative;
      z-index: 1;
      text-align: center;
    }

    .modal-card-hint {
      font-size: .78rem;
      color: var(--muted);
      line-height: 1.55;
      text-align: center;
      position: relative;
      z-index: 1;
    }

    .modal-card-tag {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      margin-top: 1rem;
      padding: .3rem .75rem;
      border-radius: 50px;
      font-size: .72rem;
      font-weight: 600;
      position: relative;
      z-index: 1;
    }

    .modal-card.phone .modal-card-tag {
      background: rgba(201, 162, 39, .1);
      color: #E8BF45;
      border: 1px solid rgba(201, 162, 39, .2);
    }

    .modal-card.whatsapp .modal-card-tag {
      background: rgba(37, 211, 102, .1);
      color: #25D366;
      border: 1px solid rgba(37, 211, 102, .25);
    }

    .modal-card.form .modal-card-tag {
      background: rgba(200, 160, 32, .12);
      color: var(--gold2);
      border: none;
    }

    .modal-footer {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      font-size: .75rem;
      color: var(--muted2);
      padding-top: 1.5rem;
      border-top: 1px solid var(--border);
    }

    .modal-footer::before {
      content: '';
    }

    /* Animations SVG */
    @keyframes phone-ring {

      0%,
      100% {
        transform: rotate(0deg);
      }

      10% {
        transform: rotate(-15deg);
      }

      20% {
        transform: rotate(15deg);
      }

      30% {
        transform: rotate(-10deg);
      }

      40% {
        transform: rotate(10deg);
      }

      50% {
        transform: rotate(0deg);
      }
    }

    @keyframes phone-pulse {
      0% {
        r: 28;
        opacity: .5;
      }

      100% {
        r: 48;
        opacity: 0;
      }
    }

    @keyframes wa-bubble-in {
      0% {
        transform: scale(0) translateY(6px);
        opacity: 0;
      }

      70% {
        transform: scale(1.08) translateY(-2px);
        opacity: 1;
      }

      100% {
        transform: scale(1) translateY(0);
        opacity: 1;
      }
    }

    @keyframes wa-dot {

      0%,
      80%,
      100% {
        transform: translateY(0);
        opacity: .4;
      }

      40% {
        transform: translateY(-4px);
        opacity: 1;
      }
    }

    @keyframes env-open {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-4px);
      }
    }

    @keyframes env-line {
      0% {
        stroke-dashoffset: 40;
      }

      100% {
        stroke-dashoffset: 0;
      }
    }

    @keyframes sparkle {

      0%,
      100% {
        opacity: 0;
        transform: scale(0);
      }

      50% {
        opacity: 1;
        transform: scale(1);
      }
    }

    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    /* ✦.✦✦.✦✦.✦ PRICING — REDESIGN COMPLET ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */

    /* Tabs */
    .pricing-tabs {
      display: flex;
      gap: .5rem;
      justify-content: center;
      margin-bottom: 3rem;
      padding: .35rem;
      background: rgba(255, 255, 255, .04);
      border: 1px solid var(--border);
      border-radius: 14px;
      width: fit-content;
      margin-left: auto;
      margin-right: auto;
    }

    .ptab2 {
      padding: .65rem 1.8rem;
      border-radius: 10px;
      font-family: var(--ffd);
      font-size: .88rem;
      font-weight: 700;
      color: var(--muted);
      background: transparent;
      border: none;
      cursor: pointer;
      transition: all .25s;
      letter-spacing: -.01em;
    }

    .ptab2.active {
      background: var(--gold);
      color: #000;
      box-shadow: 0 4px 20px rgba(200, 160, 32, .3);
    }

    .ptab2:not(.active):hover {
      color: var(--white);
      background: rgba(255, 255, 255, .06);
    }

    /* Tab panels — kept for potential future use */
    .pricing-panel {
      display: block;
    }

    .pricing-panel.active {
      display: block;
    }

    /* Nouvelle grille création — 3 plans en ligne */
    .plans-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      margin-bottom: 2rem;
      padding-top: 1.5rem;
    }

    /* Plan card — architecture propre */
    .plan-card {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 24px;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      transition: transform .35s cubic-bezier(.175, .885, .32, 1.275), border-color .3s, box-shadow .35s;
    }

    .plan-card:hover {
      transform: translateY(-3px);
      border-color: rgba(200, 160, 32, .3);
      box-shadow: 0 16px 50px rgba(0, 0, 0, .3);
    }

    .plan-card.popular {
      background: linear-gradient(160deg, rgba(200, 160, 32, .1), rgba(200, 160, 32, .03) 60%, var(--bg));
      border-color: var(--gold);
      box-shadow: 0 0 0 1px rgba(200, 160, 32, .15), 0 20px 60px rgba(0, 0, 0, .35);
    }

    .plan-card.popular::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--gold), var(--gold2), transparent);
    }

    /* Badge populaire */
    .plan-popular-badge {
      position: absolute;
      top: 1.4rem;
      right: 1.4rem;
      background: var(--gold);
      color: #000;
      font-size: .62rem;
      font-weight: 800;
      padding: .3rem .75rem;
      border-radius: 50px;
      text-transform: uppercase;
      letter-spacing: .08em;
      animation: float-badge 3s ease-in-out infinite;
    }

    /* Zones du plan */
    .plan-top {
      padding: 2rem 2rem 1.5rem;
      border-bottom: 1px solid var(--border);
    }

    .plan-icon {
      width: 46px;
      height: 46px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      margin-bottom: 1.2rem;
      background: var(--gold-light);
      border: none;
    }

    .plan-card.popular .plan-icon {
      background: var(--gold);
    }

    .plan-name {
      font-family: var(--ffd);
      font-size: .75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .15em;
      color: var(--muted);
      margin-bottom: .5rem;
    }

    .plan-card.popular .plan-name {
      color: var(--gold2);
    }

    .plan-price-row {
      display: flex;
      align-items: baseline;
      gap: .25rem;
      margin-bottom: .2rem;
    }

    .plan-currency {
      font-size: .82rem;
      color: var(--muted);
      font-weight: 500;
      margin-bottom: .15rem;
    }

    .plan-price {
      font-family: var(--ffd);
      font-size: 2.8rem;
      font-weight: 900;
      color: var(--white);
      letter-spacing: -.05em;
      line-height: 1;
    }

    .plan-card.popular .plan-price {
      color: var(--gold2);
    }

    .plan-delivery {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      font-size: .75rem;
      color: var(--muted2);
      margin-top: .5rem;
    }

    .plan-delivery::before {
      content: '⏱';
    }

    /* Zone "pour qui" */
    .plan-for {
      padding: 1.2rem 2rem;
      border-bottom: 1px solid var(--border);
      background: rgba(255, 255, 255, .02);
    }

    .plan-for-label {
      font-size: .65rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .12em;
      color: var(--gold);
      margin-bottom: .35rem;
    }

    .plan-for-text {
      font-size: .8rem;
      color: var(--muted);
      line-height: 1.55;
    }

    /* Features */
    .plan-features {
      padding: 1.5rem 2rem;
      flex: 1;
    }

    .plan-feature {
      display: flex;
      align-items: flex-start;
      gap: .7rem;
      padding: .55rem 0;
      border-bottom: 1px solid rgba(255, 255, 255, .04);
    }

    .plan-feature:last-child {
      border-bottom: none;
    }

    .plan-check {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .65rem;
      font-weight: 800;
      margin-top: .1rem;
      background: rgba(200, 160, 32, .15);
      color: var(--gold);
    }

    .plan-card.popular .plan-check {
      background: rgba(200, 160, 32, .2);
    }

    .plan-feat-main {
      font-size: .83rem;
      color: var(--white);
      font-weight: 500;
      line-height: 1.3;
    }

    .plan-feat-sub {
      font-size: .72rem;
      color: var(--muted2);
      margin-top: .1rem;
      line-height: 1.4;
    }

    /* CTA */
    .plan-cta-wrap {
      padding: 1.5rem 2rem 2rem;
    }

    .plan-cta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      width: 100%;
      padding: .95rem;
      border-radius: 12px;
      font-family: var(--ffd);
      font-size: .9rem;
      font-weight: 800;
      text-decoration: none;
      border: none;
      cursor: pointer;
      transition: all .25s cubic-bezier(.175, .885, .32, 1.275);
      letter-spacing: -.01em;
    }

    .plan-cta.default {
      background: rgba(255, 255, 255, .07);
      border: 1px solid var(--border);
      color: var(--white);
    }

    .plan-cta.default:hover {
      background: rgba(255, 255, 255, .12);
      transform: translateY(-2px);
    }

    .plan-cta.gold-cta {
      background: var(--gold);
      color: #000;
      box-shadow: 0 8px 30px rgba(200, 160, 32, .25);
    }

    .plan-cta.gold-cta:hover {
      background: var(--gold2);
      transform: translateY(-3px);
      box-shadow: 0 14px 40px rgba(200, 160, 32, .4);
    }

    /* Enterprise card — pleine largeur */
    .plan-enterprise {
      background: rgba(255, 255, 255, .02);
      border: 1px dashed rgba(255, 255, 255, .12);
      border-radius: 20px;
      padding: 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
      flex-wrap: wrap;
    }

    .plan-enterprise-left {
      display: flex;
      align-items: center;
      gap: 1.2rem;
    }

    .plan-enterprise-icon {
      width: 50px;
      height: 50px;
      border-radius: 14px;
      flex-shrink: 0;
      background: rgba(255, 255, 255, .06);
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
    }

    .plan-enterprise-title {
      font-family: var(--ffd);
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--white);
      letter-spacing: -.02em;
      margin-bottom: .2rem;
    }

    .plan-enterprise-desc {
      font-size: .82rem;
      color: var(--muted);
      line-height: 1.5;
    }

    /* Maintenance cards — 3 colonnes */
    .maint-plans-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }

    .maint-note {
      text-align: center;
      margin-top: 1.8rem;
      font-size: .8rem;
      color: var(--muted2);
      line-height: 1.6;
    }

    .maint-note strong {
      color: var(--muted);
    }

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

      .maint-plans-grid {
        grid-template-columns: 1fr;
      }

      .modal-cards {
        grid-template-columns: 1fr;
      }
    }

    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    /* ✦.✦✦.✦✦.✦ SECTION VS (POURQUOI NOUS) ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    #vs {
      background: var(--bg);
      position: relative;
      overflow: hidden;
    }

    #vs::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 800px;
      height: 400px;
      background: radial-gradient(ellipse, rgba(200, 160, 32, .06), transparent 70%);
      filter: blur(60px);
      pointer-events: none;
    }

    .vs-header {
      text-align: center;
      margin-bottom: 4rem;
    }

    .vs-badge-fire {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      padding: .45rem 1.1rem;
      background: linear-gradient(135deg, rgba(200, 160, 32, .2), rgba(200, 160, 32, .08));
      border: none;
      border-radius: 50px;
      font-size: .75rem;
      font-weight: 700;
      color: var(--gold2);
      letter-spacing: .1em;
      text-transform: uppercase;
      margin-bottom: 1rem;
    }

    .vs-grid {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 2rem;
      align-items: start;
      position: relative;
      z-index: 1;
    }

    .vs-col-bad {}

    .vs-col-vs {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding-top: 3.5rem;
    }

    .vs-vs-badge {
      width: 54px;
      height: 54px;
      border-radius: 50%;
      background: var(--gold);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--ffd);
      font-size: .85rem;
      font-weight: 900;
      color: #000;
      box-shadow: 0 0 30px rgba(200, 160, 32, .4);
      flex-shrink: 0;
    }

    .vs-card {
      border-radius: 24px;
      overflow: hidden;
    }

    .vs-card-header {
      padding: 1.5rem 2rem;
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .vs-card-header-icon {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      flex-shrink: 0;
    }

    .vs-card-title {
      font-family: var(--ffd);
      font-size: 1rem;
      font-weight: 800;
      letter-spacing: -.02em;
    }

    .vs-card-subtitle {
      font-size: .75rem;
      margin-top: .1rem;
    }

    /* BAD card */
    .vs-card.bad {
      background: rgba(255, 60, 60, .05);
      border: 1px solid rgba(255, 60, 60, .15);
    }

    .vs-card.bad .vs-card-header {
      background: rgba(255, 60, 60, .08);
      border-bottom: 1px solid rgba(255, 60, 60, .1);
    }

    .vs-card.bad .vs-card-header-icon {
      background: rgba(255, 60, 60, .15);
    }

    .vs-card.bad .vs-card-title {
      color: #ff6b6b;
    }

    .vs-card.bad .vs-card-subtitle {
      color: rgba(255, 107, 107, .6);
    }

    /* GOOD card */
    .vs-card.good {
      background: linear-gradient(145deg, rgba(200, 160, 32, .1), rgba(200, 160, 32, .04));
      border: 1px solid var(--gold);
      box-shadow: 0 0 40px rgba(200, 160, 32, .1), 0 20px 60px rgba(0, 0, 0, .3);
    }

    .vs-card.good .vs-card-header {
      background: linear-gradient(135deg, rgba(200, 160, 32, .18), rgba(200, 160, 32, .08));
      border-bottom: 1px solid var(--border2);
    }

    .vs-card.good .vs-card-header-icon {
      background: var(--gold);
    }

    .vs-card.good .vs-card-title {
      color: var(--gold2);
    }

    .vs-card.good .vs-card-subtitle {
      color: rgba(200, 160, 32, .6);
    }

    .vs-items {
      padding: 1.5rem;
      display: flex;
      flex-direction: column;
      gap: .9rem;
    }

    .vs-item {
      display: flex;
      align-items: flex-start;
      gap: .85rem;
      padding: .85rem 1rem;
      border-radius: 12px;
      transition: background .2s;
    }

    .vs-card.bad .vs-item {
      background: rgba(255, 255, 255, .02);
      border: 1px solid rgba(255, 60, 60, .07);
    }

    .vs-card.good .vs-item {
      background: rgba(200, 160, 32, .06);
      border: 1px solid rgba(200, 160, 32, .1);
    }

    .vs-item-icon {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .85rem;
      flex-shrink: 0;
      margin-top: .05rem;
    }

    .vs-card.bad .vs-item-icon {
      background: rgba(255, 60, 60, .15);
      color: #ff6b6b;
    }

    .vs-card.good .vs-item-icon {
      background: rgba(200, 160, 32, .2);
      color: var(--gold);
    }

    .vs-item-title {
      font-family: var(--ffd);
      font-size: .88rem;
      font-weight: 700;
      letter-spacing: -.01em;
      margin-bottom: .2rem;
    }

    .vs-card.bad .vs-item-title {
      color: rgba(250, 250, 248, .65);
    }

    .vs-card.good .vs-item-title {
      color: var(--white);
    }

    .vs-item-desc {
      font-size: .78rem;
      line-height: 1.55;
    }

    .vs-card.bad .vs-item-desc {
      color: rgba(250, 250, 248, .35);
    }

    .vs-card.good .vs-item-desc {
      color: var(--muted);
    }

    .vs-bottom {
      margin-top: 3.5rem;
      background: linear-gradient(135deg, rgba(200, 160, 32, .12), rgba(200, 160, 32, .04));
      border: none;
      border-radius: 20px;
      padding: 2.5rem;
      text-align: center;
      position: relative;
      z-index: 1;
    }

    .vs-bottom-title {
      font-family: var(--ffd);
      font-size: 1.5rem;
      font-weight: 900;
      color: var(--white);
      letter-spacing: -.04em;
      margin-bottom: .6rem;
    }

    .vs-bottom-title span {
      color: var(--gold);
    }

    .vs-bottom-sub {
      font-size: .9rem;
      color: var(--muted);
      margin-bottom: 1.8rem;
    }

    .vs-proof-row {
      display: flex;
      gap: 2rem;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 2rem;
    }

    .vs-proof-item {
      display: flex;
      align-items: center;
      gap: .5rem;
      font-size: .82rem;
      color: var(--muted);
    }

    .vs-proof-item::before {
      content: '';
      color: var(--gold);
      font-weight: 800;
    }

    /* ✦.✦✦.✦✦.✦ ICON HOVER — Centrage parfait ✦.✦✦.✦✦.✦ */
    /* Tous les conteneurs d'icônes : centrage absolu + origin fixe */
    .svc-icon,
    .why-icon,
    .plan-icon,
    .plan-enterprise-icon,
    .cp-icon,
    .vs-card-header-icon,
    .vs-item-icon,
    .step-num,
    .testi-avatar,
    .modal-card-illus,
    .social-btn {
      transform-origin: center center !important;
      will-change: transform;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    /* Scale simple sans rotate — évite tout décalage */
    .svc-icon {
      transition: background var(--dur-med) var(--ease-smooth), color var(--dur-med) var(--ease-smooth), transform var(--dur-med) var(--ease-spring) !important;
    }

    .service-card:hover .svc-icon {
      transform: scale(1.18) !important;
    }

    .why-icon {
      transition: background var(--dur-med) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth), transform var(--dur-med) var(--ease-spring) !important;
    }

    .why-item:hover .why-icon {
      transform: scale(1.15) !important;
    }

    .plan-icon {
      transition: background var(--dur-med) var(--ease-smooth), transform var(--dur-med) var(--ease-spring) !important;
      transform-origin: center center !important;
    }

    .plan-card:hover .plan-icon {
      transform: scale(1.15) !important;
    }

    .cp-icon {
      transition: background var(--dur-med) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth), transform var(--dur-med) var(--ease-spring) !important;
    }

    .contact-point:hover .cp-icon {
      transform: scale(1.12) !important;
    }

    .step-num {
      transition: transform var(--dur-med) var(--ease-spring), box-shadow var(--dur-med) var(--ease-smooth) !important;
    }

    .step-card:hover .step-num {
      transform: scale(1.12) !important;
    }

    .testi-avatar {
      transition: background var(--dur-med) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth), transform var(--dur-med) var(--ease-spring) !important;
    }

    .testi-card:hover .testi-avatar {
      transform: scale(1.1) !important;
    }

    .social-btn {
      transition: background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth), transform var(--dur-med) var(--ease-spring), box-shadow var(--dur-med) var(--ease-smooth) !important;
    }

    .social-btn:hover {
      transform: scale(1.12) translateY(-3px) !important;
    }

    svg {
      display: inline-block;
      vertical-align: middle;
      flex-shrink: 0;
    }

    .svc-icon svg {
      width: 22px;
      height: 22px;
    }

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

    .plan-icon svg {
      width: 22px;
      height: 22px;
    }

    .cp-icon svg {
      width: 18px;
      height: 18px;
    }

    .vs-item-icon svg {
      width: 14px;
      height: 14px;
    }

    .vs-card-header-icon svg {
      width: 20px;
      height: 20px;
    }

    .social-btn svg {
      width: 16px;
      height: 16px;
    }

    .wa-float svg {
      width: 26px;
      height: 26px;
    }

    .wa-btn svg {
      width: 20px;
      height: 20px;
    }

    .plan-check svg {
      width: 10px;
      height: 10px;
    }

    .testi-stars svg {
      width: 14px;
      height: 14px;
      color: var(--gold);
    }

    .modal-card-tag svg {
      width: 14px;
      height: 14px;
    }

    .plan-enterprise-icon svg {
      width: 22px;
      height: 22px;
    }

    .step-emoji svg {
      width: 38px;
      height: 38px;
      color: var(--gold);
    }

    .cta-emoji svg {
      width: 48px;
      height: 48px;
      color: var(--gold);
    }


    .nav-links a {
      transition: color var(--dur-fast) var(--ease-smooth);
    }

    .nav-links a::after {
      transition: width var(--dur-med) var(--ease-out-expo), left var(--dur-med) var(--ease-out-expo);
    }

    .nav-cta {
      transition: background var(--dur-fast) var(--ease-smooth), transform var(--dur-med) var(--ease-spring), box-shadow var(--dur-med) var(--ease-smooth) !important;
    }

    .nav-cta:hover {
      transform: translateY(-2px) scale(1.03) !important;
    }

    .btn-primary {
      transition: background var(--dur-fast) var(--ease-smooth), transform var(--dur-med) var(--ease-spring), box-shadow var(--dur-med) var(--ease-smooth) !important;
    }

    .btn-primary:hover {
      transform: translateY(-3px) scale(1.02) !important;
    }

    .btn-secondary {
      transition: border-color var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth), transform var(--dur-med) var(--ease-spring) !important;
    }

    .btn-secondary:hover {
      transform: translateY(-3px) !important;
    }

    .service-card {
      transition: background var(--dur-med) var(--ease-smooth) !important;
    }

    /* svc-icon hover déjà géré plus haut */
    .plan-card {
      transition: transform var(--dur-med) var(--ease-spring), border-color var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-med) var(--ease-smooth) !important;
    }

    .plan-cta {
      transition: background var(--dur-fast) var(--ease-smooth), transform var(--dur-med) var(--ease-spring), box-shadow var(--dur-med) var(--ease-smooth) !important;
    }

    .plan-cta:hover {
      transform: translateY(-2px) !important;
    }

    .why-item {
      transition: transform var(--dur-med) var(--ease-out-expo), background var(--dur-med) var(--ease-smooth) !important;
    }

    .why-icon {
      transition: background var(--dur-med) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth), transform var(--dur-med) var(--ease-spring) !important;
    }

    .step-card {
      transition: border-color var(--dur-fast) var(--ease-smooth), transform var(--dur-med) var(--ease-spring), box-shadow var(--dur-slow) var(--ease-smooth) !important;
    }

    .step-num {
      transition: transform var(--dur-med) var(--ease-spring), box-shadow var(--dur-med) var(--ease-smooth) !important;
    }

    .metric-card {
      transition: transform var(--dur-med) var(--ease-spring), box-shadow var(--dur-med) var(--ease-smooth) !important;
    }

    .faq-item {
      transition: border-color var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-med) var(--ease-smooth) !important;
    }

    .faq-a {
      transition: max-height 400ms var(--ease-out-expo), padding 300ms var(--ease-smooth), opacity 250ms var(--ease-smooth) !important;
    }

    .faq-arrow {
      transition: transform 400ms var(--ease-spring), color var(--dur-fast) var(--ease-smooth) !important;
    }

    .social-btn {
      transition: background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth), transform var(--dur-med) var(--ease-spring), box-shadow var(--dur-med) var(--ease-smooth) !important;
    }

    .modal-card {
      transition: transform var(--dur-med) var(--ease-spring), border-color var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-med) var(--ease-smooth) !important;
    }

    .modal-card:hover {
      transform: translateY(-8px) scale(1.02) !important;
    }

    .contact-point {
      transition: transform var(--dur-med) var(--ease-out-expo), background var(--dur-med) var(--ease-smooth) !important;
    }

    .cp-icon {
      transition: background var(--dur-med) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth), transform var(--dur-med) var(--ease-spring) !important;
    }

    .clock-item {
      transition: background var(--dur-med) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth), transform var(--dur-med) var(--ease-spring) !important;
    }

    .wa-float {
      transition: transform var(--dur-med) var(--ease-spring), box-shadow var(--dur-med) var(--ease-smooth) !important;
    }

    .wa-float:hover {
      transform: scale(1.12) !important;
    }

    .footer-links a {
      transition: color var(--dur-fast) var(--ease-smooth) !important;
    }

    .footer-links a::after {
      transition: width var(--dur-med) var(--ease-out-expo) !important;
    }

    .vs-card .vs-item {
      transition: background var(--dur-med) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth) !important;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
      transition: border-color var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-fast) var(--ease-smooth), background var(--dur-med) var(--ease-smooth) !important;
    }

    .form-submit {
      transition: background var(--dur-fast) var(--ease-smooth), transform var(--dur-med) var(--ease-spring), box-shadow var(--dur-med) var(--ease-smooth) !important;
    }

    .form-submit:hover {
      transform: translateY(-3px) !important;
    }

    @media(max-width:768px) {
      :root {
        --pad: 5%;
      }

      .nav-links {
        display: none;
      }

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

      .hero-stats {
        gap: 2rem;
      }

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

      .how-steps {
        grid-template-columns: 1fr;
      }

      .how-steps::before {
        display: none;
      }

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

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

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

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

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

      .pricing-intro {
        grid-template-columns: 1fr;
      }

      .form-row {
        grid-template-columns: 1fr;
      }

      .clocks {
        grid-template-columns: repeat(3, 1fr);
      }

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

      .modal-options {
        grid-template-columns: 1fr;
      }

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

      .vs-col-vs {
        padding-top: 0;
        justify-content: center;
      }
    }

    /* ✦.✦✦.✦✦.✦ SECTION ENGAGEMENTS ✦.✦✦.✦✦.✦ */
    #engagements {
      background: var(--bg);
    }

    .eng-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      margin-top: 3.5rem;
    }

    .eng-card {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 2rem;
      display: flex;
      flex-direction: column;
      gap: .9rem;
      transition: border-color .3s, transform .4s var(--ease-spring), box-shadow .35s;
      position: relative;
      overflow: hidden;
      will-change: transform;
    }

    .eng-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
      opacity: 0;
      transition: opacity .35s;
    }

    .eng-card:hover {
      border-color: var(--gold-border);
      transform: translateY(-5px);
      box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
    }

    .eng-card:hover::before {
      opacity: 1;
    }

    .eng-icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      background: rgba(200, 160, 32, .08);
      border: 1px solid rgba(200, 160, 32, .15);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--gold);
      flex-shrink: 0;
      transition: all .35s var(--ease-spring);
    }

    .eng-card:hover .eng-icon {
      background: var(--gold);
      color: #000;
      border-color: var(--gold);
      transform: scale(1.08);
    }

    .eng-title {
      font-family: var(--ffd);
      font-size: 1rem;
      font-weight: 800;
      color: var(--white);
      letter-spacing: -.02em;
    }

    .eng-desc {
      font-size: .83rem;
      color: var(--muted);
      line-height: 1.7;
    }

    .eng-badge {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      padding: .3rem .8rem;
      background: rgba(74, 222, 128, .1);
      border: 1px solid rgba(74, 222, 128, .25);
      border-radius: 50px;
      font-size: .7rem;
      font-weight: 700;
      color: #4ade80;
      width: fit-content;
      margin-top: .3rem;
    }

    .eng-guarantee-strip {
      margin-top: 3rem;
      padding: 2rem 2.5rem;
      background: linear-gradient(135deg, rgba(200, 160, 32, .12), rgba(200, 160, 32, .04));
      border: none;
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
      flex-wrap: wrap;
    }

    .eng-guarantee-text {
      font-family: var(--ffd);
      font-size: 1.15rem;
      font-weight: 900;
      color: var(--white);
      letter-spacing: -.03em;
      line-height: 1.3;
    }

    .eng-guarantee-text span {
      color: var(--gold);
    }

    .eng-guarantee-sub {
      font-size: .85rem;
      color: var(--muted);
      margin-top: .4rem;
    }

    @media(max-width:768px) {
      .eng-grid {
        grid-template-columns: 1fr;
      }

      .eng-guarantee-strip {
        flex-direction: column;
        text-align: center;
      }
    }

    /* ✦.✦✦.✦✦.✦ PLAN GUARANTEE TEXT ✦.✦✦.✦✦.✦ */
    .plan-guarantee {
      text-align: center;
      margin-top: .7rem;
      font-size: .72rem;
      color: var(--muted2);
      line-height: 1.5;
    }

    .plan-guarantee span {
      color: var(--gold);
    }

    /* ✦.✦✦.✦✦.✦ EUR PRICE HINT ✦.✦✦.✦✦.✦ */
    .plan-eur {
      font-size: .72rem;
      color: var(--muted2);
      margin-top: .1rem;
      margin-bottom: .4rem;
    }

    /* ✦.✦✦.✦✦.✦ SCARCITY BAR ✦.✦✦.✦✦.✦ */
    .scarcity-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1.5rem;
      padding: 1.2rem 2rem;
      margin-bottom: 2.5rem;
      background: rgba(200, 160, 32, .06);
      border: none;
      border-radius: 14px;
    }

    .scarcity-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #4ade80;
      animation: pulse 2s infinite;
      display: inline-block;
      margin-right: .5rem;
    }

    .scarcity-text {
      font-family: var(--ffd);
      font-size: .9rem;
      font-weight: 700;
      color: var(--white);
    }

    .scarcity-track {
      height: 6px;
      background: rgba(255, 255, 255, .1);
      border-radius: 3px;
      overflow: hidden;
      width: 220px;
    }

    .scarcity-fill {
      height: 100%;
      width: 80%;
      background: linear-gradient(90deg, var(--gold), var(--gold2));
      border-radius: 3px;
    }

    .scarcity-note {
      font-size: .78rem;
      color: var(--muted);
    }

    /* ✦.✦✦.✦✦.✦ MOBILE STICKY BAR ✦.✦✦.✦✦.✦ */
    .mob-sticky {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 998;
      padding: .8rem 1rem;
      background: rgba(10, 10, 11, .97);
      border-top: 1px solid var(--border);
      backdrop-filter: blur(20px);
      gap: .6rem;
    }

    .mob-sticky a,
    .mob-sticky button {
      flex: 1;
      padding: .7rem .4rem;
      border-radius: 10px;
      text-align: center;
      font-family: var(--ffd);
      font-size: .78rem;
      font-weight: 700;
      text-decoration: none;
      border: none;
      cursor: pointer;
      transition: all .2s;
    }

    .mob-call {
      background: rgba(255, 255, 255, .08);
      border: 1px solid var(--border) !important;
      color: var(--white) !important;
    }

    .mob-wa {
      background: #25D366;
      color: #fff !important;
    }

    .mob-go {
      background: var(--gold);
      color: #000 !important;
    }

    @media(max-width:768px) {
      .mob-sticky {
        display: flex;
      }

      body {
        padding-bottom: 70px;
      }
    }

    /* ✦.✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦
   ✦.✦           ANIMATIONS PREMIUM — VELIXIO              ✦.✦
   ✦.✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */

    /*  Page loader  */
    #vx-loader {
      position: fixed;
      inset: 0;
      z-index: 99999;
      background: #0A0A0B;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 1.5rem;
      transition: opacity .6s ease, visibility .6s ease;
    }

    #vx-loader.done {
      opacity: 0;
      visibility: hidden;
    }

    .loader-logo {
      font-family: 'DM Sans', sans-serif;
      font-size: 2.2rem;
      font-weight: 900;
      letter-spacing: -.06em;
      color: #FAFAF8;
      animation: loaderPulse 1.2s ease-in-out infinite;
    }

    .loader-logo span {
      color: var(--gold);
    }

    .loader-bar {
      width: 160px;
      height: 2px;
      background: rgba(255, 255, 255, .1);
      border-radius: 1px;
      overflow: hidden;
    }

    .loader-bar-fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--gold), #E8BF45);
      border-radius: 1px;
      animation: loaderFill 1.4s cubic-bezier(.4, 0, .2, 1) forwards;
    }

    @keyframes loaderPulse {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .5
      }
    }

    @keyframes loaderFill {
      0% {
        width: 0%
      }

      100% {
        width: 100%
      }
    }

    /*  Cursor spotlight  */
    #cursor-glow {
      position: fixed;
      top: 0;
      left: 0;
      pointer-events: none;
      z-index: 9998;
      width: 340px;
      height: 340px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(200, 160, 32, .055), transparent 65%);
      transform: translate3d(-9999px, -9999px, 0);
      transition: opacity .5s;
      opacity: 0;
      will-change: transform, opacity;
    }

    /*  Scroll reveal  */
    .rv {
      opacity: 0 !important;
      transform: translate3d(0, 24px, 0) !important;
      transition: opacity .65s var(--ease-smooth),
        transform .65s var(--ease-out-expo) !important;
      will-change: transform, opacity;
    }

    .rv.in {
      opacity: 1 !important;
      transform: translate3d(0, 0, 0) !important;
    }

    .rv-left {
      opacity: 0 !important;
      transform: translate3d(-32px, 0, 0) !important;
      transition: opacity .65s var(--ease-smooth), transform .65s var(--ease-out-expo) !important;
      will-change: transform, opacity;
    }

    .rv-left.in {
      opacity: 1 !important;
      transform: translate3d(0, 0, 0) !important;
    }

    .rv-right {
      opacity: 0 !important;
      transform: translate3d(32px, 0, 0) !important;
      transition: opacity .65s var(--ease-smooth), transform .65s var(--ease-out-expo) !important;
      will-change: transform, opacity;
    }

    .rv-right.in {
      opacity: 1 !important;
      transform: translate3d(0, 0, 0) !important;
    }

    .rv-scale {
      opacity: 0 !important;
      transform: translate3d(0, 0, 0) scale(.94) !important;
      transition: opacity .6s var(--ease-smooth), transform .6s var(--ease-spring) !important;
      will-change: transform, opacity;
    }

    .rv-scale.in {
      opacity: 1 !important;
      transform: translate3d(0, 0, 0) scale(1) !important;
    }

    /* Stagger delays */
    .rv-stagger>*:nth-child(1) {
      transition-delay: .04s !important;
    }

    .rv-stagger>*:nth-child(2) {
      transition-delay: .11s !important;
    }

    .rv-stagger>*:nth-child(3) {
      transition-delay: .18s !important;
    }

    .rv-stagger>*:nth-child(4) {
      transition-delay: .25s !important;
    }

    .rv-stagger>*:nth-child(5) {
      transition-delay: .32s !important;
    }

    .rv-stagger>*:nth-child(6) {
      transition-delay: .39s !important;
    }

    .rv-stagger>* {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .6s var(--ease-smooth), transform .6s var(--ease-out-expo);
    }

    .rv-stagger.in>* {
      opacity: 1;
      transform: translateY(0);
    }

    /*  Hero sequenced entrance  */
    .hero-badge {
      animation: heroSlideDown .65s var(--ease-out-expo) .15s both;
    }

    .hero-title {
      animation: heroSlideUp .75s var(--ease-out-expo) .28s both;
    }

    .hero-sub {
      animation: heroSlideUp .65s var(--ease-out-expo) .42s both;
    }

    .hero-actions {
      animation: heroSlideUp .65s var(--ease-out-expo) .55s both;
    }

    .hero-stats {
      animation: heroSlideUp .65s var(--ease-out-expo) .68s both;
    }

    @keyframes heroSlideUp {
      from {
        opacity: 0;
        transform: translateY(22px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    @keyframes heroSlideDown {
      from {
        opacity: 0;
        transform: translateY(-16px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    /* Annuler .rv sur les éléments hero (ils ont leur propre animation) */
    .hero-badge.rv,
    .hero-title.rv,
    .hero-sub.rv,
    .hero-actions.rv,
    .hero-stats.rv {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }

    /*  Particules flottantes hero  */
    .hero-particles {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
    }

    .hp {
      position: absolute;
      border-radius: 50%;
      background: var(--gold);
      opacity: 0;
      animation: particleFloat var(--dur) ease-in-out var(--del) infinite;
    }

    @keyframes particleFloat {
      0% {
        opacity: 0;
        transform: translateY(0) scale(0);
      }

      15% {
        opacity: .6;
        transform: translateY(-20px) scale(1);
      }

      85% {
        opacity: .3;
        transform: translateY(var(--rise)) scale(.8);
      }

      100% {
        opacity: 0;
        transform: translateY(calc(var(--rise) - 20px)) scale(0);
      }
    }

    /*  Orbs hero — refined, slow drift  */
    .hero-orb1 {
      animation: orb1Move 22s ease-in-out infinite !important;
      will-change: transform;
    }

    .hero-orb2 {
      animation: orb2Move 28s ease-in-out infinite !important;
      will-change: transform;
    }

    @keyframes orb1Move {

      0%,
      100% {
        transform: translate(0, 0) scale(1);
      }

      40% {
        transform: translate(-22px, -16px) scale(1.04);
      }

      70% {
        transform: translate(18px, 12px) scale(.97);
      }
    }

    @keyframes orb2Move {

      0%,
      100% {
        transform: translate(0, 0) scale(1);
      }

      35% {
        transform: translate(18px, -14px) scale(1.05);
      }

      68% {
        transform: translate(-14px, 18px) scale(.96);
      }
    }

    /*  Titre hero gradient animé  */
    .line-gold {
      background: linear-gradient(90deg, var(--gold) 0%, var(--gold2) 30%, var(--gold3) 50%, var(--gold2) 70%, var(--gold) 100%);
      background-size: 250% 100%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: goldShimmer 8s ease-in-out infinite;
    }

    @keyframes goldShimmer {

      0%,
      100% {
        background-position: 0% 50%
      }

      50% {
        background-position: 100% 50%
      }
    }

    /*  Progress bar  */

    /*  Service cards hover  */
    .service-card {
      transition: background .35s var(--ease-smooth), box-shadow .35s !important;
    }

    .service-card:hover {
      box-shadow: inset 0 0 0 1px rgba(200, 160, 32, .15) !important;
      transform: none !important;
    }

    /*  Step cards  */
    .step-card {
      transition: border-color .3s, transform .4s var(--ease-spring), box-shadow .4s !important;
    }

    .step-card:hover {
      /* handled by v15 */
    }

    /*  Plan cards  */
    .plan-card {
      transition: transform .4s var(--ease-spring), border-color .3s, box-shadow .4s !important;
    }

    .plan-card:hover {
      /* handled by v15 */
    }

    .plan-card.popular {
      animation: popularGlow 4s ease-in-out infinite;
    }

    @keyframes popularGlow {

      0%,
      100% {
        box-shadow: 0 0 0 1px rgba(200, 160, 32, .18), 0 16px 50px rgba(0, 0, 0, .3);
      }

      50% {
        box-shadow: 0 0 0 1px rgba(200, 160, 32, .38), 0 16px 50px rgba(200, 160, 32, .1);
      }
    }

    /*  Engagement cards  */
    .eng-card {
      transition: border-color .3s, transform .45s cubic-bezier(.175, .885, .32, 1.275), box-shadow .4s !important;
    }

    .eng-card:hover {
      /* handled by v15 */
    }

    /*  Why items  */
    .why-item {
      transition: transform .35s cubic-bezier(.4, 0, .2, 1), background .3s !important;
      border-radius: 12px;
      padding: .8rem;
    }

    .why-item:hover {
      transform: translateX(12px) !important;
      background: rgba(200, 160, 32, .05) !important;
    }

    .why-item:hover .why-icon {
      background: var(--gold) !important;
      color: #000 !important;
      transform: scale(1.15) !important;
    }

    /*  Metric cards tilt  */
    .metric-card {
      transition: transform .45s cubic-bezier(.175, .885, .32, 1.275), box-shadow .4s !important;
    }

    /*  FAQ  */
    .faq-item {
      transition: border-color .3s, box-shadow .3s !important;
    }

    .faq-item.open {
      border-color: var(--border2) !important;
      box-shadow: 0 8px 30px rgba(200, 160, 32, .08) !important;
    }

    .faq-a {
      display: block !important;
      max-height: 0;
      overflow: hidden;
      padding-bottom: 0;
      opacity: 0;
      transition: max-height .45s cubic-bezier(.4, 0, .2, 1), padding .35s, opacity .3s !important;
    }

    .faq-item.open .faq-a {
      max-height: 300px;
      padding-bottom: 1.4rem;
      opacity: 1;
    }

    .faq-arrow {
      transition: transform .4s cubic-bezier(.175, .885, .32, 1.275), color .3s !important;
    }

    .faq-item.open .faq-arrow {
      transform: rotate(45deg) !important;
      color: var(--gold2) !important;
    }

    /*  Btn primary  */
    .btn-primary {
      position: relative;
      overflow: hidden;
      transition: transform .35s cubic-bezier(.175, .885, .32, 1.275), box-shadow .35s, background .25s !important;
    }

    .btn-primary::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .25) 50%, transparent 100%);
      transform: translateX(-100%);
      transition: transform .5s ease;
    }

    .btn-primary:hover {
      transform: translateY(-3px) scale(1.03) !important;
      box-shadow: 0 16px 50px rgba(200, 160, 32, .4) !important;
    }

    .btn-primary:hover::after {
      transform: translateX(100%);
    }

    /*  Nav CTA — hover shimmer already defined above  */

    /*  WA float — single ring already defined in base style  */
    @keyframes waRing {
      0% {
        transform: scale(.85);
        opacity: .6
      }

      100% {
        transform: scale(1.35);
        opacity: 0
      }
    }

    /*  Section labels  */
    .section-label {
      animation: none;
      transition: color .3s;
    }

    /*  Marquee items hover  */
    .marquee-item {
      transition: none !important;
    }

    .marquee-item:hover {
      background: var(--gold-light) !important;
      border: none !important;
      color: var(--gold2) !important;
      transform: scale(1.07) translateY(-2px) !important;
      box-shadow: 0 8px 28px rgba(200, 160, 32, .18) !important;
    }

    /*  Footer links underline  */
    .footer-links a {
      position: relative;
      padding-bottom: 2px;
    }

    .footer-links a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 1px;
      background: var(--gold);
      transition: width .35s cubic-bezier(.4, 0, .2, 1);
    }

    .footer-links a:hover::after {
      width: 100%;
    }

    .social-btn {
      transition: background .3s, color .3s, transform .35s cubic-bezier(.175, .885, .32, 1.275), box-shadow .3s !important;
    }

    .social-btn:hover {
      transform: translateY(-4px) scale(1.12) !important;
      box-shadow: 0 10px 30px rgba(200, 160, 32, .3) !important;
    }

    /*  Tilt cards  */
    .tilt-card {
      transform-style: preserve-3d;
    }


    /* ✦.✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦
   ✦.✦         ILLUSTRATIONS ANIMÉES — VELIXIO             ✦.✦
   ✦.✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */

    /*  HERO BROWSER MOCKUP  */
    .hero-illus-wrap {
      position: absolute;
      right: max(2%, calc((100% - 1280px)/2 + 1%));
      top: 50%;
      transform: translateY(-50%);
      width: 500px;
      pointer-events: none;
      animation: illusFloat 7s ease-in-out infinite;
      z-index: 2;
    }

    @keyframes illusFloat {

      0%,
      100% {
        transform: translateY(-50%) translateY(0px) rotate(0deg);
      }

      33% {
        transform: translateY(-50%) translateY(-14px) rotate(.3deg);
      }

      66% {
        transform: translateY(-50%) translateY(-6px) rotate(-.2deg);
      }
    }

    /* Glow ring behind image */
    .hero-illus-wrap::before {
      content: '';
      position: absolute;
      inset: -30px;
      border-radius: 50%;
      background: radial-gradient(ellipse at 50% 50%, rgba(200, 160, 32, .18), rgba(200, 160, 32, .05) 50%, transparent 70%);
      filter: blur(24px);
      z-index: -1;
      animation: heroGlowPulse 4s ease-in-out infinite;
    }

    @keyframes heroGlowPulse {

      0%,
      100% {
        opacity: .7;
        transform: scale(1);
      }

      50% {
        opacity: 1;
        transform: scale(1.08);
      }
    }

    @media(max-width:1100px) {
      .hero-illus-wrap {
        display: none;
      }
    }

    /*  WHY SECTION — graphique  */
    .why-illus-wrap {
      position: relative;
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid var(--border);
      background: var(--bg);
      padding: 2rem;
    }

    .why-illus-wrap::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 70% 30%, var(--gold-light), transparent 70%);
    }

    /*  HOW SECTION — flux animé  */
    .how-illus-connector {
      position: absolute;
      top: 42px;
      left: 0;
      right: 0;
      height: 2px;
      pointer-events: none;
      overflow: visible;
    }

    /*  ENGAGEMENTS — shield  */
    .eng-shield-wrap {
      display: flex;
      justify-content: center;
      margin-bottom: 3rem;
    }


    /* ✦.✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦
   ✦.✦      NOUVELLES ILLUSTRATIONS — VELIXIO PREMIUM              ✦.✦
   ✦.✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */

    /*  SERVICES — dashboard card  */
    .services-illus-wrap {
      margin-top: 3rem;
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .06);
      background: #0D0D10;
      padding: 0.5rem 1.5rem 0;
    }

    /*  VS — timeline illustration  */
    .vs-illus-wrap {
      margin: 3.5rem auto 0;
      max-width: 780px;
    }

    /*  FAQ — brain illustration  */
    .faq-illus-wrap {
      display: flex;
      justify-content: center;
      margin-bottom: 3rem;
    }

    /*  CTA — rocket launch  */
    .cta-illus-wrap {
      position: absolute;
      right: 6%;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
    }

    @media(max-width:1100px) {
      .cta-illus-wrap {
        display: none;
      }
    }

    #cta {
      position: relative;
      overflow: hidden;
    }


    @keyframes rocketFly {

      0%,
      100% {
        transform: translateY(0px) rotate(-2deg);
      }

      25% {
        transform: translateY(-12px) rotate(0deg);
      }

      50% {
        transform: translateY(-6px) rotate(2deg);
      }

      75% {
        transform: translateY(-14px) rotate(0deg);
      }
    }


    /*  HERO BEACH BACKGROUND  */
    .hero-beach-bg {
      position: absolute;
      inset: 0;
      opacity: 0.22;
      pointer-events: none;
      z-index: 0;
      mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 75%, transparent 100%);
      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 75%, transparent 100%);
    }

    /*  HOW ROAD BACKGROUND  */
    #how {
      position: relative;
      overflow: hidden;
    }

    .how-road-bg {
      position: absolute;
      inset: 0;
      opacity: 0.18;
      pointer-events: none;
      z-index: 0;
      mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
    }

    #how .rv,
    #how .how-steps,
    #how>div:not(.how-road-bg) {
      position: relative;
      z-index: 1;
    }

    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦
   VELIXIO — FINAL POLISH LAYER
   Scrollbar · Focus states · Selection · Print
   ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */

    /* Custom scrollbar */
    ::-webkit-scrollbar {
      width: 6px;
    }

    ::-webkit-scrollbar-track {
      background: var(--bg);
    }

    ::-webkit-scrollbar-thumb {
      background: rgba(200, 160, 32, .25);
      border-radius: 3px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: rgba(200, 160, 32, .45);
    }

    /* Text selection */
    ::selection {
      background: rgba(200, 160, 32, .22);
      color: var(--white);
    }

    /* Focus ring — accessible + branded */
    :focus-visible {
      outline: 2px solid rgba(200, 160, 32, .6);
      outline-offset: 3px;
      border-radius: 4px;
    }

    /* Smooth placeholder */
    ::placeholder {
      color: var(--muted2);
    }

    /* Section background alternation — subtle depth gradient */
    #services,
    #why,
    #faq,
    #contact {
      background: var(--bg2);
    }

    #portfolio,
    #engagements,
    #how,
    #cta {
      background: var(--bg);
    }

    /* Inter-section golden hairline separator */
    #speed,
    #services,
    #portfolio,
    #why,
    #engagements,
    #how,
    #pricing,
    #testimonials,
    #faq,
    #cta,
    #contact {
      border-top: 1px solid var(--border);
    }

    /* Marquee — always running, hover effects allowed */
    .marquee-section:hover .marquee-track {
      animation-play-state: running !important;
    }

    .marquee-track:hover {
      animation-play-state: running !important;
    }

    .marquee-item {
      pointer-events: auto;
    }

    /* Scarcity fill animation on load */
    .scarcity-fill {
      animation: fillBar 2s var(--ease-out-expo) 1s both;
    }

    @keyframes fillBar {
      from {
        width: 0
      }

      to {
        width: 80%
      }
    }

    /* Step number glow on hover */
    .step-card:hover .step-num {
      box-shadow: 0 0 0 6px rgba(200, 160, 32, .12), 0 0 24px rgba(200, 160, 32, .25);
    }

    /* Why-item slide on hover */
    .why-item {
      transition: transform .3s var(--ease-spring), background .25s;
      padding: .75rem;
      border-radius: var(--radius-sm);
    }

    .why-item:hover {
      transform: translateX(8px);
      background: rgba(200, 160, 32, .05);
    }

    .why-icon {
      flex-shrink: 0;
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: rgba(200, 160, 32, .08);
      border: 1px solid rgba(200, 160, 32, .14);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      color: var(--gold);
      transition: all .35s var(--ease-spring);
    }

    .why-item:hover .why-icon {
      background: var(--gold);
      color: #000;
      border-color: var(--gold);
      transform: scale(1.1);
    }

    /* Plan card visual improvements */
    .plan-card {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      transition: border-color .3s, transform .4s var(--ease-spring), box-shadow .4s;
      will-change: transform;
      position: relative;
    }

    .plan-card.popular {
      border-color: rgba(200, 160, 32, .3);
    }

    .plan-card.popular::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent 5%, var(--gold) 50%, transparent 95%);
    }

    /* Eng badge — green accent */
    .eng-badge {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      padding: .3rem .8rem;
      background: rgba(74, 222, 128, .08);
      border: 1px solid rgba(74, 222, 128, .2);
      border-radius: 50px;
      font-size: .7rem;
      font-weight: 700;
      color: #4ade80;
      width: fit-content;
      margin-top: .3rem;
    }

    /* Loader refinement */
    #vx-loader {
      background: var(--bg);
    }

    .loader-logo {
      animation: loaderPulse 1.4s ease-in-out infinite;
    }

    /* CTA emoji gentle float */
    .cta-emoji {
      display: inline-block;
      animation: emojiFloat 4s ease-in-out infinite;
    }

    @keyframes emojiFloat {

      0%,
      100% {
        transform: translateY(0) rotate(-2deg);
      }

      50% {
        transform: translateY(-8px) rotate(2deg);
      }
    }

    /* Particle opacity refinement */
    .hp {
      opacity: 0;
      background: rgba(200, 160, 32, .7);
    }

    /* Noise texture — slightly more present */

    /* Print — hide decorative elements */
    @media print {

      #vx-loader,
      #cursor-glow,
      .wa-float,
      .mob-sticky,
      .hero-particles,
      .hero-orb1,
      .hero-orb2 {
        display: none !important;
      }
    }

    /* ✦.✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦
   ✦.✦  VELIXIO v3 — ANIMATION DIET + COLOR SYSTEM + SECTION HOVER
   ✦.✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */

    /*  1. COLOUR SYSTEM OVERRIDE —
   Problème précédent : --bg #09090C et --bg2 #0F0F13 = quasi identiques.
   Fix : fond avec légère teinte bleue-nuit (l'or ressort mieux sur du bleu-noir
   que sur du noir pur), et écart de luminosité plus marqué entre sections.
   — */

    /* Sections en alternance vraiment contrastées */
    body {
      background: var(--bg);
    }

    #services,
    #why,
    #faq,
    #contact {
      background: var(--bg2);
    }

    #speed,
    #portfolio,
    #engagements,
    #how,
    #pricing,
    #testimonials,
    #cta {
      background: var(--bg);
    }

    #vs {
      background: var(--bg2);
    }

    /*  2. KILL LOOPING ANIMATIONS —
   On garde : marquee, rocket (parfaite), chart-draw (why), loader,
              ring WA (une seule), hero-entrance (one-shot).
   On supprime : hero-grid-pulse, float-badge, border-glow, popularGlow,
                 orbs trop rapides, particules, shimmerLoop, emojiFloat.
   — */

    /* Orbs : immobiles sauf un breathing ultralent */
    .hero-orb1 {
      animation: orbBreath 20s ease-in-out infinite !important;
      will-change: opacity;
    }

    .hero-orb2 {
      animation: orbBreath 26s ease-in-out infinite 8s !important;
      will-change: opacity;
    }

    @keyframes orbBreath {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: .6;
      }
    }

    /* Hero grid — statique */
    .hero-grid {
      animation: none !important;
      opacity: .045 !important;
    }

    /* Badges — pas de float */
    .hero-badge {
      animation: heroSlideDown .65s var(--ease-out-expo) .15s both !important;
    }

    .price-pop {
      animation: none !important;
    }

    .cta-emoji {
      animation: none !important;
      display: inline-block;
    }

    /* Plan card popular — glow statique, pas pulsant */
    .plan-card.popular {
      animation: none !important;
      box-shadow: 0 0 0 1px rgba(201, 162, 39, .25), 0 16px 50px rgba(0, 0, 0, .3) !important;
    }

    /* Titre gold — shimmer très lent pour rester élégant */
    .line-gold,
    .hero-title .line-gold {
      animation: goldShimmer 12s ease-in-out infinite !important;
    }

    /* Emoji fusée CTA — aucune animation supplémentaire (elle est parfaite dans SVG) */
    .cta-emoji {
      animation: none !important;
    }

    /* Particules hero — supprimées pour alléger */
    .hero-particles {
      display: none !important;
    }

    /* WA ring — une seule bague, plus lente */
    .wa-float::after {
      animation: ring 3s ease-out infinite !important;
    }

    .wa-float::before {
      display: none !important;
    }

    /* Loader bar — one-shot (OK) */
    /* Marquee — on garde */

    /*  3. TRANSITIONS UNIFORMES  */
    /* Toutes les cartes : même durée, même easing */
    .service-card,
    .portfolio-card,
    .step-card,
    .plan-card,
    .eng-card,
    .testi-card,
    .metric-card,
    .why-item,
    .vs-item,
    .faq-item {
      transition: border-color .28s ease,
        transform .35s cubic-bezier(.16, 1, .3, 1),
        box-shadow .35s ease !important;
      will-change: transform;
    }

    /* Icônes : même durée partout */
    .svc-icon,
    .why-icon,
    .eng-icon,
    .cp-icon,
    .step-num,
    .testi-avatar,
    .vs-item-icon,
    .vs-card-header-icon {
      transition: background .28s ease,
        color .28s ease,
        border-color .28s ease,
        transform .35s cubic-bezier(.175, .885, .32, 1.275) !important;
      will-change: transform;
    }

    /* Boutons */
    .btn-primary,
    .btn-secondary,
    .nav-cta,
    .form-submit,
    .plan-cta {
      transition: background .22s ease,
        color .22s ease,
        border-color .22s ease,
        transform .32s cubic-bezier(.175, .885, .32, 1.275),
        box-shadow .32s ease !important;
      will-change: transform;
    }

    /*  4. SECTION "POURQUOI NOUS" — hover riche  */

    /* Why-items : dégagé, propre */
    .why-item {
      padding: 1rem 1.1rem;
      border-radius: 12px;
      border: 1px solid transparent;
      cursor: default;
      position: relative;
    }

    .why-item:hover {
      transform: translateX(6px) !important;
      background: rgba(201, 162, 39, .06) !important;
      border-color: rgba(201, 162, 39, .14) !important;
      box-shadow: none !important;
    }

    .why-item:hover .why-icon {
      background: var(--gold) !important;
      color: #000 !important;
      border-color: var(--gold) !important;
      transform: scale(1.08) !important;
    }

    .why-item:hover .why-text h4 {
      color: var(--gold2);
    }

    .why-text h4 {
      transition: color .25s ease;
    }

    /* VS section — hover bad items : s'opacifie + légère teinte rouge */
    .vs-card.bad .vs-item:hover {
      background: rgba(255, 60, 60, .07) !important;
      border-color: rgba(255, 60, 60, .18) !important;
      transform: none !important;
    }

    .vs-card.bad .vs-item:hover .vs-item-title {
      color: #ff8080;
    }

    .vs-card.bad .vs-item:hover .vs-item-desc {
      color: rgba(248, 248, 246, .55);
    }

    .vs-card.bad .vs-item:hover .vs-item-icon {
      background: rgba(255, 60, 60, .25) !important;
      transform: scale(1.1) !important;
    }

    /* VS section — hover good items : glow doré */
    .vs-card.good .vs-item:hover {
      background: rgba(201, 162, 39, .12) !important;
      border-color: rgba(201, 162, 39, .28) !important;
      transform: translateX(4px) !important;
      box-shadow: 4px 0 16px rgba(201, 162, 39, .08) !important;
    }

    .vs-card.good .vs-item:hover .vs-item-title {
      color: var(--gold2);
    }

    .vs-card.good .vs-item:hover .vs-item-icon {
      background: var(--gold) !important;
      color: #000 !important;
      transform: scale(1.1) !important;
    }

    .vs-item-title {
      transition: color .25s ease;
    }

    /* VS items transitions */
    .vs-item {
      transition: background .25s ease,
        border-color .25s ease,
        transform .3s cubic-bezier(.16, 1, .3, 1),
        box-shadow .25s ease !important;
      cursor: default;
    }

    /*  5. COULEURS MIEUX GÉRÉES —
   Séparateurs de section avec dégradé doré discret en haut
   — */
    #services::before,
    #portfolio::before,
    #why::before,
    #engagements::before,
    #how::before,
    #pricing::before,
    #testimonials::before,
    #faq::before,
    #vs::before,
    #cta::before,
    #contact::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: min(500px, 60%);
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(201, 162, 39, .2), transparent);
      pointer-events: none;
    }

    /* Marquee items — juste une indication douce, pas de scale agressif */
    .marquee-item:hover {
      background: rgba(201, 162, 39, .08) !important;
      color: var(--gold2) !important;
      transform: translateY(-2px) !important;
      box-shadow: none !important;
    }

    /* Nav links hover — underline gold */
    .nav-links a:hover {
      color: var(--white) !important;
    }

    /* Section title .g — gradient or doux */
    .section-title .g {
      background: linear-gradient(90deg, var(--gold), var(--gold2)) !important;
      -webkit-background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
      background-clip: text !important;
    }

    /* Service cards : hover uniquement visuel, pas de translate */
    .service-card:hover {
      transform: none !important;
      box-shadow: inset 0 0 0 1px rgba(201, 162, 39, .18) !important;
    }

    /* Hero subtitle — meilleure lisibilité */
    .hero-sub {
      color: rgba(248, 248, 246, .65) !important;
      font-size: 1.05rem;
    }

    /* Muted text légèrement plus lisible */
    .stat-label,
    .section-sub,
    .svc-desc,
    .step-desc,
    .why-text p,
    .testi-text,
    .eng-desc,
    .portfolio-desc {
      color: rgba(248, 248, 246, .60) !important;
    }

    /*  6. MICRO-DÉTAILS PREMIUM — */

    /* Badge fire "Pourquoi nous" — ajouter une bordure */
    .vs-badge-fire {
      border: 1px solid rgba(201, 162, 39, .2) !important;
    }

    /* Stat items — léger glow au hover plutôt que scale agressif */
    .stat-item:hover .stat-num {
      color: var(--gold2) !important;
      transform: none !important;
    }

    .stat-item:hover {
      transform: none !important;
    }

    /* Form inputs — focus ring plus propre */
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
      border-color: var(--gold) !important;
      box-shadow: 0 0 0 2px rgba(201, 162, 39, .12) !important;
    }

    /* Scarcity fill — statique, pas d'animation au load */
    .scarcity-fill {
      animation: none !important;
      width: 80% !important;
    }

    /* Eng guarantee strip — border visible */
    .eng-guarantee-strip {
      border: 1px solid rgba(201, 162, 39, .18) !important;
    }

    /* Footer separator gold */
    footer::before {
      opacity: 1 !important;
    }

    /* Scrollbar raffinée */
    /*  7. CTA EMOJI — retirer l'animation flottante, la fusée SVG suffit  */
    .cta-emoji {
      font-size: 2.8rem;
    }

    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦
   SPEED SECTION — v8 editorial
   ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    #speed {
      background: var(--bg);
      position: relative;
      padding-top: 7rem;
      padding-bottom: 7rem;
    }

    #speed::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: min(500px, 60%);
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(201, 162, 39, .22), transparent);
      pointer-events: none;
    }

    /*  Wrapper centré  */
    .spd-wrap {
      max-width: 980px;
      margin: 0 auto;
    }

    /*  En-tête centré  */
    .spd-header {
      text-align: center;
      margin-bottom: 5rem;
    }

    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦
   CENTREPIECE — le grand chiffre
✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    .spd-centrepiece {
      text-align: center;
      margin-bottom: 4.5rem;
      position: relative;
    }

    /* Ligne décorative derrière le chiffre */
    .spd-centrepiece::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 340px;
      height: 340px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(201, 162, 39, .1) 0%, transparent 70%);
      filter: blur(30px);
      pointer-events: none;
    }

    .spd-eyebrow {
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .3em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 1rem;
      display: block;
    }

    .spd-hero-num {
      font-family: var(--ffd);
      font-size: clamp(9rem, 22vw, 16rem);
      font-weight: 900;
      letter-spacing: -.07em;
      line-height: 1;
      padding: .05em .1em;
      background: linear-gradient(170deg, #F5D87A 0%, #E8BF45 35%, #C9A227 70%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      display: inline-block;
      position: relative;
      z-index: 1;
    }

    .spd-hero-unit {
      font-family: var(--ffd);
      font-size: clamp(1.8rem, 4vw, 3rem);
      font-weight: 900;
      letter-spacing: -.02em;
      color: var(--gold2);
      display: block;
      margin-top: -.5rem;
      position: relative;
      z-index: 1;
    }

    .spd-hero-caption {
      font-size: 1rem;
      color: var(--muted);
      margin-top: 1rem;
      position: relative;
      z-index: 1;
    }

    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦
   ÉTAPES — ligne horizontale
✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    .spd-steps {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      gap: 0;
      margin-bottom: 5rem;
      position: relative;
    }

    /* Ligne de connexion */
    .spd-steps::before {
      content: '';
      position: absolute;
      top: 14px;
      left: 10%;
      right: 10%;
      height: 1px;
      background: linear-gradient(90deg,
          transparent,
          rgba(201, 162, 39, .18) 15%,
          rgba(201, 162, 39, .35) 50%,
          rgba(74, 222, 128, .4) 82%,
          transparent);
    }

    .spd-step {
      flex: 1;
      text-align: center;
      padding: 0 .75rem;
      position: relative;
    }

    .spd-step-dot {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      margin: 0 auto 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
    }

    .spd-step-dot.d1 {
      background: var(--bg);
      border: 2px solid rgba(201, 162, 39, .3);
    }

    .spd-step-dot.d2 {
      background: var(--bg);
      border: 2px solid rgba(201, 162, 39, .5);
    }

    .spd-step-dot.d3 {
      background: var(--bg);
      border: 2px solid rgba(201, 162, 39, .7);
    }

    .spd-step-dot.d4 {
      background: var(--gold);
      border: 2px solid var(--gold2);
      box-shadow: 0 0 20px rgba(201, 162, 39, .4), 0 0 6px rgba(201, 162, 39, .6);
    }

    .spd-step-dot svg {
      width: 11px;
      height: 11px;
    }

    .spd-step-dot.d1 svg,
    .spd-step-dot.d2 svg,
    .spd-step-dot.d3 svg {
      color: var(--gold2);
    }

    .spd-step-dot.d4 svg {
      color: #000;
    }

    .spd-step-when {
      font-family: var(--ffd);
      font-size: .7rem;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--gold2);
      margin-bottom: .3rem;
    }

    .spd-step:last-child .spd-step-when {
      color: #4ade80;
    }

    .spd-step-name {
      font-size: .82rem;
      font-weight: 600;
      color: var(--white);
      line-height: 1.4;
    }

    .spd-step:last-child .spd-step-name {
      color: #4ade80;
    }

    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦
   COMPARAISON — typographique, pas de case
✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    .spd-vs {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2.5rem;
      margin-bottom: 4.5rem;
    }

    .spd-vs-item {
      text-align: center;
    }

    .spd-vs-item-label {
      font-size: .65rem;
      font-weight: 700;
      letter-spacing: .22em;
      text-transform: uppercase;
      margin-bottom: .5rem;
    }

    .spd-vs-item.v .spd-vs-item-label {
      color: var(--gold);
    }

    .spd-vs-item.c .spd-vs-item-label {
      color: var(--muted2);
    }

    .spd-vs-num {
      font-family: var(--ffd);
      font-weight: 900;
      letter-spacing: -.05em;
      line-height: 1;
    }

    .spd-vs-item.v .spd-vs-num {
      font-size: 3.8rem;
      background: linear-gradient(135deg, #F5D87A, #C9A227);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .spd-vs-item.c .spd-vs-num {
      font-size: 3.8rem;
      color: rgba(255, 255, 255, .18);
    }

    .spd-vs-unit {
      font-family: var(--ffd);
      font-size: .85rem;
      font-weight: 700;
      margin-top: .2rem;
    }

    .spd-vs-item.v .spd-vs-unit {
      color: var(--gold2);
    }

    .spd-vs-item.c .spd-vs-unit {
      color: rgba(255, 255, 255, .2);
    }

    .spd-vs-sub {
      font-size: .72rem;
      margin-top: .3rem;
      line-height: 1.5;
    }

    .spd-vs-item.v .spd-vs-sub {
      color: var(--muted);
    }

    .spd-vs-item.c .spd-vs-sub {
      color: rgba(255, 255, 255, .2);
    }

    /* Diviseur VS */
    .spd-vs-divider {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .5rem;
    }

    .spd-vs-divider-line {
      width: 1px;
      height: 60px;
      background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .12), transparent);
    }

    .spd-vs-divider-badge {
      font-family: var(--ffd);
      font-size: .7rem;
      font-weight: 900;
      color: rgba(255, 255, 255, .3);
      letter-spacing: .1em;
    }

    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦
   BARRE RATIO — visuelle
✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    .spd-ratio-wrap {
      max-width: 560px;
      margin: 0 auto 4.5rem;
    }

    .spd-ratio-label-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: .6rem;
    }

    .spd-ratio-name {
      font-size: .7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .12em;
    }

    .spd-ratio-name.v {
      color: var(--gold2);
    }

    .spd-ratio-name.c {
      color: rgba(255, 255, 255, .22);
    }

    .spd-ratio-track {
      height: 6px;
      background: rgba(255, 255, 255, .05);
      border-radius: 3px;
      overflow: hidden;
      margin-bottom: .5rem;
    }

    .spd-ratio-fill {
      height: 100%;
      border-radius: 3px;
    }

    .spd-ratio-fill.v {
      width: 8.5%;
      background: linear-gradient(90deg, #C9A227, #F5D87A);
    }

    .spd-ratio-fill.c {
      width: 58%;
      background: rgba(255, 255, 255, .14);
    }

    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦
   3 chiffres clés — centrés, aérés
✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    .spd-trio {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      max-width: 700px;
      margin: 0 auto;
      padding-top: 3rem;
      border-top: 1px solid rgba(255, 255, 255, .07);
    }

    .spd-trio-item {
      text-align: center;
      padding: 0 1.5rem;
      border-right: 1px solid rgba(255, 255, 255, .07);
    }

    .spd-trio-item:last-child {
      border-right: none;
    }

    .spd-trio-num {
      font-family: var(--ffd);
      font-size: 2.4rem;
      font-weight: 900;
      letter-spacing: -.05em;
      line-height: 1;
    }

    .spd-trio-txt {
      font-size: .7rem;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--muted2);
      margin-top: .4rem;
    }

    @media(max-width:768px) {
      .spd-hero-num {
        font-size: 8rem;
      }

      .spd-steps {
        flex-wrap: wrap;
        gap: 1.5rem;
      }

      .spd-steps::before {
        display: none;
      }

      .spd-step {
        min-width: 42%;
      }

      .spd-vs {
        flex-direction: column;
        gap: 1.5rem;
      }

      .spd-vs-divider {
        flex-direction: row;
      }

      .spd-vs-divider-line {
        width: 40px;
        height: 1px;
      }

      .spd-trio {
        grid-template-columns: 1fr;
      }

      .spd-trio-item {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, .07);
        padding: 1.2rem 0;
      }

      .spd-trio-item:last-child {
        border-bottom: none;
      }
    }

    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦
   SERVICES — bento premium  v13
✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    .svc-bento {
      margin-top: 4.5rem;
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr;
      gap: 1.2rem
    }

    .svc-b {
      border-radius: 20px;
      padding: 2.4rem;
      position: relative;
      overflow: hidden;
      cursor: default;
      background: var(--bg2);
      border: 1px solid rgba(255, 255, 255, .07);
      display: flex;
      flex-direction: column;
      transition: border-color .35s, box-shadow .35s, transform .4s cubic-bezier(.16, 1, .3, 1)
    }

    .svc-b:hover {
      border-color: rgba(201, 162, 39, .28);
      box-shadow: 0 24px 60px rgba(0, 0, 0, .35), 0 0 0 1px rgba(201, 162, 39, .08);
    }

    .svc-b.large {
      grid-column: 1;
      grid-row: 1/3;
      justify-content: space-between
    }

    .svc-b::before {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity .4s;
      pointer-events: none
    }

    .svc-b:hover::before {
      opacity: 1
    }

    .svc-b:nth-child(1)::before {
      background: radial-gradient(ellipse at 20% 85%, rgba(201, 162, 39, .14), transparent 65%)
    }

    .svc-b:nth-child(2)::before {
      background: radial-gradient(ellipse at 80% 20%, rgba(232, 191, 69, .11), transparent 65%)
    }

    .svc-b:nth-child(3)::before {
      background: radial-gradient(ellipse at 20% 80%, rgba(245, 216, 122, .09), transparent 65%)
    }

    .svc-b:nth-child(4)::before {
      background: radial-gradient(ellipse at 75% 25%, rgba(201, 162, 39, .11), transparent 65%)
    }

    .svc-b:nth-child(5)::before {
      background: radial-gradient(ellipse at 30% 75%, rgba(232, 191, 69, .09), transparent 65%)
    }

    .svc-b:nth-child(6)::before {
      background: radial-gradient(ellipse at 70% 30%, rgba(245, 216, 122, .1), transparent 65%)
    }

    .svc-b-icon {
      width: 50px;
      height: 50px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
      flex-shrink: 0;
      margin-bottom: 1.6rem;
      transition: transform .4s cubic-bezier(.175, .885, .32, 1.275)
    }

    .svc-b:hover .svc-b-icon {
      transform: scale(1.08)
    }

    .svc-b:nth-child(1) .svc-b-icon {
      background: rgba(201, 162, 39, .18);
      border: 1px solid rgba(201, 162, 39, .3);
      color: #E8BF45
    }

    .svc-b:nth-child(2) .svc-b-icon {
      background: rgba(232, 191, 69, .14);
      border: 1px solid rgba(232, 191, 69, .25);
      color: #F5D87A
    }

    .svc-b:nth-child(3) .svc-b-icon {
      background: rgba(245, 216, 122, .12);
      border: 1px solid rgba(245, 216, 122, .2);
      color: #C9A227
    }

    .svc-b:nth-child(4) .svc-b-icon {
      background: rgba(201, 162, 39, .14);
      border: 1px solid rgba(201, 162, 39, .25);
      color: #E8BF45
    }

    .svc-b:nth-child(5) .svc-b-icon {
      background: rgba(232, 191, 69, .12);
      border: 1px solid rgba(232, 191, 69, .22);
      color: #F5D87A
    }

    .svc-b:nth-child(6) .svc-b-icon {
      background: rgba(245, 216, 122, .1);
      border: 1px solid rgba(245, 216, 122, .18);
      color: #C9A227
    }

    .svc-b-icon svg {
      width: 22px;
      height: 22px
    }

    .svc-b-icon::after {
      content: '';
      position: absolute;
      inset: -10px;
      border-radius: 22px;
      background: inherit;
      filter: blur(14px);
      opacity: 0;
      z-index: -1;
      transition: opacity .35s
    }

    .svc-b:hover .svc-b-icon::after {
      opacity: .5
    }

    .svc-b-tag {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      padding: .3rem .85rem;
      margin-bottom: 1.5rem;
      background: rgba(201, 162, 39, .1);
      border: 1px solid rgba(201, 162, 39, .2);
      border-radius: 50px;
      font-size: .67rem;
      font-weight: 700;
      color: var(--gold2);
      letter-spacing: .1em;
      text-transform: uppercase;
      position: relative;
      z-index: 1;
      width: fit-content
    }

    .svc-b-body {
      position: relative;
      z-index: 1;
      flex: 1;
      display: flex;
      flex-direction: column
    }

    .svc-b-num {
      font-family: var(--ffd);
      font-size: .67rem;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--muted2);
      margin-bottom: .7rem;
      display: block;
      transition: color .25s
    }

    .svc-b:hover .svc-b-num {
      color: var(--gold)
    }

    .svc-b-name {
      font-family: var(--ffd);
      font-weight: 800;
      letter-spacing: -.035em;
      color: var(--white);
      line-height: 1.12;
      transition: color .25s
    }

    .svc-b.large .svc-b-name {
      font-size: 2.1rem;
      margin-bottom: .9rem
    }

    .svc-b:not(.large) .svc-b-name {
      font-size: 1.12rem;
      margin-bottom: .55rem
    }

    .svc-b:hover .svc-b-name {
      color: var(--gold2)
    }

    .svc-b-desc {
      font-size: .82rem;
      color: var(--muted);
      line-height: 1.7;
      position: relative;
      z-index: 1;
      transition: color .25s
    }

    .svc-b:hover .svc-b-desc {
      color: rgba(248, 248, 246, .65)
    }

    .svc-b-bg-num {
      position: absolute;
      bottom: -.5rem;
      right: -.5rem;
      font-family: var(--ffd);
      font-size: 8rem;
      font-weight: 900;
      letter-spacing: -.08em;
      color: rgba(201, 162, 39, .05);
      line-height: 1;
      user-select: none;
      pointer-events: none;
      z-index: 0;
      transition: color .4s
    }

    .svc-b.large:hover .svc-b-bg-num {
      color: rgba(201, 162, 39, .09)
    }

    .svc-b-arrow {
      position: absolute;
      bottom: 1.8rem;
      right: 1.8rem;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(201, 162, 39, .1);
      border: 1px solid rgba(201, 162, 39, .18);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--gold2);
      font-size: .75rem;
      opacity: 0;
      transform: translateY(6px) scale(.85);
      transition: opacity .3s, transform .35s cubic-bezier(.175, .885, .32, 1.275);
      z-index: 2
    }

    .svc-b:hover .svc-b-arrow {
      opacity: 1;
      transform: translateY(0) scale(1)
    }

    @media(max-width:900px) {
      .svc-bento {
        grid-template-columns: 1fr 1fr
      }

      .svc-b.large {
        grid-column: 1/3;
        grid-row: auto
      }

      .svc-b.large .svc-b-name {
        font-size: 1.6rem
      }
    }

    @media(max-width:560px) {
      .svc-bento {
        grid-template-columns: 1fr
      }

      .svc-b.large {
        grid-column: 1
      }
    }


    /* ✦.✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦
   ✦.✦   VELIXIO v14 — PREMIUM DESIGN UPGRADES                  ✦.✦
   ✦.✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */

    /*  GLASSMORPHISM SERVICE CARDS  */
    .svc-b {
      backdrop-filter: blur(0px);
      transition: border-color .35s, box-shadow .35s, transform .4s cubic-bezier(.16, 1, .3, 1), backdrop-filter .35s !important;
    }

    .svc-b:hover {
      backdrop-filter: blur(6px);
    }

    /*  HERO SECTION ENHANCEMENTS  */
    #hero {
      background: radial-gradient(ellipse 120% 80% at 30% 60%, rgba(200, 160, 32, .04) 0%, transparent 60%),
        var(--bg);
    }

    /* Enhanced hero title animation */
    @keyframes heroSlideDown {
      from {
        opacity: 0;
        transform: translateY(-12px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes heroFadeUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .hero-title {
      animation: heroFadeUp .9s var(--ease-out-expo) .3s both;
    }

    .hero-sub {
      animation: heroFadeUp .9s var(--ease-out-expo) .5s both;
    }

    .hero-actions {
      animation: heroFadeUp .9s var(--ease-out-expo) .65s both;
    }

    .hero-stats {
      animation: heroFadeUp .9s var(--ease-out-expo) .8s both;
    }

    /*  PREMIUM BUTTON GLOW  */
    .btn-primary {
      background: linear-gradient(135deg, var(--gold) 0%, var(--gold2) 60%, var(--gold3) 100%) !important;
      background-size: 200% 100%;
      transition: all .35s cubic-bezier(.175, .885, .32, 1.275) !important;
    }

    .btn-primary:hover {
      background-position: 100% 0 !important;
      box-shadow: 0 0 0 1px rgba(200, 160, 32, .4), 0 8px 32px rgba(200, 160, 32, .45), 0 0 60px rgba(200, 160, 32, .12) !important;
    }

    /*  MARQUEE ENHANCED GRADIENT MASKS  */
    .marquee-section {
      background: linear-gradient(to bottom, rgba(15, 15, 19, 0), var(--bg2), rgba(15, 15, 19, 0));
      padding: 2.5rem 0;
    }

    /*  SECTION GRADIENT SEPARATOR  */
    section+section::before,
    .marquee-section+section::before {
      content: '';
      display: block;
    }

    /*  PORTFOLIO CARDS ENHANCED  */
    .portfolio-card {
      transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s, border-color .35s !important;
    }

    .portfolio-card:hover {
      transform: translateY(-8px) scale(1.005) !important;
      box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(200, 160, 32, .12) !important;
      border-color: rgba(200, 160, 32, .25) !important;
    }

    /*  STATS COUNTER GLOW  */
    .stat-num {
      background: linear-gradient(135deg, var(--white) 0%, rgba(249, 249, 247, .7) 100%);
      -webkit-background-clip: text;
      background-clip: text;
    }

    .stat-item:hover .stat-num {
      background: linear-gradient(135deg, var(--gold) 0%, var(--gold3) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: none;
    }

    /*  SERVICES BENTO GRID GLOW  */
    .svc-b.large {
      background: linear-gradient(145deg, var(--bg2) 0%, rgba(18, 18, 24, 1) 100%) !important;
      position: relative;
      overflow: hidden;
    }

    .svc-b.large::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 280px;
      height: 280px;
      background: radial-gradient(ellipse at 80% 20%, rgba(200, 160, 32, .08), transparent 65%);
      pointer-events: none;
    }

    /*  CONTACT FORM FOCUS RING  */
    .form-group input:focus,
    .form-group textarea:focus,
    .form-group select:focus {
      box-shadow: 0 0 0 2px rgba(200, 160, 32, .2), 0 0 20px rgba(200, 160, 32, .08) !important;
      background: rgba(255, 255, 255, .05) !important;
    }

    /*  FOOTER ENHANCED  */
    footer {
      background: linear-gradient(to bottom, #07070B, #050508) !important;
    }

    /*  PRICING CARDS FEATURED  */
    .plan-card.popular {
      background: linear-gradient(160deg, rgba(22, 20, 15, 1) 0%, rgba(18, 15, 8, 1) 100%) !important;
    }

    /*  WHY SECTION VISUAL PANEL  */
    .why-visual,
    .why-illus-wrap {
      background: linear-gradient(145deg, var(--bg) 0%, rgba(14, 13, 20, 1) 100%) !important;
    }

    /*  TESTIMONIALS ENHANCED  */
    .testi-card {
      background: linear-gradient(145deg, var(--bg2) 0%, rgba(16, 16, 22, 1) 100%) !important;
    }

    .testi-card:hover {
      background: linear-gradient(145deg, rgba(20, 19, 26, 1) 0%, rgba(18, 17, 24, 1) 100%) !important;
    }

    /*  ENGAGEMENT CARDS  */
    .eng-card:hover {
      background: linear-gradient(145deg, rgba(18, 17, 24, 1) 0%, rgba(15, 14, 20, 1) 100%) !important;
    }

    /*  SCARCITY FILL GRADIENT  */
    .scarcity-fill {
      background: linear-gradient(90deg, var(--gold), var(--gold2), var(--gold3)) !important;
      animation: none !important;
    }

    /*  ENHANCED SCROLLBAR  */
    /*  HERO IMAGE FRAME REVEAL  */
    .hero-illus-wrap {
      animation: heroImageReveal 1.2s var(--ease-out-expo) 0.4s both, illusFloat 7s ease-in-out 1.6s infinite !important;
    }

    @keyframes heroImageReveal {
      from {
        opacity: 0;
        transform: translateY(-40%) scale(.92);
      }

      to {
        opacity: 1;
        transform: translateY(-50%) scale(1);
      }
    }

    /*  SECTION LABEL SPARKLE  */
    .section-label::before {
      content: '◆';
      font-size: .55rem;
      opacity: .7;
      animation: twinkle 3s ease-in-out infinite;
    }

    /*  MOBILE IMAGE  */
    @media(max-width:1100px) {
      .hero-illus-wrap {
        display: none !important;
      }

      #hero {
        min-height: 100svh;
      }
    }

    /*  FINAL POLISH — reduce motion  */
    @media(prefers-reduced-motion: reduce) {

      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
      }
    }

    /* ✦.✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦
   ✦.✦   NOS EXPERTISES — REDESIGN PREMIUM v16                             ✦.✦
   ✦.✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */

    /*  WRAPPER  */
    .exp-wrap {
      margin-top: 5rem;
      display: flex;
      flex-direction: column;
      gap: 1.4rem;
    }

    /* —
   CARTE HÉRO — Site Vitrine Premium
— */
    .exp-hero {
      background: linear-gradient(140deg, rgba(200, 160, 32, .1) 0%, rgba(200, 160, 32, .04) 40%, var(--bg2) 70%);
      border: 1px solid rgba(200, 160, 32, .24);
      border-radius: 24px;
      padding: 3.5rem 4rem;
      display: grid;
      grid-template-columns: 1fr 340px;
      gap: 4rem;
      align-items: center;
      position: relative;
      overflow: hidden;
      transition: border-color .38s var(--ease-smooth), box-shadow .38s var(--ease-smooth);
    }

    .exp-hero:hover {
      border-color: rgba(200, 160, 32, .4);
      box-shadow: 0 32px 80px rgba(0, 0, 0, .3), 0 0 0 1px rgba(200, 160, 32, .1);
    }

    /* Ligne dorée en haut */
    .exp-hero::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent 5%, var(--gold) 50%, transparent 95%);
    }

    /* Grand numéro décoratif en fond */
    .exp-hero-bg-num {
      position: absolute;
      bottom: -1.5rem;
      right: -1rem;
      font-family: var(--ffd);
      font-size: 13rem;
      font-weight: 900;
      letter-spacing: -.1em;
      color: rgba(200, 160, 32, .04);
      line-height: 1;
      user-select: none;
      pointer-events: none;
      transition: color .4s;
    }

    .exp-hero:hover .exp-hero-bg-num {
      color: rgba(200, 160, 32, .07);
    }

    /* Badge "Notre spécialité" */
    .exp-hero-badge {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      padding: .32rem .9rem;
      background: rgba(200, 160, 32, .1);
      border: 1px solid rgba(200, 160, 32, .22);
      border-radius: 50px;
      font-size: .67rem;
      font-weight: 700;
      color: var(--gold2);
      letter-spacing: .14em;
      text-transform: uppercase;
      margin-bottom: 1.4rem;
      width: fit-content;
    }

    /* Numéro au-dessus du titre */
    .exp-hero-num {
      font-family: var(--ffd);
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--gold);
      opacity: .75;
      margin-bottom: .55rem;
    }

    /* Titre principal */
    .exp-hero-name {
      font-family: var(--ffd);
      font-size: clamp(2rem, 3.2vw, 2.7rem);
      font-weight: 900;
      color: var(--white);
      letter-spacing: -.048em;
      line-height: 1.08;
      margin-bottom: 1.1rem;
    }

    /* Description */
    .exp-hero-desc {
      font-size: .92rem;
      color: var(--muted);
      line-height: 1.85;
      max-width: 440px;
      margin-bottom: 2rem;
    }

    /* Grille de features 2✦-2 */
    .exp-feats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .65rem;
    }

    .exp-feat {
      display: flex;
      align-items: center;
      gap: .6rem;
      font-size: .82rem;
      color: var(--muted);
    }

    .exp-feat-ico {
      width: 20px;
      height: 20px;
      border-radius: 6px;
      background: rgba(200, 160, 32, .1);
      border: 1px solid rgba(200, 160, 32, .18);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: .5rem;
      color: var(--gold);
      transition: background .3s, transform .3s;
    }

    .exp-hero:hover .exp-feat-ico {
      background: rgba(200, 160, 32, .18);
      transform: scale(1.08);
    }

    /* Visuel côté droit */
    .exp-hero-right {
      position: relative;
      z-index: 1;
      filter: drop-shadow(0 20px 50px rgba(0, 0, 0, .4));
      transition: transform .5s var(--ease-out-expo);
    }

    .exp-hero:hover .exp-hero-right {
      transform: translateY(-4px);
    }

    /* —
   LIGNES DE CARTES
— */
    .exp-row-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.4rem;
    }

    .exp-row-3 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 1.4rem;
    }

    /* —
   CARTES SERVICES
— */
    .exp-card {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 2.2rem;
      position: relative;
      overflow: hidden;
      transition:
        border-color .38s var(--ease-smooth),
        box-shadow .38s var(--ease-smooth),
        transform .45s cubic-bezier(.16, 1, .3, 1);
      will-change: transform;
    }

    .exp-card:hover {
      border-color: rgba(200, 160, 32, .3);
      box-shadow: 0 24px 60px rgba(0, 0, 0, .38), 0 0 0 1px rgba(200, 160, 32, .08);
      transform: translateY(-5px);
    }

    /* Ligne dorée en haut au hover */
    .exp-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent 10%, var(--gold) 50%, transparent 90%);
      opacity: 0;
      transition: opacity .35s;
    }

    .exp-card:hover::before {
      opacity: 1;
    }

    /* Radial glow en fond au hover */
    .exp-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 0%, rgba(200, 160, 32, .07), transparent 65%);
      opacity: 0;
      transition: opacity .4s;
      pointer-events: none;
    }

    .exp-card:hover::after {
      opacity: 1;
    }

    /* Header : icône + numéro */
    .exp-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 1.5rem;
    }

    /* Icône */
    .exp-card-icon {
      width: 46px;
      height: 46px;
      border-radius: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(200, 160, 32, .09);
      border: 1px solid rgba(200, 160, 32, .18);
      color: var(--gold);
      transition: transform .4s cubic-bezier(.175, .885, .32, 1.275), background .3s, border-color .3s, color .2s;
      position: relative;
      z-index: 1;
      flex-shrink: 0;
    }

    .exp-card:hover .exp-card-icon {
      transform: scale(1.1) rotate(-5deg);
      background: var(--gold);
      color: #000;
      border-color: var(--gold);
      box-shadow: 0 8px 24px rgba(200, 160, 32, .3);
    }

    /* Numéro */
    .exp-card-num {
      font-family: var(--ffd);
      font-size: .67rem;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--muted2);
      position: relative;
      z-index: 1;
      transition: color .25s;
    }

    .exp-card:hover .exp-card-num {
      color: var(--gold);
    }

    /* Nom du service */
    .exp-card-name {
      font-family: var(--ffd);
      font-size: 1.18rem;
      font-weight: 800;
      color: var(--white);
      letter-spacing: -.03em;
      margin-bottom: .55rem;
      line-height: 1.2;
      position: relative;
      z-index: 1;
      transition: color .25s;
    }

    .exp-card:hover .exp-card-name {
      color: var(--gold2);
    }

    /* Description */
    .exp-card-desc {
      font-size: .82rem;
      color: var(--muted);
      line-height: 1.78;
      margin-bottom: 1.5rem;
      position: relative;
      z-index: 1;
    }

    /* Tags */
    .exp-card-tags {
      display: flex;
      flex-wrap: wrap;
      gap: .4rem;
      position: relative;
      z-index: 1;
    }

    .exp-tag {
      padding: .24rem .75rem;
      background: rgba(200, 160, 32, .07);
      border: 1px solid rgba(200, 160, 32, .14);
      border-radius: 50px;
      font-size: .68rem;
      font-weight: 600;
      color: rgba(200, 160, 32, .75);
      letter-spacing: .04em;
      transition: background .25s, color .25s, border-color .25s;
    }

    .exp-card:hover .exp-tag {
      background: rgba(200, 160, 32, .13);
      color: var(--gold2);
      border-color: rgba(200, 160, 32, .25);
    }

    /* —
   RESPONSIVE
— */
    @media(max-width:1050px) {
      .exp-hero {
        grid-template-columns: 1fr;
        padding: 2.8rem;
      }

      .exp-hero-right {
        display: none;
      }

      .exp-hero-bg-num {
        font-size: 9rem;
      }
    }

    @media(max-width:900px) {
      .exp-row-2 {
        grid-template-columns: 1fr;
      }

      .exp-row-3 {
        grid-template-columns: 1fr 1fr;
      }

      .exp-hero {
        padding: 2.2rem;
      }

      .exp-feats {
        grid-template-columns: 1fr;
      }
    }

    @media(max-width:560px) {
      .exp-row-3 {
        grid-template-columns: 1fr;
      }
    }


    /* ✦.✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦
   ✦.✦   VELIXIO v15 — HOVER PREMIUM : ZOOM + ROTATION ANTI-SHIFT         ✦.✦
   ✦.✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦
   
   R≈ GLES :
   - transform-origin: center center  → évite les sauts de position
   - perspective(800px)               → profondeur 3D sans déformation
   - scale() combiné avec rotate()    → le zoom ne pousse JAMAIS les frères
   - translateZ() au lieu de translateY → monte vers l'user sans décaler layout
   - will-change: transform           → GPU layer, pas de repaint
   - isolation: isolate               → contexte de stacking propre
*/

    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦
   1. CARTES SERVICE (BENTO)
✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    .svc-b {
      transform-origin: center center !important;
      will-change: transform !important;
      isolation: isolate;
      transition:
        border-color .38s cubic-bezier(.16, 1, .3, 1),
        box-shadow .38s cubic-bezier(.16, 1, .3, 1),
        transform .45s cubic-bezier(.16, 1, .3, 1) !important;
    }

    .svc-b:hover {
      transform: perspective(900px) translateZ(16px) scale(1.026) rotate(.4deg) !important;
      border-color: rgba(201, 162, 39, .38) !important;
      box-shadow:
        0 0 0 1px rgba(201, 162, 39, .12),
        0 20px 60px rgba(0, 0, 0, .42),
        0 8px 20px rgba(201, 162, 39, .1) !important;
    }

    .svc-b.large:hover {
      transform: perspective(900px) translateZ(12px) scale(1.018) rotate(.25deg) !important;
    }

    .svc-b-icon {
      transform-origin: center center;
      will-change: transform;
      transition: transform .4s cubic-bezier(.175, .885, .32, 1.275) !important;
    }

    .svc-b:hover .svc-b-icon {
      transform: scale(1.14) rotate(-4deg) !important;
    }

    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦
   2. CARTES PLAN / PRICING
✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    .plan-card,
    .price-card {
      transform-origin: center bottom !important;
      will-change: transform !important;
      position: relative !important;
      z-index: 1 !important;
      transition:
        transform .45s cubic-bezier(.16, 1, .3, 1),
        box-shadow .45s cubic-bezier(.16, 1, .3, 1),
        border-color .35s ease,
        z-index 0s .45s !important;
    }

    .plan-card:hover,
    .price-card:hover {
      z-index: 10 !important;
      transform: perspective(1000px) translateZ(18px) scale(1.032) rotate(-.3deg) !important;
      box-shadow:
        0 0 0 1px rgba(200, 160, 32, .18),
        0 32px 80px rgba(0, 0, 0, .48),
        0 12px 30px rgba(200, 160, 32, .08) !important;
      transition-delay: 0s !important;
    }

    .plan-card.popular:hover {
      transform: perspective(1000px) translateZ(22px) scale(1.04) rotate(-.2deg) !important;
    }

    .plans-grid,
    .maint-plans-grid {
      padding-top: 2rem !important;
      overflow: visible !important;
    }

    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦
   3. CARTES ENGAGEMENT
✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    .eng-card {
      transform-origin: center center !important;
      will-change: transform !important;
      transition:
        transform .42s cubic-bezier(.16, 1, .3, 1),
        box-shadow .42s cubic-bezier(.16, 1, .3, 1),
        border-color .3s ease !important;
    }

    .eng-card:hover {
      transform: perspective(800px) translateZ(14px) scale(1.028) rotate(.35deg) !important;
      box-shadow:
        0 0 0 1px rgba(200, 160, 32, .15),
        0 24px 60px rgba(0, 0, 0, .38),
        0 6px 18px rgba(200, 160, 32, .08) !important;
    }

    .eng-icon {
      transform-origin: center center;
      will-change: transform;
      transition: transform .42s cubic-bezier(.175, .885, .32, 1.275), background .3s, color .3s !important;
    }

    .eng-card:hover .eng-icon {
      transform: scale(1.16) rotate(8deg) !important;
      background: var(--gold) !important;
      color: #000 !important;
    }

    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦
   4. CARTES TÉMOIGNAGES
✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    .testi-card {
      transform-origin: center center !important;
      will-change: transform !important;
      transition:
        transform .4s cubic-bezier(.16, 1, .3, 1),
        box-shadow .4s cubic-bezier(.16, 1, .3, 1),
        border-color .3s ease !important;
    }

    .testi-card:hover {
      transform: perspective(900px) translateZ(14px) scale(1.024) rotate(-.35deg) !important;
      box-shadow:
        0 0 0 1px rgba(200, 160, 32, .12),
        0 24px 65px rgba(0, 0, 0, .4) !important;
      border-color: var(--gold-border) !important;
    }

    .testi-avatar {
      transform-origin: center center;
      will-change: transform;
      transition: transform .38s cubic-bezier(.175, .885, .32, 1.275), background .3s !important;
    }

    .testi-card:hover .testi-avatar {
      transform: scale(1.18) rotate(6deg) !important;
      background: var(--gold) !important;
    }

    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦
   5. ETAPES (HOW SECTION)
✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    .step-card {
      transform-origin: center center !important;
      will-change: transform !important;
      transition:
        transform .42s cubic-bezier(.16, 1, .3, 1),
        box-shadow .42s cubic-bezier(.16, 1, .3, 1),
        border-color .3s ease !important;
    }

    .step-card:hover {
      transform: perspective(800px) translateZ(12px) scale(1.03) rotate(.45deg) !important;
      box-shadow:
        0 0 0 1px rgba(200, 160, 32, .14),
        0 20px 55px rgba(0, 0, 0, .35) !important;
      border-color: var(--gold-border) !important;
    }

    .step-num {
      transform-origin: center center;
      will-change: transform;
      transition: transform .42s cubic-bezier(.175, .885, .32, 1.275), box-shadow .35s !important;
    }

    .step-card:hover .step-num {
      transform: scale(1.2) rotate(-6deg) !important;
      box-shadow: 0 0 28px rgba(200, 160, 32, .35) !important;
    }

    .step-emoji {
      transform-origin: center center;
      will-change: transform;
      transition: transform .42s cubic-bezier(.175, .885, .32, 1.275) !important;
    }

    .step-card:hover .step-emoji {
      transform: scale(1.28) rotate(8deg) translateZ(0) !important;
    }

    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦
   6. IC—NES SERVICES (svc-icon)
✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    .svc-icon {
      transform-origin: center center;
      will-change: transform;
      transition: transform .4s cubic-bezier(.175, .885, .32, 1.275), background .35s, color .35s, box-shadow .35s !important;
    }

    .service-card:hover .svc-icon {
      transform: scale(1.2) rotate(-5deg) !important;
      background: var(--gold) !important;
      color: #000 !important;
      box-shadow: 0 6px 22px rgba(200, 160, 32, .32) !important;
    }

    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦
   7. BOUTONS PRINCIPAUX
✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    .btn-primary {
      transform-origin: center center !important;
      will-change: transform !important;
      transition: transform .35s cubic-bezier(.175, .885, .32, 1.275), box-shadow .35s, background .25s !important;
    }

    .btn-primary:hover {
      transform: perspective(400px) translateZ(6px) scale(1.04) rotate(-.25deg) !important;
      box-shadow:
        0 0 0 1px rgba(200, 160, 32, .4),
        0 10px 36px rgba(200, 160, 32, .45),
        0 0 60px rgba(200, 160, 32, .1) !important;
    }

    .nav-cta {
      transform-origin: center center !important;
      will-change: transform !important;
      transition: transform .32s cubic-bezier(.175, .885, .32, 1.275), background .22s, box-shadow .32s !important;
    }

    .nav-cta:hover {
      transform: perspective(400px) translateZ(4px) scale(1.06) rotate(.2deg) !important;
      box-shadow: 0 6px 24px rgba(200, 160, 32, .35) !important;
    }

    .btn-secondary {
      transform-origin: center center !important;
      will-change: transform !important;
      transition: transform .32s cubic-bezier(.175, .885, .32, 1.275), border-color .25s, color .25s, background .25s !important;
    }

    .btn-secondary:hover {
      transform: perspective(400px) translateZ(4px) scale(1.03) rotate(.15deg) !important;
    }

    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦
   8. IC—NES WHY + CONTACT
✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    .why-icon {
      transform-origin: center center;
      will-change: transform;
      transition: transform .4s cubic-bezier(.175, .885, .32, 1.275), background .3s, color .3s !important;
    }

    .why-item:hover .why-icon {
      transform: scale(1.18) rotate(10deg) !important;
      background: var(--gold) !important;
      color: #000 !important;
    }

    .cp-icon {
      transform-origin: center center;
      will-change: transform;
      transition: transform .38s cubic-bezier(.175, .885, .32, 1.275), background .3s, color .3s !important;
    }

    .contact-point:hover .cp-icon {
      transform: scale(1.14) rotate(-8deg) !important;
      background: var(--gold) !important;
      color: #000 !important;
    }

    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦
   9. CARTES MODAL CONTACT
✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    .modal-card {
      transform-origin: center bottom !important;
      will-change: transform !important;
      transition: transform .42s cubic-bezier(.175, .885, .32, 1.275), box-shadow .4s, border-color .3s !important;
    }

    .modal-card:hover {
      transform: perspective(800px) translateZ(18px) scale(1.038) rotate(-.4deg) !important;
    }

    .modal-card.whatsapp:hover {
      transform: perspective(800px) translateZ(18px) scale(1.038) rotate(.4deg) !important;
    }

    .modal-card.form:hover {
      transform: perspective(800px) translateZ(18px) scale(1.038) rotate(-.25deg) !important;
    }

    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦
   10. SOCIAL + WA FLOAT
✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    .social-btn {
      transform-origin: center center;
      will-change: transform;
      transition: transform .35s cubic-bezier(.175, .885, .32, 1.275), background .25s, box-shadow .3s !important;
    }

    .social-btn:hover {
      transform: perspective(300px) translateZ(6px) scale(1.16) rotate(-8deg) !important;
      box-shadow: 0 8px 24px rgba(200, 160, 32, .32) !important;
    }

    .wa-float {
      transform-origin: center center;
      will-change: transform;
      transition: transform .35s cubic-bezier(.175, .885, .32, 1.275) !important;
    }

    .wa-float:hover {
      transform: perspective(200px) translateZ(8px) scale(1.14) rotate(6deg) !important;
    }

    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦
   11. METRIC CARDS
✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    .metric-card {
      transform-origin: center center !important;
      will-change: transform !important;
      transition: transform .42s cubic-bezier(.175, .885, .32, 1.275), box-shadow .4s !important;
    }

    .metric-card:hover {
      transform: perspective(600px) translateZ(14px) scale(1.04) rotate(.5deg) !important;
      box-shadow: 0 16px 50px rgba(0, 0, 0, .4) !important;
    }

    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦
   12. PORTFOLIO CARDS
✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    .portfolio-card {
      transform-origin: center center !important;
      will-change: transform !important;
      transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s, border-color .3s !important;
    }

    .portfolio-card:hover {
      transform: perspective(1000px) translateZ(14px) scale(1.022) rotate(.3deg) !important;
      box-shadow:
        0 0 0 1px rgba(200, 160, 32, .14),
        0 28px 70px rgba(0, 0, 0, .48) !important;
      border-color: rgba(200, 160, 32, .22) !important;
    }

    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦
   13. PLAN CTA BUTTONS (inside cards)
✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    .plan-cta,
    .price-cta {
      transform-origin: center center;
      will-change: transform;
      transition: transform .32s cubic-bezier(.175, .885, .32, 1.275), background .22s, box-shadow .3s !important;
    }

    .plan-cta:hover,
    .price-cta:hover {
      transform: scale(1.04) rotate(-.2deg) !important;
    }

    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦
   14. GRILLE PARENTE — anti-clip
   Les grilles ne doivent jamais 
   écrêter les enfants en hover
✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    .svc-bento,
    .eng-grid,
    .testi-grid,
    .how-steps,
    .maint-grid,
    .metrics-grid,
    .pricing-grid,
    .portfolio-grid {
      overflow: visible !important;
    }

    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦
   15. FORM SUBMIT
✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    .form-submit {
      transform-origin: center center !important;
      will-change: transform !important;
      transition: transform .32s cubic-bezier(.175, .885, .32, 1.275), background .25s, box-shadow .3s !important;
    }

    .form-submit:hover {
      transform: perspective(400px) translateZ(5px) scale(1.025) rotate(-.2deg) !important;
      box-shadow: 0 10px 36px rgba(200, 160, 32, .38) !important;
    }

    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦
   16. MARQUEE ITEMS
✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    .marquee-item {
      transform-origin: center center;
      will-change: transform;
      transition: transform .3s cubic-bezier(.175, .885, .32, 1.275), background .25s, color .25s !important;
    }

    .marquee-item:hover {
      transform: perspective(200px) translateZ(4px) scale(1.06) rotate(.5deg) !important;
      background: var(--gold-light) !important;
      color: var(--gold2) !important;
    }

    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦
   17. CLOCK ITEMS (Contact)
✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    .clock-item {
      transform-origin: center center;
      will-change: transform;
      transition: transform .35s cubic-bezier(.175, .885, .32, 1.275), background .25s, border-color .25s !important;
    }

    .clock-item:hover {
      transform: perspective(300px) translateZ(6px) scale(1.06) rotate(.4deg) !important;
      background: var(--gold-light) !important;
      border-color: var(--gold-border) !important;
    }

    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦
   18. SECTION LABEL STAR
✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    .section-label:hover {
      cursor: default;
    }

    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦
   19. FOOTER LINKS  
✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    .footer-links a {
      transform-origin: center center;
      display: inline-block;
      transition: transform .28s cubic-bezier(.175, .885, .32, 1.275), color .22s !important;
    }

    .footer-links a:hover {
      transform: scale(1.05) rotate(.3deg) !important;
      color: var(--gold2) !important;
    }

    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦
   20. WHY ITEMS (translateX → 
       remplacé par un zoom stable)
✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    .why-item {
      transform-origin: left center !important;
      will-change: transform !important;
      transition: transform .38s cubic-bezier(.16, 1, .3, 1), background .3s, border-color .3s !important;
    }

    .why-item:hover {
      transform: perspective(600px) translateZ(8px) scaleX(1.015) rotate(.2deg) !important;
      background: rgba(200, 160, 32, .06) !important;
      border-color: rgba(200, 160, 32, .14) !important;
    }


    /*  Anti-clip padding pour les grilles  */
    .svc-bento {
      padding: 8px;
      margin: -8px;
    }

    .eng-grid {
      padding: 8px;
      margin: -8px;
    }

    .testi-grid {
      padding: 8px;
      margin: -8px;
    }

    .how-steps {
      padding: 8px;
      margin: -8px;
    }

    .pricing-grid {
      padding: 8px;
      margin: -8px;
    }

    .portfolio-grid {
      padding: 8px;
      margin: -8px;
    }

    .maint-grid {
      padding: 8px;
      margin: -8px;
    }

    .metrics-grid {
      padding: 8px;
      margin: -8px;
    }

    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    /* ✦.✦✦.✦✦.✦ ENHANCED — Comment ça marche ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */

    /* Step cards — enhanced hover */
    .step-card {
      position: relative;
      overflow: hidden;
    }

    .step-card::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: radial-gradient(ellipse at 50% 0%, rgba(200, 160, 32, .08), transparent 70%);
      opacity: 0;
      transition: opacity .4s var(--ease-smooth);
      pointer-events: none;
    }

    .step-card:hover::after {
      opacity: 1;
    }

    .step-card:hover {
      border-color: rgba(200, 160, 32, .35) !important;
      box-shadow: 0 20px 60px rgba(0, 0, 0, .3), 0 0 30px rgba(200, 160, 32, .08) !important;
      transform: translateY(-5px) !important;
    }

    .step-card:hover .step-title {
      color: var(--gold2);
      transition: color .3s;
    }

    .step-card:hover .step-desc {
      color: rgba(250, 250, 248, .7);
      transition: color .3s;
    }

    .step-card:hover .step-emoji {
      transform: scale(1.3) translateY(-6px) !important;
      filter: drop-shadow(0 4px 12px rgba(200, 160, 32, .3));
    }

    .step-card:hover .step-tag {
      background: var(--gold) !important;
      color: #000 !important;
      border-color: var(--gold) !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 4px 12px rgba(200, 160, 32, .2);
    }

    .step-card:hover .step-num {
      box-shadow: 0 0 35px rgba(200, 160, 32, .4), 0 0 12px rgba(200, 160, 32, .3) !important;
      transform: scale(1.15) !important;
    }

    /* Connection line pulse */
    .how-steps {
      position: relative;
    }

    /* Step cards stagger enhancement */
    .how-steps .step-card:nth-child(1) {
      transition-delay: 0s !important;
    }

    .how-steps .step-card:nth-child(2) {
      transition-delay: .08s !important;
    }

    .how-steps .step-card:nth-child(3) {
      transition-delay: .16s !important;
    }

    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    /* ✦.✦✦.✦✦.✦ ENHANCED — Notre travail ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */
    /* ✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦✦.✦ */

    /* Honesty cards */
    .honesty-card {
      transition: transform .4s var(--ease-spring),
        border-color .3s var(--ease-smooth),
        box-shadow .4s var(--ease-smooth) !important;
      cursor: default;
    }

    .honesty-card:hover {
      transform: translateY(-6px) scale(1.02) !important;
      border-color: rgba(200, 160, 32, .3) !important;
      box-shadow: 0 20px 55px rgba(0, 0, 0, .35), 0 0 25px rgba(200, 160, 32, .06) !important;
    }

    .honesty-card:hover svg {
      transform: scale(1.2);
      transition: transform .35s var(--ease-spring);
    }

    /* Portfolio teaser card */
    .portfolio-teaser {
      transition: transform .4s var(--ease-spring),
        border-color .3s var(--ease-smooth),
        box-shadow .4s var(--ease-smooth) !important;
    }

    .portfolio-teaser:hover {
      transform: translateY(-4px) !important;
      border-color: rgba(200, 160, 32, .25) !important;
      box-shadow: 0 16px 50px rgba(0, 0, 0, .3) !important;
    }

    /* Section stagger for Notre travail */
    #testimonials>div {
      transition: opacity .65s var(--ease-smooth), transform .65s var(--ease-out-expo);
    }

    /* ═══════════════════════════════════════════════════════════
       AMÉLIORATIONS UI/UX — Plan cards, Engagements, Steps
    ═══════════════════════════════════════════════════════════ */

    /* ── Plan cards hover — géré entièrement par JS (vx-card-hover) ── */
    .plan-card, .price-card {
      transition: transform .38s cubic-bezier(.22,1,.36,1),
                  box-shadow .38s ease,
                  border-color .3s ease !important;
      will-change: transform !important;
      animation: none !important;
      transform: translateY(0) scale(1) !important;
    }
    .plan-card.vx-hovered, .price-card.vx-hovered {
      transform: translateY(-7px) scale(1.025) !important;
      border-color: rgba(200,160,32,.32) !important;
      box-shadow: 0 22px 55px rgba(0,0,0,.32),
                  0 0 0 1px rgba(200,160,32,.16),
                  0 0 36px rgba(200,160,32,.08) !important;
    }
    .plan-card.popular.vx-hovered {
      box-shadow: 0 26px 65px rgba(0,0,0,.4),
                  0 0 0 1px rgba(200,160,32,.42),
                  0 0 52px rgba(200,160,32,.16) !important;
    }
    .plan-cta {
      transition: transform .22s ease, box-shadow .22s ease, background .22s ease !important;
    }
    .plan-cta:hover {
      transform: translateY(-2px) !important;
      box-shadow: 0 8px 24px rgba(0,0,0,.22) !important;
    }
    .plan-cta.gold-cta:hover {
      box-shadow: 0 8px 28px rgba(200,160,32,.42) !important;
    }

    /* Engagements — refonte numérotée */
    .eng-card {
      position: relative;
      counter-increment: eng-counter;
    }
    .eng-grid {
      counter-reset: eng-counter;
    }
    .eng-card-num {
      position: absolute;
      top: 1.4rem;
      right: 1.6rem;
      font-family: var(--ffd);
      font-size: 2.8rem;
      font-weight: 900;
      line-height: 1;
      color: rgba(200,160,32,.07);
      letter-spacing: -.05em;
      pointer-events: none;
      transition: color .35s;
    }
    .eng-card:hover .eng-card-num {
      color: rgba(200,160,32,.14);
    }
    .eng-card-accent {
      width: 32px;
      height: 3px;
      border-radius: 2px;
      background: linear-gradient(90deg, var(--gold), var(--gold2));
      margin-bottom: .6rem;
      transition: width .35s var(--ease-spring);
    }
    .eng-card:hover .eng-card-accent {
      width: 52px;
    }

    /* Step cards — connecteur de progression */
    .step-card {
      transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .3s ease, background .3s ease;
    }
    .step-card:hover {
      transform: translateY(-6px);
      border-color: rgba(200,160,32,.35) !important;
      background: rgba(200,160,32,.07) !important;
    }
    /* Restaure le rond doré correct pour step-num */
    .step-num {
      width: 52px !important;
      height: 52px !important;
      border-radius: 50% !important;
      background: var(--gold) !important;
      color: #000 !important;
      font-family: var(--ffd) !important;
      font-size: 1.1rem !important;
      font-weight: 900 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin: 0 auto 1.2rem !important;
      position: relative !important;
      z-index: 2 !important;
      transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease !important;
      box-shadow: 0 4px 16px rgba(200,160,32,.25) !important;
    }
    .step-card:hover .step-num {
      transform: scale(1.12) !important;
      box-shadow: 0 0 28px rgba(200,160,32,.45), 0 8px 20px rgba(200,160,32,.2) !important;
    }
    .step-tag {
      transition: background .25s, color .25s;
    }
    .step-tag:hover {
      background: rgba(200,160,32,.15);
      color: var(--gold2);
    }

    /* Barre de progression "Comment ça marche" */
    .how-progress-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      margin: 2.5rem auto 0;
      max-width: 480px;
    }
    .how-progress-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .4rem;
      flex: 1;
      position: relative;
    }
    .how-progress-dot {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(200,160,32,.12);
      border: 2px solid rgba(200,160,32,.3);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--ffd);
      font-size: .75rem;
      font-weight: 800;
      color: var(--gold);
      position: relative;
      z-index: 2;
      transition: background .4s, border-color .4s, transform .3s;
    }
    .how-progress-step.active .how-progress-dot {
      background: var(--gold);
      color: #000;
      border-color: var(--gold);
      box-shadow: 0 0 20px rgba(200,160,32,.5);
      transform: scale(1.15);
    }
    .how-progress-label {
      font-size: .65rem;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .08em;
      text-align: center;
    }
    .how-progress-step.active .how-progress-label {
      color: var(--gold2);
    }
    .how-progress-line {
      flex: 1;
      height: 2px;
      background: rgba(200,160,32,.15);
      margin: 0 4px;
      position: relative;
      top: -12px;
    }
    .how-progress-line-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--gold), var(--gold2));
      width: 0%;
      transition: width 1.2s ease;
      border-radius: 1px;
    }
    .how-progress-line.animated .how-progress-line-fill {
      width: 100%;
    }

    /* Fade-in géré par le système .rv existant — pas d'animation conflictuelle sur plan-card */

    /* VS section hover — géré par les règles .vx-in ci-dessous */

    /* VS badge pulsant */
    .vs-vs-badge {
      animation: vsBadgePulse 2.8s ease-in-out infinite !important;
    }
    @keyframes vsBadgePulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(200,160,32,.3); }
      50%      { box-shadow: 0 0 0 10px rgba(200,160,32,0); }
    }

    /* VS proof-row items — hover pill */
    .vs-proof-item {
      transition: background .25s ease, color .25s ease, transform .2s ease, border-color .25s ease !important;
      cursor: default;
    }
    .vs-proof-item:hover {
      background: rgba(200,160,32,.15) !important;
      border-color: rgba(200,160,32,.35) !important;
      color: var(--gold2) !important;
      transform: translateY(-2px) !important;
    }

    /* VS section header amélioré */
    .vs-header {
      position: relative;
    }
    .vs-header::after {
      content: '';
      display: block;
      width: 60px;
      height: 3px;
      background: linear-gradient(90deg, var(--gold), var(--gold2));
      border-radius: 2px;
      margin: 1.2rem auto 0;
    }

    /* ════════════════════════════════════════════════════════
       VS SECTION — animations fluides & design premium
    ════════════════════════════════════════════════════════ */
    #vs {
      overflow: hidden;
    }

    /* Entrée staggered des vs-items */
    .vs-item {
      opacity: 0;
      transform: translateX(-18px);
      transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1),
                  background .25s ease, border-color .25s ease !important;
    }
    .vs-card.good .vs-item {
      transform: translateX(18px);
    }
    .vs-item.vx-in {
      opacity: 1 !important;
      transform: translateX(0) !important;
    }
    /* Hover sur vs-items — slide + highlight */
    .vs-card.bad .vs-item.vx-in:hover {
      transform: translateX(5px) !important;
      background: rgba(255,60,60,.08) !important;
      border-color: rgba(255,60,60,.22) !important;
    }
    .vs-card.good .vs-item.vx-in:hover {
      transform: translateX(-5px) !important;
      background: rgba(200,160,32,.12) !important;
      border-color: rgba(200,160,32,.28) !important;
    }

    /* Carte VS globale — entrée animée */
    .vs-card {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1),
                  box-shadow .4s ease, border-color .3s ease !important;
    }
    .vs-card.vx-in {
      opacity: 1 !important;
      transform: translateY(0) !important;
    }
    .vs-card.bad.vx-in:hover {
      transform: translateY(-4px) !important;
      box-shadow: 0 20px 50px rgba(0,0,0,.3), 0 0 0 1px rgba(255,60,60,.2) !important;
    }
    .vs-card.good.vx-in:hover {
      transform: translateY(-4px) !important;
      box-shadow: 0 20px 50px rgba(0,0,0,.35), 0 0 0 1px rgba(200,160,32,.45),
                  0 0 40px rgba(200,160,32,.12) !important;
    }

    /* Ligne de connexion centrale animée */
    .vs-vs-badge {
      position: relative;
    }
    .vs-vs-badge::before,
    .vs-vs-badge::after {
      content: '';
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 2px;
      background: linear-gradient(180deg, transparent, rgba(200,160,32,.3), transparent);
      opacity: 0;
      transition: opacity .6s ease, height .8s ease;
    }
    .vs-vs-badge::before { top: -60px; height: 0; }
    .vs-vs-badge::after  { bottom: -60px; height: 0; }
    .vs-vs-badge.vx-in::before,
    .vs-vs-badge.vx-in::after {
      opacity: 1;
      height: 60px;
    }

    /* Bottom proof items animation */
    .vs-proof-item {
      opacity: 0;
      transform: translateY(12px);
      transition: opacity .4s ease, transform .4s ease,
                  background .25s ease, color .25s ease,
                  border-color .25s ease !important;
    }
    .vs-proof-item.vx-in {
      opacity: 1 !important;
      transform: translateY(0) !important;
    }

    /* ════════════════════════════════════════════════════════
       ÉLÉMENTS INTERACTIFS GLOBAUX
    ════════════════════════════════════════════════════════ */

    /* Canvas particules background */
    #vx-particles {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      pointer-events: none;
      z-index: 0;
      opacity: .45;
    }

    /* Tilt sur eng-cards & why-items */
    .eng-card, .why-item, .metric-card {
      transition: transform .35s cubic-bezier(.22,1,.36,1),
                  box-shadow .35s ease,
                  border-color .3s ease !important;
      will-change: transform !important;
    }

    /* Indicateur de section actuelle dans la nav */
    @media (max-width: 900px) {
      /* nav dots hidden on mobile - removed */
    }

    /* ─── TOOLTIP sur plan-features ─── */
    .plan-feat-main {
      position: relative;
      display: inline;
    }
    [data-tip] {
      position: relative;
      cursor: help;
    }
    [data-tip]::after {
      content: attr(data-tip);
      position: absolute;
      bottom: calc(100% + 6px);
      left: 50%;
      transform: translateX(-50%) translateY(4px);
      background: rgba(20,18,14,.95);
      border: 1px solid rgba(200,160,32,.25);
      color: var(--muted);
      font-size: .72rem;
      font-weight: 400;
      padding: .45rem .75rem;
      border-radius: 8px;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transition: opacity .2s ease, transform .2s ease;
      z-index: 100;
      box-shadow: 0 8px 24px rgba(0,0,0,.3);
    }
    [data-tip]:hover::after {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* ─── SPARKLE cursor  ─── */
    .vx-sparkle {
      position: fixed;
      pointer-events: none;
      z-index: 9999;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--gold);
      animation: sparkleOut .6s ease forwards;
    }
    @keyframes sparkleOut {
      0%   { opacity: 1; transform: scale(1) translate(0,0); }
      100% { opacity: 0; transform: scale(0) translate(var(--dx), var(--dy)); }
    }

    /* ─── SCROLL progress bar — déjà présente, enrichissement ─── */
    #progress {
      transition: width .1s linear;
    }

    /* ─── PILL de notification live ─── */
    .vx-live-pill {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      padding: .3rem .8rem;
      background: rgba(200,160,32,.1);
      border: 1px solid rgba(200,160,32,.22);
      border-radius: 50px;
      font-size: .72rem;
      font-weight: 700;
      color: var(--gold2);
      font-family: var(--ffd);
      letter-spacing: .03em;
    }
    .vx-live-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #4ade80;
      animation: livePulse 1.8s ease-in-out infinite;
      flex-shrink: 0;
    }
    @keyframes livePulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(74,222,128,.4); }
      50%      { box-shadow: 0 0 0 5px rgba(74,222,128,0); }
    }

    /* responsive supprimé */

/* ═══════════════════════════════════════════════════════════════════
   VELIXIO — PATCH CORRECTIONS & ANIMATIONS PREMIUM
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. HERO STATS — hover enrichi et fluide ── */
.stat-item {
  position: relative;
  padding: .75rem 1.1rem;
  border-radius: 14px;
  cursor: default;
  transition: background .35s ease, transform .35s cubic-bezier(.175,.885,.32,1.275), box-shadow .35s ease;
  border: 1px solid transparent;
}
.stat-item:hover {
  background: rgba(200,160,32,.08);
  border-color: rgba(200,160,32,.2);
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(200,160,32,.12);
}
.stat-item .stat-num {
  transition: color .3s ease, transform .35s cubic-bezier(.175,.885,.32,1.275);
  display: block;
}
.stat-item:hover .stat-num {
  color: var(--gold2);
  transform: scale(1.08);
}
.stat-item .stat-label {
  transition: color .3s ease;
}
.stat-item:hover .stat-label {
  color: rgba(200,160,32,.7);
}

/* ── 2. PLAN CARDS — plus d'espace titre/prix + hover sans masquage ── */
.plan-top {
  padding: 2.2rem 2rem 1.8rem !important;
}
.plan-name {
  margin-bottom: .8rem !important;
}
.plans-grid,
.maint-plans-grid {
  overflow: visible !important;
  padding-top: 2.4rem !important;
}
.plan-card {
  overflow: visible !important;
  transition: transform .4s cubic-bezier(.175,.885,.32,1.275), border-color .3s ease, box-shadow .4s ease !important;
}
.plan-card:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(200,160,32,.45) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.35), 0 0 40px rgba(200,160,32,.1) !important;
}
.plan-card.popular:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 28px 70px rgba(0,0,0,.4), 0 0 50px rgba(200,160,32,.2) !important;
}

/* ── 3. FAQ — transition max-height fluide ── */
.faq-a {
  display: block !important;
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 1.6rem !important;
  opacity: 0 !important;
  transition: max-height .5s cubic-bezier(.4,0,.2,1),
              padding .4s cubic-bezier(.4,0,.2,1),
              opacity .35s ease !important;
}
.faq-item.open .faq-a {
  max-height: 300px !important;
  padding: .2rem 1.6rem 1.4rem !important;
  opacity: 1 !important;
}
.faq-item {
  transition: border-color .3s ease, background .3s ease !important;
  cursor: pointer;
}
.faq-item:hover {
  border-color: rgba(200,160,32,.35) !important;
  background: rgba(200,160,32,.04) !important;
}
.faq-item.open {
  border-color: rgba(200,160,32,.5) !important;
  background: rgba(200,160,32,.06) !important;
}
.faq-q {
  transition: color .3s ease !important;
  user-select: none;
}
.faq-item:hover .faq-q,
.faq-item.open .faq-q {
  color: var(--gold2) !important;
}
.faq-arrow {
  transition: transform .4s cubic-bezier(.175,.885,.32,1.275), color .3s ease !important;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--gold);
  display: inline-block;
}
.faq-item.open .faq-arrow {
  transform: rotate(45deg) !important;
}

/* ── 4. HOVERS GLOBAUX AMÉLIORÉS ── */

/* Cartes services */
.exp-card {
  transition: transform .4s cubic-bezier(.175,.885,.32,1.275),
              border-color .3s ease,
              box-shadow .4s ease !important;
}
.exp-card:hover {
  transform: translateY(-6px) scale(1.01) !important;
  border-color: rgba(200,160,32,.35) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.3), 0 0 30px rgba(200,160,32,.08) !important;
}

/* Boutons primaires */
.btn-primary {
  transition: transform .3s cubic-bezier(.175,.885,.32,1.275),
              box-shadow .3s ease,
              background .25s ease !important;
}
.btn-primary:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 35px rgba(200,160,32,.4) !important;
}

/* Boutons secondaires */
.btn-secondary {
  transition: transform .3s ease, border-color .25s ease, color .25s ease !important;
}
.btn-secondary:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(200,160,32,.6) !important;
  color: var(--gold2) !important;
}

/* Nav links */
.nav-links a {
  transition: color .25s ease !important;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width .3s cubic-bezier(.4,0,.2,1);
}
.nav-links a:hover::after { width: 100%; }

/* Cards VS section */
.vs-item {
  transition: background .3s ease, border-color .3s ease, transform .3s ease !important;
}
.vs-item:hover {
  transform: translateX(4px) !important;
}

/* Cartes engagements */
.eng-card {
  transition: transform .4s cubic-bezier(.175,.885,.32,1.275),
              border-color .3s ease,
              box-shadow .4s ease !important;
}
.eng-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(200,160,32,.4) !important;
  box-shadow: 0 20px 45px rgba(0,0,0,.3) !important;
}

/* Cartes "why" */
.why-item {
  transition: transform .4s cubic-bezier(.175,.885,.32,1.275),
              border-color .3s ease,
              box-shadow .4s ease !important;
}
.why-item:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(200,160,32,.35) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.25) !important;
}

/* Step cards how */
.step-card {
  transition: transform .4s cubic-bezier(.175,.885,.32,1.275),
              border-color .3s ease,
              background .3s ease,
              box-shadow .4s ease !important;
}
.step-card:hover {
  transform: translateY(-7px) !important;
  border-color: rgba(200,160,32,.4) !important;
  background: rgba(200,160,32,.07) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.3) !important;
}

/* Footer links */
.footer-links a {
  transition: color .25s ease, padding-left .25s ease !important;
  display: inline-block;
}
.footer-links a:hover {
  color: var(--gold2) !important;
  padding-left: 4px !important;
}

/* CTA plan buttons */
.plan-cta {
  transition: transform .3s cubic-bezier(.175,.885,.32,1.275),
              box-shadow .3s ease,
              background .25s ease !important;
}
.plan-cta:hover {
  transform: translateY(-3px) !important;
}
.plan-cta.gold-cta:hover {
  box-shadow: 0 10px 30px rgba(200,160,32,.4) !important;
}

/* Nav CTA */
.nav-cta {
  transition: transform .3s ease, box-shadow .3s ease, background .25s ease !important;
}
.nav-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(200,160,32,.35) !important;
}

/* ── 5. ANIMATIONS — rendre le site plus vivant ── */

/* Entrée sections avec légère montée */
@keyframes vx-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Shimmer doré sur les badges */
@keyframes vx-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.section-label {
  background: linear-gradient(90deg, var(--gold2), #fff8d0, var(--gold2));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: vx-shimmer 4s linear infinite;
}

/* Pulse subtil sur les icônes de plan au hover */
.plan-card:hover .plan-icon {
  animation: vx-icon-pop .4s cubic-bezier(.175,.885,.32,1.275) both !important;
}
@keyframes vx-icon-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.18); }
  100% { transform: scale(1.05); }
}

/* Glow pulsant sur le bouton WA flottant */
.wa-float {
  transition: transform .3s cubic-bezier(.175,.885,.32,1.275), box-shadow .3s ease !important;
  animation: vx-wa-pulse 3s ease-in-out infinite !important;
}
.wa-float:hover {
  transform: scale(1.15) translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(37,211,102,.5) !important;
  animation: none !important;
}
@keyframes vx-wa-pulse {
  0%,100% { box-shadow: 0 4px 20px rgba(37,211,102,.3); }
  50%      { box-shadow: 0 4px 32px rgba(37,211,102,.55); }
}

/* Ligne de scan sur les img hero */
@keyframes vx-scan {
  0%   { top: -2px; opacity: .6; }
  70%  { opacity: .4; }
  100% { top: 100%; opacity: 0; }
}
.hero-illus-wrap:hover::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -2px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(200,160,32,.7), transparent);
  animation: vx-scan 1.4s linear forwards;
  z-index: 20;
  pointer-events: none;
}

/* Marquee items hover */
.marquee-item {
  transition: transform .3s ease, border-color .3s ease, background .3s ease !important;
}
.marquee-item:hover {
  transform: scale(1.06) !important;
  border-color: rgba(200,160,32,.4) !important;
  background: rgba(200,160,32,.08) !important;
}

/* ── 6. SUPPRESSION ARTEFACTS AI ── */
/* Retrait des titres de commentaires HTML trop verbeuses dans le DOM visible */
.pricing-block-label svg { flex-shrink: 0; }

/* Garantir que les curseurs soient toujours cohérents */
button, .plan-cta, .faq-q, .nav-cta, .btn-primary, .btn-secondary {
  cursor: pointer !important;
}


    /* ── ABOUT SECTION — RESPONSIVE ── */
    @media (max-width: 900px) {
      #about [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
      }
      #about [style*="grid-template-columns:repeat(3,1fr)"] {
        grid-template-columns: 1fr 1fr !important;
      }
      #about [style*="grid-template-columns:repeat(4,1fr)"] {
        grid-template-columns: 1fr 1fr !important;
      }
    }
    @media (max-width: 580px) {
      #about [style*="grid-template-columns:1fr 1fr"],
      #about [style*="grid-template-columns:repeat(3,1fr)"],
      #about [style*="grid-template-columns:repeat(4,1fr)"] {
        grid-template-columns: 1fr !important;
      }
      #about [style*="border-right:1px solid var(--border)"] {
        border-right: none !important;
        border-bottom: 1px solid var(--border);
      }
    }

    /* ── NAV DROPDOWN ── */
    .nav-dropdown { position: relative; }
    .nav-dropdown-toggle { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }
    .nav-dropdown-toggle svg { transition: transform .2s; }
    /* Pont invisible entre le toggle et le sous-menu pour que la souris ne "sorte" pas */
    .nav-dropdown::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      height: 18px;
    }
    .nav-submenu {
      position: absolute;
      top: calc(100% + 14px);
      left: 50%;
      transform: translateX(-50%) translateY(-6px);
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: .5rem;
      min-width: 200px;
      list-style: none;
      opacity: 0;
      pointer-events: none;
      transition: opacity .18s ease, transform .18s ease;
      z-index: 200;
      box-shadow: 0 16px 48px rgba(0,0,0,.6);
    }
    .nav-dropdown:hover .nav-submenu,
    .nav-dropdown:focus-within .nav-submenu {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }
    .nav-dropdown:hover .nav-dropdown-toggle svg,
    .nav-dropdown:focus-within .nav-dropdown-toggle svg {
      transform: rotate(180deg);
    }
    .nav-submenu li a {
      display: block;
      padding: .65rem 1.1rem;
      font-size: .78rem;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--muted);
      text-decoration: none;
      border-radius: 6px;
      transition: background .15s, color .15s;
      white-space: nowrap;
      cursor: pointer;
    }
    .nav-submenu li a:hover {
      background: var(--surface2);
      color: var(--gold2);
    }
    /* Hide dropdown on mobile */
    @media (max-width: 900px) {
      .nav-dropdown .nav-submenu { display: none; }
    }

    /* ── ABOUT SECTION RESPONSIVE ── */
    @media (max-width: 860px) {
      #about [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
      }
    }