/* =============================================================
   JENDELA MULTI TERANG — main.css
   Bootstrap 5.3 + Custom Design System
   Stack: Plus Jakarta Sans (display) · Inter (body)
   Palette: Hitam dominan, aksen 4 warna pane jendela
   ============================================================= */

/* ============================================================
   TABLE OF CONTENTS
   01. Design Tokens (CSS Custom Properties)
   02. Reset & Base
   03. Typography
   04. Layout Utilities (section-pad, containers)
   05. Announcement Bar
   06. Header & Navigation
   07. Logo (4-pane window motif)
   08. Hero Section
   09. Marquee
   10. Stats Section
   11. About Snippet
   12. Categories Grid
   13. Product Cards & Grid
   14. How to Order Steps
   15. Brands Section
   16. Distribution Section
   17. Testimonials
   18. Blog Preview / Cards
   19. CTA Section
   20. Footer
   21. Page Hero (inner pages)
   22. Filter Bar & Search
   23. Team Cards
   24. Timeline
   25. Mission / Values / Numbers
   26. Certifications
   27. Product Detail (product-single)
   28. Product Gallery & Tabs
   29. Brands Catalog (brands.html)
   30. Blog Catalog & Article (blog, blog-single)
   31. Distribution Page
   32. Contact Page
   33. FAQ Page
   34. Dark Mode
   35. Animations & Transitions
   36. Responsive Overrides
   ============================================================= */


/* ============================================================
   01. DESIGN TOKENS
   ============================================================ */

:root {
  /* ── Core Palette ── */
  --clr-black:       #0a0a0a;
  --clr-off-black:   #111111;
  --clr-dark:        #1a1a1a;
  --clr-mid:         #3a3a3a;
  --clr-muted:       #6b7280;
  --clr-subtle:      #9ca3af;
  --clr-border:      #e5e7eb;
  --clr-border-soft: #f0f0f0;
  --clr-bg:          #ffffff;
  --clr-bg-soft:     #f9fafb;
  --clr-bg-warm:     #fafaf8;
  --clr-white:       #ffffff;

  /* ── Jendela 4-Pane Accent Colors ── */
  --clr-pane-red:    #e63946;
  --clr-pane-yellow: #f4a017;
  --clr-pane-green:  #2a9d5c;
  --clr-pane-blue:   #2563eb;

  /* ── Accent tints ── */
  --clr-red-tint:    #fef2f2;
  --clr-yellow-tint: #fffbeb;
  --clr-green-tint:  #f0fdf4;
  --clr-blue-tint:   #eff6ff;

  /* ── Typography ── */
  --font-display:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:       'Inter', system-ui, sans-serif;

  --fs-xs:    0.75rem;    /* 12px */
  --fs-sm:    0.875rem;   /* 14px */
  --fs-base:  1rem;       /* 16px */
  --fs-md:    1.125rem;   /* 18px */
  --fs-lg:    1.25rem;    /* 20px */
  --fs-xl:    1.5rem;     /* 24px */
  --fs-2xl:   1.875rem;   /* 30px */
  --fs-3xl:   2.25rem;    /* 36px */
  --fs-4xl:   3rem;       /* 48px */
  --fs-5xl:   3.75rem;    /* 60px */

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.6;
  --lh-relaxed:1.75;

  --ls-tight:  -0.03em;
  --ls-normal: -0.01em;
  --ls-wide:   0.08em;
  --ls-wider:  0.15em;

  /* ── Spacing ── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* ── Radius ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-full:9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,.1), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:  0 12px 32px rgba(0,0,0,.1), 0 4px 8px rgba(0,0,0,.06);
  --shadow-xl:  0 24px 48px rgba(0,0,0,.12);
  --shadow-card:0 2px 8px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   150ms;
  --dur-normal: 250ms;
  --dur-slow:   400ms;

  /* ── Header ── */
  --header-h: 68px;
  --announcement-h: 40px;
}


/* ============================================================
   02. RESET & BASE
   ============================================================ */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  color: var(--clr-dark);
  background-color: var(--clr-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

a:hover { color: var(--clr-black); }

ul, ol { list-style: none; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

/* Skip link */
.skip-link {
  position: fixed;
  top: var(--sp-4);
  left: var(--sp-4);
  z-index: 9999;
  padding: var(--sp-3) var(--sp-6);
  background: var(--clr-black);
  color: var(--clr-white);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  border-radius: var(--radius-md);
  transform: translateY(-200%);
  transition: transform var(--dur-normal) var(--ease-out);
}
.skip-link:focus {
  transform: translateY(0);
  color: var(--clr-white);
}


/* ============================================================
   03. TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--clr-black);
}

p {
  line-height: var(--lh-relaxed);
  color: var(--clr-mid);
}

p em {
  font-style: italic;
  color: var(--clr-muted);
  font-size: 0.925em;
}

strong { font-weight: var(--fw-semibold); color: var(--clr-dark); }

/* Section heading system */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--clr-muted);
  margin-bottom: var(--sp-4);
}

.section-eyebrow--light {
  color: rgba(255,255,255,0.6);
}

.section-heading {
  font-size: clamp(var(--fs-2xl), 4vw, var(--fs-4xl));
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-tight);
  line-height: 1.1;
  color: var(--clr-black);
  margin-bottom: var(--sp-3);
}

.heading-accent {
  background: linear-gradient(135deg, var(--clr-pane-red) 0%, var(--clr-pane-yellow) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-heading-en {
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--clr-muted);
  margin-top: calc(-1 * var(--sp-2));
  margin-bottom: var(--sp-6);
}

.section-header { margin-bottom: var(--sp-10); }

.section-header--center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-body > p:last-child { margin-bottom: 0; }
.section-lead {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--clr-dark);
  line-height: var(--lh-relaxed);
}

/* Bilingual nav label */
.nav-link__en { display: inline; }
.nav-link__id { display: none; font-size: var(--fs-xs); color: var(--clr-muted); }

/* Bilingual btn text */
.btn-text-en { display: inline; }
.btn-text-id { display: none; }


/* ============================================================
   04. LAYOUT UTILITIES
   ============================================================ */

.section-pad    { padding-top: var(--sp-24); padding-bottom: var(--sp-24); }
.section-pad-sm { padding-top: var(--sp-16); padding-bottom: var(--sp-16); }

/* Text link */
.btn-text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--clr-black);
  white-space: nowrap;
  text-decoration: none;
  transition: gap var(--dur-fast) var(--ease-out), color var(--dur-fast);
}
.btn-text-link:hover { gap: var(--sp-3); color: var(--clr-pane-red); }
.btn-text-link i { font-size: 0.9em; transition: transform var(--dur-fast) var(--ease-out); }
.btn-text-link:hover i { transform: translateX(3px); }

.btn-text-link--cta { color: rgba(255,255,255,0.8); }
.btn-text-link--cta:hover { color: #fff; gap: var(--sp-3); }

/* Primary button */
.btn-primary-jmt {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.75rem 1.5rem;
  background: var(--clr-black);
  color: var(--clr-white) !important;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-md);
  border: 2px solid var(--clr-black);
  transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-bounce), box-shadow var(--dur-fast);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary-jmt:hover {
  background: var(--clr-off-black);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  color: var(--clr-white) !important;
}
.btn-primary-jmt:active { transform: translateY(0); }
.btn-primary-jmt.btn-lg { padding: 0.875rem 2rem; font-size: var(--fs-base); }

/* Outline button */
.btn-outline-jmt {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.75rem 1.5rem;
  background: transparent;
  color: var(--clr-black) !important;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-md);
  border: 2px solid var(--clr-border);
  transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast) var(--ease-bounce);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn-outline-jmt:hover {
  border-color: var(--clr-black);
  background: var(--clr-bg-soft);
  transform: translateY(-1px);
  color: var(--clr-black) !important;
}
.btn-outline-jmt.btn-lg { padding: 0.875rem 2rem; font-size: var(--fs-base); }

/* Light button (for dark backgrounds) */
.btn-light-jmt {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.875rem 2rem;
  background: var(--clr-white);
  color: var(--clr-black) !important;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-md);
  border: 2px solid var(--clr-white);
  transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-bounce), box-shadow var(--dur-fast);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn-light-jmt:hover {
  background: #f0f0f0;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  color: var(--clr-black) !important;
}


/* ============================================================
   05. ANNOUNCEMENT BAR
   ============================================================ */

.announcement-bar {
  height: var(--announcement-h);
  background: var(--clr-black);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.announcement-bar__text {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,.7);
  text-align: center;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.announcement-bar__badge {
  display: inline-flex;
  padding: 2px 8px;
  background: var(--clr-pane-red);
  color: #fff;
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border-radius: var(--radius-full);
}

.announcement-bar__text a {
  color: var(--clr-white);
  font-weight: var(--fw-semibold);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.announcement-bar__text a:hover { text-decoration: none; }


/* ============================================================
   06. HEADER & NAVIGATION
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--header-h);
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--clr-border-soft);
  transition: box-shadow var(--dur-normal) var(--ease-out);
}

.site-header.scrolled {
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
}

.site-header .navbar {
  padding-top: 0;
  padding-bottom: 0;
  height: var(--header-h);
}

.site-header .container {
  display: flex;
  align-items: center;
  height: 100%;
}

/* Nav links */
.site-header .nav-link {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--clr-mid) !important;
  padding: var(--sp-2) var(--sp-3) !important;
  border-radius: var(--radius-md);
  transition: color var(--dur-fast), background var(--dur-fast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.site-header .nav-link:hover,
.site-header .nav-link.active {
  color: var(--clr-black) !important;
  background: var(--clr-bg-soft);
}

.site-header .nav-link.active {
  color: var(--clr-black) !important;
}

/* Theme toggle */
.btn-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  color: var(--clr-mid);
  font-size: var(--fs-md);
  transition: color var(--dur-fast), background var(--dur-fast);
  cursor: pointer;
}
.btn-theme-toggle:hover { color: var(--clr-black); background: var(--clr-bg-soft); }
.icon-sun { display: none; }
.icon-moon { display: block; }

/* Navbar toggler */
.navbar-toggler {
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: 6px 10px;
}
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(26,26,26,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Mobile nav */
@media (max-width: 991.98px) {
  .navbar-collapse {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--clr-white);
    border-bottom: 1px solid var(--clr-border);
    padding: var(--sp-4) var(--sp-4) var(--sp-6);
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
  }
  .site-header .nav-link {
    flex-direction: row;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-4) !important;
    border-radius: var(--radius-md);
  }
  .nav-link__id { display: inline; }
}


/* ============================================================
   07. LOGO — 4-pane window motif
   ============================================================ */

.site-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  flex-shrink: 0;
}

.site-logo__mark {
  flex-shrink: 0;
}

.logo-window {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.logo-pane {
  display: block;
  border-radius: 2px;
  transition: opacity var(--dur-fast);
}

.logo-pane--1 { background: var(--clr-pane-red); }
.logo-pane--2 { background: var(--clr-pane-yellow); }
.logo-pane--3 { background: var(--clr-pane-green); }
.logo-pane--4 { background: var(--clr-pane-blue); }

.site-logo:hover .logo-pane { opacity: 0.8; }

.site-logo__text {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.logo-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: var(--fw-extrabold);
  color: var(--clr-black);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.logo-tagline {
  font-size: 0.625rem;
  font-weight: var(--fw-medium);
  color: var(--clr-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}


/* ============================================================
   08. HERO SECTION
   ============================================================ */

.hero-section {
  padding-top: calc(var(--sp-20) + var(--sp-8));
  padding-bottom: var(--sp-16);
  background: var(--clr-bg-warm);
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(230,57,70,.04) 0%, transparent 70%);
  pointer-events: none;
}

.hero-section .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  align-items: center;
}

.hero-section__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

/* Eyebrow */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--clr-muted);
}

.hero-eyebrow__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--clr-pane-red);
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.8); }
}

/* Heading */
.hero-heading {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.04em;
  line-height: 1.0;
  color: var(--clr-black);
}

.hero-heading__accent {
  background: linear-gradient(135deg, var(--clr-pane-red) 0%, var(--clr-pane-yellow) 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-heading__sub {
  display: block;
  font-size: 0.38em;
  font-weight: var(--fw-regular);
  font-style: italic;
  color: var(--clr-muted);
  -webkit-text-fill-color: var(--clr-muted);
  letter-spacing: 0;
  margin-top: var(--sp-2);
  line-height: 1.4;
}

/* Subheading */
.hero-subheading {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--clr-mid);
  max-width: 520px;
}

/* CTA group */
.hero-cta-group {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

/* Trust badges */
.hero-badges {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--clr-border);
}

.hero-badge {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-xs);
  line-height: 1.3;
  color: var(--clr-mid);
}

.hero-badge i {
  font-size: var(--fs-md);
  color: var(--clr-pane-green);
  flex-shrink: 0;
}

.hero-badge em { display: block; color: var(--clr-muted); }
.hero-badge__divider {
  width: 1px;
  height: 32px;
  background: var(--clr-border);
}

/* Hero image */
.hero-image-block {
  position: relative;
}

.hero-image-wrap {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  aspect-ratio: 4/3;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.hero-image-wrap:hover .hero-image { transform: scale(1.03); }

/* Float cards */
.hero-float-card {
  position: absolute;
  background: var(--clr-white);
  border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  line-height: 1.3;
  color: var(--clr-mid);
}

.hero-float-card strong {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-extrabold);
  color: var(--clr-pane-green);
  display: block;
}

.hero-float-card i { font-size: var(--fs-xl); color: var(--clr-pane-blue); }

.hero-float-card--1 {
  bottom: -var(--sp-4);
  left: -var(--sp-6);
  bottom: -16px;
  left: -24px;
  animation: float-1 4s ease-in-out infinite;
}

.hero-float-card--2 {
  top: var(--sp-6);
  right: -var(--sp-6);
  top: 24px;
  right: -24px;
  animation: float-2 4.5s ease-in-out infinite 0.5s;
}

@keyframes float-1 {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
@keyframes float-2 {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(8px); }
}

@media (max-width: 991.98px) {
  .hero-section .container {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }
  .hero-image-block { order: -1; }
  .hero-float-card--1, .hero-float-card--2 { display: none; }
}


/* ============================================================
   09. MARQUEE
   ============================================================ */

.marquee-section {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--clr-black);
  padding: var(--sp-4) 0;
  overflow: hidden;
}

.marquee-section__label {
  flex-shrink: 0;
  padding: 0 var(--sp-6);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  border-right: 1px solid rgba(255,255,255,.1);
  white-space: nowrap;
}

.marquee-track {
  flex: 1;
  overflow: hidden;
}

.marquee-inner {
  display: flex;
  align-items: center;
  gap: 0;
  animation: marquee-scroll 30s linear infinite;
  white-space: nowrap;
}

.marquee-item {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: rgba(255,255,255,.6);
  padding: 0 var(--sp-5);
  transition: color var(--dur-fast);
}

.marquee-item:hover { color: var(--clr-white); }

.marquee-sep {
  color: var(--clr-pane-red);
  font-size: var(--fs-xs);
}

@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.marquee-track:hover .marquee-inner { animation-play-state: paused; }


/* ============================================================
   10. STATS SECTION
   ============================================================ */

.stats-section {
  background: var(--clr-black);
  padding: var(--sp-12) 0;
}

.stats-grid {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.stat-item {
  padding: var(--sp-10) var(--sp-8);
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.08);
  transition: background var(--dur-fast);
}

.stat-item:last-child { border-right: none; }
.stat-item:hover { background: rgba(255,255,255,.03); }

.stat-item__number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(var(--fs-3xl), 4vw, 3.5rem);
  font-weight: var(--fw-extrabold);
  color: var(--clr-white);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: var(--sp-2);
}

.stat-item__number span {
  color: var(--clr-pane-yellow);
}

.stat-item__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,.5);
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.stat-item__label em {
  display: block;
  font-style: italic;
  color: rgba(255,255,255,.3);
}

@media (max-width: 767.98px) {
  .stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); }
  .stat-item:last-child { border-bottom: none; }
}


/* ============================================================
   11. ABOUT SNIPPET
   ============================================================ */

.about-snippet__image-block {
  position: relative;
}

.about-snippet__figure {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  margin: 0;
}

.about-snippet__img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.about-snippet__figure:hover .about-snippet__img { transform: scale(1.03); }

/* Window pane accent decoration */
.about-snippet__windows,
.mission-image-block__windows {
  position: absolute;
  bottom: -16px;
  right: -16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.window-pane {
  display: block;
  border-radius: 2px;
}
.wp-red    { background: var(--clr-pane-red); }
.wp-yellow { background: var(--clr-pane-yellow); }
.wp-green  { background: var(--clr-pane-green); }
.wp-blue   { background: var(--clr-pane-blue); }


/* ============================================================
   12. CATEGORIES GRID
   ============================================================ */

.category-card {
  display: block;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--clr-white);
  border: 1.5px solid var(--clr-border);
  text-decoration: none;
  transition: transform var(--dur-normal) var(--ease-bounce), box-shadow var(--dur-normal) var(--ease-out), border-color var(--dur-fast);
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--clr-black);
}

.category-card__image-wrap {
  aspect-ratio: 4/3;
  overflow: hidden;
}

.category-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.category-card:hover .category-card__image { transform: scale(1.06); }

.category-card__body {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.category-card__icon {
  font-size: var(--fs-xl);
  line-height: 1;
}

.category-card__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--clr-black);
  margin: 0;
}

.category-card__title em {
  display: block;
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: var(--fs-xs);
  color: var(--clr-muted);
}

.category-card__count {
  font-size: var(--fs-xs);
  color: var(--clr-muted);
  font-weight: var(--fw-medium);
}

/* View All card variant */
.category-card--all {
  background: var(--clr-black);
  border-color: var(--clr-black);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.category-card--all .category-card__all-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  color: var(--clr-white);
  text-align: center;
  padding: var(--sp-6);
}

.category-card--all .category-card__all-inner i {
  font-size: var(--fs-3xl);
  color: rgba(255,255,255,.4);
  transition: color var(--dur-fast), transform var(--dur-fast) var(--ease-bounce);
}

.category-card--all:hover .category-card__all-inner i {
  color: var(--clr-pane-yellow);
  transform: scale(1.1);
}

.category-card--all .category-card__title {
  color: var(--clr-white);
  font-size: var(--fs-base);
}

.category-card--all .category-card__title em {
  color: rgba(255,255,255,.5);
}

.category-card--all .category-card__count {
  color: rgba(255,255,255,.5);
}


/* ============================================================
   13. PRODUCT CARDS & GRID
   ============================================================ */

.product-card {
  background: var(--clr-white);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: transform var(--dur-normal) var(--ease-bounce), box-shadow var(--dur-normal) var(--ease-out), border-color var(--dur-fast);
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.product-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.product-card__image-wrap {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--clr-bg-soft);
}

.product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.product-card:hover .product-card__image { transform: scale(1.05); }

/* Badges */
.product-card__badge {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  padding: 3px 10px;
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  z-index: 1;
}

.product-card__badge--hot {
  background: var(--clr-pane-red);
  color: var(--clr-white);
}

.product-card__badge--new {
  background: var(--clr-pane-green);
  color: var(--clr-white);
}

.product-card__body {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.product-card__origin {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--clr-muted);
}

.product-card__origin i { color: var(--clr-pane-red); font-size: 0.65rem; }
.product-card__province { color: var(--clr-subtle); }

.product-card__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--clr-black);
  line-height: 1.3;
  margin-top: var(--sp-1);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__weight {
  font-size: var(--fs-xs);
  color: var(--clr-muted);
  margin-top: var(--sp-1);
}

.product-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--clr-border-soft);
}

.product-card__price {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.price-amount {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-extrabold);
  color: var(--clr-black);
  letter-spacing: -0.02em;
}

.price-unit {
  font-size: var(--fs-xs);
  color: var(--clr-muted);
}

.product-card__moq {
  font-size: var(--fs-xs);
  color: var(--clr-muted);
}

.product-card__order-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--clr-pane-green);
  color: var(--clr-white);
  font-size: var(--fs-base);
  transition: transform var(--dur-fast) var(--ease-bounce), background var(--dur-fast);
  flex-shrink: 0;
}

.product-card__order-btn:hover {
  background: #1e8a4a;
  transform: scale(1.1);
}


/* ============================================================
   14. HOW TO ORDER STEPS
   ============================================================ */

.how-order-section { background: var(--clr-bg-soft); }

.order-step {
  position: relative;
  padding: var(--sp-8);
  background: var(--clr-white);
  border-radius: var(--radius-xl);
  border: 1.5px solid var(--clr-border);
  height: 100%;
  transition: transform var(--dur-normal) var(--ease-bounce), box-shadow var(--dur-normal), border-color var(--dur-fast);
}

.order-step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--clr-black);
}

.order-step__number {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: var(--fw-extrabold);
  color: var(--clr-border);
  line-height: 1;
  letter-spacing: -0.05em;
  margin-bottom: var(--sp-4);
  transition: color var(--dur-fast);
}

.order-step:hover .order-step__number { color: var(--clr-pane-yellow); }

.order-step__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: var(--clr-black);
  color: var(--clr-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-4);
}

.order-step__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--clr-black);
  margin-bottom: var(--sp-3);
  line-height: 1.3;
}

.order-step__title em {
  display: block;
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: var(--fs-sm);
  color: var(--clr-muted);
}

.order-step__desc {
  font-size: var(--fs-sm);
  color: var(--clr-mid);
  line-height: var(--lh-relaxed);
}

.order-step__desc em { font-style: italic; color: var(--clr-muted); }


/* ============================================================
   15. BRANDS SECTION
   ============================================================ */

.brand-card {
  display: block;
  text-decoration: none;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: transform var(--dur-normal) var(--ease-bounce), box-shadow var(--dur-normal), border-color var(--dur-fast);
}

.brand-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--clr-black);
}

.brand-card__inner {
  padding: var(--sp-5) var(--sp-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
}

.brand-card__logo-placeholder {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  background: var(--clr-black);
  color: var(--clr-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.02em;
  margin-bottom: var(--sp-2);
}

.brand-card__logo-placeholder--red    { background: var(--clr-pane-red); }
.brand-card__logo-placeholder--yellow { background: var(--clr-pane-yellow); color: var(--clr-black); }
.brand-card__logo-placeholder--green  { background: var(--clr-pane-green); }
.brand-card__logo-placeholder--blue   { background: var(--clr-pane-blue); }

.brand-card__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--clr-black);
  line-height: 1.2;
  margin: 0;
}

.brand-card__origin {
  font-size: var(--fs-xs);
  color: var(--clr-muted);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.brand-card__origin i { color: var(--clr-pane-red); }

.brand-card__count {
  font-size: var(--fs-xs);
  color: var(--clr-muted);
  font-weight: var(--fw-medium);
}

/* "More" card */
.brand-card--more { background: var(--clr-bg-soft); }
.brand-card--more .brand-card__inner { color: var(--clr-mid); }
.brand-card--more i { font-size: var(--fs-2xl); color: var(--clr-border); margin-bottom: var(--sp-2); }
.brand-card--more:hover i { color: var(--clr-black); }


/* ============================================================
   16. DISTRIBUTION SECTION
   ============================================================ */

.distrib-figure {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  margin: 0;
}

.distrib-figure__img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.distrib-figure:hover .distrib-figure__img { transform: scale(1.03); }

.distrib-figure__caption {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--clr-muted);
  font-style: italic;
  text-align: center;
}

.distrib-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.distrib-stat {
  text-align: center;
  padding: var(--sp-4);
  background: var(--clr-bg-soft);
  border-radius: var(--radius-lg);
  border: 1px solid var(--clr-border);
}

.distrib-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-extrabold);
  color: var(--clr-black);
  letter-spacing: -0.03em;
}

.distrib-stat span {
  font-size: var(--fs-xs);
  color: var(--clr-muted);
  line-height: 1.3;
}

.distrib-stat span em {
  display: block;
  font-style: italic;
  color: var(--clr-subtle);
}


/* ============================================================
   17. TESTIMONIALS
   ============================================================ */

.testimonial-card {
  background: var(--clr-white);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-xl);
  padding: var(--sp-6);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  transition: transform var(--dur-normal) var(--ease-bounce), box-shadow var(--dur-normal), border-color var(--dur-fast);
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.testimonial-card__stars { display: flex; gap: 2px; }
.testimonial-card__stars i { color: var(--clr-pane-yellow); font-size: var(--fs-sm); }

.testimonial-card__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--clr-dark);
  font-style: italic;
  flex: 1;
}

.testimonial-card__translation {
  font-size: var(--fs-xs);
  color: var(--clr-muted);
  font-style: italic;
  line-height: 1.5;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--clr-border-soft);
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: auto;
}

.testimonial-card__avatar-wrap {
  flex-shrink: 0;
}

.testimonial-card__avatar-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--clr-black);
  color: var(--clr-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.testimonial-card__avatar-placeholder--green { background: var(--clr-pane-green); }
.testimonial-card__avatar-placeholder--red   { background: var(--clr-pane-red); }

.testimonial-card__name {
  display: block;
  font-weight: var(--fw-semibold);
  color: var(--clr-black);
  font-style: normal;
  font-size: var(--fs-sm);
}

.testimonial-card__role {
  display: block;
  font-size: var(--fs-xs);
  color: var(--clr-muted);
  margin-top: 2px;
}


/* ============================================================
   18. BLOG PREVIEW / CARDS
   ============================================================ */

/* Blog card (homepage preview) */
.blog-card { display: flex; flex-direction: column; border-radius: var(--radius-xl); overflow: hidden; background: var(--clr-white); border: 1.5px solid var(--clr-border); transition: transform var(--dur-normal) var(--ease-bounce), box-shadow var(--dur-normal), border-color var(--dur-fast); }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.blog-card__link { display: block; text-decoration: none; color: inherit; flex: 1; }

.blog-card--featured .blog-card__image-wrap { aspect-ratio: 16/9; overflow: hidden; }
.blog-card--featured .blog-card__image { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.blog-card--featured:hover .blog-card__image { transform: scale(1.04); }
.blog-card--featured .blog-card__body { padding: var(--sp-6); }

.blog-card--compact .blog-card__link { display: flex; gap: var(--sp-4); align-items: flex-start; }
.blog-card--compact .blog-card__image-wrap { width: 100px; flex-shrink: 0; aspect-ratio: 3/2; overflow: hidden; border-radius: var(--radius-md); }
.blog-card--compact .blog-card__image { width: 100%; height: 100%; object-fit: cover; }
.blog-card--compact .blog-card__body { padding: var(--sp-4) var(--sp-4) var(--sp-4) 0; flex: 1; }

.blog-card__tag {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--clr-pane-red);
  margin-bottom: var(--sp-2);
}

.blog-card__title { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--clr-black); line-height: 1.35; margin-bottom: var(--sp-3); }
.blog-card--compact .blog-card__title { font-size: var(--fs-sm); margin-bottom: var(--sp-2); }
.blog-card__excerpt { font-size: var(--fs-sm); color: var(--clr-mid); line-height: var(--lh-relaxed); margin-bottom: var(--sp-4); }
.blog-card__meta { display: flex; align-items: center; gap: var(--sp-4); }
.blog-card__date { font-size: var(--fs-xs); color: var(--clr-muted); }
.blog-card__read { font-size: var(--fs-xs); color: var(--clr-subtle); }


/* ============================================================
   19. CTA SECTION
   ============================================================ */

.cta-section { background: var(--clr-black); }

.cta-section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  align-items: center;
}

.cta-section__inner--simple {
  grid-template-columns: 1fr;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.cta-section__inner--simple .cta-section__actions { justify-content: center; }

.cta-section__heading {
  font-size: clamp(var(--fs-2xl), 3.5vw, var(--fs-4xl));
  font-weight: var(--fw-extrabold);
  color: var(--clr-white);
  letter-spacing: var(--ls-tight);
  line-height: 1.1;
  margin-bottom: var(--sp-3);
}

.cta-heading-accent {
  background: linear-gradient(135deg, var(--clr-pane-yellow) 0%, var(--clr-pane-red) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cta-section__sub-en {
  font-size: var(--fs-sm);
  font-style: italic;
  color: rgba(255,255,255,.4);
  margin-bottom: var(--sp-4);
}

.cta-section__desc {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.6);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-8);
}

.cta-section__desc em { color: rgba(255,255,255,.4); }

.cta-section__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.cta-section__image { border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-xl); }
.cta-section__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

@media (max-width: 991.98px) {
  .cta-section__inner { grid-template-columns: 1fr; }
  .cta-section__image { display: none; }
}


/* ============================================================
   20. FOOTER
   ============================================================ */

.site-footer {
  background: var(--clr-off-black);
  color: rgba(255,255,255,.55);
  padding-top: var(--sp-16);
  padding-bottom: 0;
}

.site-footer__top { padding-bottom: var(--sp-12); border-bottom: 1px solid rgba(255,255,255,.08); }

/* Footer logo */
.site-footer__logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  margin-bottom: var(--sp-5);
}

.footer-logo-mark {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.footer-logo-name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--clr-white);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.footer-logo-tagline {
  display: block;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,.35);
}

.site-footer__tagline {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.45);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-5);
}

.site-footer__tagline em { color: rgba(255,255,255,.25); }

.site-footer__address {
  font-style: normal;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.4);
  margin-bottom: var(--sp-4);
}

.site-footer__contacts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.site-footer__contacts a {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.45);
  text-decoration: none;
  transition: color var(--dur-fast);
}

.site-footer__contacts a:hover { color: var(--clr-white); }

/* Footer nav */
.site-footer__nav-title {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: var(--sp-5);
}

.site-footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.site-footer__nav-list a {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.5);
  text-decoration: none;
  transition: color var(--dur-fast), padding-left var(--dur-fast);
}

.site-footer__nav-list a:hover { color: var(--clr-white); padding-left: 4px; }

/* Social list */
.site-footer__social-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.site-footer__social-list a {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.5);
  text-decoration: none;
  transition: color var(--dur-fast);
}

.site-footer__social-list a:hover { color: var(--clr-white); }

/* Footer bottom */
.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-5) 0;
  border-top: 1px solid rgba(255,255,255,.06);
  margin-top: 0;
}

.site-footer__copy {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.3);
  margin: 0;
}

.site-footer__legal-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.site-footer__legal-nav a {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.3);
  text-decoration: none;
  transition: color var(--dur-fast);
}

.site-footer__legal-nav a:hover { color: rgba(255,255,255,.7); }


/* ============================================================
   21. PAGE HERO (inner pages)
   ============================================================ */

.page-hero {
  padding-top: var(--sp-16);
  padding-bottom: var(--sp-12);
  background: var(--clr-bg-warm);
  border-bottom: 1px solid var(--clr-border);
}

.page-breadcrumb { margin-bottom: var(--sp-6); }
.breadcrumb { font-size: var(--fs-xs); gap: var(--sp-2); }
.breadcrumb-item a { color: var(--clr-muted); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--clr-black); }
.breadcrumb-item.active { color: var(--clr-dark); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--clr-border); }

.page-hero__heading {
  font-size: clamp(var(--fs-3xl), 5vw, var(--fs-5xl));
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--clr-black);
  margin-bottom: var(--sp-3);
}

.page-hero__sub-en {
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--clr-muted);
  margin-bottom: var(--sp-5);
}

.page-hero__desc {
  font-size: var(--fs-base);
  color: var(--clr-mid);
  line-height: var(--lh-relaxed);
  max-width: 600px;
}

.page-hero__desc em { font-style: italic; color: var(--clr-muted); }


/* ============================================================
   22. FILTER BAR & SEARCH
   ============================================================ */

.filter-section {
  background: var(--clr-white);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--clr-border);
  position: sticky;
  top: var(--header-h);
  z-index: 100;
}

.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.filter-bar__search { flex-shrink: 0; }

.search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: var(--sp-4);
  color: var(--clr-muted);
  font-size: var(--fs-sm);
  pointer-events: none;
}

.filter-search-input {
  height: 40px;
  padding: 0 var(--sp-4) 0 calc(var(--sp-4) + 20px);
  background: var(--clr-bg-soft);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--clr-black);
  width: 240px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  outline: none;
}

.filter-search-input:focus {
  border-color: var(--clr-black);
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}

.filter-search-input::placeholder { color: var(--clr-subtle); }

/* Filter tabs */
.filter-bar__categories { flex: 1; overflow-x: auto; scrollbar-width: none; }
.filter-bar__categories::-webkit-scrollbar { display: none; }

.filter-tabs {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: nowrap;
  white-space: nowrap;
}

.filter-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: transparent;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--clr-mid);
  cursor: pointer;
  transition: all var(--dur-fast);
  white-space: nowrap;
}

.filter-tab:hover { border-color: var(--clr-black); color: var(--clr-black); }

.filter-tab.active {
  background: var(--clr-black);
  border-color: var(--clr-black);
  color: var(--clr-white);
}

.filter-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 16px;
  padding: 0 4px;
  background: rgba(0,0,0,.08);
  border-radius: var(--radius-full);
  font-size: 10px;
}

.filter-tab.active .filter-tab__count { background: rgba(255,255,255,.2); }

/* Sort dropdown */
.filter-bar__sort { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }

.filter-sort-label {
  font-size: var(--fs-xs);
  color: var(--clr-muted);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.filter-sort-select {
  height: 36px;
  padding: 0 var(--sp-3);
  background: var(--clr-bg-soft);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  color: var(--clr-dark);
  cursor: pointer;
  outline: none;
  transition: border-color var(--dur-fast);
}

.filter-sort-select:focus { border-color: var(--clr-black); }

/* Filter chips */
.filter-chips {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  flex-wrap: wrap;
}

.filter-chips__label { font-size: var(--fs-xs); color: var(--clr-muted); }

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 4px 10px;
  background: var(--clr-black);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--clr-white);
}

.filter-chip__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: rgba(255,255,255,.2);
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  cursor: pointer;
  transition: background var(--dur-fast);
}

.filter-chip__remove:hover { background: rgba(255,255,255,.4); }

/* Catalog header */
.catalog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-6);
}

.catalog-count { font-size: var(--fs-sm); color: var(--clr-muted); }

.catalog-view-toggle { display: flex; gap: var(--sp-2); }

.view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--clr-border);
  color: var(--clr-muted);
  font-size: var(--fs-base);
  transition: all var(--dur-fast);
}

.view-btn.active, .view-btn:hover {
  background: var(--clr-black);
  border-color: var(--clr-black);
  color: var(--clr-white);
}

/* No results */
.no-results {
  text-align: center;
  padding: var(--sp-20) var(--sp-8);
}

.no-results__icon { font-size: 3rem; color: var(--clr-border); margin-bottom: var(--sp-4); display: block; }
.no-results__title { font-size: var(--fs-xl); color: var(--clr-dark); margin-bottom: var(--sp-2); }
.no-results__desc { font-size: var(--fs-sm); color: var(--clr-muted); margin-bottom: var(--sp-6); }


/* ============================================================
   23. TEAM CARDS
   ============================================================ */

.team-card {
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--clr-white);
  border: 1.5px solid var(--clr-border);
  transition: transform var(--dur-normal) var(--ease-bounce), box-shadow var(--dur-normal), border-color var(--dur-fast);
}

.team-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.team-card__image-wrap {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
}

.team-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform var(--dur-slow) var(--ease-out);
}

.team-card:hover .team-card__image { transform: scale(1.04); }

.team-card__social {
  position: absolute;
  bottom: var(--sp-3);
  right: var(--sp-3);
  display: flex;
  gap: var(--sp-2);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-normal), transform var(--dur-normal) var(--ease-out);
}

.team-card:hover .team-card__social { opacity: 1; transform: translateY(0); }

.team-card__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--clr-white);
  color: var(--clr-black);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-md);
  transition: background var(--dur-fast), color var(--dur-fast);
}

.team-card__social a:hover { background: var(--clr-black); color: var(--clr-white); }

.team-card__body {
  padding: var(--sp-4) var(--sp-5);
}

.team-card__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--clr-black);
  margin-bottom: 4px;
}

.team-card__role {
  font-size: var(--fs-xs);
  color: var(--clr-muted);
  line-height: 1.3;
}


/* ============================================================
   24. TIMELINE
   ============================================================ */

.timeline {
  position: relative;
  padding-left: var(--sp-12);
}

.timeline::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--clr-pane-red), var(--clr-pane-blue));
}

.timeline-item {
  position: relative;
  margin-bottom: var(--sp-10);
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--sp-6);
  align-items: flex-start;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -28px;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--clr-pane-red);
  border: 3px solid var(--clr-white);
  box-shadow: 0 0 0 2px var(--clr-pane-red);
  z-index: 1;
}

.timeline-item:nth-child(even)::before { background: var(--clr-pane-blue); box-shadow: 0 0 0 2px var(--clr-pane-blue); }

.timeline-item__year {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-extrabold);
  color: var(--clr-black);
  letter-spacing: -0.03em;
  display: block;
  padding-top: 4px;
}

.timeline-item__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--clr-black);
  margin-bottom: var(--sp-2);
}

.timeline-item__desc { font-size: var(--fs-sm); color: var(--clr-mid); line-height: var(--lh-relaxed); }
.timeline-item__desc-en { font-size: var(--fs-xs); font-style: italic; color: var(--clr-muted); margin-top: var(--sp-2); }

@media (max-width: 575.98px) {
  .timeline { padding-left: var(--sp-8); }
  .timeline-item { grid-template-columns: 60px 1fr; gap: var(--sp-3); }
  .timeline-item__year { font-size: var(--fs-lg); }
}


/* ============================================================
   25. MISSION / VALUES / NUMBERS
   ============================================================ */

/* Mission cards */
.mission-cards { display: flex; flex-direction: column; gap: var(--sp-4); }

.mission-card {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--clr-bg-soft);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-xl);
  transition: transform var(--dur-fast) var(--ease-bounce), box-shadow var(--dur-fast);
}

.mission-card:hover { transform: translateX(4px); box-shadow: var(--shadow-sm); }

.mission-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-lg);
  flex-shrink: 0;
}

.mission-card--vision .mission-card__icon { background: var(--clr-blue-tint); color: var(--clr-pane-blue); }
.mission-card--mission .mission-card__icon { background: var(--clr-red-tint); color: var(--clr-pane-red); }

.mission-card__title { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--clr-black); margin-bottom: var(--sp-2); }
.mission-card__text { font-size: var(--fs-sm); color: var(--clr-mid); line-height: var(--lh-relaxed); }
.mission-card__text-en { font-size: var(--fs-xs); font-style: italic; color: var(--clr-muted); margin-top: var(--sp-2); }

/* Value cards */
.value-card {
  background: var(--clr-white);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-xl);
  padding: var(--sp-6);
  height: 100%;
  transition: transform var(--dur-normal) var(--ease-bounce), box-shadow var(--dur-normal), border-color var(--dur-fast);
}

.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }

.value-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-4);
}

.value-card__icon--red    { background: var(--clr-red-tint);    color: var(--clr-pane-red); }
.value-card__icon--yellow { background: var(--clr-yellow-tint); color: var(--clr-pane-yellow); }
.value-card__icon--green  { background: var(--clr-green-tint);  color: var(--clr-pane-green); }
.value-card__icon--blue   { background: var(--clr-blue-tint);   color: var(--clr-pane-blue); }

.value-card__title { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--clr-black); margin-bottom: var(--sp-3); }
.value-card__title em { display: block; font-style: italic; font-weight: var(--fw-regular); font-size: var(--fs-sm); color: var(--clr-muted); }
.value-card__desc { font-size: var(--fs-sm); color: var(--clr-mid); line-height: var(--lh-relaxed); }

/* Numbers section */
.numbers-section { background: var(--clr-bg-soft); }

.numbers-inner {
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--clr-white);
}

.number-item {
  padding: var(--sp-10) var(--sp-6);
  text-align: center;
  border-right: 1px solid var(--clr-border);
  transition: background var(--dur-fast);
}

.number-item:last-child { border-right: none; }
.number-item:hover { background: var(--clr-bg-soft); }

.number-item__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(var(--fs-2xl), 3vw, var(--fs-4xl));
  font-weight: var(--fw-extrabold);
  color: var(--clr-black);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: var(--sp-2);
}

.number-item__value span { color: var(--clr-pane-red); }

.number-item__label { font-size: var(--fs-xs); color: var(--clr-muted); line-height: 1.4; }
.number-item__label em { display: block; font-style: italic; color: var(--clr-subtle); }

@media (max-width: 767.98px) {
  .number-item { border-right: none; border-bottom: 1px solid var(--clr-border); }
  .number-item:last-child { border-bottom: none; }
}


/* ============================================================
   26. CERTIFICATIONS
   ============================================================ */

.certs-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

.cert-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-6);
  background: var(--clr-white);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-xl);
  text-align: center;
  transition: transform var(--dur-fast) var(--ease-bounce), box-shadow var(--dur-fast);
  min-width: 110px;
}

.cert-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.cert-item__icon {
  font-size: var(--fs-2xl);
  color: var(--clr-pane-green);
}

.cert-item__icon--green  { color: var(--clr-pane-green); }
.cert-item__icon--blue   { color: var(--clr-pane-blue); }
.cert-item__icon--yellow { color: var(--clr-pane-yellow); }
.cert-item__icon--red    { color: var(--clr-pane-red); }

.cert-item__name { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--clr-black); }
.cert-item__sub  { font-size: var(--fs-xs); color: var(--clr-muted); }


/* ============================================================
   27. PRODUCT DETAIL (product-single.html)
   ============================================================ */

.product-gallery { display: flex; flex-direction: column; gap: var(--sp-3); }

.product-gallery__main {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1.5px solid var(--clr-border);
  background: var(--clr-bg-soft);
  aspect-ratio: 4/3;
}

.product-gallery__main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.product-gallery__badges {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.product-gallery__cert {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 4px 10px;
  background: rgba(255,255,255,.92);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--clr-pane-green);
  backdrop-filter: blur(4px);
  box-shadow: var(--shadow-sm);
}

.product-gallery__cert--blue { color: var(--clr-pane-blue); }

/* Thumbnails */
.product-gallery__thumbs { display: flex; gap: var(--sp-3); }

.product-gallery__thumb {
  width: 80px;
  height: 60px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid var(--clr-border);
  cursor: pointer;
  transition: border-color var(--dur-fast);
  padding: 0;
  flex-shrink: 0;
}

.product-gallery__thumb.active { border-color: var(--clr-black); }
.product-gallery__thumb:hover { border-color: var(--clr-dark); }
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Product info */
.product-info { display: flex; flex-direction: column; gap: var(--sp-5); }

.product-info__origin {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--clr-muted);
  flex-wrap: wrap;
}

.product-info__origin a { color: var(--clr-pane-blue); font-weight: var(--fw-semibold); }
.product-info__origin a:hover { text-decoration: underline; }
.product-info__sep { color: var(--clr-border); }
.product-info__category a { color: var(--clr-muted); }

.product-info__name {
  font-size: clamp(var(--fs-xl), 3vw, var(--fs-3xl));
  font-weight: var(--fw-extrabold);
  color: var(--clr-black);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.product-info__short-desc { font-size: var(--fs-sm); color: var(--clr-mid); line-height: var(--lh-relaxed); }
.product-info__short-desc em { font-style: italic; color: var(--clr-muted); }

/* Price block */
.product-info__price-block {
  padding: var(--sp-5);
  background: var(--clr-bg-soft);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.product-info__price-label { font-size: var(--fs-xs); color: var(--clr-muted); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: var(--ls-wide); }

.product-info__price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}

.product-info__price-amount {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-2xl), 3vw, var(--fs-3xl));
  font-weight: var(--fw-extrabold);
  color: var(--clr-black);
  letter-spacing: -0.04em;
}

.product-info__price-unit { font-size: var(--fs-sm); color: var(--clr-muted); }

.product-info__moq {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--clr-mid);
}

.product-info__moq i { color: var(--clr-pane-blue); }

.product-info__stock {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--clr-pane-green);
}

.product-info__stock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--clr-pane-green);
  animation: pulse-dot 2s ease-in-out infinite;
}

/* Specs table */
.product-specs { display: flex; flex-direction: column; gap: 0; }

.product-specs__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--clr-border-soft);
  font-size: var(--fs-sm);
}

.product-specs__row:last-child { border-bottom: none; }
.product-specs__row dt { color: var(--clr-muted); flex-shrink: 0; }
.product-specs__row dd { font-weight: var(--fw-medium); color: var(--clr-dark); text-align: right; }

.product-specs__cert {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  background: var(--clr-green-tint);
  color: var(--clr-pane-green);
  margin-right: var(--sp-1);
}

.product-specs__cert--green { background: var(--clr-green-tint); color: var(--clr-pane-green); }

/* Variants */
.product-info__variants {}
.product-info__variants-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--clr-dark); margin-bottom: var(--sp-3); }

.variants-list { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.variant-btn {
  padding: var(--sp-2) var(--sp-4);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--clr-mid);
  cursor: pointer;
  transition: all var(--dur-fast);
}

.variant-btn:hover { border-color: var(--clr-dark); color: var(--clr-black); }
.variant-btn.active { background: var(--clr-black); border-color: var(--clr-black); color: var(--clr-white); }

/* Qty control */
.product-info__order-block { display: flex; flex-direction: column; gap: var(--sp-4); }
.product-info__qty-label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--clr-dark); margin-bottom: var(--sp-2); }

.qty-control {
  display: flex;
  align-items: center;
  gap: 0;
  width: fit-content;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.qty-btn {
  width: 40px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-base);
  color: var(--clr-mid);
  background: var(--clr-bg-soft);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}

.qty-btn:hover { background: var(--clr-border); color: var(--clr-black); }

.qty-input {
  width: 60px;
  height: 44px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--clr-border);
  border-right: 1px solid var(--clr-border);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--clr-black);
  outline: none;
  background: var(--clr-white);
  -moz-appearance: textfield;
}

.qty-input::-webkit-inner-spin-button, .qty-input::-webkit-outer-spin-button { display: none; }

.product-info__qty-total {
  font-size: var(--fs-sm);
  color: var(--clr-muted);
  margin-top: var(--sp-2);
}

.product-info__qty-total strong { color: var(--clr-black); font-family: var(--font-display); }

.product-info__order-actions { display: flex; flex-direction: column; gap: var(--sp-3); }

/* Share buttons */
.product-info__share {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--clr-border-soft);
}

.product-info__share-label { font-size: var(--fs-xs); color: var(--clr-muted); }
.product-info__share-links { display: flex; gap: var(--sp-2); }

.share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--clr-border);
  color: var(--clr-mid);
  font-size: var(--fs-sm);
  transition: all var(--dur-fast);
  text-decoration: none;
}

.share-btn:hover { background: var(--clr-black); border-color: var(--clr-black); color: var(--clr-white); }


/* ============================================================
   28. PRODUCT TABS
   ============================================================ */

.product-tabs__nav {
  border-bottom: 2px solid var(--clr-border);
  margin-bottom: var(--sp-8);
  overflow-x: auto;
  scrollbar-width: none;
}

.product-tabs__nav::-webkit-scrollbar { display: none; }

.product-tabs__list {
  display: flex;
  gap: 0;
  white-space: nowrap;
}

.product-tab-btn {
  padding: var(--sp-4) var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--clr-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
  cursor: pointer;
  white-space: nowrap;
}

.product-tab-btn:hover { color: var(--clr-black); }
.product-tab-btn.active { color: var(--clr-black); border-bottom-color: var(--clr-black); }

.product-tab-panel { display: none; }
.product-tab-panel:not([hidden]) { display: block; animation: fade-in var(--dur-normal) var(--ease-out); }

@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.product-tab-panel__title { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--clr-black); margin-bottom: var(--sp-5); }
.product-tab-panel__subtitle { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--clr-black); margin: var(--sp-5) 0 var(--sp-3); }

.product-feature-list { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-5) 0; }
.product-feature-list li { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--clr-mid); }
.product-feature-list li i { color: var(--clr-pane-green); flex-shrink: 0; margin-top: 2px; }

.product-tab-panel__figure { border-radius: var(--radius-xl); overflow: hidden; margin: 0; }
.product-tab-panel__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.product-tab-panel__figure figcaption { font-size: var(--fs-xs); color: var(--clr-muted); font-style: italic; text-align: center; margin-top: var(--sp-3); }

/* Specs table */
.specs-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.specs-table caption { text-align: left; }
.specs-table th, .specs-table td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--clr-border-soft); }
.specs-table th { font-weight: var(--fw-semibold); color: var(--clr-muted); width: 45%; background: var(--clr-bg-soft); }
.specs-table td { color: var(--clr-dark); }
.specs-table tr:last-child th, .specs-table tr:last-child td { border-bottom: none; }

/* Shipping info cards */
.shipping-info-card {
  padding: var(--sp-5);
  background: var(--clr-bg-soft);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-xl);
  height: 100%;
}

.shipping-info-card__icon { font-size: var(--fs-2xl); color: var(--clr-pane-blue); margin-bottom: var(--sp-3); display: block; }
.shipping-info-card__icon--yellow { color: var(--clr-pane-yellow); }
.shipping-info-card__icon--green  { color: var(--clr-pane-green); }
.shipping-info-card__icon--blue   { color: var(--clr-pane-blue); }

.shipping-info-card h3 { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--clr-black); margin-bottom: var(--sp-3); }
.shipping-info-card p, .shipping-info-card ul { font-size: var(--fs-sm); color: var(--clr-mid); }
.shipping-info-card ul { display: flex; flex-direction: column; gap: var(--sp-1); }
.shipping-info-card li { padding-left: var(--sp-4); position: relative; }
.shipping-info-card li::before { content: '→'; position: absolute; left: 0; color: var(--clr-pane-blue); }

/* Reviews */
.review-summary { display: flex; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-8); padding: var(--sp-5); background: var(--clr-bg-soft); border: 1.5px solid var(--clr-border); border-radius: var(--radius-xl); }
.review-summary__score { text-align: center; }
.review-summary__number { font-family: var(--font-display); font-size: 3rem; font-weight: var(--fw-extrabold); color: var(--clr-black); letter-spacing: -0.05em; display: block; line-height: 1; }
.review-summary__stars { display: flex; gap: 2px; justify-content: center; margin: var(--sp-1) 0; }
.review-summary__stars i { color: var(--clr-pane-yellow); }
.review-summary__count { font-size: var(--fs-xs); color: var(--clr-muted); }

.reviews-list { display: flex; flex-direction: column; gap: var(--sp-5); }

.review-item { padding: var(--sp-5); background: var(--clr-white); border: 1.5px solid var(--clr-border); border-radius: var(--radius-xl); }
.review-item__stars { display: flex; gap: 2px; margin-bottom: var(--sp-3); }
.review-item__stars i { color: var(--clr-pane-yellow); font-size: var(--fs-sm); }
.review-item__text { font-size: var(--fs-sm); color: var(--clr-dark); font-style: italic; line-height: var(--lh-relaxed); margin-bottom: var(--sp-4); }
.review-item__footer { display: flex; align-items: center; gap: var(--sp-3); }
.review-item__name { font-weight: var(--fw-semibold); color: var(--clr-black); font-style: normal; font-size: var(--fs-sm); }
.review-item__role { font-size: var(--fs-xs); color: var(--clr-muted); }
.review-item__date { margin-left: auto; font-size: var(--fs-xs); color: var(--clr-subtle); }


/* ============================================================
   29. BRANDS CATALOG (brands.html)
   ============================================================ */

/* Featured brand cards */
.brand-card-featured {
  display: block;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--clr-white);
  border: 1.5px solid var(--clr-border);
  text-decoration: none;
  transition: transform var(--dur-normal) var(--ease-bounce), box-shadow var(--dur-normal), border-color var(--dur-fast);
}

.brand-card-featured:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }

.brand-card-featured__image-wrap { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.brand-card-featured__image { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.brand-card-featured:hover .brand-card-featured__image { transform: scale(1.06); }

.brand-card-featured__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--dur-normal);
}

.brand-card-featured__overlay span {
  color: var(--clr-white);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.brand-card-featured:hover .brand-card-featured__overlay { opacity: 1; }

.brand-card-featured__body { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); }

.brand-card-featured__logo-wrap { flex-shrink: 0; }

.brand-logo-placeholder {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--clr-black);
  color: var(--clr-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.02em;
}

.brand-logo-placeholder--green  { background: var(--clr-pane-green); }
.brand-logo-placeholder--yellow { background: var(--clr-pane-yellow); color: var(--clr-black); }
.brand-logo-placeholder--red    { background: var(--clr-pane-red); }
.brand-logo-placeholder--blue   { background: var(--clr-pane-blue); }

.brand-card-featured__name { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--clr-black); margin-bottom: 2px; }
.brand-card-featured__origin { font-size: var(--fs-xs); color: var(--clr-muted); display: flex; align-items: center; gap: var(--sp-1); margin-bottom: var(--sp-2); }
.brand-card-featured__origin i { color: var(--clr-pane-red); }

.brand-card-featured__tags { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.brand-card-featured__products { font-size: var(--fs-xs); color: var(--clr-muted); }

/* Brand tags */
.brand-tag {
  display: inline-flex;
  padding: 2px 8px;
  background: var(--clr-bg-soft);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--clr-mid);
}

.brand-tag-sm {
  display: inline-flex;
  padding: 1px 6px;
  background: var(--clr-bg-soft);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: var(--fw-medium);
  color: var(--clr-muted);
}

/* Brand list cards */
.brand-list-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--clr-white);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-xl);
  text-decoration: none;
  height: 100%;
  transition: transform var(--dur-fast) var(--ease-bounce), border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.brand-list-card:hover { transform: translateY(-2px); border-color: var(--clr-black); box-shadow: var(--shadow-sm); }

.brand-logo-placeholder--sm {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--clr-black);
  color: var(--clr-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: var(--fw-extrabold);
  flex-shrink: 0;
}

.brand-logo-placeholder--sm.brand-logo-placeholder--red    { background: var(--clr-pane-red); }
.brand-logo-placeholder--sm.brand-logo-placeholder--yellow { background: var(--clr-pane-yellow); color: var(--clr-black); }
.brand-logo-placeholder--sm.brand-logo-placeholder--green  { background: var(--clr-pane-green); }
.brand-logo-placeholder--sm.brand-logo-placeholder--blue   { background: var(--clr-pane-blue); }

.brand-list-card__name { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--clr-black); margin-bottom: 2px; }
.brand-list-card__origin { font-size: var(--fs-xs); color: var(--clr-muted); display: flex; align-items: center; gap: var(--sp-1); }
.brand-list-card__origin i { color: var(--clr-pane-red); font-size: 0.6rem; }
.brand-list-card__count { font-size: var(--fs-xs); color: var(--clr-muted); display: block; margin-top: 2px; }

/* Join criteria */
.join-criteria { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-5); }
.join-criteria li { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--clr-mid); }
.join-criteria li i { color: var(--clr-pane-green); flex-shrink: 0; margin-top: 2px; }

/* Brands join section */
.brands-join-figure { border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-xl); margin: 0; }
.brands-join-figure__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.brands-join-figure:hover .brands-join-figure__img { transform: scale(1.03); }


/* ============================================================
   30. BLOG CATALOG & ARTICLE
   ============================================================ */

/* Blog catalog */
.blog-filter-section {
  background: var(--clr-white);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--clr-border);
  position: sticky;
  top: var(--header-h);
  z-index: 100;
}

.blog-filter-nav { overflow-x: auto; scrollbar-width: none; }
.blog-filter-nav::-webkit-scrollbar { display: none; }

/* Blog hero card */
.blog-card-hero {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--clr-white);
  border: 1.5px solid var(--clr-border);
  transition: box-shadow var(--dur-normal);
}

.blog-card-hero:hover { box-shadow: var(--shadow-xl); }
.blog-card-hero__link { display: block; text-decoration: none; color: inherit; }

.blog-card-hero__image-wrap { overflow: hidden; aspect-ratio: 16/9; }
.blog-card-hero__image { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.blog-card-hero:hover .blog-card-hero__image { transform: scale(1.04); }

.blog-card-hero__body { padding: var(--sp-6) var(--sp-8); }

.blog-card-hero__tags { margin-bottom: var(--sp-4); }

.blog-card-hero__title {
  font-size: clamp(var(--fs-xl), 2.5vw, var(--fs-3xl));
  font-weight: var(--fw-extrabold);
  color: var(--clr-black);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: var(--sp-4);
}

.blog-card-hero__excerpt { font-size: var(--fs-sm); color: var(--clr-mid); line-height: var(--lh-relaxed); margin-bottom: var(--sp-3); }
.blog-card-hero__excerpt-en { font-size: var(--fs-xs); font-style: italic; color: var(--clr-muted); line-height: 1.5; margin-bottom: var(--sp-5); }

.blog-card-hero__meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-5); }

.blog-author-mini { display: flex; align-items: center; gap: var(--sp-3); }
.blog-author-mini__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--clr-black);
  color: var(--clr-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

.blog-author-mini__avatar--yellow { background: var(--clr-pane-yellow); color: var(--clr-black); }
.blog-author-mini__avatar--blue   { background: var(--clr-pane-blue); }
.blog-author-mini__avatar--green  { background: var(--clr-pane-green); }

.blog-author-mini__name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--clr-dark); display: block; }
.blog-author-mini__date { font-size: var(--fs-xs); color: var(--clr-muted); display: block; }

.blog-author-mini--sm .blog-author-mini__avatar { width: 24px; height: 24px; font-size: 10px; }

.blog-read-time { font-size: var(--fs-xs); color: var(--clr-muted); display: flex; align-items: center; gap: var(--sp-1); }

.blog-card-hero__cta { font-size: var(--fs-sm); }

/* Blog tag colors */
.blog-tag { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; }
.blog-tag--red    { color: var(--clr-pane-red); }
.blog-tag--yellow { color: var(--clr-pane-yellow); }
.blog-tag--green  { color: var(--clr-pane-green); }
.blog-tag--blue   { color: var(--clr-pane-blue); }

/* Blog card full */
.blog-card-full {
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--clr-white);
  border: 1.5px solid var(--clr-border);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-normal) var(--ease-bounce), box-shadow var(--dur-normal), border-color var(--dur-fast);
}

.blog-card-full:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.blog-card-full__link { display: flex; flex-direction: column; text-decoration: none; color: inherit; flex: 1; }

.blog-card-full__image-wrap { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.blog-card-full__image { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.blog-card-full:hover .blog-card-full__image { transform: scale(1.05); }

.blog-card-full__tag {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  display: inline-flex;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(4px);
}

.blog-card-full__body { padding: var(--sp-4) var(--sp-5); flex: 1; display: flex; flex-direction: column; gap: var(--sp-3); }
.blog-card-full__title { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--clr-black); line-height: 1.35; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card-full__excerpt { font-size: var(--fs-xs); color: var(--clr-mid); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card-full__meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); margin-top: auto; }
.blog-card-full__date { font-size: var(--fs-xs); color: var(--clr-muted); }

/* Blog pagination */
.blog-pagination { display: flex; justify-content: center; }
.blog-pagination .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--clr-border);
  color: var(--clr-mid);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: all var(--dur-fast);
}
.blog-pagination .page-item.active .page-link { background: var(--clr-black); border-color: var(--clr-black); color: var(--clr-white); }
.blog-pagination .page-link:hover:not(.disabled) { border-color: var(--clr-black); color: var(--clr-black); }
.blog-pagination .page-link--prev, .blog-pagination .page-link--next { width: auto; padding: 0 var(--sp-4); gap: var(--sp-2); }

/* Newsletter section */
.newsletter-section { background: var(--clr-black); }

.newsletter-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  align-items: center;
}

.newsletter-heading {
  font-size: clamp(var(--fs-2xl), 3vw, var(--fs-4xl));
  font-weight: var(--fw-extrabold);
  color: var(--clr-white);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: var(--sp-2);
}

.newsletter-sub-en { font-size: var(--fs-sm); font-style: italic; color: rgba(255,255,255,.4); }
.newsletter-desc { font-size: var(--fs-sm); color: rgba(255,255,255,.6); line-height: var(--lh-relaxed); margin-top: var(--sp-4); }

.newsletter-form__group {
  display: flex;
  border: 1.5px solid rgba(255,255,255,.2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(255,255,255,.05);
}

.newsletter-form__input {
  flex: 1;
  height: 52px;
  padding: 0 var(--sp-5);
  background: transparent;
  border: none;
  color: var(--clr-white);
  font-size: var(--fs-sm);
  outline: none;
}

.newsletter-form__input::placeholder { color: rgba(255,255,255,.35); }

.newsletter-form__btn {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-6);
  background: var(--clr-white);
  color: var(--clr-black);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: background var(--dur-fast);
  white-space: nowrap;
}

.newsletter-form__btn:hover { background: #f0f0f0; }

.newsletter-form__note {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.35);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

@media (max-width: 991.98px) {
  .newsletter-inner { grid-template-columns: 1fr; }
}

/* Blog single — article hero */
.article-hero {
  padding-top: var(--sp-12);
  padding-bottom: 0;
  background: var(--clr-bg-warm);
}

.article-hero__meta { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.article-hero__read-time { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); color: var(--clr-muted); }

.article-hero__title {
  font-size: clamp(var(--fs-2xl), 5vw, 3.5rem);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--clr-black);
  margin-bottom: var(--sp-3);
}

.article-hero__subtitle { font-size: var(--fs-base); font-style: italic; color: var(--clr-muted); margin-bottom: var(--sp-6); }

.article-hero__author-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--clr-border);
}

.blog-author {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.blog-author__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--clr-black);
  color: var(--clr-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

.blog-author__name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--clr-dark); display: block; }
.blog-author__date { font-size: var(--fs-xs); color: var(--clr-muted); display: block; }
.blog-author__details { display: flex; align-items: center; gap: var(--sp-2); }

.article-hero__share { display: flex; align-items: center; gap: var(--sp-2); }
.article-hero__share-label { font-size: var(--fs-xs); color: var(--clr-muted); }

.article-hero__image-wrap { margin-top: var(--sp-8); position: relative; }
.article-hero__image { width: 100%; max-height: 520px; object-fit: cover; object-position: center; }
.article-hero__caption {
  text-align: center;
  font-size: var(--fs-xs);
  font-style: italic;
  color: var(--clr-muted);
  padding: var(--sp-3) var(--sp-4);
  background: var(--clr-bg-soft);
  border-top: 1px solid var(--clr-border);
}

/* Article body */
.article-body { max-width: 100%; }

.article-body h2 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-extrabold);
  color: var(--clr-black);
  letter-spacing: -0.03em;
  margin-top: var(--sp-10);
  margin-bottom: var(--sp-5);
}

.article-body p {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--clr-mid);
  margin-bottom: var(--sp-5);
}

.article-body p em { font-style: italic; color: var(--clr-muted); }

.article-lead {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--clr-dark);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--clr-border);
}

/* Article blockquote */
.article-quote {
  position: relative;
  margin: var(--sp-8) 0;
  padding: var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-8);
  border-left: 4px solid var(--clr-pane-red);
  background: var(--clr-bg-soft);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.article-quote p {
  font-size: var(--fs-md);
  font-style: italic;
  color: var(--clr-dark);
  margin-bottom: var(--sp-3);
  line-height: var(--lh-relaxed);
}

.article-quote footer { font-size: var(--fs-sm); }
.article-quote cite { font-style: normal; font-weight: var(--fw-semibold); color: var(--clr-black); }

.article-quote--en { border-left-color: var(--clr-pane-blue); background: var(--clr-blue-tint); }
.article-quote--en p { font-size: var(--fs-sm); color: var(--clr-muted); }

.article-figure { margin: var(--sp-8) 0; }
.article-figure__img { width: 100%; border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
.article-figure__caption { text-align: center; font-size: var(--fs-xs); font-style: italic; color: var(--clr-muted); margin-top: var(--sp-3); }

/* Article stats block */
.article-stats-block {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--clr-black);
  border-radius: var(--radius-xl);
  margin: var(--sp-8) 0;
}

.article-stat { text-align: center; }
.article-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-extrabold);
  color: var(--clr-white);
  letter-spacing: -0.04em;
  margin-bottom: var(--sp-2);
}

.article-stat span { font-size: var(--fs-xs); color: rgba(255,255,255,.5); line-height: 1.3; }
.article-stat span em { display: block; font-style: italic; color: rgba(255,255,255,.3); }

/* Article tags */
.article-tags { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--clr-border); }
.article-tags__label { font-size: var(--fs-xs); color: var(--clr-muted); }
.article-tag { padding: 3px 10px; background: var(--clr-bg-soft); border: 1px solid var(--clr-border); border-radius: var(--radius-full); font-size: var(--fs-xs); color: var(--clr-mid); transition: background var(--dur-fast), border-color var(--dur-fast); }
.article-tag:hover { background: var(--clr-black); border-color: var(--clr-black); color: var(--clr-white); }

/* Author bio */
.article-author-bio {
  display: flex;
  gap: var(--sp-5);
  padding: var(--sp-6);
  background: var(--clr-bg-soft);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-xl);
  margin-top: var(--sp-8);
}

.article-author-bio__avatar {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  background: var(--clr-black);
  color: var(--clr-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

.article-author-bio__name { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--clr-black); margin-bottom: 2px; }
.article-author-bio__role { font-size: var(--fs-xs); color: var(--clr-muted); margin-bottom: var(--sp-3); }
.article-author-bio__desc { font-size: var(--fs-sm); color: var(--clr-mid); line-height: var(--lh-relaxed); }

/* Article nav */
.article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--clr-border);
}

.article-nav__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--clr-bg-soft);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-xl);
  text-decoration: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.article-nav__item:hover { border-color: var(--clr-black); box-shadow: var(--shadow-sm); }
.article-nav__item--next { text-align: right; }

.article-nav__label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--clr-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.article-nav__item--next .article-nav__label { justify-content: flex-end; }
.article-nav__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--clr-black); line-height: 1.3; }

/* TOC & sidebar */
.article-sidebar { position: sticky; top: calc(var(--header-h) + var(--sp-8)); align-self: flex-start; }

.sidebar-widget {
  background: var(--clr-white);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-xl);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
}

.sidebar-widget__title { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--clr-black); margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--clr-border); }

.toc-list { display: flex; flex-direction: column; gap: var(--sp-2); counter-reset: toc; }
.toc-list li { counter-increment: toc; }
.toc-list a { display: flex; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--clr-mid); text-decoration: none; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md); transition: background var(--dur-fast), color var(--dur-fast); }
.toc-list a:hover { background: var(--clr-bg-soft); color: var(--clr-black); }
.toc-list a::before { content: counter(toc, decimal-leading-zero); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--clr-pane-red); flex-shrink: 0; width: 20px; }

/* Related articles */
.related-articles { display: flex; flex-direction: column; gap: var(--sp-4); }

.related-article__link { display: flex; gap: var(--sp-3); text-decoration: none; color: inherit; padding: var(--sp-2); border-radius: var(--radius-md); transition: background var(--dur-fast); }
.related-article__link:hover { background: var(--clr-bg-soft); }

.related-article__image-wrap { width: 72px; height: 54px; border-radius: var(--radius-md); overflow: hidden; flex-shrink: 0; }
.related-article__image { width: 100%; height: 100%; object-fit: cover; }
.related-article__title { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--clr-black); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 2px; }
.related-article__date { font-size: 10px; color: var(--clr-muted); }

/* Sidebar products */
.sidebar-products { display: flex; flex-direction: column; gap: var(--sp-3); }
.sidebar-product { display: flex; gap: var(--sp-3); text-decoration: none; padding: var(--sp-2); border-radius: var(--radius-md); transition: background var(--dur-fast); color: inherit; }
.sidebar-product:hover { background: var(--clr-bg-soft); }
.sidebar-product__image { width: 72px; height: 54px; border-radius: var(--radius-md); object-fit: cover; flex-shrink: 0; }
.sidebar-product__name { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--clr-black); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 2px; }
.sidebar-product__price { font-size: var(--fs-xs); color: var(--clr-pane-red); font-weight: var(--fw-bold); }

/* Sidebar CTA */
.sidebar-widget--cta { background: var(--clr-black); border-color: var(--clr-black); }
.sidebar-cta { display: flex; flex-direction: column; gap: var(--sp-3); }
.sidebar-cta__eyebrow { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: rgba(255,255,255,.5); }
.sidebar-cta__title { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--clr-white); line-height: 1.3; }
.sidebar-cta__desc { font-size: var(--fs-xs); color: rgba(255,255,255,.5); line-height: 1.5; }


/* ============================================================
   31. DISTRIBUTION PAGE
   ============================================================ */

/* Region cards */
.region-card {
  padding: var(--sp-5);
  background: var(--clr-white);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-xl);
  height: 100%;
  transition: transform var(--dur-fast) var(--ease-bounce), box-shadow var(--dur-fast);
}

.region-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.region-card__header { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }

.region-card__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.region-card--jawa .region-card__dot       { background: var(--clr-pane-red); }
.region-card--sumatera .region-card__dot   { background: var(--clr-pane-yellow); }
.region-card--kalimantan .region-card__dot { background: var(--clr-pane-green); }
.region-card--sulawesi .region-card__dot   { background: var(--clr-pane-blue); }
.region-card--ntt .region-card__dot        { background: var(--clr-pane-red); }
.region-card--papua .region-card__dot      { background: var(--clr-muted); }

.region-card__title { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--clr-black); flex: 1; }

.region-card__badge {
  padding: 2px 8px;
  background: var(--clr-bg-soft);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: var(--fw-bold);
  color: var(--clr-muted);
}

.region-card__provinces { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-4); }
.region-card__provinces li { font-size: var(--fs-xs); color: var(--clr-mid); }
.region-card__delivery { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--clr-muted); margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--clr-border-soft); }
.region-card__delivery i { color: var(--clr-pane-blue); }

/* Logistics partners */
.logistics-section { background: var(--clr-bg-soft); padding: var(--sp-10) 0; }
.logistics-grid { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); flex-wrap: wrap; }

.logistics-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-6);
  background: var(--clr-white);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-xl);
  text-align: center;
  min-width: 120px;
  transition: transform var(--dur-fast) var(--ease-bounce), box-shadow var(--dur-fast);
}

.logistics-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.logistics-item__icon { font-size: var(--fs-2xl); color: var(--clr-black); }
.logistics-item__icon--yellow { color: var(--clr-pane-yellow); }
.logistics-item__icon--green  { color: var(--clr-pane-green); }
.logistics-item__icon--blue   { color: var(--clr-pane-blue); }

.logistics-item__name { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--clr-black); }
.logistics-item__cover { font-size: var(--fs-xs); color: var(--clr-muted); }

/* Reseller steps */
.join-steps { display: flex; flex-direction: column; gap: var(--sp-4); }

.join-step {
  display: flex;
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--clr-white);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-xl);
  transition: transform var(--dur-fast) var(--ease-bounce), border-color var(--dur-fast);
}

.join-step:hover { transform: translateX(4px); border-color: var(--clr-black); }

.join-step__number {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-extrabold);
  color: var(--clr-pane-red);
  letter-spacing: -0.04em;
  line-height: 1;
  flex-shrink: 0;
  width: 48px;
}

.join-step__title { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--clr-black); margin-bottom: var(--sp-2); line-height: 1.3; }
.join-step__title em { display: block; font-style: italic; font-weight: var(--fw-regular); font-size: var(--fs-xs); color: var(--clr-muted); }
.join-step__content > p { font-size: var(--fs-sm); color: var(--clr-mid); line-height: 1.5; margin-bottom: var(--sp-1); }

/* Benefit items */
.reseller-benefits { background: var(--clr-bg-soft); border: 1.5px solid var(--clr-border); border-radius: var(--radius-xl); padding: var(--sp-6); }

.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--clr-mid);
  line-height: 1.4;
}

.benefit-item__icon { font-size: var(--fs-xl); flex-shrink: 0; margin-top: -2px; }
.benefit-item__icon--red    { color: var(--clr-pane-red); }
.benefit-item__icon--yellow { color: var(--clr-pane-yellow); }
.benefit-item__icon--green  { color: var(--clr-pane-green); }
.benefit-item__icon--blue   { color: var(--clr-pane-blue); }

/* UMKM register */
.requirements-block { padding: var(--sp-5); background: var(--clr-bg-soft); border: 1.5px solid var(--clr-border); border-radius: var(--radius-xl); margin-top: var(--sp-5); }
.requirements-block__title { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--clr-black); margin-bottom: var(--sp-4); }

.requirements-list { display: flex; flex-direction: column; gap: var(--sp-4); }

.requirements-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--clr-mid);
}

.requirements-item--required > i { color: var(--clr-pane-green); flex-shrink: 0; margin-top: 2px; }
.requirements-item--optional > i { color: var(--clr-pane-yellow); flex-shrink: 0; margin-top: 2px; }
.requirements-item strong { color: var(--clr-black); display: block; margin-bottom: 2px; }

/* UMKM steps mini */
.umkm-steps {}
.umkm-step-mini {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--clr-bg-soft);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-lg);
  font-size: var(--fs-sm);
  color: var(--clr-mid);
}

.umkm-step-mini__num {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-extrabold);
  color: var(--clr-pane-blue);
  flex-shrink: 0;
  background: var(--clr-blue-tint);
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* FAQ on distribution page */
.distrib-faq .faq-btn {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--clr-black);
  background: var(--clr-white);
  padding: var(--sp-5) var(--sp-5);
  border-bottom: 1px solid var(--clr-border);
}

.section-header--sticky { position: sticky; top: calc(var(--header-h) + var(--sp-6)); }


/* ============================================================
   32. CONTACT PAGE
   ============================================================ */

/* Channel cards */
.contact-channel-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--clr-white);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-xl);
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: transform var(--dur-normal) var(--ease-bounce), box-shadow var(--dur-normal), border-color var(--dur-fast);
}

.contact-channel-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--clr-black); }
.contact-channel-card--nolink { cursor: default; }
.contact-channel-card--nolink:hover { transform: none; }

.contact-channel-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: var(--clr-black);
  color: var(--clr-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  flex-shrink: 0;
}

.contact-channel-card__icon--green  { background: var(--clr-pane-green); }
.contact-channel-card__icon--blue   { background: var(--clr-pane-blue); }
.contact-channel-card__icon--yellow { background: var(--clr-pane-yellow); color: var(--clr-black); }

.contact-channel-card__title { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--clr-black); }
.contact-channel-card__value { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--clr-dark); }
.contact-channel-card__desc { font-size: var(--fs-xs); color: var(--clr-muted); line-height: 1.5; flex: 1; }
.contact-channel-card__desc em { font-style: italic; }
.contact-channel-card__cta { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--clr-pane-blue); display: flex; align-items: center; gap: var(--sp-1); margin-top: auto; }
.contact-channel-card__hours { font-size: var(--fs-xs); color: var(--clr-muted); display: flex; align-items: center; gap: var(--sp-1); margin-top: auto; }

/* Contact form */
.contact-form { display: flex; flex-direction: column; gap: var(--sp-5); }

.contact-form__fieldset { border: none; padding: 0; margin: 0; }
.contact-form__legend { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--clr-dark); margin-bottom: var(--sp-4); display: block; }

.intent-radio-group { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }

@media (min-width: 576px) {
  .intent-radio-group { grid-template-columns: repeat(4, 1fr); }
}

.intent-radio { cursor: pointer; }
.intent-radio input { position: absolute; opacity: 0; pointer-events: none; }

.intent-radio__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-3);
  background: var(--clr-bg-soft);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-xl);
  text-align: center;
  cursor: pointer;
  transition: all var(--dur-fast);
}

.intent-radio__label i { font-size: var(--fs-xl); color: var(--clr-muted); }
.intent-radio__label strong { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--clr-dark); }
.intent-radio__label small { font-size: 10px; color: var(--clr-muted); font-style: italic; }

.intent-radio input:checked + .intent-radio__label {
  background: var(--clr-black);
  border-color: var(--clr-black);
}

.intent-radio input:checked + .intent-radio__label i { color: var(--clr-pane-yellow); }
.intent-radio input:checked + .intent-radio__label strong { color: var(--clr-white); }
.intent-radio input:checked + .intent-radio__label small { color: rgba(255,255,255,.5); }

.intent-radio__label:hover { border-color: var(--clr-dark); }

/* Form groups */
.contact-form__group { display: flex; flex-direction: column; gap: var(--sp-2); }

.contact-form__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--clr-dark);
}

.contact-form__required { color: var(--clr-pane-red); }

.contact-form__input,
.contact-form__select,
.contact-form__textarea {
  padding: var(--sp-3) var(--sp-4);
  background: var(--clr-bg-soft);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--clr-black);
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  width: 100%;
}

.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {
  border-color: var(--clr-black);
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
  background: var(--clr-white);
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder { color: var(--clr-subtle); }

.contact-form__textarea { resize: vertical; min-height: 140px; line-height: var(--lh-relaxed); }
.contact-form__select { cursor: pointer; height: 48px; }

/* Checkbox grid */
.contact-form__checkbox-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }

.contact-form__checkbox {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--clr-mid);
  cursor: pointer;
  padding: var(--sp-2);
  border-radius: var(--radius-md);
  transition: background var(--dur-fast);
}

.contact-form__checkbox:hover { background: var(--clr-bg-soft); }
.contact-form__checkbox input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--clr-black); }

.contact-form__checkbox--consent {
  align-items: flex-start;
  font-size: var(--fs-xs);
  color: var(--clr-muted);
  line-height: 1.5;
  padding: var(--sp-3);
  background: var(--clr-bg-soft);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-lg);
}

.contact-form__checkbox--consent a { color: var(--clr-pane-blue); text-decoration: underline; }

/* Error messages */
.contact-form__error { font-size: var(--fs-xs); color: var(--clr-pane-red); display: none; }
.contact-form__error:not(:empty) { display: block; }

/* Actions */
.contact-form__actions { display: flex; flex-direction: column; gap: var(--sp-3); }
.contact-form__or { text-align: center; font-size: var(--fs-xs); color: var(--clr-muted); position: relative; }
.contact-form__or::before, .contact-form__or::after { content: ''; position: absolute; top: 50%; width: 45%; height: 1px; background: var(--clr-border); }
.contact-form__or::before { left: 0; }
.contact-form__or::after { right: 0; }

/* Success message */
.contact-form__success {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--clr-green-tint);
  border: 1.5px solid var(--clr-pane-green);
  border-radius: var(--radius-xl);
  margin-top: var(--sp-4);
  animation: fade-in var(--dur-normal) var(--ease-out);
}

.contact-form__success i { font-size: var(--fs-2xl); color: var(--clr-pane-green); flex-shrink: 0; }
.contact-form__success h3 { font-size: var(--fs-base); color: var(--clr-black); margin-bottom: var(--sp-1); }
.contact-form__success p { font-size: var(--fs-sm); color: var(--clr-mid); margin: 0; }

/* Contact info cards */
.contact-info-cards { display: flex; flex-direction: column; gap: var(--sp-4); }

.contact-info-card {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--clr-white);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-xl);
}

.contact-info-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-lg);
  flex-shrink: 0;
}

.contact-info-card__icon--red    { background: var(--clr-red-tint);    color: var(--clr-pane-red); }
.contact-info-card__icon--green  { background: var(--clr-green-tint);  color: var(--clr-pane-green); }
.contact-info-card__icon--blue   { background: var(--clr-blue-tint);   color: var(--clr-pane-blue); }
.contact-info-card__icon--yellow { background: var(--clr-yellow-tint); color: var(--clr-pane-yellow); }

.contact-info-card__title { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--clr-black); margin-bottom: var(--sp-3); }
.contact-info-card__address { font-style: normal; font-size: var(--fs-sm); color: var(--clr-mid); line-height: var(--lh-relaxed); }
.contact-info-card__desc { font-size: var(--fs-sm); color: var(--clr-mid); line-height: var(--lh-relaxed); }

/* Hours */
.contact-hours { display: flex; flex-direction: column; gap: var(--sp-2); }
.contact-hours__row { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-sm); }
.contact-hours__row dt { color: var(--clr-muted); }
.contact-hours__row dd { font-weight: var(--fw-semibold); color: var(--clr-dark); }
.contact-hours__closed { color: var(--clr-pane-red) !important; }
.contact-hours__note { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--clr-border-soft); font-size: var(--fs-xs); color: var(--clr-muted); display: flex; align-items: center; gap: var(--sp-2); }
.contact-hours__note i { color: var(--clr-pane-green); }

/* Department list */
.contact-dept-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.contact-dept-list li { font-size: var(--fs-sm); color: var(--clr-mid); }
.contact-dept-list__label { font-weight: var(--fw-medium); color: var(--clr-dark); }
.contact-dept-list a { color: var(--clr-pane-blue); }
.contact-dept-list a:hover { text-decoration: underline; }

/* Social block */
.contact-social-block { padding: var(--sp-5); background: var(--clr-white); border: 1.5px solid var(--clr-border); border-radius: var(--radius-xl); }
.contact-social-block__title { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--clr-black); margin-bottom: var(--sp-4); }
.contact-social-links { display: flex; flex-direction: column; gap: var(--sp-3); }

.contact-social-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--clr-mid);
  text-decoration: none;
  transition: background var(--dur-fast), color var(--dur-fast);
}

.contact-social-btn:hover { background: var(--clr-bg-soft); color: var(--clr-black); }
.contact-social-btn i { font-size: var(--fs-base); flex-shrink: 0; }

/* Map embed */
.map-embed { height: 400px; background: var(--clr-bg-soft); border-top: 1px solid var(--clr-border); position: relative; overflow: hidden; }

.map-embed__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-bg-soft);
}

.map-embed__content { text-align: center; padding: var(--sp-8); }
.map-embed__icon { font-size: 3rem; color: var(--clr-pane-red); margin-bottom: var(--sp-4); display: block; }
.map-embed__title { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--clr-black); margin-bottom: var(--sp-2); }
.map-embed__address { font-size: var(--fs-sm); color: var(--clr-muted); margin-bottom: var(--sp-5); }


/* ============================================================
   33. FAQ PAGE
   ============================================================ */

.faq-search-section {
  background: var(--clr-bg-soft);
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--clr-border);
}

.faq-search-wrap { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }

.search-input-wrap--faq .filter-search-input { width: 320px; height: 48px; font-size: var(--fs-base); }

.faq-search-hint { font-size: var(--fs-sm); color: var(--clr-muted); margin: 0; }

/* FAQ sidebar */
.faq-sidebar {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-6));
  background: var(--clr-white);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.faq-sidebar__title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--clr-muted);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--clr-border);
  background: var(--clr-bg-soft);
}

.faq-sidebar__list { padding: var(--sp-3) 0; }
.faq-sidebar__list li { padding: 0; }

.faq-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--clr-mid);
  text-decoration: none;
  transition: background var(--dur-fast), color var(--dur-fast);
}

.faq-sidebar__link:hover { background: var(--clr-bg-soft); color: var(--clr-black); }
.faq-sidebar__link.active { color: var(--clr-black); font-weight: var(--fw-semibold); background: var(--clr-bg-soft); border-right: 3px solid var(--clr-black); }

.faq-sidebar__icon { font-size: var(--fs-base); flex-shrink: 0; }
.faq-sidebar__icon--red    { color: var(--clr-pane-red); }
.faq-sidebar__icon--blue   { color: var(--clr-pane-blue); }
.faq-sidebar__icon--green  { color: var(--clr-pane-green); }
.faq-sidebar__icon--yellow { color: var(--clr-pane-yellow); }

.faq-sidebar__count { margin-left: auto; font-size: var(--fs-xs); color: var(--clr-subtle); }

.faq-sidebar__cta {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--clr-border);
  background: var(--clr-bg-soft);
}

.faq-sidebar__cta p { font-size: var(--fs-xs); color: var(--clr-muted); margin-bottom: var(--sp-3); }

/* FAQ category groups */
.faq-category-group { margin-bottom: var(--sp-10); }

.faq-category-group__header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 2px solid var(--clr-border);
}

.faq-category-group__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-base);
  flex-shrink: 0;
}

.faq-category-group__icon--red    { background: var(--clr-red-tint);    color: var(--clr-pane-red); }
.faq-category-group__icon--blue   { background: var(--clr-blue-tint);   color: var(--clr-pane-blue); }
.faq-category-group__icon--green  { background: var(--clr-green-tint);  color: var(--clr-pane-green); }
.faq-category-group__icon--yellow { background: var(--clr-yellow-tint); color: var(--clr-pane-yellow); }

.faq-category-group__title { font-size: var(--fs-xl); font-weight: var(--fw-extrabold); color: var(--clr-black); letter-spacing: -0.02em; }

/* FAQ accordion */
.faq-accordion { display: flex; flex-direction: column; gap: var(--sp-2); }

.faq-item {
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: box-shadow var(--dur-fast), border-color var(--dur-fast);
}

.faq-item:has(.accordion-button:not(.collapsed)) {
  border-color: var(--clr-black);
  box-shadow: var(--shadow-sm);
}

.faq-btn {
  font-family: var(--font-display) !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--clr-black) !important;
  background: var(--clr-white) !important;
  padding: var(--sp-5) !important;
  line-height: 1.4 !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: none !important;
}

.faq-btn:not(.collapsed) {
  background: var(--clr-bg-soft) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.faq-btn::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230a0a0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M4 6l4 4 4-4'/%3e%3c/svg%3e") !important;
}

.faq-body {
  padding: var(--sp-5) !important;
  background: var(--clr-white);
  font-size: var(--fs-sm);
  color: var(--clr-mid);
  line-height: var(--lh-relaxed);
}

.faq-body p { margin-bottom: var(--sp-3); }
.faq-body p:last-child { margin-bottom: 0; }
.faq-body ul, .faq-body ol { padding-left: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-3) 0; }
.faq-body li { font-size: var(--fs-sm); color: var(--clr-mid); }
.faq-body a { color: var(--clr-pane-blue); text-decoration: underline; }
.faq-body strong { color: var(--clr-dark); }

/* FAQ CTA */
.faq-cta-section { background: var(--clr-bg-soft); border-top: 1px solid var(--clr-border); }

.faq-cta-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-10);
  background: var(--clr-white);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-2xl);
  flex-wrap: wrap;
}

.faq-cta-inner__icon {
  font-size: 3rem;
  color: var(--clr-pane-blue);
  flex-shrink: 0;
}

.faq-cta-inner__content { flex: 1; min-width: 240px; }
.faq-cta-inner__content h2 { font-size: var(--fs-2xl); font-weight: var(--fw-extrabold); color: var(--clr-black); letter-spacing: -0.03em; margin-bottom: var(--sp-1); }
.faq-cta-inner__sub { font-size: var(--fs-sm); font-style: italic; color: var(--clr-muted); margin-bottom: var(--sp-3); }
.faq-cta-inner__content p { font-size: var(--fs-sm); color: var(--clr-mid); margin: 0; }
.faq-cta-inner__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; flex-shrink: 0; }

/* Founder quote */
.founder-quote {
  position: relative;
  padding: var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-8);
  border-left: 4px solid var(--clr-pane-red);
  background: var(--clr-bg-soft);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  margin: var(--sp-6) 0;
}

.founder-quote p {
  font-size: var(--fs-md);
  font-style: italic;
  color: var(--clr-dark);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-3);
}

.founder-quote footer { font-size: var(--fs-sm); }
.founder-quote cite { font-style: normal; font-weight: var(--fw-semibold); color: var(--clr-black); }

/* Founder figure */
.founder-figure { border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-xl); margin: 0; position: relative; }
.founder-figure__img { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: top; transition: transform var(--dur-slow) var(--ease-out); }
.founder-figure:hover .founder-figure__img { transform: scale(1.03); }
.founder-figure__caption { padding: var(--sp-3) var(--sp-5); background: var(--clr-black); color: rgba(255,255,255,.7); font-size: var(--fs-xs); text-align: center; }

/* Mission figure */
.mission-figure { border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-xl); margin: 0; }
.mission-figure__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.mission-figure:hover .mission-figure__img { transform: scale(1.03); }

.mission-image-block { position: relative; }


/* ============================================================
   34. DARK MODE
   ============================================================ */

[data-bs-theme="dark"] {
  --clr-black:       #f0f0f0;
  --clr-off-black:   #e5e5e5;
  --clr-dark:        #d0d0d0;
  --clr-mid:         #9ca3af;
  --clr-muted:       #6b7280;
  --clr-subtle:      #4b5563;
  --clr-border:      #2a2a2a;
  --clr-border-soft: #1f1f1f;
  --clr-bg:          #0d0d0d;
  --clr-bg-soft:     #161616;
  --clr-bg-warm:     #121212;
  --clr-white:       #0d0d0d;
}

[data-bs-theme="dark"] body { background: #0d0d0d; color: #d0d0d0; }
[data-bs-theme="dark"] .site-header { background: rgba(13,13,13,0.95); border-bottom-color: #1f1f1f; }
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3, [data-bs-theme="dark"] h4 { color: #f0f0f0; }
[data-bs-theme="dark"] .logo-name { color: #f0f0f0; }
[data-bs-theme="dark"] .section-heading { color: #f0f0f0; }
[data-bs-theme="dark"] .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(240,240,240,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
[data-bs-theme="dark"] .icon-moon { display: none; }
[data-bs-theme="dark"] .icon-sun { display: block; }
[data-bs-theme="dark"] .product-card, [data-bs-theme="dark"] .category-card, [data-bs-theme="dark"] .brand-card, [data-bs-theme="dark"] .testimonial-card, [data-bs-theme="dark"] .order-step, [data-bs-theme="dark"] .value-card, [data-bs-theme="dark"] .team-card, [data-bs-theme="dark"] .blog-card-full, [data-bs-theme="dark"] .faq-item, [data-bs-theme="dark"] .contact-channel-card, [data-bs-theme="dark"] .region-card, [data-bs-theme="dark"] .cert-item, [data-bs-theme="dark"] .mission-card { background: #161616; }
[data-bs-theme="dark"] .stats-section, [data-bs-theme="dark"] .marquee-section, [data-bs-theme="dark"] .cta-section, [data-bs-theme="dark"] .newsletter-section, [data-bs-theme="dark"] .site-footer { background: #0a0a0a; }
[data-bs-theme="dark"] .site-footer__top { border-bottom-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .numbers-inner, [data-bs-theme="dark"] .filter-search-input, [data-bs-theme="dark"] .contact-form__input, [data-bs-theme="dark"] .contact-form__select, [data-bs-theme="dark"] .contact-form__textarea { background: #161616; color: #d0d0d0; }
[data-bs-theme="dark"] .btn-primary-jmt { background: #f0f0f0; color: #0a0a0a !important; border-color: #f0f0f0; }
[data-bs-theme="dark"] .btn-primary-jmt:hover { background: #d0d0d0; }
[data-bs-theme="dark"] .btn-outline-jmt { color: #f0f0f0 !important; }
[data-bs-theme="dark"] .faq-btn { background: #161616 !important; color: #f0f0f0 !important; }
[data-bs-theme="dark"] .faq-btn:not(.collapsed) { background: #1a1a1a !important; }
[data-bs-theme="dark"] .faq-body { background: #161616; }
[data-bs-theme="dark"] .hero-section, [data-bs-theme="dark"] .page-hero, [data-bs-theme="dark"] .article-hero { background: #0f0f0f; }
[data-bs-theme="dark"] .navbar-collapse { background: #0d0d0d; border-color: #1f1f1f; }
[data-bs-theme="dark"] .filter-section, [data-bs-theme="dark"] .blog-filter-section { background: #0d0d0d; border-color: #1f1f1f; }


/* ============================================================
   35. ANIMATIONS
   ============================================================ */

/* Reveal on scroll (JS adds .is-visible) */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }


/* ============================================================
   36. RESPONSIVE OVERRIDES
   ============================================================ */

@media (max-width: 1199.98px) {
  .hero-section .container { gap: var(--sp-8); }
  .cta-section__inner { gap: var(--sp-8); }
}

@media (max-width: 991.98px) {
  .section-pad    { padding-top: var(--sp-16); padding-bottom: var(--sp-16); }
  .section-pad-sm { padding-top: var(--sp-12); padding-bottom: var(--sp-12); }
  .hero-heading { font-size: clamp(2rem, 8vw, 3.5rem); }
  .page-hero__heading { font-size: clamp(2rem, 7vw, 3rem); }
  .distrib-stats { grid-template-columns: 1fr 1fr; }
  .article-nav { grid-template-columns: 1fr; }
  .article-stats-block { grid-template-columns: repeat(2, 1fr); }
  .faq-cta-inner { flex-direction: column; text-align: center; }
  .faq-cta-inner__icon { display: none; }
  .faq-cta-inner__actions { justify-content: center; }
  .article-sidebar { position: relative; top: 0; }
}

@media (max-width: 767.98px) {
  .section-pad    { padding-top: var(--sp-12); padding-bottom: var(--sp-12); }
  .section-pad-sm { padding-top: var(--sp-8);  padding-bottom: var(--sp-8); }
  .hero-badges { gap: 0; }
  .hero-badge { padding: var(--sp-2) var(--sp-3); }
  .hero-badge__divider { display: none; }
  .blog-card-hero .row { flex-direction: column; }
  .blog-card-hero__body { padding: var(--sp-5); }
  .newsletter-inner { grid-template-columns: 1fr; gap: var(--sp-6); }
  .newsletter-form__group { flex-direction: column; border-radius: var(--radius-lg); }
  .newsletter-form__input { border-bottom: 1px solid rgba(255,255,255,.1); }
  .newsletter-form__btn { height: 48px; justify-content: center; }
  .contact-form__checkbox-grid { grid-template-columns: 1fr; }
  .intent-radio-group { grid-template-columns: repeat(2, 1fr); }
  .timeline { padding-left: var(--sp-8); }
  .certs-grid { gap: var(--sp-3); }
  .cert-item { min-width: 90px; padding: var(--sp-4) var(--sp-4); }
  .article-author-bio { flex-direction: column; }
  .article-hero__author-bar { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 575.98px) {
  :root { --header-h: 60px; }
  .logo-name { font-size: 0.85rem; }
  .logo-tagline { display: none; }
  .hero-cta-group { flex-direction: column; align-items: flex-start; }
  .hero-badges { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); padding-top: var(--sp-4); }
  .hero-badge__divider { display: none; }
  .marquee-section { flex-direction: column; align-items: flex-start; }
  .marquee-section__label { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); width: 100%; }
  .stats-grid .stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); }
  .distrib-stats { grid-template-columns: 1fr; }
  .cta-section__inner { gap: var(--sp-8); }
  .article-stats-block { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .join-step { flex-direction: column; gap: var(--sp-3); }
  .join-step__number { width: auto; font-size: var(--fs-xl); }
}

/* Print */
@media print {
  .site-header, .announcement-bar, .site-footer, .filter-section { display: none; }
  body { font-size: 12pt; color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
}