/* ============================================================
   Meekee Automation — Shared Stylesheet
   ============================================================
   LAYER 1  TOKENS        :root design tokens (colours, type, radius, motion)
   LAYER 2  BASE          Reset + element defaults
   LAYER 3  LAYOUT        Container, section wrappers, grid systems, spacing utils
   LAYER 4  COMPONENTS    All reusable UI components
                            4a  Buttons
                            4b  Navigation
                            4c  Hero (homepage, page, product)
                            4d  Cards
                            4e  Brands strip
                            4f  Application tiles
                            4g  Feature blocks
                            4h  CTA strip
                            4i  Specs table
                            4j  Forms
                            4k  Contact layout
                            4l  Blog cards + comments
                            4m  Brand detail
                            4n  Application sections
                            4o  Comparison grid
                            4p  Values / Team
                            4q  Footer
                            4r  Slideshow
                            4s  Product hero
                            4t  Utility image / placeholder
   LAYER 5  PAGE-SPECIFIC  Styles scoped to a single page (services.html)
   LAYER 6  RESPONSIVE     All @media breakpoints
   ============================================================ */


/* ============================================================
   LAYER 1 — TOKENS
   Single source of truth. Change a value here, it propagates
   everywhere. Nothing else in this file uses raw colour values.
   ============================================================ */

:root {
  color-scheme: light;

  /* ── Brand constants (meekee-brand-guide.md §03) ─────────── */
  --navy:             #1B2A4A;    /* Deep Navy — brand anchor         */
  --amber:            #E8A020;    /* Amber Gold — accent / CTAs       */
  --accent:           #E8A020;    /* Semantic alias — use in components */
  --green:            #16A34A;

  /* ── Light mode tokens (default) ────────────────────────── */
  --bg:               #F8FAFC;   /* Off White                         */
  --surface:          #FFFFFF;   /* Card / panel surface               */
  --card-bg:          #FFFFFF;   /* Alias for --surface                */
  --border:           #E2E8F0;
  --text:             #1B2A4A;   /* Navy becomes text in light mode    */
  --muted:            #64748B;   /* Steel Grey                         */
  --blue:             #2563EB;   /* Technical Blue                     */
  --blue-dark:        #1D4ED8;
  --blue-glow:        rgba(37, 99, 235, 0.1);

  /* ── Component tokens ────────────────────────────────────── */
  --nav-bg:           #1B2A4A;   /* Navy — fixed across both modes     */
  --footer-bg:        #1B2A4A;
  --section-deep-bg:  #F1F5F9;

  /* ── Typography ─────────────────────────────────────────── */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ── Shape ───────────────────────────────────────────────── */
  --radius: 8px;

  /* ── Motion ──────────────────────────────────────────────── */
  --transition: 0.25s ease;
}

/* ── Dark mode — OS preference (brand guide §03) ─────────── */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg:               #080E1C;
    --surface:          #1B2A4A;   /* Navy becomes card surface         */
    --card-bg:          #1B2A4A;
    --border:           #2C3E5A;
    --text:             #F8FAFC;
    --muted:            #94A3B8;
    --blue:             #3B82F6;
    --blue-dark:        #2563EB;
    --blue-glow:        rgba(59, 130, 246, 0.15);
    --section-deep-bg:  #0F1826;
  }
}

/* ── Explicit JS-toggle overrides (override media query) ──── */
[data-theme="light"] {
  color-scheme: light;
  --bg:               #F8FAFC;
  --surface:          #FFFFFF;
  --card-bg:          #FFFFFF;
  --border:           #E2E8F0;
  --text:             #1B2A4A;
  --muted:            #64748B;
  --blue:             #2563EB;
  --blue-dark:        #1D4ED8;
  --blue-glow:        rgba(37, 99, 235, 0.1);
  --section-deep-bg:  #F1F5F9;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg:               #080E1C;
  --surface:          #1B2A4A;
  --card-bg:          #1B2A4A;
  --border:           #2C3E5A;
  --text:             #F8FAFC;
  --muted:            #94A3B8;
  --blue:             #3B82F6;
  --blue-dark:        #2563EB;
  --blue-glow:        rgba(59, 130, 246, 0.15);
  --section-deep-bg:  #0F1826;
}

/* Slideshow image area stays dark regardless of theme */
.slideshow-section .slide-img-wrap { --bg: #111111; }


/* ============================================================
   LAYER 2 — BASE
   Minimal opinionated reset + default element styles.
   No classes here — only tag selectors.
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: var(--blue);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: #5b9aff;
}

ul {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.5rem); }
h4 { font-size: 1.1rem; }

p { color: var(--muted); line-height: 1.7; }


/* ============================================================
   LAYER 3 — LAYOUT
   Structural primitives: container, section paddings, grids,
   spacing scale, and typographic label helpers.
   No visual decoration here — only structural rules.
   ============================================================ */

/* ── Container ────────────────────────────────────────────── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── Section wrappers ──────────────────────────────────────── */
.section    { padding: 5rem 0; }
.section-sm { padding: 3rem 0; }

/* ── Grid systems ──────────────────────────────────────────── */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

/* ── Spacing scale ─────────────────────────────────────────── */
.mb-xs { margin-bottom: 0.25rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-6 { margin-bottom: 3rem; }
.mt-2 { margin-top: 1rem; }
.mt-4 { margin-top: 2rem; }

/* ── Border utilities ──────────────────────────────────────── */
.border-top    { border-top:    1px solid var(--border); }
.border-bottom { border-bottom: 1px solid var(--border); }
.border-y      { border-top:    1px solid var(--border); border-bottom: 1px solid var(--border); }

/* ── Width constraint ──────────────────────────────────────── */
.prose-center  { max-width: 680px; margin: 0 auto; }

/* ── Text size helpers ─────────────────────────────────────── */
.text-sm   { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg   { font-size: 1.1rem; }
.text-2xl  { font-size: 1.75rem; }

/* ── Text alignment + colour helpers ──────────────────────── */
.text-center { text-align: center; }
.text-blue   { color: var(--blue); }
.text-muted  { color: var(--muted); }
.text-white  { color: var(--text); }
/* ── Flex helpers ──────────────────────────────────────────── */
/* Row with centred items */
.flex-row   { display: flex; align-items: center; gap: 1rem; }
/* Column stack */
.flex-col   { display: flex; flex-direction: column; gap: 1rem; }
/* Wrap allowed */
.flex-wrap  { flex-wrap: wrap; }

/* ── Grid gap variants ─────────────────────────────────────── */
.grid-2-sm { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.grid-2-md { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.grid-2-lg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4rem; align-items: center; }

/* ── Misc helpers ──────────────────────────────────────────── */
.w-full          { width: 100%; }
.btn.w-full      { justify-content: center; }
/* ── Section background image (full-cover absolute) ───────── */
.section-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  opacity: 0.28;
}
/* Content layer sitting above a bg image */
.section-content {
  position: relative;
  z-index: 2;
}

/* ── Card icon — logo variant (resets icon box for logo imgs) ─ */
.card-icon--logo {
  width: auto;
  height: auto;
  background: none;
  border: none;
  justify-content: flex-start;
  padding: 0;
  margin-bottom: 1rem;
}

/* ── Check-list item (icon + text row) ────────────────────── */
.check-item       { display: flex; align-items: flex-start; gap: 0.6rem; }
.check-item i     { color: var(--blue); margin-top: 0.2rem; flex-shrink: 0; }
.check-item span  { font-size: 0.875rem; color: var(--muted); }

/* ── Feature row (large icon + text block) ────────────────── */
.feature-row      { display: flex; gap: 1rem; align-items: flex-start; }
.feature-row-icon { font-size: 1.5rem; color: var(--blue); min-width: 1.5rem; flex-shrink: 0; }

/* ── 2rem icon (about/info cards) ────────────────────────── */
.icon-2xl { font-size: 2rem; color: var(--blue); flex-shrink: 0; }

/* ── 3-col equal grid ─────────────────────────────────────── */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }

/* ── Catalogue section intro paragraph ───────────────────── */
.cat-intro { color: var(--muted); font-size: 0.875rem; margin-bottom: 1.75rem; max-width: 780px; }

/* ── Product hero logo ────────────────────────────────────── */
.product-hero-logo { height: 32px; width: auto; margin-bottom: 1.25rem; }

/* ── Grid 2-col, items aligned to start (not center) ──────── */
.grid-2-start { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4rem; align-items: start; }

/* ── Catalog entry grid (product index page: 200px img + text) ─ */
.catalog-entry-grid { display: grid; grid-template-columns: 200px 1fr; gap: 3rem; align-items: start; }
.catalog-entry-img  { width: 200px; height: 200px; object-fit: cover; border-radius: 12px; border: 1px solid var(--border); flex-shrink: 0; }

/* ── Section label / title / subtitle helpers ─────────────── */
.section-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.75rem;
}

.section-title {
  margin-bottom: 0.75rem;
  color: var(--text);
}

.section-sub {
  color: var(--muted);
  max-width: 600px;
  margin: 0 auto 3rem;
}

/* ── Divider ───────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--border);
  margin: 2rem 0;
}

/* ── Section depth tint (replaces inline background: #060606) ── */
/* Alternate sections use a slightly darker/lighter tint so the
   page has visual rhythm. In light mode this becomes a soft grey.  */
.section-deep {
  background: var(--section-deep-bg);
}
[data-theme="dark"] .section-deep {
  background: #060606;
}

/* In light mode, form inputs/selects that have hardcoded dark backgrounds */
[data-theme="light"] select,
[data-theme="light"] input,
[data-theme="light"] textarea {
  background: #ffffff;
  color: #111111;
  border-color: var(--border);
}


/* ============================================================
   LAYER 4 — COMPONENTS
   ============================================================ */


/* ── 4a  Buttons ───────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  border: 2px solid transparent;
  white-space: nowrap;
  text-decoration: none;
}

.btn-primary {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.btn-primary:hover {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(30, 110, 255, 0.35);
}

.btn-outline {
  background: transparent;
  color: var(--blue);
  border-color: var(--blue);
}
.btn-outline:hover {
  background: var(--blue);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(30, 110, 255, 0.35);
}

.btn-amber {
  background: var(--amber);
  color: var(--navy);
  border-color: var(--amber);
  font-weight: 700;
}
.btn-amber:hover {
  background: #d4911a;
  border-color: #d4911a;
  color: var(--navy);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(232, 160, 32, 0.4);
}

.btn-green {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.btn-green:hover {
  background: #15803d;
  border-color: #15803d;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(22, 163, 74, 0.35);
}

.btn-sm { padding: 0.5rem 1.25rem; font-size: 0.875rem; }
.btn-lg { padding: 1rem 2.25rem;   font-size: 1.05rem; }


/* ── 4b  Navigation ────────────────────────────────────────── */

#nav-placeholder nav,
nav.main-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.nav-logo {
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #ffffff;
  text-decoration: none;
  font-style: italic;
  text-transform: uppercase;
}
.nav-logo:hover { color: var(--amber); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-links a {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--transition);
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--amber);
  transition: width var(--transition);
}

.nav-links a:hover,
.nav-links a.active { color: #ffffff; }

.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

.nav-cta {
  background: var(--amber);
  color: var(--navy) !important;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius);
  font-weight: 700 !important;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover  { background: #d4911a !important; color: var(--navy) !important; }

.nav-shop {
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.85) !important;
  padding: 0.4rem 1rem;
  border-radius: var(--radius);
  font-weight: 600 !important;
}
.nav-shop::after  { display: none !important; }
.nav-shop:hover   { background: rgba(255,255,255,0.1); color: #fff !important; border-color: rgba(255,255,255,0.7) !important; }

/* Hamburger (mobile) */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: rgba(255, 255, 255, 0.85);
  transition: all var(--transition);
  transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Theme toggle button — sits on Navy nav, needs light colours */
.theme-toggle {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
  flex-shrink: 0;
}
.theme-toggle:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
}


/* ── 4c  Hero (homepage, page-level, product) ──────────────── */

/* Homepage full-height hero */
.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 5rem 0;
}

.hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(30, 110, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 110, 255, 0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.hero-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(30, 110, 255, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
}

.hero h1            { margin-bottom: 1.25rem; color: var(--text); }
.hero h1 .highlight { color: var(--blue); }
.hero p             { font-size: 1.15rem; margin-bottom: 2rem; max-width: 600px; }
.hero-btns          { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Compact page hero (interior pages) */
.page-hero {
  padding: 5rem 0 3rem;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(30, 110, 255, 0.12) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1         { margin-bottom: 0.75rem; }
.page-hero p          { font-size: 1.1rem; max-width: 600px; }


/* ── 4d  Cards ─────────────────────────────────────────────── */

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.card:hover {
  border-color: var(--blue);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(30, 110, 255, 0.15);
}

.card-icon {
  width: 48px;
  height: 48px;
  background: var(--blue-glow);
  border: 1px solid rgba(30, 110, 255, 0.3);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--blue);
  margin-bottom: 1rem;
}

.card h3 { margin-bottom: 0.5rem; color: var(--text); }
.card p  { font-size: 0.9rem; margin-bottom: 1rem; }
.card ul { margin-bottom: 1.5rem; }
.card ul li {
  font-size: 0.875rem;
  color: var(--muted);
  padding: 0.25rem 0;
  padding-left: 1.1rem;
  position: relative;
}
.card ul li::before {
  content: '\2192';
  position: absolute;
  left: 0;
  color: var(--blue);
  font-size: 0.75rem;
}

/* Brand logo sized to match card-icon */
.card-icon-logo {
  height: 4rem;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.card-icon-logo--light {
  background: #fff;
  border-radius: 4px;
  padding: 4px 10px;
  height: 3.5rem;
}



/* ── 4e  Brands strip ──────────────────────────────────────── */

.brands-strip {
  padding: 3rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--section-deep-bg);
}
[data-theme="dark"] .brands-strip { background: #080808; }

/* ── Laser feature section ─────────────────────────────────── */
.laser-feature {
  position: relative;
  overflow: hidden;
  padding: 5rem 0;
  border-top: 1px solid var(--border);
}
.laser-feature__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(27,42,74,0.97) 40%, rgba(27,42,74,0.65) 100%);
  z-index: 1;
}
[data-theme="dark"] .laser-feature__overlay {
  background: linear-gradient(100deg, rgba(0,0,0,0.97) 40%, rgba(0,0,0,0.55) 100%);
}

.laser-stat-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 1.25rem;
  text-align: center;
}
[data-theme="light"] .laser-stat-card {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.10);
}
.laser-stat-num {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--blue);
  margin-bottom: 0.25rem;
}
.laser-stat-label { font-size: 0.8rem; color: var(--muted); }

/* Slide caption button spacing */
.slide-caption .btn { margin-top: 1.25rem; }

[data-theme="light"] .card-icon-logo    { filter: none; opacity: 1; }
.brands-strip .label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin-bottom: 2rem;
}

.brands-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.brand-block {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 2.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.brand-block:hover {
  border-color: var(--blue);
  box-shadow: 0 0 24px rgba(30, 110, 255, 0.2);
}
.brand-block .brand-name    { font-size: 1.1rem; font-weight: 800; color: var(--text); letter-spacing: -0.01em; }
.brand-block .brand-tagline { font-size: 0.75rem; color: var(--muted); }

/* Brand logo image (used in strip and product cards) */
.brand-logo {
  height: 48px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
  filter: none;          /* Light mode default: show natural logo colours */
  opacity: 0.9;
  transition: opacity 0.2s;
}
.brand-logo:hover { opacity: 1; }
/* Dark mode: invert to white so logos show on dark surfaces */
@media (prefers-color-scheme: dark) {
  .brand-logo { filter: brightness(0) invert(1); opacity: 0.85; }
}
[data-theme="dark"] .brand-logo { filter: brightness(0) invert(1); opacity: 0.85; }
[data-theme="light"] .brand-logo { filter: none; opacity: 0.9; }
.brand-logo--light-bg {
  filter: none;
  background: #fff;
  border-radius: 6px;
  padding: 6px 10px;
  height: 48px;        /* keeps rendered height equal to plain brand-logo */
  box-sizing: content-box;
  opacity: 0.9;
}
/* --light-bg logos (DMM, Horizon) always show natural colours — white pill gives contrast on dark */
@media (prefers-color-scheme: dark) {
  .brand-logo--light-bg { filter: none; opacity: 0.9; }
}
[data-theme="dark"]  .brand-logo--light-bg { filter: none; opacity: 0.9; }
[data-theme="light"] .brand-logo--light-bg { filter: none; opacity: 0.9; }


/* ── 4f  Application tiles ─────────────────────────────────── */

.app-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.app-tile {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all var(--transition);
  cursor: default;
}
.app-tile:hover { border-color: var(--blue); background: #EFF6FF; transform: translateY(-2px); }
[data-theme="dark"] .app-tile:hover { background: #131313; }
.app-tile .app-icon { font-size: 1.5rem; color: var(--blue); min-width: 48px; text-align: center; }
.app-tile .app-name { font-size: 0.95rem; font-weight: 600; color: var(--text); }
.app-tile .app-desc { font-size: 0.8rem; color: var(--muted); margin-top: 0.2rem; }


/* ── 4g  Feature blocks (Why Us) ───────────────────────────── */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.feature-block {
  text-align: center;
  padding: 2rem 1rem;
}
.feature-icon       { font-size: 2rem; color: var(--blue); margin-bottom: 1rem; }
.feature-block h4   { color: var(--text); margin-bottom: 0.5rem; }
.feature-block p    { font-size: 0.875rem; }


/* ── 4h  CTA strip ─────────────────────────────────────────── */

.cta-strip {
  background: linear-gradient(135deg, #1B2A4A 0%, #243660 50%, #1B2A4A 100%);
  border-top: 1px solid rgba(232, 160, 32, 0.25);
  border-bottom: 1px solid rgba(232, 160, 32, 0.25);
  padding: 5rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-strip h2, .cta-strip p { color: #ffffff; }
.cta-strip p { color: rgba(255,255,255,0.7); }
.cta-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 100% at 50% 50%, rgba(232, 160, 32, 0.08) 0%, transparent 70%);
  pointer-events: none;
}
.cta-strip .container { position: relative; z-index: 1; }
.cta-strip h2         { margin-bottom: 1.25rem; }
.cta-strip p          { margin-bottom: 2rem; }

.cta-btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}


/* ── 4i  Specs table ───────────────────────────────────────── */

.specs-table-wrap {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.specs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.specs-table th,
.specs-table td {
  padding: 0.875rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.specs-table th {
  background: var(--card-bg);
  color: var(--blue);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  width: 35%;
}
.specs-table td { color: var(--text); background: var(--bg); }
.specs-table tr:last-child th,
.specs-table tr:last-child td { border-bottom: none; }


/* ── 4j  Forms ─────────────────────────────────────────────── */

.form-group { margin-bottom: 1.25rem; }

.form-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.9rem;
  padding: 0.75rem 1rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(30, 110, 255, 0.15);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: #555; }

.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a0a0a0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}
.form-group select option { background: var(--bg); }
.form-group textarea      { resize: vertical; min-height: 140px; }

.form-success {
  display: none;
  background: rgba(30, 110, 255, 0.1);
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  padding: 1rem 1.5rem;
  color: var(--blue);
  font-weight: 600;
  text-align: center;
  margin-top: 1rem;
}


/* ── 4k  Contact layout ────────────────────────────────────── */

.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: start;
}


.contact-item {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  align-items: flex-start;
}

.contact-item-icon {
  font-size: 1.25rem;
  color: var(--blue);
  min-width: 36px;
  height: 36px;
  background: var(--blue-glow);
  border: 1px solid rgba(30, 110, 255, 0.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  text-align: center;
}

.contact-item-text .label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--blue);
  margin-bottom: 0.25rem;
}
.contact-item-text p { color: var(--text); font-size: 0.9rem; margin: 0; }


/* ── 4l  Blog cards + comments ─────────────────────────────── */

.blog-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: all var(--transition);
}
.blog-card:hover {
  border-color: var(--blue);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(30, 110, 255, 0.15);
}

.blog-card-img {
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, #0d1f44, #1a2a5e);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  overflow: hidden;
}
[data-theme="light"] .blog-card-img { background: linear-gradient(135deg, #dce8ff, #e8f0ff); }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.blog-card-body    { padding: 1.5rem; }
.blog-card-meta    { font-size: 0.8rem; color: var(--muted); margin-bottom: 0.75rem; }
.blog-card-meta .tag { color: var(--blue); font-weight: 600; margin-right: 0.75rem; }
.blog-card h3      { margin-bottom: 0.5rem; font-size: 1.1rem; color: var(--text); }
.blog-card p       { font-size: 0.875rem; margin-bottom: 1rem; }

.comments-section {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}
.comments-section h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1.5rem;
}
.giscus-frame { color-scheme: dark; }


/* ── 4m  Brand detail page ─────────────────────────────────── */

/* (brand-section, brand-detail-grid, brand-logo-large defined in 4e) */


/* ── 4n  Application sections (applications.html) ──────────── */

.app-section { padding: 3rem 0; border-bottom: 1px solid var(--border); }
.app-section:last-child { border-bottom: none; }

.app-section-inner {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 2rem;
  align-items: start;
}

.app-section-icon { font-size: 2rem; color: var(--blue); text-align: center; }
.app-section h3   { margin-bottom: 0.75rem; color: var(--text); }


/* ── 4o  Comparison grid ───────────────────────────────────── */

.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.comparison-col {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
}
.comparison-col.highlight { border-color: var(--blue); background: rgba(30, 110, 255, 0.05); }
.comparison-col h4 {
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 1rem;
}
.comparison-col h4.blue { color: var(--blue); }
.comparison-col h4.red  { color: #ff4444; }

.check-list li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.4rem 0;
  font-size: 0.875rem;
  color: var(--muted);
}
.check-list li .icon         { font-size: 0.9rem; min-width: 18px; }
.check-list.green li .icon   { color: #25d366; }
.check-list.red   li .icon   { color: #ff4444; }


/* ── 4p  Values / Team (about.html) ────────────────────────── */

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.value-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
}
.value-card .icon { font-size: 2rem; color: var(--blue); margin-bottom: 1rem; }
.value-card h4    { margin-bottom: 0.5rem; color: var(--text); }


/* ── 4q  Footer ────────────────────────────────────────────── */

.site-footer {
  background: var(--footer-bg);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 3rem 0 2rem;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer-brand .logo          { font-size: 1.3rem; font-weight: 800; color: #ffffff; margin-bottom: 0.75rem; }
.footer-brand .logo span     { color: var(--amber); }
.footer-brand p              { font-size: 0.875rem; margin-bottom: 1rem; color: rgba(255, 255, 255, 0.55); }

.footer-col h5 {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}
.footer-col ul li            { margin-bottom: 0.5rem; }
.footer-col ul li a          { color: rgba(255, 255, 255, 0.5); font-size: 0.875rem; transition: color var(--transition); }
.footer-col ul li a:hover    { color: var(--amber); }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-bottom p { font-size: 0.8rem; margin: 0; }


/* ── 4r  Slideshow ─────────────────────────────────────────── */

.slideshow-section {
  padding: 5rem 0;
  background: var(--section-deep-bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Full-viewport hero variant — flush under nav */
.slideshow-section--hero {
  padding-top: 0;
  padding-bottom: 0;
  height: calc(100vh - var(--nav-h, 62px));
  display: flex;
  flex-direction: column;
}
.slideshow-section--hero .slideshow {
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  max-width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.slideshow-section--hero .slides-track { flex: 1; min-height: 0; }
.slideshow-section--hero .slide        { height: 100%; grid-template-rows: 1fr; }
.slideshow-section--hero .slide-img-wrap { min-height: 0; height: 100%; }

.slideshow {
  position: relative;
  overflow: hidden;
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 12px;
  border: 1px solid var(--border);
}

.slides-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide {
  min-width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--card-bg);
}

.slide-img-wrap {
  position: relative;
  overflow: hidden;
  min-height: clamp(200px, 35vh, 380px);
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Contain mode — portrait / square product images */
.slide-img-wrap--contain { background: #0a0a12; padding: 1.5rem; }
.slide-img-wrap--contain img { object-fit: contain; }

.slide-brand-badge {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  border-radius: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.slide-brand-badge img {
  height: 28px;
  width: auto;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
}
.slide-brand-badge--light img {
  filter: none;
  background: #fff;
  border-radius: 4px;
  padding: 2px 6px;
}

.slide-caption {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
}
.slide-caption h3 { font-size: 1.6rem; font-weight: 800; margin: 0; }
.slide-caption p  { color: var(--muted); font-size: 0.95rem; line-height: 1.7; margin: 0; }


/* Prev / Next buttons */
.slide-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
  z-index: 10;
}
.slide-btn:hover      { background: var(--blue); border-color: var(--blue); }
.slide-btn--prev      { left: 1rem; }
.slide-btn--next      { right: 1rem; }

/* Dot indicators */
.slide-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0;
  background: var(--card-bg);
  height: 0;
  overflow: hidden;
}
.slide-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
.slide-dot.active { background: transparent; transform: none; }


/* ── 4s  Product hero ──────────────────────────────────────── */

.product-hero {
  padding: 5rem 0 4rem;
  position: relative;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.product-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 100% at 0% 50%, rgba(30, 110, 255, 0.12) 0%, transparent 60%);
}

.product-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

.product-hero-img {
  background: linear-gradient(135deg, #dce8ff 0%, #e8f0ff 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
}
[data-theme="dark"] .product-hero-img { background: linear-gradient(135deg, #0d1f44 0%, #091530 100%); border-color: rgba(37,99,235,0.2); }

.product-hero-img img,
img.product-hero-img {
  max-width: 480px;
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border);
  display: block;
  margin: 2rem auto;
}

.product-tag {
  display: inline-block;
  background: rgba(30, 110, 255, 0.15);
  border: 1px solid rgba(30, 110, 255, 0.3);
  color: var(--blue);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  border-radius: 100px;
  margin-bottom: 1rem;
}


/* ── 4u  Catalogue accordion + product cards (product pages) ─ */

.catalog-category {
  margin-bottom: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.catalog-category-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 1.5rem;
  background: var(--section-deep-bg);
  cursor: pointer;
  user-select: none;
  transition: background var(--transition);
}
.catalog-category-header:hover    { background: var(--border); }
[data-theme="dark"] .catalog-category-header       { background: #0d0d0d; }
[data-theme="dark"] .catalog-category-header:hover { background: #141414; }

.cat-icon { color: var(--blue); font-size: 1.1rem; }
.catalog-category-header h3 { color: var(--text); margin: 0; font-size: 1.05rem; }
.cat-count {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-right: 0.75rem;
}
.cat-chevron { color: var(--muted); font-size: 0.85rem; transition: transform 0.3s ease; }
.catalog-category.open .cat-chevron { transform: rotate(180deg); }
.catalog-category-body {
  display: none;
  padding: 1.5rem;
  border-top: 1px solid var(--border);
}
.catalog-category.open .catalog-category-body { display: block; }

.prod-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  position: relative;
}
.prod-card:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(30, 110, 255, 0.14);
}
.prod-card-badge {
  position: absolute;
  top: 0;
  right: 1.1rem;
  background: var(--blue);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.18rem 0.55rem;
  border-radius: 0 0 6px 6px;
  z-index: 1;
}
.prod-card-img {
  width: 100%;
  height: 110px;
  background: var(--section-deep-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 1.25rem;
}
[data-theme="dark"] .prod-card-img { background: #0b0b14; }
.prod-card-img img {
  max-height: 88px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}
/* Cover variant — used on horizon-laser.html where images are full-bleed photos */
.prod-card-img--cover {
  height: 150px;
  padding: 0;
}
.prod-card-img--cover img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
}
.prod-card-body {
  padding: 1.1rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
}
.prod-card-body h4 { color: var(--text); font-size: 0.95rem; margin: 0; }
.prod-desc         { color: var(--muted); font-size: 0.82rem; line-height: 1.55; margin: 0; }
.prod-spec-table   { width: 100%; border-collapse: collapse; font-size: 0.76rem; margin-top: 0.25rem; }
.prod-spec-table tr            { border-bottom: 1px solid rgba(255,255,255,0.05); }
.prod-spec-table tr:last-child { border-bottom: none; }
[data-theme="light"] .prod-spec-table tr { border-bottom-color: rgba(0,0,0,0.07); }
.prod-spec-table th { text-align: left; color: var(--blue); font-weight: 600; padding: 0.28rem 0.5rem 0.28rem 0; width: 38%; white-space: nowrap; }
.prod-spec-table td { color: var(--muted); padding: 0.28rem 0; }
.spec-tags { margin-top: 0.35rem; }
.spec-tag {
  display: inline-block;
  background: rgba(30,110,255,0.1);
  border: 1px solid rgba(30,110,255,0.2);
  color: var(--blue);
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.12rem 0.45rem;
  border-radius: 4px;
  margin: 0.1rem 0.1rem 0 0;
}
.spec-tag--warn {
  background: rgba(180,83,9,0.12);
  border-color: rgba(180,83,9,0.3);
  color: #f59e0b;
}
.prod-card-footer { padding: 0.75rem 1.25rem 1rem; border-top: 1px solid var(--border); }
.prod-card-footer .btn { width: 100%; justify-content: center; font-size: 0.82rem; padding: 0.5rem 1rem; }

.grid-2-catalog { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.grid-3-catalog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.grid-4-catalog { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }

/* Cert badges (horizon-laser.html) */
.cert-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.cert-badge {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.45rem 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cert-badge i { color: var(--blue); }
[data-theme="dark"] .cert-badge { background: #111; }


/* Blog post shared layout (blog/*.html) */
.blog-container      { max-width: 780px; margin: 0 auto; }
.blog-container.pt-5 { padding-top: 2.5rem; }
.blog-post-title     { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.2; margin-bottom: 1.25rem; }
.blog-post-deck      { color: var(--muted); font-size: 1.05rem; line-height: 1.7; }
.blog-cover          { margin: 0 0 0.75rem; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.blog-cover img      { width: 100%; height: 380px; object-fit: cover; display: block; }

/* Article hero & meta */
.article-hero { padding: 5rem 0 3rem; border-bottom: 1px solid var(--border); }
.article-meta { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.article-meta .tag {
  background: rgba(30,110,255,0.15);
  color: var(--blue);
  border: 1px solid rgba(30,110,255,0.3);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.article-meta .date { color: var(--muted); font-size: 0.875rem; display: flex; align-items: center; gap: 0.4rem; }

/* Article body prose */
.article-body { max-width: 780px; margin: 0 auto; padding: 3rem 0 5rem; }
.article-body h2 { font-size: 1.5rem; margin: 2.5rem 0 1rem; color: var(--text); }
.article-body h3 { font-size: 1.15rem; margin: 2rem 0 0.75rem; color: var(--text); }
.article-body p { color: var(--muted); line-height: 1.8; margin-bottom: 1.25rem; }
.article-body ul,
.article-body ol  { color: var(--muted); line-height: 1.8; margin-bottom: 1.25rem; padding-left: 1.5rem; }
.article-body li     { margin-bottom: 0.4rem; }
.article-body strong { color: var(--text); }
.article-body em     { font-style: italic; }
.article-body a      { color: var(--blue); }
.article-body hr     { border: none; border-top: 1px solid var(--border); margin: 2.5rem 0; }

/* Callout box */
.callout {
  background: rgba(30,110,255,0.08);
  border-left: 3px solid var(--blue);
  padding: 1.25rem 1.5rem;
  border-radius: 0 8px 8px 0;
  margin: 2rem 0;
}
.callout p { margin: 0; color: var(--text); }

/* Pull quote */
.pull-quote {
  border-left: 3px solid var(--border);
  padding: 0.75rem 1.5rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--muted);
}

/* Article inline figures */
.article-img { margin: 2.5rem 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.article-img img { width: 100%; height: auto; display: block; }
.article-img figcaption {
  padding: 0.75rem 1rem;
  font-size: 0.8rem;
  color: var(--muted);
  background: var(--card-bg);
  border-top: 1px solid var(--border);
}

/* Comparison table */
.comparison-table { width: 100%; border-collapse: collapse; margin: 2rem 0; font-size: 0.9rem; }
.comparison-table th {
  background: var(--card-bg);
  color: var(--text);
  padding: 0.75rem 1rem;
  text-align: left;
  border: 1px solid var(--border);
  font-weight: 600;
}
.comparison-table td { padding: 0.75rem 1rem; border: 1px solid var(--border); color: var(--muted); vertical-align: top; }
.comparison-table tr:nth-child(even) td { background: var(--bg); }
.comparison-table .winner { color: #4caf50; font-weight: 600; }

/* Spec table */
.spec-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin-bottom: 1.5rem; }
.spec-table th,
.spec-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); text-align: left; }
.spec-table th {
  background: var(--card-bg);
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  width: 38%;
}
.spec-table td { color: var(--muted); background: var(--bg); }
.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: none; }
.spec-table-wrap { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 2rem; }

/* Share bar */
.share-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 2.5rem 0 0;
  flex-wrap: wrap;
}
.share-label { color: var(--muted); font-size: 0.875rem; font-weight: 500; flex-shrink: 0; }
.share-links  { display: flex; gap: 0.75rem; }
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.15s;
}
.share-btn:hover   { opacity: 0.85; }
.share-linkedin    { background: #0a66c2; color: #fff; }
.share-whatsapp    { background: #25d366; color: #fff; }

/* Article prev/next nav */
.article-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 0;
  border-top: 1px solid var(--border);
  margin-top: 0;
}

/* Article tags */
.tags-row { margin: 2rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag-chip {
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.75rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
}

/* Comments section heading */
.comments-section h3 { margin: 2.5rem 0 1.25rem; font-size: 1.15rem; color: var(--text); }

/* Subscribe box (blog/index.html) */
.subscribe-box { margin-top: 4rem; text-align: center; padding: 3rem 2rem; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); }
.subscribe-form { display: flex; gap: 1rem; justify-content: center; max-width: 480px; margin: 0 auto; flex-wrap: wrap; }
.subscribe-form input[type="email"] { flex: 1; min-width: 220px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 0.9rem; padding: 0.75rem 1rem; outline: none; font-family: var(--font); }

/* Enquiry steps list (contact.html) */
.enquiry-steps { list-style: none; padding: 0; margin: 0; }
.enquiry-steps li { padding: 0.4rem 0; padding-left: 1.1rem; position: relative; font-size: 0.875rem; color: var(--muted); }
.enquiry-steps li > span { position: absolute; left: 0; color: var(--blue); font-weight: 700; }

/* ============================================================
   LAYER 5 — PAGE-SPECIFIC
   Styles that only apply to one page. If a component appears
   on more than one page, move it up to Layer 4.
   ============================================================ */

/* ── services.html ─────────────────────────────────────────── */
/* Note: .section-deep is defined in Layer 3 utility classes */

.services-grid { display: flex; flex-direction: column; gap: 4rem; }

.service-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.service-card--alt { background: #0a0a14; border-color: rgba(30, 58, 138, 0.2); }
[data-theme="light"] .service-card--alt { background: #eef2ff; border-color: rgba(30, 110, 255, 0.2); }

/* Shop page — always dark regardless of theme (product imagery designed for dark bg) */
[data-theme="light"] .shop-hero,
[data-theme="light"] .shop-wrap,
[data-theme="light"] .img-panel,
[data-theme="light"] .config-panel,
[data-theme="light"] .info-strip,
[data-theme="light"] .reviews-section,
[data-theme="light"] .cart-drawer,
[data-theme="light"] .cart-fab,
[data-theme="light"] .cart-overlay + .cart-drawer,
[data-theme="light"] .lightbox-overlay {
  --bg:      #000000;
  --card-bg: #111111;
  --border:  #222222;
  --text:    #ffffff;
  --muted:   #a0a0a0;
}

.service-img { height: 260px; flex-shrink: 0; overflow: hidden; }
.service-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-mask-image: linear-gradient(to bottom, black 25%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 25%, transparent 100%);
}

.service-content { padding: 0 2.5rem 2.5rem; flex: 1; }
.service-content h2 { margin: 0.5rem 0 1rem; font-size: 1.6rem; }
.service-content > p { color: var(--muted); margin-bottom: 1.5rem; font-size: 1rem; line-height: 1.7; }

.service-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 2rem;
}
.service-list li {
  font-size: 0.9rem;
  color: var(--text);
  padding-left: 1.2rem;
  position: relative;
}
.service-list li::before { content: '→'; position: absolute; left: 0; color: var(--blue); font-size: 0.8rem; }

.service-cta { display: flex; gap: 1rem; flex-wrap: wrap; }


/* ============================================================
   LAYER 6 — RESPONSIVE
   All breakpoint overrides in one place.
   Order mirrors the layer order above.
   ============================================================ */

/* ── ≤1024px ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .grid-4        { grid-template-columns: repeat(2, 1fr); }
  .feature-grid  { grid-template-columns: repeat(2, 1fr); }
  .footer-inner  { grid-template-columns: 1fr 1fr; }
}

/* ── ≤768px ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Base */
  h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; }

  /* Layout */
  .section { padding: 3.5rem 0; }

  .grid-3,
  .grid-2,
  .grid-4,
  .app-grid,
  .feature-grid,
  .values-grid,
  .comparison-grid,
  .contact-grid,
  .product-hero-inner,
  .footer-inner          { grid-template-columns: 1fr; }

  /* Nav */
  .nav-links {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.97);
    border-bottom: 1px solid var(--border);
    padding: 1rem 1.5rem;
  }
  .nav-links.open    { display: flex; }
  .nav-links a       { padding: 0.75rem 0; width: 100%; border-bottom: 1px solid var(--border); font-size: 1rem; }
  .nav-links a:last-child { border-bottom: none; }
  .nav-links a::after { display: none; }
  .hamburger         { display: flex; }
  #nav-placeholder nav,
  nav.main-nav       { position: sticky; }
  .nav-inner         { position: relative; }

  /* Hero */
  .hero              { min-height: 80vh; padding: 3rem 0; }
  .hero p            { font-size: 1rem; }
  .hero-btns         { flex-direction: column; }

  /* Brands */
  .brands-row        { flex-direction: column; align-items: stretch; }
  .brand-block       { text-align: center; }

  /* CTA */
  .cta-btns          { flex-direction: column; align-items: center; }

  /* Product hero */
  .product-hero-img  { height: 220px; }

  /* Footer */
  .footer-inner      { gap: 2rem; }

  /* App sections */
  .app-section-inner { grid-template-columns: 1fr; }
  .app-section-icon  { text-align: left; }

  /* Slideshow */
  .slide             { grid-template-columns: 1fr; }
  .slide-img-wrap    { min-height: clamp(140px, 28vh, 220px); }
  .slide-caption     { padding: 1.5rem; }
  .slide-caption h3  { font-size: 1.25rem; }

  /* Services page */
  .service-img       { height: 200px; }
  .service-content   { padding: 0 1.5rem 2rem; }
  .service-list      { grid-template-columns: 1fr; }

  /* Grid variants */
  .grid-2-lg         { grid-template-columns: 1fr; gap: 2rem; }
  .grid-2-md,
  .grid-2-sm         { grid-template-columns: 1fr; }

  /* Utility grids added in Tier 2 — missing mobile breakpoints */
  .grid-2-start,
  .catalog-entry-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ── ≤1024px (catalog grids) ───────────────────────────────── */
@media (max-width: 1024px) {
  .grid-4-catalog { grid-template-columns: repeat(2, 1fr); }
}

/* ── ≤768px (catalog grids) ────────────────────────────────── */
@media (max-width: 768px) {
  .grid-3-catalog,
  .grid-4-catalog { grid-template-columns: repeat(2, 1fr); }
}

/* ── ≤480px ────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .container      { padding: 0 1rem; }
  .card           { padding: 1.5rem; }
  .btn            { width: 100%; justify-content: center; }
  .hero-btns .btn { width: auto; }
  .grid-2-catalog,
  .grid-3-catalog,
  .grid-4-catalog { grid-template-columns: 1fr; }
}

/* ============================================================
   PLC-AS-A-SERVICE PAGE (services/plc-programming.html)
   ============================================================ */

.saas-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(30, 110, 255, 0.12);
  border: 1px solid rgba(30, 110, 255, 0.35);
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.9rem;
  border-radius: 100px;
  margin-bottom: 1.5rem;
}

/* Steps */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  counter-reset: step-counter;
}
.step-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  position: relative;
  overflow: hidden;
  transition: border-color var(--transition);
}
.step-card::before {
  counter-increment: step-counter;
  content: counter(step-counter, decimal-leading-zero);
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  font-size: 3rem;
  font-weight: 900;
  color: rgba(30, 110, 255, 0.08);
  line-height: 1;
  letter-spacing: -0.04em;
}
.step-card:hover { border-color: rgba(30, 110, 255, 0.4); }
.step-card .step-icon {
  width: 44px;
  height: 44px;
  background: rgba(30, 110, 255, 0.12);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  font-size: 1.1rem;
  margin-bottom: 1.25rem;
}
.step-card h4 { color: var(--text); margin-bottom: 0.5rem; }
.step-card p  { font-size: 0.875rem; }

/* Tier cards */
.tiers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.5rem;
  align-items: start;
}
.tier-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
  position: relative;
  transition: border-color var(--transition), transform var(--transition);
}
.tier-card:hover { border-color: rgba(30, 110, 255, 0.4); transform: translateY(-3px); }
.tier-card.tier-featured { border-color: var(--blue); background: var(--blue-glow); }
.tier-featured-label { display: none; }
.tier-card.tier-featured .tier-featured-label {
  display: inline-block;
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--blue);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.25rem 1rem;
  border-radius: 100px;
  white-space: nowrap;
}
.tier-header   { margin-bottom: 1.5rem; }
.tier-name     { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--blue); margin-bottom: 0.5rem; }
.tier-header h3 { color: var(--text); font-size: 1.4rem; margin-bottom: 0.5rem; }
.tier-header p  { font-size: 0.875rem; line-height: 1.55; }
.tier-divider  { height: 1px; background: var(--border); margin: 1.5rem 0; }
.tier-features { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-direction: column; gap: 0.75rem; }
.tier-features li { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.875rem; color: var(--muted); }
.tier-features li i { color: var(--blue); font-size: 0.8rem; margin-top: 0.2rem; flex-shrink: 0; }
.tier-features li.feat-muted i,
.tier-features li.feat-muted   { color: var(--muted); }
.tier-cta      { display: block; text-align: center; }
.tier-cta .btn { width: 100%; justify-content: center; }

/* Tech stack tags */
.tech-strip { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.tech-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 0.45rem 1.1rem;
  font-size: 0.825rem;
  font-weight: 500;
  color: var(--muted);
  transition: border-color var(--transition), color var(--transition);
}
.tech-tag:hover { border-color: rgba(30, 110, 255, 0.4); color: var(--text); }
.tech-tag i     { color: var(--blue); font-size: 0.85rem; }

/* Use cases */
.usecase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.usecase-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  transition: border-color var(--transition);
}
.usecase-card:hover { border-color: rgba(30, 110, 255, 0.35); }
.usecase-icon {
  width: 40px;
  height: 40px;
  background: rgba(30, 110, 255, 0.1);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  font-size: 1rem;
  flex-shrink: 0;
}
.usecase-card h4 { font-size: 0.95rem; color: var(--text); margin-bottom: 0.3rem; }
.usecase-card p  { font-size: 0.825rem; }

/* FAQ accordion */
.faq-list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }
.faq-question {
  width: 100%;
  background: var(--card-bg);
  border: none;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  font-family: var(--font);
  transition: background var(--transition);
}
.faq-question:hover     { background: #161616; }
[data-theme="light"] .faq-question:hover { background: #eaeaea; }
.faq-question i         { color: var(--blue); font-size: 0.85rem; flex-shrink: 0; transition: transform 0.25s ease; }
.faq-question.open i    { transform: rotate(180deg); }
.faq-answer             { display: none; padding: 0 1.5rem 1.25rem; background: var(--card-bg); }
.faq-answer.open        { display: block; }
.faq-answer p           { font-size: 0.875rem; line-height: 1.7; }

/* Stat strip */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.stat-item              { background: var(--card-bg); padding: 2rem 1.5rem; text-align: center; }
.stat-item .stat-number { font-size: 2.25rem; font-weight: 800; color: var(--blue); letter-spacing: -0.03em; line-height: 1; margin-bottom: 0.4rem; }
.stat-item .stat-label  { font-size: 0.8rem; color: var(--muted); font-weight: 500; }

@media (max-width: 768px) {
  .tiers-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SHOP PAGE (shop/index.html)
   ============================================================ */

/* Hero */
.shop-hero { background: var(--bg); border-bottom: 1px solid var(--border); padding: 48px 24px 40px; text-align: center; }
.shop-hero h1 { font-size: clamp(22px, 4vw, 36px); font-weight: 700; color: var(--text); margin-bottom: 10px; }
.shop-hero p  { font-size: 15px; color: var(--muted); max-width: 540px; margin: 0 auto 20px; line-height: 1.6; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.badge  { background: rgba(255,255,255,0.06); border: 1px solid var(--border); border-radius: 20px; padding: 5px 13px; font-size: 12px; color: #ccc; }

/* Layout */
.shop-wrap { max-width: 1000px; margin: 0 auto; padding: 40px 20px; }
.product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 700px) { .product-layout { grid-template-columns: 1fr; } }

/* Image panel */
.img-panel { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.img-slider { position: relative; background: #f5f7f9; }
.img-slider .slide,
.svg-crop-slide { display: none; width: 100%; height: 280px; overflow: hidden; position: relative; background: #f5f7f9; cursor: zoom-in; }
.img-slider .slide { object-fit: contain; }
.img-slider .slide.active, .svg-crop-slide.active { display: block; }
.svg-crop-slide img { position: absolute; height: auto; top: 50%; transform: translateY(-50%); }
.slide-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.45); border: none; color: #fff; font-size: 18px; width: 24px; height: 40px; cursor: pointer; border-radius: 4px; z-index: 2; padding: 0; }
.slide-arrow:hover { background: rgba(0,0,0,0.7); }
.slide-prev { left: 4px; }
.slide-next { right: 4px; }
.slide-dots { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; z-index: 2; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(0,0,0,0.25); cursor: pointer; border: 1px solid rgba(255,255,255,0.3); }
.dot.active { background: var(--blue); border-color: var(--blue); }
.slide-label { position: absolute; top: 6px; left: 8px; font-size: 10px; font-weight: 600; background: rgba(0,0,0,0.55); color: #fff; padding: 2px 8px; border-radius: 3px; z-index: 2; pointer-events: none; }
.slide-zoom-hint { position: absolute; top: 6px; right: 8px; font-size: 10px; background: rgba(0,0,0,0.45); color: #ccc; padding: 2px 7px; border-radius: 3px; z-index: 2; pointer-events: none; }
.img-cad-links { padding: 12px 14px; display: flex; gap: 8px; flex-wrap: wrap; background: #0d0d0d; border-top: 1px solid var(--border); }
.cad-link { font-size: 12px; font-weight: 600; color: var(--muted); text-decoration: none; padding: 4px 10px; border: 1px solid var(--border); border-radius: 4px; transition: color 0.15s, border-color 0.15s; }
.cad-link:hover { color: #fff; border-color: #555; }
.cad-label { font-size: 11px; color: #555; align-self: center; }

/* Config panel */
.prod-title { font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.prod-sub   { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.prod-tags  { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.tag { font-size: 11px; padding: 3px 9px; border-radius: 4px; font-weight: 600; }
.tag-ss       { background: rgba(30,110,255,0.15); color: #6fa8ff; border: 1px solid rgba(30,110,255,0.25); }
.tag-cs       { background: rgba(255,180,0,0.12);  color: #ffc84a; border: 1px solid rgba(255,180,0,0.2); }
.tag-delivery { background: rgba(50,205,100,0.12); color: #5fdb8a; border: 1px solid rgba(50,205,100,0.2); }
.tag-export   { background: rgba(255,140,0,0.12);  color: #ffaa44; border: 1px solid rgba(255,140,0,0.2); }

/* Price display */
.price-row    { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 20px 0 4px; }
.price-amount { font-size: 28px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; }
.price-per    { font-size: 13px; color: var(--muted); }
.currency-select { background: #1a1a1a; border: 1px solid var(--border); color: var(--muted); border-radius: 6px; padding: 4px 8px; font-size: 12px; font-family: inherit; cursor: pointer; }
.currency-select:focus { outline: none; border-color: var(--blue); }
.price-note   { font-size: 11px; color: var(--muted); margin-bottom: 18px; line-height: 1.6; }

/* Size picker */
.picker-label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.size-select {
  width: 100%; padding: 10px 12px;
  background: #1a1a1a; border: 1px solid var(--border);
  border-radius: 8px; color: #fff; font-size: 14px; font-family: inherit;
  cursor: pointer; outline: none; margin-bottom: 16px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 32px;
}
.size-select:focus { border-color: var(--blue); }

/* Specs table */
.specs-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: 13px; }
.specs-table td { padding: 6px 0; border-bottom: 1px solid #1a1a1a; }
.specs-table td:first-child { color: var(--muted); width: 45%; }
.specs-table td:last-child  { color: #e0e0e0; font-weight: 600; font-variant-numeric: tabular-nums; }
.specs-table tr:last-child td { border-bottom: none; }

/* Material toggle */
.mat-toggle { display: flex; gap: 8px; margin-bottom: 20px; }
.mat-btn { flex: 1; padding: 9px 0; border-radius: 7px; border: 1px solid var(--border); background: #1a1a1a; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s; font-family: inherit; line-height: 1.3; }
.oring-btn { padding: 8px 4px; }
.mat-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.mat-btn:hover:not(.active) { border-color: #444; color: #ccc; }

/* Qty stepper */
.qty-row     { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; }
.qty-stepper { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.qty-btn     { background: #1a1a1a; border: none; color: #fff; width: 36px; height: 38px; font-size: 18px; cursor: pointer; transition: background 0.1s; }
.qty-btn:hover { background: #2a2a2a; }
.qty-input   { width: 48px; background: #111; border: none; border-left: 1px solid var(--border); border-right: 1px solid var(--border); color: #fff; text-align: center; font-size: 15px; font-weight: 600; height: 38px; font-family: inherit; }
.qty-input:focus { outline: none; background: #1a1a1a; }
.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.qty-input[type=number] { -moz-appearance: textfield; }

/* Add to cart */
.add-btn { width: 100%; padding: 12px; background: var(--blue); color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; transition: background 0.15s; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 8px; }
.add-btn:hover { background: var(--blue-dark); }

/* Cart drawer */
.cart-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1050; }
.cart-overlay.open { display: block; }
.cart-drawer { position: fixed; top: 0; right: -400px; width: 380px; max-width: 95vw; height: 100%; background: #111; border-left: 1px solid var(--border); z-index: 1051; transition: right 0.25s ease; display: flex; flex-direction: column; }
.cart-drawer.open { right: 0; }
.cart-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.cart-head h3 { color: #fff; font-size: 16px; font-weight: 700; margin: 0; }
.cart-close { background: none; border: none; color: #888; font-size: 20px; cursor: pointer; line-height: 1; }
.cart-close:hover { color: #fff; }
.cart-body  { flex: 1; overflow-y: auto; padding: 16px 20px; }
.cart-empty { text-align: center; padding: 48px 0; color: var(--muted); font-size: 14px; }
.cart-empty i { font-size: 32px; margin-bottom: 12px; display: block; color: #333; }
.cart-item { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px 0; border-bottom: 1px solid #1a1a1a; align-items: start; }
.cart-item:last-child { border-bottom: none; }
.ci-name    { font-size: 14px; font-weight: 600; color: #fff; }
.ci-sub     { font-size: 12px; color: var(--muted); margin-top: 2px; }
.ci-right   { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ci-stepper { display: flex; align-items: center; border: 1px solid #2a2a2a; border-radius: 5px; overflow: hidden; }
.ci-btn     { background: #1a1a1a; border: none; color: #ccc; width: 26px; height: 26px; font-size: 14px; cursor: pointer; }
.ci-btn:hover { background: #2a2a2a; color: #fff; }
.ci-qty     { width: 32px; background: #111; border: none; border-left: 1px solid #2a2a2a; border-right: 1px solid #2a2a2a; color: #fff; text-align: center; font-size: 13px; font-weight: 600; height: 26px; font-family: inherit; }
.ci-qty:focus { outline: none; }
.ci-remove  { font-size: 11px; color: #555; background: none; border: none; cursor: pointer; }
.ci-remove:hover { color: #e05; }
.cart-foot  { padding: 16px 20px; border-top: 1px solid var(--border); }
.cart-note  { font-size: 12px; color: #555; margin-bottom: 12px; line-height: 1.5; }
.cart-quote-btn { width: 100%; padding: 12px; background: var(--blue); color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; transition: background 0.15s; }
.cart-quote-btn:hover    { background: var(--blue-dark); }
.cart-quote-btn:disabled { background: #333; color: #666; cursor: default; }

/* Cart fab */
.cart-fab { position: fixed; bottom: 90px; right: 24px; z-index: 200; background: var(--card-bg); border: 1px solid var(--border); border-radius: 50px; padding: 10px 18px; display: flex; align-items: center; gap: 8px; cursor: pointer; color: #fff; font-size: 14px; font-weight: 600; transition: border-color 0.2s, background 0.2s; box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
.cart-fab:hover { border-color: var(--blue); background: #181818; }
.cart-badge { background: var(--blue); color: #fff; border-radius: 50%; width: 20px; height: 20px; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.cart-fab.hidden { display: none; }

/* Info strip */
.info-strip { background: var(--card-bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--muted); text-align: center; padding: 24px 20px; font-size: 14px; line-height: 2; }
.info-strip strong { color: var(--text); }
.info-strip a { color: var(--blue); text-decoration: none; }
.info-strip a:hover { text-decoration: underline; }

/* Reviews */
.reviews-section { max-width: 1000px; margin: 0 auto; padding: 40px 20px 50px; }
.reviews-header  { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.reviews-title   { font-size: 20px; font-weight: 700; color: var(--text); }
.reviews-nav     { display: flex; gap: 8px; }
.rev-nav-btn { background: #1a1a1a; border: 1px solid var(--border); color: #ccc; width: 34px; height: 34px; border-radius: 6px; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
.rev-nav-btn:hover:not(:disabled) { border-color: var(--blue); color: #fff; }
.rev-nav-btn:disabled { opacity: 0.3; cursor: default; }
.reviews-track-wrap { overflow: hidden; }
.reviews-track { display: flex; gap: 16px; transition: transform 0.3s ease; }
.review-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; flex: 0 0 calc(33.333% - 11px); min-width: 0; }
@media (max-width: 700px)  { .review-card { flex: 0 0 100%; } }
@media (min-width: 701px) and (max-width: 900px) { .review-card { flex: 0 0 calc(50% - 8px); } }
.stars        { color: #f5a623; font-size: 14px; margin-bottom: 10px; letter-spacing: 2px; }
.review-text  { font-size: 14px; color: #ccc; line-height: 1.65; margin-bottom: 14px; }
.review-item-tag { font-size: 11px; color: var(--blue); margin-bottom: 10px; font-weight: 600; }
.review-author { font-size: 13px; font-weight: 700; color: var(--text); }
.review-meta  { font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.reviews-dots { display: flex; gap: 6px; justify-content: center; margin-top: 18px; }
.rev-dot      { width: 6px; height: 6px; border-radius: 50%; background: #333; cursor: pointer; transition: background 0.15s; border: none; }
.rev-dot.active { background: var(--blue); }

/* Quote modal */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 1100; align-items: center; justify-content: center; padding: 16px; }
.modal-overlay.open { display: flex; }
.modal { background: #fff; border-radius: 14px; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; padding: 28px; position: relative; }
.modal-close { position: absolute; top: 16px; right: 20px; background: none; border: none; font-size: 22px; cursor: pointer; color: #888; line-height: 1; }
.modal h2    { font-size: 20px; margin-bottom: 6px; color: #1a1a2e; }
.modal .modal-sub { font-size: 13px; color: #888; margin-bottom: 20px; line-height: 1.5; }
.form-row    { margin-bottom: 14px; }
.form-row label { display: block; font-size: 13px; font-weight: 600; color: #333; margin-bottom: 5px; }
.form-row input,
.form-row select,
.form-row textarea { width: 100%; padding: 9px 12px; border: 1px solid #d0d5dd; border-radius: 6px; font-size: 14px; font-family: inherit; color: #1a1a2e; outline: none; transition: border-color 0.15s; background: #fff; }
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus { border-color: var(--blue); }
.form-row textarea { resize: vertical; min-height: 72px; }
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .form-2col { grid-template-columns: 1fr; } }
.submit-btn  { width: 100%; padding: 12px; background: var(--blue); color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 6px; transition: background 0.15s; font-family: inherit; }
.submit-btn:hover { background: var(--blue-dark); }
.form-note   { font-size: 12px; color: #888; text-align: center; margin-top: 10px; line-height: 1.5; }
.success-box { display: none; text-align: center; padding: 24px 0 8px; }
.success-box .check { font-size: 48px; margin-bottom: 12px; }
.success-box h3 { font-size: 18px; margin-bottom: 8px; color: #1a1a2e; }
.success-box p  { font-size: 14px; color: #555; line-height: 1.6; }

/* Lightbox */
.lightbox-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 1200; align-items: center; justify-content: center; padding: 16px; }
.lightbox-overlay.open { display: flex; }
.lightbox-inner  { position: relative; max-width: 95vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lightbox-inner img { max-width: 95vw; max-height: 82vh; object-fit: contain; border-radius: 6px; background: #f5f7f9; box-shadow: 0 8px 40px rgba(0,0,0,0.6); }
.lightbox-close  { position: absolute; top: -14px; right: -14px; background: #333; border: none; color: #fff; font-size: 18px; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lightbox-close:hover { background: #555; }
.lightbox-caption { font-size: 12px; color: #aaa; text-align: center; }