:root{
  --gray-50:#f2f6f5;
  --white:#ffffff;
  --ink:#15171a;
  --ink-dim:#5c6a67;
  --ink-faint:#8b9a96;
  --blue:#1b2a6b;
  --blue-dark:#10173f;
  --red:#ce3c2b;
  --red-dark:#a92e20;
  --line:rgba(21,23,26,0.08);
  /* combined height of the top bar + nav header at each breakpoint, so the
     hero can be sized to exactly fill the remaining viewport on first load */
  --header-h:4.5rem;               /* mobile: nav only, no top bar */
}
@media (min-width:640px){ :root{ --header-h:6.75rem; } }   /* top bar appears */
@media (min-width:1024px){ :root{ --header-h:7.25rem; } }  /* larger logo/nav padding */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background-color:var(--gray-50);
  color:var(--ink);
  font-family:'Roboto',sans-serif;
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  transition:background-color 0.4s;
  overflow-x:hidden;
}
h1,h2,h3,h4,.display{
  font-family:'Archivo',sans-serif;
  letter-spacing:-0.03em;
  line-height:1.1;
  font-weight:700;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* ---------- surfaces ---------- */
.surface-card{
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(21,23,26,0.04), 0 12px 32px -20px rgba(27,42,107,0.25);
}
.surface-card-hover{ transition:transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease, border-color 0.3s ease; }
.surface-card-hover:hover{
  transform:translateY(-5px);
  border-color:rgba(27,42,107,0.18);
  box-shadow:0 4px 8px rgba(21,23,26,0.04), 0 28px 48px -20px rgba(27,42,107,0.28);
}

/* ---------- buttons ---------- */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  text-align:center;
  white-space:nowrap;
  border-radius:5rem;
  font-weight:700;
  font-size:0.9375rem;
  line-height:1;
  padding:0.9rem 1.9rem;
  transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s ease, background-color 0.3s ease;
}
/* lottie arrow floats at the right edge; the button label stays centered */
.lottie-arrow{
  position:absolute;
  right:1.15rem;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
}
/* paired hero buttons — identical width regardless of label length */
.btn-equal{ min-width:14rem; }
/* all CTAs match the header "Request a Quote" button size */
.btn-sm{ padding:0.9rem 1.9rem; font-size:0.9375rem; }
.btn.text-sm{ font-size:0.9375rem; }
/* advantages section: sharp photo background with navy overlay (matches global reach / categories) */
.advantages-bg{
  position:relative;
  background:url('../media-output/adv/adv-bg-photo.png') center/cover no-repeat;
}
.advantages-bg::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(150deg, rgba(8,12,35,0.9) 0%, rgba(16,23,63,0.78) 45%, rgba(27,42,107,0.72) 100%);
}
.advantages-bg > div{ position:relative; z-index:1; }
.btn-blue{
  background:#1D4ED8; color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,0.12) inset, 0 10px 24px -10px rgba(29,78,216,0.6);
}
.btn-blue:hover{ background:#1636A6; transform:translateY(-2px) scale(1.015); box-shadow:0 14px 30px -8px rgba(29,78,216,0.6); }
.btn-blue:active{ transform:translateY(0) scale(0.98); }
.btn-blue:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

.btn-red{
  background:#E63B2A; color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,0.14) inset, 0 10px 24px -10px rgba(230,59,42,0.55);
}
.btn-red:hover{ background:#C32E1F; transform:translateY(-2px) scale(1.015); box-shadow:0 14px 30px -8px rgba(230,59,42,0.55); }
.btn-red:active{ transform:translateY(0) scale(0.98); }
.btn-red:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

.btn-outline{
  background:transparent; color:var(--ink);
  border:1.5px solid var(--line);
}
.btn-outline:hover{ border-color:var(--blue); color:var(--blue); transform:translateY(-2px); background:rgba(27,42,107,0.03); }
.btn-outline:active{ transform:translateY(0); }
.btn-outline:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

.btn-outline-light{
  background:rgba(255,255,255,0.1); color:#fff;
  border:1.5px solid rgba(255,255,255,0.5);
  backdrop-filter:blur(6px);
}
.btn-outline-light:hover{ background:rgba(255,255,255,0.2); transform:translateY(-2px); }
.btn-outline-light:active{ transform:translateY(0); }

/* ---------- liquid glass buttons ---------- */
.btn-glass{
  border:1px solid rgba(255,255,255,0.25);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 8px 24px -10px rgba(8,12,35,0.35), inset 0 1px 0 rgba(255,255,255,0.3);
  color:#fff;
}
.btn-glass:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 14px 32px -8px rgba(8,12,35,0.4), inset 0 1px 0 rgba(255,255,255,0.45);
}
.btn-glass:active{ transform:translateY(0) scale(0.98); }
.btn-glass:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

.btn-glass-blue{
  background:rgba(27,42,107,0.72);
  border-color:rgba(255,255,255,0.28);
}
.btn-glass-blue:hover{ background:rgba(16,23,63,0.78); }

.btn-glass-red{
  background:rgba(206,60,43,0.68);
  border-color:rgba(255,255,255,0.28);
}
.btn-glass-red:hover{ background:rgba(169,46,32,0.78); }

.btn-glass-white{
  background:rgba(255,255,255,0.18); color:#fff;
  border-color:rgba(255,255,255,0.45);
}
.btn-glass-white:hover{ background:rgba(255,255,255,0.28); }
.btn-glass-white:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* ---------- nav ---------- */
.nav-link{ position:relative; color:var(--ink-dim); transition:color 0.25s ease; font-weight:500; }
.nav-link:hover{ color:var(--ink); }
.nav-link.active{ color:var(--ink); }
.nav-link::after{
  content:''; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:var(--red);
  transition:width 0.3s cubic-bezier(0.16,1,0.3,1);
}
.nav-link:hover::after{ width:100%; }
.nav-link.active::after{ width:100%; }

/* ---------- mobile nav ---------- */
.mobile-menu-toggle{
  display:flex; align-items:center; justify-content:center;
  width:2.5rem; height:2.5rem; border-radius:999px; flex-shrink:0;
  color:var(--ink); background:rgba(21,23,26,0.05);
  transition:background-color 0.25s ease;
}
.mobile-menu-toggle:hover{ background:rgba(21,23,26,0.1); }
.mobile-menu-toggle .icon-close{ display:none; }
.mobile-menu-toggle[aria-expanded="true"] .icon-menu{ display:none; }
.mobile-menu-toggle[aria-expanded="true"] .icon-close{ display:block; }

.mobile-menu{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows 0.35s cubic-bezier(0.16,1,0.3,1);
}
.mobile-menu.open{ grid-template-rows:1fr; }
.mobile-menu-inner{
  overflow:hidden; min-height:0;
  display:flex; flex-direction:column; gap:0.125rem;
  padding-bottom:1.25rem;
}
.mobile-menu:not(.open) .mobile-menu-inner{ padding-bottom:0; }
.mobile-nav-link{
  display:block; padding:0.85rem 0.25rem; font-size:0.95rem; font-weight:500;
  color:var(--ink-dim); border-bottom:1px solid var(--line);
  transition:color 0.2s ease;
}
.mobile-nav-link.active, .mobile-nav-link:hover{ color:var(--ink); }

/* ---------- glass header (transparent, frosted) ---------- */
.glass-topbar{
  background:rgba(255,255,255,0.45);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,0.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
}
.glass-header{
  background:linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.55) 100%);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,0.6);
  box-shadow:0 8px 32px -14px rgba(16,23,63,0.24), inset 0 1px 0 rgba(255,255,255,0.7), inset 0 0 0 1px rgba(255,255,255,0.15);
  transition:background 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;
}
/* compact header on phones — smaller logo + tighter padding so it does not dominate the viewport */
@media (max-width:639px){
  .glass-header .flex.items-center.justify-between{
    padding-top:0.6rem; padding-bottom:0.6rem;
  }
  .glass-header img[alt="NAHU Electric"]{
    height:2.25rem; width:auto;
  }
}

/* ---------- global contact actions ---------- */
.global-contact-actions{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:60;
  display:flex; flex-direction:column; align-items:flex-end; gap:0.75rem;
}
.gc-whatsapp{ --glow:rgba(37,211,102,0.55); }
.gc-email{ --glow:rgba(27,42,107,0.55); }
.gc-wechat{ --glow:rgba(29,78,216,0.55); }
.gc-inquiry{ --glow:rgba(206,60,43,0.55); }
.global-contact-btn{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:3.5rem; height:3.5rem;
  border-radius:50%; text-decoration:none;
  background:transparent;
  border:0;
  box-shadow:
    0 2px 4px rgba(21,23,26,0.05),
    0 12px 26px -10px var(--glow, rgba(21,23,26,0.22));
  transition:transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease;
}
.global-contact-btn:hover{
  transform:translateY(-4px) scale(1.06);
  box-shadow:
    0 4px 8px rgba(21,23,26,0.06),
    0 22px 40px -12px var(--glow, rgba(21,23,26,0.28));
}
.global-contact-btn:active{
  transform:translateY(0) scale(0.95);
}
.global-contact-btn:focus-visible{
  outline:2px solid var(--blue); outline-offset:3px;
}
.gc-icon-wrap{
  width:3.5rem; height:3.5rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; overflow:hidden;
  background:transparent;
}
.gc-icon-wrap img{
  width:3.5rem; height:3.5rem;
  object-fit:cover; display:block;
  transition:transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.global-contact-btn:hover .gc-icon-wrap img{
  transform:scale(1.08);
}
.gc-label{
  position:absolute; right:calc(100% + 0.65rem); top:50%;
  transform:translateY(-50%) translateX(8px);
  white-space:nowrap;
  font-family:'Roboto',sans-serif;
  font-size:0.8125rem; font-weight:600; letter-spacing:0.01em;
  color:var(--ink);
  background:rgba(255,255,255,0.96);
  border:1px solid var(--line);
  border-radius:999px;
  padding:0.4rem 0.85rem;
  box-shadow:0 4px 14px -6px rgba(21,23,26,0.3);
  opacity:0; pointer-events:none;
  transition:opacity 0.25s ease, transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.global-contact-btn:hover .gc-label,
.global-contact-btn:focus-visible .gc-label{
  opacity:1; transform:translateY(-50%) translateX(0);
}

/* center the last region card (Americas) on phone */
@media (max-width:639px){
  .global-reach .region-card:last-child{
    grid-column:1/-1;
    justify-self:center;
  }
}

/* certificates button on phone: compact, above the certification logo row */
@media (max-width:639px){
  #certificates .btn{
    padding:0.55rem 1.15rem;
    font-size:0.8125rem;
    bottom:14%;
  }
}

/* our advantages on phone: compact cards and buttons */
@media (max-width:639px){
  .advantages-bg .surface-card img{ height:7rem; }
  .advantages-bg .surface-card h3{ font-size:0.95rem; }
  .advantages-bg .surface-card .p-5{ padding:0.7rem 0.85rem; }
  .advantages-bg .surface-card p{ font-size:0.7rem; line-height:1.35; }
  .advantages-bg .btn{
    padding:0.55rem 1.15rem;
    font-size:0.8125rem;
  }
  .advantages-bg .grid{ gap:0.9rem; }
}

@media (max-width:639px){
  .global-contact-actions{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:0.5rem;
    right:0; bottom:0; left:0;
    padding:0.5rem 0.6rem 0.6rem;
  }
  /* all buttons same size, close together, chatbot included in the row */
  .global-contact-btn{
    width:2.5rem; height:2.5rem;
  }
  .global-contact-actions .gc-chat{
    width:2.5rem; height:2.5rem;
  }
  .gc-icon-wrap{ width:2.5rem; height:2.5rem; }
  .gc-icon-wrap img{ width:2.5rem; height:2.5rem; }
  .global-contact-actions .gc-chat .gc-icon-wrap{ width:2.5rem; height:2.5rem; }
  .global-contact-actions .gc-chat .gc-icon-wrap img{ width:2.5rem; height:2.5rem; }
  .gc-label{ display:none; }
}

/* ---------- misc components ---------- */
.icon-ring{
  width:2.75rem; height:2.75rem; border-radius:0.85rem;
  display:flex; align-items:center; justify-content:center;
  background:rgba(27,42,107,0.06);
  flex-shrink:0;
}
.icon-ring.red{ background:rgba(206,60,43,0.08); }

.badge-tag{
  display:inline-flex; align-items:center; gap:0.5rem;
  background:#fff; border:1px solid var(--line);
  color:var(--ink-dim); border-radius:999px; padding:0.4rem 1rem; font-size:0.8125rem; font-weight:500;
  box-shadow:0 1px 2px rgba(21,23,26,0.04);
}
.dot-red{ width:6px; height:6px; border-radius:999px; background:var(--red); }

/* products grid: 2 cards per row on phones, tighter card chrome */
@media (max-width:639px){
  #product-grid{ gap:0.75rem; }
  #product-grid .product-card-img{ height:8.5rem; padding:0.5rem; }
  #product-grid .product-card > div{ padding:0.75rem; }
  #product-grid .product-card h3{ font-size:0.875rem; }
}

.fade-up{ opacity:0; transform:translateY(24px); transition:opacity 0.7s ease, transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.fade-up.in{ opacity:1; transform:translateY(0); }
/* smooth bottom-to-up cascade for headings, text and buttons inside each section */
.fade-up > *{ opacity:0; transform:translateY(22px); transition:opacity 0.7s ease, transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.fade-up.in > *{ opacity:1; transform:translateY(0); }
.fade-up.in > *:nth-child(1){ transition-delay:0.05s; }
.fade-up.in > *:nth-child(2){ transition-delay:0.14s; }
.fade-up.in > *:nth-child(3){ transition-delay:0.23s; }
.fade-up.in > *:nth-child(4){ transition-delay:0.32s; }
.fade-up.in > *:nth-child(5){ transition-delay:0.41s; }
.fade-up.in > *:nth-child(6){ transition-delay:0.5s; }
.fade-up.in > *:nth-child(7){ transition-delay:0.59s; }
.fade-up.in > *:nth-child(8){ transition-delay:0.68s; }

/* hero: 3×3 grid of products — bigger, equal-sized boxes */
.hero-media{ height:44rem; }
.hero-float{
  position:absolute;
  width:min(32%, 17rem);
  height:min(31%, 14.5rem);
  object-fit:contain;
  filter:drop-shadow(0 18px 30px rgba(16,23,63,0.32));
  animation:hero-float 7s ease-in-out infinite;
  will-change:transform;
}
/* row 1 */
.hero-float-1{ top:0;    left:1%;  animation-delay:-0.4s; }
.hero-float-2{ top:0;    left:34%; animation-delay:-1.6s; }
.hero-float-3{ top:0;    left:67%; animation-delay:-2.8s; }
/* row 2 */
.hero-float-4{ top:34%;  left:1%;  animation-delay:-0.9s; }
.hero-float-5{ top:34%;  left:34%; animation-delay:-2.1s; }
.hero-float-6{ top:34%;  left:67%; animation-delay:-3.3s; }
/* row 3 */
.hero-float-7{ top:68%;  left:1%;  animation-delay:-4.5s; }
.hero-float-8{ top:68%;  left:34%; animation-delay:-5.7s; }
.hero-float-9{ top:68%;  left:67%; animation-delay:-6.9s; }
@keyframes hero-float{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-14px) rotate(-1deg); }
}
/* hero category cards — transparent product cutouts linking to category pages */
.hero-cat-link{
  display:block;
  cursor:pointer;
}
.hero-cat-img{
  width:100%; height:100%;
  object-fit:contain;
  transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.hero-cat-link:hover .hero-cat-img{ transform:scale(1.08); }

::selection{ background:var(--red); color:#fff; }

.stat-num{ font-family:'Archivo',sans-serif; font-weight:800; letter-spacing:-0.02em; color:var(--ink); }

/* Hero content sized to exactly fill the viewport below the sticky header,
   so the full hero (headline, art, CTAs) is visible on first load with no
   scrolling. Uses svh/dvh where supported to account for mobile browser
   chrome, falling back to vh. */
.hero-viewport-fit{
  min-height:calc(100vh - var(--header-h));
  min-height:calc(100svh - var(--header-h));
}
@supports (height:100dvh){
  .hero-viewport-fit{ min-height:calc(100dvh - var(--header-h)); }
}
@media (max-width:1023px){
  .hero-viewport-fit{ min-height:auto; }
}

/* ---------- hero banner carousel ---------- */
.hero-carousel{
  position:absolute; inset:0; overflow:hidden;
  user-select:none;
}
.hero-carousel-track{
  display:flex; height:100%; width:100%;
  transition:transform 0.8s cubic-bezier(0.65,0,0.35,1);
  cursor:grab;
}
.hero-carousel-track.dragging{ transition:none; cursor:grabbing; }
.hero-carousel-slide{
  flex:0 0 100%; height:100%; position:relative;
}
.hero-carousel-slide img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  pointer-events:none;
}
.hero-carousel-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,15,45,0.72) 0%, rgba(10,15,45,0.55) 50%, rgba(242,246,245,1) 100%);
}

/* ---------- hero video background (replaces carousel) ---------- */
.hero-video-bg{
  position:absolute; inset:0; overflow:hidden;
}
.hero-video-bg video{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  pointer-events:none;
}
.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:2.75rem; height:2.75rem; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.35);
  color:#fff; backdrop-filter:blur(6px);
  transition:background-color 0.3s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
  z-index:20;
}
.carousel-arrow:hover{ background:rgba(255,255,255,0.24); transform:translateY(-50%) scale(1.08); }
.carousel-arrow:active{ transform:translateY(-50%) scale(0.96); }
.carousel-arrow.prev{ left:1.5rem; }
.carousel-arrow.next{ right:1.5rem; }
@media (max-width:639px){
  /* Arrows sit mid-height of the whole hero, which collides with the
     longer stacked text on narrow screens; swipe + dots cover navigation there. */
  .carousel-arrow{ display:none; }
}
/* ---------- Our Journey slider ---------- */
.journey-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:3rem; height:3rem; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.22);
  color:#fff; cursor:pointer; z-index:10;
  transition:background 0.2s ease, transform 0.2s ease;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.journey-arrow:hover{ background:rgba(255,255,255,0.24); }
.journey-prev{ left:-1rem; }
.journey-next{ right:-1rem; }
@media (max-width:767px){
  .journey-prev{ left:0; }
  .journey-next{ right:0; }
}
.journey-slides{ position:relative; }
.journey-track{ will-change:transform; }
.journey-dot{ background:none; border:none; cursor:pointer; padding:0; }
.journey-dot-pip{ display:block; transition:background 0.25s, border-color 0.25s, transform 0.25s; }
.journey-dot:hover .journey-dot-pip{ transform:scale(1.3); }

.carousel-dots{
  position:absolute; bottom:1.75rem; left:50%; transform:translateX(-50%);
  display:flex; gap:0.5rem; z-index:20;
}
.carousel-dot{
  width:1.75rem; height:4px; border-radius:999px;
  background:rgba(255,255,255,0.35);
  transition:background-color 0.3s ease, width 0.3s ease;
}
.carousel-dot.active{ background:#fff; width:2.5rem; }

.hero-product-video{
  filter:drop-shadow(0 25px 45px rgba(8,12,35,0.45)) drop-shadow(0 8px 16px rgba(8,12,35,0.3));
}

/* ---------- page hero (inner pages) ---------- */
.page-hero{
  background:linear-gradient(160deg, var(--blue) 0%, var(--blue-dark) 100%);
}

/* Product-page hero: substation photograph behind the existing white heading.
   The left-weighted gradient keeps the negative space behind the copy dark
   enough for white text while the switchyard stays visible on the right. */
.page-hero-product{
  background-image:
    linear-gradient(100deg,
      rgba(10,15,45,0.92) 0%,
      rgba(10,15,45,0.80) 34%,
      rgba(12,18,52,0.55) 62%,
      rgba(12,18,52,0.42) 100%),
    url('../brand%20assets/products-banner.jpg');
  background-size:cover, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
}
@media (max-width:639px){
  /* narrow viewports crop most of the switchyard away, so lean darker for contrast */
  .page-hero-product{
    background-image:
      linear-gradient(160deg, rgba(10,15,45,0.93) 0%, rgba(12,18,52,0.86) 100%),
      url('../brand%20assets/products-banner.jpg');
    background-position:center, 70% center;
  }
}

/* Case Studies / News / Contact page heroes: same left-dark/right-visible
   treatment as the product hero, each on its own photograph, so all inner
   pages share one consistent premium hero language. */
.page-hero-cases{
  background-image:
    linear-gradient(100deg, rgba(8,12,35,0.90) 0%, rgba(8,12,35,0.72) 38%, rgba(10,16,44,0.42) 68%, rgba(10,16,44,0.30) 100%),
    url('../media-output/pages/img-msffq84r-e7003c32.png');
  background-size:cover, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
}
.page-hero-news{
  background-image:
    linear-gradient(100deg, rgba(8,12,35,0.90) 0%, rgba(8,12,35,0.74) 38%, rgba(10,16,44,0.46) 68%, rgba(10,16,44,0.32) 100%),
    url('../media-output/pages/img-msffq5s1-7e59f5fe.png');
  background-size:cover, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
}
.page-hero-contact{
  background-image:
    linear-gradient(100deg, rgba(8,12,35,0.90) 0%, rgba(8,12,35,0.72) 38%, rgba(10,16,44,0.42) 68%, rgba(10,16,44,0.30) 100%),
    url('../media-output/pages/img-msffq6il-f7987601.png');
  background-size:cover, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
}
@media (max-width:639px){
  .page-hero-cases, .page-hero-news, .page-hero-contact{
    background-position:center, 68% center;
  }
}
/* Company Profile page hero: NAHU isometric smart-city illustration fills
   the full screen with no text overlay — only the clickable hotspots. */
.page-hero-company{
  background-image:url('../media-output/company/company-hero.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* ---------- company profile hero: shining hotspot points ---------- */
.hotspot{ position:absolute; z-index:6; display:flex; align-items:center; gap:0.5rem; }
.hotspot-dot{
  position:relative; width:1.1rem; height:1.1rem; border-radius:999px;
  background:#fff; border:2px solid var(--blue);
  box-shadow:0 0 0 4px rgba(255,255,255,0.55);
  animation:hotspotPulse 2.2s ease-out infinite;
}
.hotspot-dot::after{
  content:""; position:absolute; inset:-4px; border-radius:999px;
  border:2px solid rgba(255,255,255,0.9);
  animation:hotspotPing 2.2s cubic-bezier(0,0,0.2,1) infinite;
}
@keyframes hotspotPulse{
  0%{ box-shadow:0 0 0 0 rgba(255,255,255,0.7), 0 0 18px rgba(59,130,246,0.9); }
  70%{ box-shadow:0 0 0 12px rgba(255,255,255,0), 0 0 18px rgba(59,130,246,0.9); }
  100%{ box-shadow:0 0 0 0 rgba(255,255,255,0), 0 0 18px rgba(59,130,246,0.9); }
}
@keyframes hotspotPing{
  0%{ transform:scale(1); opacity:0.8; }
  100%{ transform:scale(2.6); opacity:0; }
}
/* Preview card — always visible, grows on hover */
.hotspot-preview{
  display:flex; flex-direction:column; align-items:center; gap:0.2rem;
  pointer-events:none;
}
.hotspot-preview-title{
  padding:0.28rem 0.7rem; border-radius:999px; font-size:0.7rem; font-weight:700;
  background:rgba(255,255,255,0.95); color:var(--blue);
  border:1px solid rgba(21,23,26,0.1);
  white-space:nowrap; letter-spacing:0.03em;
  box-shadow:0 2px 8px rgba(8,12,35,0.18);
  transition:background 0.2s ease, transform 0.2s ease;
}
.hotspot:hover .hotspot-preview-title,
.hotspot:focus .hotspot-preview-title{
  background:#fff; transform:scale(1.08);
  box-shadow:0 4px 16px rgba(8,12,35,0.22);
}
@media (max-width:639px){
  .hotspot-preview-title{ font-size:0.6rem; padding:0.2rem 0.5rem; }
}

/* ---------- company profile hero: animated trucks & cars (removed) ---------- */

/* ---------- global reach ---------- */
.global-reach{
  background:#0a1024;
}
.global-reach-bg{
  position:absolute; inset:0; overflow:hidden;
}
.global-reach-bg img{
  width:100%; height:100%; object-fit:cover; display:block;
  object-position:100% center; /* keep the China origin visible on narrow screens */
}
.global-reach-lines{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none;
}
.global-reach-shade{
  position:absolute; inset:0;
  background:linear-gradient(150deg, rgba(8,12,35,0.82) 0%, rgba(10,16,44,0.64) 40%, rgba(10,16,44,0.52) 100%);
}
/* animated connection arcs between continents */
.gr-line{
  stroke:rgba(126,185,255,0.55);
  stroke-width:1.6;
  stroke-dasharray:6 10;
  animation:gr-dash 3s linear infinite;
  vector-effect:non-scaling-stroke;
}
.gr-line-faint{
  stroke:rgba(126,185,255,0.30);
  stroke-width:1.2;
  stroke-dasharray:3 14;
  animation-duration:6s;
}
/* red routes radiating outward from China */
.gr-arrow{
  stroke:rgba(255,110,80,0.9);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-dasharray:10 12;
  animation:gr-dash-red 2.8s linear infinite;
  vector-effect:non-scaling-stroke;
}
@keyframes gr-dash-red{ to{ stroke-dashoffset:-88; } }
@keyframes gr-dash{ to{ stroke-dashoffset:-64; } }
.gr-dot{
  animation:none; /* travel handled by SMIL animateMotion for full browser support */
}
@keyframes gr-travel{
  from{ offset-distance:0%; opacity:0; }
  5%{ opacity:1; }
  90%{ opacity:1; }
  to{ offset-distance:100%; opacity:0; }
}
.gr-hub{
  animation:gr-pulse 3.2s ease-in-out infinite;
}
@keyframes gr-pulse{
  0%,100%{ opacity:0.5; }
  50%{ opacity:1; }
}
/* origin marker on China */
.gr-origin{
  animation:gr-pulse 2.4s ease-in-out infinite;
}
.gr-origin-ring{
  animation:gr-ring-fade 3s ease-in-out infinite;
}
@keyframes gr-ring-fade{
  0%,100%{ opacity:0.9; }
  50%{ opacity:0.4; }
}
.gr-ring{
  transform-box:fill-box;
  transform-origin:center;
  animation:gr-ring 3.6s cubic-bezier(0.22,1,0.36,1) infinite;
}
@keyframes gr-ring{
  0%{ transform:scale(0.12); opacity:0.9; }
  100%{ transform:scale(2.8); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .gr-line, .gr-line-faint, .gr-arrow, .gr-dot, .gr-hub, .gr-origin, .gr-origin-ring, .gr-ring{ animation:none; }
}
.global-reach-map{
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 30px 70px -30px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.global-reach-map img{ display:block; }

.region-card{
  border-radius:1.25rem; padding:1.75rem 1.25rem; text-align:center;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter:blur(6px);
  transition:transform 0.4s cubic-bezier(0.16,1,0.3,1), background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.4s ease;
}
.region-card:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.22);
  box-shadow:0 20px 40px -20px rgba(0,0,0,0.5);
}
.region-icon{
  width:4.25rem; height:4.25rem; margin:0 auto; border-radius:999px;
  background:#fff; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px -10px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.5) inset;
}
.region-icon img{ width:100%; height:100%; object-fit:cover; }

/* ---------- product category sidebar ---------- */
.category-item{
  display:flex; align-items:center; justify-content:space-between; gap:0.5rem;
  width:100%; text-align:left;
  padding:0.65rem 0.75rem; border-radius:0.7rem;
  font-size:0.875rem; font-weight:500; color:var(--ink-dim);
  transition:background-color 0.25s ease, color 0.25s ease;
}
.category-item:hover{ background:rgba(27,42,107,0.05); color:var(--ink); }
.category-item.active{ background:var(--blue); color:#fff; }
.category-item .category-count{
  font-size:0.75rem; font-weight:600;
  background:rgba(21,23,26,0.06); color:var(--ink-dim);
  border-radius:999px; padding:0.1rem 0.55rem;
}
.category-item.active .category-count{ background:rgba(255,255,255,0.2); color:#fff; }
/* empty / coming-soon categories */
.category-item-empty{
  display:flex; align-items:center; justify-content:space-between; gap:0.5rem;
  width:100%; padding:0.55rem 0.75rem; border-radius:0.7rem;
  font-size:0.8125rem; font-weight:400; color:var(--ink-faint);
  cursor:default; user-select:none;
}
.category-item-empty .cat-badge{
  font-size:0.65rem; font-weight:600; letter-spacing:0.03em;
  background:rgba(27,42,107,0.06); color:var(--ink-faint);
  border-radius:999px; padding:0.1rem 0.5rem; white-space:nowrap;
}
/* category list scrollable sidebar */
#category-list{
  max-height:calc(100vh - 9rem);
  overflow-y:auto; overflow-x:hidden;
  padding-right:0.35rem;
  scrollbar-width:thin;
  scrollbar-color:rgba(27,42,107,0.35) transparent;
}
#category-list::-webkit-scrollbar{ width:6px; }
#category-list::-webkit-scrollbar-track{ background:transparent; }
#category-list::-webkit-scrollbar-thumb{ background:rgba(27,42,107,0.3); border-radius:999px; }
#category-list::-webkit-scrollbar-thumb:hover{ background:rgba(27,42,107,0.5); }

/* sidebar section divider */
.cat-group-divider{
  display:flex; align-items:center; gap:0.5rem;
  margin:0.85rem 0 0.35rem; padding:0 0.25rem;
  font-size:0.68rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-faint);
}
.cat-group-divider::after{
  content:''; flex:1; height:1px; background:var(--line);
}

/* ---------- product pagination ---------- */
#product-pagination{ margin-top:2rem; }
.page-link{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2.5rem; padding:0.65rem 0.95rem; border-radius:999px;
  border:1px solid var(--line); background:#fff; color:var(--ink);
  font-size:0.875rem; font-weight:600;
  transition:transform 0.25s cubic-bezier(0.16,1,0.3,1), border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.page-link:hover{ transform:translateY(-2px); border-color:rgba(27,42,107,0.25); background:#f8fafc; }
.page-link.is-active{ background:var(--blue); border-color:var(--blue); color:#fff; }
.page-link.is-disabled{ opacity:0.45; cursor:not-allowed; }

/* ---------- hero copy ---------- */
.hero-text{
  text-shadow:0 2px 4px rgba(8,12,35,0.5), 0 8px 30px rgba(8,12,35,0.3);
}
.hero-badge{
  display:inline-flex; align-items:center; gap:0.5rem;
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.25);
  color:#fff; border-radius:999px; padding:0.45rem 1.1rem; font-size:0.8125rem; font-weight:500;
  backdrop-filter:blur(8px);
}
.hero-accent{
  display:block; width:3rem; height:3px; border-radius:999px;
  background:var(--red); margin-bottom:1.5rem;
}

/* ---------- Alibaba storefront link ---------- */
.btn-alibaba{
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.55rem 1.1rem; border-radius:5rem;
  font-size:0.8125rem; font-weight:600;
  color:#fff; background:#ff6a00;
  border:1px solid rgba(255,255,255,0.25);
  box-shadow:0 8px 20px -10px rgba(255,106,0,0.7);
  transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1), background-color 0.25s ease, box-shadow 0.25s ease;
}
.btn-alibaba:hover{ background:#e85f00; transform:translateY(-2px); box-shadow:0 12px 26px -10px rgba(255,106,0,0.8); }
.btn-alibaba:active{ transform:translateY(0); }
.btn-alibaba:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

/* ---------- best sellers: soft framed product cards, hover grow ---------- */
#best-sellers .surface-card{
  background:rgba(255,255,255,0.85);
  border:1px solid rgba(27,42,107,0.10);
  box-shadow:0 1px 2px rgba(21,23,26,0.03), 0 10px 26px -16px rgba(27,42,107,0.18);
}
#best-sellers .surface-card-hover{ transition:transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease, border-color 0.35s ease; }
#best-sellers .surface-card-hover:hover{
  transform:scale(1.03);
  border-color:rgba(27,42,107,0.22);
  box-shadow:0 1px 2px rgba(21,23,26,0.03), 0 22px 42px -20px rgba(27,42,107,0.30);
}
#best-sellers .product-card-img{
  background:transparent;
}
#best-sellers .product-card-img img{
  filter:none;
}
/* ---------- best-seller rank badge ---------- */
.bestseller-rank{
  position:absolute; top:0.7rem; left:0.7rem; z-index:2;
  width:1.6rem; height:1.6rem; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:var(--blue); color:#fff;
  font-family:'Archivo',sans-serif; font-weight:700; font-size:0.75rem;
  box-shadow:0 2px 8px -2px rgba(16,23,63,0.5);
}

/* ---------- product card image (clean white catalog presentation) ---------- */
.product-card-img {
  background: #fff;
}
.product-card-img img {
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.06));
}

/* ---------- product detail gallery ---------- */
.pg-thumbs{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(72px, 1fr)); gap:0.6rem;
}
.pg-thumb{
  border:1px solid var(--line); border-radius:0.65rem; overflow:hidden;
  background:#fff; padding:0.25rem; aspect-ratio:1;
  display:flex; align-items:center; justify-content:center;
  transition:border-color 0.25s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
.pg-thumb img{ width:100%; height:100%; object-fit:contain; }
.pg-thumb:hover{ border-color:rgba(27,42,107,0.35); transform:translateY(-2px); }
.pg-thumb.active{ border-color:var(--blue); box-shadow:0 0 0 1px var(--blue) inset; }
.pg-thumb:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }

/* ---------- language switcher ---------- */
.lang-btn{
  display:inline-flex; align-items:center; gap:0.45rem;
  background:rgba(255,255,255,0.9);
  border:1px solid rgba(21,23,26,0.1);
  border-radius:999px;
  padding:0.3rem 0.65rem;
  cursor:pointer;
  font-family:'Roboto',sans-serif;
  font-size:0.75rem; font-weight:600; letter-spacing:0.06em;
  color:var(--ink);
  box-shadow:0 1px 3px rgba(21,23,26,0.06), 0 6px 14px -8px rgba(16,23,63,0.25);
  transition:transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease, background 0.3s ease;
}
.lang-btn img{ border-radius:2px; display:block; width:1.15rem; height:0.85rem; object-fit:cover; box-shadow:0 0 0 1px rgba(21,23,26,0.08); }
.lang-btn:hover{ transform:translateY(-1px); background:#fff; box-shadow:0 2px 6px rgba(21,23,26,0.08), 0 10px 20px -10px rgba(16,23,63,0.35); }
.lang-btn:active{ transform:translateY(0) scale(0.97); }
.lang-btn:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

.lang-popover{
  position:fixed; z-index:200;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0.35rem;
  background:rgba(255,255,255,0.97);
  border:1px solid rgba(21,23,26,0.08);
  border-radius:1rem;
  padding:0.6rem;
  min-width:15rem;
  max-height:min(26rem, calc(100vh - 5rem));
  overflow-y:auto;
  box-shadow:0 16px 48px -16px rgba(16,23,63,0.35), inset 0 1px 0 rgba(255,255,255,0.9);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.lang-option{
  display:flex; align-items:center; gap:0.55rem;
  padding:0.5rem 0.6rem;
  border:0; border-radius:0.6rem;
  background:transparent;
  cursor:pointer;
  font-family:'Roboto',sans-serif;
  font-size:0.8125rem; font-weight:500;
  color:var(--ink);
  text-align:left;
  transition:background 0.2s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
.lang-option img{ width:1.3rem; height:0.95rem; object-fit:cover; border-radius:2px; box-shadow:0 0 0 1px rgba(21,23,26,0.08); }
.lang-option:hover{ background:rgba(21,23,26,0.06); transform:translateX(2px); }
.lang-option:active{ transform:scale(0.98); }
.lang-option:focus-visible{ outline:2px solid var(--blue); outline-offset:1px; }
.lang-option.is-current{ background:rgba(27,42,107,0.08); color:var(--blue); font-weight:700; }

/* ---------- Amiri Arabic fonts ---------- */
@font-face{
  font-family:'Amiri';
  src:url('../brand assets/Amiri-Regular.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Amiri';
  src:url('../brand assets/Amiri-Bold.ttf') format('truetype');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Amiri';
  src:url('../brand assets/Amiri-Italic.ttf') format('truetype');
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Amiri';
  src:url('../brand assets/Amiri-BoldItalic.ttf') format('truetype');
  font-weight:700; font-style:italic; font-display:swap;
}

/* Arabic font (layout stays LTR) */
html[lang="ar"] body,
html[lang="ar"] .font-archivo,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4,
html[lang="ar"] .lang-btn, html[lang="ar"] .lang-option{
  font-family:'Amiri', 'Segoe UI', Tahoma, sans-serif;
}
html[lang="ar"] .hero-text{ font-family:'Amiri', 'Segoe UI', Tahoma, sans-serif !important; }

/* ---------- AI sales chatbot ---------- */
@media (max-width:639px){
  .global-contact-actions .gc-wechat{ order:1; }
  .global-contact-actions .gc-linkedin{ order:2; }
  .global-contact-actions .gc-whatsapp{ order:3; }
  .global-contact-actions .gc-chat{ order:4; }
  .global-contact-actions .gc-email{ order:5; }
  .global-contact-actions .gc-facebook{ order:6; }
}

/* WeChat QR modal */
.wechat-modal{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  background:rgba(13,20,40,0.55);
  backdrop-filter:blur(4px);
  opacity:0; pointer-events:none;
  transition:opacity 0.25s ease;
}
.wechat-modal.open{ opacity:1; pointer-events:auto; }
.wechat-modal-card{
  position:relative;
  background:#fff; border-radius:1.25rem;
  padding:2rem 2.25rem 1.75rem;
  text-align:center;
  box-shadow:0 30px 60px -20px rgba(13,20,40,0.45);
  transform:translateY(12px) scale(0.97);
  transition:transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.wechat-modal.open .wechat-modal-card{ transform:translateY(0) scale(1); }
.wechat-modal-card img{
  width:15rem; height:15rem;
  border-radius:0.75rem;
  border:1px solid var(--line);
  display:block; margin:0 auto;
}
.wechat-modal-title{
  margin-top:1rem;
  font-size:0.9375rem; font-weight:600; color:var(--ink);
}
.wechat-modal-close{
  position:absolute; top:0.75rem; right:0.9rem;
  width:2rem; height:2rem;
  display:flex; align-items:center; justify-content:center;
  border-radius:9999px;
  border:none; cursor:pointer;
  background:var(--ink-faint);
  color:#fff; font-size:1.15rem; line-height:1;
  transition:background-color 0.2s ease;
}
.wechat-modal-close:hover{ background:var(--red); }
.chatbot-panel{
  position:fixed; right:1.5rem; bottom:13.5rem; z-index:150;
  width:24rem; max-width:calc(100vw - 3rem);
  height:34rem; max-height:calc(100vh - 15rem);
  display:flex; flex-direction:column;
  background:#fff; border:1px solid rgba(21,23,26,0.08); border-radius:1.25rem;
  box-shadow:0 24px 64px -20px rgba(16,23,63,0.4);
  overflow:hidden;
  opacity:0; visibility:hidden; transform:translateY(12px) scale(0.98);
  transition:opacity 0.3s ease, transform 0.35s cubic-bezier(0.16,1,0.3,1), visibility 0.3s;
}
.chatbot-panel.is-open{ opacity:1; visibility:visible; transform:none; }
.chatbot-head{
  display:flex; align-items:center; gap:0.75rem; padding:0.9rem 1rem;
  background:linear-gradient(135deg, var(--blue), #10173f); color:#fff;
}
.chatbot-avatar{ border-radius:50%; box-shadow:0 0 0 2px rgba(255,255,255,0.35); }
.chatbot-head-txt{ flex:1; min-width:0; }
.chatbot-title{ font-family:'Archivo',sans-serif; font-weight:700; font-size:0.95rem; }
.chatbot-status{ font-size:0.7rem; opacity:0.85; display:flex; align-items:center; gap:0.35rem; }
.chatbot-dot{ width:7px; height:7px; border-radius:50%; background:#3ddc6f; box-shadow:0 0 0 3px rgba(61,220,111,0.25); }
.chatbot-close{
  background:transparent; border:0; color:#fff; font-size:1.4rem; line-height:1;
  cursor:pointer; padding:0.25rem; opacity:0.8;
  transition:opacity 0.2s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
.chatbot-close:hover{ opacity:1; transform:rotate(90deg); }
.chatbot-body{ flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:0.5rem; background:var(--gray-50); }
.chatbot-msg{ display:flex; }
.chatbot-msg.is-user{ justify-content:flex-end; }
.chatbot-bubble{
  max-width:82%; padding:0.6rem 0.85rem; border-radius:1rem;
  font-size:0.85rem; line-height:1.45; font-weight:300; color:var(--ink);
  background:#fff; border:1px solid rgba(21,23,26,0.06);
  box-shadow:0 1px 3px rgba(21,23,26,0.05); white-space:pre-wrap;
}
.chatbot-msg.is-user .chatbot-bubble{ background:var(--blue); color:#fff; border:0; border-bottom-right-radius:0.25rem; }
.chatbot-msg.is-bot .chatbot-bubble{ border-bottom-left-radius:0.25rem; }
.chatbot-typing{ display:flex; gap:0.25rem; align-items:center; }
.chatbot-typing span{ width:7px; height:7px; border-radius:50%; background:var(--ink-faint); animation:chatbot-blink 1.2s infinite ease-in-out; }
.chatbot-typing span:nth-child(2){ animation-delay:0.2s; }
.chatbot-typing span:nth-child(3){ animation-delay:0.4s; }
@keyframes chatbot-blink{ 0%,80%,100%{ opacity:0.25; transform:translateY(0); } 40%{ opacity:1; transform:translateY(-3px); } }
.chatbot-quick{ display:flex; flex-wrap:wrap; gap:0.4rem; padding:0 0.5rem 0.5rem; }
.chatbot-chip{
  font-size:0.75rem; font-weight:500; color:var(--blue);
  background:rgba(27,42,107,0.07); border:1px solid rgba(27,42,107,0.18);
  border-radius:999px; padding:0.35rem 0.8rem; cursor:pointer;
  transition:background 0.2s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
.chatbot-chip:hover{ background:rgba(27,42,107,0.14); transform:translateY(-1px); }
.chatbot-input-row{ display:flex; gap:0.5rem; padding:0.75rem; border-top:1px solid var(--line); background:#fff; }
.chatbot-input{
  flex:1; border:1px solid rgba(21,23,26,0.14); border-radius:999px;
  padding:0.55rem 0.95rem; font-size:0.85rem; font-weight:300; color:var(--ink);
  outline:none; transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
.chatbot-input:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(27,42,107,0.12); }
.chatbot-send{
  border:0; border-radius:999px; padding:0.55rem 1.1rem;
  background:var(--blue); color:#fff; font-size:0.85rem; font-weight:600; cursor:pointer;
  transition:background 0.2s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
.chatbot-send:hover{ background:var(--blue-dark); transform:translateY(-1px); }
.chatbot-foot{
  text-align:center; font-size:0.65rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-faint); padding:0.4rem; background:#fff; border-top:1px solid rgba(21,23,26,0.04);
}
@media (max-width:639px){
  .chatbot-panel{
    right:0.75rem; left:0.75rem; width:auto;
    bottom:5.5rem; height:min(70vh, 38rem); max-height:calc(100vh - 6.5rem);
  }
}

/* ---------- header products dropdown ---------- */
.nav-dd{ position:relative; }
.nav-dd-trigger{
  display:inline-flex; align-items:center; gap:0.3rem;
  background:transparent; border:0; padding:0.4rem 0.55rem;
  font-size:0.8rem; font-weight:500; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--ink-dim); text-decoration:none; cursor:pointer;
  transition:color 0.25s ease;
}
.nav-dd-trigger:hover{ color:var(--ink); }
.nav-dd-trigger .nav-dd-caret{
  width:0.6rem; height:0.6rem; flex-shrink:0;
  transition:transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.nav-dd:hover .nav-dd-trigger .nav-dd-caret{ transform:rotate(180deg); }
.nav-dd-panel{
  position:absolute; top:calc(100% + 0.6rem); left:50%; transform:translateX(-50%);
  min-width:46rem;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:0.25rem 1.25rem;
  padding:1.1rem 1.25rem;
  background:rgba(255,255,255,0.98);
  border:1px solid rgba(21,23,26,0.08);
  border-radius:1rem;
  box-shadow:0 24px 56px -18px rgba(16,23,63,0.35), inset 0 1px 0 rgba(255,255,255,0.9);
  opacity:0; visibility:hidden; transform:translateX(-50%) translateY(8px);
  transition:opacity 0.25s ease, transform 0.3s cubic-bezier(0.16,1,0.3,1), visibility 0.25s;
}
.nav-dd:hover .nav-dd-panel,
.nav-dd-trigger[aria-expanded="true"] + .nav-dd-panel,
.nav-dd-panel:hover{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.nav-dd-col{ display:flex; flex-direction:column; gap:0.15rem; }
.nav-dd-head{
  font-size:0.68rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--blue); padding:0.3rem 0.5rem 0.35rem; margin-bottom:0.15rem;
  border-bottom:1px solid rgba(27,42,107,0.12);
}
.nav-dd-link{
  font-size:0.82rem; font-weight:400; color:var(--ink-dim);
  padding:0.32rem 0.5rem; border-radius:0.5rem;
  transition:background 0.2s ease, color 0.2s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
.nav-dd-link:hover{ background:rgba(27,42,107,0.06); color:var(--ink); transform:translateX(2px); }
.nav-dd-all{
  margin-top:0.3rem; font-size:0.8rem; font-weight:600; color:var(--blue);
  padding:0.4rem 0.5rem; border-top:1px solid rgba(21,23,26,0.06);
  transition:color 0.2s ease;
}
.nav-dd-all:hover{ color:var(--blue-dark); }

/* categories section: premium navy tech background */
.categories-bg{
  position:relative;
  background:url('../media-output/pages/categories-bg.png') center/cover no-repeat;
}
.categories-bg::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(16,23,63,0.88), rgba(27,42,107,0.85));
}
.categories-bg > div{ position:relative; z-index:1; }

/* ===== Footer (shadcn-style 4-column, brand colors) ===== */
.site-footer{ background:#fff; }
.site-footer-title{ margin-bottom:1rem; font-size:1.125rem; font-weight:600; color:var(--ink); letter-spacing:-0.01em; }
.site-footer-link{ color:var(--ink-dim); transition:color .2s ease; }
.site-footer-link:hover{ color:var(--blue); }
.site-footer-social{ display:inline-flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; border-radius:9999px; border:1px solid var(--line); color:var(--ink-dim); transition:color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease; }
.site-footer-social:hover{ color:var(--blue); border-color:var(--blue); background:rgba(27,42,107,0.06); transform:translateY(-2px); }
.site-footer-glow{ position:absolute; top:-1.5rem; right:-1rem; width:6rem; height:6rem; border-radius:9999px; background:rgba(27,42,107,0.10); filter:blur(2rem); pointer-events:none; }


/* Product detail page layout — same width & grid as products.html */
.prod-detail-layout{
  display:grid; gap:2.5rem; align-items:start;
}
@media(min-width:1024px){
  .prod-detail-layout{ grid-template-columns:260px 1fr; }
}