:root{--blue:#0a4da2;--ink:#13233c;--muted:#66758d;--line:#dce4ee;--pale:#f4f8fc;--orange:#f47736;--white:#fff}*{box-sizing:border-box}

html{scroll-behavior:smooth}

#home{scroll-margin-top: 76px;}

body{margin:0;color:var(--ink);font:16px/1.65 "DM Sans",sans-serif;background:#fff}.container{width:min(1150px,calc(100% - 40px));margin:auto}.topbar{background:#092d61;color:#c8d7eb;font-size:.78rem}.topbar-inner{display:flex;gap:22px;align-items:center;justify-content:flex-end;min-height:34px}.topbar span{margin-right:auto}.topbar a{color:#fff;text-decoration:none}.site-header{background:rgba(255,255,255,.95);position:sticky;top:0;z-index:20;border-bottom:1px solid #edf1f5}.nav-wrap{height:76px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;line-height:1}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--blue);color:#fff;font:800 14px Manrope}.brand strong{display:block;letter-spacing:.13em;font:800 18px Manrope}.brand small{display:block;letter-spacing:.32em;margin-top:4px;font-size:8px;color:#6e7d91}nav{display:flex;gap:25px;align-items:center}nav a{color:#42516a;text-decoration:none;font-size:.87rem;font-weight:600}nav a:hover{color:var(--blue)}.nav-cta,.button{background:var(--blue);color:#fff!important;padding:11px 16px;border-radius:7px}.menu-toggle{display:none;border:0;background:transparent;font-size:24px}

.hero{overflow:hidden;background:linear-gradient(120deg,#f5f9fe,#eaf3ff);padding:20px 0 78px}

.hero-grid,.split,.quote-grid,.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.18em;color:var(--blue);margin:0 0 13px}.hero h1,h2,h3{font-family:Manrope,sans-serif;line-height:1.12}.hero h1{font-size:clamp(2.8rem,5vw,4.65rem);letter-spacing:-.05em;margin:0 0 22px}.hero h1 em{color:var(--blue);font-style:normal}.lede{font-size:1.12rem;max-width:570px;color:#53637a}.actions{display:flex;gap:12px;margin:32px 0}.button{border:0;font:700 .9rem "DM Sans";text-decoration:none;cursor:pointer;display:inline-flex;gap:14px;align-items:center}.button span{font-size:1.25em}.ghost{background:#fff;border:1px solid #cbd9ea;color:var(--blue)!important}.trust-row{display:flex;gap:36px;border-top:1px solid #cbd9ea;padding-top:21px}.trust-row b,.trust-row span{display:block}.trust-row b{font:800 1.15rem Manrope}.trust-row span{font-size:.78rem;color:var(--muted)}.hero-visual{height:365px;position:relative}.orb{position:absolute;border-radius:50%;background:#cae2ff}.orb-one{width:300px;height:300px;right:15%;top:5%}.orb-two{width:130px;height:130px;background:#d6ecff;bottom:0;right:0}.device-card{position:absolute;background:#fff;box-shadow:0 22px 50px #0d4d9624}.monitor{width:350px;height:220px;right:5%;top:50px;border:10px solid #172943;border-radius:8px}.screen{height:100%;background:linear-gradient(140deg,#0b5cc0,#5aa9fa);padding:24px}.screen span{display:block;height:9px;width:63%;margin:13px 0;background:#cfe7ff9e;border-radius:8px}.screen span:nth-child(2){width:42%}.monitor i{position:absolute;width:110px;height:20px;background:#172943;bottom:-27px;left:110px}.storage{right:42%;bottom:28px;width:158px;height:94px;border-radius:11px;padding:24px 20px;color:#fff;background:linear-gradient(135deg,#163f7b,#0a4da2);font:800 24px Manrope;transform:rotate(-8deg)}.storage small{font:600 8px DM Sans;letter-spacing:.15em}.hero-label{position:absolute;right:0;top:20px;color:var(--blue);font:700 .72rem Manrope;letter-spacing:.1em}.hero-label b{font-size:1.1rem}.intro-strip{background:var(--blue);color:#fff;padding:15px 0;text-align:center}.intro-strip p{margin:0}.section{padding:100px 0}.about p:not(.eyebrow){color:var(--muted)}h2{font-size:clamp(2rem,3.5vw,3.25rem);letter-spacing:-.045em;margin:0 0 23px}.text-link{color:var(--blue);font-weight:700;text-decoration:none}.value-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.value-grid article{padding:26px;background:var(--pale);border-radius:4px}.value-grid span{color:var(--orange);font:800 .75rem Manrope}.value-grid h3{font-size:1rem;margin:10px 0}.value-grid p{font-size:.86rem;margin:0}.products{background:#f7f9fc}.section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:30px}.search{border:1px solid #cfdae8;background:#fff;padding:10px 14px;border-radius:7px;min-width:min(100%,360px);display:flex;gap:8px}.search input{border:0;outline:0;font:inherit;width:100%}.filters{display:flex;gap:9px;overflow:auto;padding-bottom:24px}.filter{border:1px solid #d4dfea;background:#fff;border-radius:20px;padding:8px 15px;white-space:nowrap;color:#526176;font:600 .8rem DM Sans;cursor:pointer}.filter.active,.filter:hover{background:var(--blue);border-color:var(--blue);color:#fff}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.product-card{background:#fff;border:1px solid #e3eaf1;min-width:0}.product-image{height:150px;background:linear-gradient(135deg,#edf5ff,#d7eaff);display:grid;place-items:center;position:relative;overflow:hidden}.product-icon{font:800 3rem Manrope;color:#0a4da2;letter-spacing:-.1em}.badge{position:absolute;top:11px;left:11px;font-size:.68rem;font-weight:700;padding:4px 8px;border-radius:3px;background:#eaf2ff;color:#0a4da2}.badge.best-seller{background:#fff0e8;color:#c4541a}.badge.new-arrival{background:#e7f8f2;color:#107c5b}.product-body{padding:17px}.product-body small{color:#718198;font-weight:600}.product-body h3{font-size:1rem;margin:6px 0 10px}.product-meta{font-size:.75rem;color:#66758d;min-height:40px}.product-quote{display:block;margin-top:15px;color:var(--blue);font-size:.8rem;font-weight:700;text-decoration:none}.empty-state{text-align:center;padding:35px}.catalog-note{text-align:center;color:var(--muted);margin:33px 0 0}.catalog-note a{color:var(--blue)}.status-section{padding-top:90px}.status-row{margin-bottom:45px}.status-row h3{font-size:1.25rem;margin:0 0 15px}.status-row .product-grid{grid-template-columns:repeat(3,1fr)}.brands{background:#102947;color:#fff}.brands .eyebrow{color:#9dc7ff}.brands h2{max-width:400px}.brand-grid{margin-top:40px;border-top:1px solid #ffffff2e;border-left:1px solid #ffffff2e;display:grid;grid-template-columns:repeat(6,1fr)}.brand-grid span{display:grid;place-items:center;height:150px;border-right:1px solid #ffffff2e;border-bottom:1px solid #ffffff2e;color:#d6e6f8;font:700 1.1rem Manrope}.fine-print{font-size:.75rem;color:#aab9ca;margin:22px 0 0}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}.icon{width:44px;height:44px;display:grid;place-items:center;background:#e7f1ff;color:var(--blue);font-weight:bold;margin-bottom:16px}.service-grid h3{font-size:1.04rem;margin:0 0 8px}.service-grid p{font-size:.9rem;color:var(--muted);margin:0}.quote{padding:90px 0;background:linear-gradient(115deg,#e9f3ff,#f5f9fe)}.quote p:not(.eyebrow){color:var(--muted)}.quote-contact{display:flex;flex-direction:column;gap:8px}.quote-contact a{color:var(--blue);font-weight:700;text-decoration:none}form{background:#fff;padding:30px;border-radius:6px;box-shadow:0 12px 35px #1e5c9c18}label{font-size:.76rem;font-weight:700;color:#43536b;display:block;margin-bottom:14px}input,textarea{font:inherit;color:var(--ink);width:100%;display:block;border:1px solid #d7e0eb;border-radius:4px;padding:10px;margin-top:5px;resize:vertical}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}#form-message{font-size:.82rem;margin:12px 0 0;color:#107c5b}.contact-grid{align-items:start}.contact-line{display:flex;gap:15px;color:var(--ink);text-decoration:none;margin:25px 0}.contact-line>span{color:var(--blue);font-size:1.6rem}.contact-line small,.addresses small{font-weight:700;color:#708198;letter-spacing:.12em;font-size:.65rem;display:block}.addresses{display:grid;gap:15px}.addresses article{padding:27px;background:var(--pale);border-left:3px solid var(--blue)}.addresses p{margin:9px 0 14px;color:#4e5e73}footer{padding:46px 0 25px;background:#081c35;color:#b6c4d4}.footer-grid{display:grid;grid-template-columns:1.2fr 1.5fr 1fr;gap:20px;align-items:center}.footer-grid .brand{color:#fff}.footer-grid p{font-size:.83rem;line-height:1.7}.footer-grid div:not(.brand){display:flex;gap:15px}.footer-grid div:not(.brand) a{color:#fff;text-decoration:none;font-size:.82rem}.footer-grid>small{grid-column:1/-1;border-top:1px solid #ffffff1c;padding-top:18px;font-size:.72rem}.whatsapp{position:fixed;right:18px;bottom:18px;background:#14a87b;color:#fff;padding:12px 16px;border-radius:50px;display:flex;align-items:center;gap:8px;text-decoration:none;box-shadow:0 8px 22px #0b3b3080;z-index:10}.whatsapp b{font-size:.8rem}
.whatsapp svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.whatsapp svg path:nth-child(2) {
    fill: currentColor;
    stroke: none;
}
@media(max-width:820px){.topbar span{display:none}.topbar-inner{justify-content:center}.hero{padding:62px 0}.hero-grid,.split,.quote-grid,.contact-grid{grid-template-columns:1fr;gap:40px}.hero-visual{height:280px}.monitor{width:290px;height:185px;right:4%}.monitor i{left:90px}.hero-label{right:0}.product-grid{grid-template-columns:repeat(2,1fr)}.status-row .product-grid{grid-template-columns:repeat(2,1fr)}.service-grid{grid-template-columns:repeat(2,1fr)}.brand-grid{grid-template-columns:repeat(3,1fr)}nav{display:none;position:absolute;top:76px;left:0;right:0;background:#fff;padding:20px;box-shadow:0 10px 20px #102b4b18;flex-direction:column;align-items:stretch;gap:15px}nav.open{display:flex}.menu-toggle{display:block}.nav-cta{text-align:center}.section{padding:72px 0}.section-head{align-items:start;flex-direction:column}.search{width:100%}.footer-grid{grid-template-columns:1fr}.footer-grid div:not(.brand){flex-wrap:wrap}}@media(max-width:460px){.topbar-inner{gap:12px;font-size:.67rem}.topbar a:last-child{display:none}.container{width:min(100% - 28px,1150px)}.hero h1{font-size:2.8rem}.trust-row{gap:21px}.hero-visual{height:240px}.monitor{transform:scale(.8);transform-origin:right top}.storage{transform:scale(.75) rotate(-8deg);transform-origin:right bottom}.product-grid,.status-row .product-grid{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}.whatsapp b{display:none}.whatsapp{padding:14px;border-radius:50%}}
.instagram {
    position: fixed;
    right: 18px;
    bottom: 76px;
    background: #d62976;
    color: #fff;
    padding: 12px 16px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(0,0,0,.25);
    z-index: 9999;
}

.instagram b {
    font-size: .8rem;
}

.instagram svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.instagram .instagram-dot {
    fill: currentColor;
    stroke: none;
}

@media(max-width:460px) {
    .instagram b {
        display: none;
    }

    .instagram {
        padding: 14px;
        border-radius: 50%;
        bottom: 72px;
    }
}


.whatsapp,
.instagram {
    position: fixed;
    overflow: visible;
    transition: all .25s ease;
}

/* Hover message */
.hover-text {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    
    background: #13233c;
    color: #fff;
    padding: 9px 14px;
    border-radius: 7px;
    
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    
    transition: all .25s ease;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

/* Small arrow */
.hover-text::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    
    border-width: 6px 0 6px 6px;
    border-style: solid;
    border-color: transparent transparent transparent #13233c;
}

/* Show message on hover */
.whatsapp:hover .hover-text,
.instagram:hover .hover-text {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* WhatsApp hover */
.whatsapp:hover {
    background: #e3c5e3;
    color: #14a87b;
    transform: translateY(-2px);
}

/* Instagram hover */
.instagram:hover {
    background: #e3c5e3;
    color: #d62976;
    transform: translateY(-2px);
}

/* Icon colour follows button */
.whatsapp:hover svg,
.instagram:hover svg {
    color: inherit;
}

/* Keep icon sizes */
.whatsapp svg,
.instagram svg {
    width: 20px;
    height: 20px;
}


/* PRODUCT IMAGE GALLERY */

.product-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 35px;
}

.product-gallery .product-image-link {
  display: block;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.product-gallery img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.35s ease;
  padding: 10px;
}

.product-gallery .product-image-link:hover img {
  transform: scale(1.12);
}

/* Tablet */
@media (max-width: 900px) {
  .product-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 600px) {
  .product-gallery {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ========================================
   PRODUCT IMAGE POPUP
   ======================================== */

.image-popup {
  position: fixed;
  inset: 0;
  z-index: 99999;

  background: rgba(0, 0, 0, 0.92);

  display: block;

  overflow-y: auto;
  overflow-x: hidden;

  padding: 70px 0 40px;
  box-sizing: border-box;
}


/* IMAGE CONTAINER */

.image-popup-content {
  display: block;

  width: 100%;
  height: auto;

  margin: 0 auto;
}


/* IMAGE */

.image-popup-content img {
  display: block;

  width: auto;
  height: auto;

  max-width: 100%;

  max-height: none;

  object-fit: contain;

  margin: 0 auto;

  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}


/* CLOSE BUTTON */

.image-popup-close {
  position: fixed;

  top: 15px;
  right: 20px;

  width: 48px;
  height: 48px;

  border: none;
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.18);
  color: #fff;

  font-size: 34px;
  line-height: 1;

  cursor: pointer;

  z-index: 100000;

  transition: background 0.2s ease;
}

.image-popup-close:hover {
  background: rgba(255, 255, 255, 0.35);
}


/* MOBILE */

@media (max-width: 600px) {

  .image-popup {
    padding: 65px 0 25px;
  }

  .image-popup-close {
    top: 10px;
    right: 12px;

    width: 42px;
    height: 42px;

    font-size: 30px;
  }

}