/* ============================================
   Clever Lifting Global - Complete Stylesheet
   Company: Hebei Clever Intelligent Technology Co., Ltd.
   Domain: clever-lifting.com
   ============================================ */

/* ---- CSS Variables ---- */
:root {
  --primary: #1a365d;
  --primary-light: #2b6cb0;
  --primary-dark: #0f2440;
  --accent: #e53e3e;
  --accent-hover: #c53030;
  --bg-light: #f7fafc;
  --bg-white: #ffffff;
  --text-dark: #1a202c;
  --text-medium: #4a5568;
  --text-light: #718096;
  --border: #e2e8f0;
  --border-dark: #cbd5e0;
  --shadow: 0 2px 10px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.12);
  --shadow-hover: 0 8px 25px rgba(0,0,0,0.15);
  --radius: 8px;
  --radius-lg: 12px;
  --transition: 0.3s ease;
  --max-width: 1200px;
  --nav-height: 72px;
}

/* ---- Reset & Base ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--text-dark);
  background: var(--bg-light);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--primary-light);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--accent); }

ul { list-style: none; }

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

.section {
  padding: 80px 0;
}

.section-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
  text-align: center;
  margin-bottom: 12px;
}

.section-subtitle {
  font-size: 1.1rem;
  color: var(--text-medium);
  text-align: center;
  max-width: 650px;
  margin: 0 auto 48px;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  border: none;
  text-decoration: none;
  font-family: inherit;
  line-height: 1;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover {
  background: var(--accent-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(229,62,62,0.35);
}

.btn-secondary {
  background: var(--primary);
  color: #fff;
}
.btn-secondary:hover {
  background: var(--primary-dark);
  color: #fff;
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}
.btn-outline:hover {
  background: var(--primary);
  color: #fff;
}

.btn-sm {
  padding: 10px 24px;
  font-size: 0.875rem;
}

/* ---- Main content ---- */
main {
  min-width: 0;
}

/* ---- Navigation ---- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-height);
  background: var(--bg-white);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  z-index: 1000;
  transition: box-shadow var(--transition);
}

.navbar.scrolled {
  box-shadow: 0 2px 20px rgba(0,0,0,0.1);
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.navbar .container nav {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--primary);
  text-decoration: none;
}
.nav-logo:hover { color: var(--primary); }
.nav-logo img { height: 38px; width: auto; }

/* Nav Links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-links > li { position: relative; }

.nav-links a {
  display: block;
  padding: 10px 16px;
  color: var(--text-dark);
  font-weight: 500;
  font-size: 0.95rem;
  border-radius: 6px;
  transition: all var(--transition);
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--primary-light);
  background: rgba(43,108,176,0.08);
}

.nav-links .btn {
  padding: 10px 20px;
  margin-left: 8px;
}

/* Dropdown */
.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: var(--bg-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.25s ease;
  z-index: 100;
}

.dropdown:hover .dropdown-menu,
.dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu a {
  padding: 10px 14px;
  font-size: 0.9rem;
  white-space: nowrap;
}
.dropdown-menu a:hover { background: var(--bg-light); }

.dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.dropdown-toggle::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  transition: transform var(--transition);
}

/* Mobile Menu */
.mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  background: none;
  border: none;
}
.mobile-toggle span {
  display: block;
  width: 26px;
  height: 2.5px;
  background: var(--text-dark);
  border-radius: 2px;
  transition: all var(--transition);
}
.mobile-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
.mobile-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }

/* ---- Hero Section ---- */
.hero {
  padding: 140px 0 80px;
  min-height: 85vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  right: -5%;
  top: 50%;
  transform: translateY(-50%);
  width: 50%;
  max-width: 600px;
  opacity: 0.15;
  pointer-events: none;
}

.hero .container { position: relative; z-index: 1; }

.hero-content { max-width: 620px; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.12);
  padding: 8px 18px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 24px;
  backdrop-filter: blur(4px);
}

.hero h1 {
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 20px;
}

.hero h1 span { color: #fc8181; }

.hero p {
  font-size: 1.15rem;
  line-height: 1.7;
  opacity: 0.9;
  margin-bottom: 36px;
}

.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }

.hero-buttons .btn-primary {
  background: #fff;
  color: var(--primary);
}
.hero-buttons .btn-primary:hover {
  background: #fc8181;
  color: #fff;
  box-shadow: 0 4px 20px rgba(252,129,129,0.4);
}

.hero-buttons .btn-outline {
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}
.hero-buttons .btn-outline:hover {
  background: rgba(255,255,255,0.1);
  border-color: #fff;
}

/* ---- Hero Variants ---- */
.hero-sm {
  padding: 120px 0 50px;
  min-height: auto;
}
.hero-sm h1, .hero-sm .banner-title { font-size: 2.2rem; }
.hero-sm p { font-size: 1rem; margin-bottom: 0; }

/* ---- Product Cards Grid ---- */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px;
}

.product-card {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: all var(--transition);
  border: 1px solid var(--border);
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: var(--primary-light);
}

.product-card-img {
  height: 260px;
  background: var(--bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.product-card-img img {
  max-height: 220px;
  width: auto;
  transition: transform var(--transition);
}
.product-card:hover .product-card-img img {
  transform: scale(1.08);
}

.product-card-body {
  padding: 24px;
}

.product-card-body h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 8px;
}

.product-card-body p {
  font-size: 0.9rem;
  color: var(--text-medium);
  line-height: 1.6;
  margin-bottom: 16px;
}

/* ---- Product Gallery ---- */
.product-gallery {
  margin: 40px 0;
}
.product-gallery-grid {
  display: grid;
  /* Three columns, not two. At two the tiles filled the whole article column,
     so the gallery took a full band of the page before any specification text.
     Measured tile sizes at three columns: 273px at a 1280 viewport, 215px at
     1024. Narrow screens step down - see the media queries below, which are
     less obvious than they look. */
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.gallery-item {
  display: block;
  text-align: center;
  background: var(--bg-white);
  border-radius: var(--radius);
  overflow: hidden;
  /* The 1px frame and the hover shadow live on the tile, not on the <img>.
     Both used to be on the image and neither worked: the shadow was clipped
     away by this very overflow rule, so it never actually showed, and the
     frame would be carried out past the tile edge by the hover scale and cut
     off. On the tile they stay put while the photo grows inside them. */
  border: 1px solid var(--border);
  transition: transform var(--transition), border-color var(--transition),
              box-shadow var(--transition);
}
.gallery-item:hover {
  transform: translateY(-3px) scale(1.1);
  border-color: var(--primary-light);
  box-shadow: var(--shadow-hover);
  /* Paints the enlarged tile over its neighbours. At 1.1 it grows 13.7px per
     side against a 20px gap, so nothing actually overlaps - this is only here
     to keep sub-pixel rounding from dropping a hairline of the neighbour on
     top of it. */
  position: relative;
  z-index: 1;
}
.gallery-item img {
  width: 100%;
  max-width: 500px;
  height: auto;
  display: block;
  margin: 0 auto;
  /* No border or radius of its own - the tile draws the frame and rounds the
     corners, and the hover scale would drag both out of view. */
  transition: transform var(--transition);
  /* The gallery photos arrive at three different aspect ratios - 1.33
     landscape, 1.0 square and 0.75 portrait. With only `width: 100%; height:
     auto` the height followed each photo, so a portrait shot rendered 562px
     tall on the same page as a landscape one at 314px: nearly double, and it
     read as "some of these images are huge". One square box per tile with the
     photo contained inside it makes them all occupy the same area. Nothing is
     cropped - `contain` letterboxes rather than `cover` cropping - and the
     letterbox shows the white .gallery-item background. */
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
/* No `img { transform: scale() }` here, deliberately. Scaling the photo inside
   its fixed tile does enlarge it, but the tile's overflow: hidden then crops
   whatever leaves the frame - and these gallery images carry captions right up
   to the edge ("Safety Hook", "Auto Repair"), so a 1.12 scale sliced the
   leading S off. Hovering used to only lift the tile 3px and recolour a 1px
   frame, which read as "the picture moved" rather than "the picture got
   bigger". Growing the whole tile gives the same enlargement with nothing cut:
   the tile holds nothing but the photo, so the picture scales by exactly the
   same 1.1 and the full frame stays visible. */

/* A plain step down, 3 -> 2 -> 1.

   This used to be 3 -> 2 -> 3 -> 2 -> 1, an odd sequence that existed only to
   chase <main>, which was not monotonic in the viewport: the sidebar appeared
   at 769px and took ~300px with it, so the article column shrank as the screen
   got smaller and then jumped back up at 768px when the sidebar vanished.
   Three columns across that dip produced 173px tiles at 900px and 140px at
   800px - smaller than the phone layout.

   The sidebar now collapses at 1024px (see its own rule above), which makes
   <main> monotonic again, so the column count can be too. Breakpoints are
   where a three-column row would drop below ~200px per tile: <main> is
   viewport minus 48px of container padding, so 3 columns need 640px of main
   (viewport 688) and 2 need 420px (viewport 468). */
@media (max-width: 680px) {
  .product-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 460px) {
  .product-gallery-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .product-gallery {
    margin: 24px 0;
  }
}

/* ---- Image lightbox ----
   Opt-in per container: put `data-zoom` on a wrapper and every <img> inside it
   opens in an overlay (see the lightbox block in js/main.js). Nothing on the
   page changes until a page opts in, so this can be rolled out one gallery at
   a time.

   The overlay deliberately does NOT upscale. The gallery files are 600px on
   the long edge, so the image renders at its natural size and only ever
   shrinks to fit; stretching it across a 1440px screen would just show a soft
   one. Against a 273px thumbnail on a 1280 screen that is still a 2.2x
   enlargement, which is the point of the feature. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  /* Room for the close button above and the caption below. */
  padding: 68px 72px 76px;
  background: rgba(15, 36, 64, 0.94);
}

.lightbox.open { display: flex; }

.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: var(--radius);
  background: var(--bg-white);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  /* Let a phone pinch into the image instead of the browser zooming the page. */
  touch-action: pinch-zoom;
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-family: inherit;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition);
}

.lightbox-close:hover,
.lightbox-nav:hover { background: rgba(255, 255, 255, 0.32); }

.lightbox-close { top: 16px; right: 16px; font-size: 1.7rem; }
.lightbox-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 16px; top: 50%; transform: translateY(-50%); }

/* Hidden when the group holds a single image. */
.lightbox-nav[hidden] { display: none; }

.lightbox-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  padding: 0 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
}

.lightbox-caption:empty { display: none; }

/* Affordance: only the opted-in containers get the magnifier cursor. */
[data-zoom] img { cursor: zoom-in; }

@media (max-width: 600px) {
  .lightbox { padding: 58px 12px 64px; }
  .lightbox-nav { width: 38px; height: 38px; }
  .lightbox-prev { left: 6px; }
  .lightbox-next { right: 6px; }
  .lightbox-caption { bottom: 14px; }
}

/* ---- Product Detail Page ---- */
.product-detail {
  padding: 40px 0 80px;
}

.product-detail-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  margin-bottom: 60px;
  align-items: start;
}

.product-detail-img {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  padding: 30px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  /* Keeps the hover zoom below inside the frame. A scaled image widens the
     scrollable area even though transform does not move the layout - without
     this the page can gain a horizontal scrollbar on a narrow screen while
     the pointer is over the photo. */
  overflow: hidden;
}
.product-detail-img img {
  max-height: 340px;
  width: auto;
  transition: transform var(--transition);
}
.product-detail-img:hover img {
  transform: scale(1.08);
}

.product-detail-info h1 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 16px;
}

.product-detail-info .product-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.product-detail-info .product-meta span {
  background: var(--bg-light);
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 0.85rem;
  color: var(--text-medium);
  font-weight: 500;
}

.product-detail-info .description {
  color: var(--text-medium);
  line-height: 1.8;
  margin-bottom: 24px;
}

.product-detail-info .features {
  margin-bottom: 28px;
}
.product-detail-info .features li {
  padding: 8px 0 8px 28px;
  position: relative;
  color: var(--text-medium);
}
.product-detail-info .features li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

/* Prose lists in the body of a product page. The global `ul { list-style: none }`
   exists for the nav, and .features / .apps-list draw their own markers, so an
   ordinary content list otherwise renders as a run of indented paragraphs with
   nothing to distinguish one item from the next. */
.product-detail ul:not(.features):not(.apps-list) > li {
  list-style: disc outside;
}

/* Specs Table */
.specs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0 40px;
  background: var(--bg-white);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}

.specs-table th,
.specs-table td {
  padding: 14px 20px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
  white-space: nowrap;
}

.specs-table th {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.specs-table tr:last-child td { border-bottom: none; }

.specs-table tr:nth-child(even) td {
  background: var(--bg-light);
}

.specs-table tr:hover td {
  background: rgba(43,108,176,0.05);
}

/* Applications list */
.apps-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin: 20px 0 40px;
}

.apps-list li {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  /* Block, not flex. These cards hold prose - "Control voltage: 220V direct
     pendant control, optional wireless remote" - and as a flex container the
     label and the sentence became two independent flex items, each with
     min-width:auto resolving to its own min-content. Grid tracks here are
     `minmax(200px, 1fr)`, whose 200px is a DEFINITE minimum, so the track
     never grows to fit; once the two min-contents summed past the track the
     row pushed the whole document wider (30px on electric-hoist.html, 10px
     past a 1024px viewport). Letting them shrink instead - min-width: 0 plus
     `overflow-wrap: anywhere` - cured the overflow but crushed the label to
     ~20px and broke it mid-word: "Con/trol volt/age". As a block the whole
     card is one inline flow, so the label, the sentence and the marker wrap
     together like a paragraph and nothing can overflow. Verified at 1024
     (c80_sweep.py) and by screenshot. */
  display: block;
  font-weight: 500;
  color: var(--text-medium);
  transition: all var(--transition);
}

.apps-list li:hover {
  border-color: var(--primary-light);
  color: var(--primary);
  box-shadow: var(--shadow);
}
.apps-list li::before {
  content: '\25B8';
  color: var(--accent);
  font-weight: 700;
  /* Was the flex `gap: 12px`; the marker is inline now, so the spacing has to
     come from a margin instead. */
  margin-right: 8px;
}

/* CTA Section */
.cta-section {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  text-align: center;
  padding: 60px 0;
}

.cta-section h2 {
  font-size: 2rem;
  margin-bottom: 16px;
}

.cta-section p {
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto 32px;
}

.cta-section .btn-primary {
  background: #fff;
  color: var(--primary);
  font-size: 1.05rem;
  padding: 16px 40px;
}
.cta-section .btn-primary:hover {
  background: #fc8181;
  color: #fff;
}

/* ---- Sidebar ---- */
.page-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  padding: 40px 0;
}

.sidebar {
  position: sticky;
  top: calc(var(--nav-height) + 30px);
  align-self: start;
}

.sidebar-box {
  background: var(--bg-white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 24px;
  margin-bottom: 24px;
}

.sidebar-box h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border);
}

.sidebar-links a {
  display: block;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.9rem;
  color: var(--text-medium);
  transition: all var(--transition);
  border-left: 3px solid transparent;
  margin-bottom: 4px;
}
.sidebar-links a:hover,
.sidebar-links a.active {
  background: var(--bg-light);
  color: var(--primary-light);
  border-left-color: var(--primary-light);
}

/* The sidebar collapses here, not at 768px where the rest of the mobile layout
   kicks in. Between 769 and 1024 a 260px sidebar plus its 40px gap left the
   article column only 430-683px, so a product title wrapped to five lines and
   the text ran narrow on a full-size tablet - iPad portrait at 820px sits
   right in the middle of that. Dropping the sidebar early costs the "All
   Products" links on those widths and buys back ~300px of reading width.
   This has to stay below the .page-layout rule above: same specificity, and
   the later declaration wins. */
@media (max-width: 1024px) {
  .page-layout {
    grid-template-columns: 1fr;
  }
  .sidebar {
    display: none;
  }
}

/* ---- Breadcrumbs ---- */
.breadcrumbs {
  background: var(--bg-white);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  font-size: 0.85rem;
}

.breadcrumbs a {
  color: var(--text-light);
}
.breadcrumbs a:hover { color: var(--primary-light); }

.breadcrumbs span {
  color: var(--text-dark);
  font-weight: 500;
}

.breadcrumbs .sep {
  color: var(--border-dark);
  margin: 0 8px;
}

/* ---- About Page ---- */
.about-intro {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 50px;
  align-items: center;
  margin-bottom: 60px;
}

.about-intro-img {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  padding: 20px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-intro-img img { width: 100%; height: auto; }

.about-intro-text h2 {
  font-size: 1.8rem;
  color: var(--primary);
  margin-bottom: 20px;
}

.about-intro-text p {
  color: var(--text-medium);
  line-height: 1.8;
  margin-bottom: 16px;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 48px 0;
}

.value-card {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  text-align: center;
  border: 1px solid var(--border);
  transition: all var(--transition);
}
.value-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.value-card .icon {
  font-size: 2.5rem;
  margin-bottom: 16px;
  display: block;
}

.value-card h3 {
  font-size: 1.15rem;
  color: var(--primary);
  margin-bottom: 10px;
}

.value-card p {
  font-size: 0.9rem;
  color: var(--text-medium);
  line-height: 1.6;
}

/* Stats */
.stats-section {
  background: var(--primary);
  color: #fff;
  padding: 60px 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
}

.stat-item .number {
  font-size: 2.5rem;
  font-weight: 800;
  display: block;
}

.stat-item .label {
  opacity: 0.8;
  font-size: 0.95rem;
  margin-top: 4px;
}

/* ---- Contact Page ---- */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}

.contact-info-box {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  padding: 36px;
  border: 1px solid var(--border);
}

.contact-info-box h2 {
  font-size: 1.4rem;
  color: var(--primary);
  margin-bottom: 24px;
}

.contact-item {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  align-items: flex-start;
}

.contact-item .icon {
  font-size: 1.5rem;
  width: 44px;
  height: 44px;
  background: var(--bg-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-item h4 {
  font-size: 0.9rem;
  color: var(--text-light);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.contact-item p {
  color: var(--text-dark);
  font-weight: 500;
}

/* Contact Form */
.contact-form {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  padding: 36px;
  border: 1px solid var(--border);
}

.contact-form h2 {
  font-size: 1.4rem;
  color: var(--primary);
  margin-bottom: 24px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color var(--transition);
  background: var(--bg-light);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(43,108,176,0.12);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.form-group .error-message {
  color: var(--accent);
  font-size: 0.8rem;
  margin-top: 4px;
  display: none;
}

.form-group.error input,
.form-group.error textarea {
  border-color: var(--accent);
}

.form-group.error .error-message {
  display: block;
}

/* ---- Blog ---- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 30px;
}

.blog-card {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: all var(--transition);
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.blog-card-body {
  padding: 28px;
}

.blog-card .category {
  display: inline-block;
  background: rgba(43,108,176,0.1);
  color: var(--primary-light);
  padding: 4px 14px;
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.blog-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 10px;
  line-height: 1.4;
}

.blog-card h3 a { color: inherit; }
.blog-card h3 a:hover { color: var(--primary-light); }

.blog-card p {
  font-size: 0.9rem;
  color: var(--text-medium);
  line-height: 1.6;
  margin-bottom: 16px;
}

.blog-card .meta {
  font-size: 0.82rem;
  color: var(--text-light);
}

/* Blog Article */
.article {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 0 80px;
}

.article-header {
  margin-bottom: 36px;
  text-align: center;
}

.article-header .category {
  display: inline-block;
  background: rgba(43,108,176,0.1);
  color: var(--primary-light);
  padding: 6px 18px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

.article-header h1 {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.25;
  margin-bottom: 16px;
}

.article-header .meta {
  color: var(--text-light);
  font-size: 0.9rem;
}

.article-content h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
  margin: 36px 0 16px;
}

.article-content h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--primary);
  margin: 28px 0 12px;
}

.article-content p {
  color: var(--text-medium);
  line-height: 1.8;
  margin-bottom: 18px;
  font-size: 1.02rem;
}

.article-content ul,
.article-content ol {
  margin: 16px 0 24px;
  padding-left: 24px;
}

.article-content ul li,
.article-content ol li {
  color: var(--text-medium);
  line-height: 1.8;
  margin-bottom: 8px;
}

.article-content ul li { list-style: disc; }
.article-content ol li { list-style: decimal; }

.article-content strong {
  color: var(--text-dark);
  font-weight: 600;
}

.article-content a {
  color: var(--primary-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-content a:hover {
  color: var(--accent);
}

.article-table-wrap {
  /* Same job as .specs-table-wrapper on the product pages. Without it the
     tables in blog articles had nothing to scroll inside, so on a 320px
     viewport - where the article column is 280px and the table's min-content
     width is 315-337px - the table widened the document itself and the whole
     page scrolled sideways. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 24px 0;
}

.article-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* The wrapper already carries the vertical rhythm; a margin on the table too
   would double the gap above and below it. */
.article-table-wrap > table {
  margin: 0;
}

.article-content table th,
.article-content table td {
  padding: 12px 16px;
  border: 1px solid var(--border);
  text-align: left;
  font-size: 0.92rem;
}

.article-content table th {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}

.article-content table tr:nth-child(even) td {
  background: var(--bg-light);
}

.article-cta {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 40px;
  text-align: center;
  margin: 40px 0;
}

.article-cta h3 {
  color: #fff !important;
  font-size: 1.4rem !important;
  margin-top: 0 !important;
}

.article-cta p {
  color: rgba(255,255,255,0.9) !important;
  margin-bottom: 24px;
}

.article-cta .btn-primary {
  background: #fff;
  color: var(--primary);
}
.article-cta .btn-primary:hover {
  background: #fc8181;
  color: #fff;
}

/* ---- Footer ---- */
.footer {
  background: var(--primary-dark);
  color: rgba(255,255,255,0.85);
  padding: 60px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer h3 {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.footer-about p {
  line-height: 1.7;
  font-size: 0.9rem;
  opacity: 0.8;
}

.footer-links a {
  display: block;
  padding: 6px 0;
  color: rgba(255,255,255,0.7);
  font-size: 0.9rem;
  transition: all var(--transition);
}
.footer-links a:hover {
  color: #fff;
  padding-left: 4px;
}

.footer-contact p {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 0.9rem;
  opacity: 0.8;
  line-height: 1.6;
}

.footer-contact .label {
  opacity: 0.5;
  min-width: 50px;
}
/* Phone and WhatsApp are links now. Without this they render in the browser's
   default link blue against the dark navy footer, which looks broken. An
   underline in the footer's own white keeps them readable and still obviously
   clickable. */
.footer-contact a {
  color: inherit;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  transition: border-color var(--transition);
}
.footer-contact a:hover {
  border-color: rgba(255, 255, 255, 0.9);
}

.footer-bottom {
  padding: 24px 0;
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.6;
}

/* ---- Page Header Banner ---- */
.page-banner {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  padding: 120px 0 50px;
  text-align: center;
}

.page-banner h1,
.page-banner .banner-title {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 12px;
}

.page-banner p {
  opacity: 0.85;
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
}

/* ---- Features Strip ---- */
.features-strip {
  background: var(--bg-white);
  border-bottom: 1px solid var(--border);
  padding: 24px 0;
}

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

.features-strip-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.features-strip-item .icon {
  font-size: 1.8rem;
}

.features-strip-item h4 {
  font-size: 0.95rem;
  color: var(--text-dark);
  font-weight: 600;
}

.features-strip-item p {
  font-size: 0.82rem;
  color: var(--text-light);
}

/* ---- Map Placeholder ---- */
.map-placeholder {
  background: var(--bg-light);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  font-size: 0.95rem;
  margin-top: 24px;
}

/* ---- Animations ---- */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ---- Spec Table Scroll ---- */
.specs-table {
  min-width: auto;
}
.specs-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 20px 0 40px;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .section { padding: 40px 0; }
  .section-title { font-size: 1.5rem; margin-bottom: 8px; }
  .section-subtitle { font-size: 0.95rem; margin-bottom: 32px; }

  /* Navigation */
  .mobile-toggle { display: flex; }

  .nav-links {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    width: 100%;
    background: var(--bg-white);
    flex-direction: column;
    padding: 20px;
    gap: 4px;
    box-shadow: var(--shadow-lg);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition);
    max-height: calc(100vh - var(--nav-height));
    overflow-y: auto;
  }

  .nav-links.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .nav-links a {
    width: 100%;
    padding: 14px 16px;
    font-size: 1rem;
  }

  .nav-links .btn {
    margin-top: 8px;
    margin-left: 0;
    text-align: center;
    justify-content: center;
    width: 100%;
  }

  .dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    padding: 0 0 0 16px;
    display: none;
  }
  .dropdown-menu.show { display: block; }

  /* Hero */
  .hero { padding: 110px 0 50px; min-height: auto; }
  .hero h1 { font-size: 2rem; }
  .hero .hero-badge { font-size: 0.75rem; }
  .hero-bg { display: none; }
  .hero-sm h1, .hero-sm .banner-title { font-size: 1.6rem; }
  .hero-sm { padding: 100px 0 40px; }

  /* Layouts */
  .page-layout { grid-template-columns: 1fr; }
  .sidebar { display: none; }

  .product-detail-header { grid-template-columns: 1fr; gap: 24px; }
  .product-detail { padding: 20px 0 50px; }
  .product-detail-img { min-height: 260px; }
  .product-detail-img img { max-height: 260px; }

  .about-intro { grid-template-columns: 1fr; gap: 30px; }
  .contact-layout { grid-template-columns: 1fr; gap: 30px; }

  .values-grid { grid-template-columns: 1fr; gap: 20px; }
  .value-card { padding: 28px 20px; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .stats-section { padding: 40px 0; }
  .stat-item .number { font-size: 2rem; }

  .features-strip-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .features-strip-item { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
  .features-strip-item h4,
  .features-strip-item p { text-align: center; width: 100%; }

  .footer-grid { grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .footer { padding: 40px 0 0; }
  .footer-contact p { justify-content: center; }
  .footer-links a { padding: 6px 0; }

  .categories-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
  }
  .product-card-img { height: 200px; }

  /* Blog */
  .blog-grid { grid-template-columns: 1fr; gap: 20px; }
  .blog-card-body { padding: 20px; }
  .article-header h1 { font-size: 1.6rem; }
  .article-content h2 { font-size: 1.3rem; }
  .article { padding: 20px 0 50px; }

  .cta-section { padding: 40px 0; }
  .cta-section h2 { font-size: 1.4rem; }
  .cta-section .btn-primary { width: 100%; }

  /* Breadcrumbs */
  .breadcrumbs { padding: 10px 0; font-size: 0.78rem; }

  /* Spec table scroll */
  .specs-table-wrapper { overflow-x: auto; }
  .specs-table { font-size: 0.85rem; }
  .specs-table th,
  .specs-table td { padding: 10px 12px; white-space: nowrap; }

  /* Product detail page mobile */
  .product-detail-info h1 { font-size: 1.5rem; }
  .product-detail-info .product-meta { gap: 8px; }
  .product-detail-info .product-meta span {
    font-size: 0.78rem;
    padding: 4px 12px;
  }
  .product-detail-info .description { font-size: 0.95rem; }
  .product-detail-info .features li {
    font-size: 0.9rem;
    padding: 6px 0 6px 24px;
  }
}


@media (max-width: 480px) {
  html { font-size: 14px; }

  .hero { padding: 100px 0 40px; }
  .hero h1 { font-size: 1.6rem; }
  .hero p { font-size: 0.95rem; margin-bottom: 28px; }
  .hero-buttons { flex-direction: column; }
  .hero-buttons .btn { width: 100%; justify-content: center; }
  .hero .hero-badge { font-size: 0.7rem; padding: 6px 14px; }
  .hero-sm h1, .hero-sm .banner-title { font-size: 1.4rem; }
  .hero-sm { padding: 90px 0 30px; }

  .page-banner { padding: 100px 0 35px; }
  .page-banner h1, .page-banner .banner-title { font-size: 1.8rem; }
  .page-banner p { font-size: 0.9rem; }

  .categories-grid { grid-template-columns: 1fr; gap: 16px; }
  .product-card-img { height: 200px; }
  .product-card-body { padding: 16px; }
  .product-card-body h3 { font-size: 1.05rem; }

  .features-strip-grid { grid-template-columns: 1fr; gap: 12px; }
  .features-strip-item { gap: 10px; flex-direction: column; align-items: center; text-align: center; }
  .features-strip-item h4,
  .features-strip-item p { text-align: center; width: 100%; }
  .features-strip-item .icon { font-size: 1.4rem; }

  .footer-grid { grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .footer { padding: 32px 0 0; }
  .footer h3 { font-size: 1rem; margin-bottom: 14px; }
  .footer-about p { font-size: 0.85rem; }
  .footer-bottom { padding: 16px 0; font-size: 0.78rem; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .stats-section { padding: 32px 0; }
  .stat-item .number { font-size: 1.7rem; }
  .stat-item .label { font-size: 0.82rem; }

  .product-detail-img { min-height: 220px; padding: 16px; }
  .product-detail-img img { max-height: 220px; }

  .specs-table-wrapper { overflow-x: auto; }
  .specs-table th,
  .specs-table td { padding: 8px 10px; font-size: 0.78rem; white-space: nowrap; }

  .contact-form,
  .contact-info-box { padding: 20px; }

  .article-cta { padding: 24px; }
  .article-cta h3 { font-size: 1.15rem !important; }

  .value-card { padding: 24px 16px; }
  .value-card .icon { font-size: 2rem; }

  .btn { padding: 12px 24px; font-size: 0.9rem; }
  .btn-sm { padding: 8px 18px; font-size: 0.8rem; }

  .product-detail-info h1 { font-size: 1.3rem; }
  .product-detail-info .product-meta span {
    font-size: 0.72rem;
    padding: 3px 10px;
  }
  .product-detail-info .description { font-size: 0.88rem; }
  .product-detail-info .features li {
    font-size: 0.85rem;
    padding: 5px 0 5px 22px;
  }
  .specs-table { font-size: 0.75rem; }
  .apps-list { grid-template-columns: 1fr; gap: 8px; }
  .apps-list li { padding: 12px 16px; font-size: 0.85rem; }
}

/* ---- Print ---- */
@media print {
  .navbar { position: static; }
  .hero { padding: 40px 0; min-height: auto; }
  .footer { break-inside: avoid; }
}