/* ============================================================
   Green Truck — pages.css
   Стили секций главной и внутренних страниц
   ============================================================ */

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  background: var(--color-dark-bg);
  color: var(--color-text-inverse);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(23,22,20,0.7) 0%, rgba(23,22,20,0.82) 100%),
    radial-gradient(120% 80% at 80% 0%, rgba(1,105,111,0.35) 0%, transparent 55%),
    var(--color-dark-bg);
  z-index: 0;
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: center;
  min-height: 100vh;
  padding-block: calc(var(--header-height) + var(--space-12)) var(--space-16);
}
.hero__content { display: flex; flex-direction: column; gap: var(--space-6); align-items: flex-start; }
.hero .badge { background: rgba(1,105,111,0.22); color: var(--color-primary-light); }
.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.08;
  color: var(--color-text-inverse);
}
.hero__title-accent { color: var(--color-primary-light); }
.hero__subtitle {
  font-size: var(--text-lg);
  color: rgba(249, 248, 244, 0.72);
  max-width: 48ch;
}
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: rgba(249, 248, 244, 0.55);
  margin-top: var(--space-2);
}
.hero__trust strong { color: var(--color-primary-light); font-weight: 600; }
.hero__sla {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(249,248,244,0.85);
}
.hero__sla i { width: 18px; height: 18px; color: var(--color-primary-light); }

/* Карточка формы / квиза */
.hero__form-card {
  background: #fff;
  color: var(--color-text);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  box-shadow: var(--shadow-lg);
  width: 100%;
}
.hero__form-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
.hero__form-sub { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); margin-bottom: var(--space-6); }
.hero-form { display: flex; flex-direction: column; gap: var(--space-4); }
.hero__whatsapp {
  display: block;
  text-align: center;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: underline;
}

/* ============================================================
   TRUST NUMBERS
   ============================================================ */
.trust-numbers { background: var(--color-dark-surface); color: var(--color-text-inverse); }
.trust-numbers .container { padding-block: var(--space-12); }
.trust-numbers__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-1);
  padding-inline: var(--space-4);
  border-right: 1px solid var(--color-dark-border);
}
.trust-item:last-child { border-right: none; }
.trust-item__value { display: inline-flex; align-items: baseline; gap: 2px; }
.trust-item__number {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-primary-light);
  line-height: 1;
}
.trust-item__plus, .trust-item__unit {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-primary-light);
}
.trust-item__label { font-size: var(--text-sm); color: rgba(249,248,244,0.6); margin-top: var(--space-2); }

/* ============================================================
   SERVICES GRID (featured + обычные)
   ============================================================ */
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--space-4);
}
.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  color: inherit;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--color-primary); }
.service-card i { color: var(--color-primary); width: 28px; height: 28px; }
.service-card h3 { font-size: var(--text-lg); }
.service-card p { color: var(--color-text-muted); font-size: var(--text-sm); }
.service-card__arrow {
  margin-top: auto;
  color: var(--color-primary);
  font-size: var(--text-lg);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--transition), transform var(--transition);
}
.service-card:hover .service-card__arrow { opacity: 1; transform: translateX(0); }

.service-card--featured {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  justify-content: space-between;
}
.service-card--featured i { color: #fff; width: 40px; height: 40px; }
.service-card--featured h3 { font-size: var(--text-xl); font-family: var(--font-display); }
.service-card--featured p { color: rgba(255,255,255,0.82); font-size: var(--text-base); }
.service-card--featured .service-card__arrow { color: #fff; opacity: 1; transform: none; }
.service-card--featured:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: start;
  gap: 0;
}
.step { display: flex; flex-direction: column; gap: var(--space-3); padding-inline: var(--space-3); }
.step__number {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-primary);
  opacity: 0.18;
  line-height: 1;
}
.step__icon { color: var(--color-primary); }
.step__icon i { width: 28px; height: 28px; }
.step__title { font-size: var(--text-lg); }
.step__desc { color: var(--color-text-muted); font-size: var(--text-sm); }
.step__connector {
  width: 100%;
  min-width: 32px;
  height: 1px;
  background: var(--color-divider);
  margin-top: calc(var(--space-3) + var(--text-3xl) / 2);
}

/* ============================================================
   WHY US
   ============================================================ */
.why-us__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: center;
}
.why-us__items { display: flex; flex-direction: column; gap: var(--space-8); margin-top: var(--space-10); }
.why-item { padding-left: var(--space-6); border-left: 2px solid var(--color-primary-bg); }
.why-item__title { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.why-item__accent { color: var(--color-primary); font-weight: 600; }
.why-item p { color: var(--color-text-muted); font-size: var(--text-base); }
.why-item p strong { color: var(--color-text); }
.why-us__media {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 6 / 7;
  background: var(--color-surface-offset);
}
.why-us__media img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   CASES
   ============================================================ */
.cases__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.case-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--color-dark-surface);
  color: var(--color-text-inverse);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.case-card h3 { font-family: var(--font-display); font-size: var(--text-lg); }
.case-card p { color: rgba(249,248,244,0.66); font-size: var(--text-sm); }
.case-card__result {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin-top: auto;
  font-size: var(--text-sm);
  color: var(--color-primary-light);
}
.case-card__link { color: rgba(249,248,244,0.7); font-size: var(--text-sm); text-decoration: underline; }
.case-card__link:hover { color: var(--color-text-inverse); }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.testimonial {
  position: relative;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  padding-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.testimonial::before {
  content: '\201C';
  position: absolute;
  top: -6px; left: 18px;
  font-family: Georgia, serif;
  font-size: 80px;
  line-height: 1;
  color: var(--color-primary-bg);
}
.testimonial__text { position: relative; z-index: 1; font-size: var(--text-base); }
.testimonial__author { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; }
.testimonial__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: var(--text-sm);
  flex-shrink: 0;
}
.testimonial__name { font-weight: 600; font-size: var(--text-sm); }
.testimonial__role { color: var(--color-text-muted); font-size: var(--text-xs); }

/* ============================================================
   ЭДО 2026 (инфоблок-триггер)
   ============================================================ */
.edo {
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-8), 4vw, var(--space-12));
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-8);
  align-items: center;
}
.edo__tag {
  display: inline-flex;
  width: fit-content;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.16);
  font-size: var(--text-xs);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.edo h2 { font-family: var(--font-display); color: #fff; }
.edo p { color: rgba(255,255,255,0.85); max-width: 60ch; margin-top: var(--space-3); }
.edo .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.6); }
.edo .btn-secondary:hover { background: rgba(255,255,255,0.12); }

/* ============================================================
   PARTNERS
   ============================================================ */
.partners__label { text-align: center; color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-8); }
.partners__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--space-6), 5vw, var(--space-16));
  flex-wrap: wrap;
}
.partners__logos span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-text-faint);
  filter: grayscale(1);
  transition: color var(--transition), filter var(--transition);
}
.partners__logos span:hover { color: var(--color-primary); filter: grayscale(0); }

/* ============================================================
   CONTACT CTA
   ============================================================ */
.contact-cta { background: var(--color-dark-bg); color: var(--color-text-inverse); }
.contact-cta__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: start;
}
.contact-cta__text { display: flex; flex-direction: column; gap: var(--space-4); }
.contact-cta h2 { font-family: var(--font-display); color: var(--color-text-inverse); }
.contact-cta__text > p { color: rgba(249,248,244,0.66); }
.contact-cta__alternatives { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.contact-form {
  background: var(--color-dark-surface);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ============================================================
   КВИЗ (калькулятор)
   ============================================================ */
.quiz { display: flex; flex-direction: column; gap: var(--space-6); }
.quiz__progress { height: 4px; border-radius: var(--radius-full); background: var(--color-surface-offset); overflow: hidden; }
.quiz__progress-bar { height: 100%; width: 25%; background: var(--color-primary); border-radius: var(--radius-full); transition: width 300ms cubic-bezier(0.16,1,0.3,1); }
.quiz__step { display: none; flex-direction: column; gap: var(--space-4); animation: fadeIn 240ms ease-out; }
.quiz__step.is-active { display: flex; }
.quiz__step-label { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 500; }
.quiz__question { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
.quiz__options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.quiz__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  text-align: left;
  font-size: var(--text-sm);
  font-weight: 500;
  transition: border-color var(--transition), background var(--transition);
}
.quiz__option:hover { border-color: var(--color-primary); background: var(--color-primary-bg); }
.quiz__option.is-selected { border-color: var(--color-primary); background: var(--color-primary-bg); }
.quiz__option i { width: 20px; height: 20px; color: var(--color-primary); }
.quiz__nav { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.quiz__back { background: none; border: none; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 500; padding: var(--space-2); }
.quiz__back:hover { color: var(--color-text); }
.quiz__back[hidden] { visibility: hidden; }
.quiz__result { display: flex; flex-direction: column; gap: var(--space-3); text-align: center; padding: var(--space-4) 0; }
.quiz__result i { width: 48px; height: 48px; color: var(--color-primary); margin: 0 auto; }

/* утилита: две колонки с коллапсом */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: start; }
@media (max-width: 820px) { .grid-2 { grid-template-columns: 1fr; } }

/* ============================================================
   ВНУТРЕННИЕ СТРАНИЦЫ (базовое)
   ============================================================ */
.page-top { padding-top: calc(var(--header-height) + var(--space-12)); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-6); }
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb span { color: var(--color-text-faint); }

.service-layout { display: grid; grid-template-columns: 1fr 380px; gap: clamp(var(--space-8), 4vw, var(--space-16)); align-items: start; }
.service-sidebar { position: sticky; top: calc(var(--header-height) + var(--space-4)); }
.sidebar-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.prose { max-width: 70ch; display: flex; flex-direction: column; gap: var(--space-4); }
.prose h2 { margin-top: var(--space-6); }
.prose ul { display: flex; flex-direction: column; gap: var(--space-2); }
.prose li { position: relative; padding-left: var(--space-6); color: var(--color-text-muted); }
.prose li::before { content: ''; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; border-radius: 2px; background: var(--color-primary); }

/* FAQ аккордеон */
.faq { display: flex; flex-direction: column; gap: var(--space-2); max-width: 760px; }
.faq__item { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4) var(--space-6);
  background: none;
  border: none;
  text-align: left;
  font-weight: 600;
  font-size: var(--text-base);
}
.faq__q i { transition: transform var(--transition); flex-shrink: 0; color: var(--color-primary); }
.faq__item.is-open .faq__q i { transform: rotate(180deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height 280ms ease; }
.faq__a-inner { padding: 0 var(--space-6) var(--space-4); color: var(--color-text-muted); }
.faq__item.is-open .faq__a { max-height: 320px; }

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width: 1024px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .service-card--featured { grid-column: 1 / 3; grid-row: auto; }
  .testimonials__grid { grid-template-columns: 1fr 1fr; }
  .service-layout { grid-template-columns: 1fr; }
  .service-sidebar { position: static; order: -1; }
}

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; min-height: auto; gap: var(--space-10); }
  .hero__form-card { max-width: 520px; }
  .why-us__inner { grid-template-columns: 1fr; }
  .why-us__media { order: -1; aspect-ratio: 16 / 10; }
  .contact-cta__inner { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: var(--space-8); }
  .step__connector { display: none; }
  .step { flex-direction: row; align-items: flex-start; gap: var(--space-4); }
  .step__number { font-size: var(--text-2xl); }
  .edo { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .trust-numbers__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8) 0; }
  .trust-item:nth-child(2) { border-right: none; }
  .trust-item { border-bottom: none; }
  .services__grid { grid-template-columns: 1fr; }
  .service-card--featured { grid-column: auto; }
  .cases__grid { grid-template-columns: 1fr; }
  .testimonials__grid { grid-template-columns: 1fr; }
  .quiz__options { grid-template-columns: 1fr; }
}