/* ===================================================================
   STYLE.CSS — Container Rental Landing Page
   Organization: :root → resets → layout → components (HTML order) → media queries
   =================================================================== */

/* ===== 1. DESIGN TOKENS ===== */
:root {
  /* Colors */
  --color-bg:               #FFFFFF;
  --color-bg-alt:           #F7F8F6;
  --color-surface:          #FFFFFF;
  --color-surface-border:   #E7E9E5;
  --color-text-primary:     #1A1F1B;
  --color-text-secondary:   #5C645E;
  --color-primary:          #2F7A3E;
  --color-primary-hover:    #256932;
  --color-primary-light:    #EAF5EC;
  --color-success-bg:       #EAF5EC;
  --color-danger:           #D9482B;
  --color-danger-bg:        #FBEAE7;
  --color-border:           #E2E5E0;
  --color-footer-bg:        #F2F3F0;
  --color-selected-bg:      #EAF5EC;
  --color-selected-border:  #2F7A3E;

  /* Typography */
  --font-family:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-base:         16px;
  --line-height-base:       1.5;

  /* Font sizes */
  --text-xs:    13px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-lg:    18px;
  --text-xl:    20px;
  --text-2xl:   24px;
  --text-3xl:   28px;
  --text-4xl:   36px;

  /* Spacing */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;

  /* Border radius */
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.10);

  /* Layout */
  --container-max:  1160px;
  --container-px:   24px;
  --hero-shift:     80px;

  /* Component */
  --header-height:  64px;
  --transition:     150ms ease;
}

/* ===== 2. RESETS & BASE ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  font-size: var(--text-base);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  font-weight: 700;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

ul, ol {
  list-style: none;
}

img, svg {
  display: block;
  max-width: 100%;
}

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

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

[hidden] {
  display: none !important;
}

/* ===== 3. LAYOUT UTILITIES ===== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.section-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.section-intro {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  max-width: 640px;
  margin-bottom: var(--space-8);
}

.icon {
  flex-shrink: 0;
  stroke: currentColor;
}

.icon--primary {
  color: var(--color-primary);
}

/* img-based SVG icons in the header — keeps flex layout identical to inline SVG */
.icon--header {
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

/* ===== 4. COMPONENTS (in HTML section order) ===== */

/* --- Button --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
  white-space: nowrap;
  cursor: pointer;
}

.btn--primary {
  background-color: var(--color-primary);
  color: #fff;
  border: 1.5px solid var(--color-primary);
  position: relative;
  overflow: hidden;
}

.btn--primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  text-decoration: none;
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(47, 122, 62, 0.3);
}

.btn--primary:focus-visible {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(47, 122, 62, 0.3);
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.btn--secondary {
  background-color: transparent;
  color: var(--color-text-primary);
  border: 1.5px solid var(--color-border);
}

.btn--secondary:hover {
  border-color: var(--color-text-secondary);
  text-decoration: none;
}

.btn--lg {
  padding: 14px var(--space-8);
  font-size: var(--text-base);
}

/* --- Badge --- */
.badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  text-transform: uppercase;
}

/* --- Info banner --- */
.info-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.info-banner--neutral {
  background-color: var(--color-bg-alt);
  color: var(--color-text-primary);
  border: 1.5px solid var(--color-surface-border);
}

.info-banner--success {
  background-color: var(--color-success-bg);
  color: var(--color-text-primary);
}

.info-banner--warning {
  background-color: #FFF8E6;
  color: var(--color-text-primary);
  border: 1px solid #F5D87A;
}

.info-banner--danger {
  background-color: var(--color-danger-bg);
  color: var(--color-text-primary);
  border: 1px solid rgba(217, 72, 43, 0.18);
}

.icon--warning { color: #B45309; }
.icon--danger  { color: var(--color-danger); }

.zone-feedback {
  padding: var(--space-4) var(--space-5);
}

.zone-feedback__icon {
  display: flex;
  flex-shrink: 0;
}

.zone-reference {
  margin-top: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.zone-reference__title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2);
}

.zone-reference__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.zone-reference__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.zone-reference__header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.zone-reference__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.zone-reference__label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-primary);
}

.zone-reference__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-left: 14px;
}

.zone-reference__pill {
  font-size: 11px;
  color: var(--color-text-secondary);
  background-color: var(--color-bg-alt);
  border-radius: 100px;
  padding: 2px 8px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.15s, color 0.15s;
}

.zone-reference__pill:hover {
  background-color: var(--color-primary);
  color: #fff;
}

.info-banner--inclusion {
  display: inline-flex;
  width: fit-content;
  flex-grow: 0;
  flex-shrink: 0;
  white-space: nowrap;
  gap: 6px;
  background-color: var(--color-success-bg);
  color: var(--color-text-primary);
  padding: 6px 9px;
  font-size: 12px;
}

@media (max-width: 767px) {
  .info-banner--inclusion {
    width: auto;
    max-width: 100%;
    white-space: normal;
  }
}

.info-banner p {
  margin: 0;
  line-height: var(--line-height-base);
}

.info-banner__list {
  margin: 0;
  padding-left: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  line-height: var(--line-height-base);
}

/* --- HEADER --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.site-header__logo {
  flex-shrink: 0;
  text-decoration: none;
}

.site-header__brand {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text-primary);
}


.site-header__nav {
  display: none;
  align-items: center;
  gap: var(--space-5);
  margin-left: auto;
}

.site-header__contact-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
}

.site-header__contact-link:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.site-header__whatsapp {
  color: #25D366;
}

.site-header__whatsapp:hover {
  color: #1ebe5b;
}

.site-header__cta {
  margin-left: 0;
  flex-shrink: 0;
}

.site-header__phone-mob {
  display: flex;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
}

/* --- HERO --- */
.hero {
  padding-top: var(--space-4);
  padding-bottom: var(--space-12);
  background-color: var(--color-bg);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

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

.hero__eyebrow {
  margin-bottom: var(--space-1);
}

.hero__headline {
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-text-primary);
}

.hero__subheadline {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.hero__bullets {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.hero__bullet {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.hero__trust-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.hero__trust-sep {
  color: var(--color-border);
}

.hero__cta-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

.hero__microcopy {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.hero__visual {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.hero__figure {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.hero__img-wrap {
  position: relative;
  display: block;
  max-width: 340px;
  margin-inline: auto;
  transform: scale(1.03);
  transform-origin: center center;
  transition: transform 0.315s ease-out;
}

.hero__img-wrap:hover {
  transform: scale(1.065);
}

.hero__container-img {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  filter: drop-shadow(0 20px 24px rgba(26, 31, 27, 0.15));
}

.hero__container-img--lights {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

@keyframes headlights-double-flash {
  0%   { opacity: 0; }
  6%   { opacity: 0.6; }
  20%  { opacity: 0.6; }
  28%  { opacity: 0; }
  46%  { opacity: 0; }
  54%  { opacity: 0.6; }
  68%  { opacity: 0.6; }
  76%  { opacity: 0; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__img-wrap:hover .hero__container-img--lights {
    animation: headlights-double-flash 900ms ease-in-out both;
  }
}

.hero__container-img--lights.is-flashing {
  animation: headlights-double-flash 900ms ease-in-out both;
}


.hero__decal {
  position: absolute;
  top: 11%;
  left: 7%;
  width: 45%;
  text-align: center;
  transform: translateY(-50%);
  font-size: clamp(9px, 2vw, 11px);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.92);
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}

.hero__img-caption {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  text-align: center;
  letter-spacing: 0.02em;
}

/* --- CALCULATOR --- */
.calculator {
  padding-top: calc(var(--space-16) * 0.7);
  padding-bottom: var(--space-10);
  background-color: var(--color-bg-alt);
  scroll-margin-top: var(--header-height);
}

.calculator__header {
  text-align: center;
  margin-bottom: var(--space-10);
}

.calculator__title {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-3);
}

.calculator__subtitle {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  max-width: 560px;
  margin-inline: auto;
}

.calculator__subtitle span {
  display: block;
}

/* Step progress bar */
.step-progress {
  margin-bottom: var(--space-10);
}

.step-progress__list {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  counter-reset: step;
}

.step-progress__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  max-width: 120px;
  position: relative;
}

.step-progress__step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 16px;
  left: calc(50% + 16px);
  right: calc(-50% + 16px);
  height: 2px;
  background-color: var(--color-border);
}

.step-progress__step--active::after,
.step-progress__step--done::after {
  background-color: var(--color-primary);
}

.step-progress__circle {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 600;
  background-color: var(--color-bg);
  border: 2px solid var(--color-border);
  color: var(--color-text-secondary);
  position: relative;
  z-index: 1;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.step-progress__step--active .step-progress__circle {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.step-progress__step--done .step-progress__circle {
  background-color: var(--color-bg);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.step-progress__step--done .step-progress__circle::before {
  content: '✓';
  font-size: 13px;
}

.step-progress__step--done .step-progress__circle > * {
  display: none;
}

.step-progress__label {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-align: center;
  letter-spacing: 0.02em;
}

.step-progress__step--active .step-progress__label {
  color: var(--color-primary);
  font-weight: 600;
}

/* Calculator body layout */
.calculator__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

@media (max-width: 767px) {
  .calculator__steps { order: 1; }
  .order-summary     { order: 2; }
}

/* Order summary */
.order-summary {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.order-summary__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.order-summary__title {
  font-size: var(--text-base);
  font-weight: 600;
}

.order-summary__empty {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}


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

.order-summary__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.order-summary__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.order-summary__section-heading {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.order-summary__change-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--text-xs);
  font-family: inherit;
  font-weight: 500;
  color: var(--color-primary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  flex-shrink: 0;
}

.order-summary__divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0;
}

.order-summary__dims-value {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-text-secondary);
  letter-spacing: 0.01em;
}

.order-summary__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.order-summary__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-sm);
}

.order-summary__row dt {
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.order-summary__row dd {
  font-weight: 500;
  text-align: right;
}

.order-summary__row--price dt,
.order-summary__row--price dd {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text-primary);
}

.order-summary__row--total dt,
.order-summary__row--total dd {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-primary);
}

/* Calc steps */
.calculator__steps {
  flex: 1;
}

.calc-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.calc-step__label {
  font-size: var(--text-xl);
  font-weight: 600;
  margin: 0;
}

.calc-step__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

@media (min-width: 768px) {
  .calc-step__header {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--space-4);
  }
  .calc-step__header .calc-step__label {
    flex-shrink: 0;
    white-space: nowrap;
  }
  .calc-step__header .info-banner--inclusion {
    margin-left: auto;
  }
}

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

.calc-step__nav {
  display: flex;
  gap: var(--space-3);
  padding-top: var(--space-4);
}

/* ===== Calendar widget (D26) ===== */

.calendar-widget {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background-color: var(--color-surface);
  width: 358px;
  max-width: 100%;
  margin-inline: auto;
}
.calendar-widget--error {
  border-color: var(--color-danger, #D9482B);
}

.calendar-widget__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.calendar-widget__nav {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  cursor: pointer;
  font-size: var(--text-xs);
  color: var(--color-text-primary);
  line-height: 1.6;
  transition: background-color 0.15s;
}
.calendar-widget__nav:hover:not(:disabled) {
  background-color: var(--color-bg-alt);
}
.calendar-widget__nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.calendar-widget__month-label {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.calendar-widget__weekday-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 2px;
}
.calendar-widget__weekday-row span {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  padding: 2px 0;
  letter-spacing: 0.03em;
}

.calendar-widget__days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 44px;
  column-gap: 4px;
  row-gap: 4px;
}

.calendar-widget__day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 18px;
  color: var(--color-text-primary);
  border: 1.5px solid transparent;
  background: none;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
  line-height: 1;
  width: 100%;
  padding: 0;
  margin: 0;
}
.calendar-widget__day:hover:not(:disabled) {
  background-color: var(--color-bg-alt);
}
.calendar-widget__day--empty {
  cursor: default;
  visibility: hidden;
}
.calendar-widget__day:disabled {
  color: var(--color-text-secondary);
  cursor: default;
  opacity: 0.38;
}
.calendar-widget__day--weekend:not(:disabled) {
  color: var(--color-text-secondary);
}
.calendar-widget__day--delivery {
  /* ordinary included-day look per D27 — no fill; dot via --has-price class */
}
.calendar-widget__day--collection {
  border-color: var(--color-primary);
  background-color: transparent;
  color: var(--color-primary);
  font-weight: 600;
}
.calendar-widget__day--collection:hover {
  background-color: var(--color-bg-alt);
}
.calendar-widget__day--in-range:not(.calendar-widget__day--collection) {
  background-color: var(--color-bg-alt);
}

.calendar-widget__day--has-price::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color-primary);
  opacity: 0.55;
}
.calendar-widget__day--extra.calendar-widget__day--has-price::after {
  background-color: var(--color-danger, #D9482B);
  opacity: 0.55;
}

.calendar-widget__collection-hint {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.calendar-widget__collection-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-primary);
  margin: 0 0 4px;
}
.calendar-widget__optional {
  font-weight: 400;
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
}
.calendar-widget__collection-helper {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
}

.calendar-widget__day-info {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.cal-info__hint {
  color: var(--color-text-secondary);
  font-style: italic;
}

/* Container group */
.container-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.container-group__heading {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.container-group__heading-icon {
  height: 48px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.container-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

/* Container card */
.container-card {
  background-color: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}

.container-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.container-card--selected {
  border-color: var(--color-selected-border);
  background-color: var(--color-selected-bg);
  box-shadow: 0 0 0 1px var(--color-selected-border);
}

.container-card__icon {
  color: var(--color-text-secondary);
}

.container-card__icon img {
  height: 36px;
  width: auto;
  display: block;
}

.container-card--selected .container-card__icon {
  color: var(--color-primary);
}

.container-card__volume {
  font-size: var(--text-2xl);
  font-weight: 700;
}

.container-card__use-case {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
}

.container-card__description {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.container-card__dimensions {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.dim-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.dim-chip + .dim-chip::before {
  content: '·';
  margin: 0 4px;
  color: var(--color-text-secondary);
}

.container-card__price {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: auto;
  padding-top: var(--space-2);
}

.container-card__price strong {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text-primary);
}

.container-card__price-vat {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.container-card__cta {
  width: 100%;
  margin-top: var(--space-2);
}

/* Form fields */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-field__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}

.form-field__label--checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  font-weight: 400;
}

.form-field__input {
  width: 100%;
  padding: 10px var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

.form-field__input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(47, 122, 62, 0.12);
}

.form-field__input.is-invalid {
  border-color: var(--color-danger);
}

.form-field__input.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(217, 72, 43, 0.12);
}

.form-field__textarea {
  resize: vertical;
  min-height: 90px;
}

.form-field__hint {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.form-field__error {
  font-size: var(--text-xs);
  color: var(--color-danger);
  display: none;
}

.form-field__error.is-visible {
  display: block;
}

.form-field__optional {
  font-weight: 400;
  color: var(--color-text-secondary);
}

/* Address row (street + house number side by side) */
.form-field-group-heading {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

/* Two-column field pair (business form layout) */
.form-fields-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

#business-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

#contact-pair {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

#contact-pair.form-fields-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

@media (max-width: 767px) {
  .form-fields-pair,
  #contact-pair.form-fields-pair {
    grid-template-columns: 1fr;
  }
}

/* Billing address toggle */
/* Consent checkbox (Step 4) */
.form-field--consent {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.consent-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
  cursor: pointer;
}

.consent-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.consent-link {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.billing-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-primary);
}

.billing-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.billing-address-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-left: var(--space-1);
  border-left: 2px solid var(--color-border);
  padding-top: var(--space-2);
}

.billing-address-fields--collapsed {
  display: none;
}

/* Customer type tab switcher */
.customer-type {
  margin-bottom: var(--space-2);
}

.customer-type__tabs {
  display: flex;
  gap: 0;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.customer-type__tab {
  flex: 1;
  padding: 10px var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  background-color: var(--color-bg);
  border: none;
  border-right: 1px solid var(--color-border);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}

.customer-type__tab:last-child {
  border-right: none;
}

.customer-type__tab--active {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 600;
}

/* Lead form */
.lead-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.lead-form__reassurance {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.lead-form__submit {
  width: 100%;
}

.lead-form__alt-contact {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-align: center;
}

.lead-form__back {
  align-self: flex-start;
}

.lead-form__confirmation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-10) var(--space-8);
  text-align: center;
  background: var(--color-success-bg);
  border-radius: var(--radius-lg);
  max-width: 520px;
  margin: 0 auto;
}

.lead-form__confirmation h3 {
  font-size: var(--text-xl);
}

.lead-form__confirmation p {
  color: var(--color-text-secondary);
  max-width: 380px;
}

.icon--success circle {
  stroke-width: 0.75;
}

@keyframes confirmation-pop {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
  .lead-form__confirmation {
    animation: confirmation-pop 450ms ease-out both;
  }
}

.lead-form__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

.lead-form__error p {
  color: var(--color-text-secondary);
}

/* --- BENEFITS --- */
.benefits {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  background-color: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
}

.benefits .section-title {
  text-align: center;
  margin-bottom: var(--space-10);
}

/* Icon text grid (shared: Benefits + Use Cases) */
.icon-text-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.icon-text-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.icon-text-row__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary-light);
  border-radius: var(--radius-md);
  color: var(--color-primary);
}

.icon-text-row__body {
  flex: 1;
}

.icon-text-row__heading {
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.icon-text-row__text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.55;
}

/* --- HOW IT WORKS --- */
.how-it-works {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-border);
}

.how-it-works .section-title {
  text-align: center;
  margin-bottom: var(--space-10);
}

.how-steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.how-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  width: 100%;
  max-width: 500px;
}

.how-step__connector {
  width: 2px;
  height: var(--space-8);
  background-color: var(--color-bg-alt);
  margin-left: 24px;
}

.how-step__number {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
  font-weight: 700;
  position: relative;
  z-index: 1;
}

.how-step__body {
  padding-top: var(--space-2);
}

.how-step__heading {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.how-step__text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.55;
}

/* --- REPEAT CTA (D21) --- */
.repeat-cta {
  padding-top: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-bg);
}

.repeat-cta__inner {
  display: flex;
  justify-content: center;
}

.repeat-cta .btn--primary {
  font-size: 17px;
  padding: 12px 24px;
}

/* --- PRICE TRANSPARENCY --- */
.price-transparency {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
  background-color: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
}

.price-transparency__banner {
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-8);
  background-color: var(--color-bg);
  border-color: var(--color-border);
}

.price-transparency__divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-2) 0 0;
}

.price-transparency__inclusion {
  white-space: normal;
  width: auto;
}

.price-factors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.price-factor {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
}

@media (max-width: 767px) {
  .price-factors {
    flex-direction: column;
    gap: var(--space-3);
  }
}

/* --- WASTE RULES --- */
.waste-rules {
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-border);
}

.waste-rules__back {
  margin-top: var(--space-6);
  text-align: center;
}

.waste-rules__back-link {
  display: none;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
}

.waste-rules__back-link.is-visible {
  display: inline-flex;
}

.waste-rules__back-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.waste-rules .section-intro {
  margin-bottom: var(--space-8);
}

.waste-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.waste-card {
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1.5px solid transparent;
}

.waste-card--allowed {
  background-color: var(--color-success-bg);
  border-color: #c3e6cb;
}

.waste-card--prohibited {
  background-color: var(--color-danger-bg);
  border-color: #f5c6cb;
}

.waste-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.waste-card--allowed .waste-card__header {
  color: var(--color-primary);
}

.waste-card--prohibited .waste-card__header {
  color: var(--color-danger);
}

.waste-card__title {
  font-size: var(--text-base);
  font-weight: 600;
}

.waste-card__intro {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.waste-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.waste-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}

.waste-item svg {
  flex-shrink: 0;
}

.waste-card--allowed .waste-item svg {
  color: var(--color-primary);
}

.waste-card--prohibited .waste-item svg {
  color: var(--color-danger);
}

.waste-card__show-more {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-danger);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

.waste-card--allowed .waste-card__show-more {
  color: var(--color-primary);
}

/* --- USE CASES (D4 — same pattern as Benefits) --- */
.use-cases {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
  background-color: var(--color-bg);
}

.use-cases .section-title {
  text-align: center;
  margin-bottom: var(--space-10);
}

/* --- FAQ --- */
.faq {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
  background-color: var(--color-bg-alt);
}

.faq .section-title {
  margin-bottom: var(--space-8);
}

.faq-list {
  max-width: 720px;
  border-top: 1px solid var(--color-border);
}

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

.faq-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  transition: color var(--transition);
}

.faq-item__trigger:hover {
  color: var(--color-primary);
}

.faq-item__icon {
  flex-shrink: 0;
  transition: transform var(--transition);
  color: var(--color-text-secondary);
}

.faq-item__trigger[aria-expanded="true"] .faq-item__icon {
  transform: rotate(45deg);
}

.faq-item__answer {
  padding-bottom: var(--space-5);
}

.faq-item__answer p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* --- FINAL CTA BANNER (D13) --- */
.final-cta {
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-border);
}

.final-cta__inner {
  max-width: 600px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.final-cta__headline {
  font-size: var(--text-2xl);
}

.final-cta__body {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin-top: calc(-1 * var(--space-2));
}

/* --- CONSULTANT BLOCK --- */
.consultant {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
  background-color: var(--color-bg-alt);
}

.consultant-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}

.consultant-card__photo {
  flex-shrink: 0;
}

.consultant-card__photo-placeholder {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-full);
  background-color: var(--color-surface-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
}

.consultant-card__headline {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-3);
}

.consultant-card__intro {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.consultant-card__availability {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
}

.consultant-card__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}

.consultant-card__actions .btn:hover,
.consultant-card__actions .btn:focus-visible {
  transform: translateY(-2px);
}

.consultant-card__actions .btn--secondary:hover,
.consultant-card__actions .btn--secondary:focus-visible {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.10);
}

@media (prefers-reduced-motion: no-preference) {
  .consultant {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 550ms ease-out, transform 550ms ease-out;
  }

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

  @keyframes call-breathe {
    0%, 100% { scale: 1; }
    50%       { scale: 1.05; }
  }

  .consultant-card__actions .btn--primary {
    animation: call-breathe 2.6s ease-in-out infinite;
  }
}

/* --- FOOTER (minimal — D8) --- */
.site-footer {
  background-color: var(--color-footer-bg);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}

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

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.site-footer__name {
  font-weight: 700;
  font-size: var(--text-base);
}

.site-footer__area {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.site-footer__contact,
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.site-footer__link {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.site-footer__link:hover {
  color: var(--color-primary);
}

.site-footer__copy {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-top: var(--space-4);
}

/* --- LEGAL MODALS (D22) --- */

.legal-modal {
  border: none;
  padding: 0;
  background: transparent;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
}

.legal-modal[open] {
  display: flex;
}

.legal-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

.legal-modal__inner {
  background-color: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow: hidden;
}

.legal-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.legal-modal__title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin: 0;
}

.legal-modal__close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-secondary);
  padding: var(--space-1);
  flex-shrink: 0;
  transition: color var(--transition);
}

.legal-modal__close:hover {
  color: var(--color-text-primary);
}

.legal-modal__body {
  padding: var(--space-6);
  overflow-y: auto;
  flex: 1;
}

.legal-modal__body p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-4);
}

.legal-modal__body p:last-child {
  margin-bottom: 0;
}

/* --- FLOATING WHATSAPP BUTTON (D18) --- */

@keyframes wa-pulse {
  0% {
    box-shadow:
      0 4px 16px rgba(37, 211, 102, 0.35),
      0 0 0 0 rgba(37, 211, 102, 0.55);
  }
  70% {
    box-shadow:
      0 4px 16px rgba(37, 211, 102, 0.35),
      0 0 0 18px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow:
      0 4px 16px rgba(37, 211, 102, 0.35),
      0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.wa-float {
  position: fixed;
  bottom: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  right: 24px;
  z-index: 999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
  text-decoration: none;
  transition: background-color var(--transition), transform var(--transition);
}

.wa-float:hover {
  background-color: #1ebe5b;
  transform: scale(1.05);
  text-decoration: none;
}

.wa-float__icon {
  display: block;
  width: 28px;
  height: 28px;
}

@media (prefers-reduced-motion: no-preference) {
  .wa-float {
    animation: wa-pulse 2s ease-out infinite;
  }
}

/* --- WHATSAPP NUDGE BUBBLE (D31) --- */

.whatsapp-nudge {
  position: fixed;
  /* Vertically center with the WA button (bottom: 24px, height: 56px → center at 52px) */
  bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  transform: translateY(50%);
  /* 24px button offset + 56px button width + 12px gap = 92px */
  right: 92px;
  z-index: 998;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  /* top/bottom padding + extra right padding for absolute close button */
  padding: 13px 38px 13px 18px;
  max-width: 220px;
  opacity: 0;
  pointer-events: none;
}

/* Rotated-square tail at bottom-right corner, pointing right toward WA button */
.whatsapp-nudge::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border-top: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  transform: rotate(45deg);
  right: -5.5px;
  bottom: 14px;
}

.whatsapp-nudge.is-visible {
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: no-preference) {
  .whatsapp-nudge {
    transform: translateX(8px) translateY(50%);
    transition: opacity 300ms ease, transform 300ms ease;
  }
  .whatsapp-nudge.is-visible {
    transform: translateX(0) translateY(50%);
  }
}

.whatsapp-nudge__link {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text-primary);
  text-decoration: none;
}

.whatsapp-nudge__link:hover {
  color: var(--color-primary);
}

.whatsapp-nudge__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: var(--color-text-secondary);
  transition: color var(--transition), background-color var(--transition);
}

.whatsapp-nudge__close:hover {
  color: var(--color-text-primary);
  background-color: var(--color-bg-alt);
}

/* On narrow viewports render above the button instead of to its left */
@media (max-width: 420px) {
  .whatsapp-nudge {
    /* above button: 24px + 56px + 12px gap = 92px */
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    transform: none;
    right: 16px;
    max-width: calc(100vw - 32px);
  }
  /* Tail points downward toward the button below */
  .whatsapp-nudge::after {
    border-top: none;
    border-bottom: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    transform: rotate(45deg);
    right: 20px;
    bottom: -5.5px;
  }
}

@media (max-width: 420px) and (prefers-reduced-motion: no-preference) {
  .whatsapp-nudge {
    transform: translateY(-8px);
    transition: opacity 300ms ease, transform 300ms ease;
  }
  .whatsapp-nudge.is-visible {
    transform: translateY(0);
  }
}

/* --- PHONE MOB RING ANIMATION --- */

@keyframes phone-ring {
  0%   { transform: rotate(0); }
  5%   { transform: rotate(-6.8deg); }
  10%  { transform: rotate(6deg); }
  15%  { transform: rotate(-5.2deg); }
  20%  { transform: rotate(4.4deg); }
  25%  { transform: rotate(0); }
  100% { transform: rotate(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .site-header__phone-mob img {
    animation: phone-ring 3s ease-in-out infinite;
    transform-origin: center center;
  }
}

/* --- CTA ANIMATIONS (D19) --- */

@keyframes header-cta-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(47, 122, 62, 0.5); }
  70%  { box-shadow: 0 0 0 16px rgba(47, 122, 62, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 122, 62, 0); }
}

@keyframes cta-shimmer {
  0%   { transform: translateX(-300%) skewX(-20deg); }
  25%  { transform: translateX(500%) skewX(-20deg); }
  100% { transform: translateX(500%) skewX(-20deg); }
}

.btn--primary::after {
  content: "";
  position: absolute;
  top: -50%;
  left: 0;
  width: 25%;
  height: 200%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 100%
  );
  transform: translateX(-300%) skewX(-20deg);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .site-header__cta.is-pulsing {
    animation: header-cta-pulse 2s ease-out;
  }

  .btn--primary.is-in-view::after {
    animation: cta-shimmer 3s ease infinite;
  }
}


/* ===== 5. MEDIA QUERIES ===== */

/* --- Tablet: 768px+ --- */
@media (min-width: 768px) {
  :root {
    --container-px: 40px;
  }

  .site-header__nav {
    display: flex;
  }

  .site-header__cta {
    margin-left: 0;
  }

  .site-header__phone-mob {
    display: none;
  }

  .hero {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
  }

  .hero__inner {
    flex-direction: row;
    align-items: flex-start;
  }

  .hero__content {
    flex: 1;
  }

  .hero__headline {
    font-size: var(--text-4xl);
  }

  .hero__visual {
    flex: 0 0 400px;
    align-self: flex-start;
    margin-top: -15px;
  }

  .hero__img-wrap {
    max-width: none;
  }

  .hero__container-img {
    width: 100%;
  }

  .hero__figure {
    width: 100%;
  }

  .calculator__body {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-8);
  }

  .order-summary {
    order: 2;
    flex: 0 0 260px;
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
  }

  .calculator__steps {
    order: 1;
  }

  .container-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .icon-text-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .how-steps {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    max-width: 800px;
    margin-inline: auto;
    position: relative;
  }

  .how-steps::before {
    content: '';
    position: absolute;
    top: 24px;
    left: 10%;
    right: 10%;
    height: 1px;
    background-color: var(--color-border);
    z-index: 0;
  }

  .how-step {
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    max-width: none;
  }


  .how-step__connector {
    width: auto;
    flex: 1;
    height: 2px;
    background-color: var(--color-bg-alt);
    border-top: none;
    margin-left: 0;
    align-self: flex-start;
    margin-top: 24px;
  }


  .waste-cards {
    grid-template-columns: 1fr 1fr;
  }

  .consultant-card {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
  }

  .consultant-card__info {
    flex: 1;
  }

  .consultant-card__actions {
    justify-content: flex-start;
  }

  .final-cta {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }

  .site-footer__inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
  }

  .site-footer__copy {
    width: 100%;
    margin-top: var(--space-6);
  }
}

/* --- Desktop: 1024px+ --- */
@media (min-width: 1024px) {
  :root {
    --container-px: 64px;
  }

  .section-title {
    font-size: var(--text-3xl);
  }

  .hero__headline {
    font-size: 40px;
  }

  .calculator__title {
    font-size: var(--text-3xl);
  }

  .container-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .icon-text-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .use-cases .icon-text-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .benefits,
  .how-it-works {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }

  .how-step {
    align-items: center;
  }

  .how-step__body {
    text-align: left;
    width: 100%;
  }

  .waste-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .waste-card--prohibited .waste-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .order-summary {
    flex: 0 0 300px;
  }

  /* --- Hero full-bleed right edge (D20) + left shift (--hero-shift) --- */
  .hero {
    padding-left: max(var(--container-px), calc((100vw - var(--container-max)) / 2 + var(--container-px) - var(--hero-shift)));
    padding-right: var(--hero-shift);
    overflow: hidden;
  }

  /* Снимаем ограничения .container с объединённого элемента .container.hero__inner */
  .hero .hero__inner {
    max-width: none;
    width: 100%;
    margin-inline: 0;
    padding-inline: 0;
  }

  .hero__inner {
    display: grid;
    grid-template-columns: minmax(480px, 1fr) minmax(360px, 1fr);
    gap: 40px;
    align-items: start;
  }

  .hero__visual {
    max-width: 900px;
    justify-self: end;
    margin-top: -17px;
    margin-left: -7%;
    align-self: start;
  }

  .hero__container-img {
    max-width: none;
  }
}

/* --- Hero bleed reset for mobile/tablet --- */
@media (max-width: 1023px) {
  .hero {
    padding-left: var(--container-px);
    padding-right: var(--container-px);
    overflow: visible;
  }

  .hero .hero__inner {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: 0;
  }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}