
:root{
 --navy:#101827;--navy2:#162238;--blue:#1298c8;--turq:#35c4bd;
 --white:#fff;--ink:#111827;--muted:#667085;--soft:#f4f8fa;--line:#e5eaf0;
 --max:1220px
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;color:var(--ink);background:#fff;line-height:1.55}
a{text-decoration:none;color:inherit}.container{width:min(calc(100% - 44px),var(--max));margin:auto}
.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(16,24,39,.86);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.12)}
.nav-inner{height:82px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:11px;color:#fff;font-size:25px;font-weight:800;letter-spacing:.12em}
.brand img{width:42px;height:42px;object-fit:contain}
.navlinks{display:flex;align-items:center;gap:30px}.navlinks a{color:#dbe5ee;font-size:14px;font-weight:600}
.navlinks a:hover,.navlinks a.active{color:#fff}.navlinks .nav-cta{background:var(--blue);color:#fff;padding:11px 16px;border-radius:9px}.navlinks .whatsapp-cta{background:#25D366;color:#fff;width:82px;height:40px;padding:0;border-radius:9px;display:inline-flex;align-items:center;justify-content:center}.navlinks .whatsapp-cta:hover{background:#20bd5a;color:#fff}.whatsapp-cta svg{width:22px;height:22px;display:block}
.menu{display:none;border:0;background:none;color:#fff;font-size:28px}
.hero{min-height:760px;display:flex;align-items:flex-end;position:relative;background:#dfe9ec url("assets/hero.jpg") center/cover no-repeat;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.80) 38%,rgba(255,255,255,.08) 70%,rgba(16,24,39,.06) 100%)}
.hero-inner{position:relative;padding:150px 0 100px;width:100%}
.hero-copy{max-width:650px}.eyebrow{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--blue)}
h1{font-size:clamp(52px,6.2vw,82px);line-height:.98;letter-spacing:-.055em;margin:18px 0 22px}
h1 span{color:var(--blue)}.lead{font-size:20px;color:#344054;max-width:620px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.btn{padding:13px 19px;border-radius:9px;font-size:14px;font-weight:800;border:1px solid var(--line);background:#fff}
.btn.primary{background:var(--blue);color:#fff;border-color:var(--blue)}.btn.primary:hover{filter:brightness(1.05)}
.btn.dark{background:var(--navy);color:#fff;border-color:var(--navy)}
.section{padding:105px 0}.section.soft{background:var(--soft)}
.section.dark{background:var(--navy);color:#fff}.section-head{max-width:780px}
h2{font-size:44px;line-height:1.05;letter-spacing:-.04em;margin:10px 0 17px}
.section-intro{font-size:18px;color:var(--muted);max-width:720px}
.dark .section-intro{color:#b9c6d5}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:42px}
.card{border:1px solid var(--line);border-radius:18px;background:#fff;padding:29px}
.soft .card{background:#fff}.card h3{margin:0 0 9px;font-size:21px}.card p{margin:0;color:var(--muted)}
.num{font-size:12px;font-weight:900;color:var(--blue);letter-spacing:.12em;margin-bottom:26px}
.image-section{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.feature-img{width:100%;height:500px;object-fit:cover;border-radius:24px;box-shadow:0 25px 70px rgba(16,24,39,.14)}
.checks{display:grid;gap:14px;margin-top:28px}.check{display:flex;gap:12px;align-items:flex-start}
.check b{display:block}.check span{color:var(--muted);font-size:14px}.tick{width:25px;height:25px;border-radius:50%;background:rgba(53,196,189,.16);color:#159d98;display:grid;place-items:center;font-weight:900;flex:none}
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:42px}
.shop{overflow:hidden;padding:0;display:flex;flex-direction:column}.shop-img{width:100%;height:230px;object-fit:cover}.shop-body{padding:25px;display:flex;flex-direction:column;flex:1}.shop-tag{color:var(--blue);font-size:11px;font-weight:900;letter-spacing:.15em;text-transform:uppercase}.shop h3{margin:8px 0}.shop p{color:var(--muted);font-size:14px}.shop-link{margin-top:auto;padding-top:18px;font-weight:900;color:var(--blue)}
.logo-strip{display:flex;justify-content:center;align-items:center;padding:45px 0}.logo-strip img{height:65px;max-width:380px;object-fit:contain}
.page-head{padding:160px 0 75px;background:linear-gradient(135deg,#f4f8fa,#fff)}
.page-head h1{max-width:900px}.split{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:start}
.list{display:grid;gap:0;border-top:1px solid var(--line)}.list-row{padding:21px 0;border-bottom:1px solid var(--line)}.list-row strong{display:block}.list-row span{color:var(--muted);font-size:14px}
.contact-card{background:var(--navy);color:#fff;border-radius:20px;padding:35px}.contact-card p{color:#c3ceda}.contact-card a{color:#75d9e1}
.legal h2{font-size:35px}.legal h3{margin-top:30px}.legal p{color:#667085}
.notice{padding:20px 22px;border-radius:13px;background:#eef9fb;border:1px solid #cceef2;color:#29404a}
footer{background:var(--navy);color:#aeb9c8;padding:38px 0;font-size:13px}.footer-inner{display:flex;justify-content:space-between;gap:25px}.footer-links{display:flex;gap:20px}
@media(max-width:850px){
 .navlinks{display:none;position:absolute;top:75px;left:15px;right:15px;padding:17px;flex-direction:column;align-items:stretch;background:#101827;border:1px solid rgba(255,255,255,.12);border-radius:14px}
 .navlinks.open{display:flex}.menu{display:block}.hero{min-height:720px}.hero:before{background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.88))}
 .hero-inner{padding:130px 0 70px}.grid3,.shop-grid,.image-section,.split{grid-template-columns:1fr}.feature-img{height:360px}
 h2{font-size:37px}.section{padding:75px 0}.footer-inner{flex-direction:column}
}


.email-button{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  color:inherit;
  font:inherit;
  text-decoration:underline;
  cursor:pointer;
}
.contact-card .email-button{color:#75d9e1}
.email-button:hover{opacity:.8}

/* Video sections */
.video-wrap{position:relative;overflow:hidden;border-radius:24px;background:#0d1725;box-shadow:0 25px 70px rgba(16,24,39,.14)}
.video-wrap video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#0d1725}
.video-badge{position:absolute;left:18px;top:18px;padding:8px 11px;border-radius:999px;background:rgba(16,24,39,.78);backdrop-filter:blur(10px);color:#fff;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:42px}
.video-card{overflow:hidden;padding:0}
.video-card .video-wrap{border-radius:0;box-shadow:none}
.video-card .video-info{padding:24px}
.video-card h3{margin:0 0 8px}
.video-card p{font-size:14px;color:var(--muted);margin:0}
.video-section{padding-top:30px}
@media(max-width:850px){
 .video-grid{grid-template-columns:1fr}
 .video-wrap{border-radius:18px}
}

/* Homepage hero/product video: match the visual height of the upper content block */
@media (min-width: 851px){
  .video-section .video-wrap{
    height: 500px;
  }
  .video-section .video-wrap video{
    width:100%;
    height:100%;
    aspect-ratio:auto;
    object-fit:cover;
  }
}
@media (max-width: 850px){
  .video-section .video-wrap{
    height:auto;
  }
  .video-section .video-wrap video{
    aspect-ratio:16/9;
    height:auto;
  }
}

@media (min-width: 1100px){
  .video-grid{grid-template-columns:repeat(3,1fr);gap:24px}
}


/* Language switch */
.lang-switch{
  min-width:46px;
  height:40px;
  padding:0 11px;
  border:1px solid rgba(255,255,255,.32);
  border-radius:9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff !important;
  background:rgba(255,255,255,.08);
  font-size:12px !important;
  font-weight:900 !important;
  letter-spacing:.08em;
  transition:background .18s ease,border-color .18s ease;
}
.lang-switch:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.55)}
.lang-switch{gap:7px;white-space:nowrap}
.lang-flag-image{width:24px;height:16px;display:block;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.28);flex:0 0 auto}
@media (min-width:851px){
  .navlinks{gap:18px}
}
@media (max-width:850px){
  .navlinks .lang-switch{width:100%;min-height:40px}
}
