@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Corporate Colors */
  --navy: #002855;
  --navy-light: #F5F7FA;
  --navy-mid: #E8ECF1;
  --orange: #F26522;
  --orange-hover: #E05A1A;
  --green: #32cd32;
  --green-dark: #28a428;
  --red: #E53E3E;
  --red-dim: rgba(229,62,62,0.6);
  --amber: #DD6B20;
  --purple: #805AD5;
  --cyan: #0891B2;
  --white: #FFFFFF;
  --text-primary: #002855;
  --text-secondary: #4A5568;
  --text-muted: #718096;
  --text-light: #A0AEC0;
  --border: #E2E8F0;
  --border-light: #EDF2F7;
  --card-bg: #FFFFFF;
  --body-bg: #F5F7FA;
  --radius: 0px;
  --radius-sm: 0px;
  --shadow: 3px 3px 6px rgba(0,0,0,0.05);
  --shadow-lg: 4px 4px 12px rgba(0,0,0,0.08);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark mode */
[data-theme="dark"] {
  --navy-light: #0B1A2E;
  --navy-mid: #1A3050;
  --text-primary: #FFFFFF;
  --text-secondary: #D9E2EC;
  --text-muted: #9FB3C8;
  --text-light: #627D98;
  --border: rgba(43,127,255,0.1);
  --border-light: rgba(43,127,255,0.06);
  --card-bg: #12253D;
  --body-bg: #0B1A2E;
  --shadow: 0 2px 8px rgba(0,0,0,0.2);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.25);
}

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

body {
  font-family: 'Montserrat', -apple-system, sans-serif;
  background: var(--body-bg);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 60px;
  position: relative;
  z-index: 1;
}

/* ═══════════════════════
   HEADER / NAV
   ═══════════════════════ */
.site-header {
  background: var(--navy);
  padding: 0 24px;
  z-index: 100;
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.header-logo img {
  height: 32px;
  width: auto;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.theme-toggle-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  transition: var(--transition);
}
.theme-toggle-btn:hover {
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.1);
}
.header-cta {
  background: var(--orange);
  color: #fff;
  border: none;
  padding: 10px 24px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
}
.header-cta:hover {
  background: var(--orange-hover);
}

/* ═══════════════════════
   PAGE HEADER
   ═══════════════════════ */
.page-header {
  text-align: center;
  padding: 48px 0 40px;
}
.page-header h1 {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 12px;
  color: var(--text-primary);
}
.page-header p {
  font-size: 17px;
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ═══════════════════════
   HOW IT WORKS
   ═══════════════════════ */
.how-it-works {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
@media (max-width: 768px) { .how-it-works { grid-template-columns: 1fr; } }
.hiw-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: center;
  box-shadow: var(--shadow);
}
.hiw-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hiw-icon img {
  width: 36px;
  height: 36px;
}
/* Icon mask — exact color via background-color on masked span */
.icon-mask {
  display: block;
  width: 36px;
  height: 36px;
  background-color: #F26522;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.icon-navy {
  filter: invert(12%) sepia(60%) saturate(3000%) hue-rotate(200deg) brightness(40%) contrast(110%);
}
.hiw-card h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.hiw-card p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* ═══════════════════════
   INDUSTRIES
   ═══════════════════════ */
.industries {
  margin-bottom: 40px;
}
.industries-title {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.industries-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.ind-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: var(--transition);
  cursor: default;
}
.ind-tag:hover {
  border-color: var(--orange);
  color: var(--text-primary);
}
.ind-tag .ind-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.ind-tag .ind-icon img {
  width: 100%;
  height: 100%;
  filter: invert(12%) sepia(60%) saturate(3000%) hue-rotate(200deg) brightness(40%) contrast(110%);
}
[data-theme="dark"] .ind-tag .ind-icon img {
  filter: invert(80%) sepia(10%) saturate(200%) hue-rotate(180deg) brightness(110%);
}

/* ═══════════════════════
   LAYOUT
   ═══════════════════════ */
.calc-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 900px) {
  .calc-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════
   PANELS
   ═══════════════════════ */
.panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  position: relative;
  box-shadow: var(--shadow);
}
.panel-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  margin-bottom: 24px;
}
.start-here {
  color: var(--orange);
  font-size: 10px;
  margin-right: 4px;
  animation: nudge 2s ease-in-out infinite;
}
@keyframes nudge {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ═══════════════════════
   INPUTS / SLIDERS
   ═══════════════════════ */
.input-group { margin-bottom: 24px; }
.input-group:last-child { margin-bottom: 0; }
.toggle-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}
.toggle-label input { display: none; }
.toggle-switch {
  position: relative;
  width: 42px;
  height: 24px;
  background: var(--border);
  border-radius: 12px;
  flex-shrink: 0;
  transition: var(--transition);
}
.toggle-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: var(--transition);
}
.toggle-label input:checked + .toggle-switch {
  background: var(--green);
}
.toggle-label input:checked + .toggle-switch::after {
  left: 21px;
}
.biodiesel-warning {
  margin-top: 10px;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--orange);
  background: rgba(242,101,34,0.08);
  border: 1px solid rgba(242,101,34,0.2);
  border-radius: 6px;
}
.hw-option.biodiesel-incompatible {
  opacity: 0.45;
  position: relative;
}
.hw-option.biodiesel-incompatible::after {
  content: '⚠️ Not for biodiesel';
  position: absolute;
  bottom: 4px;
  right: 8px;
  font-size: 9px;
  color: var(--orange);
  font-weight: 600;
}
.input-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.input-label span {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}
.input-label .value-display {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--navy-mid);
  outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 8px rgba(242,101,34,0.4);
  cursor: pointer;
  transition: var(--transition);
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 16px rgba(242,101,34,0.6);
}
input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 8px rgba(242,101,34,0.4);
  cursor: pointer;
  border: none;
}

/* ═══════════════════════
   HARDWARE SELECTOR
   ═══════════════════════ */
.hw-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}
.hw-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  background: var(--body-bg);
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}
.hw-option:hover {
  border-color: var(--orange);
  background: var(--card-bg);
}
.hw-option.selected {
  border-color: var(--orange);
  background: rgba(242,101,34,0.04);
  box-shadow: 0 0 0 1px var(--orange);
}
[data-theme="dark"] .hw-option.selected {
  background: rgba(242,101,34,0.1);
}
/* Radio dot removed — image serves as selector */
.hw-img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--border);
}
.hw-option.selected .hw-img {
  border-color: var(--orange);
  box-shadow: 0 0 0 2px var(--orange);
}
.hw-img-none {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--text-light);
  background: var(--body-bg);
}
.hw-option.selected .hw-img-none {
  border-color: var(--orange);
  box-shadow: 0 0 0 2px var(--orange);
  color: var(--orange);
}
.hw-option .hw-info, .addon-option .hw-info { flex: 1; }
.hw-option .hw-name, .addon-option .hw-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.hw-option .hw-meta, .addon-option .hw-meta {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 4px;
}
.addon-option .hw-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.hw-option .hw-price, .addon-option .hw-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}
.hw-option .hw-badge {
  position: absolute;
  top: -1px;
  right: 16px;
  background: var(--orange);
  color: white;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 10px 4px;
  border-radius: 0 0 4px 4px;
  text-transform: uppercase;
}

/* ═══════════════════════
   ADD-ONS
   ═══════════════════════ */
.addon-section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.addon-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  background: var(--body-bg);
  cursor: pointer;
  transition: var(--transition);
  margin-bottom: 8px;
}
.addon-option:hover {
  border-color: var(--green);
  background: var(--card-bg);
}
.addon-option.checked {
  border-color: var(--green);
  background: rgba(50,205,50,0.04);
}
[data-theme="dark"] .addon-option.checked {
  background: rgba(50,205,50,0.08);
}
.addon-option .checkbox {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  border: 2px solid var(--text-light);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.addon-option.checked .checkbox {
  background: var(--green);
  border-color: var(--green);
}
.addon-option.checked .checkbox::after {
  content: '\2713';
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.addon-disabled { opacity: 0.45; }
.addon-disabled .panel-title { opacity: 0.7; }
.addon-option.disabled {
  pointer-events: none;
  cursor: default;
}
.addon-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
  font-style: italic;
}

/* ═══════════════════════
   SOFTWARE PLATFORM & REPORTS (v2)
   ═══════════════════════ */
.software-section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.software-disabled { opacity: 0.45; }
.software-disabled .panel-title { opacity: 0.7; }
.software-hint, .report-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
  font-style: italic;
}

/* Platform radio selector */
.platform-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.platform-option .hw-info { flex: 1; }
.platform-option .hw-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.platform-option .hw-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.platform-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border: 1.5px solid var(--border);
  background: var(--body-bg);
  cursor: pointer;
  transition: var(--transition);
}
.platform-option:hover {
  border-color: var(--navy);
  background: var(--card-bg);
}
.platform-option.selected {
  border-color: var(--navy);
  background: rgba(0,40,85,0.04);
}
[data-theme="dark"] .platform-option.selected {
  background: rgba(0,40,85,0.15);
}
.platform-option.disabled {
  pointer-events: none;
  cursor: default;
}
.platform-option .radio-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--text-light);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.platform-option.selected .radio-dot {
  border-color: var(--navy);
}
.platform-option.selected .radio-dot::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--navy);
}

/* Reports section */
.reports-section {
  margin-top: 16px;
}
.report-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  background: var(--body-bg);
  cursor: pointer;
  transition: var(--transition);
  margin-bottom: 8px;
}
.report-option:hover {
  border-color: var(--green);
  background: var(--card-bg);
}
.report-option.checked {
  border-color: var(--green);
  background: rgba(50,205,50,0.04);
}
[data-theme="dark"] .report-option.checked {
  background: rgba(50,205,50,0.08);
}
.report-option .checkbox {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  border: 2px solid var(--text-light);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.report-option.checked .checkbox {
  background: var(--green);
  border-color: var(--green);
}
.report-option.checked .checkbox::after {
  content: '\2713';
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.report-option.disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
}
.report-option.locked {
  cursor: default;
}
.report-option.locked .checkbox {
  background: var(--green);
  border-color: var(--green);
  opacity: 0.6;
}
.report-option.locked .checkbox::after {
  content: '\2713';
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.report-included {
  font-size: 10px;
  font-weight: 600;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 6px;
}
.report-option .hw-info { flex: 1; }
.report-option .hw-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.report-option .hw-desc {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 2px;
}
.report-option .hw-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ═══════════════════════
   RESULTS AREA
   ═══════════════════════ */
.results-area {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 16px;
}

/* Calculate overlay — mutes results until user clicks */
.results-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
  background: transparent;
  transition: opacity 0.4s ease;
}
.calculate-btn-wrap {
  position: sticky;
  top: 100px;
  text-align: center;
}
.overlay-cloud {
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: 0 8px 40px rgba(0,0,0,0.1);
  padding: 36px 32px;
  max-width: 400px;
  margin: 0 auto;
}
[data-theme="dark"] .overlay-cloud {
  box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}
.overlay-cta-text {
  margin-bottom: 24px;
}
.overlay-cta-text h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.overlay-cta-text p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 360px;
  margin: 0 auto;
}
[data-theme="dark"] .results-overlay {
  background: rgba(11,26,46,0.7);
}
.results-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}
.calculate-btn {
  padding: 18px 48px;
  background: var(--orange);
  color: #fff;
  border: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 20px rgba(242,101,34,0.35);
}
.calculate-btn:hover {
  background: var(--orange-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(242,101,34,0.45);
}
.results-muted > *:not(.results-overlay) {
  filter: blur(3px);
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
  transition: filter 0.4s ease, opacity 0.4s ease;
}
.results-muted.revealed > *:not(.results-overlay) {
  filter: none;
  opacity: 1;
  pointer-events: auto;
  user-select: auto;
}

/* ═══════════════════════
   HERO METRICS
   ═══════════════════════ */
.hero-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 600px) { .hero-metrics { grid-template-columns: repeat(2, 1fr); } }
.metric-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  position: relative;
  box-shadow: var(--shadow);
}
.metric-card.highlight {
  border-color: var(--green);
}
.metric-card.highlight::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--green);
}
.metric-card.warn {
  border-color: var(--red);
}
.metric-card.warn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--red);
}
.metric-card .metric-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.metric-card .metric-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.metric-card .metric-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
}
.metric-card.highlight .metric-value {
  color: var(--green);
}
.metric-card.warn .metric-value { color: var(--red); }

/* ═══════════════════════
   WATERFALL / STACKED BAR
   ═══════════════════════ */
.waterfall-panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow);
}
.waterfall-panel .waterfall-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.stacked-bar-container { margin-bottom: 20px; }
.stacked-bar-summary {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--text-secondary);
}
.stacked-bar-summary strong { font-weight: 700; }
.summary-recovered strong { color: var(--green); }
.summary-remaining strong { color: var(--red); }
.summary-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: middle;
}
.stacked-bar {
  width: 100%;
  height: 48px;
  overflow: hidden;
  display: flex;
  position: relative;
  background: var(--navy-mid);
}
.stacked-segment {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.stacked-segment span {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  padding: 0 6px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.seg-hw-theft { background: linear-gradient(90deg, #1A7A4F, #00B377); }
.seg-hw-waste { background: linear-gradient(90deg, #1A7A4F, #00B377); opacity: 0.7; }
/* Report segments — basic = blue, advanced = purple shades */
.seg-report-theft.seg-basic { background: linear-gradient(90deg, #0891B2, #22D3EE); }
.seg-report-waste.seg-basic { background: linear-gradient(90deg, #0891B2, #22D3EE); opacity: 0.7; }
.seg-report-theft.seg-fuel-ops { background: linear-gradient(90deg, #6D28D9, #8B5CF6); }
.seg-report-waste.seg-fuel-ops { background: linear-gradient(90deg, #6D28D9, #8B5CF6); opacity: 0.7; }
.seg-report-theft.seg-fuel-consumption { background: linear-gradient(90deg, #7C3AED, #A78BFA); }
.seg-report-waste.seg-fuel-consumption { background: linear-gradient(90deg, #7C3AED, #A78BFA); opacity: 0.7; }
.seg-report-theft.seg-fuel-usage { background: linear-gradient(90deg, #9333EA, #C084FC); }
.seg-report-waste.seg-fuel-usage { background: linear-gradient(90deg, #9333EA, #C084FC); opacity: 0.7; }
.seg-remaining {
  background: repeating-linear-gradient(135deg, rgba(229,62,62,0.25), rgba(229,62,62,0.25) 4px, rgba(229,62,62,0.12) 4px, rgba(229,62,62,0.12) 8px);
}

.waterfall-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.legend-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-light);
  padding: 6px 12px;
  border: 1.5px solid var(--border);
  background: var(--body-bg);
  cursor: default;
  transition: var(--transition);
  opacity: 0.5;
}
.legend-check.active {
  opacity: 1;
  color: var(--text-secondary);
  border-color: var(--border);
  background: var(--card-bg);
}
.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.legend-dot.hw { background: #00B377; }
.legend-dot.basic { background: #22D3EE; }
.legend-dot.advanced { background: #A78BFA; }
.legend-dot.remaining {
  background: repeating-linear-gradient(135deg, rgba(229,62,62,0.4), rgba(229,62,62,0.4) 3px, rgba(229,62,62,0.15) 3px, rgba(229,62,62,0.15) 6px);
}

.waterfall-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--body-bg);
}
.detail-item .detail-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}
.detail-item .detail-value {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.detail-tip {
  position: relative;
  display: inline-flex;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  cursor: help;
  margin-left: 4px;
  vertical-align: middle;
}
.detail-tip:hover, .detail-tip:focus { color: var(--orange); background: var(--border-light); }
.detail-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 220px;
  background: var(--navy);
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 6px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.2s ease;
  z-index: 50;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
}
.detail-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--navy);
}
.detail-tip:hover .detail-tooltip,
.detail-tip:focus .detail-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.detail-item .detail-value.green { color: var(--green); }
.detail-item .detail-value.red { color: var(--red); }
.detail-item .detail-value.amber { color: var(--amber); }
@media (max-width: 600px) { .waterfall-details { grid-template-columns: 1fr; } }

/* ═══════════════════════
   COMPARISON TABLE
   ═══════════════════════ */
.compare-panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.compare-panel .panel-title {
  padding: 20px 24px 14px;
  margin-bottom: 0;
}
.compare-disclaimer {
  font-size: 11px;
  color: var(--text-muted);
  padding: 10px 24px 14px;
  font-style: italic;
}
.compare-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.compare-table col.col-solution { width: 26%; }
.compare-table col.col-data { width: auto; }
.compare-table th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  padding: 12px 10px;
  text-align: right;
  border-bottom: 1px solid var(--border);
}
.compare-table th:first-child { text-align: left; }
.compare-table .th-note {
  font-size: 9px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-light);
  margin-top: 2px;
}
.compare-table td {
  padding: 14px 10px;
  font-size: 14px;
  font-weight: 500;
  text-align: right;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-light);
  font-variant-numeric: tabular-nums;
}
.compare-table td:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--text-primary);
}
.compare-table tr.active-row {
  background: rgba(242,101,34,0.04);
}
[data-theme="dark"] .compare-table tr.active-row {
  background: rgba(242,101,34,0.08);
}
.compare-table tr.active-row td {
  color: var(--text-primary);
  font-weight: 600;
}
.compare-table tr.active-row td:first-child { color: var(--orange); }
.compare-table .addon-note {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 2px;
}
.compare-table .val-green { color: var(--green) !important; }
.compare-table .val-red { color: var(--red) !important; font-weight: 400 !important; }

/* ═══════════════════════
   TIER COMPARISON TABLE
   ═══════════════════════ */
.tiers-section { margin-top: 48px; }
.tiers-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  margin-bottom: 20px;
  text-align: center;
}
.tiers-fleet-info {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 16px;
  line-height: 1.5;
}
.tiers-fleet-info strong { color: var(--text-secondary); }
.tiers-fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  overflow: hidden;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  display: none;
}
.tiers-fixed-header table { margin: 0; border-collapse: collapse; }
.tiers-fixed-header .th-sub,
.tiers-fixed-header .th-badge { display: none; }
.tiers-fixed-header .th-img,
.tiers-fixed-header .th-img-none { width: 32px; height: 32px; margin-bottom: 4px; }
.tiers-fixed-header .th-name { font-size: 10px; }
.tiers-fixed-header th { padding: 8px 8px 6px !important; }
.tiers-table-wrap {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: visible;
}
.tiers-table-wrap.is-stuck {
  clip-path: inset(0 0 -20px 0);
}
@media (max-width: 600px) {
  .tiers-table-wrap { overflow-x: auto; }
}
.tiers-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
}
.tiers-table th, .tiers-table td {
  padding: 12px 14px;
  text-align: center;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
  vertical-align: middle;
}
.tiers-table th:first-child, .tiers-table td:first-child {
  text-align: left;
  padding-left: 20px;
  width: 22%;
  color: var(--text-muted);
  font-weight: 500;
}
.tiers-table thead th {
  padding: 24px 16px 18px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--card-bg);
  box-shadow: none;
}
.tiers-table thead th.active-col {
  background: var(--card-bg);
}
.th-img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  margin: 0 auto 10px;
  display: block;
  border-radius: 50%;
  border: 2px solid var(--border);
}
.th-img-none {
  width: 96px;
  height: 96px;
  margin: 0 auto 10px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: var(--text-light);
  background: var(--body-bg);
}
.th-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.th-sub {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}
.th-price {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-secondary);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.th-price-unit {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
}
.th-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: var(--orange);
  color: white;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 0 0 4px 4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.tiers-table thead th.active-col { background: var(--card-bg); }
.tiers-table td.active-col { background: rgba(242,101,34,0.03); }
[data-theme="dark"] .tiers-table thead th.active-col { background: var(--card-bg); }
[data-theme="dark"] .tiers-table td.active-col { background: rgba(242,101,34,0.06); }

.feat-cell { color: var(--text-secondary); font-weight: 500; }
.feat-check {
  display: inline-flex;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}
.feat-check.yes { background: rgba(50,205,50,0.12); color: var(--green); }
.feat-check.no { background: rgba(0,0,0,0.04); color: var(--text-light); }
[data-theme="dark"] .feat-check.no { background: rgba(255,255,255,0.04); }
.feat-val { font-weight: 600; color: var(--text-secondary); }
.feat-val.good { color: var(--green); }
.feat-val.dim { color: var(--text-light); }

.section-row td {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 14px 16px 6px !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--navy-mid) !important;
  vertical-align: middle;
}

.savings-row td { border-bottom: none; padding-top: 14px; }
.savings-val {
  font-size: 16px;
  font-weight: 800;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}
.savings-val.zero { color: var(--text-light); }
.result-row td {
  padding-bottom: 24px !important;
  padding-top: 16px !important;
  border-top: 2px solid var(--green);
  background: rgba(50,205,50,0.04);
}
[data-theme="dark"] .result-row td { background: rgba(50,205,50,0.06); }
.result-row td:first-child {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 13px;
}
.tier-note {
  font-size: 10px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-light);
  margin-top: 2px;
}

/* ═══════════════════════
   LLS EXPLAINER
   ═══════════════════════ */
.lls-explainer {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
  margin-bottom: 4px;
  line-height: 1.5;
  padding: 0 2px;
  font-style: italic;
}
.lls-explainer strong {
  color: var(--text-secondary);
  font-style: normal;
}

/* ═══════════════════════
   ABOUT SECTION
   ═══════════════════════ */
.about-section {
  margin-top: 56px;
  margin-bottom: 56px;
  padding: 48px 40px;
  background: var(--navy);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  color: #fff;
  overflow: hidden;
}
.about-logo {
  height: 36px;
  width: auto;
  margin-bottom: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  filter: brightness(0) invert(1);
}
.about-header { margin-bottom: 36px; }
.about-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #F26522;
  background: rgba(242,101,34,0.15);
  padding: 5px 12px;
  margin-bottom: 16px;
}
.about-title {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 12px;
  color: #fff;
}
.about-sub {
  font-size: 15px;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto;
}
.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}
.about-stat {
  padding: 20px 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
}
.about-stat-value {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}
.about-stat-label {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  line-height: 1.4;
}
.about-highlights {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 24px;
}
.about-hl {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  gap: 8px;
}
.about-hl-icon {
  color: var(--orange);
  font-size: 8px;
}
.validated-section {
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.validated-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.4);
  margin-bottom: 20px;
}
.validated-logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  overflow: hidden;
}
.logo-item {
  padding: 10px 16px;
  background: #F5F7FA;
  border: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  min-width: 0;
  overflow: hidden;
}
.logo-item img {
  height: 28px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: 1;
  transition: var(--transition);
}
.logo-item:hover {
  background: rgba(255,255,255,0.18);
}
.logo-item:hover img {
  opacity: 1;
}

/* ═══════════════════════
   CTA BOTTOM BAR
   ═══════════════════════ */
.about-cta-wrap {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(calc(100% + 20px));
  z-index: 1000;
  width: 100%;
  max-width: 1200px;
  padding: 0 24px;
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
  pointer-events: none;
}
.about-cta-wrap.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: all;
}
.about-cta {
  background: var(--navy);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 8px 48px rgba(0,0,0,0.4);
}
.about-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 40px;
}
.about-cta-copy { flex: 1; }
.about-cta-title {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 3px;
}
.about-cta-checks {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}
.cta-check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  user-select: none;
  transition: color 0.2s ease;
}
.cta-check:hover { color: #fff; }
.cta-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid rgba(255,255,255,0.4);
  background: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: var(--transition);
}
.cta-check input[type="checkbox"]:checked {
  background: var(--orange);
  border-color: var(--orange);
}
.cta-check input[type="checkbox"]:checked::after {
  content: '\2713';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  color: white;
  font-weight: 700;
}
.cta-check:has(input:checked) span { color: #fff; }
.about-cta-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.about-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  background: var(--orange);
  color: white;
  border: none;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-transform: uppercase;
}
.about-cta-btn:hover {
  background: var(--orange-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(242,101,34,0.35);
}
.about-cta-btn-secondary {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  background: transparent;
  color: rgba(255,255,255,0.7);
  border: 1.5px solid rgba(255,255,255,0.2);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap;
}
.about-cta-btn-secondary:hover {
  border-color: rgba(255,255,255,0.4);
  color: #fff;
  background: rgba(255,255,255,0.05);
  transform: translateY(-2px);
}

/* ═══════════════════════
   QUIZ MODAL
   ═══════════════════════ */
.quiz-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.75);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.quiz-overlay.open { display: flex; }
.quiz-box {
  background: var(--card-bg);
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}
.quiz-header {
  position: relative;
  padding: 0;
}
.quiz-progress-wrapper {
  height: 4px;
  background: var(--navy-mid);
}
.quiz-progress-bar {
  height: 100%;
  width: 25%;
  background: var(--orange);
  transition: width 0.4s ease;
}
.quiz-close {
  position: absolute;
  top: 12px; right: 16px;
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}
.quiz-close:hover { color: var(--text-primary); }
.quiz-body { padding: 32px; }
.quiz-step { display: none; }
.quiz-step.active { display: block; }
.quiz-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 24px;
}

/* Industry grid */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ind-btn {
  padding: 14px 10px;
  background: var(--body-bg);
  border: 1.5px solid var(--border);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s, color 0.3s;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.ind-btn-icon {
  width: 28px;
  height: 28px;
  filter: invert(12%) sepia(60%) saturate(3000%) hue-rotate(200deg) brightness(40%) contrast(110%);
}
.ind-btn.selected .ind-btn-icon {
  filter: invert(42%) sepia(93%) saturate(1500%) hue-rotate(3deg) brightness(97%) contrast(96%);
}
[data-theme="dark"] .ind-btn-icon {
  filter: invert(80%) sepia(10%) saturate(200%) hue-rotate(180deg) brightness(110%);
}
[data-theme="dark"] .ind-btn.selected .ind-btn-icon {
  filter: invert(42%) sepia(93%) saturate(1500%) hue-rotate(3deg) brightness(97%) contrast(96%);
}
.ind-btn:hover {
  border-color: var(--orange);
  color: var(--text-primary);
}
.ind-btn:focus {
  outline: none;
}
.ind-btn:active {
  background: rgba(242,101,34,0.06);
}
.ind-btn.selected {
  border-color: var(--orange);
  background: rgba(242,101,34,0.06);
  color: var(--orange);
  font-weight: 600;
}
.ind-btn-full { grid-column: 1 / -1; }
.industry-bottom {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.industry-bottom .quiz-select {
  flex: 1;
}
.ind-btn-sp {
  flex: 1;
  flex-direction: row;
  gap: 6px;
  padding: 12px 14px;
  white-space: nowrap;
}

/* Fleet size selector blocks */
.fleet-size-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.fleet-size-btn {
  padding: 14px 10px;
  background: var(--body-bg);
  border: 1.5px solid var(--border);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
}
.fleet-size-btn:hover {
  border-color: var(--orange);
  color: var(--text-primary);
}
.fleet-size-btn.selected {
  border-color: var(--orange);
  background: rgba(242,101,34,0.06);
  color: var(--orange);
  font-weight: 700;
}

/* Quiz inputs */
.quiz-input-group {
  margin-bottom: 20px;
}
.quiz-input-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.quiz-input, .quiz-select {
  width: 100%;
  padding: 12px 14px;
  background: var(--body-bg);
  border: 1.5px solid var(--border);
  font-family: inherit;
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  transition: var(--transition);
}
.quiz-input:focus, .quiz-select:focus {
  border-color: var(--orange);
}
.quiz-select {
  cursor: pointer;
  appearance: auto;
}
.quiz-radio-group {
  display: flex;
  gap: 12px;
}
.quiz-radio {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
}
.quiz-radio input { accent-color: var(--orange); }

/* Telematics styled toggle options */
.telematics-group {
  background: var(--body-bg);
  border: 1px solid var(--border);
  padding: 16px 20px;
}
.telematics-group label {
  margin-bottom: 10px;
}
.telematics-options {
  display: flex;
  gap: 8px;
}
.tel-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
}
.tel-option:hover {
  border-color: var(--orange);
}
.tel-option:has(input:checked) {
  border-color: var(--orange);
  background: rgba(242,101,34,0.04);
  color: var(--orange);
  font-weight: 600;
}
.tel-option input {
  display: none;
}

/* Quiz actions */
.quiz-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
}
.quiz-btn-prev, .quiz-btn-next {
  padding: 12px 24px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
}
.quiz-btn-prev:hover, .quiz-btn-next:hover {
  border-color: var(--orange);
  color: var(--text-primary);
}
.quiz-btn-next {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
.quiz-btn-next:hover {
  background: var(--orange-hover);
}
.quiz-btn-submit {
  padding: 14px 32px;
  background: var(--orange);
  border: none;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: var(--transition);
  width: 100%;
}
.quiz-btn-submit:hover {
  background: var(--orange-hover);
}

/* Quiz banner */
.quiz-banner {
  background: var(--body-bg);
  border: 1px solid var(--border);
  padding: 16px 20px;
  margin-bottom: 24px;
  text-align: center;
}
.quiz-banner strong {
  display: block;
  font-size: 16px;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.quiz-banner span {
  font-size: 13px;
  color: var(--text-muted);
}

/* Quiz interest checkboxes */
.quiz-checks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.quiz-check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--body-bg);
  border: 1.5px solid var(--border);
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
}
.quiz-check-item:hover {
  border-color: var(--orange);
}
.quiz-check-item:has(input:checked) {
  border-color: var(--orange);
  background: rgba(242,101,34,0.04);
  color: var(--text-primary);
}
.quiz-check-item input {
  accent-color: var(--orange);
  flex-shrink: 0;
}

/* Quiz consent */
.quiz-consent {
  margin-top: 10px;
  margin-bottom: 24px;
}
.quiz-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
}
.quiz-checkbox input {
  margin-top: 2px;
  accent-color: var(--orange);
}

/* Quiz success */
.quiz-success {
  text-align: center;
  padding: 20px 0;
}
.quiz-success-icon {
  font-size: 48px;
  color: var(--green);
  margin-bottom: 16px;
}
.quiz-success h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.quiz-success p {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 20px;
  line-height: 1.5;
}
.quiz-success-summary {
  text-align: left;
  background: var(--body-bg);
  border: 1px solid var(--border);
  padding: 16px 20px;
  margin-bottom: 24px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.8;
}
.quiz-success-summary strong {
  color: var(--text-primary);
}

/* Country searchable dropdown */
.country-search-wrap {
  position: relative;
}
.country-dropdown {
  display: none;
  position: fixed;
  max-height: 200px;
  overflow-y: auto;
  background: var(--card-bg);
  border: 1.5px solid var(--orange);
  border-top: none;
  z-index: 2100;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.country-dropdown.open { display: block; }
.country-option {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s;
}
.country-option:hover, .country-option:active {
  background: rgba(242,101,34,0.06);
  color: var(--text-primary);
}
@media (max-width: 600px) {
  .country-dropdown { max-height: 45vh; }
  .country-option { padding: 14px 16px; font-size: 15px; min-height: 44px; }
}

/* intl-tel-input overrides */
.iti { width: 100%; }
.iti__tel-input {
  width: 100%;
  padding: 12px 14px 12px 52px;
  background: var(--body-bg);
  border: 1.5px solid var(--border);
  font-family: inherit;
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  transition: var(--transition);
}
.iti__tel-input:focus { border-color: var(--orange); }

/* intl-tel-input dark mode */
[data-theme="dark"] .iti__dropdown-content {
  background: var(--card-bg);
  border-color: var(--border);
  color: var(--text-primary);
}
[data-theme="dark"] .iti__search-input {
  background: var(--body-bg);
  color: var(--text-primary);
  border-color: var(--border);
}
[data-theme="dark"] .iti__country.iti__highlight {
  background: rgba(242,101,34,0.1);
}
[data-theme="dark"] .iti__country-name,
[data-theme="dark"] .iti__dial-code {
  color: var(--text-secondary);
}
[data-theme="dark"] .iti__selected-dial-code {
  color: var(--text-primary);
}

/* Mobile quiz */
@media (max-width: 600px) {
  .quiz-overlay { padding: 0; align-items: stretch; }
  .quiz-box {
    max-width: 100%;
    max-height: 100dvh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }
  .quiz-body {
    padding: 24px 16px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  .quiz-step.active {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .quiz-title { font-size: 18px; margin-bottom: 20px; }
  .industry-grid { grid-template-columns: repeat(2, 1fr); }
  .quiz-radio-group { flex-direction: column; }
  .quiz-actions {
    flex-direction: column;
    margin-top: auto;
    padding-top: 20px;
  }
  .quiz-btn-prev, .quiz-btn-next { width: 100%; text-align: center; min-height: 48px; }
  .quiz-btn-submit { min-height: 52px; font-size: 15px; }
  .quiz-close { top: 8px; right: 12px; width: 44px; height: 44px; font-size: 28px; display: flex; align-items: center; justify-content: center; }
  .quiz-input, .quiz-select { padding: 14px 16px; font-size: 16px; }
  .iti__tel-input { padding: 14px 16px 14px 52px; font-size: 16px; }
  .fleet-size-grid { grid-template-columns: repeat(2, 1fr); }
  .fleet-size-btn { min-height: 48px; font-size: 15px; }
  .ind-btn { min-height: 48px; padding: 12px 8px; font-size: 12px; }
  .ind-btn-icon { width: 24px; height: 24px; }
  .telematics-group { padding: 14px 16px; }
  .tel-option { min-height: 48px; font-size: 15px; }
  .quiz-interest-label { min-height: 44px; display: flex; align-items: center; }
  .quiz-checks-grid { grid-template-columns: 1fr; gap: 6px; }
  .quiz-check-item { padding: 12px 14px; font-size: 13px; min-height: 44px; }
  .quiz-consent span { font-size: 12px; }
}

/* ═══════════════════════
   FOOTER
   ═══════════════════════ */
.footer-note {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 32px;
  line-height: 1.6;
  padding-bottom: 24px;
}
.objects-banner {
  width: 100%;
  display: flex;
  justify-content: center;
  background: var(--body-bg);
  overflow: hidden;
}
.objects-banner img {
  max-width: 1000px;
  width: 90%;
  height: auto;
  object-fit: contain;
}

.site-footer {
  background: var(--navy);
  padding: 0;
  border-top: 1px solid var(--border);
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}
.footer-inner a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-inner a:hover { color: #fff; }
.footer-sep { color: rgba(255,255,255,0.3); margin: 0 4px; }

/* ═══════════════════════
   METRIC TOOLTIPS
   ═══════════════════════ */
.metric-card { position: relative; }
.metric-info {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--body-bg);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-light);
  cursor: help;
  z-index: 2;
  transition: var(--transition);
}
.metric-info:hover { color: var(--orange); border-color: var(--orange); }
.metric-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  right: -4px;
  width: 220px;
  background: var(--navy);
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 20;
  pointer-events: none;
  text-align: left;
}
.metric-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 12px;
  border: 5px solid transparent;
  border-top-color: var(--navy);
}
.metric-info:hover .metric-tooltip,
.metric-info:focus .metric-tooltip,
.metric-info.active .metric-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


/* Hide mobile-only elements on desktop */
.mobile-calc-cta { display: none; }
@media (max-width: 600px) { .mobile-calc-cta { display: block; } }

/* ═══════════════════════
   ANIMATIONS
   ═══════════════════════ */
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
.pulse { animation: pulse 0.3s ease; }
/* Animated counter flash */
@keyframes counterFlash { 0% { opacity: 0.6; } 100% { opacity: 1; } }
.counter-animating { animation: counterFlash 0.4s ease; }

/* ═══════════════════════
   TABLET (<=900px)
   ═══════════════════════ */
@media (max-width: 900px) {
  /* Stacked layout: reorder so results + CTA come after calculate overlay is clear */
  .overlay-cta-text p { display: none; }
  .overlay-cloud { padding: 24px 20px; }
  .overlay-cloud h2 { font-size: 18px; }
}

/* ═══════════════════════
   MOBILE (<=600px)
   ═══════════════════════ */
@media (max-width: 600px) {
  /* --- Base & typography --- */
  .container { padding: 0 12px 40px; }
  .page-header { padding: 24px 0 20px; margin-bottom: 0; }
  .page-header h1 { font-size: 24px; line-height: 1.2; }
  .page-header p { font-size: 13px; max-width: 300px; }

  /* --- How it works — horizontal scroll cards --- */
  .how-it-works {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 28px;
  }
  .hiw-card { padding: 16px 14px; text-align: center; }
  .hiw-icon { width: 36px; height: 36px; margin: 0 auto 10px; }
  .hiw-icon img, .hiw-icon .icon-mask { width: 24px; height: 24px; }
  .hiw-card h3 { font-size: 14px; margin-bottom: 4px; }
  .hiw-card p { font-size: 12px; line-height: 1.5; }

  /* --- Industries --- */
  .industries { margin-bottom: 24px; }
  .industries-row { gap: 6px; }
  .ind-tag { font-size: 12px; padding: 6px 12px; }
  .ind-tag .ind-icon { width: 22px; height: 22px; }

  /* --- Calculator grid --- */
  .calc-grid { gap: 16px; }
  .panel { padding: 18px 14px; }

  /* --- Sliders: big touch targets --- */
  input[type="range"] { height: 10px; border-radius: 5px; }
  input[type="range"]::-webkit-slider-thumb { width: 36px; height: 36px; }
  input[type="range"]::-moz-range-thumb { width: 36px; height: 36px; }
  .input-group { margin-bottom: 8px; }
  .input-label span { font-size: 13px; }
  .input-label .value-display { font-size: 18px; }

  /* --- Hardware selector: tap-friendly --- */
  .hw-option, .addon-option, .platform-option, .report-option { padding: 14px 12px; gap: 10px; min-height: 60px; }
  .hw-img, .hw-img-none { width: 44px; height: 44px; }
  .hw-option .hw-name, .addon-option .hw-name, .report-option .hw-name { font-size: 13px; }
  .hw-option .hw-meta, .addon-option .hw-meta, .report-option .hw-meta { font-size: 11px; }
  .addon-option .checkbox, .report-option .checkbox { width: 22px; height: 22px; }
  .platform-option .radio-dot { width: 22px; height: 22px; }

  /* --- Calculate overlay: mobile-optimized --- */
  .results-overlay { padding-top: 40px; }
  .calculate-btn-wrap { position: static; }
  .overlay-cloud { padding: 24px 16px; max-width: 100%; }
  .overlay-cloud h2 { font-size: 18px; }
  .overlay-cta-text { margin-bottom: 16px; }
  .overlay-cta-text p { display: none; }
  .calculate-btn { padding: 16px 32px; font-size: 15px; width: 100%; }

  /* --- Hero metrics: 2x2, compact --- */
  .hero-metrics { gap: 8px; }
  .metric-card { padding: 12px 10px; }
  .metric-card .metric-value { font-size: 18px; }
  .metric-card.highlight .metric-value { font-size: 18px; }
  .metric-card .metric-label { font-size: 10px; letter-spacing: 0.8px; }
  .metric-card .metric-sub { font-size: 11px; }

  /* --- Waterfall bar --- */
  .waterfall-panel { padding: 14px 12px; }
  .stacked-bar { height: 36px; }
  .stacked-segment span { font-size: 9px; }
  .stacked-bar-summary { font-size: 12px; gap: 10px; }
  .waterfall-legend { gap: 8px; }
  .legend-item { font-size: 11px; }
  .waterfall-details { grid-template-columns: 1fr; gap: 0; }
  .detail-item { padding: 8px 12px; }
  .detail-item .detail-label { font-size: 11px; }
  .detail-item .detail-value { font-size: 13px; }

  .results-area { min-width: 0; overflow: hidden; position: static !important; top: auto !important; }

  /* --- Comparison table: scrollable with sticky first col --- */
  .compare-panel { border-radius: var(--radius-sm); overflow: hidden; max-width: 100%; }
  .compare-panel > div { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .compare-panel .panel-title { padding: 14px 14px 10px; font-size: 12px; }
  .compare-table { min-width: 520px; }
  .compare-table col.col-solution { width: 24%; }
  .compare-table td { padding: 8px 8px; font-size: 11px; }
  .compare-table th { padding: 8px 8px; font-size: 9px; }
  .compare-table td:first-child,
  .compare-table th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--card-bg);
    box-shadow: 2px 0 8px rgba(0,0,0,0.1);
    min-width: 80px;
    font-size: 11px;
    padding-left: 10px;
  }
  .compare-table th:first-child { z-index: 3; }
  .compare-table tr.active-row td:first-child { background: #fef6f1; }
  [data-theme="dark"] .compare-table tr.active-row td:first-child { background: #2a1e14; }

  /* --- Tier table: mobile scroll with sticky col --- */
  .tiers-section { margin-top: 28px; }
  .tiers-title { font-size: 11px; margin-bottom: 14px; }
  .tiers-table { min-width: 580px; }
  .tiers-table th:first-child,
  .tiers-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--card-bg);
    box-shadow: 2px 0 8px rgba(0,0,0,0.1);
    min-width: 110px;
    font-size: 11px;
    padding-left: 10px;
  }
  .tiers-table thead th:first-child { background: var(--card-bg); z-index: 3; }
  .section-row td {
    position: static !important;
    font-size: 8px !important;
    padding: 8px 8px 3px !important;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
  .tiers-table th, .tiers-table td { padding: 8px 8px; font-size: 12px; }
  .tiers-table thead th { padding: 14px 8px 12px; min-width: 90px; }
  .hide-mobile { display: none; }
  .th-img, .th-img-none { width: 56px; height: 56px; margin-bottom: 6px; }
  .th-name { font-size: 12px; }
  .th-sub { font-size: 9px; }
  .th-price { font-size: 13px; }

  /* --- About section --- */
  .about-section { margin-top: 32px; margin-bottom: 32px; padding: 24px 16px; }
  .about-logo { height: 28px; margin-bottom: 14px; }
  .about-badge { font-size: 10px; padding: 5px 12px; margin-bottom: 14px; }
  .about-title { font-size: 20px; margin-bottom: 10px; }
  .about-sub { font-size: 13px; line-height: 1.55; }
  .about-header { margin-bottom: 28px; }
  .about-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 24px; }
  .about-stat { padding: 14px 10px; }
  .about-stat-value { font-size: 22px; }
  .about-stat-label { font-size: 11px; }
  .about-highlights { flex-direction: column; align-items: flex-start; gap: 8px; }
  .about-hl { font-size: 12px; text-align: left; line-height: 1.4; }
  .about-hl-icon { font-size: 7px; }

  /* --- Featured logos: contained, no overflow --- */
  .validated-section { margin-top: 28px; padding-top: 24px; }
  .validated-title { font-size: 10px; margin-bottom: 14px; }
  .validated-logos { grid-template-columns: repeat(2, 1fr); gap: 8px; overflow: hidden; }
  .logo-item { padding: 10px 8px; min-width: 0; }
  .logo-item img { height: 22px; max-width: 100%; opacity: 1; }

  /* --- CTA bar: mobile-first, simplified for conversion --- */
  .about-cta-wrap { bottom: 0; padding: 0; z-index: 1000; }
  .about-cta { border: none; border-top: 1px solid rgba(255,255,255,0.15); }
  .about-cta-inner {
    flex-direction: column;
    text-align: center;
    gap: 8px;
    padding: 10px 12px;
  }
  .about-cta-title { font-size: 13px; margin-bottom: 0; }
  .about-cta-checks { display: none; }
  .about-cta-actions { flex-direction: row; gap: 8px; width: 100%; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .about-cta-btn {
    flex: 2;
    width: auto;
    justify-content: center;
    text-align: center;
    font-size: 13px;
    padding: 14px 16px;
    min-height: 48px;
  }
  .about-cta-btn-secondary {
    flex: 1;
    width: auto;
    justify-content: center;
    text-align: center;
    font-size: 11px;
    padding: 12px 10px;
    min-height: 48px;
  }

  /* --- Header --- */
  .site-header { padding: 0 12px; }
  .header-inner { height: 48px; }
  .header-logo img { height: 20px; }
  .header-right { gap: 8px; }
  .theme-toggle-btn { display: none; }
  .header-cta { padding: 7px 12px; font-size: 10px; min-height: 32px; display: inline-flex; align-items: center; letter-spacing: 0.3px; }

  /* --- Footer --- */
  .footer-note { font-size: 12px; padding-bottom: 24px; }
  .footer-inner { padding: 16px 16px 100px; font-size: 11px; }

  /* --- Objects banner --- */
  .objects-banner img { width: 100%; }

  /* --- Scroll hint for tables --- */
  .tiers-table-wrap { position: relative; }
  .tiers-table-wrap::after {
    content: 'Swipe to compare →';
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 10px;
    color: var(--text-light);
    pointer-events: none;
    opacity: 0.8;
    animation: fadeHint 3s ease forwards;
  }
  @keyframes fadeHint { 0% { opacity: 0.8; } 70% { opacity: 0.8; } 100% { opacity: 0; } }

  /* --- Metric tooltips: full-width below card on mobile --- */
  .metric-info { width: 22px; height: 22px; font-size: 11px; position: static; }
  .metric-card { position: relative; }
  .metric-tooltip {
    position: absolute;
    bottom: auto;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    z-index: 50;
    padding: 10px 12px;
    font-size: 12px;
    margin-top: 4px;
  }
  .metric-tooltip::after { display: none; }

  /* --- Mobile CTA block + sticky button --- */
  .mobile-calc-cta {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--card-bg);
    text-align: center;
    padding: 16px 14px 0;
    margin-top: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  }
  .mobile-calc-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 6px;
  }
  .mobile-calc-sub {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 14px;
  }
  .mobile-calc-btn {
    display: block;
    width: 100%;
    margin-bottom: 16px;
    padding: 14px 16px;
    background: var(--orange);
    color: #fff;
    border: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(242,101,34,0.3);
    transition: var(--transition);
  }
  .mobile-calc-btn:active { background: var(--orange-hover); transform: scale(0.98); }

  /* Bottom padding for CTA bar */
  .footer-inner { padding-bottom: 100px; }


  /* --- Touch improvements --- */
  * { -webkit-tap-highlight-color: transparent; }
  button, a, .hw-option, .addon-option, .platform-option, .report-option, .ind-btn, .fleet-size-btn, .tel-option {
    -webkit-touch-callout: none;
  }
}