* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

    /* ── Reusable utility classes (extracted from inline styles) ── */
    .card-surface {
      background: linear-gradient(160deg, #1A2235, #222D42);
      border: 1px solid rgba(255,255,255,0.05);
    }
    .card-surface-subtle {
      background: linear-gradient(160deg, #1A2235, #222D42);
      border: 1px solid rgba(255,255,255,0.04);
    }
    .bg-gradient-gold { background: linear-gradient(135deg, #F5C731, #F8D96A); }
    .bg-gradient-red { background: linear-gradient(135deg, #D94035, #E8524A); }
    .bg-gradient-fire-badge { background: linear-gradient(135deg, #D94035, #F5C731); }
    .bg-gradient-navy { background: linear-gradient(135deg, #1C3560, #0F1F3A); }
    .bg-gradient-deep { background: linear-gradient(160deg, #0D1219 0%, #080C12 100%); }
    .glow-rouge { background: radial-gradient(circle at 50% 50%, rgba(232,82,74,0.1) 0%, transparent 70%); }
    .glow-soleil { background: radial-gradient(circle, rgba(245,199,49,0.04) 0%, transparent 70%); }
    .safe-bottom { padding-bottom: max(0.5rem, env(safe-area-inset-bottom)); }

    /* ── Scroll progress bar ── */
    #scroll-progress {
      position: fixed;
      top: 0;
      left: 0;
      height: 3px;
      z-index: 99998;
      background: linear-gradient(90deg, #F5C731, #D94035, #9B59B6);
      width: 0%;
      transition: width 0.1s linear;
      pointer-events: none;
    }

    /* ── Testimonial carousel ── */
    .testimonial-track {
      display: flex;
      transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
    }
    .testimonial-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(28,53,96,0.15);
      transition: all 0.3s;
      cursor: pointer;
    }
    .testimonial-dot.active {
      background: #D94035;
      width: 24px;
      border-radius: 4px;
    }



    /* ── Accessibility — Focus visible ── */
    *:focus-visible {
      outline: 3px solid #F5C731;
      outline-offset: 2px;
      border-radius: 8px;
    }
    /* Skip to content link (screen readers) */
    .skip-link {
      position: absolute;
      top: -100%;
      left: 16px;
      z-index: 999999;
      background: #1C3560;
      color: white;
      padding: 12px 24px;
      border-radius: 0 0 12px 12px;
      font-weight: 800;
      font-size: 14px;
      transition: top 0.3s;
    }
    .skip-link:focus { top: 0; }

    body {
      font-family: 'DM Sans', sans-serif;
      background: #0F1520;
      color: #F0EDE8;
      overflow-x: hidden;
    }

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

    /* ── Reveal animations ── */
    .rv { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
    .rv.vis { opacity: 1; transform: translateY(0); }
    .rv-d1 { transition-delay: .12s } .rv-d2 { transition-delay: .24s } .rv-d3 { transition-delay: .36s } .rv-d4 { transition-delay: .48s } .rv-d5 { transition-delay: .6s }
    .rv-scale { opacity: 0; transform: scale(0.92); transition: opacity 0.7s ease, transform 0.7s ease; }
    .rv-scale.vis { opacity: 1; transform: scale(1); }

    /* ── Heading scale ── */
    .h-hero { font-size: clamp(2.4rem, 7vw, 5rem); line-height: 1.05; letter-spacing: -0.02em; }
    .h-section { font-size: clamp(1.8rem, 4.5vw, 3.2rem); line-height: 1.1; letter-spacing: -0.015em; }
    .h-sub { font-size: clamp(1.2rem, 2.5vw, 1.6rem); line-height: 1.3; }

    /* ── Glass card ── */
    .glass { background: rgba(26,34,53,0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); }
    .glass-dark { background: rgba(15,21,32,0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.05); }

    /* ── Card hover ── */
    .card-hover { transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease; }
    .card-hover:hover { transform: translateY(-8px) scale(1.01); box-shadow: 0 20px 60px rgba(0,0,0,0.4); }

    /* ── Buttons ── */
    .btn-primary {
      background: linear-gradient(135deg, #D94035 0%, #E8524A 100%);
      color: white;
      font-weight: 800;
      padding: 1rem 2.2rem;
      border-radius: 16px;
      font-size: 1.1rem;
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      box-shadow: 0 4px 24px rgba(217,64,53,0.35), 0 0 0 0 rgba(217,64,53,0);
      transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
      position: relative;
      overflow: hidden;
    }
    .btn-primary::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 60%);
      opacity: 0;
      transition: opacity 0.3s;
    }
    .btn-primary:hover {
      transform: translateY(-2px) scale(1.03);
      box-shadow: 0 8px 40px rgba(217,64,53,0.45), 0 0 0 4px rgba(217,64,53,0.1);
    }
    .btn-primary:hover::before { opacity: 1; }
    .btn-primary:active { transform: scale(0.97); }

    .btn-gold {
      background: linear-gradient(135deg, #F5C731 0%, #F8D96A 100%);
      color: #1C3560;
      font-weight: 800;
      padding: 1rem 2.2rem;
      border-radius: 16px;
      font-size: 1.1rem;
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      box-shadow: 0 4px 24px rgba(245,199,49,0.3);
      transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
    }
    .btn-gold:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 40px rgba(245,199,49,0.4); }

    .btn-outline {
      border: 2.5px solid rgba(255,255,255,0.2);
      color: #F0EDE8;
      font-weight: 800;
      padding: 0.9rem 2rem;
      border-radius: 16px;
      font-size: 1.1rem;
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      transition: all 0.3s ease;
    }
    .btn-outline:hover { background: rgba(255,255,255,0.1); color: white; transform: translateY(-2px); }

    /* ── Pulse animation ── */
    @keyframes pulse-ring { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
    .pulse-dot { position: relative; }
    .pulse-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: #5DAE3B; animation: pulse-ring 2s ease-out infinite; }

    /* ── Floating CTA ── */
    .floating-cta {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 45;
      animation: float-bob 3s ease-in-out infinite;
      display: none;
    }
    .floating-cta.show { display: flex; }
    @media (max-width: 1023px) { .floating-cta, .floating-cta.show { display: none !important; } }
    @keyframes float-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

    /* ── Counter ── */
    .counter { font-variant-numeric: tabular-nums; }

    /* ── Nav ── */
    .nav-glass {
      background: rgba(15,21,32,0.8);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: 0 1px 0 rgba(255,255,255,0.04);
    }
    .nav-solid {
      background: rgba(15,21,32,0.95) !important;
      box-shadow: 0 4px 30px rgba(0,0,0,0.3) !important;
    }

    /* ── Parallax section ── */
    .parallax-bg {
      background-attachment: fixed;
      background-size: cover;
      background-position: center;
    }
    @media (max-width: 768px) { .parallax-bg { background-attachment: scroll; } }

    /* ── Gradient text ── */
    .text-gradient-fire {
      background: linear-gradient(135deg, #E8524A 0%, #F5C731 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .text-gradient-cool {
      background: linear-gradient(135deg, #6BC94A 0%, #F5C731 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* ── Mobile menu ── */
    #mob-menu.open { pointer-events: auto; }
    #mob-menu.open #mob-menu-bg { background: rgba(0,0,0,0.4); }
    #mob-menu.open #mob-menu-panel { transform: translateX(0); }

    /* ── Tab system ── */
    .tab-panel { display: none; animation: tabIn 0.5s cubic-bezier(0.16,1,0.3,1); }
    .tab-panel.active { display: grid; }
    @keyframes tabIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
    .tab-btn { position: relative; transition: all 0.3s; }
    .tab-btn.active { background: #1C3560; color: white; }

    /* ── Marquee ── */
    @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
    .marquee-track { animation: marquee 30s linear infinite; }
    .marquee-track:hover { animation-play-state: paused; }

    /* ── Scrollbar ── */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: #0F1520; }
    ::-webkit-scrollbar-thumb { background: #E8524A; border-radius: 999px; }

    /* ── Image shine on hover ── */
    .img-shine { position: relative; overflow: hidden; }
    .img-shine::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.25) 45%, transparent 50%);
      transform: translateX(-100%);
      transition: transform 0.6s ease;
    }
    .img-shine:hover::after { transform: translateX(100%); }

    /* ── Live badge ── */
    @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
    .live-dot { animation: blink 1.5s ease-in-out infinite; }

    /* ── Hide scrollbar for category pills ── */
    .scrollbar-hide::-webkit-scrollbar { display: none; }
    .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

    /* ── Sticky bottom mobile ── */
    .mob-bar { box-shadow: 0 -4px 30px rgba(28,53,96,0.1); padding-bottom: env(safe-area-inset-bottom, 0); }

    /* ── Mobile responsive — FULL OVERHAUL ── */
    @media (max-width: 768px) {
      /* Typography mobile */
      .h-hero { font-size: clamp(1.9rem, 7.5vw, 2.8rem); line-height: 1.08; }
      .h-section { font-size: clamp(1.55rem, 6vw, 2rem); }
      .h-sub { font-size: clamp(1.05rem, 4vw, 1.3rem); }

      /* Buttons — bigger touch targets, full width */
      .btn-primary, .btn-gold, .btn-outline {
        padding: 0.95rem 1.6rem;
        font-size: 0.95rem;
        border-radius: 14px;
        min-height: 52px;
        justify-content: center;
        width: 100%;
      }

      /* Cards don't lift on mobile (no hover) */
      .card-hover:hover { transform: none; box-shadow: none; }

      /* Section spacing tighter on mobile */
      .mob-py { padding-top: 3.5rem; padding-bottom: 3.5rem; }

      /* Disable img shine on mobile (no hover) */
      .img-shine::after { display: none; }
    }

    /* ── Small phones (iPhone SE etc) ── */
    @media (max-width: 380px) {
      .h-hero { font-size: 1.7rem; }
      .btn-primary, .btn-gold, .btn-outline { padding: 0.8rem 1.2rem; font-size: 0.88rem; }
    }

    /* ── Hero animations ── */
    @keyframes hero-float-1 { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-15px) rotate(3deg); } }
    @keyframes hero-float-2 { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(-3deg); } }
    @keyframes hero-float-3 { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.05); } }
    @keyframes hero-glow-pulse { 0%,100% { opacity: 0.15; transform: scale(1); } 50% { opacity: 0.25; transform: scale(1.1); } }
    @keyframes hero-text-shimmer {
      0% { background-position: -200% center; }
      100% { background-position: 200% center; }
    }
    .hero-shimmer {
      background-size: 200% auto;
      animation: hero-text-shimmer 4s linear infinite;
    }
    @keyframes hero-badge-glow { 0%,100% { box-shadow: 0 0 15px rgba(93,174,59,0.15); } 50% { box-shadow: 0 0 25px rgba(93,174,59,0.3); } }
    @keyframes hero-cta-glow { 0%,100% { box-shadow: 0 4px 24px rgba(245,199,49,0.3); } 50% { box-shadow: 0 4px 40px rgba(245,199,49,0.5), 0 0 60px rgba(245,199,49,0.15); } }
    @keyframes hero-cta-glow-red { 0%,100% { box-shadow: 0 4px 24px rgba(232,82,74,0.3); } 50% { box-shadow: 0 4px 40px rgba(232,82,74,0.5), 0 0 60px rgba(232,82,74,0.15); } }
    @keyframes hero-cta-bounce { 0%,100% { transform: translateY(0); } 15% { transform: translateY(-6px); } 30% { transform: translateY(0); } 45% { transform: translateY(-3px); } 60% { transform: translateY(0); } }
    @keyframes hero-cta-icon-spin { 0% { transform: rotate(0deg); } 25% { transform: rotate(15deg); } 75% { transform: rotate(-15deg); } 100% { transform: rotate(0deg); } }

    /* ── Promo banner ── */
    .promo-banner {
      background: linear-gradient(90deg, #D94035 0%, #B8302A 50%, #D94035 100%);
      background-size: 200% 100%;
      animation: promo-shimmer 3s ease-in-out infinite;
    }
    @keyframes promo-shimmer { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

    /* ── Promo popup ── */
    .promo-popup {
      animation: popup-in 0.6s cubic-bezier(0.16,1,0.3,1);
    }
    @keyframes popup-in {
      from { opacity: 0; transform: translate(-50%,-50%) scale(0.85); }
      to { opacity: 1; transform: translate(-50%,-50%) scale(1); }
    }
    .promo-confetti {
      position: absolute;
      width: 8px; height: 8px;
      border-radius: 2px;
      animation: confetti-fall 2.5s ease-out forwards;
      pointer-events: none;
    }
    @keyframes confetti-fall {
      0% { transform: translateY(0) rotate(0deg); opacity: 1; }
      100% { transform: translateY(200px) rotate(720deg); opacity: 0; }
    }

    /* ── Timer digits ── */

    /* ── CTA shake ── */
    @keyframes cta-shake {
      0%, 100% { transform: translateX(0) rotate(0); }
      10% { transform: translateX(-4px) rotate(-2deg); }
      20% { transform: translateX(4px) rotate(2deg); }
      30% { transform: translateX(-4px) rotate(-1deg); }
      40% { transform: translateX(4px) rotate(1deg); }
      50% { transform: translateX(-2px) rotate(0); }
      60% { transform: translateX(2px) rotate(0); }
      70% { transform: translateX(0); }
    }
    .cta-shake { animation: cta-shake 0.6s ease-in-out; }

    /* ── Chatbot ── */
    #chat-window { animation: chat-open 0.4s cubic-bezier(0.16,1,0.3,1); }
    @keyframes chat-open { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
    .chat-msg { animation: chat-msg-in 0.3s ease; }
    @keyframes chat-msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
    .chat-typing span { animation: typing-dot 1.4s infinite; display: inline-block; }
    .chat-typing span:nth-child(2) { animation-delay: 0.2s; }
    .chat-typing span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes typing-dot { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }

    .timer-digit {
      background: rgba(255,255,255,0.15);
      padding: 2px 6px;
      border-radius: 6px;
      font-variant-numeric: tabular-nums;
      font-weight: 900;
      min-width: 28px;
      text-align: center;
      display: inline-block;
    }