@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');
:root{--blue:#0875d1;--dark:#031a39;--muted:#6b788c}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Cairo,Arial,sans-serif;color:#13223c;background:#fff}.container{width:min(1320px,calc(100% - 48px));margin:auto}a{text-decoration:none}
.header{height:110px;background:#fff;position:sticky;top:0;z-index:20;box-shadow:0 2px 16px #001b4210}.nav{height:110px;display:flex;align-items:center;gap:25px}.logo{margin-left:auto}.logo img{width:285px;height:105px;object-fit:contain;mix-blend-mode:normal}.nav nav{display:flex;gap:28px;height:100%}.nav nav a{display:flex;align-items:center;border-bottom:3px solid transparent;color:#1a2840;font-weight:700}.nav nav a:hover,.nav nav .active{color:var(--blue);border-color:var(--blue)}.lang{border:1px solid #d7e2ef;background:#fff;border-radius:25px;padding:9px 17px;color:#174f8d;font-weight:700}
.hero{background:radial-gradient(circle at 78% 45%,#0872dd,#052c65 38%,#02152f 80%);color:#fff;overflow:hidden}.hero-grid{min-height:470px;display:grid;grid-template-columns:1fr 1.12fr;align-items:center;gap:25px}.hero-copy{padding:42px 0}.eyebrow{color:#35bdf2;font-weight:800;letter-spacing:2px}.hero h1{font-size:52px;line-height:1.2;margin:8px 0 14px}.hero h1 span{color:#2bbbf2}.hero p{font-size:17px;line-height:2;color:#dfedff;max-width:590px}.actions{display:flex;gap:12px;margin:23px 0}.btn{padding:12px 24px;border-radius:11px;color:#fff;font-weight:800}.blue{background:#0878dd}.green{background:#16b85a}.points{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:#d9eaff}.hero-product{
  position:relative;
  height:430px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* The carton image keeps its original file unchanged.
   We only crop/position the surrounding white area so it blends
   naturally into the blue hero instead of appearing as a white card. */
.product-frame{
  position:relative;
  width:760px;
  max-width:none;
  height:430px;
  background:transparent;
  border-radius:0;
  padding:0;
  box-shadow:none;
  overflow:hidden;
}

.product-frame::after{
  content:"";
  position:absolute;
  left:4%;
  right:4%;
  bottom:34px;
  height:28px;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.34),rgba(0,0,0,0) 72%);
  filter:blur(8px);
  z-index:0;
}

.product-frame img{
  position:absolute;
  z-index:1;
  width:920px;
  max-width:none;
  height:auto;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:block;
  mix-blend-mode:multiply;
  filter:drop-shadow(0 25px 24px rgba(0,0,0,.30));
}
.section{padding:58px 0}.title{text-align:center;margin-bottom:30px}.title small{color:#0876d8;font-weight:800;letter-spacing:2px}.title h2{font-size:32px;margin:4px 0}.title p{color:var(--muted)}.why{background:#fff}.why{padding-top:55px}.why>div>.title{margin-bottom:25px}.why-grid{display:grid}.why article{border:1px solid #e0e7f0;border-radius:14px;padding:23px;text-align:center}.why b{font-size:35px;color:#0876d8}.why h3{margin:5px 0}.why p{font-size:13px;color:var(--muted)}
.about .why{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.products{background:linear-gradient(135deg,#031a39,#062c64)}.light{color:#fff}.light small{color:#35bdf2}.light p{color:#cbd9ed}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.cards article{background:#fff;border-radius:17px;padding:14px;display:flex;align-items:center;gap:15px;min-height:210px}.cards article img{width:48%;height:180px;object-fit:contain;border-radius:14px}.cards h3{font-size:25px;margin:0 0 5px}.cards p{font-size:13px;line-height:1.8;color:var(--muted)}.cards a{color:#0876d8;font-weight:800;font-size:13px}
.brand-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}.brand-grid a{height:105px;border:1px solid #dfe7f0;border-radius:13px;display:flex;align-items:center;justify-content:center;box-shadow:0 7px 20px #001b4210;background:#fff}.brand-grid img{width:90%;height:82%;object-fit:contain}.benefits{background:#f7faff;border-top:1px solid #e1e9f2;border-bottom:1px solid #e1e9f2}.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr)}.benefit-grid>div{text-align:center;padding:20px 10px;border-left:1px solid #dbe4ef}.benefit-grid>div:last-child{border:0}.benefit-grid b{display:block;color:#075db8}.benefit-grid span{font-size:12px;color:var(--muted)}
.branch-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.branch-grid article{border:1px solid #e0e8f1;border-radius:15px;padding:20px;display:flex;align-items:center;gap:16px;box-shadow:0 8px 22px #001b420d}.branch-grid article>span{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#0b69d0;color:#fff;font-size:23px}.branch-grid h3{margin:0;color:#075db8}.branch-grid p{margin:3px 0;color:var(--muted);font-size:13px}
.contact{background:#031a39;color:#fff;padding:30px 0}.contact-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:25px;align-items:center}.contact h2{margin:0}.contact p{color:#c6d6e9}.contact-grid>div:nth-child(2){display:flex;flex-direction:column;gap:4px}.contact-grid a,.contact-grid span{color:#dce9f8;font-size:13px}.wa{text-align:center;border-right:1px solid #45617f;padding-right:25px}.wa a{display:block;font-size:25px;font-weight:800;color:#fff}footer{background:#02132c;color:#91a7c2;text-align:center;padding:13px;font-size:12px}
@media(max-width:1000px){.nav nav{display:none}.hero-grid{grid-template-columns:1fr;text-align:center}.hero p{margin:auto}.actions{justify-content:center}.hero-product{padding-bottom:35px}.about .why{grid-template-columns:1fr 1fr}.cards{grid-template-columns:1fr}.brand-grid{grid-template-columns:repeat(3,1fr)}.benefit-grid{grid-template-columns:1fr 1fr}.branch-grid{grid-template-columns:1fr}.contact-grid{grid-template-columns:1fr;text-align:center}.wa{border:0;padding:0}}
@media(max-width:600px){.header,.nav{height:82px}.logo img{width:190px;height:76px}.lang{margin-right:auto;padding:8px 12px}.hero h1{font-size:36px}.hero p{font-size:15px}.actions{flex-direction:column}.points{flex-direction:column;gap:5px}.hero-product{height:320px}.product-frame{height:320px;width:100%}.product-frame img{width:700px;max-width:none}.section{padding:45px 0}.about .why{grid-template-columns:1fr}.brand-grid{grid-template-columns:repeat(2,1fr)}.benefit-grid{grid-template-columns:1fr 1fr}.cards article{flex-direction:column;text-align:center}.cards article img{width:100%;height:160px}}

html[dir="ltr"] body{font-family:Arial,"Segoe UI",sans-serif}
html[dir="ltr"] .nav .logo{margin-left:0;margin-right:auto}
html[dir="ltr"] .contact-wa{border-right:0;border-left:1px solid #45617f;padding-right:0;padding-left:25px}

.brand-grid a{background:#fff;padding:18px 24px}
.brand-grid img{width:92%;height:78%;object-fit:contain}
.brand-grid a:nth-child(1) img{max-width:210px}
.brand-grid a:nth-child(2) img{max-width:105px}
.brand-grid a:nth-child(3) img{max-width:210px}
.brand-grid a:nth-child(4) img{max-width:220px}
.brand-grid a:nth-child(5) img{max-width:230px}
.brand-grid a:nth-child(6) img{max-width:360px}


/* ===== HERO IMAGE ONLY: use the approved blue artwork as one complete image ===== */
.hero.hero-single{
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  background:#031a39;
  overflow:hidden;
}
.hero-single-wrap{
  position:relative;
  width:100%;
  max-width:1536px;
  margin:0 auto;
  line-height:0;
}
.hero-single-wrap > img{
  display:block;
  width:100%;
  height:auto;
  margin:0;
  padding:0;
  object-fit:contain;
  mix-blend-mode:normal;
  filter:none;
}
.hero-hotspot{
  position:absolute;
  display:block;
  z-index:5;
  background:transparent;
  border:0;
  cursor:pointer;
}
/* Positions correspond to the two buttons already drawn inside the approved image. */
.products-hotspot{left:25.3%; top:52.8%; width:14.4%; height:14.5%;}
.whatsapp-hotspot{left:9.0%; top:52.8%; width:15.6%; height:14.5%;}
@media(max-width:700px){
  .products-hotspot{left:25.3%; top:52.8%; width:14.4%; height:14.5%;}
  .whatsapp-hotspot{left:9.0%; top:52.8%; width:15.6%; height:14.5%;}
}

/* HERO ONLY: use the approved complete hero artwork as one image */
.hero.hero-single{
  width:100%;
  padding:0 !important;
  margin:0 !important;
  background:#031b3e !important;
  overflow:hidden;
}
.hero-single-wrap{
  position:relative;
  width:100%;
  line-height:0;
}
.hero-single-wrap > img{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  margin:0;
}
.hero-link{
  position:absolute;
  display:block;
  z-index:3;
  cursor:pointer;
  background:transparent;
}
/* Coordinates follow the buttons embedded in the approved hero artwork (1536x366). */
.hero-products-link{left:25.3%;top:52.7%;width:14.2%;height:14.0%;}
.hero-wa-link{left:9.0%;top:52.7%;width:15.5%;height:14.0%;}
@media(max-width:700px){
  .hero-products-link{left:25.3%;top:52.7%;width:14.2%;height:15%;}
  .hero-wa-link{left:9%;top:52.7%;width:15.5%;height:15%;}
}

/* User requested: DeepX brand logo on homepage +50% only */
.brand-grid img.deepx-brand-logo{
  transform:scale(1.5);
  transform-origin:center;
}