/* DIRECTION D — FIELD-PRO CATALOG (merged)
   Body palette: bone cream + warm dark mineral, easier on the eyes.
   Nav and announce bar: translucent dark over the photographic hero.
   Hero: full-bleed dark-green photographic moment with a glass estimator.
   All other components (calc, catalog grid, compare, roi, reviews, footer) inherit. */

:root {
  --qft-lime: #C8E44D;
  --qft-green: #8EBA50;
  --qft-green-hover: #7BA342;
  --qft-green-dark: #226303;
  --qft-green-ink: #1F4009;
  --qft-yelp-red: #D32323;
  /* Font families from design-system/colors_and_type.css */
  --font-display: "Acumin Variable Concept", "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --font-heading: "Rogy", "Barlow Condensed", system-ui, sans-serif;
  --font-body: "Rogy", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-ui: "Inter", "Rogy", system-ui, sans-serif;
}

.c-root {
  /* Body palette — bone cream (Direction D default) */
  --cc-bg: #F4F1EA;
  --cc-surface: #FBF9F4;
  --cc-line: #DAD6C9;
  --cc-line-strong: #B8B3A2;
  --cc-muted: #5A5C50;
  --cc-green: var(--qft-green);
  --cc-green-dark: var(--qft-green-ink);
  --cc-accent: var(--qft-lime);
  background: var(--cc-bg);
  color: var(--cc-ink);
  overflow-x: hidden;
  font-feature-settings: "tnum" 1;
}
.c-root { --cc-ink: #0E1408; }

/* ============ ANNOUNCE BAR ============ */
.c-announce {
  /* Dark green (Direction D) */
  background: #0A1A02;
  color: #fff;
  padding: 10px 32px; font-family: var(--font-ui);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 600; text-align: center;
}
.c-announce strong { color: var(--qft-lime); }

/* ============ NAV ============ */
.c-nav {
  /* Translucent dark over photo, blurred */
  background: rgba(11, 22, 4, 0.86);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: sticky; top: 0; z-index: 50;
}
.c-nav-inner {
  max-width: 1440px; margin: 0 auto; padding: 4px 32px;
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 32px; align-items: center;
}
.c-logo img { height: 90px; display: block; margin: -15px 0; }
.c-nav-links { display: flex; gap: 28px; }
.c-nav-links > a, .c-nav-links .has-menu {
  font-family: var(--font-ui); font-weight: 600; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82);
  padding: 8px 0; cursor: pointer; position: relative;
}
.c-nav-links .has-menu::after {
  content: "▾"; font-size: 9px; margin-left: 4px; opacity: 0.5;
}
.c-nav-links a:hover, .c-nav-links .has-menu:hover { color: var(--qft-lime); }
.c-nav-phone {
  font-family: var(--font-heading); font-weight: 700; font-style: italic;
  font-size: 16px; color: var(--qft-lime); display: flex; align-items: center; gap: 8px;
}

/* ============ HERO — cinematic dark (Direction D) ============ */
.c-hero {
  position: relative;
  min-height: 100vh;
  max-height: 1000px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  isolation: isolate;
}
.c-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
}
.c-hero-bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  filter: saturate(1.18) contrast(1.06) brightness(0.78);
  animation: dHeroBreathe 26s ease-in-out infinite alternate;
}
@keyframes dHeroBreathe {
  from { transform: scale(1.05) translate3d(0, 0, 0); filter: saturate(1.18) contrast(1.06) brightness(0.72); }
  to   { transform: scale(1.18) translate3d(-2.5%, -1.5%, 0); filter: saturate(1.3) contrast(1.1) brightness(0.66); }
}
.c-hero-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 35%, rgba(8, 22, 4, 0.0) 0%, rgba(8, 22, 4, 0.45) 55%, rgba(6, 16, 2, 0.86) 100%),
    linear-gradient(180deg, rgba(8, 22, 4, 0.55) 0%, rgba(8, 22, 4, 0.15) 28%, rgba(8, 22, 4, 0.25) 60%, rgba(6, 16, 2, 0.78) 100%),
    linear-gradient(90deg, rgba(6, 16, 2, 0.55) 0%, rgba(6, 16, 2, 0.0) 35%, rgba(6, 16, 2, 0.0) 65%, rgba(6, 16, 2, 0.55) 100%);
}
.c-hero-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.7  0 0 0 0 0.78  0 0 0 0 0.4  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.5; mix-blend-mode: overlay; pointer-events: none;
}
.c-hero-inner {
  position: relative; z-index: 2;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 90px 56px 110px;
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 72px;
  align-items: center;
}
.c-hero-copy {
  display: flex; flex-direction: column;
  color: #fff;
  max-width: 640px;
}
.c-hero-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 9px 16px 9px 14px; border-radius: 999px;
  width: fit-content;
  font-family: var(--font-ui);
  font-weight: 600; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 36px;
}
.c-hero-pill .dot {
  width: 7px; height: 7px; border-radius: 4px;
  background: var(--qft-lime);
  box-shadow: 0 0 10px rgba(200, 228, 77, 0.7);
  animation: pulse 2.4s ease-in-out infinite;
}
.c-hero-title {
  font-family: var(--font-display);
  font-weight: 900; font-style: italic; font-stretch: 62%;
  font-size: clamp(58px, 7.4vw, 124px);
  line-height: 0.86;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 28px;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.c-hero-title em {
  color: var(--qft-lime);
  font-style: italic;
}
.c-hero-lede {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  max-width: 520px;
  margin: 0 0 32px;
}
.c-hero-trust {
  display: flex; align-items: center; gap: 18px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  max-width: 520px;
}
.c-hero-trust .stars {
  color: var(--qft-lime);
  letter-spacing: 2px; font-size: 16px;
}
.c-hero-trust .meta {
  font-family: var(--font-ui);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}
.c-hero-trust .meta strong {
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 800; font-style: italic;
  font-size: 15px;
  margin-right: 2px;
}

/* Glassmorphic calculator */
.c-hero .c-calc {
  background: rgba(15, 28, 8, 0.72);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  border: 1px solid rgba(200, 228, 77, 0.22);
  border-radius: 16px;
  padding: 30px;
  box-shadow:
    0 40px 80px -30px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #fff;
}
.c-hero .c-calc .c-calc-head {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.c-hero .c-calc .c-calc-head h3 {
  color: #fff;
}
.c-hero .c-calc .c-calc-head .live {
  color: var(--qft-lime);
}
.c-hero .c-calc .c-calc-head .live::before {
  background: var(--qft-lime);
  box-shadow: 0 0 8px rgba(200, 228, 77, 0.6);
}
.c-hero .c-calc .c-calc-row label {
  color: rgba(255, 255, 255, 0.62);
}
.c-hero .c-calc .c-calc-chip {
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
}
.c-hero .c-calc .c-calc-chip:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(200, 228, 77, 0.35);
}
.c-hero .c-calc .c-calc-chip.on {
  background: var(--qft-lime);
  border-color: var(--qft-lime);
  color: #0E1B02;
}
.c-hero .c-calc .c-calc-slider .val {
  color: #fff;
}
.c-hero .c-calc .c-calc-slider .val em {
  color: rgba(255, 255, 255, 0.55);
}
.c-hero .c-calc .c-calc-slider input[type=range] {
  background: rgba(255, 255, 255, 0.18);
}
.c-hero .c-calc .c-calc-slider input[type=range]::-webkit-slider-thumb {
  background: var(--qft-lime);
  border-color: rgba(20, 28, 12, 0.9);
  box-shadow: 0 0 0 4px rgba(200, 228, 77, 0.18);
}
.c-hero .c-calc .c-calc-slider input[type=range]::-moz-range-thumb {
  background: var(--qft-lime);
  border-color: rgba(20, 28, 12, 0.9);
}
.c-hero .c-calc .c-calc-slider .ticks {
  color: rgba(255, 255, 255, 0.4);
}
.c-hero .c-calc .c-calc-estimate {
  border: 1px solid rgba(200, 228, 77, 0.24);
}
.c-hero .c-calc .c-calc-estimate .range em {
  color: var(--qft-lime);
}
.c-hero-trust .stars { color: var(--qft-lime); letter-spacing: 2px; font-size: 16px; }
.c-hero-trust .meta { font-size: 13px; color: rgba(255, 255, 255, 0.7); }
.c-hero-trust .meta strong { color: #fff; font-family: var(--font-heading); font-weight: 800; font-style: italic; font-size: 15px; }

/* Glassmorphic calculator — END */

/* Calculator card — standalone (non-hero) */
.c-calc {
  background: rgba(15, 28, 8, 0.72);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  border: 1px solid rgba(200, 228, 77, 0.22);
  border-radius: 16px;
  padding: 30px;
  box-shadow:
    0 40px 80px -30px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #fff;
}
.c-calc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 16px; border-bottom: 1px solid var(--cc-line);
}
.c-calc-head h3 {
  font-family: var(--font-heading); font-weight: 800; font-style: italic;
  font-size: 22px; text-transform: uppercase; color: var(--cc-green-dark); margin: 0;
}
.c-calc-head .live {
  font-family: var(--font-ui); font-weight: 700; font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--cc-green);
  display: flex; align-items: center; gap: 6px;
}
.c-calc-head .live::before {
  content: ""; width: 8px; height: 8px; border-radius: 4px;
  background: var(--cc-green); animation: pulse 2s infinite;
}
.c-calc-row label {
  display: block; font-family: var(--font-ui); font-weight: 600;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cc-muted); margin-bottom: 10px;
}
.c-calc-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.c-calc-chip {
  background: #F3F5EE; border: 1.5px solid transparent;
  padding: 12px 16px; border-radius: 8px; cursor: pointer;
  font-family: var(--font-ui); font-weight: 600; font-size: 13px;
  color: var(--cc-ink); transition: all 180ms;
  flex: 1; min-width: 0; text-align: center;
}
.c-calc-chip:hover { background: #E9EDE1; }
.c-calc-chip.on { background: var(--cc-green-dark); color: #fff; border-color: var(--cc-green-dark); }
.c-calc-slider {
  display: flex; flex-direction: column; gap: 8px;
}
.c-calc-slider .val {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-heading); font-weight: 800; font-style: italic;
  font-size: 34px; color: var(--cc-green-dark);
}
.c-calc-slider .val em { font-style: normal; font-size: 16px; color: var(--cc-muted); }
.c-calc-slider input[type=range] {
  -webkit-appearance: none; width: 100%; height: 6px;
  background: var(--cc-line); border-radius: 3px; outline: none;
}
.c-calc-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 11px;
  background: var(--cc-green); border: 3px solid #fff; cursor: pointer;
  box-shadow: 0 2px 8px rgba(34,99,3,0.3);
}
.c-calc-slider input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 11px;
  background: var(--cc-green); border: 3px solid #fff; cursor: pointer;
}
.c-calc-slider .ticks {
  display: flex; justify-content: space-between;
  font-family: var(--font-ui); font-size: 10px; color: var(--cc-muted);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.c-calc-estimate {
  background: linear-gradient(135deg, var(--cc-green-dark) 0%, #0E2B02 100%);
  color: #fff; border-radius: 8px; padding: 20px 24px;
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
}
.c-calc-estimate .el {
  font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 600; color: var(--cc-accent);
}
.c-calc-estimate .range {
  font-family: var(--font-display); font-weight: 900; font-style: italic; font-stretch: 62%;
  font-size: 44px; line-height: 1; color: #fff; letter-spacing: -0.01em;
  margin-top: 4px; transition: all 300ms;
}
.c-calc-estimate .range em { color: var(--cc-accent); font-size: 28px; }
.c-calc-estimate .note { font-size: 11px; color: rgba(255,255,255,0.65); margin-top: 4px; }
.c-calc-estimate button { white-space: nowrap; }

/* ============ LOGOS ROW ============ */
.c-logos {
  background: var(--qft-green-dark);
  padding: 40px 32px;
  border-top: none; border-bottom: none;
}
.c-logos-inner {
  max-width: 1440px; margin: 0 auto;
  display: grid; grid-template-columns: auto repeat(5, 1fr); gap: 40px; align-items: center;
}
.c-logos .label {
  font-family: var(--font-ui); font-weight: 700; font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.4;
}
.c-logos .logo {
  font-family: var(--font-heading); font-weight: 800; font-style: italic;
  font-size: 18px; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
  opacity: 1;
  letter-spacing: 0.04em;
}

/* ============ CATALOG ============ */
.c-catalog { max-width: 1440px; margin: 0 auto; padding: 110px 32px; }
.c-head {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px;
  margin-bottom: 56px; align-items: end;
}
.c-eyebrow {
  font-family: var(--font-ui); font-weight: 500; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--cc-green-dark); display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.c-eyebrow::before { content: ""; width: 28px; height: 1.5px; background: var(--cc-green); }
.c-title {
  font-family: var(--font-display); font-weight: 900; font-style: italic; font-stretch: 62%;
  font-size: clamp(44px, 5vw, 82px); line-height: 0.9; letter-spacing: -0.012em;
  text-transform: uppercase; color: var(--cc-green-dark); margin: 0;
}
.c-title em { color: var(--cc-green); }
.c-head .lede {
  font-size: 16px; line-height: 1.6; color: var(--cc-muted); max-width: 440px; margin: 0;
}

.c-cat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.c-cat {
  background: #fff; border: 1px solid var(--cc-line); border-radius: 8px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: all 280ms;
}
.c-cat:hover {
  transform: translateY(-4px); box-shadow: 0 20px 40px -16px rgba(34,99,3,0.25);
  border-color: var(--cc-green);
}
.c-cat-photo {
  aspect-ratio: 16/10; background: var(--cc-line); position: relative; overflow: hidden;
}
.c-cat-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms; }
.c-cat:hover .c-cat-photo img { transform: scale(1.05); }
.c-cat-sku {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--font-ui); font-weight: 700; font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; color: #fff;
  background: rgba(14,20,8,0.75); padding: 5px 9px; border-radius: 4px;
  backdrop-filter: blur(6px);
}
.c-cat-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.c-cat-title {
  font-family: var(--font-heading); font-weight: 800; font-style: italic;
  font-size: 22px; text-transform: uppercase; color: var(--cc-green-dark);
  margin: 0 0 8px;
}
.c-cat-sub { font-size: 14px; color: var(--cc-muted); line-height: 1.5; margin: 0 0 18px; }
.c-cat-specs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px;
  margin-bottom: 22px;
  padding: 16px; background: #F7F8F3; border-radius: 6px;
  font-family: var(--font-ui);
}
.c-cat-specs .spec-k { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cc-muted); font-weight: 600; }
.c-cat-specs .spec-v { font-family: var(--font-heading); font-weight: 700; font-style: italic; font-size: 14px; color: var(--cc-green-dark); }
.c-cat-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--cc-line);
}
.c-cat-price {
  font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--cc-muted); font-weight: 600;
}
.c-cat-price strong {
  display: block; font-family: var(--font-heading); font-weight: 800; font-style: italic;
  font-size: 22px; color: var(--cc-green-dark); letter-spacing: 0; text-transform: none;
}
.c-cat-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-ui); font-weight: 700; font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--cc-green-dark);
  cursor: pointer; background: none; border: none; padding: 0;
}
.c-cat-btn svg { width: 12px; height: 12px; transition: transform 220ms; }
.c-cat:hover .c-cat-btn svg { transform: translateX(3px); }

/* ============ COMPARE ============ */
.c-compare {
  background: var(--cc-green-dark); color: #fff;
  padding: 110px 32px; position: relative;
}
.c-compare-inner { max-width: 1200px; margin: 0 auto; }
.c-compare .c-eyebrow { color: var(--cc-accent); }
.c-compare .c-eyebrow::before { background: var(--cc-accent); }
.c-compare .c-title { color: #fff; }
.c-compare .c-title em { color: var(--cc-accent); }
.c-compare-head { text-align: center; margin-bottom: 48px; }
.c-compare-head .c-eyebrow { justify-content: center; }
.c-compare-head .c-title { margin-inline: auto; max-width: 900px; }
.c-table {
  width: 100%; border-collapse: collapse;
  background: rgba(255,255,255,0.04); border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(200,228,77,0.22);
}
.c-table th, .c-table td {
  padding: 20px 24px; text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-size: 15px;
}
.c-table thead th {
  font-family: var(--font-heading); font-weight: 800; font-style: italic;
  font-size: 18px; text-transform: uppercase; color: var(--cc-accent);
  background: rgba(0,0,0,0.25);
  padding: 22px 24px;
}
.c-table thead th:first-child { color: rgba(255,255,255,0.5); font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.2em; font-style: normal; font-weight: 700; }
.c-table tbody td:first-child {
  font-family: var(--font-ui); font-weight: 700; font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.8);
}
.c-table tbody tr:last-child td { border-bottom: none; }
.c-table .good { color: var(--cc-accent); font-weight: 500; }
.c-table .bad { color: #E89670; }
.c-table .neutral { color: rgba(255,255,255,0.8); }
.c-compare-foot {
  display: flex; justify-content: center; margin-top: 36px; gap: 14px; flex-wrap: wrap;
}

/* ============ ROI PANEL ============ */
.c-roi {
  max-width: 1440px; margin: 0 auto; padding: 110px 32px;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center;
}
.c-roi h2 {
  font-family: var(--font-display); font-weight: 900; font-style: italic; font-stretch: 62%;
  font-size: clamp(44px, 5.2vw, 92px); line-height: 0.88; text-transform: uppercase;
  color: var(--cc-green-dark); margin: 0 0 22px; letter-spacing: -0.01em;
}
.c-roi h2 em { color: var(--cc-green); }
.c-roi p { font-size: 16px; line-height: 1.6; color: var(--cc-muted); margin: 0 0 28px; max-width: 480px; }
.c-roi-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  padding: 20px; background: #F3F5EE; border-radius: 8px;
}
.c-roi-stats .cell {
  padding: 14px; background: #fff; border: 1px solid var(--cc-line); border-radius: 6px;
}
.c-roi-stats .cell .v {
  font-family: var(--font-display); font-weight: 900; font-style: italic; font-stretch: 62%;
  font-size: 40px; line-height: 1; color: var(--cc-green-dark); letter-spacing: -0.01em;
}
.c-roi-stats .cell .l {
  font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--cc-muted); font-weight: 600; margin-top: 6px;
}
.c-roi-chart {
  background: #fff; border: 1px solid var(--cc-line); border-radius: 12px;
  padding: 32px; box-shadow: 0 20px 40px -20px rgba(0,0,0,0.12);
}
.c-roi-chart-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 16px; border-bottom: 1px solid var(--cc-line); margin-bottom: 24px;
}
.c-roi-chart-head h4 {
  font-family: var(--font-heading); font-weight: 800; font-style: italic;
  font-size: 18px; text-transform: uppercase; color: var(--cc-green-dark); margin: 0;
}
.c-roi-chart-legend { display: flex; gap: 16px; }
.c-roi-chart-legend .l {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-ui); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--cc-muted);
}
.c-roi-chart-legend .l .sw {
  width: 14px; height: 4px; border-radius: 2px;
}

/* ============ REVIEW STRIP ============ */
.c-reviews {
  background: var(--qft-green-dark);
  padding: 90px 32px;
  border-top: none; border-bottom: none;
}
.c-reviews-inner { max-width: 1440px; margin: 0 auto; }
.c-reviews-head {
  display: flex; justify-content: space-between; align-items: end; margin-bottom: 40px; flex-wrap: wrap; gap: 20px;
}
.c-reviews-head .score {
  display: flex; align-items: center; gap: 20px;
}
.c-reviews-head .score .big {
  font-family: var(--font-display); font-weight: 900; font-style: italic; font-stretch: 62%;
  font-size: 84px; line-height: 0.8; color: #fff;
}
.c-reviews-head .score .sub { }
.c-reviews-head .stars { color: var(--qft-lime); letter-spacing: 2px; font-size: 22px; }
.c-reviews-head .count { font-family: var(--font-ui); font-size: 13px; color: rgba(255, 255, 255, 0.65); margin-top: 4px; letter-spacing: 0.05em; }
.c-review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.c-review {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 28px; border-radius: 8px;
  display: flex; flex-direction: column;
  transition: border-color 220ms;
}
.c-review:hover { border-color: var(--qft-lime); }
.c-review-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.c-review-head img { filter: brightness(0) invert(1); opacity: 0.65; }
.c-review .stars { color: var(--qft-lime); letter-spacing: 2px; font-size: 14px; }
.c-review .q { font-style: italic; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.92); margin: 0 0 20px; flex: 1; }
.c-review-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.c-review .name { font-family: var(--font-heading); font-weight: 800; font-style: italic; font-size: 15px; text-transform: uppercase; color: #fff; }
.c-review .loc { font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.c-review .src { font-family: var(--font-ui); font-weight: 600; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }

/* ============ FINAL CTA ============ */
.c-final {
  max-width: 1440px; margin: 0 auto; padding: 120px 32px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.c-final-left h2 {
  font-family: var(--font-display); font-weight: 900; font-style: italic; font-stretch: 62%;
  font-size: clamp(52px, 6vw, 100px); line-height: 0.88; text-transform: uppercase;
  color: var(--cc-green-dark); margin: 0 0 22px; letter-spacing: -0.015em;
}
.c-final-left h2 em { color: var(--cc-green); }
.c-final-left p { font-size: 17px; line-height: 1.6; color: var(--cc-muted); margin: 0 0 32px; max-width: 460px; }
.c-final-steps { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 14px; }
.c-final-steps li {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-heading); font-weight: 700; font-style: italic;
  font-size: 18px; color: var(--cc-green-dark); text-transform: uppercase;
}
.c-final-steps .n {
  width: 32px; height: 32px; border-radius: 16px; background: var(--cc-green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-weight: 700; font-size: 13px; font-style: normal;
  flex-shrink: 0;
}
.c-final-card {
  background: #fff; border: 1px solid var(--cc-line); border-radius: 12px;
  padding: 40px; box-shadow: 0 30px 60px -20px rgba(34,99,3,0.15);
}
.c-final-card h4 {
  font-family: var(--font-heading); font-weight: 800; font-style: italic;
  font-size: 22px; text-transform: uppercase; color: var(--cc-green-dark); margin: 0 0 8px;
}
.c-final-card .p { color: var(--cc-muted); font-size: 14px; margin: 0 0 24px; }
.c-final-card .fld { margin-bottom: 14px; }
.c-final-card label {
  display: block; font-family: var(--font-ui); font-weight: 600; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--cc-muted); margin-bottom: 8px;
}
.c-final-card input {
  width: 100%; padding: 12px 14px; font-family: var(--font-body);
  font-size: 15px; border: 1.5px solid var(--cc-line); border-radius: 8px;
  background: #fff; color: var(--cc-ink);
}
.c-final-card input:focus { outline: none; border-color: var(--cc-green); box-shadow: 0 0 0 3px rgba(142,186,80,0.15); }
.c-final-card button { width: 100%; margin-top: 10px; }
.c-final-card .fine { font-size: 11px; color: var(--cc-muted); margin-top: 12px; line-height: 1.5; text-align: center; }

/* ============ FOOTER ============ */
.c-footer {
  background: var(--cc-ink); color: rgba(255,255,255,0.7);
  padding: 70px 32px 30px;
}
.c-footer-inner { max-width: 1440px; margin: 0 auto; }
.c-footer-top { display: grid; grid-template-columns: 1.6fr repeat(6, 1fr); gap: 32px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.c-footer img.blogo { height: 48px; margin-bottom: 16px; }
.c-footer p { color: rgba(255,255,255,0.5); }
.c-footer p.blurb { font-size: 13px; max-width: 280px; line-height: 1.6; }
.c-footer h5 {
  font-family: var(--font-heading); font-weight: 800; font-style: italic;
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cc-accent); margin: 0 0 14px;
}
.c-footer h5 a { color: inherit; }
.c-footer ul { list-style: none; padding: 0; margin: 0; }
.c-footer li { margin-bottom: 8px; }
.c-footer a { color: rgba(255,255,255,0.7); font-size: 13px; }
.c-footer a:hover { color: var(--cc-accent); }
.c-footer-bot { display: flex; justify-content: space-between; padding-top: 22px; font-size: 11px; color: rgba(255,255,255,0.4); }

/* Cat/Catalog cards */
.c-cat, .c-final-card { background: var(--cc-surface); }

@media (max-width: 1080px) {
  .c-hero { min-height: auto; max-height: none; }
  .c-hero-inner {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 64px 32px 72px;
  }
}

@media (max-width: 900px) {
  .c-hero { grid-template-columns: 1fr; }
  .c-head { grid-template-columns: 1fr; }
  .c-cat-grid, .c-review-grid { grid-template-columns: 1fr; }
  .c-roi { grid-template-columns: 1fr; }
  .c-final { grid-template-columns: 1fr; }
  .c-logos-inner { grid-template-columns: 1fr 1fr; }
  .c-footer-top { grid-template-columns: 1fr 1fr; }
}

/* ============ UTILITY CLASSES — Reemplazan inline styles ============ */

/* Text colors */
.has-accent { color: var(--cc-accent); }
.has-dark-text { color: #444; }
.has-muted-text { color: #666; }
.has-white-text { color: #fff; }
.has-subtle { color: rgba(255,255,255,0.65); }
.has-subtle-light { color: rgba(255,255,255,0.78); }

/* Font weights */
.has-w-600 { font-weight: 600; }
.has-w-700 { font-weight: 500; }

/* Button ghost variants */
.btn-ghost--light {
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}
.btn-ghost--light-alt {
  border-color: rgba(255,255,255,0.25);
  color: #fff;
}

/* Spacing */
.mg-t-sm { margin-top: 12px; }
.mg-t-md { margin-top: 32px; }
.mg-t-lg { margin-top: 40px; }
.mg-b-sm { margin-bottom: 8px; }
.mg-b-md { margin-bottom: 16px; }

/* Text alignment */
.txt-center { text-align: center; }
.txt-left { text-align: left; }

/* Layout */
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.w-full { width: 100%; }
.justify-center { justify-content: center; }

/* Backgrounds */
.bg-accent { background: var(--cc-accent); }
.bg-white { background: #fff; }
.bg-dark { background: var(--qft-green-dark); }

/* Misc */
.opacity-sm { opacity: 0.25; }
.opacity-9 { opacity: 0.9; }
.lineHeight-1_5 { line-height: 1.5; }
.lineHeight-1_7 { line-height: 1.7; }

/* Padding */
.p-t-lg { padding-top: 40px; }
.p-b-lg { padding-bottom: 40px; }
.p-x-lg { padding: 40px 0; }
.p-t-sm { padding-top: 12px; }
.p-b-sm { padding-bottom: 12px; }

/* Font sizes */
.fs-sm { font-size: .875rem; }
.fs-lg { font-size: 2.5rem; }
.fs-xl { font-size: .9375rem; }

/* Border radius */
.rounded-sm { border-radius: 8px; }

/* Icon button backgrounds */
.icon-red { background: #ff0000; color: #fff; }
.icon-insta { background: linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045); color: #fff; }
.icon-fb { background: #1877f2; color: #fff; }
.icon-white { color: #fff; }

/* Ghost button variants */
.btn-ghost--subtle {
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.8);
}