:root {
  --navy: #0A1628;
  --navy-mid: #12243E;
  --teal: #0E7C7B;
  --teal-light: #14A8A7;
  --teal-pale: #E6F7F7;
  --orange: #F97316;
  --orange-dark: #C2570E;
  --orange-pale: #FFF4ED;
  --white: #FFFFFF;
  --gray-50: #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-200: #E2E8F0;
  --gray-400: #94A3B8;
  --gray-600: #475569;
  --gray-800: #1E293B;
  --font-head: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --radius: 10px;
  --shadow: 0 4px 24px rgba(10,22,40,0.08);
  --shadow-md: 0 8px 40px rgba(10,22,40,0.13);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--gray-800); background: var(--white); }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }

/* ── HEADER ── */
header {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.top-bar {
  background: var(--teal);
  text-align: center;
  font-size: 13px;
  color: white;
  padding: 6px 20px;
  font-family: var(--font-body);
  letter-spacing: 0.01em;
}
.top-bar a { color: white; text-decoration: underline; }
nav {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  height: 70px;
  gap: 32px;
}
.logo-wrap { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.logo-icon {
  width: 44px; height: 44px;
  background: var(--orange);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.logo-icon svg { width: 28px; height: 28px; }
.logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.logo-name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 19px;
  color: var(--white);
  letter-spacing: -0.01em;
}
.logo-tagline {
  font-size: 10px;
  font-weight: 500;
  color: var(--teal-light);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nav-links {
  display: flex;
  gap: 4px;
  list-style: none;
  flex: 1;
}
.nav-links a {
  color: rgba(255,255,255,0.75);
  font-size: 14px;
  font-weight: 500;
  padding: 6px 13px;
  border-radius: 6px;
  transition: all 0.2s;
  white-space: nowrap;
}
.nav-links a:hover { color: white; background: rgba(255,255,255,0.08); }
.nav-links .active a { color: white; }
.nav-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.btn-ghost {
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  padding: 7px 16px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 7px;
  transition: all 0.2s;
  font-family: var(--font-body);
  cursor: pointer;
  background: none;
}
.btn-ghost:hover { background: rgba(255,255,255,0.08); color: white; }
.btn-orange {
  background: var(--orange);
  color: white;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.2s;
}
.btn-orange:hover { background: var(--orange-dark); transform: translateY(-1px); }
.cart-btn {
  color: white;
  font-size: 14px;
  padding: 7px 14px;
  border-radius: 7px;
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
}

/* ── HERO ── */
.hero {
  background: var(--navy);
  position: relative;
  overflow: hidden;
  padding: 80px 24px 90px;
  text-align: center;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 110%, rgba(14,124,123,0.35) 0%, transparent 70%);
}
.hero-bg-lines {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: repeating-linear-gradient(0deg, white 0px, white 1px, transparent 1px, transparent 60px),
                    repeating-linear-gradient(90deg, white 0px, white 1px, transparent 1px, transparent 60px);
}
.hero-content { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.hero-badge {
  display: inline-block;
  background: rgba(249,115,22,0.18);
  border: 1px solid rgba(249,115,22,0.4);
  color: #FB923C;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 20px;
}
.hero h1 {
  font-family: var(--font-head);
  font-size: clamp(38px, 6vw, 64px);
  font-weight: 800;
  color: white;
  line-height: 1.05;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}
.hero h1 span { color: var(--teal-light); }
.hero p {
  font-size: 18px;
  color: rgba(255,255,255,0.65);
  max-width: 560px;
  margin: 0 auto 36px;
  font-weight: 300;
  line-height: 1.7;
}
.hero-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn-hero-primary {
  background: var(--orange);
  color: white;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  padding: 14px 32px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  transition: all 0.2s;
}
.btn-hero-primary:hover { background: var(--orange-dark); transform: translateY(-2px); }
.btn-hero-secondary {
  background: rgba(255,255,255,0.1);
  color: white;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  padding: 14px 32px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.2);
  cursor: pointer;
  transition: all 0.2s;
}
.btn-hero-secondary:hover { background: rgba(255,255,255,0.17); }
.hero-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.1);
  flex-wrap: wrap;
}
.hero-stat { text-align: center; }
.hero-stat-num {
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: 800;
  color: white;
}
.hero-stat-label { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 2px; }

/* ── SECTION SHARED ── */
section { padding: 80px 24px; }
.container { max-width: 1200px; margin: 0 auto; }
.section-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 10px;
}
.section-title {
  font-family: var(--font-head);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.section-sub {
  font-size: 17px;
  color: var(--gray-600);
  max-width: 540px;
  font-weight: 300;
}
.section-head { margin-bottom: 48px; }
.section-head.center { text-align: center; }
.section-head.center .section-sub { margin: 0 auto; }

/* ── CATEGORIES ── */
.categories { background: var(--gray-50); }
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.cat-card {
  background: white;
  border-radius: 14px;
  padding: 30px 26px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: all 0.25s;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
}
.cat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s;
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--teal-pale); }
.cat-card:hover::before { transform: scaleX(1); }
.cat-icon {
  width: 52px; height: 52px;
  background: var(--teal-pale);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  font-size: 24px;
}
.cat-card h3 {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--navy);
}
.cat-card p { font-size: 14px; color: var(--gray-600); line-height: 1.55; }
.cat-card .cat-cta {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
}
.cat-card .cat-cta:after { content: '→'; transition: transform 0.2s; }
.cat-card:hover .cat-cta:after { transform: translateX(4px); }
.cat-badge {
  position: absolute;
  top: 14px; right: 14px;
  background: var(--orange-pale);
  color: var(--orange-dark);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── PRICING CALCULATOR ── */
.pricing-section { background: white; }
.pricing-wrap {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 48px;
  align-items: start;
}
.calc-card {
  background: var(--gray-50);
  border-radius: 16px;
  padding: 36px;
  border: 1px solid var(--gray-200);
}
.calc-card h3 {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}
.calc-card > p { font-size: 14px; color: var(--gray-600); margin-bottom: 28px; }
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-600);
  margin-bottom: 7px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.form-group select, .form-group input[type="number"] {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  font-size: 15px;
  font-family: var(--font-body);
  color: var(--gray-800);
  background: white;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.2s;
  cursor: pointer;
  outline: none;
}
.form-group select:focus, .form-group input:focus { border-color: var(--teal); }
.select-wrap { position: relative; }
.select-wrap::after {
  content: '▾';
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
  pointer-events: none;
  font-size: 12px;
}
.parts-toggle {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.part-btn {
  padding: 10px;
  text-align: center;
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-600);
  cursor: pointer;
  transition: all 0.15s;
  background: white;
  font-family: var(--font-body);
}
.part-btn.active, .part-btn:hover {
  border-color: var(--teal);
  background: var(--teal-pale);
  color: var(--teal);
}
.qty-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.qty-btn {
  padding: 9px;
  text-align: center;
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-600);
  cursor: pointer;
  transition: all 0.15s;
  background: white;
  font-family: var(--font-body);
}
.qty-btn.active, .qty-btn:hover {
  border-color: var(--orange);
  background: var(--orange-pale);
  color: var(--orange-dark);
}
.price-result {
  background: var(--navy);
  border-radius: 12px;
  padding: 24px 28px;
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.price-label { font-size: 13px; color: rgba(255,255,255,0.5); margin-bottom: 4px; }
.price-amount {
  font-family: var(--font-head);
  font-size: 36px;
  font-weight: 800;
  color: white;
}
.price-per { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 2px; }
.btn-calc {
  background: var(--orange);
  color: white;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  white-space: nowrap;
}
.pricing-side { }
.pricing-table-card {
  background: white;
  border-radius: 16px;
  border: 1px solid var(--gray-200);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.pricing-table-head {
  background: var(--navy);
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pricing-table-head span {
  color: white;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
}
.pricing-table-head small { color: rgba(255,255,255,0.5); font-size: 12px; }
.pricing-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  padding: 13px 24px;
  border-bottom: 1px solid var(--gray-100);
  font-size: 14px;
  align-items: center;
  transition: background 0.15s;
}
.pricing-row:last-child { border-bottom: none; }
.pricing-row:hover { background: var(--gray-50); }
.pricing-row.header {
  background: var(--gray-50);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-400);
  border-bottom: 1px solid var(--gray-200);
}
.pricing-row .qty-col { color: var(--gray-600); }
.pricing-row .price-col { font-weight: 700; color: var(--navy); text-align: right; padding-left: 16px; }
.pricing-row .unit-col { color: var(--gray-400); font-size: 12px; text-align: right; padding-left: 10px; }
.pricing-row .save-col { color: var(--teal); font-size: 12px; font-weight: 600; text-align: right; padding-left: 10px; }
.pricing-row .highlight { color: var(--orange-dark); font-weight: 700; }
.popular-badge {
  background: var(--orange-pale);
  color: var(--orange-dark);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: 8px;
}

/* ── HOW IT WORKS ── */
.how-it-works { background: var(--navy); }
.how-it-works .section-label { color: var(--teal-light); }
.how-it-works .section-title { color: white; }
.how-it-works .section-sub { color: rgba(255,255,255,0.5); }
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2px;
  background: rgba(255,255,255,0.06);
  border-radius: 16px;
  overflow: hidden;
}
.step {
  background: var(--navy-mid);
  padding: 36px 28px;
  position: relative;
}
.step:last-child::after { display: none; }
.step-num {
  font-family: var(--font-head);
  font-size: 56px;
  font-weight: 800;
  color: rgba(14,124,123,0.25);
  line-height: 1;
  margin-bottom: 16px;
}
.step h3 {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  color: white;
  margin-bottom: 10px;
}
.step p { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.6; }
.step-icon {
  width: 40px; height: 40px;
  background: rgba(14,124,123,0.2);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  font-size: 20px;
}

/* ── PRODUCT SHOP ── */
.shop-section { background: var(--gray-50); }
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}
.product-card {
  background: white;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: all 0.25s;
  cursor: pointer;
  border: 1.5px solid transparent;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--teal); }
.product-img {
  height: 150px;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.product-img svg { width: 80px; height: 80px; opacity: 0.35; }
.product-img .code-tag {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--navy);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  letter-spacing: 0.06em;
}
.product-info { padding: 18px 18px 20px; }
.product-info h4 {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 5px;
}
.product-meta { font-size: 12px; color: var(--gray-400); margin-bottom: 12px; }
.product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.product-price {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 800;
  color: var(--navy);
}
.product-price span { font-size: 13px; font-weight: 400; color: var(--gray-400); }
.btn-add {
  background: var(--teal);
  color: white;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 15px;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.2s;
}
.btn-add:hover { background: var(--teal-light); }
.stars { color: #F59E0B; font-size: 13px; margin-bottom: 4px; }
.shop-cta-bar {
  text-align: center;
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--gray-200);
}
.shop-cta-bar p { color: var(--gray-600); margin-bottom: 16px; font-size: 15px; }

/* ── WHY US ── */
.why-us { background: white; }
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}
.why-card {
  padding: 32px 28px;
  border-radius: 14px;
  border: 1.5px solid var(--gray-200);
  position: relative;
  transition: all 0.2s;
}
.why-card:hover { border-color: var(--teal); background: var(--teal-pale); }
.why-num {
  position: absolute;
  top: 20px; right: 22px;
  font-family: var(--font-head);
  font-size: 40px;
  font-weight: 800;
  color: var(--gray-100);
  line-height: 1;
}
.why-icon {
  font-size: 26px;
  margin-bottom: 16px;
  display: block;
}
.why-card h3 {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
}
.why-card p { font-size: 14px; color: var(--gray-600); line-height: 1.6; }

/* ── TESTIMONIALS ── */
.testimonials { background: var(--gray-50); }
.testi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
}
.testi-card {
  background: white;
  border-radius: 14px;
  padding: 28px;
  box-shadow: var(--shadow);
  position: relative;
}
.testi-quote {
  font-size: 48px;
  font-family: Georgia, serif;
  color: var(--teal-pale);
  position: absolute;
  top: 14px; left: 20px;
  line-height: 1;
}
.testi-body {
  font-size: 15px;
  color: var(--gray-600);
  line-height: 1.7;
  margin-bottom: 20px;
  padding-top: 18px;
  font-style: italic;
}
.testi-author { display: flex; align-items: center; gap: 12px; }
.testi-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--navy);
  display: flex; align-items: center; justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}
.testi-name { font-size: 14px; font-weight: 600; color: var(--navy); }
.testi-role { font-size: 12px; color: var(--gray-400); }
.testi-stars { color: #F59E0B; font-size: 13px; margin-bottom: 4px; }

/* ── CTA BANNER ── */
.cta-banner {
  background: var(--teal);
  padding: 70px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 120%, rgba(10,22,40,0.4) 0%, transparent 70%);
}
.cta-banner .container { position: relative; z-index: 1; }
.cta-banner h2 {
  font-family: var(--font-head);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  color: white;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.cta-banner p { color: rgba(255,255,255,0.75); font-size: 17px; max-width: 500px; margin: 0 auto 32px; }
.cta-banner-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn-cta-white {
  background: white;
  color: var(--teal);
  font-weight: 700;
  font-size: 16px;
  padding: 13px 30px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.2s;
}
.btn-cta-white:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.btn-cta-outline {
  background: transparent;
  color: white;
  font-weight: 600;
  font-size: 16px;
  padding: 13px 30px;
  border-radius: 8px;
  border: 2px solid rgba(255,255,255,0.5);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.2s;
}
.btn-cta-outline:hover { border-color: white; background: rgba(255,255,255,0.1); }

/* ── FOOTER ── */
footer {
  background: var(--navy);
  padding: 64px 24px 0;
  color: rgba(255,255,255,0.6);
  font-size: 14px;
}
.footer-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 260px 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand .logo-tagline { color: rgba(255,255,255,0.4); }
.footer-desc { margin-top: 16px; font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,0.45); }
.footer-contact { margin-top: 20px; }
.footer-contact div { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.footer-contact .icon { font-size: 15px; }
.footer-col h4 {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  color: white;
  margin-bottom: 18px;
  letter-spacing: 0.02em;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul a { color: rgba(255,255,255,0.5); font-size: 13.5px; transition: color 0.2s; }
.footer-col ul a:hover { color: white; }
.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: rgba(255,255,255,0.3);
}
.footer-badges { display: flex; gap: 10px; }
.footer-badge {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.5);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.08);
}

/* ── TRUST BAR ── */
.trust-bar {
  background: white;
  border-bottom: 1px solid var(--gray-200);
  padding: 22px 24px;
}
.trust-items {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--gray-600);
}
.trust-icon {
  width: 36px; height: 36px;
  background: var(--teal-pale);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.trust-item strong { display: block; font-size: 13px; font-weight: 600; color: var(--navy); }
.trust-item span { font-size: 12px; color: var(--gray-400); }

@media (max-width: 900px) {
  .pricing-wrap { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  nav { gap: 16px; }
  .nav-links { display: none; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
  .hero-stats { gap: 28px; }
  .parts-toggle { grid-template-columns: repeat(2,1fr); }
  .qty-grid { grid-template-columns: repeat(3,1fr); }
}

/* ────────────────────────────────────────────
   INNER PAGE SHARED STYLES
   ──────────────────────────────────────────── */

/* Page Hero */
.page-hero {
  background: var(--navy);
  position: relative;
  overflow: hidden;
  padding: 52px 24px 60px;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 120%, rgba(14,124,123,0.3) 0%, transparent 70%);
}
.page-hero-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; }
.breadcrumb { font-size: 13px; color: rgba(255,255,255,0.45); margin-bottom: 14px; }
.breadcrumb a { color: var(--teal-light); }
.breadcrumb span { color: rgba(255,255,255,0.25); margin: 0 8px; }
.page-hero h1 {
  font-family: var(--font-head); font-size: clamp(28px, 4vw, 48px);
  font-weight: 800; color: white; letter-spacing: -0.02em;
  line-height: 1.1; margin-bottom: 14px;
}
.page-hero p { font-size: 17px; color: rgba(255,255,255,0.6); max-width: 580px; font-weight: 300; }
.page-hero-meta { display: flex; gap: 16px; margin-top: 22px; flex-wrap: wrap; }
.page-hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7); font-size: 13px; padding: 5px 13px; border-radius: 20px;
}

/* Filter Bar */
.filter-bar {
  background: white; border-bottom: 1px solid var(--gray-200);
  padding: 14px 24px; position: sticky; top: 70px; z-index: 50;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.filter-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.filter-label { font-size: 13px; font-weight: 600; color: var(--gray-600); flex-shrink: 0; }
.filter-select {
  padding: 8px 32px 8px 12px; border: 1px solid var(--gray-200);
  border-radius: 7px; font-size: 13px; font-family: var(--font-body);
  color: var(--gray-800); background: white; -webkit-appearance: none; appearance: none;
  cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2394A3B8' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.filter-select:focus { outline: none; border-color: var(--teal); }
.filter-count { margin-left: auto; font-size: 13px; color: var(--gray-400); white-space: nowrap; }

/* Inner section */
.inner-section { padding: 60px 24px; }
.products-wrap { max-width: 1200px; margin: 0 auto; }

/* Mini CTA */
.mini-cta {
  background: var(--navy); border-radius: 16px; padding: 36px 40px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin: 48px 0;
}
.mini-cta h3 { font-family: var(--font-head); font-size: 22px; font-weight: 700; color: white; margin-bottom: 6px; }
.mini-cta p { font-size: 14px; color: rgba(255,255,255,0.55); }
.mini-cta-actions { display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }

/* Info cards */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 32px; }
.info-card { background: var(--gray-50); border-radius: 12px; padding: 24px 22px; border: 1px solid var(--gray-200); }
.info-card-icon { font-size: 28px; margin-bottom: 12px; display: block; }
.info-card h4 { font-family: var(--font-head); font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.info-card p { font-size: 14px; color: var(--gray-600); line-height: 1.6; }

/* FAQ Accordion */
.faq-section { padding: 72px 24px; background: var(--gray-50); }
.faq-categories { max-width: 860px; margin: 0 auto; }
.faq-group { margin-bottom: 48px; }
.faq-group-title {
  font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--navy);
  margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--gray-200);
  display: flex; align-items: center; gap: 10px;
}
.faq-item { border: 1px solid var(--gray-200); border-radius: 10px; margin-bottom: 10px; overflow: hidden; transition: box-shadow 0.2s; }
.faq-item.open { box-shadow: var(--shadow); }
.faq-question {
  padding: 18px 20px; cursor: pointer; display: flex; justify-content: space-between;
  align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: var(--navy);
  background: white; user-select: none; transition: background 0.15s;
}
.faq-question:hover { background: var(--gray-50); }
.faq-item.open .faq-question { background: var(--navy); color: white; }
.faq-toggle {
  width: 24px; height: 24px; border-radius: 50%; background: var(--gray-100);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-size: 18px; line-height: 1; transition: all 0.2s; color: var(--gray-600);
  font-weight: 400;
}
.faq-item.open .faq-toggle { background: rgba(255,255,255,0.15); color: white; transform: rotate(45deg); }
.faq-answer { display: none; padding: 18px 20px; font-size: 15px; color: var(--gray-600); line-height: 1.75; background: white; border-top: 1px solid var(--gray-100); }
.faq-item.open .faq-answer { display: block; }

/* Industry Tabs */
.industry-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -ms-overflow-style: none; }
.industry-tabs::-webkit-scrollbar { display: none; }
.tab-btn {
  padding: 8px 18px; border: 1.5px solid var(--gray-200); border-radius: 20px;
  font-size: 13px; font-weight: 600; color: var(--gray-600); background: white;
  cursor: pointer; white-space: nowrap; transition: all 0.15s; font-family: var(--font-body); flex-shrink: 0;
}
.tab-btn:hover { border-color: var(--teal); color: var(--teal); background: var(--teal-pale); }
.tab-btn.active { background: var(--navy); color: white; border-color: var(--navy); }

/* Template cards */
.template-card {
  background: white; border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow); transition: all 0.25s; border: 1.5px solid transparent;
}
.template-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--teal); }
.template-preview { height: 140px; background: var(--gray-100); display: flex; align-items: center; justify-content: center; position: relative; }
.template-preview svg { width: 90px; height: 90px; opacity: 0.4; }
.template-industry-tag {
  position: absolute; bottom: 10px; left: 10px; background: var(--navy);
  color: white; font-size: 10px; font-weight: 700; padding: 3px 8px;
  border-radius: 5px; letter-spacing: 0.05em;
}
.template-info { padding: 16px 18px 20px; }
.template-info h4 { font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.template-specs { font-size: 12px; color: var(--gray-400); margin-bottom: 12px; }
.template-footer { display: flex; align-items: center; justify-content: space-between; }
.template-price { font-family: var(--font-head); font-size: 18px; font-weight: 800; color: var(--navy); }
.template-price span { font-size: 12px; font-weight: 400; color: var(--gray-400); }
.btn-template { background: var(--teal); color: white; font-size: 12px; font-weight: 600; padding: 6px 13px; border-radius: 6px; border: none; cursor: pointer; font-family: var(--font-body); transition: background 0.2s; }
.btn-template:hover { background: var(--teal-light); }

/* Process Timeline */
.process-section { padding: 80px 24px; background: white; }
.process-timeline { max-width: 860px; margin: 0 auto; }
.process-step { display: grid; grid-template-columns: 64px 1fr; gap: 28px; margin-bottom: 12px; position: relative; }
.process-step:not(:last-child)::after { content: ''; position: absolute; left: 31px; top: 64px; height: 40px; width: 2px; background: var(--gray-200); }
.process-num {
  width: 64px; height: 64px; border-radius: 50%; background: var(--navy); color: white;
  font-family: var(--font-head); font-size: 20px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; z-index: 1;
}
.process-content { padding: 12px 0 40px; }
.process-content h3 { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.process-content p { font-size: 15px; color: var(--gray-600); line-height: 1.75; }
.process-tip { background: var(--teal-pale); border-radius: 8px; padding: 13px 16px; font-size: 14px; color: var(--teal); font-weight: 500; margin-top: 14px; border-left: 3px solid var(--teal); }

/* Spec table */
.spec-table { width: 100%; border-collapse: collapse; font-size: 14px; border-radius: 10px; overflow: hidden; }
.spec-table th { background: var(--navy); color: white; padding: 12px 16px; text-align: left; font-family: var(--font-head); font-size: 13px; font-weight: 600; }
.spec-table td { padding: 11px 16px; border-bottom: 1px solid var(--gray-100); color: var(--gray-600); }
.spec-table tr:last-child td { border-bottom: none; }
.spec-table tr:hover td { background: var(--gray-50); }
.spec-ok { color: var(--teal); font-weight: 600; }
.spec-no { color: #ef4444; font-weight: 600; }

/* Upload box */
.upload-box {
  border: 2px dashed var(--gray-200); border-radius: 14px; padding: 48px 24px;
  text-align: center; background: var(--gray-50); transition: border-color 0.2s; cursor: pointer;
}
.upload-box:hover { border-color: var(--teal); background: var(--teal-pale); }
.upload-icon { font-size: 40px; margin-bottom: 16px; display: block; }
.upload-box h3 { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.upload-box p { font-size: 14px; color: var(--gray-600); max-width: 360px; margin: 0 auto 20px; }

/* Two-col layout for print your design */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .mini-cta { padding: 28px 24px; } }

/* ════════════════════════════════════════════════════════════════
   TEMPLATE PICKER PAGE
   ════════════════════════════════════════════════════════════════ */
.template-picker-section { padding: 60px 24px 80px; background: var(--gray-50); }
.picker-group { margin-bottom: 48px; }
.picker-group-title {
  font-family: var(--font-head); font-size: 20px; font-weight: 700;
  color: var(--navy); margin-bottom: 20px;
  padding-bottom: 10px; border-bottom: 2px solid var(--gray-200);
}
.picker-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px;
}
.picker-card {
  background: white; border-radius: 14px; border: 2px solid var(--gray-200);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  display: block;
}
.picker-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.1);
  border-color: var(--teal);
}
.picker-preview {
  height: 220px; background: #f0f2f5;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; border-bottom: 1px solid var(--gray-200);
}
.picker-preview-blank { background: var(--gray-100); }
.blank-icon {
  width: 64px; height: 64px; border-radius: 16px;
  background: var(--teal); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 700;
  transition: transform 0.2s;
}
.picker-card-blank:hover .blank-icon { transform: scale(1.1); }
.picker-info { padding: 18px 20px 20px; }
.picker-info h3 {
  font-family: var(--font-head); font-size: 17px; font-weight: 700;
  color: var(--navy); margin-bottom: 6px;
}
.picker-info p {
  font-size: 13px; color: var(--gray-500); line-height: 1.55; margin-bottom: 12px;
}
.picker-tag {
  display: inline-block; padding: 3px 10px; margin-right: 6px;
  background: var(--teal-pale); color: var(--teal); border-radius: 6px;
  font-size: 11px; font-weight: 600;
}

/* ── Picker Dual Buttons (Wizard + Designer) ── */
.picker-btns {
  display: flex; gap: 8px; margin-top: 14px;
}
.picker-btn-wizard, .picker-btn-design {
  flex: 1; display: inline-block; padding: 9px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 600; text-align: center; text-decoration: none;
  transition: all 0.15s; cursor: pointer;
}
.picker-btn-wizard {
  background: var(--teal); color: white; border: 1px solid var(--teal);
}
.picker-btn-wizard:hover { background: #0a6160; color: white; }
.picker-btn-design {
  background: white; color: var(--gray-600); border: 1px solid var(--gray-300);
}
.picker-btn-design:hover { border-color: var(--teal); color: var(--teal); }

/* ── Mini Form Preview (CSS-only form thumbnail) ── */
.mini-form {
  width: 130px; height: 180px; background: white;
  border: 1px solid #ccc; border-radius: 4px;
  padding: 8px; display: flex; flex-direction: column; gap: 5px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.mini-form-half { width: 110px; height: 150px; }
.mf-header {
  height: 12%; background: linear-gradient(135deg, var(--teal-pale), #dbeafe);
  border-radius: 2px; border-bottom: 2px solid var(--teal);
}
.mf-field { height: 6%; background: #f0f0f0; border-radius: 2px; }
.mf-field.short { width: 60%; }
.mf-row-2col {
  height: 8%; display: flex; gap: 4px;
}
.mf-row-2col::before, .mf-row-2col::after {
  content: ''; flex: 1; background: #f0f0f0; border-radius: 2px;
}
.mf-table { flex: 1; display: flex; flex-direction: column; gap: 0; min-height: 0; }
.mf-table-head {
  height: 10px; background: #e2e8f0; border-radius: 2px 2px 0 0;
  border-bottom: 1px solid #cbd5e1;
}
.mf-table-row {
  flex: 1; background: #fafafa;
  border-bottom: 1px solid #e5e7eb;
}
.mf-totals {
  height: 10%; margin-left: 50%; background: #f0f0f0;
  border-radius: 2px; border-top: 2px solid #333;
}
.mf-sig {
  height: 6%; background: transparent;
  border-top: 1px solid #aaa; position: relative;
}
.mf-sig.short { width: 70%; }
.mf-sig::after {
  content: 'x'; position: absolute; top: -10px; left: 2px;
  font-size: 8px; color: #aaa;
}
.mf-terms {
  height: 8%; background: #f9f9f9; border: 1px solid #e0e0e0;
  border-radius: 2px;
}
.mf-textarea {
  height: 15%; background: #fafafa; border: 1px solid #e0e0e0;
  border-radius: 2px;
}
.mf-checkbox-row {
  height: 5%; display: flex; gap: 3px; align-items: center;
}
.mf-checkbox-row::before {
  content: ''; width: 6px; height: 6px;
  border: 1px solid #999; border-radius: 1px; flex-shrink: 0;
}
.mf-checkbox-row::after {
  content: ''; flex: 1; height: 2px; background: #e0e0e0; border-radius: 1px;
}

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

/* When .product-card is itself an anchor (whole-card click) — strip
   the underline + inherit colour so the card body reads identically
   to the div-based version, but every pixel of it is now the link
   target. The inner .btn-add styling already exists below as the
   accent CTA. */
.product-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.product-card-link:hover { text-decoration: none; color: inherit; }

/* ═══════════════════════════════════════════════════════════════════
   CARD-TEXT POLISH (2026-05-22)
   Adds truncation, line-clamping, badge z-index, and bottom-anchored
   CTAs to every preview card style. Pre-polish, long titles wrapped
   to 2-3 lines and pushed CTAs down, descriptions stretched cards to
   uneven heights, and badges had no stacking context. Pure CSS — no
   markup change needed.
   ═══════════════════════════════════════════════════════════════════ */

/* Category cards on the homepage — fixed image-icon header height,
   title truncates, description clamps to 2 lines, CTA bottom-anchored. */
.cat-card {
	display: flex !important;
	flex-direction: column;
}
.cat-card h3 {
	/* 2-line clamp instead of 1-line nowrap+ellipsis. Long titles
	   (e.g. "NCR Carbonless Forms") fully readable instead of cut
	   off to "NCR Carbonle…". Slight font reduction so the 2-line
	   case still fits without ballooning card height. */
	font-size: 16px;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(16px * 1.25 * 2);  /* reserve 2 lines so card heights line up across the row */
}
.cat-card p {
	/* Descriptions carry real selling info — let them show in full
	   instead of clamping to 3 lines. flex:1 still pushes the CTA
	   to the bottom of the card so cards in the same row have
	   aligned CTAs even when descriptions differ in length
	   (cards grow to match the tallest in their row via the
	   grid's default stretch alignment). */
	flex: 1;
}
.cat-badge { z-index: 2; }

/* "Why choose us" cards — same pattern as cat-cards. */
.why-card {
	display: flex !important;
	flex-direction: column;
}
.why-card h3 {
	font-size: 15px;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.why-card p {
	/* Same rationale as .cat-card p — these blurbs are short and
	   each adds a distinct selling point, so clamping them buys
	   uniform heights at the cost of customer-facing info. */
}

/* Product-card (shop NCR + card-stock pages) — image gets a fixed
   aspect ratio so thumbnails don't stretch, title truncates, meta
   truncates, footer pins to the bottom of the card. */
.product-card {
	display: flex !important;
	flex-direction: column;
}
.product-img { aspect-ratio: 4 / 3; height: auto; min-height: 0; }
.product-img img { width: 100%; height: 100%; object-fit: cover; }
.product-info {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}
.product-info h4 {
	font-size: 14px;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(14px * 1.3 * 2);   /* 2-line reserve keeps card heights aligned across the grid row */
}
.product-meta {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
.product-footer {
	margin-top: auto !important;
	align-items: center;
	justify-content: flex-end;       /* button is the only child now; right-align it */
	flex-wrap: wrap;                  /* if a price label ever returns, it can drop to its own line on narrow cards */
	gap: 8px;
}
.product-footer .btn-add { flex-shrink: 0; }
/* Safety net for future price labels — never let a long string
   wrap to multiple lines and push the CTA off the card. Scoped
   inside .product-card so the global .product-price rule (used
   elsewhere as a large bold price) is untouched. */
.product-card .product-price {
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Template gallery tiles (page-template-library, page-templates) —
   thumbnail aspect-ratio + title/meta truncation + industry-tag stack
   context so it always sits above the image. */
.template-card { display: flex; flex-direction: column; }
.template-preview { aspect-ratio: 4 / 3; height: auto; }
.template-preview img { width: 100%; height: 100%; object-fit: cover; }
.template-info h4 {
	font-size: 14px;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(14px * 1.3 * 2);
}
.template-specs {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
.template-industry-tag { z-index: 2; }

/* Cat-card + why-card descriptions are intentionally NOT clamped
   on any viewport — the copy is informative and gets read in full.
   The grid's default stretch alignment keeps card heights aligned
   across each row even when paragraphs differ in length. */