/* --- bloc original 1/5 --- */
@font-face{font-family:'Benzin';src:url('/assets/fonts/Benzin-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
    @font-face{font-family:'Benzin';src:url('/assets/fonts/Benzin-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
    @font-face{font-family:'Benzin';src:url('/assets/fonts/Benzin-Semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
    @font-face{font-family:'Benzin';src:url('/assets/fonts/Benzin-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
    @font-face{font-family:'Benzin';src:url('/assets/fonts/Benzin-ExtraBold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}

    /* ============================================
       SITES - Offre création de site web
       ============================================ */

    :root {
      --sites-accent: #ae0000;
      /* Variante TEXTE du rouge. #ae0000 ne donne que 2.57 sur fond sombre,
         sous le seuil WCAG AA meme en grand corps. #e74c3c donne 5.05 et est
         deja present dans la palette de la page : aucune couleur nouvelle. */
      --sites-accent-text: #e74c3c;

      /* Echelle typographique : 8 pas au lieu de 26 valeurs ad hoc.
         Plancher a 0.70rem (11.2px) conforme au DA.md : en dessous, l'acheteur
         type du site (35 a 55 ans) ne lit plus. */
      --fs-2xs: 0.70rem;
      --fs-xs: 0.78rem;
      --fs-sm: 0.85rem;
      --fs-md: 0.95rem;
      --fs-lg: 1.10rem;
      --fs-xl: 1.40rem;
      --fs-2xl: 1.80rem;
      --fs-3xl: 3.00rem;

      /* Rayons : 4 roles au lieu de 13 valeurs. */
      --r-sm: 4px;    /* champs, petits boutons */
      --r-md: 8px;    /* cartes, bandeaux */
      --r-lg: 16px;   /* grandes surfaces */
      --r-pill: 30px; /* pastilles et badges */
      --sites-accent-rgb: 174, 0, 0;
      --sites-gold: #d4a84b;
      --sites-gold-rgb: 212, 168, 75;
    }

    /* NAV OVERRIDES */
    .nav__link:hover { color: var(--sites-gold); }
    .nav__link::after { background: var(--sites-gold); }
    .nav__link--active { color: var(--sites-gold); }
    .nav__link--active::after, .nav__link:hover::after { width: 100%; }
    .nav__hamburger span { background: #f5f5f5; }

    /* ============ HERO SLIDER ============ */
    .sites-hero {
      min-height: 100vh;
      position: relative;
      overflow: hidden;
      background: #0a0a0a;
    }

    /* --- Slides container --- */
    .hero-slider {
      position: relative;
      width: 100%;
      min-height: 100vh;
      overflow: hidden;
    }
    .hero-slide {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      z-index: 1;
      pointer-events: none;
      padding: clamp(7rem, 15vh, 10rem) clamp(1.5rem, 4vw, 3rem) clamp(4rem, 8vh, 6rem);
    }
    .hero-slide--active {
      opacity: 1;
      visibility: visible;
      z-index: 2;
      pointer-events: auto;
    }

    /* --- Shared inner --- */
    .hero-slide__inner {
      position: relative;
      z-index: 3;
      max-width: 960px;
      width: 100%;
    }

    /* --- Shared typography --- */
    .hero-slide__badge {
      display: inline-block;
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-2xs);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.3em;
      padding: 0.5rem 1.5rem;
      border-radius: var(--r-pill);
      margin-bottom: 2rem;
    }
    .hero-slide__title {
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-weight: 700;
      color: #f5f5f5;
      line-height: 1.08;
      letter-spacing: 0.02em;
      margin-bottom: 1.5rem;
    }
    .hero-slide__subtitle {
      font-family: 'Montserrat', sans-serif;
      line-height: 1.7;
      max-width: 680px;
      margin-bottom: 2.5rem;
    }
    .hero-slide__cta {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      padding: 1rem 2.5rem;
      color: #fff;
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: var(--fs-sm);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      text-decoration: none;
      border-radius: var(--r-sm);
      transition: transform 0.3s, box-shadow 0.3s;
      position: relative;
      overflow: hidden;
    }
    .hero-slide__cta:hover {
      transform: translateY(-2px);
    }
    .hero-slide__cta svg {
      width: 16px;
      height: 16px;
      transition: transform 0.3s;
    }
    .hero-slide__cta:hover svg {
      transform: translateX(4px);
    }

    /* --- Hero bottom controls (explore + dots + scroll) --- */
    .hero-bottom {
      position: absolute;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
      z-index: 10;
    }
    .hero-explore {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-2xs);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.3em;
      color: rgba(255,255,255,0.25);
      transition: opacity 0.5s ease;
    }
    .hero-explore--hidden {
      opacity: 0;
      pointer-events: none;
    }
    .hero-dots {
      display: flex;
      gap: 0.75rem;
    }
    .hero-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255,255,255,0.15);
      border: 1px solid rgba(255,255,255,0.2);
      cursor: pointer;
      transition: all 0.4s ease;
      position: relative;
    }
    .hero-dot--active {
      background: var(--sites-gold);
      border-color: var(--sites-gold);
      box-shadow: 0 0 10px rgba(212,168,75,0.3);
      transform: scale(1.3);
    }
    .hero-dot__progress {
      display: none;
    }

    /* --- Scroll indicator --- */
    .hero-scroll {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.3rem;
      color: #444;
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-2xs);
      text-transform: uppercase;
      letter-spacing: 0.3em;
    }
    .hero-scroll svg {
      width: 16px;
      height: 16px;
      animation: scrollBounce 2s ease-in-out infinite;
    }
    @keyframes scrollBounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(5px); }
    }

    /* --- Slide counter --- */
    .hero-counter {
      position: absolute;
      top: 50%;
      right: 2rem;
      transform: translateY(-50%);
      z-index: 10;
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: var(--fs-2xs);
      color: rgba(255,255,255,0.2);
      letter-spacing: 0.15em;
      writing-mode: vertical-rl;
    }
    .hero-counter__current {
      color: var(--sites-gold);
      font-size: var(--fs-md);
    }

    /* ===== SLIDE A - CINEMATIC ENTRANCE ===== */
    .hero-slide--a {
      text-align: center;
    }
    .hero-slide--a::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 50% 40%, rgba(174,0,0,0.12) 0%, transparent 55%),
        radial-gradient(circle at 80% 20%, rgba(212,168,75,0.06) 0%, transparent 40%);
      pointer-events: none;
    }
    .hero-slide--a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 40%;
      background: linear-gradient(to top, #0a0a0a, transparent);
      pointer-events: none;
    }
    .hero-slide--a .hero-slide__badge {
      color: var(--sites-gold);
      border: 1px solid rgba(212,168,75,0.3);
    }
    .hero-slide--a .hero-slide__title {
      font-size: clamp(2.4rem, 6.5vw, 5rem);
    }
    .hero-slide--a .hero-slide__title em {
      font-style: normal;
      color: var(--sites-accent-text);
    }
    .hero-slide--a .hero-slide__subtitle {
      color: #888;
      font-size: clamp(1rem, 1.4vw, 1.15rem);
      margin-left: auto;
      margin-right: auto;
    }
    .hero-slide--a .hero-slide__cta {
      background: var(--sites-accent);
    }
    .hero-slide--a .hero-slide__cta:hover {
      box-shadow: 0 8px 35px rgba(174,0,0,0.4);
    }
    .hero-slide--a .hero-slide__price {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 0.75rem;
      margin-bottom: 1rem;
    }
    .hero-slide--a .hero-slide__amount {
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: clamp(3rem, 7vw, 5rem);
      font-weight: 700;
      color: #f5f5f5;
      line-height: 1;
    }
    .hero-slide--a .hero-slide__currency {
      font-family: 'Montserrat', sans-serif;
      font-size: clamp(1rem, 1.5vw, 1.2rem);
      font-weight: 600;
      color: #8a8a8a;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }
    .hero-slide--a .hero-slide__option {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-sm);
      color: #8a8a8a;
      margin-bottom: 2.5rem;
    }
    .hero-slide--a .hero-slide__option strong {
      color: var(--sites-gold);
    }

    /* ===== SLIDE B - SPLIT DIAGONAL ===== */
    .hero-slide--b {
      text-align: left;
    }
    .hero-slide--b::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 45%;
      height: 100%;
      background: linear-gradient(135deg, transparent 0%, rgba(174,0,0,0.04) 50%, rgba(174,0,0,0.08) 100%);
      clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
      pointer-events: none;
    }
    .hero-slide--b::after {
      content: '';
      position: absolute;
      right: 8%;
      top: 50%;
      transform: translateY(-50%);
      width: 280px;
      height: 380px;
      border: 2px solid rgba(212,168,75,0.12);
      border-radius: var(--r-md);
      pointer-events: none;
    }
    .hero-slide--b .hero-slide__inner {
      max-width: 55%;
      padding-left: 5%;
    }
    .hero-slide--b .hero-slide__badge {
      color: var(--sites-accent-text);
      border: 1px solid rgba(174,0,0,0.3);
      background: rgba(174,0,0,0.06);
    }
    .hero-slide--b .hero-slide__title {
      font-size: clamp(2rem, 5vw, 3.8rem);
    }
    .hero-slide--b .hero-slide__title em {
      font-style: normal;
      color: var(--sites-gold);
    }
    .hero-slide--b .hero-slide__subtitle {
      color: #777;
      font-size: clamp(0.95rem, 1.3vw, 1.1rem);
    }
    .hero-slide--b .hero-slide__cta {
      background: transparent;
      border: 2px solid var(--sites-gold);
      color: var(--sites-gold);
    }
    .hero-slide--b .hero-slide__cta:hover {
      background: var(--sites-gold);
      color: #0a0a0a;
      box-shadow: 0 8px 30px rgba(212,168,75,0.3);
    }
    .hero-slide--b .hero-slide__stat {
      display: flex;
      gap: 3rem;
      margin-bottom: 2.5rem;
    }
    .hero-slide--b .hero-slide__stat-item {
      display: flex;
      flex-direction: column;
    }
    .hero-slide--b .hero-slide__stat-num {
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: clamp(1.8rem, 3vw, 2.5rem);
      font-weight: 700;
      color: var(--sites-gold);
      line-height: 1;
    }
    .hero-slide--b .hero-slide__stat-label {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-2xs);
      color: #8a8a8a;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      margin-top: 0.3rem;
    }

    /* ===== SLIDE C - TYPOGRAPHIC IMPACT ===== */
    .hero-slide--c {
      text-align: center;
    }
    .hero-slide--c::before {
      content: 'DESIGN';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: clamp(8rem, 22vw, 20rem);
      font-weight: 800;
      color: rgba(255,255,255,0.015);
      letter-spacing: 0.05em;
      white-space: nowrap;
      pointer-events: none;
      user-select: none;
    }
    .hero-slide--c .hero-slide__badge {
      color: #fff;
      border: 1px solid rgba(255,255,255,0.15);
      background: rgba(255,255,255,0.03);
    }
    .hero-slide--c .hero-slide__title {
      font-size: clamp(2.6rem, 7vw, 5.5rem);
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    .hero-slide--c .hero-slide__title em {
      font-style: normal;
      display: block;
      font-size: 0.4em;
      color: var(--sites-gold);
      letter-spacing: 0.2em;
      margin-top: 0.5rem;
    }
    .hero-slide--c .hero-slide__subtitle {
      color: #8a8a8a;
      font-size: clamp(0.95rem, 1.3vw, 1.1rem);
      margin-left: auto;
      margin-right: auto;
    }
    .hero-slide--c .hero-slide__cta {
      background: #fff;
      color: #0a0a0a;
      font-weight: 700;
    }
    .hero-slide--c .hero-slide__cta:hover {
      box-shadow: 0 8px 35px rgba(255,255,255,0.15);
    }

    /* ===== SLIDE D - URGENCE / COMPTEUR ===== */
    .hero-slide--d {
      text-align: center;
    }
    .hero-slide--d::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(174,0,0,0.06) 0%, transparent 40%),
        linear-gradient(0deg, #0a0a0a 0%, transparent 30%);
      pointer-events: none;
    }
    .hero-slide--d .hero-slide__badge {
      color: #e74c3c;
      border: 1px solid rgba(231,76,60,0.3);
      background: rgba(231,76,60,0.06);
      animation: urgPulse 2s ease-in-out infinite;
    }
    @keyframes urgPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(231,76,60,0); }
      50% { box-shadow: 0 0 20px 4px rgba(231,76,60,0.15); }
    }
    .hero-slide--d .hero-slide__title {
      font-size: clamp(2.2rem, 5.5vw, 4.2rem);
    }
    .hero-slide--d .hero-slide__title em {
      font-style: normal;
      color: #e74c3c;
    }
    .hero-slide--d .hero-slide__subtitle {
      color: #888;
      font-size: clamp(1rem, 1.4vw, 1.15rem);
      margin-left: auto;
      margin-right: auto;
    }
    .hero-slide--d .hero-slide__urgency-bar {
      display: inline-flex;
      align-items: center;
      gap: 1rem;
      padding: 0.8rem 2rem;
      background: rgba(231,76,60,0.06);
      border: 1px solid rgba(231,76,60,0.15);
      border-radius: var(--r-sm);
      margin-bottom: 2rem;
    }
    .hero-slide--d .hero-slide__urgency-count {
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: clamp(2rem, 3.5vw, 2.8rem);
      font-weight: 700;
      color: #e74c3c;
      line-height: 1;
    }
    .hero-slide--d .hero-slide__urgency-text {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-2xs);
      color: #888;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      text-align: left;
      line-height: 1.4;
    }
    .hero-slide--d .hero-slide__cta {
      background: #e74c3c;
    }
    .hero-slide--d .hero-slide__cta:hover {
      box-shadow: 0 8px 30px rgba(231,76,60,0.35);
    }

    /* ===== SLIDE E - GRID / TECH ===== */
    .hero-slide--e {
      text-align: center;
    }
    .hero-slide--e::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(212,168,75,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212,168,75,0.03) 1px, transparent 1px);
      background-size: 60px 60px;
      pointer-events: none;
    }
    .hero-slide--e::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 50%, transparent 30%, #0a0a0a 80%);
      pointer-events: none;
    }
    .hero-slide--e .hero-slide__badge {
      color: var(--sites-gold);
      border: 1px solid rgba(212,168,75,0.25);
      background: rgba(212,168,75,0.04);
    }
    .hero-slide--e .hero-slide__title {
      font-size: clamp(2rem, 5vw, 4rem);
    }
    .hero-slide--e .hero-slide__title em {
      font-style: normal;
      color: var(--sites-gold);
    }
    .hero-slide--e .hero-slide__subtitle {
      color: #777;
      font-size: clamp(0.95rem, 1.3vw, 1.1rem);
      margin-left: auto;
      margin-right: auto;
    }
    .hero-slide--e .hero-slide__features {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-bottom: 2.5rem;
    }
    .hero-slide--e .hero-slide__feature {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.4rem 1rem;
      background: rgba(212,168,75,0.04);
      border: 1px solid rgba(212,168,75,0.1);
      border-radius: var(--r-lg);
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-2xs);
      font-weight: 500;
      color: #aaa;
      letter-spacing: 0.05em;
    }
    .hero-slide--e .hero-slide__feature svg {
      width: 12px;
      height: 12px;
      color: var(--sites-gold);
    }
    .hero-slide--e .hero-slide__cta {
      background: var(--sites-gold);
      color: #0a0a0a;
      font-weight: 700;
    }
    .hero-slide--e .hero-slide__cta:hover {
      box-shadow: 0 8px 30px rgba(212,168,75,0.35);
    }

    /* ===== SLIDE F - GRADIENT FLOW ===== */
    .hero-slide--f {
      text-align: center;
    }
    .hero-slide--f::before {
      content: '';
      position: absolute;
      inset: -50%;
      background: conic-gradient(
        from 0deg at 50% 50%,
        rgba(174,0,0,0.06) 0deg,
        rgba(212,168,75,0.04) 90deg,
        rgba(174,0,0,0.06) 180deg,
        rgba(212,168,75,0.04) 270deg,
        rgba(174,0,0,0.06) 360deg
      );
      animation: gradFlow 20s linear infinite;
      pointer-events: none;
    }
    @keyframes gradFlow {
      to { transform: rotate(360deg); }
    }
    .hero-slide--f::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 50%, transparent 20%, #0a0a0a 70%);
      pointer-events: none;
    }
    .hero-slide--f .hero-slide__badge {
      color: var(--sites-gold);
      border: 1px solid rgba(212,168,75,0.3);
    }
    .hero-slide--f .hero-slide__title {
      font-size: clamp(2.2rem, 5.5vw, 4.2rem);
    }
    .hero-slide--f .hero-slide__title em {
      font-style: normal;
      background: linear-gradient(90deg, var(--sites-accent), var(--sites-gold));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .hero-slide--f .hero-slide__subtitle {
      color: #888;
      font-size: clamp(1rem, 1.4vw, 1.15rem);
      margin-left: auto;
      margin-right: auto;
    }
    .hero-slide--f .hero-slide__cta {
      background: linear-gradient(135deg, var(--sites-accent), #cc1a1a);
    }
    .hero-slide--f .hero-slide__cta:hover {
      box-shadow: 0 8px 35px rgba(174,0,0,0.4);
    }

    /* ===== SLIDE G - LUXURY GOLD ===== */
    .hero-slide--g {
      text-align: center;
    }
    .hero-slide--g::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 30% 30%, rgba(212,168,75,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 70%, rgba(212,168,75,0.05) 0%, transparent 50%);
      pointer-events: none;
    }
    .hero-slide--g::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 500px;
      height: 500px;
      border: 1px solid rgba(212,168,75,0.06);
      border-radius: 50%;
      pointer-events: none;
    }
    .hero-slide--g .hero-slide__badge {
      color: var(--sites-gold);
      border: 1px solid rgba(212,168,75,0.4);
      background: rgba(212,168,75,0.06);
    }
    .hero-slide--g .hero-slide__title {
      font-size: clamp(2rem, 5vw, 4rem);
      letter-spacing: 0.03em;
    }
    .hero-slide--g .hero-slide__title em {
      font-style: normal;
      color: var(--sites-gold);
    }
    .hero-slide--g .hero-slide__subtitle {
      color: #888;
      font-size: clamp(1rem, 1.4vw, 1.15rem);
      margin-left: auto;
      margin-right: auto;
    }
    .hero-slide--g .hero-slide__price-tag {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.8rem 2rem;
      border: 1px solid rgba(212,168,75,0.2);
      border-radius: var(--r-sm);
      margin-bottom: 2rem;
      background: rgba(212,168,75,0.03);
    }
    .hero-slide--g .hero-slide__price-tag-amount {
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: clamp(1.4rem, 2.5vw, 1.8rem);
      font-weight: 700;
      color: var(--sites-gold);
      line-height: 1;
    }
    .hero-slide--g .hero-slide__price-tag-label {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-2xs);
      color: #8a8a8a;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }
    .hero-slide--g .hero-slide__cta {
      background: var(--sites-gold);
      color: #0a0a0a;
      font-weight: 700;
    }
    .hero-slide--g .hero-slide__cta:hover {
      box-shadow: 0 8px 35px rgba(212,168,75,0.4);
    }

    /* --- Responsive slides --- */
    @media (max-width: 768px) {
      .hero-slide--b .hero-slide__inner {
        max-width: 100%;
        padding-left: 0;
        text-align: center;
      }
      .hero-slide--b::after { display: none; }
      .hero-slide--b .hero-slide__stat { justify-content: center; gap: 2rem; }
      .hero-slide--c::before { font-size: clamp(5rem, 18vw, 10rem); }
      .hero-counter { display: none; }
      .hero-scroll { display: none; }
      .hero-slide--g .hero-slide__price-tag { padding: 0.8rem 1.5rem; }
      .hero-slide--e .hero-slide__features { gap: 0.5rem; }
    }

    /* =============================================
       IMPROVEMENT #1-6: 3D FLOATING ELEMENTS
       ============================================= */
    .hero-3d-scene {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 2;
      overflow: hidden;
      perspective: 1200px;
    }
    .hero-float {
      position: absolute;
      will-change: transform;
      backface-visibility: hidden;
    }
    /* Diamond shape */
    .hero-float--diamond {
      width: 50px;
      height: 50px;
      border: 1.5px solid rgba(212,168,75,0.12);
      animation: hfDiamond 10s ease-in-out infinite;
    }
    /* Ring */
    .hero-float--ring {
      border: 1.5px solid rgba(174,0,0,0.1);
      border-radius: 50%;
      animation: hfRing 14s ease-in-out infinite;
    }
    /* Dot */
    .hero-float--dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(212,168,75,0.25);
      animation: hfDot 5s ease-in-out infinite;
    }
    /* Cross */
    .hero-float--cross {
      width: 18px;
      height: 18px;
      position: relative;
      animation: hfCross 9s ease-in-out infinite;
    }
    .hero-float--cross::before,
    .hero-float--cross::after {
      content: '';
      position: absolute;
      background: rgba(212,168,75,0.15);
    }
    .hero-float--cross::before {
      width: 100%;
      height: 1.5px;
      top: 50%;
      transform: translateY(-50%);
    }
    .hero-float--cross::after {
      width: 1.5px;
      height: 100%;
      left: 50%;
      transform: translateX(-50%);
    }
    /* Line */
    .hero-float--line {
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(212,168,75,0.18), transparent);
      animation: hfLine 9s ease-in-out infinite;
    }
    /* Triangle */
    .hero-float--tri {
      width: 0;
      height: 0;
      border-left: 18px solid transparent;
      border-right: 18px solid transparent;
      border-bottom: 30px solid rgba(174,0,0,0.05);
      animation: hfTri 12s ease-in-out infinite;
    }
    /* 3D rotating cube */
    .hero-float--cube {
      width: 30px;
      height: 30px;
      transform-style: preserve-3d;
      animation: hfCube 18s linear infinite;
    }
    .hero-float--cube > span {
      position: absolute;
      inset: 0;
      border: 1px solid rgba(212,168,75,0.08);
    }
    .hero-float--cube > span:nth-child(1) { transform: rotateY(0deg) translateZ(15px); }
    .hero-float--cube > span:nth-child(2) { transform: rotateY(90deg) translateZ(15px); }
    .hero-float--cube > span:nth-child(3) { transform: rotateY(180deg) translateZ(15px); }
    .hero-float--cube > span:nth-child(4) { transform: rotateY(270deg) translateZ(15px); }
    /* Hexagon */
    .hero-float--hex {
      width: 40px;
      height: 23px;
      background: rgba(212,168,75,0.04);
      position: relative;
      animation: hfHex 11s ease-in-out infinite;
    }
    .hero-float--hex::before,
    .hero-float--hex::after {
      content: '';
      position: absolute;
      width: 0;
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
    }
    .hero-float--hex::before {
      bottom: 100%;
      border-bottom: 11px solid rgba(212,168,75,0.04);
    }
    .hero-float--hex::after {
      top: 100%;
      border-top: 11px solid rgba(212,168,75,0.04);
    }

    /* 3D Keyframes */
    @keyframes hfDiamond {
      0%, 100% { transform: rotate(45deg) translateY(0) scale(1); opacity: 0.5; }
      50% { transform: rotate(45deg) translateY(-25px) scale(1.1); opacity: 1; }
    }
    @keyframes hfRing {
      0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.3; }
      50% { transform: rotate(180deg) scale(1.15); opacity: 0.6; }
    }
    @keyframes hfDot {
      0%, 100% { transform: translate(0, 0); opacity: 0.3; }
      25% { transform: translate(10px, -15px); opacity: 0.8; }
      75% { transform: translate(-6px, -8px); opacity: 0.5; }
    }
    @keyframes hfCross {
      0%, 100% { transform: rotate(0deg) translateY(0); opacity: 0.3; }
      50% { transform: rotate(90deg) translateY(-18px); opacity: 0.7; }
    }
    @keyframes hfLine {
      0%, 100% { transform: translateX(0) rotate(-3deg); opacity: 0.2; }
      50% { transform: translateX(20px) rotate(3deg); opacity: 0.5; }
    }
    @keyframes hfTri {
      0%, 100% { transform: rotate(0deg) translateY(0); opacity: 0.3; }
      50% { transform: rotate(15deg) translateY(-22px); opacity: 0.6; }
    }
    @keyframes hfCube {
      from { transform: rotateX(25deg) rotateY(0deg); }
      to { transform: rotateX(25deg) rotateY(360deg); }
    }
    @keyframes hfHex {
      0%, 100% { transform: rotate(0deg) translateY(0); opacity: 0.4; }
      50% { transform: rotate(30deg) translateY(-18px); opacity: 0.7; }
    }

    /* =============================================
       IMPROVEMENT #7: CSS DEVICE MOCKUPS
       ============================================= */
    .hero-device-laptop {
      position: absolute;
      right: 5%;
      top: 50%;
      transform: translateY(-50%) perspective(800px) rotateY(-12deg) rotateX(3deg);
      width: clamp(220px, 26vw, 360px);
      animation: deviceFloat 8s ease-in-out infinite;
      z-index: 2;
      pointer-events: none;
    }
    .hero-device-laptop__screen {
      background: #111;
      border: 2px solid rgba(255,255,255,0.06);
      border-bottom: none;
      border-radius: 8px 8px 0 0;
      aspect-ratio: 16/10;
      overflow: hidden;
      position: relative;
      box-shadow: 0 0 60px rgba(0,0,0,0.6), 0 0 30px rgba(212,168,75,0.03), inset 0 0 20px rgba(0,0,0,0.3);
    }
    .hero-device-laptop__nav {
      height: 8%;
      background: rgba(0,0,0,0.5);
      border-bottom: 1px solid rgba(255,255,255,0.04);
      display: flex;
      align-items: center;
      gap: 3px;
      padding: 0 5%;
    }
    .hero-device-laptop__nav span {
      width: 5px;
      height: 5px;
      border-radius: 50%;
    }
    .hero-device-laptop__nav span:nth-child(1) { background: rgba(231,76,60,0.5); }
    .hero-device-laptop__nav span:nth-child(2) { background: rgba(212,168,75,0.5); }
    .hero-device-laptop__nav span:nth-child(3) { background: rgba(46,204,113,0.5); }
    .hero-device-laptop__content {
      padding: 5%;
      height: 92%;
    }
    .hero-device-laptop__hero-block {
      height: 38%;
      background: linear-gradient(135deg, rgba(174,0,0,0.15), rgba(212,168,75,0.06));
      border-radius: var(--r-sm);
      margin-bottom: 5%;
      position: relative;
      overflow: hidden;
    }
    .hero-device-laptop__hero-block::after {
      content: '';
      position: absolute;
      top: 20%;
      left: 10%;
      width: 50%;
      height: 30%;
      background: rgba(255,255,255,0.03);
      border-radius: var(--r-sm);
    }
    .hero-device-laptop__line {
      height: 3px;
      background: rgba(255,255,255,0.06);
      border-radius: var(--r-sm);
      margin-bottom: 5%;
    }
    .hero-device-laptop__line:nth-child(2) { width: 65%; }
    .hero-device-laptop__line:nth-child(3) { width: 40%; background: rgba(212,168,75,0.12); }
    .hero-device-laptop__cards {
      display: flex;
      gap: 4%;
      margin-top: 6%;
    }
    .hero-device-laptop__card-item {
      flex: 1;
      aspect-ratio: 1.2;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.03);
      border-radius: var(--r-sm);
    }
    .hero-device-laptop__base {
      height: 10px;
      background: linear-gradient(180deg, #1a1a1a, #0f0f0f);
      border-radius: 0 0 3px 3px;
      position: relative;
    }
    .hero-device-laptop__base::after {
      content: '';
      position: absolute;
      bottom: -3px;
      left: 30%;
      right: 30%;
      height: 3px;
      background: #0d0d0d;
      border-radius: 0 0 5px 5px;
    }

    /* Phone mockup */
    .hero-device-phone {
      position: absolute;
      pointer-events: none;
      z-index: 2;
      animation: phoneFloat 7s ease-in-out infinite;
    }
    .hero-device-phone__frame {
      width: clamp(90px, 10vw, 140px);
      background: #1a1a1a;
      border: 2px solid rgba(255,255,255,0.06);
      border-radius: var(--r-lg);
      padding: 6px;
      box-shadow: 0 0 40px rgba(0,0,0,0.5), 0 0 20px rgba(212,168,75,0.02);
    }
    .hero-device-phone__screen {
      aspect-ratio: 9/19;
      background: linear-gradient(180deg, #0d0d0d, #111);
      border-radius: var(--r-lg);
      overflow: hidden;
      position: relative;
    }
    .hero-device-phone__notch {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 35%;
      height: 14px;
      background: #1a1a1a;
      border-radius: 0 0 10px 10px;
    }
    .hero-device-phone__content {
      padding: 25% 10% 10%;
    }
    .hero-device-phone__bar {
      height: 3px;
      background: rgba(255,255,255,0.06);
      border-radius: var(--r-sm);
      margin-bottom: 8%;
    }
    .hero-device-phone__bar:nth-child(2) { width: 70%; }
    .hero-device-phone__bar:nth-child(3) { width: 50%; background: rgba(212,168,75,0.12); }
    .hero-device-phone__block {
      margin-top: 15%;
      height: 30%;
      background: linear-gradient(135deg, rgba(174,0,0,0.1), rgba(212,168,75,0.05));
      border-radius: var(--r-sm);
    }

    @keyframes deviceFloat {
      0%, 100% { transform: translateY(-50%) perspective(800px) rotateY(-12deg) rotateX(3deg) translateZ(0); }
      50% { transform: translateY(-52%) perspective(800px) rotateY(-9deg) rotateX(1.5deg) translateZ(12px); }
    }
    @keyframes phoneFloat {
      0%, 100% { transform: perspective(600px) rotateY(8deg) rotateX(-3deg) translateY(0); }
      50% { transform: perspective(600px) rotateY(5deg) rotateX(-1deg) translateY(-18px); }
    }

    /* =============================================
       HERO 3D VISUAL OBJECTS (replace PNG images)
       ============================================= */

    /* --- SLIDE A : Massive 3D Crystal --- */
    .hero-icosahedron {
      position: absolute;
      right: -2%;
      top: 50%;
      transform: translateY(-50%);
      width: clamp(300px, 45vw, 580px);
      height: clamp(300px, 45vw, 580px);
      pointer-events: none;
      z-index: 2;
      perspective: 1200px;
    }
    .hero-icosahedron__glow {
      position: absolute;
      inset: -40%;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(212,168,75,0.15) 0%, rgba(174,0,0,0.06) 35%, transparent 65%);
      animation: icoGlow 4s ease-in-out infinite;
      filter: blur(30px);
    }
    .hero-icosahedron__core {
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      animation: icoSpin 18s linear infinite;
      position: relative;
    }
    .hero-icosahedron__face {
      position: absolute;
      inset: 8%;
      border-radius: var(--r-sm);
    }
    .hero-icosahedron__face:nth-child(1) {
      transform: rotateY(0deg) translateZ(140px);
      border: 2px solid rgba(212,168,75,0.5);
      background: linear-gradient(135deg, rgba(212,168,75,0.08), transparent);
      box-shadow: 0 0 25px rgba(212,168,75,0.15), inset 0 0 20px rgba(212,168,75,0.05);
    }
    .hero-icosahedron__face:nth-child(2) {
      transform: rotateY(72deg) rotateX(10deg) translateZ(140px);
      border: 2px solid rgba(212,168,75,0.4);
      background: linear-gradient(135deg, rgba(212,168,75,0.06), transparent);
      box-shadow: 0 0 20px rgba(212,168,75,0.1);
    }
    .hero-icosahedron__face:nth-child(3) {
      transform: rotateY(144deg) rotateX(-5deg) translateZ(140px);
      border: 2px solid rgba(174,0,0,0.4);
      background: linear-gradient(135deg, rgba(174,0,0,0.08), transparent);
      box-shadow: 0 0 25px rgba(174,0,0,0.12);
    }
    .hero-icosahedron__face:nth-child(4) {
      transform: rotateY(216deg) rotateX(8deg) translateZ(140px);
      border: 2px solid rgba(212,168,75,0.35);
      background: linear-gradient(135deg, rgba(212,168,75,0.05), transparent);
      box-shadow: 0 0 20px rgba(212,168,75,0.08);
    }
    .hero-icosahedron__face:nth-child(5) {
      transform: rotateY(288deg) rotateX(-3deg) translateZ(140px);
      border: 2px solid rgba(212,168,75,0.45);
      background: linear-gradient(135deg, rgba(212,168,75,0.07), transparent);
      box-shadow: 0 0 22px rgba(212,168,75,0.12);
    }
    .hero-icosahedron__face:nth-child(6) {
      transform: rotateX(60deg) rotateY(36deg) translateZ(110px);
      border: 2px solid rgba(174,0,0,0.35);
      background: linear-gradient(135deg, rgba(174,0,0,0.06), transparent);
      box-shadow: 0 0 18px rgba(174,0,0,0.1);
    }
    .hero-icosahedron__face:nth-child(7) {
      transform: rotateX(-60deg) rotateY(108deg) translateZ(110px);
      border: 2px solid rgba(212,168,75,0.4);
      background: linear-gradient(135deg, rgba(212,168,75,0.06), transparent);
      box-shadow: 0 0 20px rgba(212,168,75,0.1);
    }
    .hero-icosahedron__face:nth-child(8) {
      transform: rotateX(45deg) rotateY(180deg) translateZ(110px);
      border: 2px solid rgba(212,168,75,0.5);
      background: linear-gradient(135deg, rgba(212,168,75,0.08), transparent);
      box-shadow: 0 0 28px rgba(212,168,75,0.15);
    }
    .hero-icosahedron__face:nth-child(9) {
      transform: rotateX(-45deg) rotateY(252deg) translateZ(110px);
      border: 2px solid rgba(174,0,0,0.3);
      background: linear-gradient(135deg, rgba(174,0,0,0.05), transparent);
      box-shadow: 0 0 15px rgba(174,0,0,0.08);
    }
    .hero-icosahedron__face:nth-child(10) {
      transform: rotateX(30deg) rotateY(324deg) translateZ(110px);
      border: 2px solid rgba(212,168,75,0.45);
      background: linear-gradient(135deg, rgba(212,168,75,0.07), transparent);
      box-shadow: 0 0 22px rgba(212,168,75,0.12);
    }
    .hero-icosahedron__ring {
      position: absolute;
      inset: 0%;
      border: 2px solid rgba(212,168,75,0.15);
      border-radius: 50%;
      transform-style: preserve-3d;
      animation: icoRing 14s linear infinite;
      box-shadow: 0 0 30px rgba(212,168,75,0.06);
    }
    .hero-icosahedron__ring:nth-child(12) {
      inset: -15%;
      border-color: rgba(174,0,0,0.12);
      border-style: dashed;
      animation-direction: reverse;
      animation-duration: 20s;
      box-shadow: 0 0 25px rgba(174,0,0,0.05);
    }
    @keyframes icoSpin {
      from { transform: rotateX(18deg) rotateY(0deg); }
      to { transform: rotateX(18deg) rotateY(360deg); }
    }
    @keyframes icoGlow {
      0%, 100% { opacity: 0.7; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.06); }
    }
    @keyframes icoRing {
      from { transform: rotateX(70deg) rotateZ(0deg); }
      to { transform: rotateX(70deg) rotateZ(360deg); }
    }

    /* --- SLIDE F : Orbital system (luminous) --- */
    .hero-orbital {
      position: absolute;
      right: 0%;
      top: 50%;
      transform: translateY(-50%);
      width: clamp(280px, 42vw, 520px);
      height: clamp(280px, 42vw, 520px);
      pointer-events: none;
      z-index: 2;
      perspective: 900px;
    }
    .hero-orbital__center {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 30px;
      height: 30px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: radial-gradient(circle, #cda85c, rgba(212,168,75,0.4));
      box-shadow: 0 0 50px rgba(212,168,75,0.6), 0 0 100px rgba(212,168,75,0.3), 0 0 150px rgba(212,168,75,0.1);
      animation: centerPulse 3s ease-in-out infinite;
    }
    .hero-orbital__center::after {
      content: '';
      position: absolute;
      inset: -300%;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(212,168,75,0.12) 0%, transparent 45%);
    }
    .hero-orbital__orbit {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 2px solid rgba(212,168,75,0.15);
      transform-style: preserve-3d;
    }
    .hero-orbital__orbit:nth-child(2) {
      inset: 10%;
      border-color: rgba(174,0,0,0.25);
      border-width: 1.5px;
      animation: orbitSpin 9s linear infinite;
      transform: rotateX(65deg);
      box-shadow: 0 0 20px rgba(174,0,0,0.08);
    }
    .hero-orbital__orbit:nth-child(3) {
      inset: 25%;
      border-color: rgba(212,168,75,0.3);
      border-width: 2px;
      animation: orbitSpin2 6s linear infinite reverse;
      transform: rotateX(72deg) rotateY(25deg);
      box-shadow: 0 0 25px rgba(212,168,75,0.1);
    }
    .hero-orbital__orbit:nth-child(4) {
      inset: 2%;
      border-color: rgba(255,255,255,0.08);
      border-width: 1px;
      border-style: dashed;
      animation: orbitSpin3 16s linear infinite;
      transform: rotateX(55deg) rotateY(-20deg);
    }
    .hero-orbital__planet {
      position: absolute;
      border-radius: 50%;
    }
    .hero-orbital__planet--1 {
      width: 16px;
      height: 16px;
      background: radial-gradient(circle at 35% 35%, #e0c48a, #cda85c);
      top: -8px;
      left: 50%;
      box-shadow: 0 0 30px rgba(212,168,75,0.6), 0 0 60px rgba(212,168,75,0.2);
      animation: planetBreathe 2.5s ease-in-out infinite;
    }
    .hero-orbital__planet--2 {
      width: 12px;
      height: 12px;
      background: radial-gradient(circle at 35% 35%, #e74c3c, #ae0000);
      top: 50%;
      right: -6px;
      box-shadow: 0 0 25px rgba(174,0,0,0.5), 0 0 50px rgba(174,0,0,0.2);
      animation: planetBreathe 3s ease-in-out infinite 0.5s;
    }
    .hero-orbital__planet--3 {
      width: 8px;
      height: 8px;
      background: radial-gradient(circle at 35% 35%, #fff, rgba(255,255,255,0.6));
      bottom: -4px;
      left: 30%;
      box-shadow: 0 0 20px rgba(255,255,255,0.4), 0 0 40px rgba(255,255,255,0.1);
      animation: planetBreathe 3.5s ease-in-out infinite 1s;
    }
    @keyframes centerPulse {
      0%, 100% { box-shadow: 0 0 50px rgba(212,168,75,0.6), 0 0 100px rgba(212,168,75,0.3), 0 0 150px rgba(212,168,75,0.1); }
      50% { box-shadow: 0 0 70px rgba(212,168,75,0.8), 0 0 120px rgba(212,168,75,0.4), 0 0 180px rgba(212,168,75,0.15); }
    }
    @keyframes planetBreathe {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.2); }
    }
    @keyframes orbitSpin {
      from { transform: rotateX(65deg) rotateZ(0deg); }
      to { transform: rotateX(65deg) rotateZ(360deg); }
    }
    @keyframes orbitSpin2 {
      from { transform: rotateX(72deg) rotateY(25deg) rotateZ(0deg); }
      to { transform: rotateX(72deg) rotateY(25deg) rotateZ(360deg); }
    }
    @keyframes orbitSpin3 {
      from { transform: rotateX(55deg) rotateY(-20deg) rotateZ(0deg); }
      to { transform: rotateX(55deg) rotateY(-20deg) rotateZ(360deg); }
    }

    /* --- SLIDE G : Morphing Diamond (luminous) --- */
    .hero-morph {
      position: absolute;
      right: 0%;
      top: 50%;
      transform: translateY(-50%);
      width: clamp(280px, 40vw, 500px);
      height: clamp(280px, 40vw, 500px);
      pointer-events: none;
      z-index: 2;
      perspective: 1200px;
    }
    .hero-morph__shape {
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      animation: morphSpin 16s linear infinite;
      position: relative;
    }
    .hero-morph__panel {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    .hero-morph__panel::before {
      content: '';
      position: absolute;
      inset: 12%;
      animation: morphPulse 4s ease-in-out infinite;
    }
    .hero-morph__panel:nth-child(1) { transform: rotateY(0deg) translateZ(120px); }
    .hero-morph__panel:nth-child(1)::before {
      clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
      border: 2px solid rgba(212,168,75,0.55);
      background: linear-gradient(135deg, rgba(212,168,75,0.1), rgba(212,168,75,0.02));
      box-shadow: 0 0 30px rgba(212,168,75,0.15), inset 0 0 25px rgba(212,168,75,0.05);
    }
    .hero-morph__panel:nth-child(2) { transform: rotateY(60deg) translateZ(120px); }
    .hero-morph__panel:nth-child(2)::before {
      clip-path: polygon(50% 5%, 95% 50%, 50% 95%, 5% 50%);
      border: 2px solid rgba(174,0,0,0.4);
      background: linear-gradient(135deg, rgba(174,0,0,0.08), transparent);
      animation-delay: 0.6s;
      box-shadow: 0 0 25px rgba(174,0,0,0.1);
    }
    .hero-morph__panel:nth-child(3) { transform: rotateY(120deg) translateZ(120px); }
    .hero-morph__panel:nth-child(3)::before {
      clip-path: polygon(50% 10%, 90% 50%, 50% 90%, 10% 50%);
      animation-delay: 1.2s;
      border: 2px solid rgba(212,168,75,0.45);
      background: linear-gradient(135deg, rgba(212,168,75,0.07), transparent);
      box-shadow: 0 0 25px rgba(212,168,75,0.1);
    }
    .hero-morph__panel:nth-child(4) { transform: rotateY(180deg) translateZ(120px); }
    .hero-morph__panel:nth-child(4)::before {
      clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
      border: 2px solid rgba(212,168,75,0.5);
      animation-delay: 1.8s;
      background: linear-gradient(135deg, rgba(212,168,75,0.09), transparent);
      box-shadow: 0 0 28px rgba(212,168,75,0.12);
    }
    .hero-morph__panel:nth-child(5) { transform: rotateY(240deg) translateZ(120px); }
    .hero-morph__panel:nth-child(5)::before {
      clip-path: polygon(50% 5%, 95% 50%, 50% 95%, 5% 50%);
      border: 2px solid rgba(174,0,0,0.35);
      animation-delay: 2.4s;
      background: linear-gradient(135deg, rgba(174,0,0,0.06), transparent);
      box-shadow: 0 0 22px rgba(174,0,0,0.08);
    }
    .hero-morph__panel:nth-child(6) { transform: rotateY(300deg) translateZ(120px); }
    .hero-morph__panel:nth-child(6)::before {
      clip-path: polygon(50% 10%, 90% 50%, 50% 90%, 10% 50%);
      animation-delay: 3s;
      border: 2px solid rgba(212,168,75,0.42);
      background: linear-gradient(135deg, rgba(212,168,75,0.06), transparent);
      box-shadow: 0 0 22px rgba(212,168,75,0.1);
    }
    .hero-morph__inner-diamond {
      position: absolute;
      inset: 22%;
      transform-style: preserve-3d;
      animation: morphInner 10s linear infinite reverse;
    }
    .hero-morph__inner-diamond::before {
      content: '';
      position: absolute;
      inset: 0;
      border: 2.5px solid rgba(212,168,75,0.6);
      clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
      animation: morphGlow 3s ease-in-out infinite;
      background: linear-gradient(135deg, rgba(212,168,75,0.1), rgba(212,168,75,0.02));
    }
    .hero-morph__inner-diamond::after {
      content: '';
      position: absolute;
      inset: -100%;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(212,168,75,0.15) 0%, transparent 45%);
      filter: blur(20px);
    }
    @keyframes morphSpin {
      from { transform: rotateX(22deg) rotateY(0deg); }
      to { transform: rotateX(22deg) rotateY(360deg); }
    }
    @keyframes morphPulse {
      0%, 100% { opacity: 0.6; }
      50% { opacity: 1; }
    }
    @keyframes morphInner {
      from { transform: rotateY(0deg) rotateZ(45deg); }
      to { transform: rotateY(360deg) rotateZ(45deg); }
    }
    @keyframes morphGlow {
      0%, 100% { box-shadow: 0 0 30px rgba(212,168,75,0.2), 0 0 60px rgba(212,168,75,0.05); opacity: 0.7; }
      50% { box-shadow: 0 0 50px rgba(212,168,75,0.4), 0 0 100px rgba(212,168,75,0.1); opacity: 1; }
    }

    /* =============================================
       IMPROVEMENT #8: CTA GLOW PULSE
       ============================================= */
    .hero-slide__cta::after {
      content: '';
      position: absolute;
      inset: 0;
      background: inherit;
      border-radius: inherit;
      filter: blur(18px);
      opacity: 0;
      z-index: -1;
      transition: opacity 0.4s;
    }
    .hero-slide--active .hero-slide__cta::after {
      animation: ctaGlow 3s ease-in-out infinite 1.5s;
    }
    @keyframes ctaGlow {
      0%, 100% { opacity: 0; }
      50% { opacity: 0.35; }
    }

    /* =============================================
       IMPROVEMENT #9: SECTION GLOW DIVIDERS
       ============================================= */
    .section-glow {
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(174,0,0,0.3), rgba(212,168,75,0.15), transparent);
      position: relative;
    }
    .section-glow::before {
      content: '';
      position: absolute;
      top: -25px;
      left: 0;
      right: 0;
      height: 50px;
      background: radial-gradient(ellipse at 50% 50%, rgba(174,0,0,0.04), transparent 70%);
      pointer-events: none;
    }

    /* =============================================
       IMPROVEMENT #10: FLOATING BACKGROUND ORBS
       ============================================= */
    .bg-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      pointer-events: none;
      z-index: 0;
      will-change: transform;
    }
    .bg-orb--gold {
      background: rgba(212,168,75,0.04);
      animation: orbPulse 22s ease-in-out infinite;
    }
    .bg-orb--red {
      background: rgba(174,0,0,0.03);
      animation: orbPulse 28s ease-in-out infinite reverse;
    }
    @keyframes orbPulse {
      0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
      33% { transform: translate(40px, -25px) scale(1.15); opacity: 1; }
      66% { transform: translate(-25px, 15px) scale(0.9); opacity: 0.7; }
    }

    /* =============================================
       IMPROVEMENT #11: 3D TILT CARDS
       ============================================= */
    .tilt-3d {
      transition: transform 0.4s cubic-bezier(0.03, 0.98, 0.52, 0.99), box-shadow 0.4s ease;
      transform-style: preserve-3d;
    }
    .tilt-3d:hover {
      box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 30px rgba(212,168,75,0.03);
    }

    /* =============================================
       IMPROVEMENT #12: SHIMMER GOLD TEXT
       ============================================= */
    .shimmer-gold {
      background: linear-gradient(90deg, var(--sites-gold), #e8d4a0, var(--sites-gold));
      background-size: 200% 100%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .shimmer-gold--animate {
      animation: shimmerMove 3s ease-in-out infinite;
    }
    @keyframes shimmerMove {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }

    /* =============================================
       IMPROVEMENT #13: BACK TO TOP BUTTON
       ============================================= */
    .back-to-top {
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      width: 44px;
      height: 44px;
      background: rgba(17,17,17,0.92);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #8a8a8a;
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      transform: translateY(20px);
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      z-index: 85;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .back-to-top--visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .back-to-top:hover {
      border-color: var(--sites-gold);
      color: var(--sites-gold);
      transform: translateY(-3px);
      box-shadow: 0 8px 25px rgba(212,168,75,0.15);
    }
    .back-to-top svg { width: 18px; height: 18px; }

    /* =============================================
       IMPROVEMENT #14: SOCIAL PROOF TOAST
       ============================================= */
    .social-toast {
      position: fixed;
      bottom: 2rem;
      left: 2rem;
      background: rgba(17,17,17,0.95);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: var(--r-md);
      padding: 0.9rem 1.3rem;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      font-family: 'Montserrat', sans-serif;
      z-index: 80;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      transform: translateY(150%);
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      max-width: 320px;
    }
    .social-toast--visible {
      transform: translateY(0);
    }
    .social-toast__icon {
      width: 34px;
      height: 34px;
      background: rgba(46,204,113,0.12);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .social-toast__icon svg { width: 14px; height: 14px; color: #2ecc71; }
    .social-toast__text {
      font-size: var(--fs-2xs);
      color: #999;
      line-height: 1.5;
    }
    .social-toast__text strong { color: #eee; font-weight: 600; }
    .social-toast__close {
      position: absolute;
      top: 6px;
      right: 8px;
      background: none;
      border: none;
      color: #8a8a8a;
      cursor: pointer;
      font-size: var(--fs-2xs);
      padding: 2px;
    }

    /* =============================================
       IMPROVEMENT #15: MARQUEE TECH STRIP
       ============================================= */
    .tech-marquee {
      overflow: hidden;
      white-space: nowrap;
      padding: 1.25rem 0;
      border-top: 1px solid rgba(255,255,255,0.03);
      border-bottom: 1px solid rgba(255,255,255,0.03);
      background: rgba(10,10,10,0.5);
    }
    .tech-marquee__track {
      display: inline-flex;
      gap: 3rem;
      animation: marqueeScroll 30s linear infinite;
    }
    .tech-marquee__item {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-2xs);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: rgba(255,255,255,0.12);
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }
    .tech-marquee__item::before {
      content: '';
      width: 4px;
      height: 4px;
      background: rgba(212,168,75,0.2);
      border-radius: 50%;
    }
    @keyframes marqueeScroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* =============================================
       IMPROVEMENT #16: ENHANCED CARD DEPTH
       ============================================= */
    .sites-concept__card,
    .sites-offer,
    .sites-testimonial,
    .sites-brief__card,
    .sites-portfolio__card {
      transition: transform 0.4s cubic-bezier(0.03, 0.98, 0.52, 0.99), box-shadow 0.4s ease, border-color 0.3s;
    }
    .sites-concept__card:hover,
    .sites-brief__card:hover {
      transform: translateY(-6px) perspective(600px) rotateX(2deg);
      box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    }

    /* =============================================
       IMPROVEMENT #17: SLIDE D - URGENCY + CTA ALIGNED
       ============================================= */
    .hero-slide--d .hero-slide__actions {
      display: inline-flex;
      align-items: stretch;
      gap: 1rem;
      flex-wrap: wrap;
      justify-content: center;
    }
    .hero-slide--d .hero-slide__actions .hero-slide__urgency-bar {
      margin-bottom: 0;
      display: flex;
      align-items: center;
      height: auto;
    }
    .hero-slide--d .hero-slide__actions .hero-slide__cta {
      display: flex;
      align-items: center;
      height: auto;
    }

    /* =============================================
       IMPROVEMENT #18: ANIMATED PROGRESS BAR (autoplay)
       ============================================= */
    .hero-autoplay-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--sites-accent), var(--sites-gold));
      z-index: 11;
      transition: none;
    }

    /* =============================================
       IMPROVEMENT #19: TRUST BADGES
       ============================================= */
    .trust-badges {
      display: flex;
      justify-content: center;
      gap: 2rem;
      flex-wrap: wrap;
      margin-top: 2rem;
      padding-top: 1.5rem;
      border-top: 1px solid rgba(255,255,255,0.04);
    }
    .trust-badge {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-2xs);
      color: #8a8a8a;
      font-weight: 500;
      letter-spacing: 0.05em;
    }
    .trust-badge svg {
      width: 16px;
      height: 16px;
      color: var(--sites-gold);
      opacity: 0.6;
    }

    /* =============================================
       IMPROVEMENT #20: FORM SAVE INDICATOR
       ============================================= */
    .form-save-indicator {
      position: fixed;
      top: 1rem;
      right: 1rem;
      background: rgba(46,204,113,0.12);
      border: 1px solid rgba(46,204,113,0.2);
      border-radius: var(--r-sm);
      padding: 0.5rem 1rem;
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-2xs);
      color: #2ecc71;
      z-index: 100;
      opacity: 0;
      transform: translateY(-10px);
      transition: all 0.3s ease;
      pointer-events: none;
    }
    .form-save-indicator--visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* =============================================
       RESPONSIVE: HIDE 3D ON MOBILE
       ============================================= */
    @media (max-width: 768px) {
      .hero-3d-scene { display: none; }
      .hero-device-laptop { display: none; }
      .hero-device-phone { display: none; }
      .hero-icosahedron { display: none; }
      .hero-orbital { display: none; }
      .hero-morph { display: none; }
      .bg-orb { display: none; }
      .social-toast { display: none; }
      .tech-marquee__track { animation-duration: 20s; }
      .back-to-top { bottom: 5rem; right: 1rem; width: 38px; height: 38px; }
      .trust-badges { gap: 1rem; }
      .trust-badge { font-size: var(--fs-2xs); }
    }

    /* Prefers reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .hero-float,
      .hero-device-laptop,
      .hero-device-phone,
      .hero-icosahedron,
      .hero-orbital,
      .hero-morph,
      .bg-orb,
      .tech-marquee__track {
        animation: none !important;
      }
      .hero-slide__cta::after { animation: none !important; }
    }

    /* SECTIONS GENERAL */
    .sites-section {
      padding: clamp(5rem, 10vh, 8rem) clamp(1.5rem, 4vw, 3rem);
      position: relative;
    }
    .sites-section--dark { background: #0a0a0a; }
    .sites-section--alt { background: #0e0e0e; }
    .sites-container {
      max-width: 1100px;
      margin: 0 auto;
    }
    .sites-container--sm {
      max-width: 800px;
      margin: 0 auto;
    }
    .sites-label {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-2xs);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.35em;
      color: var(--sites-gold);
      margin-bottom: 1rem;
    }
    .sites-heading {
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: clamp(1.8rem, 4vw, 2.8rem);
      font-weight: 700;
      color: #f5f5f5;
      line-height: 1.15;
      margin-bottom: 1.5rem;
    }
    .sites-text {
      font-family: 'Montserrat', sans-serif;
      font-size: clamp(0.9rem, 1.1vw, 1rem);
      color: #888;
      line-height: 1.8;
      max-width: 700px;
    }
    .sites-divider {
      width: 60px;
      height: 1px;
      background: linear-gradient(90deg, var(--sites-accent), transparent);
      margin: 3rem 0;
    }

    /* WHAT IS THE OFFER */
    .sites-concept__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
      margin-top: 3rem;
    }
    .sites-concept__card {
      background: rgba(17,17,17,0.8);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: var(--r-md);
      padding: 2rem;
      transition: border-color 0.3s, transform 0.3s;
    }
    .sites-concept__card:hover {
      border-color: rgba(174,0,0,0.3);
      transform: translateY(-4px);
    }
    .sites-concept__icon {
      width: 40px;
      height: 40px;
      color: var(--sites-accent-text);
      margin-bottom: 1.25rem;
    }
    .sites-concept__card h3 {
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: var(--fs-md);
      font-weight: 600;
      color: #f5f5f5;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 0.75rem;
    }
    .sites-concept__card p {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-sm);
      color: #777;
      line-height: 1.7;
    }

    /* WHO IS IT FOR */
    .sites-audience__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      margin-top: 3rem;
    }
    .sites-audience__col h3 {
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: var(--fs-lg);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 1.5rem;
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
    .sites-audience__col--yes h3 { color: #2ecc71; }
    .sites-audience__col--no h3 { color: #e74c3c; }
    .sites-audience__list {
      list-style: none;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    .sites-audience__list li {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-sm);
      color: #999;
      line-height: 1.6;
      padding-left: 1.75rem;
      position: relative;
    }
    .sites-audience__list li::before {
      position: absolute;
      left: 0;
      top: 0.15em;
      font-size: var(--fs-sm);
      font-weight: 700;
    }
    .sites-audience__col--yes .sites-audience__list li::before {
      content: '+';
      color: #2ecc71;
    }
    .sites-audience__col--no .sites-audience__list li::before {
      content: '-';
      color: #e74c3c;
    }

    /* INCLUS / NON INCLUS */
    .sites-scope__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      margin-top: 3rem;
    }
    .sites-scope__col {
      background: rgba(17,17,17,0.6);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: var(--r-md);
      padding: 2.5rem;
    }
    .sites-scope__col--yes {
      border-color: rgba(46,204,113,0.15);
    }
    .sites-scope__col--no {
      border-color: rgba(231,76,60,0.15);
    }
    .sites-scope__col h3 {
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: var(--fs-md);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 2rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .sites-scope__col--yes h3 { color: #2ecc71; }
    .sites-scope__col--no h3 { color: #e74c3c; }
    .sites-scope__list {
      list-style: none;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
    }
    .sites-scope__list li {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-sm);
      color: #999;
      line-height: 1.5;
      padding-left: 1.75rem;
      position: relative;
    }
    .sites-scope__list li::before {
      position: absolute;
      left: 0;
      top: 0.1em;
      font-weight: 700;
      font-size: var(--fs-xs);
    }
    .sites-scope__col--yes .sites-scope__list li::before {
      content: '\2713';
      color: #2ecc71;
    }
    .sites-scope__col--no .sites-scope__list li::before {
      content: '\2715';
      color: #e74c3c;
    }

    /* OPTION BOUTIQUE */
    .sites-shop {
      background: rgba(17,17,17,0.6);
      border: 1px solid rgba(212,168,75,0.15);
      border-radius: var(--r-md);
      padding: clamp(2.5rem, 4vw, 4rem);
      margin-top: 3rem;
      position: relative;
      overflow: hidden;
    }
    .sites-shop::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(212,168,75,0.4), transparent);
    }
    .sites-shop__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 2rem;
      flex-wrap: wrap;
      gap: 1rem;
    }
    .sites-shop__title {
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: clamp(1.3rem, 2.5vw, 1.8rem);
      font-weight: 700;
      color: #f5f5f5;
    }
    .sites-shop__price {
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: clamp(1.5rem, 3vw, 2.2rem);
      font-weight: 700;
      color: var(--sites-gold);
    }
    .sites-shop__desc {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-md);
      color: #888;
      line-height: 1.8;
      margin-bottom: 2rem;
      max-width: 650px;
    }
    .sites-shop__features {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.85rem;
      list-style: none;
      padding: 0;
    }
    .sites-shop__features li {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-sm);
      color: #999;
      padding-left: 1.75rem;
      position: relative;
    }
    .sites-shop__features li::before {
      content: '\2713';
      position: absolute;
      left: 0;
      color: var(--sites-gold);
      font-weight: 700;
    }
    .sites-shop__note {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-xs);
      color: #8a8a8a;
      margin-top: 2rem;
      padding-top: 1.5rem;
      border-top: 1px solid rgba(255,255,255,0.06);
      line-height: 1.7;
    }

    /* PROCESS */
    .sites-process__timeline {
      margin-top: 3rem;
      display: flex;
      flex-direction: column;
      gap: 0;
      position: relative;
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
    }
    .sites-process__timeline::before {
      content: '';
      position: absolute;
      left: 24px;
      top: 0;
      bottom: 0;
      width: 2px;
      background: rgba(255,255,255,0.06);
      border-radius: var(--r-sm);
    }
    .sites-process__timeline::after {
      content: '';
      position: absolute;
      left: 24px;
      top: 0;
      bottom: 0;
      width: 2px;
      background: linear-gradient(180deg, var(--sites-accent), rgba(174,0,0,0.2));
      border-radius: var(--r-sm);
      transform-origin: top;
      transform: scaleY(0);
      transition: transform 0.1s linear;
    }
    .sites-process__step {
      display: flex;
      gap: 2rem;
      padding: 2.5rem 0;
      position: relative;
      opacity: 0.3;
      transform: translateY(12px);
      transition: opacity 0.5s ease, transform 0.5s ease;
    }
    .sites-process__step.is-visible {
      opacity: 1;
      transform: translateY(0);
    }
    .sites-process__step:not(:last-child) {
      border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .sites-process__num {
      flex-shrink: 0;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 2px solid rgba(174,0,0,0.3);
      background: rgba(174,0,0,0.06);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: var(--fs-sm);
      font-weight: 700;
      color: rgba(174,0,0,0.5);
      position: relative;
      z-index: 2;
      transition: all 0.4s ease;
    }
    .sites-process__step.is-visible .sites-process__num {
      border-color: var(--sites-accent);
      background: rgba(174,0,0,0.15);
      color: var(--sites-accent-text);
      box-shadow: 0 0 20px rgba(174,0,0,0.2);
    }
    .sites-process__duration {
      display: inline-block;
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-2xs);
      font-weight: 600;
      color: var(--sites-accent-text);
      background: rgba(174,0,0,0.1);
      border: 1px solid rgba(174,0,0,0.2);
      border-radius: var(--r-lg);
      padding: 3px 10px;
      margin-top: 0.6rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    .sites-process__body h3 {
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: var(--fs-md);
      font-weight: 600;
      color: #f5f5f5;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 0.5rem;
    }
    .sites-process__body p {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-sm);
      color: #777;
      line-height: 1.7;
    }
    .sites-process__total {
      text-align: center;
      margin-top: 2.5rem;
      padding: 1.5rem;
      border: 1px solid rgba(174,0,0,0.2);
      border-radius: var(--r-md);
      background: rgba(174,0,0,0.05);
    }
    .sites-process__total-label {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-xs);
      color: #777;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 0.3rem;
    }
    .sites-process__total-value {
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: var(--fs-2xl);
      font-weight: 700;
      color: var(--sites-accent-text);
    }

    /* QUESTIONNAIRE IMPORTANCE */
    .sites-brief__grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
      margin-top: 3rem;
    }
    .sites-brief__card {
      background: rgba(17,17,17,0.6);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: var(--r-md);
      padding: 1.75rem;
    }
    .sites-brief__card h3 {
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: var(--fs-sm);
      font-weight: 600;
      color: #f5f5f5;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 0.5rem;
    }
    .sites-brief__card p {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-sm);
      color: #777;
      line-height: 1.7;
    }

    /* PAYMENT */
    .sites-payment {
      background: rgba(17,17,17,0.6);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: var(--r-md);
      padding: clamp(2rem, 4vw, 3rem);
      margin-top: 3rem;
    }
    .sites-payment__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
    }
    .sites-payment__item {
      padding: 1.5rem;
      border-radius: var(--r-md);
      background: rgba(10,10,10,0.5);
      border: 1px solid rgba(255,255,255,0.04);
    }
    .sites-payment__item h3 {
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: var(--fs-sm);
      font-weight: 600;
      color: #f5f5f5;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 0.5rem;
    }
    .sites-payment__item p {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-sm);
      color: #777;
      line-height: 1.7;
    }
    .sites-payment__item strong {
      color: #ccc;
      font-weight: 600;
    }

    /* FAQ */
    .sites-faq__list {
      margin-top: 3rem;
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .sites-faq__item {
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .sites-faq__q {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.5rem 0;
      background: none;
      border: none;
      cursor: pointer;
      text-align: left;
      gap: 1rem;
    }
    .sites-faq__q span {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-md);
      font-weight: 600;
      color: #ccc;
      line-height: 1.5;
    }
    .sites-faq__q svg {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      color: #8a8a8a;
      transition: transform 0.3s, color 0.3s;
    }
    .sites-faq__item--open .sites-faq__q svg {
      transform: rotate(45deg);
      color: var(--sites-accent-text);
    }
    .sites-faq__item--open .sites-faq__q span {
      color: #f5f5f5;
    }
    .sites-faq__a {
      max-height: 0;
      overflow: hidden;
      /* visibility retire vraiment le panneau de l'arbre d'accessibilite.
         Avec max-height seul, les 18 reponses etaient lues en continu par les
         lecteurs d'ecran alors que les boutons annoncaient aria-expanded=false.
         visibility se transitionne, donc l'animation d'ouverture est preservee. */
      visibility: hidden;
      transition: max-height 0.4s ease, padding 0.3s ease, visibility 0s linear 0.4s;
    }
    .sites-faq__item--open .sites-faq__a {
      max-height: 300px;
      padding-bottom: 1.5rem;
      visibility: visible;
      transition: max-height 0.4s ease, padding 0.3s ease, visibility 0s;
    }
    .sites-faq__a p {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-sm);
      color: #888;
      line-height: 1.8;
    }

    /* CTA FINAL */
    .sites-final {
      text-align: center;
      padding: clamp(5rem, 12vh, 8rem) clamp(1.5rem, 4vw, 3rem);
      background: #0a0a0a;
      position: relative;
    }
    .sites-final::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 50%, rgba(174,0,0,0.06) 0%, transparent 60%);
      pointer-events: none;
    }
    .sites-final__inner {
      max-width: 700px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }
    .sites-final__cta {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      padding: 1rem 2.5rem;
      background: var(--sites-accent);
      color: #fff;
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: var(--fs-sm);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      text-decoration: none;
      border-radius: var(--r-sm);
      transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
    }
    .sites-final__cta:hover {
      background: #cc1a1a;
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(174,0,0,0.3);
    }
    .sites-final__cta svg {
      width: 16px;
      height: 16px;
      transition: transform 0.3s;
    }
    .sites-final__cta:hover svg {
      transform: translateX(4px);
    }

    /* FORM */
    .sites-form {
      max-width: 800px;
      margin: 0 auto;
      padding-top: 3rem;
    }
    .sites-form__progress {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      margin-bottom: 3rem;
    }
    .sites-form__step-dot {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(17,17,17,0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: var(--fs-2xs);
      font-weight: 600;
      color: #8a8a8a;
      transition: all 0.3s;
      position: relative;
      z-index: 2;
    }
    .sites-form__step-dot--active {
      border-color: var(--sites-accent);
      background: rgba(174,0,0,0.15);
      color: var(--sites-accent-text);
    }
    .sites-form__step-dot--done {
      border-color: #2ecc71;
      background: rgba(46,204,113,0.15);
      color: #2ecc71;
    }
    .sites-form__step-line {
      width: 40px;
      height: 1px;
      background: rgba(255,255,255,0.08);
      transition: background 0.3s;
    }
    .sites-form__step-line--done {
      background: rgba(46,204,113,0.4);
    }
    .sites-form__panel {
      display: none;
    }
    .sites-form__panel--active {
      display: block;
    }
    .sites-form__panel-title {
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: var(--fs-lg);
      font-weight: 600;
      color: #f5f5f5;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 0.5rem;
    }
    .sites-form__panel-desc {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-xs);
      color: #8a8a8a;
      margin-bottom: 2rem;
    }
    .sites-form__row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.25rem;
    }
    .sites-form__group {
      position: relative;
      margin-bottom: 1.25rem;
    }
    .sites-form__group--full {
      grid-column: 1 / -1;
    }
    .sites-form__label {
      display: block;
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-2xs);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: #8a8a8a;
      margin-bottom: 0.5rem;
    }
    .sites-form__label--required::after {
      content: ' *';
      color: var(--sites-accent-text);
    }
    .sites-form__input,
    .sites-form__select,
    .sites-form__textarea {
      width: 100%;
      padding: 0.85rem 1rem;
      background: rgba(10,10,10,0.8);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: var(--r-sm);
      color: #f5f5f5;
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-sm);
      transition: border-color 0.3s;
      outline: none;
    }
    .sites-form__input:focus,
    .sites-form__select:focus,
    .sites-form__textarea:focus {
      border-color: var(--sites-accent);
    }
    .sites-form__select {
      appearance: none;
      cursor: pointer;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 1rem center;
      background-size: 10px;
      padding-right: 2.5rem;
    }
    .sites-form__textarea {
      resize: vertical;
      min-height: 100px;
    }
    .sites-form__hint {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-2xs);
      color: #8a8a8a;
      margin-top: 0.35rem;
    }
    .sites-form__checks {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }
    .sites-form__check {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      cursor: pointer;
    }
    /* Masquage visuel QUI CONSERVE LE FOCUS. `display:none` retirait ces cases
       de l'ordre de tabulation et de l'arbre d'accessibilite : le bouton d'envoi
       restant desactive tant que les 4 engagements ne sont pas coches, le
       questionnaire etait impossible a valider au clavier. */
    .sites-form__check input {
      position: absolute;
      opacity: 0;
      width: 20px;
      height: 20px;
      margin: 0;
      cursor: pointer;
    }
    .sites-form__check input:focus-visible + .sites-form__check-box {
      outline: 2px solid var(--sites-gold);
      outline-offset: 3px;
    }
    .sites-form__check-box {
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: var(--r-sm);
      background: rgba(10,10,10,0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      margin-top: 0.1rem;
    }
    .sites-form__check input:checked + .sites-form__check-box {
      border-color: var(--sites-accent);
      background: rgba(174,0,0,0.2);
    }
    .sites-form__check input:checked + .sites-form__check-box svg {
      opacity: 1;
    }
    .sites-form__check-box svg {
      width: 12px;
      height: 12px;
      color: var(--sites-accent-text);
      opacity: 0;
      transition: opacity 0.2s;
    }
    .sites-form__check-text {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-sm);
      color: #999;
      line-height: 1.5;
    }
    .sites-form__nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 2.5rem;
      padding-top: 2rem;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .sites-form__prev,
    .sites-form__next {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.85rem 1.75rem;
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-xs);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      border-radius: var(--r-sm);
      cursor: pointer;
      transition: all 0.3s;
      border: none;
    }
    .sites-form__prev {
      background: none;
      border: 1px solid rgba(255,255,255,0.1);
      color: #999;
    }
    .sites-form__prev:hover {
      border-color: rgba(255,255,255,0.25);
      color: #ccc;
    }
    .sites-form__next {
      background: var(--sites-accent);
      color: #fff;
    }
    .sites-form__next:hover {
      background: #cc1a1a;
      transform: translateY(-2px);
    }
    .sites-form__next:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      transform: none;
    }
    .sites-form__next svg,
    .sites-form__prev svg {
      width: 14px;
      height: 14px;
    }
    .sites-form__submit {
      width: 100%;
      padding: 1.1rem 2rem;
      background: var(--sites-accent);
      color: #fff;
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: var(--fs-md);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      border: none;
      border-radius: var(--r-sm);
      cursor: pointer;
      transition: all 0.3s;
      margin-top: 2rem;
    }
    .sites-form__submit:hover {
      background: #cc1a1a;
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(174,0,0,0.3);
    }
    .sites-form__submit:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    /* LEAD MAGNET */
    .sites-leadmagnet {
      display: flex;
      align-items: center;
      gap: 3rem;
      background: linear-gradient(135deg, rgba(174,0,0,0.08), rgba(174,0,0,0.03));
      border: 1px solid rgba(174,0,0,0.15);
      border-radius: var(--r-lg);
      padding: 3rem;
      max-width: 800px;
      margin: 0 auto;
    }
    .sites-leadmagnet__content { flex: 1; }
    .sites-leadmagnet__badge {
      display: inline-block;
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-2xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--sites-accent-text);
      background: rgba(174,0,0,0.12);
      border: 1px solid rgba(174,0,0,0.25);
      padding: 4px 12px;
      border-radius: var(--r-lg);
      margin-bottom: 1rem;
    }
    .sites-leadmagnet__title {
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: var(--fs-lg);
      font-weight: 700;
      color: #f5f5f5;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      line-height: 1.4;
      margin-bottom: 0.8rem;
    }
    .sites-leadmagnet__text {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-sm);
      color: #999;
      line-height: 1.7;
      margin-bottom: 1.5rem;
    }
    .sites-leadmagnet__row {
      display: flex;
      gap: 0.5rem;
    }
    .sites-leadmagnet__input {
      flex: 1;
      padding: 12px 16px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: var(--r-md);
      color: #f5f5f5;
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-sm);
      outline: none;
      transition: border-color 0.3s;
    }
    .sites-leadmagnet__input:focus {
      border-color: var(--sites-accent);
    }
    .sites-leadmagnet__btn {
      padding: 12px 24px;
      background: var(--sites-accent);
      color: #fff;
      border: none;
      border-radius: var(--r-md);
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: var(--fs-xs);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.3s, transform 0.2s;
    }
    .sites-leadmagnet__btn:hover {
      background: #c00;
      transform: translateY(-1px);
    }
    .sites-leadmagnet__privacy {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-2xs);
      color: #8a8a8a;
      margin-top: 0.6rem;
    }
    .sites-leadmagnet__visual {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    @media (max-width: 768px) {
      .sites-leadmagnet { flex-direction: column; padding: 2rem; gap: 1.5rem; }
      .sites-leadmagnet__visual { display: none; }
      .sites-leadmagnet__row { flex-direction: column; }
      .sites-leadmagnet__btn { width: 100%; padding: 14px; }
    }

    /* FORM MODE SWITCHER */
    .sites-form-mode {
      display: inline-flex;
      gap: 0;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: var(--r-md);
      overflow: hidden;
      background: rgba(255,255,255,0.03);
    }
    .sites-form-mode__btn {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-xs);
      font-weight: 600;
      padding: 10px 20px;
      border: none;
      background: transparent;
      color: #777;
      cursor: pointer;
      transition: all 0.3s ease;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .sites-form-mode__btn--active {
      background: rgba(174,0,0,0.15);
      color: var(--sites-accent-text);
      border-color: var(--sites-accent);
    }
    .sites-form-mode__btn:hover:not(.sites-form-mode__btn--active) {
      background: rgba(255,255,255,0.05);
      color: #ccc;
    }

    /* PLEDGE (validation section) */
    .sites-form__pledge {
      background: rgba(174,0,0,0.05);
      border: 1px solid rgba(174,0,0,0.15);
      border-radius: var(--r-md);
      padding: 1.5rem;
      margin-bottom: 1.5rem;
    }
    .sites-form__pledge-title {
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: var(--fs-xs);
      font-weight: 600;
      color: #f5f5f5;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 1rem;
    }

    /* RULES SECTION */
    .sites-rules__list {
      margin-top: 2.5rem;
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
    }
    .sites-rules__item {
      display: flex;
      gap: 1.25rem;
      align-items: flex-start;
      padding: 1.25rem;
      background: rgba(17,17,17,0.5);
      border: 1px solid rgba(255,255,255,0.04);
      border-radius: var(--r-md);
    }
    .sites-rules__icon {
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(174,0,0,0.1);
      border: 1px solid rgba(174,0,0,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--sites-accent-text);
    }
    .sites-rules__icon svg {
      width: 16px;
      height: 16px;
    }
    .sites-rules__item h3 {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-sm);
      font-weight: 600;
      color: #ccc;
      margin-bottom: 0.25rem;
    }
    .sites-rules__item p {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-xs);
      color: #777;
      line-height: 1.7;
    }

    /* OFFERS GRID */
    .sites-offers__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      margin-top: 3rem;
    }
    .sites-offer {
      background: rgba(17,17,17,0.8);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: var(--r-md);
      padding: 2rem;
      position: relative;
      transition: border-color 0.3s, transform 0.3s;
      display: flex;
      flex-direction: column;
    }
    .sites-offer:hover {
      border-color: rgba(174,0,0,0.25);
      transform: translateY(-4px);
    }
    .sites-offer--featured {
      border-color: rgba(174,0,0,0.3);
      background: rgba(174,0,0,0.03);
    }
    .sites-offer--gold {
      border-color: rgba(212,168,75,0.2);
      background: rgba(212,168,75,0.02);
    }
    .sites-offer__badge {
      position: absolute;
      top: -10px;
      right: 1.5rem;
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-2xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      padding: 0.3rem 0.75rem;
      border-radius: var(--r-lg);
      color: #fff;
    }
    .sites-offer__badge--red { background: var(--sites-accent); }
    .sites-offer__badge--gold { background: var(--sites-gold); color: #0a0a0a; }
    .sites-offer__badge--green { background: #2ecc71; color: #0a0a0a; }
    .sites-offer__name {
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: var(--fs-md);
      font-weight: 600;
      color: #f5f5f5;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 0.5rem;
    }
    .sites-offer__desc {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-xs);
      color: #777;
      line-height: 1.6;
      margin-bottom: 1.25rem;
      flex-grow: 1;
    }
    .sites-offer__price {
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: clamp(1.5rem, 3vw, 2rem);
      font-weight: 700;
      color: var(--sites-accent-text);
      margin-bottom: 0.25rem;
    }
    .sites-offer--gold .sites-offer__price { color: var(--sites-gold); }
    .sites-offer__price-sub {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-2xs);
      color: #8a8a8a;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 1.25rem;
    }
    .sites-offer__features {
      list-style: none;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      margin-bottom: 1.5rem;
    }
    .sites-offer__features li {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-xs);
      color: #999;
      padding-left: 1.5rem;
      position: relative;
    }
    .sites-offer__features li::before {
      content: '\2713';
      position: absolute;
      left: 0;
      color: #2ecc71;
      font-weight: 700;
      font-size: var(--fs-2xs);
    }
    .sites-offer__cta {
      display: block;
      text-align: center;
      padding: 0.75rem 1.5rem;
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-2xs);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      border-radius: var(--r-sm);
      text-decoration: none;
      transition: all 0.3s;
      margin-top: auto;
    }
    .sites-offer__cta--fill {
      background: var(--sites-accent);
      color: #fff;
    }
    .sites-offer__cta--fill:hover {
      background: #cc1a1a;
      transform: translateY(-2px);
    }
    .sites-offer__cta--outline {
      border: 1px solid rgba(255,255,255,0.12);
      color: #aaa;
    }
    .sites-offer__cta--outline:hover {
      border-color: rgba(255,255,255,0.3);
      color: #fff;
    }
    .sites-offer__cta--gold {
      background: var(--sites-gold);
      color: #0a0a0a;
    }
    .sites-offer__cta--gold:hover {
      background: #e0c48a;
      transform: translateY(-2px);
    }

    /* REFERRAL BANNER */
    .sites-referral {
      background: linear-gradient(135deg, rgba(174,0,0,0.06), rgba(212,168,75,0.04));
      border: 1px solid rgba(174,0,0,0.15);
      border-radius: var(--r-md);
      padding: clamp(2rem, 4vw, 3rem);
      margin-top: 3rem;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 2rem;
      align-items: center;
    }
    .sites-referral__title {
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: clamp(1.1rem, 2vw, 1.5rem);
      font-weight: 700;
      color: #f5f5f5;
      margin-bottom: 0.5rem;
    }
    .sites-referral__text {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-sm);
      color: #888;
      line-height: 1.7;
    }
    .sites-referral__text strong { color: var(--sites-gold); font-weight: 700; }
    .sites-referral__amount {
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: clamp(2.5rem, 5vw, 3.5rem);
      font-weight: 700;
      color: var(--sites-gold);
      text-align: center;
      line-height: 1;
    }
    .sites-referral__amount-sub {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-2xs);
      color: #8a8a8a;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      text-align: center;
      margin-top: 0.35rem;
    }

    @media (max-width: 768px) {
      .sites-offers__grid { grid-template-columns: 1fr; }
      .sites-referral { grid-template-columns: 1fr; text-align: center; }
    }
    @media (min-width: 769px) and (max-width: 1024px) {
      .sites-offers__grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* HOSTING CTA */
    .sites-hosting {
      background: linear-gradient(135deg, rgba(0,123,255,0.04), rgba(46,204,113,0.04));
      border: 1px solid rgba(0,123,255,0.12);
      border-radius: var(--r-md);
      padding: clamp(2rem, 4vw, 3rem);
      margin-top: 3rem;
      position: relative;
      overflow: visible;
    }
    .sites-hosting::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(0,123,255,0.4), rgba(46,204,113,0.4), transparent);
    }
    .sites-hosting__grid {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 2rem;
      align-items: center;
    }
    .sites-hosting__badge {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-2xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: #2ecc71;
      background: rgba(46,204,113,0.1);
      padding: 0.35rem 0.85rem;
      border-radius: var(--r-lg);
      margin-bottom: 1rem;
    }
    .sites-hosting__badge svg { width: 12px; height: 12px; }
    .sites-hosting__title {
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: clamp(1.1rem, 2vw, 1.5rem);
      font-weight: 700;
      color: #f5f5f5;
      margin-bottom: 0.75rem;
    }
    .sites-hosting__text {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-sm);
      color: #888;
      line-height: 1.8;
      margin-bottom: 1.25rem;
    }
    .sites-hosting__features {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
      margin-bottom: 1.5rem;
      list-style: none;
      padding: 0;
    }
    .sites-hosting__features li {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-2xs);
      font-weight: 500;
      color: #aaa;
      padding: 0.35rem 0.8rem;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: var(--r-lg);
    }
    .sites-hosting__features li svg {
      display: inline;
      width: 10px;
      height: 10px;
      vertical-align: -1px;
      margin-right: 3px;
      color: #2ecc71;
    }
    .sites-hosting__cta-wrap {
      text-align: center;
    }
    .sites-hosting__price {
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: clamp(2rem, 4vw, 2.8rem);
      font-weight: 700;
      color: #2ecc71;
      line-height: 1;
      margin-bottom: 0.25rem;
    }
    .sites-hosting__price-sub {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-2xs);
      color: #8a8a8a;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 1.25rem;
    }
    .sites-hosting__btn {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.9rem 2rem;
      background: linear-gradient(135deg, #007bff, #0056b3);
      color: #fff;
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: var(--fs-xs);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      text-decoration: none;
      border-radius: var(--r-sm);
      transition: transform 0.3s, box-shadow 0.3s;
      white-space: nowrap;
    }
    .sites-hosting__btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(0,123,255,0.3);
    }
    .sites-hosting__btn svg { width: 14px; height: 14px; }
    .sites-hosting__note {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-2xs);
      color: #8a8a8a;
      margin-top: 0.75rem;
    }

    /* Hosting inline CTA (in form) */
    .sites-hosting-inline {
      display: none;
      background: rgba(0,123,255,0.05);
      border: 1px solid rgba(0,123,255,0.15);
      border-radius: var(--r-md);
      padding: 1.25rem;
      margin-top: 1rem;
      margin-bottom: 1rem;
    }
    .sites-hosting-inline--visible { display: block; }
    .sites-hosting-inline__text {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-xs);
      color: #aaa;
      line-height: 1.7;
      margin-bottom: 0.75rem;
    }
    .sites-hosting-inline__text strong { color: #2ecc71; font-weight: 600; }
    .sites-hosting-inline__btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.6rem 1.25rem;
      background: linear-gradient(135deg, #007bff, #0056b3);
      color: #fff;
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-2xs);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      text-decoration: none;
      border-radius: var(--r-sm);
      transition: transform 0.3s;
    }
    .sites-hosting-inline__btn:hover { transform: translateY(-1px); }
    .sites-hosting-inline__btn svg { width: 12px; height: 12px; }

    @media (max-width: 768px) {
      .sites-hosting__grid { grid-template-columns: 1fr; text-align: center; }
      .sites-hosting__cta-wrap { text-align: center; }
    }

    /* SCROLL PROGRESS BAR */
    .sites-progress {
      position: fixed;
      top: 0;
      left: 0;
      width: 0%;
      height: 3px;
      background: linear-gradient(90deg, var(--sites-accent), #ff3333);
      z-index: 10000;
      transition: width 0.1s linear;
    }

    /* WHATSAPP FLOATING */
    .sites-whatsapp {
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      width: 56px;
      height: 56px;
      background: #25d366;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      z-index: 9000;
      box-shadow: 0 4px 20px rgba(37,211,102,0.4);
      transition: transform 0.3s, box-shadow 0.3s;
      text-decoration: none;
    }
    .sites-whatsapp:hover {
      transform: scale(1.1);
      box-shadow: 0 6px 30px rgba(37,211,102,0.5);
    }
    .sites-whatsapp svg { width: 28px; height: 28px; }
    .sites-whatsapp__pulse {
      position: absolute;
      inset: -4px;
      border-radius: 50%;
      border: 2px solid rgba(37,211,102,0.4);
      animation: whatsappPulse 2s ease-out infinite;
    }
    @keyframes whatsappPulse {
      0% { transform: scale(1); opacity: 1; }
      100% { transform: scale(1.4); opacity: 0; }
    }

    /* STICKY CTA MOBILE */
    .sites-sticky-cta {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 0.75rem 1.5rem;
      background: rgba(10,10,10,0.95);
      backdrop-filter: blur(10px);
      border-top: 1px solid rgba(174,0,0,0.3);
      z-index: 8500;
      text-align: center;
    }
    .sites-sticky-cta__btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      width: 100%;
      max-width: 400px;
      padding: 0.85rem 2rem;
      background: var(--sites-accent);
      color: #fff;
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: var(--fs-xs);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      text-decoration: none;
      border-radius: var(--r-sm);
      transition: background 0.3s;
    }
    .sites-sticky-cta__btn:hover { background: #cc1a1a; }

    /* SOCIAL PROOF BAR */
    .sites-proof {
      padding: 3rem clamp(1.5rem, 4vw, 3rem);
      background: #0e0e0e;
      border-top: 1px solid rgba(255,255,255,0.04);
      border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .sites-proof__grid {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2rem;
      text-align: center;
    }
    .sites-proof__item-num {
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 700;
      color: var(--sites-accent-text);
      line-height: 1;
      margin-bottom: 0.5rem;
    }
    .sites-proof__item-label {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-2xs);
      font-weight: 500;
      color: #777;
      text-transform: uppercase;
      letter-spacing: 0.15em;
    }
    .sites-proof__item--gold .sites-proof__item-num { color: var(--sites-gold); }
    .sites-proof__item--urgency {
      background: rgba(174,0,0,0.06);
      border: 1px solid rgba(174,0,0,0.15);
      border-radius: var(--r-md);
      padding: 1rem;
    }

    /* PRICE ANCHOR */
    .sites-anchor {
      background: rgba(17,17,17,0.6);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: var(--r-md);
      padding: clamp(2rem, 4vw, 3rem);
      margin-top: 3rem;
      display: grid;
      grid-template-columns: 1fr 1px 1fr;
      gap: 2.5rem;
      align-items: center;
    }
    .sites-anchor__side { text-align: center; }
    .sites-anchor__side-label {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-2xs);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: #8a8a8a;
      margin-bottom: 0.75rem;
    }
    .sites-anchor__side-price {
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 700;
      line-height: 1;
      margin-bottom: 0.5rem;
    }
    .sites-anchor__side--market .sites-anchor__side-price {
      color: #8a8a8a;
      text-decoration: line-through;
      text-decoration-color: rgba(231,76,60,0.5);
    }
    .sites-anchor__side--offer .sites-anchor__side-price { color: var(--sites-accent-text); }
    .sites-anchor__side-desc {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-xs);
      color: #888;
      line-height: 1.6;
    }
    .sites-anchor__divider {
      width: 1px;
      height: 80%;
      background: rgba(255,255,255,0.06);
      margin: 0 auto;
    }

    /* PAIN SECTION */
    .sites-pain__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      margin-top: 3rem;
    }
    .sites-pain__card {
      background: rgba(231,76,60,0.04);
      border: 1px solid rgba(231,76,60,0.1);
      border-radius: var(--r-md);
      padding: 1.75rem;
      text-align: center;
    }
    .sites-pain__card-icon {
      width: 40px;
      height: 40px;
      margin: 0 auto 1rem;
      color: #e74c3c;
    }
    .sites-pain__card h3 {
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: var(--fs-sm);
      font-weight: 600;
      color: #e74c3c;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 0.5rem;
    }
    .sites-pain__card p {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-sm);
      color: #888;
      line-height: 1.7;
    }

    /* PORTFOLIO */
    .sites-portfolio__grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.25rem;
      margin-top: 3rem;
    }
    .sites-portfolio__card {
      background: rgba(17,17,17,0.8);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: var(--r-md);
      overflow: hidden;
      transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
    }
    .sites-portfolio__card:hover {
      border-color: rgba(174,0,0,0.3);
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(0,0,0,0.4);
    }
    .sites-portfolio__thumb {
      width: 100%;
      aspect-ratio: 16/10;
      position: relative;
      overflow: hidden;
    }
    .sites-portfolio__thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
      transition: transform 0.5s ease;
    }
    .sites-portfolio__card:hover .sites-portfolio__thumb img {
      transform: scale(1.05);
    }
    .sites-portfolio__thumb-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 50%;
      background: linear-gradient(to top, rgba(17,17,17,0.9), transparent);
      pointer-events: none;
    }
    .sites-portfolio__info {
      padding: 1rem 1.15rem 1.15rem;
    }
    .sites-portfolio__type {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-2xs);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.25em;
      color: var(--sites-gold);
      margin-bottom: 0.3rem;
    }
    .sites-portfolio__name {
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: var(--fs-sm);
      font-weight: 600;
      color: #f5f5f5;
      margin-bottom: 0.3rem;
    }
    .sites-portfolio__desc {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-2xs);
      color: #8a8a8a;
      line-height: 1.5;
    }

    /* TESTIMONIALS */
    .sites-testimonials__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      margin-top: 3rem;
    }
    .sites-testimonial {
      background: rgba(17,17,17,0.6);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: var(--r-md);
      padding: 2rem;
      position: relative;
    }
    .sites-testimonial::before {
      content: '\201C';
      position: absolute;
      top: 1rem;
      right: 1.5rem;
      font-size: var(--fs-3xl);
      color: rgba(174,0,0,0.15);
      font-family: Georgia, serif;
      line-height: 1;
    }
    .sites-testimonial__text {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-sm);
      color: #999;
      line-height: 1.8;
      margin-bottom: 1.5rem;
    }
    .sites-testimonial__author {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
    .sites-testimonial__avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(174,0,0,0.1);
      border: 1px solid rgba(174,0,0,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Benzin', sans-serif;
      font-size: var(--fs-2xs);
      font-weight: 700;
      color: var(--sites-accent-text);
    }
    .sites-testimonial__name {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-xs);
      font-weight: 600;
      color: #ccc;
    }
    .sites-testimonial__role {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-2xs);
      color: #8a8a8a;
    }
    .sites-testimonial__stars {
      display: flex;
      gap: 2px;
      margin-bottom: 1rem;
    }
    .sites-testimonial__stars svg {
      width: 14px;
      height: 14px;
      color: var(--sites-gold);
      fill: var(--sites-gold);
    }

    /* GUARANTEE */
    .sites-guarantee {
      background: rgba(46,204,113,0.04);
      border: 1px solid rgba(46,204,113,0.15);
      border-radius: var(--r-md);
      padding: clamp(2rem, 4vw, 3rem);
      display: flex;
      align-items: center;
      gap: 2rem;
      margin-top: 3rem;
    }
    .sites-guarantee__badge {
      flex-shrink: 0;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      border: 2px solid rgba(46,204,113,0.3);
      background: rgba(46,204,113,0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #2ecc71;
    }
    .sites-guarantee__badge svg { width: 36px; height: 36px; }
    .sites-guarantee__title {
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: var(--fs-lg);
      font-weight: 600;
      color: #f5f5f5;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 0.5rem;
    }
    .sites-guarantee__text {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-sm);
      color: #888;
      line-height: 1.7;
    }

    /* WHAT WE DONT DO */
    .sites-wontdo__grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.25rem;
      margin-top: 3rem;
    }
    .sites-wontdo__item {
      display: flex;
      gap: 1rem;
      align-items: flex-start;
      padding: 1.25rem;
      background: rgba(17,17,17,0.5);
      border: 1px solid rgba(255,255,255,0.04);
      border-radius: var(--r-md);
    }
    .sites-wontdo__icon {
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(174,0,0,0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--sites-accent-text);
    }
    .sites-wontdo__icon svg { width: 14px; height: 14px; }
    .sites-wontdo__item h3 {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-sm);
      font-weight: 600;
      color: #ccc;
      margin-bottom: 0.25rem;
    }
    .sites-wontdo__item p {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-xs);
      color: #8a8a8a;
      line-height: 1.6;
    }

    /* PRICE SIMULATOR */
    .sites-simulator {
      background: rgba(17,17,17,0.8);
      border: 1px solid rgba(212,168,75,0.15);
      border-radius: var(--r-md);
      padding: clamp(2rem, 4vw, 3rem);
      margin-top: 3rem;
    }
    .sites-simulator__options {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-bottom: 2rem;
    }
    .sites-simulator__option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 1.25rem;
      background: rgba(10,10,10,0.6);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: var(--r-sm);
      cursor: pointer;
      transition: border-color 0.3s;
    }
    .sites-simulator__option:hover { border-color: rgba(212,168,75,0.3); }
    .sites-simulator__option--active { border-color: var(--sites-gold); }
    .sites-simulator__option-left {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
    /* Meme correctif que les cases du questionnaire : focusable au clavier. */
    .sites-simulator__option input {
      position: absolute;
      opacity: 0;
      width: 20px;
      height: 20px;
      margin: 0;
      cursor: pointer;
    }
    .sites-simulator__option input:focus-visible + .sites-simulator__option-check {
      outline: 2px solid var(--sites-gold);
      outline-offset: 3px;
    }
    .sites-simulator__option-check {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;
    }
    .sites-simulator__option--active .sites-simulator__option-check {
      border-color: var(--sites-gold);
      background: rgba(212,168,75,0.15);
    }
    .sites-simulator__option--active .sites-simulator__option-check::after {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--sites-gold);
    }
    .sites-simulator__option-label {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-sm);
      font-weight: 500;
      color: #ccc;
    }
    .sites-simulator__option-price {
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: var(--fs-md);
      font-weight: 600;
      color: var(--sites-gold);
    }
    .sites-simulator__total {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.25rem;
      background: rgba(212,168,75,0.06);
      border: 1px solid rgba(212,168,75,0.2);
      border-radius: var(--r-md);
    }
    .sites-simulator__total-label {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-xs);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: #999;
    }
    .sites-simulator__total-price {
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: clamp(1.5rem, 3vw, 2.2rem);
      font-weight: 700;
      color: var(--sites-gold);
    }

    /* DISCOVERY CALL */
    .sites-call {
      text-align: center;
      padding: clamp(4rem, 8vh, 6rem) clamp(1.5rem, 4vw, 3rem);
      background: #0a0a0a;
      position: relative;
    }
    .sites-call::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 50%, rgba(212,168,75,0.04) 0%, transparent 60%);
      pointer-events: none;
    }
    .sites-call__inner {
      max-width: 600px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }
    .sites-call__btn {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      padding: 1rem 2.5rem;
      background: transparent;
      border: 1px solid var(--sites-gold);
      color: var(--sites-gold);
      font-family: 'Benzin', 'Oswald', sans-serif;
      font-size: var(--fs-sm);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      text-decoration: none;
      border-radius: var(--r-sm);
      transition: background 0.3s, color 0.3s, transform 0.3s;
    }
    .sites-call__btn:hover {
      background: var(--sites-gold);
      color: #0a0a0a;
      transform: translateY(-2px);
    }
    .sites-call__btn svg { width: 18px; height: 18px; }

    /* (hero variant styles moved to hero slider above) */

    /* DELIVERY TIME */
    .sites-delivery {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1.25rem;
      background: rgba(46,204,113,0.06);
      border: 1px solid rgba(46,204,113,0.15);
      border-radius: var(--r-pill);
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-2xs);
      font-weight: 600;
      color: #2ecc71;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      margin-bottom: 2rem;
    }
    .sites-delivery svg { width: 14px; height: 14px; }

    /* GSAP REVEAL */
    .gs-reveal {
      opacity: 0;
      transform: translateY(40px);
    }

    /* RESPONSIVE */
    @media (max-width: 768px) {
      .sites-concept__grid { grid-template-columns: 1fr; }
      .sites-audience__grid { grid-template-columns: 1fr; }
      .sites-scope__grid { grid-template-columns: 1fr; }
      .sites-shop__features { grid-template-columns: 1fr; }
      .sites-brief__grid { grid-template-columns: 1fr; }
      .sites-payment__grid { grid-template-columns: 1fr; }
      .sites-form__row { grid-template-columns: 1fr; }
      .sites-shop__header { flex-direction: column; align-items: flex-start; }
      .hero-scroll { display: none; }
      .sites-proof__grid { grid-template-columns: repeat(2, 1fr); }
      .sites-anchor { grid-template-columns: 1fr; gap: 1.5rem; }
      .sites-anchor__divider { width: 80%; height: 1px; }
      .sites-pain__grid { grid-template-columns: 1fr; }
      .sites-portfolio__grid { grid-template-columns: repeat(2, 1fr); }
      .sites-testimonials__grid { grid-template-columns: 1fr; }
      .sites-guarantee { flex-direction: column; text-align: center; }
      .sites-wontdo__grid { grid-template-columns: 1fr; }
      .sites-sticky-cta { display: none; }
      .sites-sticky-cta.is-visible { display: block; }
      .sites-whatsapp { bottom: 5.5rem !important; }
      .sites-whatsapp.cta-visible { bottom: 8.5rem !important; }
    }

    /* Mobile menu close button */
    .mobile-menu__close {
      position: absolute;
      top: 1.25rem;
      right: 1.25rem;
      width: 44px;
      height: 44px;
      background: none;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
      transition: all 0.3s ease;
    }
    .mobile-menu__close svg { width: 20px; height: 20px; color: #f5f5f5; }
    .mobile-menu__close:hover { border-color: rgba(212,168,75,0.5); background: rgba(255,255,255,0.05); }

    /* Quick Access Nav (mobile) */
    .quick-nav {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 990;
      background: rgba(10,10,10,0.95);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-top: 1px solid rgba(255,255,255,0.06);
      padding: 0.5rem 0 calc(0.5rem + env(safe-area-inset-bottom, 0px));
      justify-content: space-around;
      align-items: center;
    }
    @media (max-width: 768px) {
      .quick-nav { display: flex; }
    }
    .quick-nav__item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 42px;
      border-radius: var(--r-md);
      text-decoration: none;
      transition: all 0.2s ease;
    }
    .quick-nav__item svg { width: 20px; height: 20px; color: #777; transition: color 0.2s; }
    .quick-nav__item:hover svg, .quick-nav__item--active svg { color: #cda85c; }
    .quick-nav__item--cta {
      background: rgba(212,168,75,0.12);
      border: 1px solid rgba(212,168,75,0.25);
    }
    .quick-nav__item--cta svg { color: #cda85c; }
    .quick-nav__item--cta:hover { background: rgba(212,168,75,0.2); }

    @media (max-width: 480px) {
      .sites-hero { min-height: auto; padding-top: 4rem; padding-bottom: 3rem; }
      .hero-slide { padding: 3.5rem 1rem 2rem !important; }
      .hero-slide__inner { padding-bottom: 1rem !important; }
      .hero-slide__cta { margin-bottom: 0 !important; }
      .sites-scope__col { padding: 1.5rem; }
      .sites-proof__grid { grid-template-columns: 1fr 1fr; gap: 1rem; }

      /* Hero titles - scale down on small screens */
      .hero-slide .hero-slide__title { font-size: clamp(1.6rem, 7vw, 2.4rem) !important; line-height: 1.12; }
      .hero-slide--c .hero-slide__title { font-size: clamp(1.7rem, 7vw, 2.6rem) !important; }
      .hero-slide__subtitle { font-size: var(--fs-md) !important; }
      .hero-slide__price { font-size: clamp(3rem, 15vw, 5rem) !important; }
      .hero-slide__option { font-size: var(--fs-sm) !important; }

      /* Section headings - prevent word break */
      .sites-heading { font-size: clamp(1.3rem, 6vw, 1.8rem) !important; }

      /* Form progress dots - compact for mobile */
      .sites-form__step-dot { width: 24px !important; height: 24px !important; font-size: var(--fs-2xs) !important; }
      .sites-form__step-line { width: 12px !important; }
      .sites-form__progress { gap: 0 !important; margin-bottom: 2rem !important; }

      /* Hosting card - full mobile optimization */
      .sites-hosting { overflow: visible; padding: 1rem !important; }
      .sites-hosting__grid { grid-template-columns: 1fr !important; text-align: center; gap: 1.25rem; }
      .sites-hosting__title { font-size: clamp(0.85rem, 4.5vw, 1.1rem) !important; word-break: break-word; }
      .sites-hosting__text { font-size: var(--fs-xs); text-align: center; }
      .sites-hosting__features { justify-content: center; gap: 0.35rem; }
      .sites-hosting__features li { font-size: var(--fs-2xs); padding: 0.25rem 0.5rem; max-width: 100%; white-space: nowrap; }
      .sites-hosting__btn { padding: 0.7rem 1.2rem; font-size: var(--fs-2xs) !important; letter-spacing: 0.06em; white-space: normal; text-align: center; }
      .sites-hosting__price { font-size: clamp(1.8rem, 8vw, 2.4rem) !important; }
      .sites-hosting__cta-wrap { text-align: center; }
      .sites-hosting__grid > div > p { font-size: var(--fs-2xs) !important; text-align: center; }

      /* Stats grid - 2x2 on mobile */
      .apropos-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; }

      /* Price simulator - compact on mobile */
      .sites-simulator { padding: 1.25rem !important; }
      .sites-simulator__option { padding: 0.75rem 0.85rem; }
      .sites-simulator__option-label { font-size: var(--fs-xs); }
      .sites-simulator__option-price { font-size: var(--fs-sm); white-space: nowrap; }
      .sites-simulator__option-check { width: 16px; height: 16px; flex-shrink: 0; }
      .sites-simulator__option-left { gap: 0.5rem; }
      .sites-simulator__total { padding: 0.85rem; }
      .sites-simulator__total-label { font-size: var(--fs-2xs); }
      .sites-simulator__total-price { font-size: clamp(1.2rem, 5vw, 1.8rem) !important; }

      /* Price anchor - fit on mobile */
      .sites-anchor { padding: 1.25rem !important; gap: 1.25rem; }
      .sites-anchor__side-price { font-size: clamp(1.1rem, 5.5vw, 1.6rem) !important; white-space: nowrap; }
      .sites-anchor__side-desc { font-size: var(--fs-2xs); }
    }

    /* =============================================================
       MEGA ANIMATIONS PACK - 34 EFFECTS
       ============================================================= */

    /* --- #1 SLIDE MORPHING TRANSITION (particle dissolve) --- */
    .hero-slide { transition: opacity 0.6s ease, transform 0.6s ease, filter 0.6s ease; }
    .hero-slide--exiting {
      opacity: 0 !important;
      transform: scale(1.05);
      filter: blur(8px) brightness(1.5);
    }
    .hero-slide--entering {
      animation: slideEnterMorph 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    @keyframes slideEnterMorph {
      0% { opacity: 0; transform: scale(0.95); filter: blur(12px) brightness(0.5); }
      40% { filter: blur(4px) brightness(0.8); }
      100% { opacity: 1; transform: scale(1); filter: blur(0) brightness(1); }
    }

    /* --- #3 CIRCULAR SLIDE TIMER (SVG) --- */
    .hero-timer {
      position: absolute;
      bottom: 28px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 12;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .hero-timer__item {
      width: 32px;
      height: 32px;
      cursor: pointer;
      position: relative;
      opacity: 0.4;
      transition: opacity 0.3s;
    }
    .hero-timer__item--active { opacity: 1; }
    .hero-timer__item:hover { opacity: 0.8; }
    .hero-timer__circle {
      fill: none;
      stroke: rgba(255,255,255,0.15);
      stroke-width: 2;
    }
    .hero-timer__progress {
      fill: none;
      stroke: var(--sites-gold);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-dasharray: 88;
      stroke-dashoffset: 88;
      transform: rotate(-90deg);
      transform-origin: center;
      transition: stroke-dashoffset 0.1s linear;
    }
    .hero-timer__item--active .hero-timer__progress {
      animation: timerFill 6s linear forwards;
    }
    .hero-timer__num {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      font-family: var(--ff-accent, 'Montserrat', sans-serif);
      color: rgba(255,255,255,0.5);
      font-weight: 600;
    }
    .hero-timer__item--active .hero-timer__num { color: var(--sites-gold); }
    @keyframes timerFill {
      from { stroke-dashoffset: 88; }
      to { stroke-dashoffset: 0; }
    }

    /* --- #4 PARALLAX DEPTH ON HERO TEXT --- */
    .hero-slide__inner [data-depth] {
      will-change: transform;
      transition: transform 0.15s ease-out;
    }

    /* --- #5 CURSOR TRAIL DORÉ --- */
    .cursor-trail {
      position: fixed;
      pointer-events: none;
      z-index: 9999;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(212,168,75,0.9), rgba(212,168,75,0));
      opacity: 0;
      will-change: transform, opacity;
    }

    /* --- #7 NAV SCROLL INDICATOR --- */
    .sites-nav__link {
      position: relative;
    }
    .sites-nav__link::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 50%;
      width: 0;
      height: 2px;
      background: var(--sites-gold);
      transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      border-radius: var(--r-sm);
      box-shadow: 0 0 8px rgba(212,168,75,0.3);
    }
    .sites-nav__link--active::after {
      width: 100%;
      left: 0;
    }

    /* --- #9 BEZIER COUNTERS (enhanced) --- */
    .sites-proof__num[data-count] {
      display: inline-block;
      will-change: contents;
    }
    .sites-proof__num .counter-digit {
      display: inline-block;
      animation: digitDrop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
      opacity: 0;
      transform: translateY(20px);
    }
    @keyframes digitDrop {
      to { opacity: 1; transform: translateY(0); }
    }

    /* --- #10 CARD UNFOLD --- */
    .card-unfold {
      transform-origin: top center;
      opacity: 0;
      transform: perspective(600px) rotateX(-15deg) scaleY(0.9);
    }
    .card-unfold--visible {
      animation: cardUnfold 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    @keyframes cardUnfold {
      0% { opacity: 0; transform: perspective(600px) rotateX(-15deg) scaleY(0.9); }
      60% { opacity: 1; transform: perspective(600px) rotateX(3deg) scaleY(1.02); }
      100% { opacity: 1; transform: perspective(600px) rotateX(0) scaleY(1); }
    }

    /* --- #11 SCROLL-LINKED 3D ROTATION --- */
    .section-3d-scroll {
      will-change: transform;
      transform-style: preserve-3d;
      perspective: 1200px;
    }

    /* --- #12 TEXT FILL ON SCROLL --- */
    .text-fill {
      background: linear-gradient(90deg, var(--sites-gold) 50%, rgba(255,255,255,0.15) 50%);
      background-size: 200% 100%;
      background-position: 100% 0;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      transition: background-position 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .text-fill--active {
      background-position: 0 0;
    }

    /* --- #13 FLOATING CODE SNIPPETS --- */
    .floating-code {
      position: absolute;
      pointer-events: none;
      z-index: 0;
      font-family: 'Courier New', monospace;
      font-size: 11px;
      color: rgba(212,168,75,0.08);
      white-space: pre;
      line-height: 1.4;
      animation: codeFloat 20s ease-in-out infinite;
    }
    .floating-code--2 { animation-delay: 7s; animation-duration: 25s; }
    .floating-code--3 { animation-delay: 14s; animation-duration: 22s; }
    @keyframes codeFloat {
      0%, 100% { transform: translateY(0) rotate(-2deg); opacity: 0.5; }
      50% { transform: translateY(-30px) rotate(1deg); opacity: 1; }
    }

    /* --- #14 ANIMATED GRID LINES --- */
    .grid-bg {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
      opacity: 0.03;
    }
    .grid-bg::before,
    .grid-bg::after {
      content: '';
      position: absolute;
      inset: 0;
    }
    .grid-bg::before {
      background-image:
        linear-gradient(rgba(212,168,75,0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212,168,75,0.3) 1px, transparent 1px);
      background-size: 60px 60px;
      animation: gridShift 30s linear infinite;
    }
    .grid-bg::after {
      background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(10,10,10,1) 70%);
    }
    @keyframes gridShift {
      from { transform: translate(0, 0); }
      to { transform: translate(60px, 60px); }
    }

    /* --- #15 FORM FIELD GLOW --- */
    .sites-form__input:focus,
    .sites-form__select:focus,
    .sites-form__textarea:focus {
      box-shadow: 0 0 0 2px rgba(212,168,75,0.3), 0 0 25px rgba(212,168,75,0.1), 0 0 50px rgba(212,168,75,0.03) !important;
      border-color: var(--sites-gold) !important;
      transition: box-shadow 0.4s ease, border-color 0.3s ease !important;
    }

    /* --- #16 VALIDATION CHECKMARK SVG --- */
    .field-check {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
      opacity: 0;
      transition: opacity 0.3s;
    }
    .field-check--visible { opacity: 1; }
    .field-check__path {
      fill: none;
      stroke: var(--sites-gold);
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 24;
      stroke-dashoffset: 24;
    }
    .field-check--visible .field-check__path {
      animation: checkDraw 0.4s 0.1s cubic-bezier(0.65, 0, 0.35, 1) forwards;
    }
    @keyframes checkDraw {
      to { stroke-dashoffset: 0; }
    }

    /* --- #17 FORM PROGRESS BAR --- */
    .form-progress {
      width: 100%;
      height: 3px;
      background: rgba(255,255,255,0.06);
      border-radius: var(--r-sm);
      margin-bottom: 2rem;
      overflow: hidden;
      position: relative;
    }
    .form-progress__bar {
      height: 100%;
      background: linear-gradient(90deg, var(--sites-accent), var(--sites-gold));
      border-radius: var(--r-sm);
      width: 0%;
      transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
    }
    .form-progress__bar::after {
      content: '';
      position: absolute;
      right: 0;
      top: -3px;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--sites-gold);
      box-shadow: 0 0 12px rgba(212,168,75,0.5);
      opacity: 0;
      transition: opacity 0.3s;
    }
    .form-progress__bar[style*="width"]:not([style*="width: 0"])::after { opacity: 1; }
    .form-progress__label {
      position: absolute;
      right: 0;
      top: -20px;
      font-size: 11px;
      color: var(--sites-gold);
      font-family: var(--ff-accent, 'Montserrat', sans-serif);
      font-weight: 600;
      opacity: 0;
      transition: opacity 0.3s;
    }
    .form-progress__bar[style*="width"]:not([style*="width: 0"]) ~ .form-progress__label { opacity: 1; }

    /* --- #18 SUBMIT BUTTON CHARGE --- */
    .sites-form__submit {
      position: relative;
      overflow: hidden;
    }
    .sites-form__submit::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: var(--charge, 0%);
      height: 3px;
      background: linear-gradient(90deg, rgba(212,168,75,0.5), var(--sites-gold));
      transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      border-radius: 0 2px 0 0;
    }
    .sites-form__submit--charged::before { width: 100%; }
    .sites-form__submit--charged {
      box-shadow: 0 0 30px rgba(212,168,75,0.3), 0 0 60px rgba(212,168,75,0.1);
    }
    .sites-form__submit--sending {
      pointer-events: none;
      opacity: 0.7;
    }
    .sites-form__submit--sending::after {
      content: '';
      position: absolute;
      width: 18px;
      height: 18px;
      border: 2px solid transparent;
      border-top-color: #fff;
      border-radius: 50%;
      animation: submitSpin 0.6s linear infinite;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
    }
    @keyframes submitSpin {
      to { transform: translateY(-50%) rotate(360deg); }
    }

    /* --- #19 SHAKE ON ERROR --- */
    .field-shake {
      animation: fieldShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    }
    @keyframes fieldShake {
      10%, 90% { transform: translateX(-1px); }
      20%, 80% { transform: translateX(2px); }
      30%, 50%, 70% { transform: translateX(-3px); }
      40%, 60% { transform: translateX(3px); }
    }
    .field-error-flash {
      box-shadow: 0 0 0 2px rgba(231,76,60,0.5), 0 0 20px rgba(231,76,60,0.15) !important;
      border-color: rgba(231,76,60,0.5) !important;
    }

    /* --- #20 TYPING INDICATOR --- */
    .field-typing-wave {
      position: absolute;
      bottom: -1px;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--sites-gold), transparent);
      background-size: 200% 100%;
      animation: typingWave 1.5s ease-in-out infinite;
      opacity: 0;
      transition: opacity 0.2s;
    }
    .field-typing-wave--active { opacity: 1; }
    @keyframes typingWave {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    /* --- #21 GLOBE WIREFRAME 3D --- */
    .hero-globe {
      position: absolute;
      pointer-events: none;
      z-index: 1;
      width: clamp(200px, 30vw, 400px);
      height: clamp(200px, 30vw, 400px);
      perspective: 800px;
    }
    .hero-globe__sphere {
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      animation: globeSpin 30s linear infinite;
      position: relative;
    }
    .hero-globe__ring {
      position: absolute;
      inset: 0;
      border: 1px solid rgba(212,168,75,0.12);
      border-radius: 50%;
    }
    .hero-globe__ring:nth-child(1) { transform: rotateY(0deg); }
    .hero-globe__ring:nth-child(2) { transform: rotateY(30deg); }
    .hero-globe__ring:nth-child(3) { transform: rotateY(60deg); }
    .hero-globe__ring:nth-child(4) { transform: rotateY(90deg); }
    .hero-globe__ring:nth-child(5) { transform: rotateY(120deg); }
    .hero-globe__ring:nth-child(6) { transform: rotateY(150deg); }
    .hero-globe__ring--horizontal {
      transform: rotateX(90deg) !important;
      border-color: rgba(212,168,75,0.08);
    }
    .hero-globe__ring--horizontal:nth-child(8) {
      inset: 15%;
      border-color: rgba(174,0,0,0.08);
    }
    .hero-globe__ring--horizontal:nth-child(9) {
      inset: 30%;
      border-color: rgba(212,168,75,0.06);
    }
    .hero-globe__dot {
      position: absolute;
      width: 4px;
      height: 4px;
      background: rgba(212,168,75,0.6);
      border-radius: 50%;
      box-shadow: 0 0 8px rgba(212,168,75,0.3);
    }
    @keyframes globeSpin {
      from { transform: rotateX(-15deg) rotateY(0deg); }
      to { transform: rotateX(-15deg) rotateY(360deg); }
    }

    /* --- #22 DNA HELIX --- */
    .hero-dna {
      position: absolute;
      pointer-events: none;
      z-index: 1;
      width: 60px;
      height: clamp(200px, 40vh, 400px);
    }
    .hero-dna__strand {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    .hero-dna__node {
      position: absolute;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      left: 50%;
      transform: translateX(-50%);
    }
    .hero-dna__node--gold {
      background: rgba(212,168,75,0.7);
      box-shadow: 0 0 12px rgba(212,168,75,0.3);
      animation: dnaWaveL 4s ease-in-out infinite;
    }
    .hero-dna__node--red {
      background: rgba(174,0,0,0.6);
      box-shadow: 0 0 10px rgba(174,0,0,0.25);
      animation: dnaWaveR 4s ease-in-out infinite;
    }
    .hero-dna__bar {
      position: absolute;
      height: 1px;
      background: linear-gradient(90deg, rgba(212,168,75,0.3), rgba(174,0,0,0.2));
      left: 10%;
      right: 10%;
      animation: dnaBarPulse 4s ease-in-out infinite;
    }
    @keyframes dnaWaveL {
      0%, 100% { transform: translateX(-25px); }
      50% { transform: translateX(25px); }
    }
    @keyframes dnaWaveR {
      0%, 100% { transform: translateX(25px); }
      50% { transform: translateX(-25px); }
    }
    @keyframes dnaBarPulse {
      0%, 100% { opacity: 0.3; }
      50% { opacity: 0.7; }
    }

    /* --- #23 PYRAMID 3D --- */
    .hero-pyramid {
      position: absolute;
      pointer-events: none;
      z-index: 1;
      width: clamp(120px, 15vw, 200px);
      height: clamp(120px, 15vw, 200px);
      perspective: 600px;
    }
    .hero-pyramid__shape {
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      animation: pyramidSpin 20s linear infinite;
      position: relative;
    }
    .hero-pyramid__face {
      position: absolute;
      width: 0;
      height: 0;
      border-left: 60px solid transparent;
      border-right: 60px solid transparent;
      border-bottom: 100px solid rgba(212,168,75,0.06);
      left: 50%;
      transform-origin: bottom center;
      filter: drop-shadow(0 0 10px rgba(212,168,75,0.1));
    }
    .hero-pyramid__face:nth-child(1) { transform: translateX(-50%) rotateY(0deg) rotateX(30deg) translateZ(40px); border-bottom-color: rgba(212,168,75,0.08); }
    .hero-pyramid__face:nth-child(2) { transform: translateX(-50%) rotateY(90deg) rotateX(30deg) translateZ(40px); border-bottom-color: rgba(174,0,0,0.06); }
    .hero-pyramid__face:nth-child(3) { transform: translateX(-50%) rotateY(180deg) rotateX(30deg) translateZ(40px); border-bottom-color: rgba(212,168,75,0.07); }
    .hero-pyramid__face:nth-child(4) { transform: translateX(-50%) rotateY(270deg) rotateX(30deg) translateZ(40px); border-bottom-color: rgba(174,0,0,0.05); }
    .hero-pyramid__base {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: rgba(212,168,75,0.15);
      box-shadow: 0 0 20px rgba(212,168,75,0.08);
    }
    @keyframes pyramidSpin {
      from { transform: rotateY(0deg) rotateX(-5deg); }
      to { transform: rotateY(360deg) rotateX(-5deg); }
    }

    /* --- #24 TORUS 3D --- */
    .hero-torus {
      position: absolute;
      pointer-events: none;
      z-index: 1;
      width: clamp(100px, 12vw, 180px);
      height: clamp(100px, 12vw, 180px);
      perspective: 600px;
    }
    .hero-torus__shape {
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      animation: torusSpin 15s linear infinite;
      position: relative;
    }
    .hero-torus__ring {
      position: absolute;
      inset: 0;
      border: 2px solid rgba(212,168,75,0.12);
      border-radius: 50%;
    }
    .hero-torus__ring:nth-child(1) { transform: rotateY(0deg); }
    .hero-torus__ring:nth-child(2) { transform: rotateY(20deg); }
    .hero-torus__ring:nth-child(3) { transform: rotateY(40deg); }
    .hero-torus__ring:nth-child(4) { transform: rotateY(60deg); border-color: rgba(174,0,0,0.1); }
    .hero-torus__ring:nth-child(5) { transform: rotateY(80deg); }
    .hero-torus__ring:nth-child(6) { transform: rotateY(100deg); }
    .hero-torus__ring:nth-child(7) { transform: rotateY(120deg); border-color: rgba(174,0,0,0.08); }
    .hero-torus__ring:nth-child(8) { transform: rotateY(140deg); }
    .hero-torus__ring:nth-child(9) { transform: rotateY(160deg); }
    @keyframes torusSpin {
      from { transform: rotateX(60deg) rotateZ(0deg); }
      to { transform: rotateX(60deg) rotateZ(360deg); }
    }

    /* --- #25 PRISM REFRACTION --- */
    .hero-prism {
      position: absolute;
      pointer-events: none;
      z-index: 1;
      width: clamp(100px, 14vw, 180px);
      height: clamp(120px, 16vw, 220px);
      perspective: 500px;
    }
    .hero-prism__shape {
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      animation: prismSpin 25s linear infinite;
      position: relative;
    }
    .hero-prism__face {
      position: absolute;
      inset: 0;
    }
    .hero-prism__face:nth-child(1) {
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      background: linear-gradient(180deg, rgba(212,168,75,0.1), rgba(212,168,75,0.02));
      border: 1px solid rgba(212,168,75,0.2);
      transform: rotateY(0deg) translateZ(50px);
    }
    .hero-prism__face:nth-child(2) {
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      background: linear-gradient(180deg, rgba(174,0,0,0.08), transparent);
      transform: rotateY(120deg) translateZ(50px);
    }
    .hero-prism__face:nth-child(3) {
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      background: linear-gradient(180deg, rgba(212,168,75,0.06), transparent);
      transform: rotateY(240deg) translateZ(50px);
    }
    .hero-prism__rays {
      position: absolute;
      right: -80px;
      top: 40%;
      width: 120px;
      height: 60px;
      overflow: hidden;
    }
    .hero-prism__ray {
      position: absolute;
      left: 0;
      height: 1px;
      width: 100%;
      animation: rayShimmer 3s ease-in-out infinite;
    }
    .hero-prism__ray:nth-child(1) { top: 10%; background: linear-gradient(90deg, rgba(212,168,75,0.4), transparent); animation-delay: 0s; }
    .hero-prism__ray:nth-child(2) { top: 30%; background: linear-gradient(90deg, rgba(174,0,0,0.3), transparent); animation-delay: 0.3s; }
    .hero-prism__ray:nth-child(3) { top: 50%; background: linear-gradient(90deg, rgba(212,168,75,0.35), transparent); animation-delay: 0.6s; }
    .hero-prism__ray:nth-child(4) { top: 70%; background: linear-gradient(90deg, rgba(255,255,255,0.2), transparent); animation-delay: 0.9s; }
    .hero-prism__ray:nth-child(5) { top: 90%; background: linear-gradient(90deg, rgba(212,168,75,0.25), transparent); animation-delay: 1.2s; }
    @keyframes prismSpin {
      from { transform: rotateY(0deg) rotateX(-10deg); }
      to { transform: rotateY(360deg) rotateX(-10deg); }
    }
    @keyframes rayShimmer {
      0%, 100% { opacity: 0.3; transform: scaleX(0.5); }
      50% { opacity: 1; transform: scaleX(1); }
    }

    /* --- #27 CONSTELLATION PARTICLES --- */
    .constellation-canvas {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }

    /* --- #28 RIPPLE EFFECT --- */
    .btn-ripple {
      position: relative;
      overflow: hidden;
    }
    .btn-ripple__wave {
      position: absolute;
      border-radius: 50%;
      background: rgba(212,168,75,0.25);
      transform: scale(0);
      animation: rippleWave 0.6s linear;
      pointer-events: none;
    }
    @keyframes rippleWave {
      to { transform: scale(4); opacity: 0; }
    }

    /* --- #29 MAGNETIC HOVER --- */
    .magnetic-wrap {
      display: inline-block;
      will-change: transform;
      transition: transform 0.3s cubic-bezier(0.03, 0.98, 0.52, 0.99);
    }

    /* --- #30 ICON MORPH (scale + rotate entrance) --- */
    .icon-morph {
      opacity: 0;
      transform: scale(0.3) rotate(-90deg);
      transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .icon-morph--visible {
      opacity: 1;
      transform: scale(1) rotate(0deg);
    }

    /* --- #31 TOOLTIP 3D --- */
    .tooltip-3d {
      transform-origin: bottom center;
      animation: tooltip3dIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }
    @keyframes tooltip3dIn {
      from { opacity: 0; transform: perspective(400px) rotateX(20deg) translateY(10px) scale(0.9); }
      to { opacity: 1; transform: perspective(400px) rotateX(0) translateY(0) scale(1); }
    }

    /* --- #32 IMAGE REVEAL WIPE --- */
    .img-reveal {
      position: relative;
      overflow: hidden;
    }
    .img-reveal::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, var(--sites-gold), var(--sites-accent));
      transform: translateX(-101%);
    }
    .img-reveal--active::after {
      animation: wipeReveal 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
    }
    @keyframes wipeReveal {
      0% { transform: translateX(-101%); }
      50% { transform: translateX(0%); }
      100% { transform: translateX(101%); }
    }

    /* --- #33 BADGE PULSE --- */
    .hero-slide__badge {
      animation: badgePulse 3s ease-in-out infinite;
    }
    @keyframes badgePulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(212,168,75,0); }
      50% { box-shadow: 0 0 20px 4px rgba(212,168,75,0.15); }
    }

    /* --- #34 PRICE SLOT MACHINE --- */
    .price-slot {
      display: inline-flex;
      overflow: hidden;
      height: 1.1em;
    }
    .price-slot__digit {
      display: inline-block;
      animation: slotRoll 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      opacity: 0;
    }
    .price-slot__digit:nth-child(1) { animation-delay: 0.1s; }
    .price-slot__digit:nth-child(2) { animation-delay: 0.25s; }
    .price-slot__digit:nth-child(3) { animation-delay: 0.4s; }
    @keyframes slotRoll {
      0% { transform: translateY(-100%); opacity: 0; }
      60% { transform: translateY(8%); opacity: 1; }
      100% { transform: translateY(0); opacity: 1; }
    }

    /* --- #35 SCROLL VELOCITY BLUR --- */
    .velocity-blur {
      transition: filter 0.15s ease-out;
    }
    .velocity-blur--fast {
      filter: blur(1.5px);
    }

    /* --- #36 AURORA BOREALIS --- */
    .aurora {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
      opacity: 0.4;
      mix-blend-mode: screen;
    }
    .aurora__layer {
      position: absolute;
      width: 200%;
      height: 50%;
      top: -10%;
      left: -50%;
      filter: blur(80px);
      will-change: transform;
    }
    .aurora__layer--1 {
      background: radial-gradient(ellipse at 30% 50%, rgba(212,168,75,0.08), transparent 50%);
      animation: auroraMove1 25s ease-in-out infinite;
    }
    .aurora__layer--2 {
      background: radial-gradient(ellipse at 60% 40%, rgba(174,0,0,0.06), transparent 50%);
      animation: auroraMove2 30s ease-in-out infinite;
      top: 10%;
    }
    .aurora__layer--3 {
      background: radial-gradient(ellipse at 40% 60%, rgba(212,168,75,0.05), transparent 40%);
      animation: auroraMove3 35s ease-in-out infinite;
      top: 5%;
    }
    @keyframes auroraMove1 {
      0%, 100% { transform: translateX(0) translateY(0) rotate(0deg); }
      33% { transform: translateX(10%) translateY(-5%) rotate(5deg); }
      66% { transform: translateX(-8%) translateY(3%) rotate(-3deg); }
    }
    @keyframes auroraMove2 {
      0%, 100% { transform: translateX(0) translateY(0) rotate(0deg); }
      33% { transform: translateX(-12%) translateY(4%) rotate(-4deg); }
      66% { transform: translateX(8%) translateY(-6%) rotate(6deg); }
    }
    @keyframes auroraMove3 {
      0%, 100% { transform: translateX(0) rotate(0deg); }
      50% { transform: translateX(15%) rotate(3deg); }
    }


    /* --- #39 LIGHT SWEEP --- */
    .light-sweep {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 2;
      overflow: hidden;
    }
    .light-sweep::before {
      content: '';
      position: absolute;
      top: -100%;
      left: -100%;
      width: 60%;
      height: 300%;
      background: linear-gradient(105deg, transparent 40%, rgba(212,168,75,0.03) 45%, rgba(212,168,75,0.06) 50%, rgba(212,168,75,0.03) 55%, transparent 60%);
      animation: lightSweepMove 12s ease-in-out infinite;
      transform: rotate(25deg);
    }
    @keyframes lightSweepMove {
      0% { left: -100%; }
      45%, 55% { left: 150%; }
      100% { left: -100%; }
    }

    /* --- #40 BREATHING BACKGROUND --- */
    body {
      animation: bodyBreathe 8s ease-in-out infinite;
    }
    @keyframes bodyBreathe {
      0%, 100% { background-color: #0a0a0a; }
      50% { background-color: #0d0d0d; }
    }

    /* --- MOBILE: disable heavy effects --- */
    @media (max-width: 768px) {
      .cursor-trail { display: none; }
      .aurora { display: none; }
      .light-sweep { display: none; }
      .floating-code { display: none; }
      .grid-bg { display: none; }
      .hero-globe { display: none; }
      .hero-dna { display: none; }
      .hero-pyramid { display: none; }
      .hero-torus { display: none; }
      .hero-prism { display: none; }
      .hero-timer { bottom: 16px; gap: 6px; }
      .hero-timer__item { width: 24px; height: 24px; }
      .constellation-canvas { display: none; }
      .sites-about__grid { grid-template-columns: 1fr !important; text-align: center; }
      .sites-about__grid > div:first-child { margin: 0 auto; }
    }
    @media (prefers-reduced-motion: reduce) {
      .cursor-trail,
      .aurora,
      .light-sweep,
      .floating-code,
      .hero-globe,
      .hero-dna,
      .hero-pyramid,
      .hero-torus,
      .hero-prism,
      .constellation-canvas { display: none; }
      body { animation: none; }
      .hero-slide__badge { animation: none; }
    }

    /* MOBILE FIX v2 - Anti-overlap widgets flottants /wd */
    @media (max-width: 768px) {
      /* Le widget gamification Shadow Path n'a pas sa place sur une landing commerciale en mobile */
      .sp-hud { display: none !important; }
      /* WhatsApp décalé pour ne pas chevaucher la quick-nav */
      .sites-whatsapp { bottom: 5.5rem !important; right: 1rem !important; }
      .sites-whatsapp.cta-visible { bottom: 9rem !important; }
      /* Quick-nav plus compacte sur petit écran */
      .quick-nav__item { font-size: var(--fs-sm); }
    }

/* --- bloc original 2/5 --- */
.eco-footer{background:#070707;border-top:1px solid rgba(205,168,92,.18);padding:3rem 1.25rem 2.4rem;font-family:'Montserrat',system-ui,sans-serif}
.eco-footer__in{max-width:1180px;margin:0 auto;display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:760px){.eco-footer__in{grid-template-columns:1.1fr 3fr}}
.eco-footer__logo{display:block;font-family:'Benzin','Oswald',sans-serif;font-weight:700;letter-spacing:.16em;font-size: var(--fs-md);color:#f5f5f5;text-transform:uppercase}
.eco-footer__tag{display:block;margin-top:.5rem;font-size: var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;color:#cda85c}
.eco-footer__cols{display:grid;gap:1.6rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.eco-footer__cols{grid-template-columns:repeat(4,1fr)}}
.eco-footer__h{display:block;font-family:'Oswald',sans-serif;font-size: var(--fs-2xs);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#cda85c;margin-bottom:.7rem}
.eco-footer__col a{display:block;color:rgba(245,245,245,.62);text-decoration:none;font-size: var(--fs-sm);line-height:1.5;padding:.18rem 0;transition:color .2s}
.eco-footer__col a:hover{color:#f5f5f5}

/* --- bloc original 3/5 --- */
.sound-toggle {
      position: fixed;
      bottom: 1.5rem;
      left: 1.5rem;
      z-index: 9999;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 1px solid rgba(212,168,75,0.25);
      background: rgba(10,10,10,0.85);
      backdrop-filter: blur(8px);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      opacity: 0;
      transform: translateY(20px);
      animation: soundToggleFadeIn 0.6s 2s forwards;
    }
    @keyframes soundToggleFadeIn {
      to { opacity: 1; transform: translateY(0); }
    }
    .sound-toggle:hover {
      border-color: rgba(212,168,75,0.6);
      background: rgba(20,20,20,0.95);
      transform: scale(1.08);
    }
    .sound-toggle svg { width: 20px; height: 20px; fill: none; stroke: #cda85c; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .sound-toggle--active { border-color: rgba(212,168,75,0.5); }
    .sound-toggle--active svg { stroke: #e0c48a; }
    .sound-toggle__label {
      position: absolute;
      left: 54px;
      white-space: nowrap;
      font-family: 'Montserrat', sans-serif;
      font-size: var(--fs-2xs);
      color: #888;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      opacity: 0;
      transition: opacity 0.3s;
      pointer-events: none;
    }
    .sound-toggle:hover .sound-toggle__label { opacity: 1; }
    @media (max-width: 768px) {
      .sound-toggle { width: 38px; height: 38px; bottom: 4.5rem; left: 1rem; }
      .sound-toggle svg { width: 17px; height: 17px; }
      .sound-toggle__label { display: none; }
    }

/* --- bloc original 4/5 --- */
/* FIX P2 responsive : garde-fou overflow + lisibilite */
body{overflow-x:hidden}
@media(max-width:600px){
  .sites-hosting__features li{white-space:normal !important;font-size: var(--fs-2xs)}
}

/* --- bloc original 5/5 --- */
#as-cookie{position:fixed;left:0;right:0;bottom:0;z-index:99990;display:none;background:#0a0a0a;border-top:1px solid rgba(205,168,92,.35);box-shadow:0 -12px 36px rgba(0,0,0,.55);padding:20px 18px;padding-bottom:calc(20px + env(safe-area-inset-bottom));font-family:'Montserrat',system-ui,Arial,sans-serif;color:#cfcabf}
#as-cookie .asc-in{max-width:1080px;margin:0 auto;display:flex;gap:16px 26px;align-items:center;justify-content:space-between;flex-wrap:wrap}
#as-cookie .asc-txt{max-width:680px}
#as-cookie .asc-kick{display:block;font-family:'Oswald',sans-serif;font-size: var(--fs-2xs);font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#cda85c;margin-bottom:.4rem}
#as-cookie p{margin:0;font-size: var(--fs-sm);line-height:1.6;letter-spacing:.01em}
#as-cookie a{color:#cda85c;text-decoration:underline;text-underline-offset:2px}
#as-cookie .asc-btns{display:flex;gap:10px;flex:0 0 auto}
#as-cookie button{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size: var(--fs-2xs);font-weight:600;padding:.75rem 1.4rem;border-radius: var(--r-sm);cursor:pointer;border:1px solid transparent;transition:.2s ease}
#as-cookie .asc-ok{background:#ae0000;color:#f5f5f5;border-color:#ae0000}
#as-cookie .asc-ok:hover{background:#c40000;border-color:#c40000;box-shadow:0 0 24px rgba(174,0,0,.35)}
#as-cookie .asc-no{background:transparent;color:#cfcabf;border-color:rgba(255,255,255,.2)}
#as-cookie .asc-no:hover{border-color:#cda85c;color:#cda85c}
@media(max-width:560px){#as-cookie .asc-in{flex-direction:column;align-items:stretch}#as-cookie .asc-btns{justify-content:flex-end}}

/* ============ CORRECTIFS AUDIT HERO (2026-07-31) ============ */

/* 1. Plus de scroll horizontal parasite (31px) cause par les decors 3D
   qui debordent. `clip` ne cree pas de conteneur de scroll, donc la nav
   fixed et les elements sticky restent intacts (verifie en live). */
html { overflow-x: clip; }

/* 2. Ecrans peu hauts (portables 13-14") : le slide A depassait de 28px
   et coupait son bouton. On resserre uniquement le rythme vertical.
   Scope min-width:481px pour NE PAS ecraser les tailles mobiles definies
   plus haut dans le media (max-width:480px). */
@media (max-height: 860px) and (min-width: 481px) {
  .hero-slide--a .hero-slide__title { font-size: clamp(2.4rem, 5.2vw, 4rem); margin-bottom: 1rem; }
  .hero-slide--a .hero-slide__badge { margin-bottom: 1.25rem; }
  .hero-slide--a .hero-slide__subtitle { margin-bottom: 1.5rem; }
  .hero-slide--a .hero-slide__option { margin-bottom: 1.5rem; }
  /* Slide B : son badge passait sous la nav fixe (haut a 62px, nav a 90px). */
  .hero-slide--b .hero-slide__title { font-size: clamp(2.2rem, 4.6vw, 3.4rem); margin-bottom: 1rem; }
  .hero-slide--b .hero-slide__badge { margin-bottom: 1.1rem; }
  .hero-slide--b .hero-slide__subtitle { margin-bottom: 1.5rem; }
  .hero-slide--b .hero-slide__stat { margin-bottom: 1.5rem; }
}

/* 3. Presence humaine dans le hero : la photo est une couche de fond
   (z-index 0, derriere le contenu en z-index 3 et les decors 3D).
   Zero hauteur ajoutee, donc zero risque sur la mise en page auditee. */
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
  filter: grayscale(0.2) contrast(1.06);
}
/* Voile : garantit la lisibilite du texte par-dessus la photo. */
.hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.66) 42%, rgba(10,10,10,0.94) 100%),
    radial-gradient(ellipse at center, rgba(10,10,10,0.5) 0%, rgba(10,10,10,0.88) 100%);
}
.hero-photo--right img { object-position: 78% 22%; }
.hero-photo--left img { object-position: 22% 20%; }

@media (max-width: 768px) {
  /* Sur mobile le texte occupe toute la largeur : on assombrit encore. */
  .hero-photo img { opacity: 0.22; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-photo img { filter: none; }
}

/* ============ BANDEAUX PHOTO (2026-08-01) ============
   Les images sont pre-recadrees au ratio 21/9 exact (1800x771), donc
   object-fit n'a plus rien a couper : le cadrage voulu est le cadrage rendu.
   L'ancien bandeau etait en 21/7 sur des sources en 3/2 : la moitie de la
   hauteur etait rognee et les sujets se retrouvaient decapites. */
.wd-band {
  width: 100%;
  aspect-ratio: 21 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid rgba(212, 168, 75, 0.2);
  margin: 1.75rem 0 2.25rem;
  position: relative;
}
.wd-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Fondu vers le fond de section : la photo s'ancre dans la page au lieu
   de flotter comme une vignette collee. */
.wd-band::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,10,.28) 0%, rgba(10,10,10,0) 32%, rgba(10,10,10,0) 68%, rgba(10,10,10,.42) 100%);
}
@media (max-width: 640px) {
  /* Un 21/9 sur telephone donne une bande de 60px : on resserre le cadre.
     Le recadrage redevient actif, donc on ancre sur le sujet, image par image. */
  .wd-band { aspect-ratio: 16 / 10; margin: 1.25rem 0 1.75rem; }
  .wd-band--sujet-droite img { object-position: 74% center; }
  .wd-band--sujet-gauche img { object-position: 26% center; }
  .wd-band--sujet-centre img { object-position: center center; }
}

/* ============ CARROUSEL ACCESSIBLE (2026-08-01) ============ */
/* Les points sont devenus des <button> : on neutralise le style natif pour
   garder exactement le rendu d'origine, et on rend le focus visible. */
.hero-dot {
  padding: 0;
  appearance: none;
  font: inherit;
}
.hero-dot:focus-visible {
  outline: 2px solid var(--sites-gold);
  outline-offset: 4px;
}
/* Bouton pause : WCAG 2.2.2. Discret, aligne sur les points du carrousel. */
.hero-pause {
  position: absolute;
  bottom: 2.2rem;
  right: 2rem;
  z-index: 6;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(245, 245, 245, 0.8);
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.hero-pause:hover { border-color: var(--sites-gold); color: var(--sites-gold); }
.hero-pause:focus-visible { outline: 2px solid var(--sites-gold); outline-offset: 3px; }
.hero-pause svg { width: 14px; height: 14px; }
@media (max-width: 640px) { .hero-pause { bottom: 1.4rem; right: 1rem; } }

/* Texte reserve aux lecteurs d'ecran (region live du carrousel). */
.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;
}

/* Message d'etat du questionnaire (erreurs de saisie, annonce aux lecteurs d'ecran). */
.sites-form__status {
  min-height: 1.2em;
  margin: 0 0 0.9rem;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: #8a8a8a;
}
.sites-form__status--error {
  color: var(--sites-accent-text);
  font-weight: 600;
}
.sites-form__input[aria-invalid="true"],
.sites-form__select[aria-invalid="true"],
.sites-form__textarea[aria-invalid="true"] {
  border-color: var(--sites-accent-text);
}

/* ============ AIDE D'INSTALLATION iOS (2026-08-01) ============
   Safari n'expose pas beforeinstallprompt : sur iPhone l'installation par
   bouton est impossible cote Apple. On guide donc a la main, en 2 etapes. */
.pwa-ios-hint {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 16px;
  z-index: 99992;
  display: none;
  background: #111;
  border: 1px solid rgba(205, 168, 92, 0.5);
  border-radius: var(--r-lg);
  padding: 16px 42px 16px 16px;
  color: #f5f5f5;
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.7);
  font-family: 'Montserrat', system-ui, sans-serif;
}
.pwa-ios-hint.on { display: block; }
.pwa-ios-hint > b { color: var(--sites-gold); font-size: var(--fs-md); }
.pwa-ios-hint p { margin: 0.45rem 0 0; font-size: var(--fs-sm); line-height: 1.55; color: #cfcabf; }
.pwa-ios-hint p b { color: #f5f5f5; }
.pwa-ios-hint__x {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: 0;
  color: #8a8a8a;
  font-size: var(--fs-xl);
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}
.pwa-ios-hint__x:focus-visible { outline: 2px solid var(--sites-gold); outline-offset: 2px; }
@media (min-width: 640px) { .pwa-ios-hint { left: auto; right: 20px; max-width: 380px; } }