*{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }
    
    :root{
      --red:#e51019;
      --red-600:#c80d15;
      --red-hover:#ff1a24;
      --muted:#d1d1d1;
      --max:1400px;
    }
    
    html{
      scroll-behavior:smooth;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }
    
    body{
      font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;
      background:#0b0b0b;
      color:#fff;
      line-height:1.6;
      overflow-x:hidden;
      margin:0;
    }
    
    a{
      color:inherit;
      text-decoration:none;
      cursor:pointer;
    }
    
    img{
      max-width:100%;
      height:auto;
      display:block;
    }

    /* ==========================================
       NAVIGATION BAR
       ========================================== */
    .site-header{
      position:fixed;
      top:0;
      left:0;
      right:0;
      z-index:1000;
      width:100%;
    }
    
    .bar{
      background:rgba(11,11,11,.75);
      backdrop-filter:saturate(180%) blur(20px);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      border-bottom:1px solid rgba(255,255,255,.06);
      transition:all .4s cubic-bezier(.4,0,.2,1);
      box-shadow:0 2px 20px rgba(0,0,0,.08);
    }
    
    .bar.scrolled{
      background:rgba(11,11,11,.92);
      backdrop-filter:saturate(180%) blur(30px);
      -webkit-backdrop-filter:saturate(180%) blur(30px);
      border-bottom:1px solid rgba(255,255,255,.1);
      box-shadow:0 4px 30px rgba(0,0,0,.2);
    }
    
    .bar__inner{
      max-width:1400px;
      margin:0 auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:clamp(16px,2vw,32px);
      padding:clamp(12px,1.5vh,16px) clamp(20px,3vw,40px);
    }
    
    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      padding:8px 12px;
      border-radius:12px;
      transition:all .3s cubic-bezier(.4,0,.2,1);
    }
    .brand:hover{
      background:rgba(255,255,255,.05);
      transform:translateY(-1px);
    }
    .brand__logo{
      height:clamp(36px,4.5vw,44px);
      width:auto;
      object-fit:contain;
      filter:drop-shadow(0 2px 8px rgba(255,255,255,.1));
      transition:filter .3s;
    }
    .brand:hover .brand__logo{
      filter:drop-shadow(0 4px 12px rgba(255,255,255,.2));
    }

    .nav{
      display:flex;
      align-items:center;
      gap:4px;
      flex-wrap:nowrap;
    }
    
    .nav a{
      position:relative;
      padding:clamp(10px,1.2vh,12px) clamp(16px,1.8vw,20px);
      border-radius:12px;
      font-weight:600;
      font-size:clamp(13.5px,1.3vw,15px);
      letter-spacing:0.01em;
      transition:all .3s cubic-bezier(.4,0,.2,1);
      white-space:nowrap;
      overflow:hidden;
    }
    
    .nav a::before{
      content:'';
      position:absolute;
      inset:0;
      background:linear-gradient(135deg, rgba(229,16,25,.15) 0%, rgba(229,16,25,.08) 100%);
      border-radius:12px;
      opacity:0;
      transition:opacity .3s cubic-bezier(.4,0,.2,1);
      z-index:-1;
    }
    
    .nav a:hover::before{
      opacity:1;
    }
    
    .nav a::after{
      content:'';
      position:absolute;
      bottom:6px;
      left:50%;
      transform:translateX(-50%) scaleX(0);
      width:70%;
      height:2px;
      background:linear-gradient(90deg, transparent, var(--red), transparent);
      border-radius:2px;
      transition:transform .4s cubic-bezier(.68,-.55,.265,1.55);
    }
    
    .nav a:hover::after{
      transform:translateX(-50%) scaleX(1);
    }
    
    .nav a:hover{
      color:#fff;
      transform:translateY(-1px);
    }
    
    .nav a:active{
      transform:translateY(0);
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      background:linear-gradient(135deg, var(--red) 0%, var(--red-600) 100%);
      padding:clamp(11px,1.5vh,14px) clamp(18px,2.5vw,26px);
      border-radius:12px;
      font-weight:700;
      color:#fff;
      box-shadow:0 4px 16px rgba(229,16,25,.3), inset 0 1px 0 rgba(255,255,255,.2);
      transition:all .3s cubic-bezier(.4,0,.2,1);
      font-size:clamp(13.5px,1.4vw,15px);
      border:none;
      cursor:pointer;
      position:relative;
      overflow:hidden;
      letter-spacing:0.02em;
    }
    
    .btn::before{
      content:'';
      position:absolute;
      top:0;
      left:-100%;
      width:100%;
      height:100%;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
      transition:left .5s;
    }
    
    .btn:hover::before{
      left:100%;
    }
    
    .btn:hover{
      background:linear-gradient(135deg, var(--red-hover) 0%, var(--red) 100%);
      transform:translateY(-2px);
      box-shadow:0 6px 20px rgba(229,16,25,.45), inset 0 1px 0 rgba(255,255,255,.3);
    }
    
    .btn:active{
      transform:translateY(0);
      box-shadow:0 2px 8px rgba(229,16,25,.3);
    }
    
    .btn-desktop{display:inline-flex}

    /* Menu Burger Moderne avec Animation Différente */
    .burger{
      display:none;
      width:50px;
      height:50px;
      border-radius:50%;
      background:linear-gradient(135deg, var(--red) 0%, var(--red-600) 100%);
      align-items:center;
      justify-content:center;
      cursor:pointer;
      transition:all .4s cubic-bezier(.68,-.55,.265,1.55);
      position:relative;
      box-shadow:0 4px 16px rgba(229,16,25,.4);
    }
    
    .burger:hover{
      transform:rotate(90deg) scale(1.1);
      box-shadow:0 6px 24px rgba(229,16,25,.6);
    }
    
    .burger.open{
      transform:rotate(180deg);
      background:linear-gradient(135deg, var(--red-hover) 0%, var(--red) 100%);
    }
    
    .burger-lines{
      width:26px;
      height:20px;
      position:relative;
    }
    
    .burger span{
      display:block;
      width:26px;
      height:3px;
      background:#fff;
      border-radius:3px;
      position:absolute;
      left:0;
      transition:all .5s cubic-bezier(.68,-.55,.265,1.55);
    }
    
    .burger span:nth-child(1){
      top:0;
    }
    .burger span:nth-child(2){
      top:50%;
      transform:translateY(-50%);
      width:20px;
    }
    .burger span:nth-child(3){
      bottom:0;
    }
    
    .burger.open span:nth-child(1){
      top:50%;
      transform:translateY(-50%) rotate(45deg);
    }
    .burger.open span:nth-child(2){
      opacity:0;
      transform:translateX(30px);
    }
    .burger.open span:nth-child(3){
      bottom:50%;
      transform:translateY(50%) rotate(-45deg);
    }

    /* Menu Mobile avec Animation Slide depuis le haut */
    .mobile{
      display:none;
      position:fixed;
      top:0;
      left:0;
      right:0;
      bottom:0;
      background:linear-gradient(180deg, rgba(11,11,11,.98) 0%, rgba(11,11,11,.95) 100%);
      backdrop-filter:blur(20px);
      -webkit-backdrop-filter:blur(20px);
      z-index:999;
      transform:translateY(-100%);
      transition:transform .6s cubic-bezier(.68,-.55,.265,1.55);
    }
    
    .mobile.open{
      display:flex;
      transform:translateY(0);
    }
    
    .mobile__panel{
      margin:auto;
      width:100%;
      max-width:600px;
      padding:clamp(20px,5vw,40px);
    }
    
    .mobile__links{
      display:flex;
      flex-direction:column;
      gap:0;
    }
    
    .mobile__links a{
      display:flex;
      align-items:center;
      padding:clamp(18px,3vh,24px) clamp(20px,4vw,32px);
      border-radius:16px;
      transition:all .4s cubic-bezier(.4,0,.2,1);
      font-size:clamp(18px,3vw,22px);
      font-weight:700;
      position:relative;
      overflow:hidden;
      opacity:0;
      transform:translateX(-50px);
      animation:slideInMenu .5s cubic-bezier(.68,-.55,.265,1.55) forwards;
    }
    
    .mobile__links a:nth-child(1){animation-delay:.1s}
    .mobile__links a:nth-child(2){animation-delay:.2s}
    .mobile__links a:nth-child(3){animation-delay:.3s}
    .mobile__links a:nth-child(4){animation-delay:.4s}
    .mobile__links a:nth-child(5){animation-delay:.5s}
    .mobile__links a:nth-child(6){animation-delay:.6s}
    
    @keyframes slideInMenu{
      to{
        opacity:1;
        transform:translateX(0);
      }
    }
    
    .mobile__links a::before{
      content:'';
      position:absolute;
      inset:0;
      background:linear-gradient(135deg, rgba(229,16,25,.15) 0%, rgba(229,16,25,.08) 100%);
      border-radius:16px;
      transform:translateX(-100%);
      transition:transform .4s cubic-bezier(.68,-.55,.265,1.55);
    }
    
    .mobile__links a:hover::before{
      transform:translateX(0);
    }
    
    .mobile__links a:active{
      transform:scale(.97);
    }
    
    .mobile__links .btn{
      margin:clamp(24px,4vh,32px) 0 0;
      display:inline-flex;
      width:100%;
      justify-content:center;
      font-size:clamp(16px,2.5vw,18px);
      padding:clamp(16px,2.5vh,20px);
    }

    @keyframes fadeIn{from{opacity:0}to{opacity:1}}

    /* ==========================================
       HERO SECTION
       ========================================== */
    .hero{
      position:relative;
      min-height:100vh;
      display:flex;
      align-items:center;
      color:#fff;
      overflow:hidden;
    }
    
    .hero__bg{
      position:absolute;
      inset:0;
      background:url('index.jpg') center/cover no-repeat;
      animation:kenBurns 20s ease-in-out infinite alternate;
    }
    
    @keyframes kenBurns{
      from{transform:scale(1)}
      to{transform:scale(1.05)}
    }
    
    .hero__overlay{
      position:absolute;
      inset:0;
      background:linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.6) 40%, rgba(0,0,0,.2) 65%, rgba(0,0,0,0) 100%),
                  linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 45%);
    }
    
    .hero__content{
      position:relative;
      padding:clamp(110px,15vh,140px) clamp(16px,4vw,32px) clamp(60px,10vh,90px);
      max-width:var(--max);
      margin:auto;
      width:100%;
      min-height:calc(100vh - 130px);
    }

    .hero__text{
      max-width:720px;
    }
    
    .hero h1{
      font-size:clamp(30px,5.5vw,56px);
      line-height:1.08;
      margin:0 0 clamp(14px,2vh,18px);
      font-weight:900;
      letter-spacing:-.02em;
      text-shadow:0 4px 20px rgba(0,0,0,.5);
    }
    
    .hero p{
      max-width:680px;
      margin:0 0 clamp(22px,3vh,30px);
      color:#ececec;
      font-size:clamp(15.5px,1.6vw,18px);
      line-height:1.65;
      text-shadow:0 2px 10px rgba(0,0,0,.4);
    }
    
    .hero .btn{
      font-size:clamp(14px,1.5vw,16px);
      padding:clamp(12px,1.8vh,16px) clamp(24px,3vw,32px);
    }

    .stats{
      display:flex;
      gap:clamp(20px,3vw,32px);
      flex-wrap:wrap;
      font-weight:800;
    }
    
    .stats div{
      display:flex;
      flex-direction:column;
      gap:6px;
      padding:16px 20px;
      background:rgba(255,255,255,.08);
      backdrop-filter:blur(10px);
      border-radius:14px;
      border:1px solid rgba(255,255,255,.15);
      transition:all .3s cubic-bezier(.4,0,.2,1);
    }
    
    .stats div:hover{
      background:rgba(255,255,255,.12);
      transform:translateY(-3px);
      box-shadow:0 8px 24px rgba(0,0,0,.3);
    }
    
    .stats span{
      font-size:clamp(17px,2.2vw,24px);
      color:#fff;
    }
    
    .stats small{
      display:block;
      font-weight:600;
      opacity:.85;
      font-size:clamp(12px,1.3vw,14px);
      color:var(--muted);
    }
    
    /* Badge APSAD - Plus petit */
    .hero__cert{
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      background:#fff;
      border:2px solid #ddd;
      border-radius:12px;
      padding:8px;
      width:90px;
      height:42px;
      box-shadow:0 4px 16px rgba(0,0,0,.15), 0 0 0 4px rgba(100,100,100,.25);
      transition:all .3s cubic-bezier(.4,0,.2,1);
      flex-shrink:0;
    }
    
    .hero__cert:hover{
      transform:translateY(-3px);
      box-shadow:0 8px 24px rgba(0,0,0,.25), 0 0 0 4px rgba(100,100,100,.35);
    }
    
    /* 🎯 BADGE APSAD FIXE - POSITION MODIFIABLE */
    .hero__cert.fixed{
      position:fixed;
      bottom:100px;
      right:50px;
      z-index:50;
      animation:certFadeIn .4s cubic-bezier(.4,0,.2,1);
    }
    
    @keyframes certFadeIn{
      from{opacity:0;transform:scale(.9)}
      to{opacity:1;transform:scale(1)}
    }
    
    .hero__cert__logos{
      width:100%;
      height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    
    .hero__cert__logos img{
      width:100%;
      max-width:150px;
      height:auto;
      object-fit:contain;
    }

    /* POSITIONNEMENT DESKTOP */
    @media (min-width: 721px) {
      .hero__content {
        position: relative;
        display: block;
        height: calc(100vh - 130px);
      }
      
      .hero__text {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
      }
      
      .stats {
        position: absolute;
        bottom: 40px;
        left: 0;
      }
      
      .hero__cert {
        position: absolute;
        bottom: 40px;
        right: 0;
      }
    }

    /* Partners band - Full Responsive */
    .band{
      display:grid;
      grid-template-columns:2fr 1fr 1fr;
      gap:0;
    }
    
    .band__left{
      background:var(--red);
      color:#fff;
      display:grid;
      place-items:center;
      min-height:clamp(260px,35vw,340px);
      text-align:center;
      font-size:clamp(20px,3.5vw,34px);
      font-weight:900;
      padding:clamp(20px,3vw,32px);
      line-height:1.2;
    }
    
    .band__logo{
      background:#fff;
      display:grid;
      place-items:center;
      padding:clamp(24px,4vw,40px);
      transition:background .3s cubic-bezier(.4,0,.2,1);
    }
    
    .band__logo:hover{
      background:#f8f8f8;
    }
    
    .band__logo a{
      display:flex;
      align-items:center;
      justify-content:center;
      width:100%;
      height:100%;
    }
    
    .band__logo img{
      max-width:100%;
      height:auto;
      max-height:clamp(120px,18vw,180px);
      object-fit:contain;
      transition:all .4s cubic-bezier(.4,0,.2,1);
      filter:grayscale(0);
    }
    
    .band__logo a:hover img{
      transform:scale(1.08);
      filter:grayscale(0) brightness(1.05);
    }
    
    .band__logo a:active img{
      transform:scale(1.02);
    }

    /* Services - Full Responsive */
    .services{
      width:100%;
      margin:0;
      padding:0;
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:0;
    }
    
    .card{
      position:relative;
      aspect-ratio:504/576;
      overflow:hidden;
      isolation:isolate;
      cursor:pointer;
    }
    
    .card img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      transition:transform .7s cubic-bezier(.4,0,.2,1);
    }
    
    .card:hover img{transform:scale(1.1)}
    
    .card::after{
      content:'';
      position:absolute;
      inset:0;
      background:rgba(0,0,0,.3);
      transition:background .5s cubic-bezier(.4,0,.2,1);
      pointer-events:none;
    }
    
    .card:hover::after{background:rgba(0,0,0,.7)}
    
    .card__label{
      position:absolute;
      inset:0;
      display:grid;
      place-items:center;
      font-weight:800;
      font-size:clamp(20px,3vw,28px);
      color:#fff;
      opacity:0;
      transform:scale(.85);
      transition:all .5s cubic-bezier(.68,-.55,.265,1.55);
      pointer-events:none;
      z-index:1;
      letter-spacing:.05em;
      text-transform:uppercase;
    }
    
    .card:hover .card__label{
      opacity:1;
      transform:scale(1);
    }

    /* Clients - Full Responsive */
    .clients{
      background:#fff;
      color:#111;
      padding:clamp(40px,7vh,60px) 0;
      overflow:hidden;
    }
    
    .clients h2{
      text-align:center;
      margin:0 0 clamp(16px,3vh,24px);
      font-size:clamp(20px,3.5vw,34px);
      letter-spacing:.5px;
    }
    
    .marquee{
      display:flex;
      gap:clamp(40px,8vw,60px);
      animation:scroll 30s linear infinite;
      padding:10px 0;
      will-change:transform;
    }
    
    .marquee:hover{animation-play-state:paused}
    
    .marquee img{
      max-height:clamp(90px,14vw,140px);
      opacity:1;
      transition:.3s cubic-bezier(.4,0,.2,1);
    }
    
    .marquee img:hover{
      opacity:.8;
      transform:scale(1.05);
    }
    
    @keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

    /* Footer - Full Responsive */
    .footer{
      background:linear-gradient(180deg, var(--red) 0%, var(--red-600) 100%);
      color:#fff;
    }
    
    .footer__inner{
      max-width:var(--max);
      margin:auto;
      padding:clamp(32px,5vh,48px) clamp(16px,3vw,24px);
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
      gap:clamp(16px,3vw,28px);
    }
    
    .footer__logo{
      height:clamp(36px,5vw,44px);
      width:auto;
      object-fit:contain;
      margin-bottom:10px;
    }
    
    .footer h4{
      margin:0 0 10px;
      font-size:clamp(13px,1.5vw,14px);
      font-weight:700;
    }
    
    .footer p,.footer a{
      font-size:clamp(12px,1.4vw,14px);
      opacity:.95;
      line-height:1.6;
    }
    
    .footer a:hover{
      opacity:1;
      text-decoration:underline;
    }
    
    .footer__bottom{
      max-width:var(--max);
      margin:0 auto;
      padding:clamp(12px,2vh,16px) clamp(16px,3vw,24px) clamp(20px,3vh,32px);
      border-top:1px solid rgba(255,255,255,.3);
      display:flex;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      font-size:clamp(11px,1.3vw,13px);
    }

    /* ==========================================
       RESPONSIVE - FULL MOBILE OPTIMIZATION
       ========================================== */
    @media (max-width:1200px){
      .nav{gap:6px}
      .nav a{padding:10px 14px;font-size:14px}
    }

    @media (max-width:1060px){
      .band{grid-template-columns:2fr 1fr}
      .band__logo:last-child{display:none}
      .band__left{min-height:clamp(240px,32vw,300px)}
    }
    
    /* MOBILE COMPLET - Tablette et smartphone */
    @media (max-width:720px){
      .bar__inner{padding:12px 18px}
      .nav{display:none !important}
      .burger{display:flex}
      .btn-desktop{display:none !important}
      
      /* Titre Hero Mobile adapté */
      .hero h1{
        font-size:clamp(24px,7vw,32px) !important;
        line-height:1.15 !important;
      }
      
      .hero p{
        font-size:15px !important;
      }
      
      /* Cacher les stats sur mobile */
      .stats{
        display:none !important;
      }
      
      /* Badge APSAD désactivé fixed sur mobile */
      .hero__cert.fixed{
        position:static !important;
      }
      
      .hero__content{
        padding:100px 16px 50px;
        height:auto;
        min-height:calc(100vh - 80px);
        display:flex;
        flex-direction:column;
        justify-content:center;
      }
      
      .hero__text{
        position:static !important;
        transform:none !important;
        margin-bottom:0;
      }
      
      .hero__cert{
        display:none !important;
      }
      
      /* Partenaires - Full width sur mobile, centrés */
      .band{
        grid-template-columns:1fr !important;
      }
      
      .band__left{
        min-height:200px;
        font-size:clamp(22px,5vw,28px);
      }
      
      .band__logo{
        min-height:160px;
        padding:clamp(32px,6vw,48px);
      }
      
      .band__logo:last-child{
        display:grid !important;
      }
      
      /* Services en colonne sur mobile */
      .services{
        grid-template-columns:1fr !important;
      }
      
      .card{
        min-height:300px;
        aspect-ratio:auto;
      }
      
      .card__label{
        font-size:24px;
        opacity:1;
        transform:scale(1);
      }
      
      /* Clients marquee plus petit */
      .marquee img{
        max-height:70px;
      }
      
      /* Footer adapté mobile */
      .footer__inner{
        grid-template-columns:1fr;
        gap:24px;
      }
    }
    
    /* SMARTPHONE - Optimisation extrême */
    @media (max-width:480px){
      .hero h1{
        font-size:24px !important;
      }
      
      .hero p{
        font-size:14px !important;
      }
      
      .hero .btn{
        font-size:14px !important;
        padding:14px 24px !important;
      }
      
      .band__left{
        font-size:20px;
        padding:24px 16px;
      }
      
      .card{
        min-height:250px;
      }
      
      .card__label{
        font-size:20px;
      }
      
      .marquee img{
        max-height:60px;
      }
    }

     :root{
      --red:#e51019; --red-600:#c40f16; --bg:#0b0b0b; --text:#f7f7f7; --muted:#d6d6d6; --white:#fff;
      --max:1200px; --radius:18px; --shadow:0 20px 60px rgba(0,0,0,.35);
    }
    *{box-sizing:border-box}
    html,body{height:100%;overflow-x:hidden}
    body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:#111;background:#fff}
    img{display:block;max-width:100%;height:auto}
    a{color:inherit;text-decoration:none}
    html{scroll-behavior:smooth}

    /* ---------- Header / Navbar - Liquid Glass Style ---------- */
    .site-header{position:fixed;top:0;left:0;right:0;z-index:60;width:100%}
    .bar{
      background:rgba(15,15,15,.7);
      backdrop-filter:saturate(180%) blur(20px);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      border-bottom:1px solid rgba(255,255,255,.08);
      transition:all .4s cubic-bezier(.4,0,.2,1);
      box-shadow:0 4px 24px rgba(0,0,0,.1);
    }
    .bar.scrolled{
      background:rgba(15,15,15,.85);
      backdrop-filter:saturate(180%) blur(25px);
      -webkit-backdrop-filter:saturate(180%) blur(25px);
      border-bottom:1px solid rgba(255,255,255,.12);
      box-shadow:0 8px 32px rgba(0,0,0,.15);
    }
    .bar__inner{
      max-width:100%;
      margin:0 auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:clamp(12px,2vw,24px);
      padding:clamp(10px,1.5vw,14px) clamp(16px,3vw,32px);
    }
    .brand{display:flex;align-items:center;gap:12px;padding:8px 12px}
    .brand__logo{
      height:clamp(32px,4vw,40px);
      width:auto;
      object-fit:contain;
    }

    .nav{display:flex;align-items:center;gap:clamp(4px,1vw,8px);flex-wrap:wrap}
    .nav a{
      padding:clamp(8px,1vw,10px) clamp(12px,1.5vw,16px);
      border-radius:10px;
      opacity:.95;
      font-weight:600;
      font-size:clamp(13px,1.2vw,15px);
      transition:all .3s cubic-bezier(.4,0,.2,1);
      position:relative;
      color:#fff;
    }
    .nav a::before{
      content:'';
      position:absolute;
      inset:0;
      background:rgba(255,255,255,.1);
      border-radius:10px;
      opacity:0;
      transition:opacity .3s;
    }
    .nav a:hover::before{opacity:1}
    
    /* Burger Animation Stylée */
    .burger{
      display:none;
      width:44px;
      height:44px;
      border-radius:12px;
      background:rgba(255,255,255,.08);
      backdrop-filter:blur(10px);
      border:1px solid rgba(255,255,255,.15);
      align-items:center;
      justify-content:center;
      cursor:pointer;
      transition:all .3s cubic-bezier(.4,0,.2,1);
      position:relative;
    }
    .burger:hover{
      background:rgba(255,255,255,.15);
      transform:scale(1.05);
    }
    .burger:active{transform:scale(.95)}
    
    .burger-lines{width:24px;height:18px;position:relative;transition:transform .3s cubic-bezier(.4,0,.2,1)}
    .burger span{
      display:block;
      width:24px;
      height:2.5px;
      background:#fff;
      border-radius:3px;
      position:absolute;
      left:0;
      transition:all .4s cubic-bezier(.68,-.55,.265,1.55);
    }
    .burger span:nth-child(1){top:0}
    .burger span:nth-child(2){top:50%;transform:translateY(-50%)}
    .burger span:nth-child(3){bottom:0}
    
    .burger.open span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}
    .burger.open span:nth-child(2){opacity:0;transform:translateX(20px)}
    .burger.open span:nth-child(3){bottom:50%;transform:translateY(50%) rotate(-45deg)}

    /* Mobile panel */
    .mobile{
      display:none;
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.5);
      backdrop-filter:blur(12px);
      -webkit-backdrop-filter:blur(12px);
      z-index:50;
      animation:fadeIn .4s cubic-bezier(.4,0,.2,1);
    }
    .mobile.open{display:block}
    .mobile__panel{
      margin:clamp(80px,12vh,100px) auto 0;
      max-width:min(500px,calc(100% - 32px));
      padding:16px;
    }
    .mobile__card{
      background:rgba(15,15,15,.85);
      backdrop-filter:saturate(180%) blur(20px);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      border:1px solid rgba(255,255,255,.1);
      border-radius:20px;
      padding:12px;
      animation:slideDown .5s cubic-bezier(.68,-.55,.265,1.55);
      box-shadow:0 20px 60px rgba(0,0,0,.3);
    }
    .mobile__links a{
      display:block;
      padding:clamp(12px,2vh,16px);
      border-radius:14px;
      transition:all .3s cubic-bezier(.4,0,.2,1);
      font-size:clamp(15px,2vw,16px);
      font-weight:600;
      position:relative;
      overflow:hidden;
      color:#fff;
    }
    .mobile__links a::before{
      content:'';
      position:absolute;
      inset:0;
      background:rgba(255,255,255,.08);
      border-radius:14px;
      transform:translateX(-100%);
      transition:transform .3s;
    }
    .mobile__links a:hover::before{transform:translateX(0)}
    .mobile__links a:active{transform:scale(.98)}
    .mobile__links .btn{margin:16px 0 8px;display:inline-flex;width:100%;justify-content:center}

    @keyframes fadeIn{from{opacity:0}to{opacity:1}}
    @keyframes slideDown{
      from{transform:translateY(-30px) scale(.95);opacity:0}
      to{transform:translateY(0) scale(1);opacity:1}
    }

    /* ---------- Hero Banner ---------- */
    .hero-banner{
      position:relative;
      min-height:clamp(300px,40vh,450px);
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      overflow:hidden;
      margin-top:clamp(60px,10vh,80px);
    }
    .hero-banner__bg{
      position:absolute;
      inset:0;
      background:url('../images/accessoires.jpg') center/cover no-repeat;
    }
    .hero-banner__overlay{
      position:absolute;
      inset:0;
      background:linear-gradient(135deg, rgba(0,0,0,.75) 0%, rgba(229,16,25,.4) 100%);
    }
    .hero-banner__content{
      position:relative;
      z-index:1;
      text-align:center;
      padding:clamp(20px,5vw,40px);
    }
    .hero-banner h1{
      font-size:clamp(32px,6vw,64px);
      font-weight:900;
      margin:0;
      letter-spacing:-.02em;
      text-shadow:0 4px 20px rgba(0,0,0,.3);
    }

    /* ---------- Container ---------- */
    .container{
      max-width:var(--max);
      margin:0 auto;
      padding:clamp(40px,8vh,80px) clamp(16px,4vw,32px);
    }

    /* ---------- Intro Section ---------- */
    .intro-section{
      background:rgba(255,255,255,.95);
      backdrop-filter:saturate(180%) blur(20px);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      border:1px solid rgba(0,0,0,.08);
      border-radius:24px;
      padding:clamp(32px,5vw,48px) clamp(24px,4vw,40px);
      margin-bottom:clamp(40px,6vh,60px);
      box-shadow:0 8px 32px rgba(0,0,0,.06);
    }
    .intro-section p{
      font-size:clamp(15px,1.6vw,18px);
      color:#555;
      line-height:1.7;
      margin:0;
      text-align:center;
    }

    /* ---------- Tabs Navigation ---------- */
    .tabs-nav{
      display:flex;
      gap:clamp(12px,2vw,16px);
      margin-bottom:clamp(32px,5vh,48px);
      flex-wrap:wrap;
      justify-content:center;
    }
    .tab-button{
      padding:clamp(14px,2vh,18px) clamp(24px,3vw,36px);
      border:2px solid rgba(0,0,0,.1);
      background:rgba(255,255,255,.95);
      border-radius:999px;
      font-weight:700;
      font-size:clamp(14px,1.5vw,16px);
      color:#333;
      cursor:pointer;
      transition:all .3s cubic-bezier(.4,0,.2,1);
      box-shadow:0 4px 16px rgba(0,0,0,.06);
    }
    .tab-button:hover{
      transform:translateY(-2px);
      box-shadow:0 8px 24px rgba(0,0,0,.1);
      border-color:var(--red);
      color:var(--red);
    }
    .tab-button.active{
      background:linear-gradient(135deg, var(--red) 0%, var(--red-600) 100%);
      color:#fff;
      border-color:var(--red);
      box-shadow:0 8px 24px rgba(229,16,25,.3);
    }

    /* ---------- Tab Content ---------- */
    .tab-content{
      display:none;
    }
    .tab-content.active{
      display:block;
      animation:fadeInUp .5s cubic-bezier(.4,0,.2,1);
    }
    @keyframes fadeInUp{
      from{opacity:0;transform:translateY(20px)}
      to{opacity:1;transform:translateY(0)}
    }

    /* ---------- Info Cards Grid ---------- */
    .info-cards{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
      gap:clamp(24px,3vw,32px);
    }

    /* ---------- Info Card ---------- */
    .info-card{
      position:relative;
      background:rgba(255,255,255,.95);
      backdrop-filter:saturate(180%) blur(20px);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      border:1px solid rgba(0,0,0,.08);
      border-radius:24px;
      padding:clamp(28px,4vw,36px);
      box-shadow:0 8px 32px rgba(0,0,0,.06);
      transition:all .4s cubic-bezier(.4,0,.2,1);
      overflow:hidden;
    }
    .info-card:hover{
      transform:translateY(-8px);
      box-shadow:0 16px 48px rgba(0,0,0,.12);
      border-color:rgba(229,16,25,.3);
    }
    
    .info-card::before{
      content:'';
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:4px;
      background:linear-gradient(90deg, var(--red) 0%, var(--red-600) 100%);
      transform:scaleX(0);
      transform-origin:left;
      transition:transform .4s cubic-bezier(.4,0,.2,1);
    }
    .info-card:hover::before{
      transform:scaleX(1);
    }
    
    .info-card h3{
      font-size:clamp(18px,2.2vw,22px);
      font-weight:800;
      color:#111;
      margin:0 0 clamp(12px,1.5vh,16px);
      position:relative;
      padding-left:clamp(40px,5vw,48px);
    }
    .info-card h3::before{
      content:'\f058';
      font-family:'Font Awesome 6 Free';
      font-weight:900;
      position:absolute;
      left:0;
      top:50%;
      transform:translateY(-50%);
      font-size:clamp(24px,3vw,28px);
      color:var(--red);
    }
    
    .info-card > p{
      font-size:clamp(14px,1.5vw,16px);
      color:#555;
      line-height:1.7;
      margin:0 0 clamp(16px,2vh,20px);
    }
    
    .feature-list{
      list-style:none;
      margin:0;
      padding:0;
    }
    .feature-list li{
      position:relative;
      padding:clamp(8px,1.2vh,10px) 0 clamp(8px,1.2vh,10px) clamp(28px,3.5vw,32px);
      font-size:clamp(13px,1.4vw,15px);
      color:#666;
      line-height:1.6;
      border-bottom:1px solid rgba(0,0,0,.05);
    }
    .feature-list li:last-child{
      border-bottom:none;
    }
    .feature-list li::before{
      content:'\f00c';
      font-family:'Font Awesome 6 Free';
      font-weight:900;
      position:absolute;
      left:0;
      top:clamp(8px,1.2vh,10px);
      color:var(--red);
      font-size:clamp(12px,1.3vw,14px);
    }

    /* ---------- Button Styles ---------- */
    .btn{
      display:inline-flex;
      align-items:center;
      gap:10px;
      background:var(--red);
      padding:clamp(10px,1.5vh,14px) clamp(16px,2.5vw,24px);
      border-radius:999px;
      font-weight:800;
      color:#fff;
      box-shadow:0 8px 24px rgba(229,16,25,.35);
      transition:all .3s cubic-bezier(.4,0,.2,1);
      font-size:clamp(13px,1.5vw,15px);
      border:none;
      cursor:pointer;
    }
    .btn:hover{
      background:var(--red-600);
      transform:translateY(-2px);
      box-shadow:0 12px 32px rgba(229,16,25,.5);
    }
    .btn:active{transform:translateY(0)}
    
    .btn-desktop{display:inline-flex}

    /* ---------- Footer ---------- */
    .footer{
      background:linear-gradient(180deg, var(--red) 0%, var(--red-600) 100%);
      color:#fff;
    }
    .footer__inner{
      max-width:var(--max);
      margin:auto;
      padding:clamp(32px,5vh,48px) clamp(16px,3vw,24px);
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
      gap:clamp(16px,3vw,28px);
    }
    .footer__logo{
      height:clamp(36px,5vw,44px);
      width:auto;
      object-fit:contain;
      margin-bottom:10px;
    }
    .footer h4{
      margin:0 0 10px;
      font-size:clamp(13px,1.5vw,14px);
      font-weight:700;
    }
    .footer p,.footer a{
      font-size:clamp(12px,1.4vw,14px);
      opacity:.95;
      line-height:1.6;
    }
    .footer__bottom{
      max-width:var(--max);
      margin:0 auto;
      padding:clamp(12px,2vh,16px) clamp(16px,3vw,24px) clamp(20px,3vh,32px);
      border-top:1px solid rgba(255,255,255,.3);
      display:flex;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      font-size:clamp(11px,1.3vw,13px);
    }

    /* ---------- Responsive ---------- */
    @media (max-width:720px){
      .bar__inner{padding:10px 16px}
      .nav{display:none !important}
      .burger{display:flex}
      .btn-desktop{display:none !important}
      .tabs-nav{justify-content:stretch}
      .tab-button{flex:1;text-align:center;font-size:13px;padding:12px 16px}
      .info-cards{grid-template-columns:1fr}
    }

    :root{
      --red:#e51019; --red-600:#c40f16; --bg:#0b0b0b; --text:#f7f7f7; --muted:#d6d6d6; --white:#fff;
      --max:1200px; --radius:18px; --shadow:0 20px 60px rgba(0,0,0,.35);
    }
    *{box-sizing:border-box}
    html,body{height:100%;overflow-x:hidden}
    body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:#111;background:#fff}
    img{display:block;max-width:100%;height:auto}
    a{color:inherit;text-decoration:none}
    html{scroll-behavior:smooth}

    /* ---------- Header / Navbar - Liquid Glass Style ---------- */
    .site-header{position:fixed;top:0;left:0;right:0;z-index:60;width:100%}
    .bar{
      background:rgba(15,15,15,.7);
      backdrop-filter:saturate(180%) blur(20px);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      border-bottom:1px solid rgba(255,255,255,.08);
      transition:all .4s cubic-bezier(.4,0,.2,1);
      box-shadow:0 4px 24px rgba(0,0,0,.1);
    }
    .bar.scrolled{
      background:rgba(15,15,15,.85);
      backdrop-filter:saturate(180%) blur(25px);
      -webkit-backdrop-filter:saturate(180%) blur(25px);
      border-bottom:1px solid rgba(255,255,255,.12);
      box-shadow:0 8px 32px rgba(0,0,0,.15);
    }
    .bar__inner{
      max-width:100%;
      margin:0 auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:clamp(12px,2vw,24px);
      padding:clamp(10px,1.5vw,14px) clamp(16px,3vw,32px);
    }
    .brand{display:flex;align-items:center;gap:12px;padding:8px 12px}
    .brand__logo{
      height:clamp(32px,4vw,40px);
      width:auto;
      object-fit:contain;
    }

    .nav{display:flex;align-items:center;gap:clamp(4px,1vw,8px);flex-wrap:wrap}
    .nav a{
      padding:clamp(8px,1vw,10px) clamp(12px,1.5vw,16px);
      border-radius:10px;
      opacity:.95;
      font-weight:600;
      font-size:clamp(13px,1.2vw,15px);
      transition:all .3s cubic-bezier(.4,0,.2,1);
      position:relative;
      color:#fff;
    }
    .nav a::before{
      content:'';
      position:absolute;
      inset:0;
      background:rgba(255,255,255,.1);
      border-radius:10px;
      opacity:0;
      transition:opacity .3s;
    }
    .nav a:hover::before{opacity:1}
    
    /* Burger Animation Stylée */
    .burger{
      display:none;
      width:44px;
      height:44px;
      border-radius:12px;
      background:rgba(255,255,255,.08);
      backdrop-filter:blur(10px);
      border:1px solid rgba(255,255,255,.15);
      align-items:center;
      justify-content:center;
      cursor:pointer;
      transition:all .3s cubic-bezier(.4,0,.2,1);
      position:relative;
    }
    .burger:hover{
      background:rgba(255,255,255,.15);
      transform:scale(1.05);
    }
    .burger:active{transform:scale(.95)}
    
    .burger-lines{width:24px;height:18px;position:relative;transition:transform .3s cubic-bezier(.4,0,.2,1)}
    .burger span{
      display:block;
      width:24px;
      height:2.5px;
      background:#fff;
      border-radius:3px;
      position:absolute;
      left:0;
      transition:all .4s cubic-bezier(.68,-.55,.265,1.55);
    }
    .burger span:nth-child(1){top:0}
    .burger span:nth-child(2){top:50%;transform:translateY(-50%)}
    .burger span:nth-child(3){bottom:0}
    
    .burger.open span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}
    .burger.open span:nth-child(2){opacity:0;transform:translateX(20px)}
    .burger.open span:nth-child(3){bottom:50%;transform:translateY(50%) rotate(-45deg)}

    /* Mobile panel */
    .mobile{
      display:none;
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.5);
      backdrop-filter:blur(12px);
      -webkit-backdrop-filter:blur(12px);
      z-index:50;
      animation:fadeIn .4s cubic-bezier(.4,0,.2,1);
    }
    .mobile.open{display:block}
    .mobile__panel{
      margin:clamp(80px,12vh,100px) auto 0;
      max-width:min(500px,calc(100% - 32px));
      padding:16px;
    }
    .mobile__card{
      background:rgba(15,15,15,.85);
      backdrop-filter:saturate(180%) blur(20px);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      border:1px solid rgba(255,255,255,.1);
      border-radius:20px;
      padding:12px;
      animation:slideDown .5s cubic-bezier(.68,-.55,.265,1.55);
      box-shadow:0 20px 60px rgba(0,0,0,.3);
    }
    .mobile__links a{
      display:block;
      padding:clamp(12px,2vh,16px);
      border-radius:14px;
      transition:all .3s cubic-bezier(.4,0,.2,1);
      font-size:clamp(15px,2vw,16px);
      font-weight:600;
      position:relative;
      overflow:hidden;
      color:#fff;
    }
    .mobile__links a::before{
      content:'';
      position:absolute;
      inset:0;
      background:rgba(255,255,255,.08);
      border-radius:14px;
      transform:translateX(-100%);
      transition:transform .3s;
    }
    .mobile__links a:hover::before{transform:translateX(0)}
    .mobile__links a:active{transform:scale(.98)}
    .mobile__links .btn{margin:16px 0 8px;display:inline-flex;width:100%;justify-content:center}

    @keyframes fadeIn{from{opacity:0}to{opacity:1}}
    @keyframes slideDown{
      from{transform:translateY(-30px) scale(.95);opacity:0}
      to{transform:translateY(0) scale(1);opacity:1}
    }

    /* ---------- Hero Banner ---------- */
    .hero-banner{
      position:relative;
      min-height:clamp(300px,40vh,450px);
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      overflow:hidden;
      margin-top:clamp(60px,10vh,80px);
    }
    .hero-banner__bg{
      position:absolute;
      inset:0;
      background:url('../images/desenfumage.jpg') center/cover no-repeat;
    }
    .hero-banner__overlay{
      position:absolute;
      inset:0;
      background:linear-gradient(135deg, rgba(0,0,0,.75) 0%, rgba(229,16,25,.4) 100%);
    }
    .hero-banner__content{
      position:relative;
      z-index:1;
      text-align:center;
      padding:clamp(20px,5vw,40px);
    }
    .hero-banner h1{
      font-size:clamp(32px,6vw,64px);
      font-weight:900;
      margin:0;
      letter-spacing:-.02em;
      text-shadow:0 4px 20px rgba(0,0,0,.3);
    }

    /* ---------- Container ---------- */
    .container{
      max-width:var(--max);
      margin:0 auto;
      padding:clamp(40px,8vh,80px) clamp(16px,4vw,32px);
    }

    /* ---------- Intro Section ---------- */
    .intro-section{
      background:rgba(255,255,255,.95);
      backdrop-filter:saturate(180%) blur(20px);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      border:1px solid rgba(0,0,0,.08);
      border-radius:24px;
      padding:clamp(32px,5vw,48px) clamp(24px,4vw,40px);
      margin-bottom:clamp(40px,6vh,60px);
      box-shadow:0 8px 32px rgba(0,0,0,.06);
    }
    .intro-section p{
      font-size:clamp(15px,1.6vw,18px);
      color:#555;
      line-height:1.8;
      margin:0 0 clamp(16px,2vh,20px);
    }
    .intro-section p:last-child{
      margin-bottom:0;
    }

    /* ---------- Tabs Navigation ---------- */
    .tabs-nav{
      display:flex;
      gap:clamp(12px,2vw,16px);
      margin-bottom:clamp(32px,5vh,48px);
      flex-wrap:wrap;
      justify-content:center;
    }
    .tab-button{
      padding:clamp(14px,2vh,18px) clamp(24px,3vw,36px);
      border:2px solid rgba(0,0,0,.1);
      background:rgba(255,255,255,.95);
      border-radius:999px;
      font-weight:700;
      font-size:clamp(14px,1.5vw,16px);
      color:#333;
      cursor:pointer;
      transition:all .3s cubic-bezier(.4,0,.2,1);
      box-shadow:0 4px 16px rgba(0,0,0,.06);
    }
    .tab-button:hover{
      transform:translateY(-2px);
      box-shadow:0 8px 24px rgba(0,0,0,.1);
      border-color:var(--red);
      color:var(--red);
    }
    .tab-button.active{
      background:linear-gradient(135deg, var(--red) 0%, var(--red-600) 100%);
      color:#fff;
      border-color:var(--red);
      box-shadow:0 8px 24px rgba(229,16,25,.3);
    }

    /* ---------- Tab Content ---------- */
    .tab-content{
      display:none;
    }
    .tab-content.active{
      display:block;
      animation:fadeInUp .5s cubic-bezier(.4,0,.2,1);
    }
    @keyframes fadeInUp{
      from{opacity:0;transform:translateY(20px)}
      to{opacity:1;transform:translateY(0)}
    }

    /* ---------- Info Cards Grid ---------- */
    .info-cards{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
      gap:clamp(24px,3vw,32px);
    }

    /* ---------- Info Card ---------- */
    .info-card{
      position:relative;
      background:rgba(255,255,255,.95);
      backdrop-filter:saturate(180%) blur(20px);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      border:1px solid rgba(0,0,0,.08);
      border-radius:24px;
      padding:clamp(28px,4vw,36px);
      box-shadow:0 8px 32px rgba(0,0,0,.06);
      transition:all .4s cubic-bezier(.4,0,.2,1);
      overflow:hidden;
    }
    .info-card:hover{
      transform:translateY(-8px);
      box-shadow:0 16px 48px rgba(0,0,0,.12);
      border-color:rgba(229,16,25,.3);
    }
    
    .info-card::before{
      content:'';
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:4px;
      background:linear-gradient(90deg, var(--red) 0%, var(--red-600) 100%);
      transform:scaleX(0);
      transform-origin:left;
      transition:transform .4s cubic-bezier(.4,0,.2,1);
    }
    .info-card:hover::before{
      transform:scaleX(1);
    }
    
    .info-card h3{
      font-size:clamp(18px,2.2vw,22px);
      font-weight:800;
      color:#111;
      margin:0 0 clamp(12px,1.5vh,16px);
      position:relative;
      padding-left:clamp(40px,5vw,48px);
    }
    .info-card h3::before{
      content:'\f1ad';
      font-family:'Font Awesome 6 Free';
      font-weight:900;
      position:absolute;
      left:0;
      top:50%;
      transform:translateY(-50%);
      font-size:clamp(24px,3vw,28px);
      color:var(--red);
    }
    
    .info-card > p{
      font-size:clamp(14px,1.5vw,16px);
      color:#555;
      line-height:1.7;
      margin:0 0 clamp(16px,2vh,20px);
    }
    
    .feature-list{
      list-style:none;
      margin:0;
      padding:0;
    }
    .feature-list li{
      position:relative;
      padding:clamp(8px,1.2vh,10px) 0 clamp(8px,1.2vh,10px) clamp(28px,3.5vw,32px);
      font-size:clamp(13px,1.4vw,15px);
      color:#666;
      line-height:1.6;
      border-bottom:1px solid rgba(0,0,0,.05);
    }
    .feature-list li:last-child{
      border-bottom:none;
    }
    .feature-list li::before{
      content:'\f00c';
      font-family:'Font Awesome 6 Free';
      font-weight:900;
      position:absolute;
      left:0;
      top:clamp(8px,1.2vh,10px);
      color:var(--red);
      font-size:clamp(12px,1.3vw,14px);
    }

    /* Icon variation pour les différents types de cartes */
    .info-card.natural h3::before{content:'\f72e'}
    .info-card.tech h3::before{content:'\f085'}
    .info-card.check h3::before{content:'\f560'}
    .info-card.service h3::before{content:'\f0ad'}

    /* ---------- Button Styles ---------- */
    .btn{
      display:inline-flex;
      align-items:center;
      gap:10px;
      background:var(--red);
      padding:clamp(10px,1.5vh,14px) clamp(16px,2.5vw,24px);
      border-radius:999px;
      font-weight:800;
      color:#fff;
      box-shadow:0 8px 24px rgba(229,16,25,.35);
      transition:all .3s cubic-bezier(.4,0,.2,1);
      font-size:clamp(13px,1.5vw,15px);
      border:none;
      cursor:pointer;
    }
    .btn:hover{
      background:var(--red-600);
      transform:translateY(-2px);
      box-shadow:0 12px 32px rgba(229,16,25,.5);
    }
    .btn:active{transform:translateY(0)}
    
    .btn-desktop{display:inline-flex}

    /* ---------- Footer ---------- */
    .footer{
      background:linear-gradient(180deg, var(--red) 0%, var(--red-600) 100%);
      color:#fff;
    }
    .footer__inner{
      max-width:var(--max);
      margin:auto;
      padding:clamp(32px,5vh,48px) clamp(16px,3vw,24px);
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
      gap:clamp(16px,3vw,28px);
    }
    .footer__logo{
      height:clamp(36px,5vw,44px);
      width:auto;
      object-fit:contain;
      margin-bottom:10px;
    }
    .footer h4{
      margin:0 0 10px;
      font-size:clamp(13px,1.5vw,14px);
      font-weight:700;
    }
    .footer p,.footer a{
      font-size:clamp(12px,1.4vw,14px);
      opacity:.95;
      line-height:1.6;
    }
    .footer__bottom{
      max-width:var(--max);
      margin:0 auto;
      padding:clamp(12px,2vh,16px) clamp(16px,3vw,24px) clamp(20px,3vh,32px);
      border-top:1px solid rgba(255,255,255,.3);
      display:flex;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      font-size:clamp(11px,1.3vw,13px);
    }

    /* ---------- Responsive ---------- */
    @media (max-width:720px){
      .bar__inner{padding:10px 16px}
      .nav{display:none !important}
      .burger{display:flex}
      .btn-desktop{display:none !important}
      .tabs-nav{justify-content:stretch}
      .tab-button{flex:1;text-align:center;font-size:13px;padding:12px 16px}
      .info-cards{grid-template-columns:1fr}
    }

     :root{
      --red:#e51019; --red-600:#c40f16; --bg:#0b0b0b; --text:#f7f7f7; --muted:#d6d6d6; --white:#fff;
      --max:1200px; --radius:18px; --shadow:0 20px 60px rgba(0,0,0,.35);
    }
    *{box-sizing:border-box}
    html,body{height:100%;overflow-x:hidden}
    body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:#111;background:#fff}
    img{display:block;max-width:100%;height:auto}
    a{color:inherit;text-decoration:none}
    html{scroll-behavior:smooth}

    /* ---------- Header / Navbar - Liquid Glass Style ---------- */
    .site-header{position:fixed;top:0;left:0;right:0;z-index:60;width:100%}
    .bar{
      background:rgba(15,15,15,.7);
      backdrop-filter:saturate(180%) blur(20px);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      border-bottom:1px solid rgba(255,255,255,.08);
      transition:all .4s cubic-bezier(.4,0,.2,1);
      box-shadow:0 4px 24px rgba(0,0,0,.1);
    }
    .bar.scrolled{
      background:rgba(15,15,15,.85);
      backdrop-filter:saturate(180%) blur(25px);
      -webkit-backdrop-filter:saturate(180%) blur(25px);
      border-bottom:1px solid rgba(255,255,255,.12);
      box-shadow:0 8px 32px rgba(0,0,0,.15);
    }
    .bar__inner{
      max-width:100%;
      margin:0 auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:clamp(12px,2vw,24px);
      padding:clamp(10px,1.5vw,14px) clamp(16px,3vw,32px);
    }
    .brand{display:flex;align-items:center;gap:12px;padding:8px 12px}
    .brand__logo{
      height:clamp(32px,4vw,40px);
      width:auto;
      object-fit:contain;
    }

    .nav{display:flex;align-items:center;gap:clamp(4px,1vw,8px);flex-wrap:wrap}
    .nav a{
      padding:clamp(8px,1vw,10px) clamp(12px,1.5vw,16px);
      border-radius:10px;
      opacity:.95;
      font-weight:600;
      font-size:clamp(13px,1.2vw,15px);
      transition:all .3s cubic-bezier(.4,0,.2,1);
      position:relative;
      color:#fff;
    }
    .nav a::before{
      content:'';
      position:absolute;
      inset:0;
      background:rgba(255,255,255,.1);
      border-radius:10px;
      opacity:0;
      transition:opacity .3s;
    }
    .nav a:hover::before{opacity:1}
    
    /* Burger Animation Stylée */
    .burger{
      display:none;
      width:44px;
      height:44px;
      border-radius:12px;
      background:rgba(255,255,255,.08);
      backdrop-filter:blur(10px);
      border:1px solid rgba(255,255,255,.15);
      align-items:center;
      justify-content:center;
      cursor:pointer;
      transition:all .3s cubic-bezier(.4,0,.2,1);
      position:relative;
    }
    .burger:hover{
      background:rgba(255,255,255,.15);
      transform:scale(1.05);
    }
    .burger:active{transform:scale(.95)}
    
    .burger-lines{width:24px;height:18px;position:relative;transition:transform .3s cubic-bezier(.4,0,.2,1)}
    .burger span{
      display:block;
      width:24px;
      height:2.5px;
      background:#fff;
      border-radius:3px;
      position:absolute;
      left:0;
      transition:all .4s cubic-bezier(.68,-.55,.265,1.55);
    }
    .burger span:nth-child(1){top:0}
    .burger span:nth-child(2){top:50%;transform:translateY(-50%)}
    .burger span:nth-child(3){bottom:0}
    
    .burger.open span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}
    .burger.open span:nth-child(2){opacity:0;transform:translateX(20px)}
    .burger.open span:nth-child(3){bottom:50%;transform:translateY(50%) rotate(-45deg)}

    /* Mobile panel */
    .mobile{
      display:none;
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.5);
      backdrop-filter:blur(12px);
      -webkit-backdrop-filter:blur(12px);
      z-index:50;
      animation:fadeIn .4s cubic-bezier(.4,0,.2,1);
    }
    .mobile.open{display:block}
    .mobile__panel{
      margin:clamp(80px,12vh,100px) auto 0;
      max-width:min(500px,calc(100% - 32px));
      padding:16px;
    }
    .mobile__card{
      background:rgba(15,15,15,.85);
      backdrop-filter:saturate(180%) blur(20px);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      border:1px solid rgba(255,255,255,.1);
      border-radius:20px;
      padding:12px;
      animation:slideDown .5s cubic-bezier(.68,-.55,.265,1.55);
      box-shadow:0 20px 60px rgba(0,0,0,.3);
    }
    .mobile__links a{
      display:block;
      padding:clamp(12px,2vh,16px);
      border-radius:14px;
      transition:all .3s cubic-bezier(.4,0,.2,1);
      font-size:clamp(15px,2vw,16px);
      font-weight:600;
      position:relative;
      overflow:hidden;
      color:#fff;
    }
    .mobile__links a::before{
      content:'';
      position:absolute;
      inset:0;
      background:rgba(255,255,255,.08);
      border-radius:14px;
      transform:translateX(-100%);
      transition:transform .3s;
    }
    .mobile__links a:hover::before{transform:translateX(0)}
    .mobile__links a:active{transform:scale(.98)}
    .mobile__links .btn{margin:16px 0 8px;display:inline-flex;width:100%;justify-content:center}

    @keyframes fadeIn{from{opacity:0}to{opacity:1}}
    @keyframes slideDown{
      from{transform:translateY(-30px) scale(.95);opacity:0}
      to{transform:translateY(0) scale(1);opacity:1}
    }

    /* ---------- Hero Banner ---------- */
    .hero-banner{
      position:relative;
      min-height:clamp(300px,40vh,450px);
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      overflow:hidden;
      margin-top:clamp(60px,10vh,80px);
    }
    .hero-banner__bg{
      position:absolute;
      inset:0;
      background:url('../images/extincteurs.jpg') center/cover no-repeat;
    }
    .hero-banner__overlay{
      position:absolute;
      inset:0;
      background:linear-gradient(135deg, rgba(0,0,0,.75) 0%, rgba(229,16,25,.4) 100%);
    }
    .hero-banner__content{
      position:relative;
      z-index:1;
      text-align:center;
      padding:clamp(20px,5vw,40px);
    }
    .hero-banner h1{
      font-size:clamp(32px,6vw,64px);
      font-weight:900;
      margin:0;
      letter-spacing:-.02em;
      text-shadow:0 4px 20px rgba(0,0,0,.3);
    }

    /* ---------- Container ---------- */
    .container{
      max-width:var(--max);
      margin:0 auto;
      padding:clamp(40px,8vh,80px) clamp(16px,4vw,32px);
    }

    /* ---------- Intro Section with Cert ---------- */
    .intro-section{
      background:rgba(255,255,255,.95);
      backdrop-filter:saturate(180%) blur(20px);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      border:1px solid rgba(0,0,0,.08);
      border-radius:24px;
      padding:clamp(32px,5vw,48px) clamp(24px,4vw,40px);
      margin-bottom:clamp(40px,6vh,60px);
      box-shadow:0 8px 32px rgba(0,0,0,.06);
      display:flex;
      align-items:center;
      gap:clamp(24px,4vw,40px);
      flex-wrap:wrap;
    }
    .intro-text{
      flex:1;
      min-width:280px;
    }
    .intro-text p{
      font-size:clamp(15px,1.6vw,18px);
      color:#555;
      line-height:1.8;
      margin:0;
    }
    .cert-container{
      display:flex;
      align-items:center;
      justify-content:center;
      padding:clamp(20px,3vw,28px);
      background:rgba(229,16,25,.03);
      border-radius:16px;
      border:2px solid rgba(229,16,25,.1);
    }
    .cert-logo{
      max-width:clamp(120px,20vw,180px);
      height:auto;
      object-fit:contain;
    }

    /* ---------- Tabs Navigation ---------- */
    .tabs-nav{
      display:flex;
      gap:clamp(12px,2vw,16px);
      margin-bottom:clamp(32px,5vh,48px);
      flex-wrap:wrap;
      justify-content:center;
    }
    .tab-button{
      padding:clamp(14px,2vh,18px) clamp(24px,3vw,36px);
      border:2px solid rgba(0,0,0,.1);
      background:rgba(255,255,255,.95);
      border-radius:999px;
      font-weight:700;
      font-size:clamp(14px,1.5vw,16px);
      color:#333;
      cursor:pointer;
      transition:all .3s cubic-bezier(.4,0,.2,1);
      box-shadow:0 4px 16px rgba(0,0,0,.06);
    }
    .tab-button:hover{
      transform:translateY(-2px);
      box-shadow:0 8px 24px rgba(0,0,0,.1);
      border-color:var(--red);
      color:var(--red);
    }
    .tab-button.active{
      background:linear-gradient(135deg, var(--red) 0%, var(--red-600) 100%);
      color:#fff;
      border-color:var(--red);
      box-shadow:0 8px 24px rgba(229,16,25,.3);
    }

    /* ---------- Tab Content ---------- */
    .tab-content{
      display:none;
    }
    .tab-content.active{
      display:block;
      animation:fadeInUp .5s cubic-bezier(.4,0,.2,1);
    }
    @keyframes fadeInUp{
      from{opacity:0;transform:translateY(20px)}
      to{opacity:1;transform:translateY(0)}
    }

    /* ---------- Info Cards Grid ---------- */
    .info-cards{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
      gap:clamp(24px,3vw,32px);
    }

    /* ---------- Info Card ---------- */
    .info-card{
      position:relative;
      background:rgba(255,255,255,.95);
      backdrop-filter:saturate(180%) blur(20px);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      border:1px solid rgba(0,0,0,.08);
      border-radius:24px;
      padding:clamp(28px,4vw,36px);
      box-shadow:0 8px 32px rgba(0,0,0,.06);
      transition:all .4s cubic-bezier(.4,0,.2,1);
      overflow:hidden;
    }
    .info-card:hover{
      transform:translateY(-8px);
      box-shadow:0 16px 48px rgba(0,0,0,.12);
      border-color:rgba(229,16,25,.3);
    }
    
    .info-card::before{
      content:'';
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:4px;
      background:linear-gradient(90deg, var(--red) 0%, var(--red-600) 100%);
      transform:scaleX(0);
      transform-origin:left;
      transition:transform .4s cubic-bezier(.4,0,.2,1);
    }
    .info-card:hover::before{
      transform:scaleX(1);
    }
    
    .info-card h3{
      font-size:clamp(18px,2.2vw,22px);
      font-weight:800;
      color:#111;
      margin:0 0 clamp(12px,1.5vh,16px);
      position:relative;
      padding-left:clamp(40px,5vw,48px);
      min-height:clamp(28px,3.5vw,32px);
      display:flex;
      align-items:center;
    }
    .info-card h3::before{
      content:'\f1ad';
      font-family:'Font Awesome 6 Free';
      font-weight:900;
      position:absolute;
      left:0;
      top:50%;
      transform:translateY(-50%);
      font-size:clamp(24px,3vw,28px);
      color:var(--red);
    }
    
    .info-card > p{
      font-size:clamp(14px,1.5vw,16px);
      color:#555;
      line-height:1.7;
      margin:0 0 clamp(16px,2vh,20px);
    }
    
    .feature-list{
      list-style:none;
      margin:0;
      padding:0;
    }
    .feature-list li{
      position:relative;
      padding:clamp(8px,1.2vh,10px) 0 clamp(8px,1.2vh,10px) clamp(28px,3.5vw,32px);
      font-size:clamp(13px,1.4vw,15px);
      color:#666;
      line-height:1.6;
      border-bottom:1px solid rgba(0,0,0,.05);
    }
    .feature-list li:last-child{
      border-bottom:none;
    }
    .feature-list li::before{
      content:'\f00c';
      font-family:'Font Awesome 6 Free';
      font-weight:900;
      position:absolute;
      left:0;
      top:clamp(8px,1.2vh,10px);
      color:var(--red);
      font-size:clamp(12px,1.3vw,14px);
    }

    /* ---------- Button Styles ---------- */
    .btn{
      display:inline-flex;
      align-items:center;
      gap:10px;
      background:var(--red);
      padding:clamp(10px,1.5vh,14px) clamp(16px,2.5vw,24px);
      border-radius:999px;
      font-weight:800;
      color:#fff;
      box-shadow:0 8px 24px rgba(229,16,25,.35);
      transition:all .3s cubic-bezier(.4,0,.2,1);
      font-size:clamp(13px,1.5vw,15px);
      border:none;
      cursor:pointer;
    }
    .btn:hover{
      background:var(--red-600);
      transform:translateY(-2px);
      box-shadow:0 12px 32px rgba(229,16,25,.5);
    }
    .btn:active{transform:translateY(0)}
    
    .btn-desktop{display:inline-flex}

    /* ---------- Footer ---------- */
    .footer{
      background:linear-gradient(180deg, var(--red) 0%, var(--red-600) 100%);
      color:#fff;
    }
    .footer__inner{
      max-width:var(--max);
      margin:auto;
      padding:clamp(32px,5vh,48px) clamp(16px,3vw,24px);
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
      gap:clamp(16px,3vw,28px);
    }
    .footer__logo{
      height:clamp(36px,5vw,44px);
      width:auto;
      object-fit:contain;
      margin-bottom:10px;
    }
    .footer h4{
      margin:0 0 10px;
      font-size:clamp(13px,1.5vw,14px);
      font-weight:700;
    }
    .footer p,.footer a{
      font-size:clamp(12px,1.4vw,14px);
      opacity:.95;
      line-height:1.6;
    }
    .footer__bottom{
      max-width:var(--max);
      margin:0 auto;
      padding:clamp(12px,2vh,16px) clamp(16px,3vw,24px) clamp(20px,3vh,32px);
      border-top:1px solid rgba(255,255,255,.3);
      display:flex;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      font-size:clamp(11px,1.3vw,13px);
    }

    /* ---------- Responsive ---------- */
    @media (max-width:720px){
      .bar__inner{padding:10px 16px}
      .nav{display:none !important}
      .burger{display:flex}
      .btn-desktop{display:none !important}
      .tabs-nav{justify-content:stretch}
      .tab-button{flex:1;text-align:center;font-size:13px;padding:12px 16px}
      .info-cards{grid-template-columns:1fr}
      .intro-section{flex-direction:column;text-align:center}
      .cert-container{width:100%;max-width:220px;margin:0 auto}
    }
       :root{
      --red:#e51019; --red-600:#c40f16; --bg:#0b0b0b; --text:#f7f7f7; --muted:#d6d6d6; --white:#fff;
      --max:1200px; --radius:18px; --shadow:0 20px 60px rgba(0,0,0,.35);
    }
    *{box-sizing:border-box}
    html,body{height:100%;overflow-x:hidden}
    body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:#111;background:#fff}
    img{display:block;max-width:100%;height:auto}
    a{color:inherit;text-decoration:none}
    html{scroll-behavior:smooth}

    /* ---------- Header / Navbar - Liquid Glass Style ---------- */
    .site-header{position:fixed;top:0;left:0;right:0;z-index:60;width:100%}
    .bar{
      background:rgba(15,15,15,.7);
      backdrop-filter:saturate(180%) blur(20px);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      border-bottom:1px solid rgba(255,255,255,.08);
      transition:all .4s cubic-bezier(.4,0,.2,1);
      box-shadow:0 4px 24px rgba(0,0,0,.1);
    }
    .bar.scrolled{
      background:rgba(15,15,15,.85);
      backdrop-filter:saturate(180%) blur(25px);
      -webkit-backdrop-filter:saturate(180%) blur(25px);
      border-bottom:1px solid rgba(255,255,255,.12);
      box-shadow:0 8px 32px rgba(0,0,0,.15);
    }
    .bar__inner{
      max-width:100%;
      margin:0 auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:clamp(12px,2vw,24px);
      padding:clamp(10px,1.5vw,14px) clamp(16px,3vw,32px);
    }
    .brand{display:flex;align-items:center;gap:12px;padding:8px 12px}
    .brand__logo{
      height:clamp(32px,4vw,40px);
      width:auto;
      object-fit:contain;
    }

    .nav{display:flex;align-items:center;gap:clamp(4px,1vw,8px);flex-wrap:wrap}
    .nav a{
      padding:clamp(8px,1vw,10px) clamp(12px,1.5vw,16px);
      border-radius:10px;
      opacity:.95;
      font-weight:600;
      font-size:clamp(13px,1.2vw,15px);
      transition:all .3s cubic-bezier(.4,0,.2,1);
      position:relative;
      color:#fff;
    }
    .nav a::before{
      content:'';
      position:absolute;
      inset:0;
      background:rgba(255,255,255,.1);
      border-radius:10px;
      opacity:0;
      transition:opacity .3s;
    }
    .nav a:hover::before{opacity:1}
    
    /* Burger Animation Stylée */
    .burger{
      display:none;
      width:44px;
      height:44px;
      border-radius:12px;
      background:rgba(255,255,255,.08);
      backdrop-filter:blur(10px);
      border:1px solid rgba(255,255,255,.15);
      align-items:center;
      justify-content:center;
      cursor:pointer;
      transition:all .3s cubic-bezier(.4,0,.2,1);
      position:relative;
    }
    .burger:hover{
      background:rgba(255,255,255,.15);
      transform:scale(1.05);
    }
    .burger:active{transform:scale(.95)}
    
    .burger-lines{width:24px;height:18px;position:relative;transition:transform .3s cubic-bezier(.4,0,.2,1)}
    .burger span{
      display:block;
      width:24px;
      height:2.5px;
      background:#fff;
      border-radius:3px;
      position:absolute;
      left:0;
      transition:all .4s cubic-bezier(.68,-.55,.265,1.55);
    }
    .burger span:nth-child(1){top:0}
    .burger span:nth-child(2){top:50%;transform:translateY(-50%)}
    .burger span:nth-child(3){bottom:0}
    
    .burger.open span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}
    .burger.open span:nth-child(2){opacity:0;transform:translateX(20px)}
    .burger.open span:nth-child(3){bottom:50%;transform:translateY(50%) rotate(-45deg)}

    /* Mobile panel */
    .mobile{
      display:none;
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.5);
      backdrop-filter:blur(12px);
      -webkit-backdrop-filter:blur(12px);
      z-index:50;
      animation:fadeIn .4s cubic-bezier(.4,0,.2,1);
    }
    .mobile.open{display:block}
    .mobile__panel{
      margin:clamp(80px,12vh,100px) auto 0;
      max-width:min(500px,calc(100% - 32px));
      padding:16px;
    }
    .mobile__card{
      background:rgba(15,15,15,.85);
      backdrop-filter:saturate(180%) blur(20px);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      border:1px solid rgba(255,255,255,.1);
      border-radius:20px;
      padding:12px;
      animation:slideDown .5s cubic-bezier(.68,-.55,.265,1.55);
      box-shadow:0 20px 60px rgba(0,0,0,.3);
    }
    .mobile__links a{
      display:block;
      padding:clamp(12px,2vh,16px);
      border-radius:14px;
      transition:all .3s cubic-bezier(.4,0,.2,1);
      font-size:clamp(15px,2vw,16px);
      font-weight:600;
      position:relative;
      overflow:hidden;
      color:#fff;
    }
    .mobile__links a::before{
      content:'';
      position:absolute;
      inset:0;
      background:rgba(255,255,255,.08);
      border-radius:14px;
      transform:translateX(-100%);
      transition:transform .3s;
    }
    .mobile__links a:hover::before{transform:translateX(0)}
    .mobile__links a:active{transform:scale(.98)}
    .mobile__links .btn{margin:16px 0 8px;display:inline-flex;width:100%;justify-content:center}

    @keyframes fadeIn{from{opacity:0}to{opacity:1}}
    @keyframes slideDown{
      from{transform:translateY(-30px) scale(.95);opacity:0}
      to{transform:translateY(0) scale(1);opacity:1}
    }

    /* ---------- Hero Banner ---------- */
    .hero-banner{
      position:relative;
      min-height:clamp(300px,40vh,450px);
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      overflow:hidden;
      margin-top:clamp(60px,10vh,80px);
    }
    .hero-banner__bg{
      position:absolute;
      inset:0;
      background:url('../images/portes-coupe-feu.jpg') center/cover no-repeat;
    }
    .hero-banner__overlay{
      position:absolute;
      inset:0;
      background:linear-gradient(135deg, rgba(0,0,0,.75) 0%, rgba(229,16,25,.4) 100%);
    }
    .hero-banner__content{
      position:relative;
      z-index:1;
      text-align:center;
      padding:clamp(20px,5vw,40px);
    }
    .hero-banner h1{
      font-size:clamp(32px,6vw,64px);
      font-weight:900;
      margin:0;
      letter-spacing:-.02em;
      text-shadow:0 4px 20px rgba(0,0,0,.3);
    }

    /* ---------- Container ---------- */
    .container{
      max-width:var(--max);
      margin:0 auto;
      padding:clamp(40px,8vh,80px) clamp(16px,4vw,32px);
    }

    /* ---------- Intro Section ---------- */
    .intro-section{
      background:rgba(255,255,255,.95);
      backdrop-filter:saturate(180%) blur(20px);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      border:1px solid rgba(0,0,0,.08);
      border-radius:24px;
      padding:clamp(32px,5vw,48px) clamp(24px,4vw,40px);
      margin-bottom:clamp(40px,6vh,60px);
      box-shadow:0 8px 32px rgba(0,0,0,.06);
    }
    .intro-section p{
      font-size:clamp(15px,1.6vw,18px);
      color:#555;
      line-height:1.8;
      margin:0 0 clamp(16px,2vh,20px);
    }
    .intro-section p:last-child{
      margin-bottom:0;
    }

    /* ---------- Tabs Navigation ---------- */
    .tabs-nav{
      display:flex;
      gap:clamp(12px,2vw,16px);
      margin-bottom:clamp(32px,5vh,48px);
      flex-wrap:wrap;
      justify-content:center;
    }
    .tab-button{
      padding:clamp(14px,2vh,18px) clamp(24px,3vw,36px);
      border:2px solid rgba(0,0,0,.1);
      background:rgba(255,255,255,.95);
      border-radius:999px;
      font-weight:700;
      font-size:clamp(14px,1.5vw,16px);
      color:#333;
      cursor:pointer;
      transition:all .3s cubic-bezier(.4,0,.2,1);
      box-shadow:0 4px 16px rgba(0,0,0,.06);
    }
    .tab-button:hover{
      transform:translateY(-2px);
      box-shadow:0 8px 24px rgba(0,0,0,.1);
      border-color:var(--red);
      color:var(--red);
    }
    .tab-button.active{
      background:linear-gradient(135deg, var(--red) 0%, var(--red-600) 100%);
      color:#fff;
      border-color:var(--red);
      box-shadow:0 8px 24px rgba(229,16,25,.3);
    }

    /* ---------- Tab Content ---------- */
    .tab-content{
      display:none;
    }
    .tab-content.active{
      display:block;
      animation:fadeInUp .5s cubic-bezier(.4,0,.2,1);
    }
    @keyframes fadeInUp{
      from{opacity:0;transform:translateY(20px)}
      to{opacity:1;transform:translateY(0)}
    }

    /* ---------- Info Cards Grid ---------- */
    .info-cards{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
      gap:clamp(24px,3vw,32px);
    }

    /* ---------- Info Card ---------- */
    .info-card{
      position:relative;
      background:rgba(255,255,255,.95);
      backdrop-filter:saturate(180%) blur(20px);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      border:1px solid rgba(0,0,0,.08);
      border-radius:24px;
      padding:clamp(28px,4vw,36px);
      box-shadow:0 8px 32px rgba(0,0,0,.06);
      transition:all .4s cubic-bezier(.4,0,.2,1);
      overflow:hidden;
    }
    .info-card:hover{
      transform:translateY(-8px);
      box-shadow:0 16px 48px rgba(0,0,0,.12);
      border-color:rgba(229,16,25,.3);
    }
    
    .info-card::before{
      content:'';
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:4px;
      background:linear-gradient(90deg, var(--red) 0%, var(--red-600) 100%);
      transform:scaleX(0);
      transform-origin:left;
      transition:transform .4s cubic-bezier(.4,0,.2,1);
    }
    .info-card:hover::before{
      transform:scaleX(1);
    }
    
    .info-card h3{
      font-size:clamp(18px,2.2vw,22px);
      font-weight:800;
      color:#111;
      margin:0 0 clamp(12px,1.5vh,16px);
      position:relative;
      padding-left:clamp(40px,5vw,48px);
    }
    .info-card h3::before{
      content:'\f52b';
      font-family:'Font Awesome 6 Free';
      font-weight:900;
      position:absolute;
      left:0;
      top:50%;
      transform:translateY(-50%);
      font-size:clamp(24px,3vw,28px);
      color:var(--red);
    }
    
    .info-card > p{
      font-size:clamp(14px,1.5vw,16px);
      color:#555;
      line-height:1.7;
      margin:0 0 clamp(16px,2vh,20px);
    }
    
    .feature-list{
      list-style:none;
      margin:0;
      padding:0;
    }
    .feature-list li{
      position:relative;
      padding:clamp(8px,1.2vh,10px) 0 clamp(8px,1.2vh,10px) clamp(28px,3.5vw,32px);
      font-size:clamp(13px,1.4vw,15px);
      color:#666;
      line-height:1.6;
      border-bottom:1px solid rgba(0,0,0,.05);
    }
    .feature-list li:last-child{
      border-bottom:none;
    }
    .feature-list li::before{
      content:'\f00c';
      font-family:'Font Awesome 6 Free';
      font-weight:900;
      position:absolute;
      left:0;
      top:clamp(8px,1.2vh,10px);
      color:var(--red);
      font-size:clamp(12px,1.3vw,14px);
    }

    /* Icon variations for different cards */
    .info-card.curtain h3::before{content:'\f107'}
    .info-card.swing h3::before{content:'\f52b'}
    .info-card.sliding h3::before{content:'\f337'}
    .info-card.maintenance h3::before{content:'\f0ad'}
    .info-card.check h3::before{content:'\f560'}

    /* ---------- Button Styles ---------- */
    .btn{
      display:inline-flex;
      align-items:center;
      gap:10px;
      background:var(--red);
      padding:clamp(10px,1.5vh,14px) clamp(16px,2.5vw,24px);
      border-radius:999px;
      font-weight:800;
      color:#fff;
      box-shadow:0 8px 24px rgba(229,16,25,.35);
      transition:all .3s cubic-bezier(.4,0,.2,1);
      font-size:clamp(13px,1.5vw,15px);
      border:none;
      cursor:pointer;
    }
    .btn:hover{
      background:var(--red-600);
      transform:translateY(-2px);
      box-shadow:0 12px 32px rgba(229,16,25,.5);
    }
    .btn:active{transform:translateY(0)}
    
    .btn-desktop{display:inline-flex}

    /* ---------- Footer ---------- */
    .footer{
      background:linear-gradient(180deg, var(--red) 0%, var(--red-600) 100%);
      color:#fff;
    }
    .footer__inner{
      max-width:var(--max);
      margin:auto;
      padding:clamp(32px,5vh,48px) clamp(16px,3vw,24px);
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
      gap:clamp(16px,3vw,28px);
    }
    .footer__logo{
      height:clamp(36px,5vw,44px);
      width:auto;
      object-fit:contain;
      margin-bottom:10px;
    }
    .footer h4{
      margin:0 0 10px;
      font-size:clamp(13px,1.5vw,14px);
      font-weight:700;
    }
    .footer p,.footer a{
      font-size:clamp(12px,1.4vw,14px);
      opacity:.95;
      line-height:1.6;
    }
    .footer__bottom{
      max-width:var(--max);
      margin:0 auto;
      padding:clamp(12px,2vh,16px) clamp(16px,3vw,24px) clamp(20px,3vh,32px);
      border-top:1px solid rgba(255,255,255,.3);
      display:flex;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      font-size:clamp(11px,1.3vw,13px);
    }

    /* ---------- Responsive ---------- */
    @media (max-width:720px){
      .bar__inner{padding:10px 16px}
      .nav{display:none !important}
      .burger{display:flex}
      .btn-desktop{display:none !important}
      .tabs-nav{justify-content:stretch}
      .tab-button{flex:1;text-align:center;font-size:13px;padding:12px 16px}
      .info-cards{grid-template-columns:1fr}
    }
        :root{
      --red:#e51019; --red-600:#c40f16; --bg:#0b0b0b; --text:#f7f7f7; --muted:#d6d6d6; --white:#fff;
      --max:1200px; --radius:18px; --shadow:0 20px 60px rgba(0,0,0,.35);
    }
    *{box-sizing:border-box}
    html,body{height:100%;overflow-x:hidden}
    body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:#111;background:#f5f5f5}
    img{display:block;max-width:100%;height:auto}
    a{color:inherit;text-decoration:none}
    html{scroll-behavior:smooth}

    /* ---------- Header / Navbar - Liquid Glass Style ---------- */
    .site-header{position:fixed;top:0;left:0;right:0;z-index:60;width:100%}
    .bar{
      background:rgba(15,15,15,.7);
      backdrop-filter:saturate(180%) blur(20px);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      border-bottom:1px solid rgba(255,255,255,.08);
      transition:all .4s cubic-bezier(.4,0,.2,1);
      box-shadow:0 4px 24px rgba(0,0,0,.1);
    }
    .bar.scrolled{
      background:rgba(15,15,15,.85);
      backdrop-filter:saturate(180%) blur(25px);
      -webkit-backdrop-filter:saturate(180%) blur(25px);
      border-bottom:1px solid rgba(255,255,255,.12);
      box-shadow:0 8px 32px rgba(0,0,0,.15);
    }
    .bar__inner{
      max-width:100%;
      margin:0 auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:clamp(12px,2vw,24px);
      padding:clamp(10px,1.5vw,14px) clamp(16px,3vw,32px);
    }
    .brand{display:flex;align-items:center;gap:12px;padding:8px 12px}
    .brand__logo{
      height:clamp(32px,4vw,40px);
      width:auto;
      object-fit:contain;
    }

    .nav{display:flex;align-items:center;gap:clamp(4px,1vw,8px);flex-wrap:wrap}
    .nav a{
      padding:clamp(8px,1vw,10px) clamp(12px,1.5vw,16px);
      border-radius:10px;
      opacity:.95;
      font-weight:600;
      font-size:clamp(13px,1.2vw,15px);
      transition:all .3s cubic-bezier(.4,0,.2,1);
      position:relative;
      color:#fff;
    }
    .nav a::before{
      content:'';
      position:absolute;
      inset:0;
      background:rgba(255,255,255,.1);
      border-radius:10px;
      opacity:0;
      transition:opacity .3s;
    }
    .nav a:hover::before{opacity:1}
    
    /* Burger Animation Stylée */
    .burger{
      display:none;
      width:44px;
      height:44px;
      border-radius:12px;
      background:rgba(255,255,255,.08);
      backdrop-filter:blur(10px);
      border:1px solid rgba(255,255,255,.15);
      align-items:center;
      justify-content:center;
      cursor:pointer;
      transition:all .3s cubic-bezier(.4,0,.2,1);
      position:relative;
    }
    .burger:hover{
      background:rgba(255,255,255,.15);
      transform:scale(1.05);
    }
    .burger:active{transform:scale(.95)}
    
    .burger-lines{width:24px;height:18px;position:relative;transition:transform .3s cubic-bezier(.4,0,.2,1)}
    .burger span{
      display:block;
      width:24px;
      height:2.5px;
      background:#fff;
      border-radius:3px;
      position:absolute;
      left:0;
      transition:all .4s cubic-bezier(.68,-.55,.265,1.55);
    }
    .burger span:nth-child(1){top:0}
    .burger span:nth-child(2){top:50%;transform:translateY(-50%)}
    .burger span:nth-child(3){bottom:0}
    
    .burger.open span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}
    .burger.open span:nth-child(2){opacity:0;transform:translateX(20px)}
    .burger.open span:nth-child(3){bottom:50%;transform:translateY(50%) rotate(-45deg)}

    /* Mobile panel */
    .mobile{
      display:none;
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.5);
      backdrop-filter:blur(12px);
      -webkit-backdrop-filter:blur(12px);
      z-index:50;
      animation:fadeIn .4s cubic-bezier(.4,0,.2,1);
    }
    .mobile.open{display:block}
    .mobile__panel{
      margin:clamp(80px,12vh,100px) auto 0;
      max-width:min(500px,calc(100% - 32px));
      padding:16px;
    }
    .mobile__card{
      background:rgba(15,15,15,.85);
      backdrop-filter:saturate(180%) blur(20px);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      border:1px solid rgba(255,255,255,.1);
      border-radius:20px;
      padding:12px;
      animation:slideDown .5s cubic-bezier(.68,-.55,.265,1.55);
      box-shadow:0 20px 60px rgba(0,0,0,.3);
    }
    .mobile__links a{
      display:block;
      padding:clamp(12px,2vh,16px);
      border-radius:14px;
      transition:all .3s cubic-bezier(.4,0,.2,1);
      font-size:clamp(15px,2vw,16px);
      font-weight:600;
      position:relative;
      overflow:hidden;
      color:#fff;
    }
    .mobile__links a::before{
      content:'';
      position:absolute;
      inset:0;
      background:rgba(255,255,255,.08);
      border-radius:14px;
      transform:translateX(-100%);
      transition:transform .3s;
    }
    .mobile__links a:hover::before{transform:translateX(0)}
    .mobile__links a:active{transform:scale(.98)}
    .mobile__links .btn{margin:16px 0 8px;display:inline-flex;width:100%;justify-content:center}

    @keyframes fadeIn{from{opacity:0}to{opacity:1}}
    @keyframes slideDown{
      from{transform:translateY(-30px) scale(.95);opacity:0}
      to{transform:translateY(0) scale(1);opacity:1}
    }

    /* ---------- Contact Section ---------- */
    .contact-container{
      max-width:var(--max);
      margin:0 auto;
      padding:clamp(100px,15vh,140px) clamp(16px,4vw,32px) clamp(60px,10vh,100px);
    }
    .contact-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:clamp(32px,5vw,48px);
      align-items:start;
    }

    /* ---------- Form Section ---------- */
    .form-section{
      background:#fff;
      border-radius:20px;
      padding:clamp(32px,5vw,48px);
      box-shadow:0 4px 20px rgba(0,0,0,.06);
    }
    .form-group{
      margin-bottom:clamp(20px,3vw,24px);
    }
    .form-row{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:clamp(16px,2.5vw,24px);
    }
    label{
      display:block;
      margin-bottom:8px;
      font-weight:500;
      font-size:clamp(14px,1.4vw,15px);
      color:#333;
    }
    label .required{
      color:var(--red);
      margin-left:2px;
    }
    input,textarea{
      width:100%;
      padding:clamp(12px,1.5vw,14px) clamp(14px,2vw,16px);
      border:2px solid #e5e7eb;
      border-radius:12px;
      font-family:inherit;
      font-size:clamp(14px,1.4vw,15px);
      transition:all .3s cubic-bezier(.4,0,.2,1);
      background:#fafafa;
    }
    input:focus,textarea:focus{
      outline:none;
      border-color:var(--red);
      background:#fff;
      box-shadow:0 0 0 4px rgba(229,16,25,.08);
    }
    textarea{
      resize:vertical;
      min-height:clamp(120px,20vh,160px);
      font-family:inherit;
    }
    .submit-btn{
      width:100%;
      padding:clamp(14px,2vh,16px) clamp(24px,4vw,32px);
      background:var(--red);
      color:#fff;
      border:none;
      border-radius:12px;
      font-size:clamp(15px,1.6vw,16px);
      font-weight:700;
      cursor:pointer;
      transition:all .3s cubic-bezier(.4,0,.2,1);
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
    }
    .submit-btn:hover{
      background:var(--red-600);
      transform:translateY(-2px);
      box-shadow:0 12px 32px rgba(229,16,25,.3);
    }
    .submit-btn i{
      font-size:clamp(16px,2vw,18px);
      transition:transform .3s;
    }
    .submit-btn:hover i{
      transform:translateX(4px);
    }

    /* ---------- Info Section ---------- */
    .info-section{
      background:#f9f5f1;
      border-radius:20px;
      padding:clamp(32px,5vw,48px);
      box-shadow:0 4px 20px rgba(0,0,0,.06);
    }
    .info-item{
      display:flex;
      align-items:flex-start;
      gap:clamp(16px,2.5vw,20px);
      margin-bottom:clamp(28px,4vw,36px);
      padding-bottom:clamp(28px,4vw,36px);
      border-bottom:1px solid rgba(0,0,0,.08);
    }
    .info-item:last-child{
      margin-bottom:0;
      padding-bottom:0;
      border-bottom:none;
    }
    .info-icon{
      min-width:clamp(44px,7vw,52px);
      height:clamp(44px,7vw,52px);
      background:var(--red);
      border-radius:12px;
      display:grid;
      place-items:center;
      color:#fff;
      font-size:clamp(18px,2.5vw,22px);
      box-shadow:0 4px 16px rgba(229,16,25,.25);
    }
    .info-content h3{
      margin:0 0 clamp(6px,1vw,8px);
      font-size:clamp(15px,1.8vw,17px);
      font-weight:700;
      color:#111;
    }
    .info-content p{
      margin:0;
      color:#555;
      font-size:clamp(14px,1.4vw,15px);
      line-height:1.6;
    }
    .info-content a{
      color:#555;
      transition:color .2s;
    }
    .info-content a:hover{
      color:var(--red);
    }

    /* ---------- Button Styles ---------- */
    .btn{
      display:inline-flex;
      align-items:center;
      gap:10px;
      background:var(--red);
      padding:clamp(10px,1.5vh,14px) clamp(16px,2.5vw,24px);
      border-radius:999px;
      font-weight:800;
      color:#fff;
      box-shadow:0 8px 24px rgba(229,16,25,.35);
      transition:all .3s cubic-bezier(.4,0,.2,1);
      font-size:clamp(13px,1.5vw,15px);
      border:none;
      cursor:pointer;
    }
    .btn:hover{
      background:var(--red-600);
      transform:translateY(-2px);
      box-shadow:0 12px 32px rgba(229,16,25,.5);
    }
    .btn:active{transform:translateY(0)}
    
    .btn-desktop{display:inline-flex}

    /* ---------- Footer ---------- */
    .footer{
      background:linear-gradient(180deg, var(--red) 0%, var(--red-600) 100%);
      color:#fff;
    }
    .footer__inner{
      max-width:var(--max);
      margin:auto;
      padding:clamp(32px,5vh,48px) clamp(16px,3vw,24px);
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
      gap:clamp(16px,3vw,28px);
    }
    .footer__logo{
      height:clamp(36px,5vw,44px);
      width:auto;
      object-fit:contain;
      margin-bottom:10px;
    }
    .footer h4{
      margin:0 0 10px;
      font-size:clamp(13px,1.5vw,14px);
      font-weight:700;
    }
    .footer p,.footer a{
      font-size:clamp(12px,1.4vw,14px);
      opacity:.95;
      line-height:1.6;
    }
    .footer__bottom{
      max-width:var(--max);
      margin:0 auto;
      padding:clamp(12px,2vh,16px) clamp(16px,3vw,24px) clamp(20px,3vh,32px);
      border-top:1px solid rgba(255,255,255,.3);
      display:flex;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      font-size:clamp(11px,1.3vw,13px);
    }

    /* ---------- Responsive ---------- */
    @media (max-width:900px){
      .contact-grid{
        grid-template-columns:1fr;
        gap:clamp(24px,4vw,32px);
      }
      .form-row{
        grid-template-columns:1fr;
        gap:clamp(16px,2vw,20px);
      }
    }
    
    @media (max-width:720px){
      .bar__inner{padding:10px 16px}
      .nav{display:none !important}
      .burger{display:flex}
      .btn-desktop{display:none !important}
    }
     :root{
      --red:#e51019; --red-600:#c40f16; --bg:#0b0b0b; --text:#f7f7f7; --muted:#d6d6d6; --white:#fff;
      --max:1200px; --radius:18px; --shadow:0 20px 60px rgba(0,0,0,.35);
    }
    *{box-sizing:border-box}
    html,body{height:100%;overflow-x:hidden}
    body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:#111;background:#fff}
    img{display:block;max-width:100%;height:auto}
    a{color:inherit;text-decoration:none}
    html{scroll-behavior:smooth}

    /* ---------- Header / Navbar - Liquid Glass Style ---------- */
    .site-header{position:fixed;top:0;left:0;right:0;z-index:60;width:100%}
    .bar{
      background:rgba(15,15,15,.7);
      backdrop-filter:saturate(180%) blur(20px);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      border-bottom:1px solid rgba(255,255,255,.08);
      transition:all .4s cubic-bezier(.4,0,.2,1);
      box-shadow:0 4px 24px rgba(0,0,0,.1);
    }
    .bar.scrolled{
      background:rgba(15,15,15,.85);
      backdrop-filter:saturate(180%) blur(25px);
      -webkit-backdrop-filter:saturate(180%) blur(25px);
      border-bottom:1px solid rgba(255,255,255,.12);
      box-shadow:0 8px 32px rgba(0,0,0,.15);
    }
    .bar__inner{
      max-width:100%;
      margin:0 auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:clamp(12px,2vw,24px);
      padding:clamp(10px,1.5vw,14px) clamp(16px,3vw,32px);
    }
    .brand{display:flex;align-items:center;gap:12px;padding:8px 12px}
    .brand__logo{
      height:clamp(32px,4vw,40px);
      width:auto;
      object-fit:contain;
    }

    .nav{display:flex;align-items:center;gap:clamp(4px,1vw,8px);flex-wrap:wrap}
    .nav a{
      padding:clamp(8px,1vw,10px) clamp(12px,1.5vw,16px);
      border-radius:10px;
      opacity:.95;
      font-weight:600;
      font-size:clamp(13px,1.2vw,15px);
      transition:all .3s cubic-bezier(.4,0,.2,1);
      position:relative;
      color:#fff;
    }
    .nav a::before{
      content:'';
      position:absolute;
      inset:0;
      background:rgba(255,255,255,.1);
      border-radius:10px;
      opacity:0;
      transition:opacity .3s;
    }
    .nav a:hover::before{opacity:1}
    
    /* Burger Animation Stylée */
    .burger{
      display:none;
      width:44px;
      height:44px;
      border-radius:12px;
      background:rgba(255,255,255,.08);
      backdrop-filter:blur(10px);
      border:1px solid rgba(255,255,255,.15);
      align-items:center;
      justify-content:center;
      cursor:pointer;
      transition:all .3s cubic-bezier(.4,0,.2,1);
      position:relative;
    }
    .burger:hover{
      background:rgba(255,255,255,.15);
      transform:scale(1.05);
    }
    .burger:active{transform:scale(.95)}
    
    .burger-lines{width:24px;height:18px;position:relative;transition:transform .3s cubic-bezier(.4,0,.2,1)}
    .burger span{
      display:block;
      width:24px;
      height:2.5px;
      background:#fff;
      border-radius:3px;
      position:absolute;
      left:0;
      transition:all .4s cubic-bezier(.68,-.55,.265,1.55);
    }
    .burger span:nth-child(1){top:0}
    .burger span:nth-child(2){top:50%;transform:translateY(-50%)}
    .burger span:nth-child(3){bottom:0}
    
    .burger.open span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}
    .burger.open span:nth-child(2){opacity:0;transform:translateX(20px)}
    .burger.open span:nth-child(3){bottom:50%;transform:translateY(50%) rotate(-45deg)}

    /* Mobile panel */
    .mobile{
      display:none;
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.5);
      backdrop-filter:blur(12px);
      -webkit-backdrop-filter:blur(12px);
      z-index:50;
      animation:fadeIn .4s cubic-bezier(.4,0,.2,1);
    }
    .mobile.open{display:block}
    .mobile__panel{
      margin:clamp(80px,12vh,100px) auto 0;
      max-width:min(500px,calc(100% - 32px));
      padding:16px;
    }
    .mobile__card{
      background:rgba(15,15,15,.85);
      backdrop-filter:saturate(180%) blur(20px);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      border:1px solid rgba(255,255,255,.1);
      border-radius:20px;
      padding:12px;
      animation:slideDown .5s cubic-bezier(.68,-.55,.265,1.55);
      box-shadow:0 20px 60px rgba(0,0,0,.3);
    }
    .mobile__links a{
      display:block;
      padding:clamp(12px,2vh,16px);
      border-radius:14px;
      transition:all .3s cubic-bezier(.4,0,.2,1);
      font-size:clamp(15px,2vw,16px);
      font-weight:600;
      position:relative;
      overflow:hidden;
      color:#fff;
    }
    .mobile__links a::before{
      content:'';
      position:absolute;
      inset:0;
      background:rgba(255,255,255,.08);
      border-radius:14px;
      transform:translateX(-100%);
      transition:transform .3s;
    }
    .mobile__links a:hover::before{transform:translateX(0)}
    .mobile__links a:active{transform:scale(.98)}
    .mobile__links .btn{margin:16px 0 8px;display:inline-flex;width:100%;justify-content:center}

    @keyframes fadeIn{from{opacity:0}to{opacity:1}}
    @keyframes slideDown{
      from{transform:translateY(-30px) scale(.95);opacity:0}
      to{transform:translateY(0) scale(1);opacity:1}
    }

    /* ---------- Hero Banner ---------- */
    .hero-banner{
      position:relative;
      min-height:clamp(300px,40vh,450px);
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      overflow:hidden;
      margin-top:clamp(60px,10vh,80px);
    }
    .hero-banner__bg{
      position:absolute;
      inset:0;
      background:url('../images/ria.jpg') center/cover no-repeat;
    }
    .hero-banner__overlay{
      position:absolute;
      inset:0;
      background:linear-gradient(135deg, rgba(0,0,0,.75) 0%, rgba(229,16,25,.4) 100%);
    }
    .hero-banner__content{
      position:relative;
      z-index:1;
      text-align:center;
      padding:clamp(20px,5vw,40px);
    }
    .hero-banner h1{
      font-size:clamp(28px,5.5vw,56px);
      font-weight:900;
      margin:0;
      letter-spacing:-.02em;
      text-shadow:0 4px 20px rgba(0,0,0,.3);
      line-height:1.1;
    }

    /* ---------- Container ---------- */
    .container{
      max-width:var(--max);
      margin:0 auto;
      padding:clamp(40px,8vh,80px) clamp(16px,4vw,32px);
    }

    /* ---------- Intro Section ---------- */
    .intro-section{
      background:rgba(255,255,255,.95);
      backdrop-filter:saturate(180%) blur(20px);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      border:1px solid rgba(0,0,0,.08);
      border-radius:24px;
      padding:clamp(32px,5vw,48px) clamp(24px,4vw,40px);
      margin-bottom:clamp(40px,6vh,60px);
      box-shadow:0 8px 32px rgba(0,0,0,.06);
    }
    .intro-section p{
      font-size:clamp(15px,1.6vw,18px);
      color:#555;
      line-height:1.8;
      margin:0;
      text-align:center;
    }

    /* ---------- Tabs Navigation ---------- */
    .tabs-nav{
      display:flex;
      gap:clamp(12px,2vw,16px);
      margin-bottom:clamp(32px,5vh,48px);
      flex-wrap:wrap;
      justify-content:center;
    }
    .tab-button{
      padding:clamp(14px,2vh,18px) clamp(24px,3vw,36px);
      border:2px solid rgba(0,0,0,.1);
      background:rgba(255,255,255,.95);
      border-radius:999px;
      font-weight:700;
      font-size:clamp(14px,1.5vw,16px);
      color:#333;
      cursor:pointer;
      transition:all .3s cubic-bezier(.4,0,.2,1);
      box-shadow:0 4px 16px rgba(0,0,0,.06);
    }
    .tab-button:hover{
      transform:translateY(-2px);
      box-shadow:0 8px 24px rgba(0,0,0,.1);
      border-color:var(--red);
      color:var(--red);
    }
    .tab-button.active{
      background:linear-gradient(135deg, var(--red) 0%, var(--red-600) 100%);
      color:#fff;
      border-color:var(--red);
      box-shadow:0 8px 24px rgba(229,16,25,.3);
    }

    /* ---------- Tab Content ---------- */
    .tab-content{
      display:none;
    }
    .tab-content.active{
      display:block;
      animation:fadeInUp .5s cubic-bezier(.4,0,.2,1);
    }
    @keyframes fadeInUp{
      from{opacity:0;transform:translateY(20px)}
      to{opacity:1;transform:translateY(0)}
    }

    /* ---------- Info Cards Grid ---------- */
    .info-cards{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
      gap:clamp(24px,3vw,32px);
    }

    /* ---------- Info Card ---------- */
    .info-card{
      position:relative;
      background:rgba(255,255,255,.95);
      backdrop-filter:saturate(180%) blur(20px);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      border:1px solid rgba(0,0,0,.08);
      border-radius:24px;
      padding:clamp(28px,4vw,36px);
      box-shadow:0 8px 32px rgba(0,0,0,.06);
      transition:all .4s cubic-bezier(.4,0,.2,1);
      overflow:hidden;
    }
    .info-card:hover{
      transform:translateY(-8px);
      box-shadow:0 16px 48px rgba(0,0,0,.12);
      border-color:rgba(229,16,25,.3);
    }
    
    .info-card::before{
      content:'';
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:4px;
      background:linear-gradient(90deg, var(--red) 0%, var(--red-600) 100%);
      transform:scaleX(0);
      transform-origin:left;
      transition:transform .4s cubic-bezier(.4,0,.2,1);
    }
    .info-card:hover::before{
      transform:scaleX(1);
    }
    
    .info-card h3{
      font-size:clamp(18px,2.2vw,22px);
      font-weight:800;
      color:#111;
      margin:0 0 clamp(12px,1.5vh,16px);
      position:relative;
      padding-left:clamp(40px,5vw,48px);
    }
    .info-card h3::before{
      content:'\f043';
      font-family:'Font Awesome 6 Free';
      font-weight:900;
      position:absolute;
      left:0;
      top:50%;
      transform:translateY(-50%);
      font-size:clamp(24px,3vw,28px);
      color:var(--red);
    }
    
    .info-card > p{
      font-size:clamp(14px,1.5vw,16px);
      color:#555;
      line-height:1.7;
      margin:0 0 clamp(16px,2vh,20px);
    }
    
    .feature-list{
      list-style:none;
      margin:0;
      padding:0;
    }
    .feature-list li{
      position:relative;
      padding:clamp(8px,1.2vh,10px) 0 clamp(8px,1.2vh,10px) clamp(28px,3.5vw,32px);
      font-size:clamp(13px,1.4vw,15px);
      color:#666;
      line-height:1.6;
      border-bottom:1px solid rgba(0,0,0,.05);
    }
    .feature-list li:last-child{
      border-bottom:none;
    }
    .feature-list li::before{
      content:'\f00c';
      font-family:'Font Awesome 6 Free';
      font-weight:900;
      position:absolute;
      left:0;
      top:clamp(8px,1.2vh,10px);
      color:var(--red);
      font-size:clamp(12px,1.3vw,14px);
    }

    /* Icon variations for different cards */
    .info-card.mural h3::before{content:'\f120'}
    .info-card.potence h3::before{content:'\f576'}
    .info-card.maintenance h3::before{content:'\f0ad'}
    .info-card.apsad h3::before{content:'\f058'}

    /* ---------- Button Styles ---------- */
    .btn{
      display:inline-flex;
      align-items:center;
      gap:10px;
      background:var(--red);
      padding:clamp(10px,1.5vh,14px) clamp(16px,2.5vw,24px);
      border-radius:999px;
      font-weight:800;
      color:#fff;
      box-shadow:0 8px 24px rgba(229,16,25,.35);
      transition:all .3s cubic-bezier(.4,0,.2,1);
      font-size:clamp(13px,1.5vw,15px);
      border:none;
      cursor:pointer;
    }
    .btn:hover{
      background:var(--red-600);
      transform:translateY(-2px);
      box-shadow:0 12px 32px rgba(229,16,25,.5);
    }
    .btn:active{transform:translateY(0)}
    
    .btn-desktop{display:inline-flex}

    /* ---------- Footer ---------- */
    .footer{
      background:linear-gradient(180deg, var(--red) 0%, var(--red-600) 100%);
      color:#fff;
    }
    .footer__inner{
      max-width:var(--max);
      margin:auto;
      padding:clamp(32px,5vh,48px) clamp(16px,3vw,24px);
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
      gap:clamp(16px,3vw,28px);
    }
    .footer__logo{
      height:clamp(36px,5vw,44px);
      width:auto;
      object-fit:contain;
      margin-bottom:10px;
    }
    .footer h4{
      margin:0 0 10px;
      font-size:clamp(13px,1.5vw,14px);
      font-weight:700;
    }
    .footer p,.footer a{
      font-size:clamp(12px,1.4vw,14px);
      opacity:.95;
      line-height:1.6;
    }
    .footer__bottom{
      max-width:var(--max);
      margin:0 auto;
      padding:clamp(12px,2vh,16px) clamp(16px,3vw,24px) clamp(20px,3vh,32px);
      border-top:1px solid rgba(255,255,255,.3);
      display:flex;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      font-size:clamp(11px,1.3vw,13px);
    }

    /* ---------- Responsive ---------- */
    @media (max-width:720px){
      .bar__inner{padding:10px 16px}
      .nav{display:none !important}
      .burger{display:flex}
      .btn-desktop{display:none !important}
      .tabs-nav{justify-content:stretch}
      .tab-button{flex:1;text-align:center;font-size:13px;padding:12px 16px}
      .info-cards{grid-template-columns:1fr}
    }
     :root{
      --red:#e51019; --red-600:#c40f16; --bg:#0b0b0b; --text:#f7f7f7; --muted:#d6d6d6; --white:#fff;
      --max:1200px; --radius:18px; --shadow:0 20px 60px rgba(0,0,0,.35);
    }
    *{box-sizing:border-box}
    html,body{height:100%;overflow-x:hidden}
    body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:#111;background:#fff}
    img{display:block;max-width:100%;height:auto}
    a{color:inherit;text-decoration:none}
    html{scroll-behavior:smooth}

    /* ---------- Header / Navbar - Liquid Glass Style ---------- */
    .site-header{position:fixed;top:0;left:0;right:0;z-index:60;width:100%}
    .bar{
      background:rgba(15,15,15,.7);
      backdrop-filter:saturate(180%) blur(20px);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      border-bottom:1px solid rgba(255,255,255,.08);
      transition:all .4s cubic-bezier(.4,0,.2,1);
      box-shadow:0 4px 24px rgba(0,0,0,.1);
    }
    .bar.scrolled{
      background:rgba(15,15,15,.85);
      backdrop-filter:saturate(180%) blur(25px);
      -webkit-backdrop-filter:saturate(180%) blur(25px);
      border-bottom:1px solid rgba(255,255,255,.12);
      box-shadow:0 8px 32px rgba(0,0,0,.15);
    }
    .bar__inner{
      max-width:100%;
      margin:0 auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:clamp(12px,2vw,24px);
      padding:clamp(10px,1.5vw,14px) clamp(16px,3vw,32px);
    }
    .brand{display:flex;align-items:center;gap:12px;padding:8px 12px}
    .brand__logo{
      height:clamp(32px,4vw,40px);
      width:auto;
      object-fit:contain;
    }

    .nav{display:flex;align-items:center;gap:clamp(4px,1vw,8px);flex-wrap:wrap}
    .nav a{
      padding:clamp(8px,1vw,10px) clamp(12px,1.5vw,16px);
      border-radius:10px;
      opacity:.95;
      font-weight:600;
      font-size:clamp(13px,1.2vw,15px);
      transition:all .3s cubic-bezier(.4,0,.2,1);
      position:relative;
      color:#fff;
    }
    .nav a::before{
      content:'';
      position:absolute;
      inset:0;
      background:rgba(255,255,255,.1);
      border-radius:10px;
      opacity:0;
      transition:opacity .3s;
    }
    .nav a:hover::before{opacity:1}
    
    /* Burger Animation Stylée */
    .burger{
      display:none;
      width:44px;
      height:44px;
      border-radius:12px;
      background:rgba(255,255,255,.08);
      backdrop-filter:blur(10px);
      border:1px solid rgba(255,255,255,.15);
      align-items:center;
      justify-content:center;
      cursor:pointer;
      transition:all .3s cubic-bezier(.4,0,.2,1);
      position:relative;
    }
    .burger:hover{
      background:rgba(255,255,255,.15);
      transform:scale(1.05);
    }
    .burger:active{transform:scale(.95)}
    
    .burger-lines{width:24px;height:18px;position:relative;transition:transform .3s cubic-bezier(.4,0,.2,1)}
    .burger span{
      display:block;
      width:24px;
      height:2.5px;
      background:#fff;
      border-radius:3px;
      position:absolute;
      left:0;
      transition:all .4s cubic-bezier(.68,-.55,.265,1.55);
    }
    .burger span:nth-child(1){top:0}
    .burger span:nth-child(2){top:50%;transform:translateY(-50%)}
    .burger span:nth-child(3){bottom:0}
    
    .burger.open span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}
    .burger.open span:nth-child(2){opacity:0;transform:translateX(20px)}
    .burger.open span:nth-child(3){bottom:50%;transform:translateY(50%) rotate(-45deg)}

    /* Mobile panel */
    .mobile{
      display:none;
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.5);
      backdrop-filter:blur(12px);
      -webkit-backdrop-filter:blur(12px);
      z-index:50;
      animation:fadeIn .4s cubic-bezier(.4,0,.2,1);
    }
    .mobile.open{display:block}
    .mobile__panel{
      margin:clamp(80px,12vh,100px) auto 0;
      max-width:min(500px,calc(100% - 32px));
      padding:16px;
    }
    .mobile__card{
      background:rgba(15,15,15,.85);
      backdrop-filter:saturate(180%) blur(20px);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      border:1px solid rgba(255,255,255,.1);
      border-radius:20px;
      padding:12px;
      animation:slideDown .5s cubic-bezier(.68,-.55,.265,1.55);
      box-shadow:0 20px 60px rgba(0,0,0,.3);
    }
    .mobile__links a{
      display:block;
      padding:clamp(12px,2vh,16px);
      border-radius:14px;
      transition:all .3s cubic-bezier(.4,0,.2,1);
      font-size:clamp(15px,2vw,16px);
      font-weight:600;
      position:relative;
      overflow:hidden;
      color:#fff;
    }
    .mobile__links a::before{
      content:'';
      position:absolute;
      inset:0;
      background:rgba(255,255,255,.08);
      border-radius:14px;
      transform:translateX(-100%);
      transition:transform .3s;
    }
    .mobile__links a:hover::before{transform:translateX(0)}
    .mobile__links a:active{transform:scale(.98)}
    .mobile__links .btn{margin:16px 0 8px;display:inline-flex;width:100%;justify-content:center}

    @keyframes fadeIn{from{opacity:0}to{opacity:1}}
    @keyframes slideDown{
      from{transform:translateY(-30px) scale(.95);opacity:0}
      to{transform:translateY(0) scale(1);opacity:1}
    }

    /* ---------- Hero Banner ---------- */
    .hero-banner{
      position:relative;
      min-height:clamp(300px,40vh,450px);
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      overflow:hidden;
      margin-top:clamp(60px,10vh,80px);
    }
    .hero-banner__bg{
      position:absolute;
      inset:0;
      background:url('../images/domaine-expertise.jpg') center/cover no-repeat;
    }
    .hero-banner__overlay{
      position:absolute;
      inset:0;
      background:linear-gradient(135deg, rgba(0,0,0,.75) 0%, rgba(229,16,25,.4) 100%);
    }
    .hero-banner__content{
      position:relative;
      z-index:1;
      text-align:center;
      padding:clamp(20px,5vw,40px);
    }
    .hero-banner h1{
      font-size:clamp(32px,6vw,64px);
      font-weight:900;
      margin:0;
      letter-spacing:-.02em;
      text-shadow:0 4px 20px rgba(0,0,0,.3);
    }

    /* ---------- Container ---------- */
    .container{
      max-width:var(--max);
      margin:0 auto;
      padding:clamp(40px,8vh,80px) clamp(16px,4vw,32px);
    }

    /* ---------- Accordion Section ---------- */
    .accordion{
      display:flex;
      flex-direction:column;
      gap:clamp(16px,2vw,24px);
      margin-bottom:clamp(40px,8vh,80px);
    }
    .accordion-item{
      background:rgba(255,255,255,.95);
      backdrop-filter:saturate(180%) blur(20px);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      border:1px solid rgba(0,0,0,.08);
      border-radius:20px;
      overflow:hidden;
      box-shadow:0 8px 32px rgba(0,0,0,.06);
      transition:all .3s cubic-bezier(.4,0,.2,1);
    }
    .accordion-item:hover{
      transform:translateY(-4px);
      box-shadow:0 12px 40px rgba(0,0,0,.12);
    }
    .accordion-header{
      width:100%;
      background:transparent;
      border:none;
      padding:clamp(20px,3vw,28px) clamp(20px,3vw,32px);
      display:flex;
      justify-content:space-between;
      align-items:center;
      cursor:pointer;
      transition:all .3s cubic-bezier(.4,0,.2,1);
    }
    .accordion-header:hover{background:rgba(229,16,25,.03)}
    .accordion-header.active{background:rgba(229,16,25,.05)}
    .accordion-title{
      display:flex;
      align-items:center;
      gap:clamp(12px,2vw,20px);
      font-size:clamp(18px,2.5vw,24px);
      font-weight:700;
      color:#111;
    }
    .accordion-icon{
      width:clamp(48px,7vw,64px);
      height:clamp(48px,7vw,64px);
      border-radius:16px;
      background:linear-gradient(135deg, var(--red) 0%, var(--red-600) 100%);
      display:grid;
      place-items:center;
      color:#fff;
      font-size:clamp(20px,3vw,28px);
      box-shadow:0 8px 24px rgba(229,16,25,.25);
    }
    .accordion-toggle{
      width:40px;
      height:40px;
      border-radius:12px;
      background:rgba(0,0,0,.04);
      display:grid;
      place-items:center;
      transition:all .3s cubic-bezier(.4,0,.2,1);
    }
    .accordion-header.active .accordion-toggle{
      background:rgba(229,16,25,.1);
      transform:rotate(180deg);
    }
    .accordion-toggle i{color:#666;font-size:16px}
    .accordion-header.active .accordion-toggle i{color:var(--red)}
    
    .accordion-content{
      max-height:0;
      overflow:hidden;
      transition:max-height .4s cubic-bezier(.4,0,.2,1);
    }
    .accordion-inner{
      padding:0 clamp(20px,3vw,32px) clamp(24px,3vw,32px);
      color:#444;
      line-height:1.7;
    }
    .accordion-inner p{
      margin:0 0 clamp(16px,2vw,24px);
      font-size:clamp(15px,1.5vw,17px);
    }
    .subsection{
      margin-top:clamp(20px,3vw,28px);
      padding:clamp(16px,2vw,24px);
      background:rgba(229,16,25,.03);
      border-radius:16px;
      border-left:4px solid var(--red);
    }
    .subsection h3{
      display:flex;
      align-items:center;
      gap:12px;
      margin:0 0 clamp(12px,2vw,16px);
      font-size:clamp(16px,2vw,20px);
      color:#111;
    }
    .subsection h3 i{color:var(--red);font-size:18px}
    .subsection ul{
      margin:0;
      padding-left:clamp(20px,3vw,28px);
      list-style:none;
    }
    .subsection ul li{
      position:relative;
      padding-left:clamp(20px,2.5vw,24px);
      margin-bottom:10px;
      font-size:clamp(14px,1.4vw,16px);
    }
    .subsection ul li::before{
      content:'';
      position:absolute;
      left:0;
      top:8px;
      width:8px;
      height:8px;
      background:var(--red);
      border-radius:50%;
    }

    /* ---------- Services Section ---------- */
    .services-section{
      background:linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      padding:clamp(60px,10vh,100px) 0;
    }
    .services-section h2{
      font-size:clamp(28px,4.5vw,48px);
      font-weight:900;
      text-align:center;
      margin:0 0 clamp(40px,6vh,60px);
      color:#111;
      letter-spacing:-.02em;
    }
    .services-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
      gap:clamp(24px,4vw,32px);
      max-width:var(--max);
      margin:0 auto;
      padding:0 clamp(16px,4vw,32px);
    }
    .service-card{
      background:rgba(255,255,255,.95);
      backdrop-filter:saturate(180%) blur(20px);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      border:1px solid rgba(0,0,0,.08);
      border-radius:24px;
      padding:clamp(32px,4vw,40px) clamp(24px,3vw,32px);
      box-shadow:0 8px 32px rgba(0,0,0,.08);
      transition:all .4s cubic-bezier(.4,0,.2,1);
      text-align:center;
    }
    .service-card:hover{
      transform:translateY(-8px);
      box-shadow:0 16px 48px rgba(0,0,0,.15);
    }
    .service-icon{
      width:clamp(80px,12vw,100px);
      height:clamp(80px,12vw,100px);
      margin:0 auto clamp(20px,3vw,28px);
      border-radius:24px;
      background:linear-gradient(135deg, var(--red) 0%, var(--red-600) 100%);
      display:grid;
      place-items:center;
      color:#fff;
      font-size:clamp(32px,5vw,42px);
      box-shadow:0 12px 32px rgba(229,16,25,.3);
    }
    .service-card h3{
      font-size:clamp(20px,2.5vw,26px);
      font-weight:800;
      margin:0 0 clamp(16px,2vw,20px);
      color:#111;
    }
    .service-features{
      list-style:none;
      margin:0;
      padding:0;
      text-align:left;
    }
    .service-features li{
      padding:clamp(10px,1.5vw,12px) 0;
      padding-left:clamp(28px,4vw,36px);
      position:relative;
      color:#555;
      font-size:clamp(14px,1.4vw,16px);
      border-bottom:1px solid rgba(0,0,0,.05);
    }
    .service-features li:last-child{border-bottom:none}
    .service-features li::before{
      content:'✓';
      position:absolute;
      left:0;
      top:clamp(10px,1.5vw,12px);
      width:clamp(20px,3vw,24px);
      height:clamp(20px,3vw,24px);
      background:rgba(229,16,25,.1);
      border-radius:50%;
      display:grid;
      place-items:center;
      color:var(--red);
      font-weight:800;
      font-size:clamp(12px,1.5vw,14px);
    }

    /* ---------- Certifications Section ---------- */
    .certifications-section{
      padding:clamp(60px,10vh,100px) 0;
      background:#fff;
    }
    .certifications-section h2{
      font-size:clamp(28px,4.5vw,48px);
      font-weight:900;
      text-align:center;
      margin:0 0 clamp(40px,6vh,60px);
      color:#111;
      letter-spacing:-.02em;
    }
    .certifications-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
      gap:clamp(24px,4vw,40px);
      max-width:900px;
      margin:0 auto;
      padding:0 clamp(16px,4vw,32px);
    }
    .certification-badge{
      background:rgba(255,255,255,.95);
      backdrop-filter:saturate(180%) blur(20px);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      border:1px solid rgba(0,0,0,.08);
      border-radius:24px;
      padding:clamp(32px,4vw,48px);
      text-align:center;
      box-shadow:0 8px 32px rgba(0,0,0,.08);
      transition:all .4s cubic-bezier(.4,0,.2,1);
    }
    .certification-badge:hover{
      transform:translateY(-8px) scale(1.02);
      box-shadow:0 16px 48px rgba(0,0,0,.15);
    }
    .badge-icon{
      width:clamp(70px,10vw,90px);
      height:clamp(70px,10vw,90px);
      margin:0 auto clamp(20px,3vw,24px);
      border-radius:50%;
      background:linear-gradient(135deg, var(--red) 0%, var(--red-600) 100%);
      display:grid;
      place-items:center;
      color:#fff;
      font-size:clamp(28px,4vw,36px);
      box-shadow:0 12px 32px rgba(229,16,25,.3);
    }
    .certification-badge h4{
      font-size:clamp(18px,2.2vw,24px);
      font-weight:800;
      margin:0 0 clamp(16px,2vw,20px);
      color:#111;
    }
    .certification-badge img{
      max-width:clamp(100px,35%,150px);
      margin:clamp(16px,2vw,20px) auto;
      opacity:.9;
    }
    .certification-badge p{
      margin:0;
      color:#666;
      font-size:clamp(14px,1.4vw,16px);
    }

    /* ---------- Suppliers Section ---------- */
    .suppliers-section{
      background:linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      padding:clamp(60px,10vh,100px) 0;
    }
    .suppliers-section h2{
      font-size:clamp(28px,4.5vw,48px);
      font-weight:900;
      text-align:center;
      margin:0 0 clamp(40px,6vh,60px);
      color:#111;
      letter-spacing:-.02em;
    }
    .suppliers-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
      gap:clamp(20px,3vw,32px);
      max-width:var(--max);
      margin:0 auto;
      padding:0 clamp(16px,4vw,32px);
    }
    .supplier-card{
      position:relative;
      aspect-ratio:1/1;
      border-radius:20px;
      overflow:hidden;
      background:#fff;
      box-shadow:0 8px 32px rgba(0,0,0,.08);
      transition:all .4s cubic-bezier(.4,0,.2,1);
      cursor:pointer;
    }
    .supplier-card:hover{
      transform:translateY(-8px) scale(1.02);
      box-shadow:0 16px 48px rgba(0,0,0,.15);
    }
    .supplier-logo{
      width:100%;
      height:100%;
      object-fit:cover;
      transition:transform .5s cubic-bezier(.4,0,.2,1);
    }
    .supplier-card:hover .supplier-logo{transform:scale(1.1)}
    .supplier-overlay{
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.85) 100%);
      display:flex;
      flex-direction:column;
      justify-content:flex-end;
      padding:clamp(16px,2.5vw,24px);
      opacity:0;
      transition:opacity .4s cubic-bezier(.4,0,.2,1);
    }
    .supplier-card:hover .supplier-overlay{opacity:1}
    .supplier-overlay h4{
      margin:0 0 4px;
      color:#fff;
      font-size:clamp(16px,2vw,20px);
      font-weight:700;
    }
    .supplier-overlay p{
      margin:0;
      color:rgba(255,255,255,.8);
      font-size:clamp(13px,1.5vw,15px);
    }

    /* ---------- Button Styles ---------- */
    .btn{
      display:inline-flex;
      align-items:center;
      gap:10px;
      background:var(--red);
      padding:clamp(10px,1.5vh,14px) clamp(16px,2.5vw,24px);
      border-radius:999px;
      font-weight:800;
      color:#fff;
      box-shadow:0 8px 24px rgba(229,16,25,.35);
      transition:all .3s cubic-bezier(.4,0,.2,1);
      font-size:clamp(13px,1.5vw,15px);
      border:none;
      cursor:pointer;
    }
    .btn:hover{
      background:var(--red-600);
      transform:translateY(-2px);
      box-shadow:0 12px 32px rgba(229,16,25,.5);
    }
    .btn:active{transform:translateY(0)}
    
    .btn-desktop{display:inline-flex}

    /* ---------- Footer ---------- */
    .footer{
      background:linear-gradient(180deg, var(--red) 0%, var(--red-600) 100%);
      color:#fff;
    }
    .footer__inner{
      max-width:var(--max);
      margin:auto;
      padding:clamp(32px,5vh,48px) clamp(16px,3vw,24px);
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
      gap:clamp(16px,3vw,28px);
    }
    .footer__logo{
      height:clamp(36px,5vw,44px);
      width:auto;
      object-fit:contain;
      margin-bottom:10px;
    }
    .footer h4{
      margin:0 0 10px;
      font-size:clamp(13px,1.5vw,14px);
      font-weight:700;
    }
    .footer p,.footer a{
      font-size:clamp(12px,1.4vw,14px);
      opacity:.95;
      line-height:1.6;
    }
    .footer__bottom{
      max-width:var(--max);
      margin:0 auto;
      padding:clamp(12px,2vh,16px) clamp(16px,3vw,24px) clamp(20px,3vh,32px);
      border-top:1px solid rgba(255,255,255,.3);
      display:flex;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      font-size:clamp(11px,1.3vw,13px);
    }

    /* ---------- Responsive ---------- */
    @media (max-width:720px){
      .bar__inner{padding:10px 16px}
      .nav{display:none !important}
      .burger{display:flex}
      .btn-desktop{display:none !important}
    }
     *{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }
    
    :root{
      --red:#e51019;
      --red-600:#c80d15;
      --red-hover:#ff1a24;
      --muted:#d1d1d1;
      --max:1400px;
    }
    
    html{
      scroll-behavior:smooth;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }
    
    body{
      font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;
      background:#0b0b0b;
      color:#fff;
      line-height:1.6;
      overflow-x:hidden;
      margin:0;
    }
    
    a{
      color:inherit;
      text-decoration:none;
      cursor:pointer;
    }
    
    img{
      max-width:100%;
      height:auto;
      display:block;
    }

    /* ==========================================
       NAVIGATION BAR
       ========================================== */
    .site-header{
      position:fixed;
      top:0;
      left:0;
      right:0;
      z-index:1000;
      width:100%;
    }
    
    .bar{
      background:rgba(11,11,11,.75);
      backdrop-filter:saturate(180%) blur(20px);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      border-bottom:1px solid rgba(255,255,255,.06);
      transition:all .4s cubic-bezier(.4,0,.2,1);
      box-shadow:0 2px 20px rgba(0,0,0,.08);
    }
    
    .bar.scrolled{
      background:rgba(11,11,11,.92);
      backdrop-filter:saturate(180%) blur(30px);
      -webkit-backdrop-filter:saturate(180%) blur(30px);
      border-bottom:1px solid rgba(255,255,255,.1);
      box-shadow:0 4px 30px rgba(0,0,0,.2);
    }
    
    .bar__inner{
      max-width:1400px;
      margin:0 auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:clamp(16px,2vw,32px);
      padding:clamp(12px,1.5vh,16px) clamp(20px,3vw,40px);
    }
    
    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      padding:8px 12px;
      border-radius:12px;
      transition:all .3s cubic-bezier(.4,0,.2,1);
    }
    .brand:hover{
      background:rgba(255,255,255,.05);
      transform:translateY(-1px);
    }
    .brand__logo{
      height:clamp(36px,4.5vw,44px);
      width:auto;
      object-fit:contain;
      filter:drop-shadow(0 2px 8px rgba(255,255,255,.1));
      transition:filter .3s;
    }
    .brand:hover .brand__logo{
      filter:drop-shadow(0 4px 12px rgba(255,255,255,.2));
    }

    .nav{
      display:flex;
      align-items:center;
      gap:4px;
      flex-wrap:nowrap;
    }
    
    .nav a{
      position:relative;
      padding:clamp(10px,1.2vh,12px) clamp(16px,1.8vw,20px);
      border-radius:12px;
      font-weight:600;
      font-size:clamp(13.5px,1.3vw,15px);
      letter-spacing:0.01em;
      transition:all .3s cubic-bezier(.4,0,.2,1);
      white-space:nowrap;
      overflow:hidden;
    }
    
    .nav a::before{
      content:'';
      position:absolute;
      inset:0;
      background:linear-gradient(135deg, rgba(229,16,25,.15) 0%, rgba(229,16,25,.08) 100%);
      border-radius:12px;
      opacity:0;
      transition:opacity .3s cubic-bezier(.4,0,.2,1);
      z-index:-1;
    }
    
    .nav a:hover::before{
      opacity:1;
    }
    
    .nav a::after{
      content:'';
      position:absolute;
      bottom:6px;
      left:50%;
      transform:translateX(-50%) scaleX(0);
      width:70%;
      height:2px;
      background:linear-gradient(90deg, transparent, var(--red), transparent);
      border-radius:2px;
      transition:transform .4s cubic-bezier(.68,-.55,.265,1.55);
    }
    
    .nav a:hover::after{
      transform:translateX(-50%) scaleX(1);
    }
    
    .nav a:hover{
      color:#fff;
      transform:translateY(-1px);
    }
    
    .nav a:active{
      transform:translateY(0);
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      background:linear-gradient(135deg, var(--red) 0%, var(--red-600) 100%);
      padding:clamp(11px,1.5vh,14px) clamp(18px,2.5vw,26px);
      border-radius:12px;
      font-weight:700;
      color:#fff;
      box-shadow:0 4px 16px rgba(229,16,25,.3), inset 0 1px 0 rgba(255,255,255,.2);
      transition:all .3s cubic-bezier(.4,0,.2,1);
      font-size:clamp(13.5px,1.4vw,15px);
      border:none;
      cursor:pointer;
      position:relative;
      overflow:hidden;
      letter-spacing:0.02em;
    }
    
    .btn::before{
      content:'';
      position:absolute;
      top:0;
      left:-100%;
      width:100%;
      height:100%;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
      transition:left .5s;
    }
    
    .btn:hover::before{
      left:100%;
    }
    
    .btn:hover{
      background:linear-gradient(135deg, var(--red-hover) 0%, var(--red) 100%);
      transform:translateY(-2px);
      box-shadow:0 6px 20px rgba(229,16,25,.45), inset 0 1px 0 rgba(255,255,255,.3);
    }
    
    .btn:active{
      transform:translateY(0);
      box-shadow:0 2px 8px rgba(229,16,25,.3);
    }
    
    .btn-desktop{display:inline-flex}

    /* Menu Burger Moderne avec Animation Différente */
    .burger{
      display:none;
      width:50px;
      height:50px;
      border-radius:50%;
      background:linear-gradient(135deg, var(--red) 0%, var(--red-600) 100%);
      align-items:center;
      justify-content:center;
      cursor:pointer;
      transition:all .4s cubic-bezier(.68,-.55,.265,1.55);
      position:relative;
      box-shadow:0 4px 16px rgba(229,16,25,.4);
    }
    
    .burger:hover{
      transform:rotate(90deg) scale(1.1);
      box-shadow:0 6px 24px rgba(229,16,25,.6);
    }
    
    .burger.open{
      transform:rotate(180deg);
      background:linear-gradient(135deg, var(--red-hover) 0%, var(--red) 100%);
    }
    
    .burger-lines{
      width:26px;
      height:20px;
      position:relative;
    }
    
    .burger span{
      display:block;
      width:26px;
      height:3px;
      background:#fff;
      border-radius:3px;
      position:absolute;
      left:0;
      transition:all .5s cubic-bezier(.68,-.55,.265,1.55);
    }
    
    .burger span:nth-child(1){
      top:0;
    }
    .burger span:nth-child(2){
      top:50%;
      transform:translateY(-50%);
      width:20px;
    }
    .burger span:nth-child(3){
      bottom:0;
    }
    
    .burger.open span:nth-child(1){
      top:50%;
      transform:translateY(-50%) rotate(45deg);
    }
    .burger.open span:nth-child(2){
      opacity:0;
      transform:translateX(30px);
    }
    .burger.open span:nth-child(3){
      bottom:50%;
      transform:translateY(50%) rotate(-45deg);
    }

    /* Menu Mobile avec Animation Slide depuis le haut */
    .mobile{
      display:none;
      position:fixed;
      top:0;
      left:0;
      right:0;
      bottom:0;
      background:linear-gradient(180deg, rgba(11,11,11,.98) 0%, rgba(11,11,11,.95) 100%);
      backdrop-filter:blur(20px);
      -webkit-backdrop-filter:blur(20px);
      z-index:999;
      transform:translateY(-100%);
      transition:transform .6s cubic-bezier(.68,-.55,.265,1.55);
    }
    
    .mobile.open{
      display:flex;
      transform:translateY(0);
    }
    
    .mobile__panel{
      margin:auto;
      width:100%;
      max-width:600px;
      padding:clamp(20px,5vw,40px);
    }
    
    .mobile__links{
      display:flex;
      flex-direction:column;
      gap:0;
    }
    
    .mobile__links a{
      display:flex;
      align-items:center;
      padding:clamp(18px,3vh,24px) clamp(20px,4vw,32px);
      border-radius:16px;
      transition:all .4s cubic-bezier(.4,0,.2,1);
      font-size:clamp(18px,3vw,22px);
      font-weight:700;
      position:relative;
      overflow:hidden;
      opacity:0;
      transform:translateX(-50px);
      animation:slideInMenu .5s cubic-bezier(.68,-.55,.265,1.55) forwards;
    }
    
    .mobile__links a:nth-child(1){animation-delay:.1s}
    .mobile__links a:nth-child(2){animation-delay:.2s}
    .mobile__links a:nth-child(3){animation-delay:.3s}
    .mobile__links a:nth-child(4){animation-delay:.4s}
    .mobile__links a:nth-child(5){animation-delay:.5s}
    .mobile__links a:nth-child(6){animation-delay:.6s}
    
    @keyframes slideInMenu{
      to{
        opacity:1;
        transform:translateX(0);
      }
    }
    
    .mobile__links a::before{
      content:'';
      position:absolute;
      inset:0;
      background:linear-gradient(135deg, rgba(229,16,25,.15) 0%, rgba(229,16,25,.08) 100%);
      border-radius:16px;
      transform:translateX(-100%);
      transition:transform .4s cubic-bezier(.68,-.55,.265,1.55);
    }
    
    .mobile__links a:hover::before{
      transform:translateX(0);
    }
    
    .mobile__links a:active{
      transform:scale(.97);
    }
    
    .mobile__links .btn{
      margin:clamp(24px,4vh,32px) 0 0;
      display:inline-flex;
      width:100%;
      justify-content:center;
      font-size:clamp(16px,2.5vw,18px);
      padding:clamp(16px,2.5vh,20px);
    }

    @keyframes fadeIn{from{opacity:0}to{opacity:1}}

    /* ==========================================
       HERO SECTION
       ========================================== */
    .hero{
      position:relative;
      min-height:100vh;
      display:flex;
      align-items:center;
      color:#fff;
      overflow:hidden;
    }
    
    .hero__bg{
      position:absolute;
      inset:0;
      background:url('../images/index.png') center/cover no-repeat;
      animation:kenBurns 20s ease-in-out infinite alternate;
    }
    
    @keyframes kenBurns{
      from{transform:scale(1)}
      to{transform:scale(1.05)}
    }
    
    .hero__overlay{
      position:absolute;
      inset:0;
      background:linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.6) 40%, rgba(0,0,0,.2) 65%, rgba(0,0,0,0) 100%),
                  linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 45%);
    }
    
    .hero__content{
      position:relative;
      padding:clamp(110px,15vh,140px) clamp(16px,4vw,32px) clamp(60px,10vh,90px);
      max-width:var(--max);
      margin:auto;
      width:100%;
      min-height:calc(100vh - 130px);
    }

    .hero__text{
      max-width:720px;
    }
    
    .hero h1{
      font-size:clamp(30px,5.5vw,56px);
      line-height:1.08;
      margin:0 0 clamp(14px,2vh,18px);
      font-weight:900;
      letter-spacing:-.02em;
      text-shadow:0 4px 20px rgba(0,0,0,.5);
    }
    
    .hero p{
      max-width:680px;
      margin:0 0 clamp(22px,3vh,30px);
      color:#ececec;
      font-size:clamp(15.5px,1.6vw,18px);
      line-height:1.65;
      text-shadow:0 2px 10px rgba(0,0,0,.4);
    }
    
    .hero .btn{
      font-size:clamp(14px,1.5vw,16px);
      padding:clamp(12px,1.8vh,16px) clamp(24px,3vw,32px);
    }

    .stats{
      display:flex;
      gap:clamp(20px,3vw,32px);
      flex-wrap:wrap;
      font-weight:800;
    }
    
    .stats div{
      display:flex;
      flex-direction:column;
      gap:6px;
      padding:16px 20px;
      background:rgba(255,255,255,.08);
      backdrop-filter:blur(10px);
      border-radius:14px;
      border:1px solid rgba(255,255,255,.15);
      transition:all .3s cubic-bezier(.4,0,.2,1);
    }
    
    .stats div:hover{
      background:rgba(255,255,255,.12);
      transform:translateY(-3px);
      box-shadow:0 8px 24px rgba(0,0,0,.3);
    }
    
    .stats span{
      font-size:clamp(17px,2.2vw,24px);
      color:#fff;
    }
    
    .stats small{
      display:block;
      font-weight:600;
      opacity:.85;
      font-size:clamp(12px,1.3vw,14px);
      color:var(--muted);
    }
    
    /* Badge APSAD - Plus petit */
    .hero__cert{
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      background:#fff;
      border:2px solid #ddd;
      border-radius:12px;
      padding:8px;
      width:90px;
      height:42px;
      box-shadow:0 4px 16px rgba(0,0,0,.15), 0 0 0 4px rgba(100,100,100,.25);
      transition:all .3s cubic-bezier(.4,0,.2,1);
      flex-shrink:0;
    }
    
    .hero__cert:hover{
      transform:translateY(-3px);
      box-shadow:0 8px 24px rgba(0,0,0,.25), 0 0 0 4px rgba(100,100,100,.35);
    }
    
    /* 🎯 BADGE APSAD FIXE - POSITION MODIFIABLE */
    .hero__cert.fixed{
      position:fixed;
      bottom:100px;
      right:50px;
      z-index:50;
      animation:certFadeIn .4s cubic-bezier(.4,0,.2,1);
    }
    
    @keyframes certFadeIn{
      from{opacity:0;transform:scale(.9)}
      to{opacity:1;transform:scale(1)}
    }
    
    .hero__cert__logos{
      width:100%;
      height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    
    .hero__cert__logos img{
      width:100%;
      max-width:150px;
      height:auto;
      object-fit:contain;
    }

    /* POSITIONNEMENT DESKTOP */
    @media (min-width: 721px) {
      .hero__content {
        position: relative;
        display: block;
        height: calc(100vh - 130px);
      }
      
      .hero__text {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
      }
      
      .stats {
        position: absolute;
        bottom: 40px;
        left: 0;
      }
      
      .hero__cert {
        position: absolute;
        bottom: 40px;
        right: 0;
      }
    }

    /* Partners band - Full Responsive */
    .band{
      display:grid;
      grid-template-columns:2fr 1fr 1fr;
      gap:0;
    }
    
    .band__left{
      background:var(--red);
      color:#fff;
      display:grid;
      place-items:center;
      min-height:clamp(260px,35vw,340px);
      text-align:center;
      font-size:clamp(20px,3.5vw,34px);
      font-weight:900;
      padding:clamp(20px,3vw,32px);
      line-height:1.2;
    }
    
    .band__logo{
      background:#fff;
      display:grid;
      place-items:center;
      padding:clamp(24px,4vw,40px);
      transition:background .3s cubic-bezier(.4,0,.2,1);
    }
    
    .band__logo:hover{
      background:#f8f8f8;
    }
    
    .band__logo a{
      display:flex;
      align-items:center;
      justify-content:center;
      width:100%;
      height:100%;
    }
    
    .band__logo img{
      max-width:100%;
      height:auto;
      max-height:clamp(120px,18vw,180px);
      object-fit:contain;
      transition:all .4s cubic-bezier(.4,0,.2,1);
      filter:grayscale(0);
    }
    
    .band__logo a:hover img{
      transform:scale(1.08);
      filter:grayscale(0) brightness(1.05);
    }
    
    .band__logo a:active img{
      transform:scale(1.02);
    }

    /* Services - Full Responsive */
    .services{
      width:100%;
      margin:0;
      padding:0;
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:0;
    }
    
    .card{
      position:relative;
      aspect-ratio:504/576;
      overflow:hidden;
      isolation:isolate;
      cursor:pointer;
    }
    
    .card img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      transition:transform .7s cubic-bezier(.4,0,.2,1);
    }
    
    .card:hover img{transform:scale(1.1)}
    
    .card::after{
      content:'';
      position:absolute;
      inset:0;
      background:rgba(0,0,0,.3);
      transition:background .5s cubic-bezier(.4,0,.2,1);
      pointer-events:none;
    }
    
    .card:hover::after{background:rgba(0,0,0,.7)}
    
    .card__label{
      position:absolute;
      inset:0;
      display:grid;
      place-items:center;
      font-weight:800;
      font-size:clamp(20px,3vw,28px);
      color:#fff;
      opacity:0;
      transform:scale(.85);
      transition:all .5s cubic-bezier(.68,-.55,.265,1.55);
      pointer-events:none;
      z-index:1;
      letter-spacing:.05em;
      text-transform:uppercase;
    }
    
    .card:hover .card__label{
      opacity:1;
      transform:scale(1);
    }

    /* Clients - Full Responsive */
    .clients{
      background:#fff;
      color:#111;
      padding:clamp(40px,7vh,60px) 0;
      overflow:hidden;
    }
    
    .clients h2{
      text-align:center;
      margin:0 0 clamp(16px,3vh,24px);
      font-size:clamp(20px,3.5vw,34px);
      letter-spacing:.5px;
    }
    
    .marquee{
      display:flex;
      gap:clamp(40px,8vw,60px);
      animation:scroll 30s linear infinite;
      padding:10px 0;
      will-change:transform;
    }
    
    .marquee:hover{animation-play-state:paused}
    
    .marquee img{
      max-height:clamp(90px,14vw,140px);
      opacity:1;
      transition:.3s cubic-bezier(.4,0,.2,1);
    }
    
    .marquee img:hover{
      opacity:.8;
      transform:scale(1.05);
    }
    
    @keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

    /* Footer - Full Responsive */
    .footer{
      background:linear-gradient(180deg, var(--red) 0%, var(--red-600) 100%);
      color:#fff;
    }
    
    .footer__inner{
      max-width:var(--max);
      margin:auto;
      padding:clamp(32px,5vh,48px) clamp(16px,3vw,24px);
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
      gap:clamp(16px,3vw,28px);
    }
    
    .footer__logo{
      height:clamp(36px,5vw,44px);
      width:auto;
      object-fit:contain;
      margin-bottom:10px;
    }
    
    .footer h4{
      margin:0 0 10px;
      font-size:clamp(13px,1.5vw,14px);
      font-weight:700;
    }
    
    .footer p,.footer a{
      font-size:clamp(12px,1.4vw,14px);
      opacity:.95;
      line-height:1.6;
    }
    
    .footer a:hover{
      opacity:1;
      text-decoration:underline;
    }
    
    .footer__bottom{
      max-width:var(--max);
      margin:0 auto;
      padding:clamp(12px,2vh,16px) clamp(16px,3vw,24px) clamp(20px,3vh,32px);
      border-top:1px solid rgba(255,255,255,.3);
      display:flex;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      font-size:clamp(11px,1.3vw,13px);
    }

    /* ==========================================
       RESPONSIVE - FULL MOBILE OPTIMIZATION
       ========================================== */
    @media (max-width:1200px){
      .nav{gap:6px}
      .nav a{padding:10px 14px;font-size:14px}
    }

    @media (max-width:1060px){
      .band{grid-template-columns:2fr 1fr}
      .band__logo:last-child{display:none}
      .band__left{min-height:clamp(240px,32vw,300px)}
    }
    
    /* MOBILE COMPLET - Tablette et smartphone */
    @media (max-width:720px){
      .bar__inner{padding:12px 18px}
      .nav{display:none !important}
      .burger{display:flex}
      .btn-desktop{display:none !important}
      
      /* Titre Hero Mobile adapté */
      .hero h1{
        font-size:clamp(24px,7vw,32px) !important;
        line-height:1.15 !important;
      }
      
      .hero p{
        font-size:15px !important;
      }
      
      /* Cacher les stats sur mobile */
      .stats{
        display:none !important;
      }
      
      /* Badge APSAD désactivé fixed sur mobile */
      .hero__cert.fixed{
        position:static !important;
      }
      
      .hero__content{
        padding:100px 16px 50px;
        height:auto;
        min-height:calc(100vh - 80px);
        display:flex;
        flex-direction:column;
        justify-content:center;
      }
      
      .hero__text{
        position:static !important;
        transform:none !important;
        margin-bottom:0;
      }
      
      .hero__cert{
        display:none !important;
      }
      
      /* Partenaires - Full width sur mobile, centrés */
      .band{
        grid-template-columns:1fr !important;
      }
      
      .band__left{
        min-height:200px;
        font-size:clamp(22px,5vw,28px);
      }
      
      .band__logo{
        min-height:160px;
        padding:clamp(32px,6vw,48px);
      }
      
      .band__logo:last-child{
        display:grid !important;
      }
      
      /* Services en colonne sur mobile */
      .services{
        grid-template-columns:1fr !important;
      }
      
      .card{
        min-height:300px;
        aspect-ratio:auto;
      }
      
      .card__label{
        font-size:24px;
        opacity:1;
        transform:scale(1);
      }
      
      /* Clients marquee plus petit */
      .marquee img{
        max-height:70px;
      }
      
      /* Footer adapté mobile */
      .footer__inner{
        grid-template-columns:1fr;
        gap:24px;
      }
    }
    
    /* SMARTPHONE - Optimisation extrême */
    @media (max-width:480px){
      .hero h1{
        font-size:24px !important;
      }
      
      .hero p{
        font-size:14px !important;
      }
      
      .hero .btn{
        font-size:14px !important;
        padding:14px 24px !important;
      }
      
      .band__left{
        font-size:20px;
        padding:24px 16px;
      }
      
      .card{
        min-height:250px;
      }
      
      .card__label{
        font-size:20px;
      }
      
      .marquee img{
        max-height:60px;
      }
    }
       :root{
      --red:#e51019; --red-600:#c40f16; --bg:#0b0b0b; --text:#f7f7f7; --muted:#d6d6d6; --white:#fff;
      --max:1200px; --radius:18px; --shadow:0 20px 60px rgba(0,0,0,.35);
    }
    *{box-sizing:border-box}
    html,body{height:100%;overflow-x:hidden}
    body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:#111;background:#fff}
    img{display:block;max-width:100%;height:auto}
    a{color:inherit;text-decoration:none}
    html{scroll-behavior:smooth}

    /* ---------- Header / Navbar - Liquid Glass Style ---------- */
    .site-header{position:fixed;top:0;left:0;right:0;z-index:60;width:100%}
    .bar{
      background:rgba(15,15,15,.7);
      backdrop-filter:saturate(180%) blur(20px);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      border-bottom:1px solid rgba(255,255,255,.08);
      transition:all .4s cubic-bezier(.4,0,.2,1);
      box-shadow:0 4px 24px rgba(0,0,0,.1);
    }
    .bar.scrolled{
      background:rgba(15,15,15,.85);
      backdrop-filter:saturate(180%) blur(25px);
      -webkit-backdrop-filter:saturate(180%) blur(25px);
      border-bottom:1px solid rgba(255,255,255,.12);
      box-shadow:0 8px 32px rgba(0,0,0,.15);
    }
    .bar__inner{
      max-width:100%;
      margin:0 auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:clamp(12px,2vw,24px);
      padding:clamp(10px,1.5vw,14px) clamp(16px,3vw,32px);
    }
    .brand{display:flex;align-items:center;gap:12px;padding:8px 12px}
    .brand__logo{
      height:clamp(32px,4vw,40px);
      width:auto;
      object-fit:contain;
    }

    .nav{display:flex;align-items:center;gap:clamp(4px,1vw,8px);flex-wrap:wrap}
    .nav a{
      padding:clamp(8px,1vw,10px) clamp(12px,1.5vw,16px);
      border-radius:10px;
      opacity:.95;
      font-weight:600;
      font-size:clamp(13px,1.2vw,15px);
      transition:all .3s cubic-bezier(.4,0,.2,1);
      position:relative;
      color:#fff;
    }
    .nav a::before{
      content:'';
      position:absolute;
      inset:0;
      background:rgba(255,255,255,.1);
      border-radius:10px;
      opacity:0;
      transition:opacity .3s;
    }
    .nav a:hover::before{opacity:1}
    
    /* Burger Animation Stylée */
    .burger{
      display:none;
      width:44px;
      height:44px;
      border-radius:12px;
      background:rgba(255,255,255,.08);
      backdrop-filter:blur(10px);
      border:1px solid rgba(255,255,255,.15);
      align-items:center;
      justify-content:center;
      cursor:pointer;
      transition:all .3s cubic-bezier(.4,0,.2,1);
      position:relative;
    }
    .burger:hover{
      background:rgba(255,255,255,.15);
      transform:scale(1.05);
    }
    .burger:active{transform:scale(.95)}
    
    .burger-lines{width:24px;height:18px;position:relative;transition:transform .3s cubic-bezier(.4,0,.2,1)}
    .burger span{
      display:block;
      width:24px;
      height:2.5px;
      background:#fff;
      border-radius:3px;
      position:absolute;
      left:0;
      transition:all .4s cubic-bezier(.68,-.55,.265,1.55);
    }
    .burger span:nth-child(1){top:0}
    .burger span:nth-child(2){top:50%;transform:translateY(-50%)}
    .burger span:nth-child(3){bottom:0}
    
    .burger.open span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}
    .burger.open span:nth-child(2){opacity:0;transform:translateX(20px)}
    .burger.open span:nth-child(3){bottom:50%;transform:translateY(50%) rotate(-45deg)}

    /* Mobile panel */
    .mobile{
      display:none;
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.5);
      backdrop-filter:blur(12px);
      -webkit-backdrop-filter:blur(12px);
      z-index:50;
      animation:fadeIn .4s cubic-bezier(.4,0,.2,1);
    }
    .mobile.open{display:block}
    .mobile__panel{
      margin:clamp(80px,12vh,100px) auto 0;
      max-width:min(500px,calc(100% - 32px));
      padding:16px;
    }
    .mobile__card{
      background:rgba(15,15,15,.85);
      backdrop-filter:saturate(180%) blur(20px);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      border:1px solid rgba(255,255,255,.1);
      border-radius:20px;
      padding:12px;
      animation:slideDown .5s cubic-bezier(.68,-.55,.265,1.55);
      box-shadow:0 20px 60px rgba(0,0,0,.3);
    }
    .mobile__links a{
      display:block;
      padding:clamp(12px,2vh,16px);
      border-radius:14px;
      transition:all .3s cubic-bezier(.4,0,.2,1);
      font-size:clamp(15px,2vw,16px);
      font-weight:600;
      position:relative;
      overflow:hidden;
      color:#fff;
    }
    .mobile__links a::before{
      content:'';
      position:absolute;
      inset:0;
      background:rgba(255,255,255,.08);
      border-radius:14px;
      transform:translateX(-100%);
      transition:transform .3s;
    }
    .mobile__links a:hover::before{transform:translateX(0)}
    .mobile__links a:active{transform:scale(.98)}
    .mobile__links .btn{margin:16px 0 8px;display:inline-flex;width:100%;justify-content:center}

    @keyframes fadeIn{from{opacity:0}to{opacity:1}}
    @keyframes slideDown{
      from{transform:translateY(-30px) scale(.95);opacity:0}
      to{transform:translateY(0) scale(1);opacity:1}
    }

    /* ---------- Hero Banner ---------- */
    .hero-banner{
      position:relative;
      min-height:clamp(300px,40vh,450px);
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      overflow:hidden;
      margin-top:clamp(60px,10vh,80px);
    }
    .hero-banner__bg{
      position:absolute;
      inset:0;
      background:url('../images/maintenance.jpg') center/cover no-repeat;
    }
    .hero-banner__overlay{
      position:absolute;
      inset:0;
      background:linear-gradient(135deg, rgba(0,0,0,.75) 0%, rgba(229,16,25,.4) 100%);
    }
    .hero-banner__content{
      position:relative;
      z-index:1;
      text-align:center;
      padding:clamp(20px,5vw,40px);
    }
    .hero-banner h1{
      font-size:clamp(32px,6vw,64px);
      font-weight:900;
      margin:0;
      letter-spacing:-.02em;
      text-shadow:0 4px 20px rgba(0,0,0,.3);
    }

    /* ---------- Container ---------- */
    .container{
      max-width:var(--max);
      margin:0 auto;
      padding:clamp(40px,8vh,80px) clamp(16px,4vw,32px);
    }

    /* ---------- Content Sections ---------- */
    .content-sections{
      display:flex;
      flex-direction:column;
      gap:clamp(32px,5vw,48px);
    }
    .content-section{
      position:relative;
      background:rgba(255,255,255,.95);
      backdrop-filter:saturate(180%) blur(20px);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      border:1px solid rgba(0,0,0,.08);
      border-radius:24px;
      padding:clamp(32px,5vw,48px) clamp(24px,4vw,40px);
      box-shadow:0 8px 32px rgba(0,0,0,.06);
      transition:all .4s cubic-bezier(.4,0,.2,1);
      overflow:hidden;
    }
    .content-section:hover{
      transform:translateY(-8px);
      box-shadow:0 16px 48px rgba(0,0,0,.12);
    }
    
    /* Section Number Decoration */
    .section-number{
      position:absolute;
      top:clamp(-10px,0vw,0px);
      right:clamp(-10px,0vw,0px);
      font-size:clamp(80px,15vw,140px);
      font-weight:900;
      color:rgba(229,16,25,.04);
      line-height:1;
      z-index:0;
      pointer-events:none;
    }
    
    .content-section h2{
      position:relative;
      font-size:clamp(22px,3.5vw,32px);
      font-weight:800;
      color:#111;
      margin:0 0 clamp(16px,2.5vw,24px);
      padding-left:clamp(16px,2vw,24px);
      z-index:1;
    }
    .content-section h2::before{
      content:'';
      position:absolute;
      left:0;
      top:0;
      bottom:0;
      width:clamp(4px,.6vw,6px);
      background:linear-gradient(180deg, var(--red) 0%, var(--red-600) 100%);
      border-radius:10px;
    }
    
    .content-section > p{
      position:relative;
      margin:0 0 clamp(20px,3vw,28px);
      color:#444;
      font-size:clamp(15px,1.5vw,17px);
      line-height:1.7;
      z-index:1;
    }
    
    /* List Styling */
    .list-icon{
      position:relative;
      list-style:none;
      margin:0;
      padding:0;
      z-index:1;
    }
    .list-icon li{
      position:relative;
      padding:clamp(16px,2.5vw,20px) clamp(16px,2.5vw,20px) clamp(16px,2.5vw,20px) clamp(48px,7vw,60px);
      margin-bottom:clamp(12px,1.5vw,16px);
      background:rgba(229,16,25,.02);
      border-radius:16px;
      border-left:3px solid var(--red);
      transition:all .3s cubic-bezier(.4,0,.2,1);
    }
    .list-icon li:hover{
      background:rgba(229,16,25,.06);
      transform:translateX(8px);
      border-left-width:6px;
    }
    .list-icon li::before{
      content:'\f058';
      font-family:'Font Awesome 6 Free';
      font-weight:900;
      color:var(--red);
      position:absolute;
      left:clamp(16px,2.5vw,20px);
      top:clamp(16px,2.5vw,20px);
      font-size:clamp(18px,2.5vw,22px);
    }
    .list-icon li strong{
      display:block;
      font-size:clamp(16px,1.8vw,19px);
      font-weight:700;
      color:#111;
      margin-bottom:clamp(4px,.8vw,8px);
    }
    .list-icon li span{
      display:block;
      color:#555;
      font-size:clamp(14px,1.4vw,16px);
      line-height:1.6;
    }

    /* Icon Badge for First Section */
    .icon-badge{
      width:clamp(60px,10vw,80px);
      height:clamp(60px,10vw,80px);
      margin:0 0 clamp(20px,3vw,24px);
      border-radius:20px;
      background:linear-gradient(135deg, var(--red) 0%, var(--red-600) 100%);
      display:grid;
      place-items:center;
      color:#fff;
      font-size:clamp(28px,4vw,36px);
      box-shadow:0 12px 32px rgba(229,16,25,.3);
    }

    /* ---------- Button Styles ---------- */
    .btn{
      display:inline-flex;
      align-items:center;
      gap:10px;
      background:var(--red);
      padding:clamp(10px,1.5vh,14px) clamp(16px,2.5vw,24px);
      border-radius:999px;
      font-weight:800;
      color:#fff;
      box-shadow:0 8px 24px rgba(229,16,25,.35);
      transition:all .3s cubic-bezier(.4,0,.2,1);
      font-size:clamp(13px,1.5vw,15px);
      border:none;
      cursor:pointer;
    }
    .btn:hover{
      background:var(--red-600);
      transform:translateY(-2px);
      box-shadow:0 12px 32px rgba(229,16,25,.5);
    }
    .btn:active{transform:translateY(0)}
    
    .btn-desktop{display:inline-flex}

    /* ---------- Footer ---------- */
    .footer{
      background:linear-gradient(180deg, var(--red) 0%, var(--red-600) 100%);
      color:#fff;
    }
    .footer__inner{
      max-width:var(--max);
      margin:auto;
      padding:clamp(32px,5vh,48px) clamp(16px,3vw,24px);
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
      gap:clamp(16px,3vw,28px);
    }
    .footer__logo{
      height:clamp(36px,5vw,44px);
      width:auto;
      object-fit:contain;
      margin-bottom:10px;
    }
    .footer h4{
      margin:0 0 10px;
      font-size:clamp(13px,1.5vw,14px);
      font-weight:700;
    }
    .footer p,.footer a{
      font-size:clamp(12px,1.4vw,14px);
      opacity:.95;
      line-height:1.6;
    }
    .footer__bottom{
      max-width:var(--max);
      margin:0 auto;
      padding:clamp(12px,2vh,16px) clamp(16px,3vw,24px) clamp(20px,3vh,32px);
      border-top:1px solid rgba(255,255,255,.3);
      display:flex;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      font-size:clamp(11px,1.3vw,13px);
    }

    /* ---------- Responsive ---------- */
    @media (max-width:720px){
      .bar__inner{padding:10px 16px}
      .nav{display:none !important}
      .burger{display:flex}
      .btn-desktop{display:none !important}
      .section-number{font-size:60px;right:-5px;top:-5px}
    }
     :root{
      --red:#e51019; --red-600:#c40f16; --bg:#0b0b0b; --text:#f7f7f7; --muted:#d6d6d6; --white:#fff;
      --max:1200px; --radius:18px; --shadow:0 20px 60px rgba(0,0,0,.35);
    }
    *{box-sizing:border-box}
    html,body{height:100%;overflow-x:hidden}
    body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:#111;background:#fff}
    img{display:block;max-width:100%;height:auto}
    a{color:inherit;text-decoration:none}
    html{scroll-behavior:smooth}

    /* ---------- Header / Navbar - Liquid Glass Style ---------- */
    .site-header{position:fixed;top:0;left:0;right:0;z-index:60;width:100%}
    .bar{
      background:rgba(15,15,15,.7);
      backdrop-filter:saturate(180%) blur(20px);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      border-bottom:1px solid rgba(255,255,255,.08);
      transition:all .4s cubic-bezier(.4,0,.2,1);
      box-shadow:0 4px 24px rgba(0,0,0,.1);
    }
    .bar.scrolled{
      background:rgba(15,15,15,.85);
      backdrop-filter:saturate(180%) blur(25px);
      -webkit-backdrop-filter:saturate(180%) blur(25px);
      border-bottom:1px solid rgba(255,255,255,.12);
      box-shadow:0 8px 32px rgba(0,0,0,.15);
    }
    .bar__inner{
      max-width:100%;
      margin:0 auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:clamp(12px,2vw,24px);
      padding:clamp(10px,1.5vw,14px) clamp(16px,3vw,32px);
    }
    .brand{display:flex;align-items:center;gap:12px;padding:8px 12px}
    .brand__logo{
      height:clamp(32px,4vw,40px);
      width:auto;
      object-fit:contain;
    }

    .nav{display:flex;align-items:center;gap:clamp(4px,1vw,8px);flex-wrap:wrap}
    .nav a{
      padding:clamp(8px,1vw,10px) clamp(12px,1.5vw,16px);
      border-radius:10px;
      opacity:.95;
      font-weight:600;
      font-size:clamp(13px,1.2vw,15px);
      transition:all .3s cubic-bezier(.4,0,.2,1);
      position:relative;
      color:#fff;
    }
    .nav a::before{
      content:'';
      position:absolute;
      inset:0;
      background:rgba(255,255,255,.1);
      border-radius:10px;
      opacity:0;
      transition:opacity .3s;
    }
    .nav a:hover::before{opacity:1}
    
    /* Burger Animation Stylée */
    .burger{
      display:none;
      width:44px;
      height:44px;
      border-radius:12px;
      background:rgba(255,255,255,.08);
      backdrop-filter:blur(10px);
      border:1px solid rgba(255,255,255,.15);
      align-items:center;
      justify-content:center;
      cursor:pointer;
      transition:all .3s cubic-bezier(.4,0,.2,1);
      position:relative;
    }
    .burger:hover{
      background:rgba(255,255,255,.15);
      transform:scale(1.05);
    }
    .burger:active{transform:scale(.95)}
    
    .burger-lines{width:24px;height:18px;position:relative;transition:transform .3s cubic-bezier(.4,0,.2,1)}
    .burger span{
      display:block;
      width:24px;
      height:2.5px;
      background:#fff;
      border-radius:3px;
      position:absolute;
      left:0;
      transition:all .4s cubic-bezier(.68,-.55,.265,1.55);
    }
    .burger span:nth-child(1){top:0}
    .burger span:nth-child(2){top:50%;transform:translateY(-50%)}
    .burger span:nth-child(3){bottom:0}
    
    .burger.open span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}
    .burger.open span:nth-child(2){opacity:0;transform:translateX(20px)}
    .burger.open span:nth-child(3){bottom:50%;transform:translateY(50%) rotate(-45deg)}

    /* Mobile panel */
    .mobile{
      display:none;
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.5);
      backdrop-filter:blur(12px);
      -webkit-backdrop-filter:blur(12px);
      z-index:50;
      animation:fadeIn .4s cubic-bezier(.4,0,.2,1);
    }
    .mobile.open{display:block}
    .mobile__panel{
      margin:clamp(80px,12vh,100px) auto 0;
      max-width:min(500px,calc(100% - 32px));
      padding:16px;
    }
    .mobile__card{
      background:rgba(15,15,15,.85);
      backdrop-filter:saturate(180%) blur(20px);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      border:1px solid rgba(255,255,255,.1);
      border-radius:20px;
      padding:12px;
      animation:slideDown .5s cubic-bezier(.68,-.55,.265,1.55);
      box-shadow:0 20px 60px rgba(0,0,0,.3);
    }
    .mobile__links a{
      display:block;
      padding:clamp(12px,2vh,16px);
      border-radius:14px;
      transition:all .3s cubic-bezier(.4,0,.2,1);
      font-size:clamp(15px,2vw,16px);
      font-weight:600;
      position:relative;
      overflow:hidden;
      color:#fff;
    }
    .mobile__links a::before{
      content:'';
      position:absolute;
      inset:0;
      background:rgba(255,255,255,.08);
      border-radius:14px;
      transform:translateX(-100%);
      transition:transform .3s;
    }
    .mobile__links a:hover::before{transform:translateX(0)}
    .mobile__links a:active{transform:scale(.98)}
    .mobile__links .btn{margin:16px 0 8px;display:inline-flex;width:100%;justify-content:center}

    @keyframes fadeIn{from{opacity:0}to{opacity:1}}
    @keyframes slideDown{
      from{transform:translateY(-30px) scale(.95);opacity:0}
      to{transform:translateY(0) scale(1);opacity:1}
    }

    /* ---------- Hero Banner ---------- */
    .hero-banner{
      position:relative;
      min-height:clamp(300px,40vh,450px);
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      overflow:hidden;
      margin-top:clamp(60px,10vh,80px);
    }
    .hero-banner__bg{
      position:absolute;
      inset:0;
      background:url('../images/produits-hero.jpg') center/cover no-repeat;
    }
    .hero-banner__overlay{
      position:absolute;
      inset:0;
      background:linear-gradient(135deg, rgba(0,0,0,.75) 0%, rgba(229,16,25,.4) 100%);
    }
    .hero-banner__content{
      position:relative;
      z-index:1;
      text-align:center;
      padding:clamp(20px,5vw,40px);
      max-width:var(--max);
    }
    .hero-banner h1{
      font-size:clamp(32px,6vw,64px);
      font-weight:900;
      margin:0 0 clamp(12px,2vh,16px);
      letter-spacing:-.02em;
      text-shadow:0 4px 20px rgba(0,0,0,.3);
    }
    .hero-banner p{
      font-size:clamp(16px,2vw,20px);
      margin:0;
      opacity:.95;
      max-width:700px;
      margin:0 auto;
    }

    /* ---------- Container ---------- */
    .container{
      max-width:var(--max);
      margin:0 auto;
      padding:clamp(50px,8vh,90px) clamp(16px,4vw,32px);
    }

    /* ---------- Section Intro ---------- */
    .section-intro{
      text-align:center;
      max-width:800px;
      margin:0 auto clamp(40px,6vh,60px);
    }
    .section-intro h2{
      font-size:clamp(24px,4vw,38px);
      font-weight:800;
      color:#111;
      margin:0 0 clamp(16px,2vh,20px);
    }
    .section-intro p{
      font-size:clamp(15px,1.6vw,18px);
      color:#555;
      line-height:1.7;
      margin:0;
    }

    /* ---------- Product Grid ---------- */
    .products-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
      gap:clamp(24px,3vw,32px);
      margin-bottom:clamp(40px,6vh,60px);
    }

    /* ---------- Product Card with Image ---------- */
    .product-card{
      position:relative;
      background:#fff;
      border-radius:24px;
      overflow:hidden;
      transition:all .4s cubic-bezier(.4,0,.2,1);
      box-shadow:0 8px 32px rgba(0,0,0,.06);
      border:1px solid rgba(0,0,0,.08);
      cursor:pointer;
      display:flex;
      flex-direction:column;
    }
    .product-card:hover{
      transform:translateY(-12px);
      box-shadow:0 20px 60px rgba(0,0,0,.15);
      border-color:var(--red);
    }

    .product-card__image{
      position:relative;
      height:220px;
      overflow:hidden;
      background:linear-gradient(135deg, rgba(229,16,25,.05) 0%, rgba(229,16,25,.02) 100%);
    }
    .product-card__image img{
      width:100%;
      height:100%;
      object-fit:cover;
      transition:transform .6s cubic-bezier(.4,0,.2,1);
    }
    .product-card:hover .product-card__image img{
      transform:scale(1.1);
    }
    .product-card__image::before{
      content:'';
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.3) 100%);
      opacity:0;
      transition:opacity .4s;
      z-index:1;
    }
    .product-card:hover .product-card__image::before{
      opacity:1;
    }

    .product-card__content{
      padding:clamp(24px,4vw,32px);
      flex:1;
      display:flex;
      flex-direction:column;
    }
    .product-card__title{
      font-size:clamp(20px,2.5vw,26px);
      font-weight:800;
      color:#111;
      margin:0 0 clamp(12px,1.5vh,16px);
      line-height:1.2;
    }
    .product-card__desc{
      font-size:clamp(14px,1.5vw,16px);
      color:#666;
      line-height:1.6;
      margin:0 0 clamp(20px,3vh,24px);
      flex:1;
    }
    .product-card__link{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:var(--red);
      font-weight:700;
      font-size:clamp(14px,1.5vw,15px);
      transition:all .3s cubic-bezier(.4,0,.2,1);
    }
    .product-card__link i{
      transition:transform .3s cubic-bezier(.4,0,.2,1);
    }
    .product-card:hover .product-card__link{
      gap:12px;
    }
    .product-card:hover .product-card__link i{
      transform:translateX(5px);
    }

    /* ---------- CTA Section ---------- */
    .cta-section{
      background:linear-gradient(135deg, var(--red) 0%, var(--red-600) 100%);
      border-radius:24px;
      padding:clamp(40px,6vh,60px) clamp(24px,4vw,40px);
      text-align:center;
      color:#fff;
      box-shadow:0 20px 60px rgba(229,16,25,.25);
    }
    .cta-section h2{
      font-size:clamp(24px,4vw,36px);
      font-weight:800;
      margin:0 0 clamp(16px,2vh,20px);
    }
    .cta-section p{
      font-size:clamp(15px,1.8vw,18px);
      margin:0 0 clamp(24px,4vh,32px);
      opacity:.95;
      max-width:600px;
      margin-left:auto;
      margin-right:auto;
    }
    .cta-section .btn-white{
      background:#fff;
      color:var(--red);
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:clamp(12px,1.8vh,16px) clamp(24px,3vw,32px);
      border-radius:999px;
      font-weight:800;
      font-size:clamp(14px,1.6vw,16px);
      box-shadow:0 8px 24px rgba(0,0,0,.2);
      transition:all .3s cubic-bezier(.4,0,.2,1);
    }
    .cta-section .btn-white:hover{
      transform:translateY(-2px);
      box-shadow:0 12px 32px rgba(0,0,0,.3);
    }

    /* ---------- Button Styles ---------- */
    .btn{
      display:inline-flex;
      align-items:center;
      gap:10px;
      background:var(--red);
      padding:clamp(10px,1.5vh,14px) clamp(16px,2.5vw,24px);
      border-radius:999px;
      font-weight:800;
      color:#fff;
      box-shadow:0 8px 24px rgba(229,16,25,.35);
      transition:all .3s cubic-bezier(.4,0,.2,1);
      font-size:clamp(13px,1.5vw,15px);
      border:none;
      cursor:pointer;
    }
    .btn:hover{
      background:var(--red-600);
      transform:translateY(-2px);
      box-shadow:0 12px 32px rgba(229,16,25,.5);
    }
    .btn:active{transform:translateY(0)}
    
    .btn-desktop{display:inline-flex}

    /* ---------- Footer ---------- */
    .footer{
      background:linear-gradient(180deg, var(--red) 0%, var(--red-600) 100%);
      color:#fff;
    }
    .footer__inner{
      max-width:var(--max);
      margin:auto;
      padding:clamp(32px,5vh,48px) clamp(16px,3vw,24px);
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
      gap:clamp(16px,3vw,28px);
    }
    .footer__logo{
      height:clamp(36px,5vw,44px);
      width:auto;
      object-fit:contain;
      margin-bottom:10px;
    }
    .footer h4{
      margin:0 0 10px;
      font-size:clamp(13px,1.5vw,14px);
      font-weight:700;
    }
    .footer p,.footer a{
      font-size:clamp(12px,1.4vw,14px);
      opacity:.95;
      line-height:1.6;
    }
    .footer__bottom{
      max-width:var(--max);
      margin:0 auto;
      padding:clamp(12px,2vh,16px) clamp(16px,3vw,24px) clamp(20px,3vh,32px);
      border-top:1px solid rgba(255,255,255,.3);
      display:flex;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      font-size:clamp(11px,1.3vw,13px);
    }

    /* ---------- Responsive ---------- */
    @media (max-width:720px){
      .bar__inner{padding:10px 16px}
      .nav{display:none !important}
      .burger{display:flex}
      .btn-desktop{display:none !important}
      .products-grid{
        grid-template-columns:1fr;
      }
    }