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

    :root{
      --text:#1d2b4b;
      --text-soft:#2f3b57;
      --blue-1:#56a7ff;
      --blue-2:#2f7ce7;
      --btn-shadow:0 8px 18px rgba(61,126,224,.20);
      --light-shadow:0 8px 18px rgba(0,0,0,.08);
      --radius:14px;
    }

    body{
      font-family:'Poppins',sans-serif;
      background:#eef2f8;
      color:#1f2c4c;
      line-height:1.5;
    }

    a{
      text-decoration:none;
      color:inherit;
    }

    img,
    video{
      max-width:100%;
      display:block;
    }

    .container{
      width:1200px;
      max-width:calc(100% - 40px);
      margin:auto;
    }

    .section{
      padding:70px 0;
      position:relative;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:15px 34px;
      border-radius:14px;
      font-size:17px;
      font-weight:500;
      transition:0.3s ease;
      border:none;
      cursor:pointer;
    }

    .btn-primary{
      background:linear-gradient(180deg,#4fa0ff,#2f7de8);
      color:#fff;
      box-shadow:0 8px 18px rgba(62,131,236,0.25);
    }

    .btn-primary:hover{
      transform:translateY(-2px);
    }

    .btn-light{
      background:#ffffff;
      color:#243252;
      box-shadow:0 8px 18px rgba(0,0,0,0.08);
      border:1px solid rgba(30,60,110,0.08);
    }

    .btn-light:hover{
      transform:translateY(-2px);
    }

    .section-title{
      text-align:center;
      font-size:48px;
      font-weight:600;
      line-height:1.2;
      color:#203053;
    }

    .section-title .blue{
      color:#4c8fdc;
      font-weight:500;
    }

    .section-subtitle{
      text-align:center;
      font-size:21px;
      color:#3a4764;
      margin-top:14px;
      font-weight:400;
    }

    /* NEW HERO */
    .sh-hero{
      position:relative;
      min-height:450px;
      overflow:hidden;
      background:
        linear-gradient(rgba(246,248,252,.72), rgba(246,248,252,.76)),
        linear-gradient(135deg,#dbe6f4 0%,#f1f5fb 48%,#d9e5f5 100%) center center / cover no-repeat;
    }

    .sh-hero::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg, rgba(255,255,255,.44) 0%, rgba(255,255,255,.18) 48%, rgba(255,255,255,.05) 100%);
      pointer-events:none;
    }

    .sh-hero__container{
      width:min(1240px, calc(100% - 42px));
      margin:0 auto;
      min-height:450px;
      display:grid;
      grid-template-columns:56% 44%;
      align-items:center;
      position:relative;
      z-index:2;
    }

    .sh-hero__content{
      text-align:center;
      padding:12px 18px 8px 0;
    }

    .sh-hero__logo{
      width:350px;
      max-width:86%;
      margin:0 auto 18px;
    }

    .sh-hero__title{
      font-size:57px;
      line-height:1.12;
      letter-spacing:-1.4px;
      font-weight:500;
      color:#1d2948;
      margin:0 auto;
      max-width:730px;
    }

    .sh-hero__text{
      font-size:18px;
      line-height:1.45;
      color:var(--text-soft);
      font-weight:400;
      margin:20px auto 0;
      max-width:760px;
    }

    .sh-hero__text + .sh-hero__text{
      margin-top:2px;
    }

    .sh-hero__actions{
      display:flex;
      justify-content:center;
      align-items:center;
      gap:12px;
      margin-top:24px;
      flex-wrap:wrap;
    }

    .sh-btn{
      min-height:56px;
      padding:0 30px;
      border-radius:var(--radius);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      font-size:18px;
      font-weight:500;
      line-height:1.2;
      transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
      white-space:nowrap;
    }

    .sh-btn:hover{
      transform:translateY(-1px);
    }

    .sh-btn--primary{
      min-width:258px;
      color:#fff;
      background:linear-gradient(180deg, var(--blue-1), var(--blue-2));
      box-shadow:var(--btn-shadow);
    }

    .sh-btn--primary:hover{
      box-shadow:0 10px 20px rgba(61,126,224,.24);
    }

    .sh-btn--secondary{
      min-width:262px;
      color:#25314f;
      background:linear-gradient(180deg, #ffffff, #f7f7f7);
      border:1px solid rgba(31,52,94,.08);
      box-shadow:var(--light-shadow);
    }

    .sh-btn--secondary:hover{
      background:#fff;
      box-shadow:0 10px 20px rgba(0,0,0,.10);
    }

    .sh-hero__visual{
      position:relative;
      min-height:450px;
      display:flex;
      align-items:flex-end;
      justify-content:flex-end;
      overflow:hidden;
    }

    .sh-hero__locks{
      position:absolute;
      right:-18px;
      bottom:-14px;
      width:470px;
      max-width:none;
      object-fit:contain;
      filter:drop-shadow(0 10px 18px rgba(0,0,0,.10));
    }

    /* LIGHT SECTION */
    .light-section{
      background:
        linear-gradient(rgba(243,247,252,0.92), rgba(243,247,252,0.94)),
        linear-gradient(135deg,#dbe6f4 0%,#f1f5fb 48%,#d9e5f5 100%) center center / cover no-repeat;
      position:relative;
    }

    .light-section::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(255,255,255,0.45), rgba(228,236,248,0.55));
      pointer-events:none;
    }

    .light-section .container{
      position:relative;
      z-index:2;
    }

    /* FEATURE CARDS */
    .cards-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:26px;
      margin-top:38px;
    }

    .card{
      background:rgba(255,255,255,0.68);
      border:1px solid rgba(155,180,215,0.25);
      border-radius:18px;
      padding:28px 26px 24px;
      box-shadow:0 10px 24px rgba(107,130,170,0.10);
      backdrop-filter:blur(3px);
    }

    .card-icon{
      width:46px;
      height:46px;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:26px;
      color:#5b98df;
      margin-bottom:14px;
      background:linear-gradient(180deg,#eef5ff,#dce9fb);
      box-shadow:inset 0 1px 0 rgba(255,255,255,0.7);
    }

    .card h3{
      font-size:26px;
      color:#233254;
      font-weight:500;
      margin-bottom:14px;
    }

    .card ul{
      padding-left:18px;
      margin-bottom:24px;
      color:#51617e;
      font-size:18px;
    }

    .card ul li{
      margin-bottom:8px;
    }

    .product-btn{
      width:100%;
      max-width:230px;
      min-height:54px;
      border-radius:13px;
      background:#f8fbff;
      border:1px solid rgba(115,148,193,0.18);
      box-shadow:0 6px 16px rgba(91,123,173,0.08);
      color:#5a88c8;
      font-size:18px;
      font-weight:500;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
    }

    .product-btn:hover{
      background:#ffffff;
    }

    /* PRODUCT SECTION */
    .product-highlight{
      margin-top:46px;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:20px;
      align-items:center;
    }

    .product-left h3{
      font-size:31px;
      font-weight:500;
      color:#2c4c7e;
      margin-bottom:20px;
    }

    .product-left ul{
      padding-left:22px;
      color:#34435f;
      font-size:18px;
      margin-bottom:28px;
    }

    .product-left ul li{
      margin-bottom:14px;
    }

    .product-right{
      display:grid;
      grid-template-columns:1fr auto;
      align-items:center;
      gap:18px;
    }

    .product-right-text{
      text-align:left;
    }

    .product-right-text h4{
      font-size:34px;
      font-style:italic;
      font-weight:500;
      line-height:1.1;
      color:#26334f;
    }

    .product-right-text span{
      display:block;
      font-size:17px;
      color:#3f4f70;
      margin-top:14px;
    }

    .product-image{
      width:255px;
      filter:drop-shadow(0 10px 24px rgba(0,0,0,0.12));
    }

    /* ICON STRIP */
    .icon-strip{
      margin-top:34px;
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:18px;
    }

    .icon-box{
      background:rgba(255,255,255,0.72);
      border:1px solid rgba(155,180,215,0.24);
      border-radius:18px;
      min-height:120px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:16px;
      padding:18px 22px;
      box-shadow:0 8px 18px rgba(100,123,164,0.08);
      text-align:left;
    }

    .icon-round{
      width:72px;
      height:72px;
      min-width:72px;
      border-radius:50%;
      background:linear-gradient(180deg,#eff6ff,#dce9fb);
      display:flex;
      align-items:center;
      justify-content:center;
      color:#5b98df;
      font-size:34px;
      box-shadow:inset 0 1px 0 rgba(255,255,255,0.8);
    }

    .icon-box h4{
      font-size:21px;
      line-height:1.2;
      color:#243353;
      font-weight:500;
    }

    /* RESPONSIVE */
    @media (max-width: 1180px){
      .sh-hero{
        min-height:430px;
      }

      .sh-hero__container{
        min-height:430px;
        grid-template-columns:57% 43%;
      }

      .sh-hero__logo{
        width:310px;
      }

      .sh-hero__title{
        font-size:49px;
        max-width:640px;
      }

      .sh-hero__text{
        font-size:17px;
        max-width:670px;
      }

      .sh-hero__locks{
        width:410px;
        right:-12px;
      }
    }

    @media (max-width: 1100px){
      .product-highlight{
        grid-template-columns:1fr;
      }

      .product-right{
        grid-template-columns:1fr;
        justify-items:center;
        text-align:center;
      }

      .product-right-text{
        text-align:center;
      }

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

      .icon-strip{
        grid-template-columns:repeat(2,1fr);
      }
    }

    @media (max-width: 980px){
      .sh-hero{
        min-height:auto;
        padding:26px 0 22px;
      }

      .sh-hero__container{
        min-height:auto;
        grid-template-columns:1fr;
        gap:18px;
      }

      .sh-hero__content{
        padding:0;
      }

      .sh-hero__visual{
        min-height:280px;
        justify-content:center;
      }

      .sh-hero__locks{
        position:relative;
        right:auto;
        bottom:auto;
        width:290px;
        margin:0 auto;
      }

      .sh-hero__title{
        font-size:40px;
        max-width:620px;
      }

      .sh-hero__text{
        font-size:17px;
        max-width:640px;
      }
    }

    @media (max-width: 768px){
      .container{
        max-width:calc(100% - 24px);
      }

      .section-title{
        font-size:34px;
      }

      .section-subtitle{
        font-size:18px;
      }

      .card h3{
        font-size:23px;
      }

      .card ul,

      .icon-strip{
        grid-template-columns:1fr;
      }

      .icon-box{
        justify-content:flex-start;
      }

      .product-left h3{
        font-size:27px;
      }

      .product-right-text h4{
        font-size:28px;
      }

      .product-image{
        width:210px;
      }
    }

    @media (max-width: 640px){
      .sh-hero{
        padding:20px 0 18px;
      }

      .sh-hero__container{
        width:min(100% - 24px, 1240px);
        gap:12px;
      }

      .sh-hero__logo{
        width:220px;
        max-width:78%;
        margin-bottom:12px;
      }

      .sh-hero__title{
        font-size:28px;
        line-height:1.14;
        letter-spacing:-.8px;
        max-width:340px;
      }

      .sh-hero__text{
        font-size:15px;
        line-height:1.45;
        max-width:330px;
        margin-top:14px;
      }

      .sh-hero__actions{
        margin-top:18px;
        gap:10px;
        flex-direction:column;
      }

      .sh-btn{
        width:100%;
        max-width:320px;
        min-width:0;
        min-height:52px;
        padding:0 18px;
        font-size:16px;
        white-space:normal;
      }

      .sh-hero__visual{
        min-height:220px;
      }

      .sh-hero__locks{
        width:220px;
      }
    }
  

/* =========================
GLOBAL
========================= */


/* =========================
SECTION 1 — HERO PRODUIT
========================= */
.sh-showcase{
  position:relative;
  overflow:hidden;
  padding:40px 20px 30px;
  background:
    linear-gradient(rgba(245,248,253,0.84), rgba(245,248,253,0.88)),
    linear-gradient(135deg,#dbe6f4 0%,#f1f5fb 48%,#d9e5f5 100%) center center / cover no-repeat;
}

.sh-showcase-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.18), transparent 50%),
    linear-gradient(to bottom, rgba(255,255,255,0.15), rgba(255,255,255,0.12));
  pointer-events:none;
}

.sh-showcase-container{
  position:relative;
  z-index:2;
  max-width:1200px;
  margin:0 auto;
}

.sh-showcase-top{
  text-align:center;
  margin-bottom:28px;
}

.sh-showcase-top h2{
  margin:0;
  font-size:56px;
  line-height:1.16;
  font-weight:400;
  color:#1f2d4c;
  letter-spacing:-1px;
}

.sh-showcase-top h2 strong{
  font-weight:700;
}

.sh-showcase-top p{
  margin:18px 0 0;
  font-size:24px;
  line-height:1.55;
  color:#283856;
  font-weight:400;
}

.sh-showcase-main{
  display:grid;
  grid-template-columns: 420px 1fr;
  align-items:end;
  gap:30px;
  max-width:1080px;
  margin:0 auto;
}

.sh-showcase-locks{
  display:flex;
  justify-content:center;
  align-items:flex-end;
}

.sh-showcase-locks img{
  width:100%;
  max-width:360px;
  object-fit:contain;
  transform:scale(1.08);
  transform-origin:bottom center;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,0.14));
}

.sh-showcase-info{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.sh-opening-box{
  position:relative;
  background:rgba(255,255,255,0.24);
  backdrop-filter:blur(5px);
  border:1px solid rgba(210,220,236,0.7);
  border-radius:26px;
  padding:28px 28px 24px;
  text-align:center;
  box-shadow:0 10px 24px rgba(98,120,156,0.10);
}

.sh-opening-box::before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.45);
  pointer-events:none;
}

.sh-opening-box h3{
  margin:0;
  font-size:33px;
  color:#22304d;
  font-weight:600;
  line-height:1.2;
}

.sh-opening-box h3 span{
  color:#537fc2;
  font-weight:400;
}

.sh-opening-box p{
  margin:12px 0 0;
  font-size:28px;
  font-weight:500;
  color:#283754;
  line-height:1.3;
}

.sh-feature-icons{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
  padding:18px 20px 14px;
  background:rgba(255,255,255,0.65);
  border:1px solid rgba(204,216,235,0.85);
  border-radius:18px;
  box-shadow:0 8px 20px rgba(110,132,170,0.10);
}

.sh-feature-item{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.sh-feature-circle{
  width:92px;
  height:92px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#f3f8ff,#dce8f8);
  border:1px solid rgba(194,208,231,0.95);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.9),
    0 6px 12px rgba(118,136,173,0.10);
  font-size:40px;
  color:#5788c6;
}

.sh-feature-item span{
  display:block;
  font-size:19px;
  line-height:1.18;
  color:#22324f;
  font-weight:500;
}

/* =========================
SECTION 2 — INSTALLATIONS VIDEOS
========================= */
.sh-installations{
  padding:34px 20px 50px;
  background:#efefef;
}

.sh-installations-container{
  max-width:1400px;
  margin:0 auto;
}

.sh-installations-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.sh-install-card{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  background:#d9d9d9;
  min-height:440px;
}

.sh-install-card video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.sh-install-tag{
  position:absolute;
  left:16px;
  bottom:16px;
  background:#fff;
  color:#000;
  font-size:22px;
  font-weight:700;
  line-height:1;
  padding:10px 16px;
  border-radius:10px;
  box-shadow:0 6px 16px rgba(0,0,0,0.10);
}

/* =========================
RESPONSIVE
========================= */
@media (max-width: 1200px){
  .sh-showcase-top h2{
    font-size:46px;
  }

  .sh-showcase-top p{
    font-size:21px;
  }

  .sh-opening-box p{
    font-size:24px;
  }

  .sh-feature-circle{
    width:78px;
    height:78px;
    font-size:34px;
  }

  .sh-feature-item span{
    font-size:17px;
  }

  .sh-installations-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width: 900px){
  .sh-showcase-main{
    grid-template-columns:1fr;
    gap:20px;
  }

  .sh-showcase-locks img{
    max-width:280px;
    transform:scale(1.04);
  }

  .sh-showcase-top h2{
    font-size:36px;
  }

  .sh-showcase-top p{
    font-size:18px;
  }

  .sh-opening-box h3{
    font-size:26px;
  }

  .sh-opening-box p{
    font-size:20px;
  }

  .sh-feature-icons{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width: 600px){
  .sh-showcase{
    padding:30px 14px 24px;
  }

  .sh-showcase-top h2{
    font-size:28px;
  }

  .sh-showcase-top p{
    font-size:16px;
  }

  .sh-feature-icons{
    grid-template-columns:repeat(2,1fr);
    gap:14px;
  }

  .sh-feature-circle{
    width:70px;
    height:70px;
    font-size:30px;
  }

  .sh-feature-item span{
    font-size:15px;
  }

  .sh-installations{
    padding:24px 14px 36px;
  }

  .sh-installations-grid{
    grid-template-columns:1fr;
  }

  .sh-install-card{
    min-height:300px;
  }

  .sh-install-tag{
    font-size:18px;
  }
}