/* ==========================================================
   HOME PAGE — All section styles
   Sections: hero, trust-bar, featured-products, calculator,
   comparison, quality-coa, lot-lookup, categories,
   storage, faq, newsletter
   ========================================================== */

/* ── Shared section spacing ────────────────────────────── */
.home-section {
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

.home-section--sm {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.home-section--lg {
  padding-top: var(--space-32);
  padding-bottom: var(--space-32);
}

.home-section--dark {
  background-color: var(--color-bg-dark);
  color: var(--color-text-inverse);
}

.home-section--light {
  background-color: var(--color-bg-light);
}

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

.section-header__left {}

.section-header__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: color var(--transition-fast);
  flex-shrink: 0;
  margin-bottom: 4px;
}
.section-header__link:hover { color: var(--color-text); }
.section-header__link svg { width: 14px; height: 14px; }

/* ── 1. HERO ───────────────────────────────────────────── */
/* ── 1. HERO ────────────────────────────────────────────── */
.hero {
  background:
    radial-gradient(ellipse at 0% 50%, rgba(219,234,254,.45) 0%, transparent 55%),
    radial-gradient(ellipse at 100% 30%, rgba(252,231,243,.35) 0%, transparent 55%),
    #F9FAFB;
  padding-top: var(--space-20);
  padding-bottom: 0;
  overflow: hidden;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  min-height: 540px;
}

.hero__content {
  padding-bottom: var(--space-16);
}

/* Batch badge */
.hero__batch-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.3rem 0.875rem;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

.hero__batch-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  flex-shrink: 0;
}

/* Heading */
.hero__heading {
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  font-weight: var(--font-extrabold);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

.hero__heading em {
  font-style: normal;
  background: linear-gradient(135deg, #5A8A3C 0%, #2A8A6A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero__subtext {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  max-width: 460px;
  margin-bottom: var(--space-8);
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-10);
}

/* Stats row */
.hero__stats {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-5) var(--space-6);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.hero__stat-value {
  display: block;
  font-size: var(--text-xl);
  font-weight: var(--font-extrabold);
  color: var(--color-text);
  line-height: 1;
  margin-bottom: 2px;
}

.hero__stat-label {
  display: block;
  font-size: 10px;
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.hero__stat-divider {
  width: 1px;
  height: 32px;
  background-color: var(--color-border);
  flex-shrink: 0;
}

/* ── Hero visual (product label card) ─────────────────── */
.hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: var(--space-16);
  padding-top: var(--space-8);
}

/* Floating LOT tag (top-left of card area) */
.hero__lot-tag {
  position: absolute;
  top: 24px;
  left: 20px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-3);
  box-shadow: var(--shadow-md);
  z-index: 2;
}

.hero__lot-label {
  display: block;
  font-size: 9px;
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

.hero__lot-value {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-text);
}

/* Main product label card */
.hero__product-label {
  width: 220px;
  background: #FEFDF6;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(0,0,0,.06);
}

.hero__label-header {
  height: 18px;
  background-color: var(--color-primary);
}

.hero__label-body {
  padding: var(--space-5) var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
}

.hero__label-icon {
  width: 36px;
  height: 36px;
  color: var(--color-text);
}
.hero__label-icon svg { width: 100%; height: 100%; }

.hero__label-brand {
  font-size: 10px;
  font-weight: var(--font-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0;
}

.hero__label-dash {
  width: 100%;
  border-top: 1.5px dashed #C8C8B0;
}

.hero__label-compound {
  font-size: var(--text-base);
  font-weight: var(--font-extrabold);
  letter-spacing: 0.06em;
  color: var(--color-text);
  margin: 0;
}

.hero__label-dose {
  display: inline-block;
  padding: 0.25rem 0.875rem;
  background-color: var(--color-primary);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  border-radius: var(--radius-md);
}

.hero__label-note {
  font-size: 10px;
  color: var(--color-text-muted);
  margin: 0;
}

/* Floating HPLC badge (bottom-right) */
.hero__hplc-badge {
  position: absolute;
  bottom: 40px;
  right: 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-4);
  box-shadow: var(--shadow-lg);
  z-index: 2;
  text-align: right;
}

.hero__hplc-label {
  display: block;
  font-size: 9px;
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

.hero__hplc-value {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-primary);
}

/* ── 2. TRUST BAR ──────────────────────────────────────── */
.trust-bar {
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

.trust-bar__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.trust-bar__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-6);
  flex: 1;
  justify-content: center;
}

.trust-bar__item + .trust-bar__item {
  border-left: 1px solid var(--color-border);
}

.trust-bar__icon {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.trust-bar__text {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text);
  white-space: nowrap;
}

/* ── 3. FEATURED PRODUCTS ──────────────────────────────── */
/* Product card styles live in components.css (globally loaded) */
.featured-products {}

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

/* ── 4. RECONSTITUTION CALCULATOR ──────────────────────── */
.calc-section {
  background-color: #0C0E14;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 40px 40px;
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

.calc-section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

/* Left column */
.calc-section__label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-bottom: var(--space-4);
}

.calc-section__label-slash {
  color: var(--color-primary);
}

.calc-section__heading {
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: #fff;
  margin-bottom: var(--space-5);
}

.calc-section__desc {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.5);
  line-height: var(--leading-relaxed);
  max-width: 420px;
  margin-bottom: var(--space-7);
}

.calc-section__disclaimer {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--color-primary);
  background-color: rgba(220,38,38,.06);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 11px;
  color: rgba(255,255,255,.45);
  line-height: var(--leading-relaxed);
}

.calc-section__disclaimer-icon {
  width: 15px;
  height: 15px;
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 1px;
}

/* Right column — dark card */
.calc-widget {
  background-color: #141720;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
}

.calc-widget__field {
  margin-bottom: var(--space-4);
}

.calc-widget__label {
  display: block;
  font-size: 10px;
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-bottom: var(--space-2);
}

.calc-widget__input-wrap {
  display: flex;
  align-items: center;
  background-color: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}
.calc-widget__input-wrap:focus-within {
  border-color: rgba(255,255,255,.25);
}

.calc-widget__input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  padding: 0.65rem 0.875rem;
  font-size: var(--text-sm);
  color: #fff;
  font-family: var(--font-sans);
}
.calc-widget__input::placeholder { color: rgba(255,255,255,.2); }

.calc-widget__unit {
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: rgba(255,255,255,.3);
  border-left: 1px solid rgba(255,255,255,.08);
  white-space: nowrap;
  min-width: 42px;
  text-align: center;
}

/* Results card (nested, darker) */
.calc-result {
  margin-top: var(--space-5);
  padding: var(--space-5);
  background-color: #0C0E14;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-lg);
}

.calc-result__label {
  font-size: 10px;
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: var(--space-2);
}

.calc-result__units {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: var(--font-extrabold);
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-1);
  letter-spacing: var(--tracking-tight);
}

.calc-result__ml {
  font-size: var(--text-xs);
  color: rgba(255,255,255,.35);
  margin-bottom: var(--space-4);
  min-height: 1.2em;
}

.calc-result__rows {
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.calc-result__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
}

.calc-result__row span:first-child {
  color: rgba(255,255,255,.35);
}

.calc-result__row span:last-child {
  font-weight: var(--font-semibold);
  color: rgba(255,255,255,.7);
}

/* ── 5. COMPOUND COMPARISON ────────────────────────────── */
.comparison-section {}

.comparison-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.comparison-table thead th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  background-color: var(--color-bg-light);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.comparison-table thead th:not(:first-child) {
  text-align: center;
}

.comparison-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--transition-fast);
}
.comparison-table tbody tr:last-child { border-bottom: none; }
.comparison-table tbody tr:hover { background-color: var(--color-bg-light); }

.comparison-table tbody td {
  padding: var(--space-4);
  color: var(--color-text);
}
.comparison-table tbody td:not(:first-child) { text-align: center; }

.comparison-table__name {
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

.comparison-table__class {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.ct-yes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  background-color: #DCFCE7;
  color: #16A34A;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--font-bold);
}

.ct-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  background-color: var(--color-bg-light);
  color: var(--color-text-light);
  border-radius: var(--radius-full);
  font-size: 11px;
}

.comparison-table tfoot td {
  padding: var(--space-3) var(--space-4);
  font-size: 11px;
  color: var(--color-text-light);
  background-color: var(--color-bg-light);
  border-top: 1px solid var(--color-border);
}

/* ── 6. QUALITY / COA ──────────────────────────────────── */
.quality-section {
  background-color: var(--color-bg-dark);
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

.quality-section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-20);
  align-items: center;
}

.quality-section .section-label {
  color: rgba(255,255,255,.4);
}

.quality-section__heading {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: #fff;
  margin-bottom: var(--space-6);
}

.quality-section__desc {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.55);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-8);
}

.quality-bullets {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.quality-bullet {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.quality-bullet__icon {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background-color: rgba(220, 38, 38, .2);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.quality-bullet__icon svg { width: 11px; height: 11px; }

.quality-bullet__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: #fff;
  margin-bottom: var(--space-1);
}

.quality-bullet__desc {
  font-size: var(--text-xs);
  color: rgba(255,255,255,.45);
  line-height: var(--leading-relaxed);
}

/* COA Card */
.coa-card {
  background-color: var(--color-bg);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 32px 64px rgba(0,0,0,.4);
}

.coa-card__header {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.coa-card__title {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text);
}

.coa-card__lot {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.coa-card__body {
  padding: var(--space-6);
}

.coa-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-5);
}

.coa-table tr { border-bottom: 1px solid var(--color-border); }
.coa-table tr:last-child { border-bottom: none; }

.coa-table td {
  padding: var(--space-2) 0;
  font-size: var(--text-xs);
}

.coa-table td:first-child {
  color: var(--color-text-muted);
  width: 50%;
}

.coa-table td:last-child {
  font-weight: var(--font-semibold);
  color: var(--color-text);
  text-align: right;
}

.coa-card__cta {
  display: block;
  width: 100%;
  padding: var(--space-3);
  text-align: center;
  background-color: var(--color-dark);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}
.coa-card__cta:hover { background-color: var(--color-dark-alt); }

/* ── 7. LOT LOOKUP ─────────────────────────────────────── */
.lot-lookup {
  background-color: var(--color-bg-light);
  text-align: center;
}

.lot-lookup__inner {
  max-width: 600px;
  margin: 0 auto;
}

.lot-lookup__heading {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
}

.lot-lookup__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
  line-height: var(--leading-relaxed);
}

.lot-lookup__form {
  display: flex;
  gap: var(--space-2);
  max-width: 480px;
  margin: 0 auto var(--space-5);
}

.lot-lookup__input {
  flex: 1;
  padding: 0.625rem 1rem;
  font-size: var(--text-sm);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg);
  color: var(--color-text);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  font-family: var(--font-sans);
}
.lot-lookup__input:focus {
  border-color: var(--color-dark);
  box-shadow: 0 0 0 3px rgba(15,23,42,.08);
}

.lot-lookup__example {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.lot-lookup__result {
  margin-top: var(--space-6);
  padding: var(--space-5);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: none;
  text-align: left;
}

.lot-lookup__result.is-visible { display: block; }

.lot-lookup__result--error {
  border-color: var(--color-primary);
  background-color: var(--color-primary-light);
}

/* ── 8. SHOP CATEGORIES ────────────────────────────────── */
.categories-section {}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.category-card {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg);
  transition: box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
  text-decoration: none;
  display: block;
}

.category-card:hover {
  box-shadow: var(--shadow-md);
  border-color: transparent;
  transform: translateY(-2px);
}

.category-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  flex-shrink: 0;
}
.category-card__icon svg { width: 20px; height: 20px; }

.category-card__icon--red    { background-color: #FEE2E2; color: #DC2626; }
.category-card__icon--blue   { background-color: #DBEAFE; color: #2563EB; }
.category-card__icon--green  { background-color: #DCFCE7; color: #16A34A; }
.category-card__icon--purple { background-color: #EDE9FE; color: #7C3AED; }
.category-card__icon--amber  { background-color: #FEF3C7; color: #D97706; }
.category-card__icon--dark   { background-color: var(--color-bg-light); color: var(--color-text); }

.category-card__name {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.category-card__desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.category-card__arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
  transition: color var(--transition-fast), gap var(--transition-fast);
}
.category-card__arrow svg { width: 12px; height: 12px; }
.category-card:hover .category-card__arrow { color: var(--color-text); gap: var(--space-2); }

/* ── 9. STORAGE & HANDLING ─────────────────────────────── */
.storage-section {
  background-color: var(--color-bg-light);
}

.storage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

.storage-card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.storage-card__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background-color: #FEE2E2;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}
.storage-card__icon svg { width: 18px; height: 18px; }

.storage-card__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.storage-card__desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.storage-card__temp {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  font-size: 11px;
  font-weight: var(--font-semibold);
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
}

/* ── 10. FAQ ───────────────────────────────────────────── */
.faq-section {}

.faq-section__inner {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--space-20);
  align-items: start;
}

.faq-section__sidebar .section-label { margin-bottom: var(--space-3); }

.faq-section__sidebar-heading {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
}

.faq-section__sidebar-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}

/* Accordion */
.faq-accordion {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}
.faq-item:last-child { border-bottom: none; }

.faq-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  text-align: left;
  background: none;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}
.faq-item__trigger:hover { background-color: var(--color-bg-light); }

.faq-item__question {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.faq-item__icon {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform var(--transition-base), border-color var(--transition-base), background-color var(--transition-base);
}
.faq-item__icon svg { width: 10px; height: 10px; }

.faq-item.is-open .faq-item__icon {
  transform: rotate(45deg);
  background-color: var(--color-dark);
  border-color: var(--color-dark);
  color: #fff;
}

.faq-item__body {
  display: none;
  padding: 0 var(--space-6) var(--space-5);
}
.faq-item.is-open .faq-item__body { display: block; }

.faq-item__answer {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* ── 11. NEWSLETTER ────────────────────────────────────── */
.newsletter-section {
  background-color: var(--color-bg-darker);
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.newsletter-section__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}

.newsletter-section__heading {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: #fff;
  margin-bottom: var(--space-2);
}

.newsletter-section__desc {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.45);
  line-height: var(--leading-relaxed);
  max-width: 360px;
}

.newsletter-section__form {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
  min-width: 340px;
}

.newsletter-section__input {
  flex: 1;
  padding: 0.625rem 1rem;
  font-size: var(--text-sm);
  background-color: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: var(--radius-md);
  color: #fff;
  outline: none;
  transition: border-color var(--transition-fast);
  font-family: var(--font-sans);
}
.newsletter-section__input::placeholder { color: rgba(255,255,255,.3); }
.newsletter-section__input:focus { border-color: rgba(255,255,255,.3); }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero__inner,
  .calc-section__inner,
  .quality-section__inner,
  .faq-section__inner { grid-template-columns: 1fr; }

  .hero__visual { display: none; }
  .hero__content { padding-bottom: var(--space-10); }

  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .categories-grid { grid-template-columns: repeat(2, 1fr); }
  .storage-grid { grid-template-columns: repeat(2, 1fr); }

  .newsletter-section__inner { flex-direction: column; align-items: flex-start; }
  .newsletter-section__form { min-width: unset; width: 100%; }
}

@media (max-width: 640px) {
  .trust-bar__list { flex-wrap: wrap; }
  .trust-bar__item { border-left: none; border-top: 1px solid var(--color-border); flex: 1 1 45%; }
  .trust-bar__item:first-child { border-top: none; }

  .products-grid { grid-template-columns: 1fr; }
  .categories-grid { grid-template-columns: 1fr; }
  .storage-grid { grid-template-columns: 1fr; }

  .hero__stats { gap: var(--space-5); flex-wrap: wrap; }
  .lot-lookup__form { flex-direction: column; }
}