/* ─── RESET & ROOT ─────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --bg:      #04040f;
      --surface: rgba(255,255,255,0.04);
      --border:  rgba(255,255,255,0.08);
      --text:    #e8e8ff;
      --muted:   rgba(232,232,255,0.45);
      --p1:      #7c3aed;
      --p2:      #ec4899;
      --p3:      #3b82f6;
      --grad:    linear-gradient(135deg, #7c3aed, #ec4899, #3b82f6);
      --font:    'Inter', sans-serif;
    }
    html { scroll-behavior: smooth; }
    body { background: var(--bg); color: var(--text); font-family: var(--font); overflow-x: clip; line-height: 1.6; }
    ::selection { background: rgba(124,58,237,0.35); }
    a { text-decoration: none; color: inherit; }

    /* ─── UTILITY ──────────────────────────────────── */
    .container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
    .gradient-text { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 14px; padding: 14px 28px; font-weight: 600; font-size: 15px; cursor: pointer; border: 1px solid transparent; transition: all .4s cubic-bezier(.34, 1.56, .64, 1); white-space: nowrap; font-family: var(--font); letter-spacing: 0.02em; position: relative; overflow: hidden; appearance: none; -webkit-appearance: none; }
    .btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 100%); pointer-events: none; }
    .btn-primary { background: linear-gradient(135deg, #7c3aed, #ec4899, #f43f5e); background-size: 200% 200%; color: #fff; box-shadow: 0 8px 20px rgba(236,72,153,0.3), inset 0 1px 0 rgba(255,255,255,0.25); text-shadow: 0 1px 2px rgba(0,0,0,0.15); border: 1px solid rgba(255,255,255,0.15); animation: btnGradient 6s ease infinite; }
    @keyframes btnGradient { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
    .btn-primary:hover { box-shadow: 0 12px 32px rgba(236,72,153,0.5), inset 0 1px 0 rgba(255,255,255,0.4); transform: translateY(-3px) scale(1.02); border-color: rgba(255,255,255,0.35); }
    .btn-outline { background: rgba(255,255,255,0.03); color: #fff; border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 4px 10px rgba(0,0,0,0.1); }
    .btn-outline:hover { background: rgba(124,58,237,0.1); border-color: #a855f7; transform: translateY(-3px) scale(1.02); box-shadow: 0 8px 24px rgba(124,58,237,0.25), inset 0 1px 0 rgba(255,255,255,0.15); }
    .tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 50px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); color: #cbd5e1; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); backdrop-filter: blur(10px); }
    .section-head { text-align: center; margin-bottom: 72px; }
    .section-head h2 { font-size: clamp(32px,5vw,56px); font-weight: 800; line-height: 1.1; margin: 16px 0 20px; }
    .section-head p { font-size: 18px; color: var(--muted); max-width: 560px; margin: 0 auto; }
    .reveal { opacity: 0; transform: translateY(40px); transition: opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1); }
    .reveal.visible { opacity: 1; transform: none; }

    /* ── Button size variants ── */
    .btn-nav  { padding: 10px 22px; font-size: 14px; }
    .btn-hero { font-size: 16px; padding: 16px 36px; }
    .btn-cta  { font-size: 18px; padding: 20px 48px; }

    /* ── Reveal stagger delays ── */
    .delay-05 { transition-delay: .05s; }
    .delay-1 { transition-delay: .1s; }
    .delay-2 { transition-delay: .15s; }
    .delay-3 { transition-delay: .2s; }
    .delay-4 { transition-delay: .25s; }
    .delay-5 { transition-delay: .3s; }
    .delay-6 { transition-delay: .4s; }
    .delay-7 { transition-delay: .5s; }

    /* ── Pricing hidden initial states ── */
    .pm { display: none; }

    /* ── Spinner SVG ── */
    .btn-spin-icon { animation: spin .7s linear infinite; }

    /* ── Enterprise price variant ── */
    .price-amount--text { font-size: 32px; letter-spacing: -.02em; }

    /* ── CTA section note ── */
    .cta-note { position: relative; margin-top: 20px; font-size: 13px; color: var(--muted); }

    /* ── Spline container ── */
    #splineWrap { touch-action: pan-y; pointer-events: none; }

    /* ── Compare table first column ── */
    .col-feature { width: 34%; text-align: left; }

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

    /* ── Sol-card stagger entrance ── */
    .sol-card.reveal { transform: translateY(32px) scale(0.97); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
    .sol-card.reveal.visible { transform: translateY(0) scale(1); }

    /* ── Accent card glow pulse ── */
    @keyframes accentPulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(124,58,237,0); }
      50%      { box-shadow: 0 0 28px 4px rgba(124,58,237,.13); }
    }
    .sol-card--accent { animation: accentPulse 4s ease-in-out infinite; }

    /* ─── AURORA ───────────────────────────────────── */
    .aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
    .aurora-orb { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.18; }
    .orb1 { width:700px;height:700px;background:#7c3aed;top:-200px;left:-200px;animation:orbFloat1 18s ease-in-out infinite; }
    .orb2 { width:600px;height:600px;background:#ec4899;top:20%;right:-150px;animation:orbFloat2 22s ease-in-out infinite; }
    .orb3 { width:500px;height:500px;background:#3b82f6;bottom:10%;left:30%;animation:orbFloat3 16s ease-in-out infinite; }
    .orb4 { width:400px;height:400px;background:#7c3aed;bottom:-100px;right:20%;animation:orbFloat1 20s ease-in-out infinite reverse; }
    @keyframes orbFloat1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(60px,40px) scale(1.08)} }
    @keyframes orbFloat2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-50px,60px) scale(1.1)} }
    @keyframes orbFloat3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(40px,-50px) scale(.92)} }

    /* ─── CURSOR GLOW ──────────────────────────────── */
    #cursor-glow { position:fixed;width:500px;height:500px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(124,58,237,0.07),transparent 70%);transform:translate(-50%,-50%);transition:left .04s,top .04s; }

    /* ─── PROGRESS ─────────────────────────────────── */
    #progress-bar { position:fixed;top:0;left:0;height:2px;z-index:200;background:var(--grad);width:0%;transition:width .1s; }

    /* ─── NAV ──────────────────────────────────────── */
    nav { position:fixed;top:0;left:0;right:0;z-index:100;padding:16px 0;transition:background .4s,backdrop-filter .4s; }
    nav.scrolled { background:rgba(4,4,15,0.85);backdrop-filter:blur(20px);border-bottom:1px solid var(--border); }
    .nav-inner { display:flex;align-items:center;justify-content:space-between; }
    .nav-logo { font-size:22px;font-weight:900;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
    .nav-links { display:flex;align-items:center;gap:32px;list-style:none; }
    .nav-links a { font-size:14px;font-weight:500;color:var(--muted);transition:color .2s; }
    .nav-links a:hover { color:var(--text); }
    .nav-cta { display:flex;gap:12px; }
    /* ── Hamburger + Mobile drawer ─── */
    .nav-burger { display:none; flex-direction:column; justify-content:center; gap:5px; width:36px; height:36px; cursor:pointer; padding:4px; background:none; border:none; z-index:110; }
    .nav-burger span { display:block; height:2px; border-radius:2px; background:var(--text); transition:all .3s ease; transform-origin:center; }
    .nav-burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
    .nav-burger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
    .nav-burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
    .nav-mobile { display:none; position:fixed; inset:0; z-index:105; background:rgba(4,4,15,0.97); backdrop-filter:blur(24px); flex-direction:column; align-items:center; justify-content:center; gap:8px; opacity:0; transition:opacity .3s ease; pointer-events:none; }
    .nav-mobile.open { opacity:1; pointer-events:all; }
    .nav-mobile a { font-size:26px; font-weight:700; color:var(--muted); padding:14px 32px; border-radius:14px; transition:all .2s; display:block; }
    .nav-mobile a:hover { color:var(--text); background:var(--surface); }
    .nav-mobile .nm-cta { margin-top: 28px; font-size: 18px; padding: 16px 40px; }
    @media(max-width:768px){
      .nav-links { display:none; }
      .nav-cta   { display:none; }
      .nav-burger { display:flex; }
      .nav-mobile { display:flex; }
    }

    /* ─────────────────────────────────────────────────
       HERO — SPLINE 3D
    ───────────────────────────────────────────────── */
    #heroWrap { height: 100vh; min-height: 600px; position: relative; z-index: 2; overflow: clip; }
    #heroStick {
      position: relative; height: 100vh; min-height: 600px;
      display: flex; align-items: center;
    }
    #heroStick::before {
      content: ''; position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(124,58,237,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124,58,237,0.05) 1px, transparent 1px);
      background-size: 64px 64px; pointer-events: none; z-index: 0;
    }
    #heroStick::after {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(ellipse at center, transparent 38%, var(--bg) 90%);
      pointer-events: none; z-index: 0;
    }
    .hs-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      gap: 0 48px;
      position: relative; z-index: 2; width: 100%;
      padding-top: clamp(48px, 6vh, 72px);
    }
    /* Desktop : top + bottom empilés colonne gauche, Spline colonne droite */
    .hs-top    { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 24px; }
    .hs-bottom { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
    .hs-right  {
      grid-column: 2; grid-row: 1 / 3;
      position: relative; width: 100%; height: clamp(500px, 70vh, 800px);
      display: flex; align-items: center; justify-content: center;
    }
    .hs-right spline-viewer {
      width: 100% !important; height: 100% !important;
      background: transparent !important;
      pointer-events: none; touch-action: pan-y;
      transform: scale(1) translateX(80px);
      clip-path: inset(0 0 44px 0);
    }
    spline-viewer::part(logo) {
      display: none !important;
    }
    .hs-tag   { margin-bottom: 24px; animation: hsFadeUp .8s ease both; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; padding: 8px 18px; text-transform: uppercase; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 99px; color: #cbd5e1; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); display: inline-flex; align-items: center; gap: 10px; backdrop-filter: blur(12px); white-space: normal; }
    .hs-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #a855f7; box-shadow: 0 0 10px #a855f7; }
    .hs-title {
      font-size: clamp(40px, 5.5vw, 84px);
      font-weight: 800; letter-spacing: -0.04em; line-height: 1.05;
      margin-bottom: 24px; animation: hsFadeUp .8s .08s ease both;
      color: #f8fafc;
    }

    /* ── Card Stage ─────────────────────────────────── */
    .hs-stage { position: relative; width: min(360px, calc(100vw - 48px)); height: min(225px, calc((100vw - 48px) * 0.625)); margin: 0 auto; perspective: 1100px; }
    .hs-card  { position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: clamp(16px, 3.5vw, 24px); overflow: hidden; will-change: transform, opacity; }

    /* ── Card 1 — carte blanche CSS Fidaly ─────────── */
    .hs-c1 {
      z-index: 3;
      background: linear-gradient(135deg, #ffffff 0%, #f0eeff 40%, #fce7f3 70%, #ffffff 100%);
      box-shadow: 0 28px 80px rgba(124,58,237,0.45), 0 0 0 1px rgba(255,255,255,0.6), 0 4px 24px rgba(0,0,0,0.18);
      animation: c1Glow 3.5s ease-in-out infinite;
      overflow: visible;
    }
    @keyframes c1Glow {
      0%,100% { box-shadow: 0 28px 80px rgba(124,58,237,0.45), 0 0 0 1px rgba(255,255,255,0.6), 0 4px 24px rgba(0,0,0,0.18); }
      50%      { box-shadow: 0 28px 100px rgba(168,85,247,0.65), 0 0 55px rgba(124,58,237,0.25), 0 0 0 1px rgba(255,255,255,0.8), 0 4px 24px rgba(0,0,0,0.18); }
    }

    /* — Contenu interne de la carte blanche — */
    .fc-inner {
      position: absolute; inset: 0;
      border-radius: 24px;
      padding: 20px 24px;
      overflow: hidden;
      display: flex; flex-direction: column; justify-content: space-between;
      align-items: stretch;
    }
    /* reflet nacré en haut à droite */
    .fc-inner::before {
      content: '';
      position: absolute;
      top: -60px; right: -60px;
      width: 220px; height: 220px;
      background: radial-gradient(circle, rgba(167,139,250,0.18) 0%, rgba(236,72,153,0.10) 50%, transparent 70%);
      border-radius: 50%;
      pointer-events: none;
    }
    /* reflet bas-gauche */
    .fc-inner::after {
      content: '';
      position: absolute;
      bottom: -40px; left: -40px;
      width: 180px; height: 180px;
      background: radial-gradient(circle, rgba(124,58,237,0.12) 0%, transparent 65%);
      border-radius: 50%;
      pointer-events: none;
    }

    /* Logo / brand — centré, 70% de la carte */
    .fc-brand {
      display: flex; align-items: center; justify-content: center;
      position: relative; z-index: 1;
      width: 100%;
    }
    .fc-brand-name {
      font-size: clamp(28px, 8vw, 52px); font-weight: 900; letter-spacing: -2px;
      background: linear-gradient(135deg, #7c3aed 0%, #c026d3 50%, #ec4899 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1;
      width: 70%;
      text-align: center;
    }

    /* Puce NFC — milieu gauche */
    .fc-chip {
      position: relative; z-index: 1;
      width: 42px; height: 32px; border-radius: 7px;
      background: linear-gradient(135deg, #e8d5a3 0%, #c9a84c 40%, #e8d5a3 60%, #b8932a 100%);
      box-shadow: 0 2px 8px rgba(180,140,40,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
      align-self: flex-start;
    }
    .fc-chip::before {
      content: '';
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 28px; height: 20px;
      border: 1.5px solid rgba(180,130,20,0.5);
      border-radius: 4px;
    }

    /* Bas de carte */
    .fc-bottom {
      display: flex; align-items: flex-end; justify-content: space-between;
      position: relative; z-index: 1;
    }
    .fc-dots {
      display: flex; gap: 5px; align-items: center;
    }
    .fc-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: linear-gradient(135deg, #7c3aed, #ec4899);
      opacity: 0.55;
    }
    .fc-dot:last-child { opacity: 0.9; }
    /* Onde NFC */
    .fc-nfc {
      display: flex; gap: 3.5px; align-items: center;
    }
    .fc-nfc-arc {
      width: 10px; height: 10px;
      border: 1.5px solid transparent;
      border-right-color: #7c3aed;
      border-top-color: #ec4899;
      border-radius: 50%;
      opacity: 0.5;
    }
    .fc-nfc-arc:nth-child(1) { width: 6px; height: 6px; opacity: 0.35; }
    .fc-nfc-arc:nth-child(2) { width: 10px; height: 10px; opacity: 0.55; }
    .fc-nfc-arc:nth-child(3) { width: 15px; height: 15px; opacity: 0.75; }

    /* ── Card 2 — Violet (goes LEFT on scroll) ──────── */
    .hs-c2 {
      z-index: 2;
      background: linear-gradient(140deg, #2d1b69 0%, #5b21b6 45%, #7c3aed 75%, #a78bfa 100%);
      box-shadow: 0 12px 44px rgba(91,33,182,0.5);
      transform: translateX(-14px) translateY(14px) rotate(-2deg) scale(0.97);
    }
    .hs-c2::after {
      content: ''; position: absolute;
      width: 180px; height: 180px; border-radius: 50%;
      background: radial-gradient(circle, rgba(255,255,255,0.1), transparent 70%);
      top: -60px; right: -40px; pointer-events: none; z-index: 0;
    }

    /* ── Card 3 — Pink (goes RIGHT on scroll) ───────── */
    .hs-c3 {
      z-index: 1;
      background: linear-gradient(140deg, #6b1535 0%, #be185d 45%, #ec4899 75%, #f9a8d4 100%);
      box-shadow: 0 6px 26px rgba(190,24,93,0.45);
      transform: translateX(14px) translateY(24px) rotate(2deg) scale(0.94);
    }
    .hs-c3::after {
      content: ''; position: absolute;
      width: 180px; height: 180px; border-radius: 50%;
      background: radial-gradient(circle, rgba(255,255,255,0.1), transparent 70%);
      top: -60px; left: -40px; pointer-events: none; z-index: 0;
    }

    /* Shimmer sweep — cartes latérales seulement */
    .hs-c2::before, .hs-c3::before {
      content: ''; position: absolute; inset: 0; border-radius: 24px;
      background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.07) 50%, transparent 62%);
      background-size: 220% 100%;
      animation: shimmerSweep 4.5s ease-in-out infinite;
      pointer-events: none; z-index: 5;
    }
    .hs-c2::before { animation-delay: 1.4s; }
    .hs-c3::before { animation-delay: 2.8s; }
    @keyframes shimmerSweep { 0%{background-position:220% 0} 45%,100%{background-position:-220% 0} }

    /* ── Contenu cartes latérales ─────────────────────── */
    .hs-feat { position: absolute; inset: 0; display: flex; flex-direction: column; z-index: 2; opacity: 0; }
    .hs-feat-top { flex: 1; display: flex; align-items: center; justify-content: center; }
    .hs-feat-icon {
      width: 56px; height: 56px; border-radius: 18px;
      background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.25);
      backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center;
    }
    .hs-feat-icon svg { width: 26px; height: 26px; }
    .hs-mini-chart { display: flex; align-items: flex-end; gap: 5px; height: 48px; }
    .hs-bar { width: 13px; border-radius: 4px 4px 0 0; background: rgba(255,255,255,0.55); animation: barPulse 2s ease-in-out infinite; }
    .hs-bar:nth-child(1){ height:40%; } .hs-bar:nth-child(2){ height:72%; animation-delay:.15s; background:rgba(255,255,255,0.8); }
    .hs-bar:nth-child(3){ height:52%; animation-delay:.3s; } .hs-bar:nth-child(4){ height:88%; animation-delay:.1s; background:rgba(255,255,255,0.9); }
    .hs-bar:nth-child(5){ height:44%; animation-delay:.25s; }
    @keyframes barPulse { 0%,100%{opacity:.75;transform:scaleY(1)} 50%{opacity:1;transform:scaleY(1.06)} }
    .hs-feat-bottom { padding: 0 22px 20px; }
    .hs-feat-tag { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 5px; }
    .hs-feat h3 { font-size: 17px; font-weight: 900; color: #fff; margin-bottom: 4px; }
    .hs-feat p  { font-size: 11.5px; color: rgba(255,255,255,0.68); line-height: 1.5; }

    /* ── CTA & Stats ─────────────────────────────────── */
    .hs-cta { margin-top: 24px; opacity: 1; transform: none; display: flex; flex-direction: column; align-items: center; }
    .hs-desc { font-size: 18px; font-weight: 400; color: #cbd5e1; max-width: 540px; margin: 0 auto 32px; line-height: 1.6; letter-spacing: -0.01em; animation: hsFadeUp .8s .16s ease both; }
    .hs-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; animation: hsFadeUp .8s .24s ease both; }
    .hs-note { margin-top: 20px; font-size: 13px; color: #64748b; font-weight: 400; animation: hsFadeUp .8s .32s ease both; }
    .hs-stats { display: flex; gap: 48px; margin-top: 48px; padding: 20px 40px; background: rgba(255,255,255,0.015); border: 1px solid rgba(255,255,255,0.06); border-radius: 20px; backdrop-filter: blur(20px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); animation: hsFadeUp .8s .40s ease both; }
    .hs-stat  { display: flex; flex-direction: column; align-items: center; position: relative; }
    .hs-stat:not(:last-child)::after { content: ''; position: absolute; right: -24px; top: 15%; height: 70%; width: 1px; background: rgba(255,255,255,0.06); }
    .stat-value { font-size: 30px; font-weight: 700; letter-spacing: -0.04em; color: #fff; line-height: 1.1; }
    .stat-label { font-size: 13px; font-weight: 500; color: #94a3b8; margin-top: 6px; }

    /* ── Scroll hint ──────────────────────────────────── */
    .hs-hint {
      position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      color: rgba(255,255,255,0.28); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
      z-index: 3; pointer-events: none;
    }
    .hs-arrow { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,0.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; animation: arrowBounce 1.8s ease-in-out infinite; }
    @keyframes arrowBounce { 0%,100%{transform:translateY(0);opacity:.3} 50%{transform:translateY(7px);opacity:.8} }
    @keyframes hsFadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }

    /* ── Responsive hero ──────────────────────────────── */

    /* PC moyen : 901px → 1200px */
    @media (min-width: 901px) and (max-width: 1200px) {
      .hs-inner  { gap: 0 24px; padding-top: clamp(40px, 5vh, 60px); }
      .hs-right  { height: clamp(440px, 60vh, 600px); }
      .hs-title  { font-size: clamp(28px, 4vw, 52px); margin-bottom: 20px; }
      .hs-desc   { font-size: 14px; margin-bottom: 14px; }
      .hs-stats  { gap: 24px; margin-top: 16px; }
      .stat-value { font-size: 22px; }
      .hs-cta    { margin-top: 16px; }
      .hs-tag    { font-size: clamp(9px, 0.9vw, 12px); }
    }

    /* PC petit : hauteur viewport réduite (ex: laptop 768px de haut) */
    @media (max-height: 780px) and (min-width: 901px) {
      .hs-inner  { padding-top: 32px; }
      .hs-right  { height: clamp(380px, 55vh, 500px); }
      .hs-title  { margin-bottom: 16px; }
      .hs-cta    { margin-top: 12px; }
      .hs-stats  { margin-top: 12px; gap: 20px; }
      .stat-value { font-size: 20px; }
      .hs-desc   { font-size: 14px; margin-bottom: 12px; }
    }

    @media (max-width: 900px) {
      #heroWrap  { height: auto; min-height: 100svh; overflow: visible; }
      #heroStick { height: auto; min-height: 100svh; align-items: flex-start; padding: 24px 0 32px; }
      .hs-inner {
        display: flex; flex-direction: column;
        text-align: center;
        padding-top: 0;
        gap: 0;
      }
      /* Ordre : titre → Illustration (Cartes) → CTA */
      .hs-top    { order: 1; align-items: center; padding-bottom: 0; }
      .hs-right  { order: 2; height: 260px; width: 100%; margin: 8px 0; grid-column: unset; grid-row: unset; }
      .hs-bottom { order: 3; align-items: center; }
      .hs-btns   { justify-content: center; }
      .hs-tag    { white-space: normal; text-align: center; margin-bottom: 16px; margin-top: 8px; }
    }
    @media (max-width: 640px) {
      .hs-stats  { gap: 20px; }
      .hs-right  { height: 260px; }
    }

    /* ─── WALLET SHOWCASE ──────────────────────────── */
    #wallet-showcase {
      position: relative; z-index: 2;
      padding: 120px 0 0;
      overflow: clip;
    }
    .ws-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
    }
    @media(max-width: 860px) {
      .ws-inner { grid-template-columns: 1fr; text-align: center; }
      .ws-badges { justify-content: center; }
    }
    .ws-text { max-width: 460px; }
    .ws-tag { margin-bottom: 20px; display: inline-flex; }
    .ws-title {
      font-size: clamp(28px, 3.6vw, 50px); font-weight: 900;
      line-height: 1.15; letter-spacing: -0.01em; margin: 16px 0 24px;
    }
    .ws-sub { font-size: 17px; color: var(--muted); line-height: 1.65; margin-bottom: 36px; }
    .ws-badges { display: flex; gap: 12px; flex-wrap: wrap; }
    .ws-badge {
      display: inline-flex; align-items: center; gap: 9px;
      padding: 10px 20px; border-radius: 50px; font-size: 13px; font-weight: 700;
      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.13);
      color: #fff; backdrop-filter: blur(8px);
    }

    /* ── Zone phone + benefits ── */
    .ws-benefit-card {
      display: inline-flex; align-items: center; justify-content: center; gap: 10px;
      padding: 12px 22px; border-radius: 40px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.08);
      backdrop-filter: blur(16px);
      box-shadow: inset 0 1px 4px rgba(255,255,255,0.05), 0 4px 12px rgba(0,0,0,0.1);
      transition: all 0.3s cubic-bezier(.22,1,.36,1);
    }
    .ws-benefit-card:hover {
      background: rgba(255,255,255,0.06);
      border-color: rgba(124,58,237,0.3);
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 8px 24px rgba(124,58,237,0.25);
    }
    .ws-benefit-icon {
      font-size: 16px; display: flex; align-items: center; justify-content: center;
    }
    .ws-benefit-label { font-size: 13.5px; font-weight: 600; color: var(--text); letter-spacing: 0.02em; }

    /* ── Floating Bubbles ── */
    .ws-floating-bubble {
      position: absolute;
      display: inline-flex; align-items: center; justify-content: center; gap: 10px;
      padding: 12px 22px; border-radius: 40px;
      background: rgba(4, 4, 15, 0.6);
      border: 1px solid rgba(255,255,255,0.1);
      backdrop-filter: blur(16px);
      box-shadow: 0 4px 15px rgba(0,0,0,0.5);
      z-index: 10;
      white-space: nowrap;
      animation: floatBubble 5s ease-in-out infinite;
      transition: all 0.3s;
    }
    .ws-floating-bubble:hover { border-color: rgba(124,58,237,0.4); transform: scale(1.05) !important; }
    @keyframes floatBubble {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }
    .ws-floating-bubble.b1 { left: -140px; top: 10%; animation-delay: 0s; }
    .ws-floating-bubble.b2 { left: -160px; top: 35%; animation-delay: 1s; }
    .ws-floating-bubble.b3 { left: -120px; top: 60%; animation-delay: 2s; }
    .ws-floating-bubble.b4 { right: -150px; top: 15%; animation-delay: 0.5s; }
    .ws-floating-bubble.b5 { right: -170px; top: 40%; animation-delay: 1.5s; }
    .ws-floating-bubble.b6 { right: -130px; top: 65%; animation-delay: 2.5s; }
    
    @media(max-width: 860px) {
      .ws-floating-bubble { display: none; }
    }

    /* ── New Passes Cluster Showcase ── */
    .ws-showcase {
      display: flex; align-items: center; justify-content: center;
      gap: 60px; padding: 20px 0;
      touch-action: pan-y;
      position: relative;
    }
    .ws-benefits-col {
      display: flex; flex-direction: column; gap: 24px; flex-shrink: 0;
      pointer-events: none; z-index: 10;
    }
    .ws-benefits-col:first-child { align-items: flex-end; }
    .ws-benefits-col:last-child { align-items: flex-start; }

    .ws-passes-cluster {
      position: relative;
      width: 320px; height: 660px;
    }
    
    .wallet-pass {
      width: 320px; height: 480px;
      border-radius: 20px; overflow: hidden;
      box-shadow: 0 -4px 15px rgba(0,0,0,0.5), 0 20px 40px rgba(0,0,0,0.7);
      display: flex; flex-direction: column;
      position: absolute; left: 0; top: 0; color: white;
      transition: transform 0.3s cubic-bezier(.22,1,.36,1);
      cursor: default; user-select: none;
    }
    /* Simple hover lift */
    .wallet-pass:hover {
      transform: translateY(-10px);
    }
    
    /* Stack layout like an iPhone wallet */
    .pass-restaurants { top: 0; z-index: 1; background: #8a1715; }
    .pass-bars { top: 55px; z-index: 2; background: #14354c; }
    .pass-coiffeurs { top: 110px; z-index: 3; background: #96704b; }
    .pass-snack { top: 165px; z-index: 4; background: #196611; filter: drop-shadow(0 -10px 15px rgba(0,0,0,0.25)); }
    
    .wp-top { padding: 20px 24px 14px; display: flex; justify-content: space-between; align-items: flex-start; }
    .wp-logo { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
    .wp-pts-box { text-align: right; }
    .wp-lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; opacity: 0.8; letter-spacing: 0.05em; margin-bottom: 2px;}
    .wp-pts-val { font-size: 32px; font-weight: 600; line-height: 1; }

    .wp-banner { flex-shrink: 0; width: 100%; height: 130px; min-height: 130px; background-size: cover; background-position: center; background-color: rgba(0,0,0,0.2); border-bottom: 1px solid rgba(255,255,255,0.1); }

    .wp-body { padding: 20px 24px; flex: 1; display: flex; flex-direction: column; position: relative; }
    .wp-group { margin-bottom: 16px; }
    .wp-group.row { display: flex; justify-content: space-between; align-items: flex-start; }
    .wp-val { font-size: 24px; font-weight: 500; letter-spacing: -0.01em; }
    .wp-val-sm { font-size: 15px; font-weight: 400; }

    .wp-footer { 
      margin-top: auto; background: white; padding: 16px; border-radius: 12px; 
      display: flex; flex-direction: column; align-items: center; 
      width: 150px; margin-left: auto; margin-right: auto; margin-bottom: 20px;
    }
    .wp-qr-img { width: 120px; height: 120px; opacity: 0.95; }
    .wp-qr-txt { font-size: 12px; color: #000; font-family: monospace; margin-top: 6px; }
    .wp-nfc { position: absolute; right: 24px; bottom: 24px; width: 28px; height: 28px; opacity: 0.7; }

    /* ── Wallet section mobile ── */
    @media(max-width:900px) {
      .ws-inner { grid-template-columns: 1fr; gap: 60px; }
      .ws-text { text-align: center; margin: 0 auto; }
      .ws-badges { justify-content: center; }
      .ws-passes-cluster { transform: scale(0.9); transform-origin: top center; margin-bottom: -60px; }
    }
    @media(max-width:600px) {
      .ws-passes-cluster { transform: scale(0.8); transform-origin: top center; margin-bottom: -120px; left: 0; }
    }

    /* ─── PROOF ────────────────────────────────────── */
    #proof { position:relative;z-index:2;padding:60px 0 80px; }
    .proof-text { text-align:center;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:36px; }

    /* ── Infinite marquee ── */
    .marquee-outer {
      overflow: hidden;
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
      mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    }
    .marquee-track {
      display: flex;
      gap: 16px;
      width: max-content;
      animation: marqueeScroll 28s linear infinite;
    }
    .marquee-track:hover { animation-play-state: paused; }
    @keyframes marqueeScroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    .logo-item {
      flex-shrink: 0;
      padding: 12px 28px; border-radius: 10px;
      background: var(--surface); border: 1px solid var(--border);
      font-weight: 700; font-size: 14px; color: var(--muted);
      transition: all .3s; white-space: nowrap;
      cursor: default;
    }
    .logo-item:hover { color: var(--text); border-color: rgba(124,58,237,.5); background: rgba(124,58,237,.08); transform: translateY(-2px); }

    /* ─── PROBLEM ──────────────────────────────────── */
    #problem { position:relative;z-index:2;padding:80px 0; }
    .prob-row { display:flex;justify-content:center;align-items:flex-start;margin-top:52px; }
    .prob-item { flex:1;text-align:center;padding:0 40px; }
    .prob-item + .prob-item { border-left:1px solid rgba(255,255,255,0.07); }
    .prob-num { display:block;font-size:52px;font-weight:900;line-height:1;letter-spacing:-0.03em;color:#ed3a52;margin-bottom:10px; }
    .prob-item h3 { font-size:14px;font-weight:600;color:#fff;margin-bottom:6px;line-height:1.4; }
    .prob-item p { font-size:13px;color:var(--muted);line-height:1.6;margin:0; }
    @media (max-width:640px) { .prob-row { flex-direction:column;gap:36px; } .prob-item+.prob-item { border-left:none;border-top:1px solid rgba(255,255,255,0.07);padding-top:36px; } }

    /* ─── SOLUTION ─────────────────────────────────── */
    #solution { position:relative;z-index:2;padding:100px 0; }
    .solution-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:24px; align-items:stretch; }
    .sol-card { padding:32px 28px;border-radius:20px;background:rgba(255,255,255,0.015);border:1px solid rgba(255,255,255,0.05);transition:all .4s ease;position:relative;overflow:hidden; display:flex; flex-direction:column; height: 100%; }
    .sol-card::after { content:'';position:absolute;width:100px;height:100px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.15),transparent);top:-20px;right:-20px;transition:all .5s; }
    .sol-card:hover { border-color:rgba(124,58,237,.3);transform:translateY(-6px);box-shadow:0 20px 50px rgba(124,58,237,.08); background:rgba(255,255,255,0.025); }
    .sol-card:hover::after { width:180px;height:180px; }
    .sol-icon { width:50px;height:50px;border-radius:14px;background:rgba(124,58,237,.08);border:1px solid rgba(124,58,237,.18);display:flex;align-items:center;justify-content:center;margin-bottom:20px; }
    .sol-icon svg { width:22px;height:22px;color:rgba(167,139,250,0.9); }
    .sol-card h3 { font-size:18px;font-weight:700;margin-bottom:12px; }
    .sol-card p  { font-size:14px;color:var(--muted);line-height:1.65; margin:0; flex:1; }

    /* ── Accent cards (new features) ── */
    .sol-card--accent {
      background: linear-gradient(135deg, rgba(124,58,237,.04) 0%, rgba(236,72,153,.03) 100%);
      border-color: rgba(124,58,237,.15);
      position: relative;
    }
    .sol-card--accent::before {
      content: 'NOUVEAU';
      position: absolute; top: 16px; right: 16px;
      font-size: 9px; font-weight: 800; letter-spacing: .12em;
      color: #a78bfa; background: rgba(124,58,237,.15);
      border: 1px solid rgba(124,58,237,.3); border-radius: 50px;
      padding: 3px 9px;
    }
    .sol-card--accent:hover { border-color: rgba(124,58,237,.6); box-shadow: 0 20px 60px rgba(124,58,237,.18); }
    .sol-icon--birthday { background: rgba(236,72,153,.15); border-color: rgba(236,72,153,.3); }
    .sol-icon--relaunch { background: rgba(59,130,246,.15); border-color: rgba(59,130,246,.3); }
    .sol-icon--nfc      { background: rgba(16,185,129,.15); border-color: rgba(16,185,129,.3); }

    /* ── Shimmer effect on accent cards ── */
    .sol-card--accent::after {
      background: radial-gradient(circle, rgba(124,58,237,.25), transparent) !important;
    }

    /* ─── HOW IT WORKS ─────────────────────────────── */
    #how { position:relative;z-index:2;padding:100px 0; }
    .how-steps { display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative; }
    @media(max-width:768px){.how-steps{grid-template-columns:1fr;gap:32px;}}
    .how-steps::before { content:'';position:absolute;top:36px;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,rgba(124,58,237,.5),rgba(236,72,153,.5),transparent); }
    @media(max-width:768px){.how-steps::before{display:none;}}
    .how-step { text-align:center;padding:0 24px; }
    .step-num {
      width:72px; height:72px; border-radius:50%;
      background: var(--grad);
      display:flex; align-items:center; justify-content:center;
      font-size:22px; font-weight:900; color:#fff;
      margin:0 auto 28px;
      box-shadow: 0 0 30px rgba(124,58,237,.4);
      position:relative; z-index:2;
      transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
      cursor: default;
    }

    /* ── Outer ring pulse ── */
    .step-num::before {
      content: '';
      position: absolute; inset: -6px;
      border-radius: 50%;
      border: 2px solid rgba(167,139,250,.5);
      animation: stepRingPulse 2.6s ease-in-out infinite;
      pointer-events: none;
    }
    .how-step:nth-child(2) .step-num::before { animation-delay: .87s; }
    .how-step:nth-child(3) .step-num::before { animation-delay: 1.74s; }

    @keyframes stepRingPulse {
      0%   { transform: scale(1);    opacity: .8; }
      60%  { transform: scale(1.28); opacity: 0; }
      100% { transform: scale(1);    opacity: .8; }
    }

    /* ── Orbiting glow dot ── */
    .step-num::after {
      content: '';
      position: absolute;
      width: 9px; height: 9px; border-radius: 50%;
      background: rgba(255,255,255,.85);
      top: 5px; left: 50%; margin-left: -4.5px;
      animation: stepOrbit 3.2s linear infinite;
      filter: blur(1px);
      pointer-events: none;
    }
    .how-step:nth-child(2) .step-num::after { animation-delay: -1.07s; }
    .how-step:nth-child(3) .step-num::after { animation-delay: -2.13s; }

    @keyframes stepOrbit {
      from { transform: rotate(0deg)   translateY(-31px) rotate(0deg); }
      to   { transform: rotate(360deg) translateY(-31px) rotate(-360deg); }
    }

    /* ── Hover lift ── */
    .how-step:hover .step-num {
      transform: translateY(-7px) scale(1.1);
      box-shadow: 0 0 60px rgba(124,58,237,.7), 0 14px 36px rgba(0,0,0,.3);
    }

    /* ── Entrance: circles pop in with spring ── */
    .how-step.reveal .step-num {
      opacity: 0;
      transform: scale(.55) translateY(12px);
      transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
      transition-delay: .05s;
    }
    .how-step:nth-child(2).reveal .step-num { transition-delay: .22s; }
    .how-step:nth-child(3).reveal .step-num { transition-delay: .39s; }
    .how-step.reveal.visible .step-num { opacity: 1; transform: scale(1) translateY(0); }

    .how-step h3 { font-size:20px;font-weight:700;margin-bottom:12px; }
    .how-step p  { font-size:15px;color:var(--muted);line-height:1.65; }

    /* ─── BENEFITS ─────────────────────────────────── */
    #benefits { position:relative;z-index:2;padding:100px 0; }
    .benefits-grid { display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center; }
    @media(max-width:768px){.benefits-grid{grid-template-columns:1fr;}}
    .benefit-items { display:flex;flex-direction:column;gap:20px; }
    .benefit-item { display:flex;gap:20px;align-items:flex-start;padding:24px;border-radius:18px;background:var(--surface);border:1px solid var(--border);transition:all .3s; }
    .benefit-item:hover { border-color:rgba(124,58,237,.4);transform:translateX(4px); }
    .benefit-icon { width:48px;height:48px;border-radius:12px;background:rgba(124,58,237,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
    .benefit-icon svg { width:20px;height:20px;color:rgba(167,139,250,0.9); }
    .benefit-item h4 { font-size:16px;font-weight:700;margin-bottom:4px; }
    .benefit-item p  { font-size:13px;color:var(--muted);line-height:1.6; }
    .benefit-visual { position:relative;height:450px;display:flex;align-items:center;justify-content:center; }
    .stat-circle { position:absolute;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(255,255,255,.05);border:1.5px solid var(--border);backdrop-filter:blur(20px); transition:transform 0.4s ease; }
    .stat-circle:hover { transform:scale(1.05); z-index: 10; }
    .stat-circle.big { width:240px;height:240px;border-color:rgba(124,58,237,.5);box-shadow:0 0 60px rgba(124,58,237,.25), inset 0 0 40px rgba(124,58,237,.15); z-index:1; }
    .stat-circle.med { width:180px;height:180px;top:10px;right:-10px;border-color:rgba(236,72,153,.5);box-shadow:0 0 50px rgba(236,72,153,.25), inset 0 0 30px rgba(236,72,153,.15); z-index:2; }
    .stat-circle.sm  { width:150px;height:150px;bottom:10px;left:10px;border-color:rgba(59,130,246,.5);box-shadow:0 0 50px rgba(59,130,246,.25), inset 0 0 30px rgba(59,130,246,.15); z-index:3; }
    .stat-circle .num  { font-size:42px;font-weight:900;line-height:1;margin-bottom:8px; }
    .stat-circle .num.med-num { font-size:28px; }
    .stat-circle .num.sm-num  { font-size:28px; }
    .stat-circle .lbl { font-size:13px;color:rgba(255,255,255,0.9);text-align:center;padding:0 16px; font-weight: 500; line-height: 1.4; }

    /* ─── TESTIMONIALS ─────────────────────────────── */
    #testimonials { position:relative;z-index:2;padding:100px 0; }
    .testi-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px; }
    .testi-card { padding:32px;border-radius:24px;background:rgba(255,255,255,.03);border:1px solid var(--border);transition:all .4s ease; }
    .testi-card:hover { border-color:rgba(124,58,237,.35);transform:translateY(-4px); }
    .stars { color:#f59e0b;font-size:16px;margin-bottom:18px;letter-spacing:2px; }
    .testi-quote { font-size:15px;line-height:1.75;color:var(--muted);margin-bottom:24px;font-style:italic; }
    .testi-author { display:flex;align-items:center;gap:14px; }
    .testi-avatar { width:44px;height:44px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px; }
    .testi-name { font-weight:700;font-size:14px; }
    .testi-role { font-size:12px;color:var(--muted); }

    /* ─── PRICING ──────────────────────────────────── */
    #pricing { position:relative;z-index:2;padding:100px 0; }
    .save-badge { background:rgba(52,211,153,.15);border:1px solid rgba(52,211,153,.3);color:#34d399;font-size:11px;font-weight:700;padding:3px 8px;border-radius:20px;margin-left:6px;vertical-align:middle; }

    /* ── Sélecteur avec/sans engagement ─────────────── */
    .pricing-selector { display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%;max-width:480px;margin:0 auto 56px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,0.08);border-radius:24px;padding:8px;box-shadow:inset 0 2px 10px rgba(0,0,0,0.2),0 0 40px rgba(124,58,237,0.08);backdrop-filter:blur(24px); }
    .pricing-option { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:16px 20px;border:none;border-radius:18px;background:transparent;cursor:pointer;text-align:center;transition:all .3s cubic-bezier(.22,1,.36,1);width:100%;font-family:var(--font);appearance:none;-webkit-appearance:none;color:var(--text);position:relative;overflow:hidden; }
    .pricing-option.active { background:linear-gradient(135deg,#7C3AED,#5B21B6);box-shadow:0 8px 24px rgba(124,58,237,.35),inset 0 1px 1px rgba(255,255,255,0.25); }
    .pricing-option:not(.active):hover { background:rgba(255,255,255,.05);transform:translateY(-1px); }
    .pricing-option-label { display:block;font-size:15px;font-weight:700;color:var(--text);line-height:1.2;transition:color .3s; }
    .pricing-option.active .pricing-option-label { color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.2); }
    .pricing-option-sub { display:block;font-size:12px;color:rgba(232,232,255,0.5);line-height:1.3;transition:color .3s; }
    .pricing-option.active .pricing-option-sub { color:rgba(255,255,255,.75); }
    @media(max-width:560px){ .pricing-selector { grid-template-columns:1fr;max-width:280px; } }

    /* ── Grilles ─────────────────────────────────────── */
    .pricing-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start; }
    .pricing-grid--2col { grid-template-columns:repeat(2,1fr);max-width:680px;margin:0 auto; }
    @media(max-width:900px){.pricing-grid,.pricing-grid--2col{grid-template-columns:1fr;max-width:400px;margin:0 auto;}}

    /* ── Cartes ──────────────────────────────────────── */
    .price-card { border-radius:28px;padding:40px 32px;border:1px solid var(--border);background:rgba(255,255,255,.02);position:relative;overflow:hidden;transition:transform .3s; }
    .price-card:hover { transform:translateY(-3px); }
    .price-card.featured { background:rgba(124,58,237,.08);border-color:rgba(124,58,237,.4);box-shadow:0 0 60px rgba(124,58,237,.15); }
    .price-card.featured::before { content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad); }
    .popular-badge { display:inline-block;padding:4px 14px;border-radius:20px;background:var(--grad);font-size:11px;font-weight:700;color:#fff;margin-bottom:20px;letter-spacing:.06em;text-transform:uppercase; }
    .price-plan { font-size:14px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px; }
    .price-amount { font-size:52px;font-weight:900;line-height:1;margin-bottom:4px; }
    .price-currency { font-size:24px;font-weight:600;vertical-align:super;margin-left:2px; }
    .price-amount--text { font-size:32px; }
    .btn-engage { font-size:11px;color:var(--muted);text-align:center;margin:6px 0 0; }
    .price-period { font-size:13px;color:var(--muted);margin-bottom:28px; }
    .price-features { list-style:none;margin-bottom:36px; }
    .price-features li { display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:14px; }
    .price-features li:last-child { border-bottom:none; }
    .check-ic { color:#34d399;font-size:16px;flex-shrink:0;margin-top:2px; }
    .price-card .btn { width:100%;justify-content:center; }

    /* ── Stripe checkout button states ── */
    /* ── stripe-checkout-btn base ── */
    .stripe-checkout-btn { position: relative; overflow: hidden; }
    .stripe-checkout-btn:disabled { opacity: .7; cursor: not-allowed; transform: none !important; }
    .stripe-checkout-btn .btn-loading { display: none; align-items: center; gap: 8px; }


    /* ── Bouton PRO : shimmer animé en continu ── */
    @keyframes shimmer-slide {
      0%   { transform: translateX(-100%) skewX(-15deg); }
      100% { transform: translateX(250%) skewX(-15deg); }
    }
    @keyframes border-pulse {
      0%, 100% { box-shadow: 0 4px 14px rgba(168,85,247,0.3), 0 0 0 0 rgba(168,85,247,0); }
      50%       { box-shadow: 0 6px 24px rgba(168,85,247,0.5), 0 0 0 4px rgba(168,85,247,0.12); }
    }
    .btn-primary.stripe-checkout-btn[data-plan="pro"],
    .featured .stripe-checkout-btn.btn-primary {
      animation: border-pulse 2.4s ease-in-out infinite;
    }
    .btn-primary.stripe-checkout-btn[data-plan="pro"]::after,
    .featured .stripe-checkout-btn.btn-primary::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.22) 50%, transparent 65%);
      animation: shimmer-slide 2.8s ease-in-out infinite;
      pointer-events: none;
    }
    .btn-primary.stripe-checkout-btn[data-plan="pro"]:hover:not(:disabled),
    .featured .stripe-checkout-btn.btn-primary:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(168,85,247,0.55), 0 0 0 3px rgba(168,85,247,0.18);
      animation: none;
    }

    /* ── Bouton ENTERPRISE : outline dégradé + fill au hover ── */
    @keyframes enterprise-fill {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    .btn-outline:not(.stripe-checkout-btn),
    a.btn.btn-outline[href*="calendly"] {
      background: transparent;
      border: 1px solid transparent;
      background-clip: padding-box;
      position: relative;
      color: #c4b5fd;
      transition: color .25s ease, transform .25s ease;
    }
    a.btn.btn-outline[href*="calendly"]::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(135deg, #7c3aed, #ec4899);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }
    a.btn.btn-outline[href*="calendly"]::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(236,72,153,0.12));
      backdrop-filter: blur(12px);
      opacity: 0;
      transition: opacity .25s ease;
      pointer-events: none;
    }
    a.btn.btn-outline[href*="calendly"]:hover {
      transform: translateY(-2px);
      color: #fff;
    }
    a.btn.btn-outline[href*="calendly"]:hover::after { opacity: 1; }
    .stripe-note { font-size: 11px; color: var(--muted); text-align: center; margin-top: 12px; opacity: .7; }

    /* ── Stripe error toast ── */
    #stripe-toast {
      position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(80px);
      background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.4); color: #fca5a5;
      padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 500;
      backdrop-filter: blur(12px); z-index: 999;
      transition: transform .4s cubic-bezier(.22,1,.36,1), opacity .4s ease;
      opacity: 0; pointer-events: none; max-width: 420px; text-align: center;
    }
    #stripe-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

    @keyframes spin { to { transform: rotate(360deg); } }

    /* ─── FAQ ──────────────────────────────────────── */
    #faq { position:relative;z-index:2;padding:100px 0; }
    .faq-list { max-width:720px;margin:0 auto; }
    .faq-item { border:1px solid var(--border);border-radius:16px;overflow:hidden;margin-bottom:12px;transition:border-color .3s; }
    .faq-item.open { border-color:rgba(124,58,237,.4); }
    .faq-q { padding:22px 28px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:16px;font-weight:600;transition:background .2s; }
    .faq-q:hover { background:rgba(255,255,255,.02); }
    .faq-arrow { font-size:20px;transition:transform .4s;color:var(--muted); }
    .faq-item.open .faq-arrow { transform:rotate(45deg);color:var(--p1); }
    .faq-a { max-height:0;overflow:hidden;transition:max-height .5s ease,padding .3s ease;font-size:15px;color:var(--muted);line-height:1.7; }
    .faq-item.open .faq-a { max-height:300px;padding:0 28px 22px; }

    /* ─── COMPARATIF ───────────────────────────────── */
    #compare { position:relative;z-index:2;padding:100px 0; }
    .compare-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:60px; }
    .compare-table {
      width:100%; border-collapse:separate; border-spacing:0;
      min-width:620px;
    }
    .compare-table th {
      padding:18px 20px; font-size:13px; font-weight:700;
      text-align:center; letter-spacing:.04em; text-transform:uppercase;
      color:var(--muted); background:transparent;
    }
    .compare-table th.col-fidaly {
      background:linear-gradient(160deg,rgba(124,58,237,.18),rgba(236,72,153,.1));
      border:1px solid rgba(124,58,237,.35); border-bottom:none;
      border-radius:20px 20px 0 0; color:var(--text);
      font-size:15px; font-weight:900; letter-spacing:-.01em;
    }
    .compare-table th.col-fidaly .col-badge {
      display:inline-block; font-size:11px; font-weight:700;
      background:var(--grad); -webkit-background-clip:text;
      -webkit-text-fill-color:transparent; background-clip:text;
      letter-spacing:.06em; margin-top:4px;
    }
    .compare-table td {
      padding:16px 20px; text-align:center; font-size:14px; color:var(--muted);
      border-bottom:1px solid var(--border);
    }
    .compare-table td:first-child { text-align:left; font-weight:500; color:var(--text); padding-left:0; }
    .compare-table tr:last-child td { border-bottom:none; }
    .compare-table td.col-fidaly {
      background:rgba(124,58,237,.06);
      border-left:1px solid rgba(124,58,237,.25);
      border-right:1px solid rgba(124,58,237,.25);
      color:var(--text);
    }
    .compare-table tr:last-child td.col-fidaly {
      border-bottom:1px solid rgba(124,58,237,.35);
      border-radius:0 0 20px 20px;
    }
    .c-yes  { color:#4ade80; font-size:18px; font-weight:700; }
    .c-no   { color:rgba(232,232,255,.2); font-size:18px; }
    .c-part { color:#facc15; font-size:13px; font-weight:600; }

    /* ─── TRUST / SÉCURITÉ ─────────────────────────── */
    #trust { position:relative;z-index:2;padding:100px 0; }
    .trust-grid {
      display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
      margin-top:60px;
    }
    @media(max-width:860px){ .trust-grid { grid-template-columns:repeat(2,1fr); } }
    @media(max-width:520px){ .trust-grid { grid-template-columns:1fr; } }
    .trust-card {
      padding:32px 28px; border-radius:20px;
      background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,0.05);
      display:flex; flex-direction:column; gap:14px; height: 100%;
      transition:border-color .3s, transform .3s;
    }
    .trust-card:hover { border-color:rgba(124,58,237,.3); transform:translateY(-4px); background:rgba(255,255,255,.03); }
    .trust-icon {
      width:48px; height:48px; border-radius:14px; flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      background:rgba(124,58,237,.12); border:1px solid rgba(124,58,237,.2);
    }
    .trust-icon svg { width:22px; height:22px; }
    .trust-icon.green svg { color:rgba(34,197,94,.9); }
    .trust-icon.blue svg  { color:rgba(99,150,246,.9); }
    .trust-icon.pink svg  { color:rgba(236,72,153,.9); }
    .trust-icon:not(.green):not(.blue):not(.pink) svg { color:rgba(167,139,250,.9); }
    .trust-badge-icon { display:flex;align-items:center;justify-content:center; }
    .trust-badge-icon svg { width:20px; height:20px; color:var(--text); }
    .problem-icon-sm svg { width:26px; height:26px; color:rgba(237,58,82,.9); }
    .trust-icon.green  { background:rgba(34,197,94,.1);  border-color:rgba(34,197,94,.2); }
    .trust-icon.blue   { background:rgba(59,130,246,.1); border-color:rgba(59,130,246,.2); }
    .trust-icon.pink   { background:rgba(236,72,153,.1); border-color:rgba(236,72,153,.2); }
    .trust-card h3 { font-size:16px; font-weight:700; margin:0; }
    .trust-card p  { font-size:14px; color:var(--muted); line-height:1.6; margin:0; }
    .trust-banner {
      margin-top:60px; padding:0; border:none;
      background:transparent;
      display:flex; align-items:center; justify-content:center;
      gap:48px; flex-wrap:wrap; text-align:center;
    }
    .trust-badge { display:flex; flex-direction:column; align-items:center; gap:8px; opacity:0.4; filter:grayscale(100%); transition:all .3s ease; cursor:default; }
    .trust-badge:hover { opacity:1; filter:grayscale(0%); transform:translateY(-2px); }
    .trust-badge-icon { font-size:24px; }
    .trust-badge span { font-size:11px; font-weight:700; color:var(--text); letter-spacing:.06em; text-transform:uppercase; }

    /* ─── FINAL CTA ────────────────────────────────── */
    #cta { position:relative;z-index:2;padding:120px 0; }
    .cta-box { border-radius:36px;padding:80px 60px;text-align:center;position:relative;overflow:hidden;background:rgba(255,255,255,.02);border:1px solid rgba(124,58,237,.25); }
    .cta-box::before { content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(124,58,237,.12),rgba(236,72,153,.06),transparent 70%); }
    .cta-box h2 { font-size:clamp(32px,5vw,56px);font-weight:900;line-height:1.1;margin-bottom:20px;position:relative; }
    .cta-box p { font-size:18px;color:var(--muted);max-width:480px;margin:0 auto 40px;position:relative; }
    .cta-btns { display:flex;gap:16px;justify-content:center;position:relative;flex-wrap:wrap; }
    .cta-ring { position:absolute;border-radius:50%;border:1px solid rgba(124,58,237,.2);animation:ringPulse 3s ease-in-out infinite; }
    .ring1{width:300px;height:300px;top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:0s;}
    .ring2{width:500px;height:500px;top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:.6s;}
    .ring3{width:700px;height:700px;top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:1.2s;}
    @keyframes ringPulse { 0%,100%{opacity:.3;transform:translate(-50%,-50%) scale(1)} 50%{opacity:.7;transform:translate(-50%,-50%) scale(1.04)} }

    /* ─── FOOTER ───────────────────────────────────── */
    footer { position:relative;z-index:2;border-top:1px solid var(--border);padding:48px 0; }
    .footer-inner { display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px; }
    .footer-logo { font-size:20px;font-weight:900;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
    .footer-links { display:flex;gap:24px; }
    .footer-links a { font-size:13px;color:var(--muted);transition:color .2s; }
    .footer-links a:hover { color:var(--text); }
    .footer-copy { font-size:13px;color:var(--muted); }

    /* ─── MOBILE RESPONSIVENESS (Refonte) ──────────── */
    @media (max-width: 768px) {
      #wallet-showcase, #proof, #problem, #solution, #how, #benefits, #testimonials, #pricing, #faq, #compare, #trust {
        padding: 60px 0;
      }
      #cta { padding: 80px 0; }
      .section-head { margin-bottom: 40px; }
      .section-head h2 { font-size: clamp(28px, 8vw, 36px); }
      .price-card { padding: 32px 24px; border-radius: 20px; }
      .sol-card, .trust-card { padding: 24px 20px !important; }
      .price-amount { font-size: 42px; }
      .cta-box { padding: 48px 24px; border-radius: 24px; }
      .solution-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 480px) {
      .hs-btns { flex-direction: column; width: 100%; gap: 14px; }
      .hs-btns .btn { width: 100%; }
      .cta-btns { flex-direction: column; width: 100%; align-items: stretch; }
      .cta-btns .btn { width: 100%; }
      .compare-wrap { margin-top: 32px; }
      .ws-showcase { flex-direction: column; align-items: center; gap: 32px; }
      .ws-benefits-col { flex-direction: column; width: 100%; max-width: 100%; gap: 12px; }
      .ws-benefit-card { width: 100%; justify-content: center; }
      .ws-phone-wrap { transform: scale(0.9); transform-origin: top center; margin-bottom: -40px; }
      .ws-phone { width: 230px !important; height: 480px !important; }
    }

    /* ─── NOISE ────────────────────────────────────── */
    body::after { content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.025;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'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

    /* ─── REDUCED MOTION ───────────────────────────── */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
      .aurora-orb, .ws-phone-wrap, .marquee-track,
      .step-num::before, .step-num::after,
      .sol-card--accent, .hs-c2::before, .hs-c3::before { animation: none !important; }
      #cursor-glow { display: none; }
    }

/* ========================================================= */
/* MOBILE RESPONSIVENESS OVERRIDES                           */
/* ========================================================= */

html, body, #wrapper {
    overflow-x: hidden !important;
}

@media(max-width: 900px) {
    /* Benton Box (Problem) */
    .problem-main {
        padding: 32px !important;
    }
    .problem-main h3 {
        font-size: 28px !important;
    }
    .problem-main-icon {
        font-size: 48px !important;
    }
    .stat-big {
        font-size: 56px !important;
    }
}

@media(max-width: 768px) {
    /* Header CTA */
    .nav-cta {
        display: none !important;
    }
    
    /* Hero Section */
    .heroWrap h1 {
        font-size: 44px !important;
    }
    .heroWrap p {
        font-size: 18px !important;
    }

    /* Results Circles - Disposition Premium Mobile */
    .benefit-visual {
        width: 100%;
        max-width: 340px;
        margin: 0 auto;
    }
    .stat-circle.big { width:170px !important; height:170px !important; border-width: 1px !important; z-index: 2 !important; position: relative !important; margin: 0 auto !important; }
    .stat-circle.med { width:120px !important; height:120px !important; top: 10px !important; right: 5% !important; border-width: 1px !important; position: absolute !important; }
    .stat-circle.sm  { width:120px !important; height:120px !important; bottom: 10px !important; left: 5% !important; border-width: 1px !important; position: absolute !important; }
    .stat-circle .num { font-size: 32px !important; margin-bottom: 4px !important; }
    .stat-circle .num.med-num { font-size: 20px !important; }
    .stat-circle .num.sm-num { font-size: 20px !important; }
    .stat-circle .lbl { font-size: 11px !important; padding: 0 4px !important; line-height: 1.2 !important; }

    /* Problem Section */
    .problem-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
        padding: 24px !important;
    }
}

@media(max-width: 500px) {
    .heroWrap h1 {
        font-size: 36px !important;
    }
    .ws-title {
        font-size: 32px !important;
    }
    .problem-main {
        padding: 24px !important;
    }
    .problem-main h3 {
        font-size: 24px !important;
    }
    .stat-big {
        font-size: 48px !important;
    }
    
    /* Results Circles extra squeeze retiré, on gère proprement la disposition */
    .benefit-visual {
        transform: none !important;
        height: 320px !important;
        margin-top: 24px;
        max-width: 340px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media(max-width: 768px) {
    /* Hide comparison table on mobile */
    #compare {
        display: none !important;
    }
}

@media(max-width: 500px) {
    /* Extreme shrink for bento cards to remove useless scroll */
    .problem-item {
        padding: 16px !important;
        gap: 12px !important;
    }
    .problem-icon-sm {
        width: 48px !important;
        height: 48px !important;
        font-size: 24px !important;
    }
    .problem-item h4 {
        font-size: 17px !important;
        margin-bottom: 4px !important;
    }
    .problem-item p {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
    
    /* Ultimate fix for Carte Mal Positionne */
    .zigzag-cluster {
        margin-left: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) scale(0.40) !important;
        position: relative !important;
    }
}
@media(max-width: 380px) {
    .zigzag-cluster {
        transform: translateX(-50%) scale(0.34) !important;
    }
}