/* Страница „Услуги“: Material 3 */

/* Герой */
.svc-hero { position: relative; overflow: hidden; padding-block: clamp(40px, 7vw, 88px) clamp(48px, 7vw, 96px); }
.svc-hero__head { position: relative; z-index: 1; text-align: center; margin-bottom: clamp(32px, 5vw, 56px); }
.svc-hero__head h1 { margin: 16px 0 20px; }
.svc-hero__head p { max-width: 36em; margin-inline: auto; color: var(--md-on-surface-variant); }

/* Карусел: scroll-snap на малки екрани, три колони на големи */
.svc-wrap { position: relative; z-index: 1; }
.svc-track {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px; scroll-padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch;
}
.svc-track::-webkit-scrollbar { display: none; }
.svc { flex: 0 0 min(84%, 360px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 16px; min-height: 280px; border-radius: var(--r-2xl); }
.svc:nth-child(2) { border-radius: var(--r-2xl) var(--r-2xl) var(--r-sm) var(--r-2xl); }
.svc:nth-child(3) { border-radius: var(--r-2xl) var(--r-sm) var(--r-2xl) var(--r-2xl); }
.svc h3 { font-size: 1.5rem; line-height: 1.25; font-weight: 600; }
.svc p { opacity: 0.86; flex: 1; }
.svc .btn-text { align-self: flex-start; margin-left: -16px; color: inherit; }
.svc-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.svc-nav .icon-btn { border: 1px solid var(--md-outline-variant); color: var(--md-on-surface); }
.svc-nav .icon-btn[disabled] { opacity: 0.38; pointer-events: none; }
@media (min-width: 900px) {
  .svc-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; overflow: visible; margin-inline: 0; padding: 0; }
  .svc { flex: none; min-height: 320px; }
  .svc:nth-child(2) { transform: translateY(24px); }
  .svc-nav { display: none; }
  .svc-wrap { padding-bottom: 24px; }
}

/* Две колони: текст + визуализация */
.split { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 960px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--visual-left > :first-child { order: 2; }
}
.split__head h2 { margin: 16px 0 20px; }
.feature-list { display: grid; gap: 4px 24px; margin-top: 28px; }
@media (min-width: 640px) { .feature-list { grid-template-columns: 1fr 1fr; } }
.feature-list .list-item { padding: 12px 0; }
.split__actions { margin-top: 28px; }

/* Демо форма */
.demo { --tf-bg: var(--md-surface-container-lowest); position: relative; max-width: 480px; margin-inline: auto; width: 100%; background: var(--md-surface-container-lowest); border: 1px solid var(--md-outline-variant); border-radius: var(--r-2xl); padding: clamp(24px, 4vw, 36px); box-shadow: var(--elev-2); }
.demo__head { margin-bottom: 28px; }
.demo__head p { color: var(--md-on-surface-variant); margin-top: 2px; }
.demo__fields { display: grid; gap: 24px; padding-top: 10px; }
.demo .tf__control { cursor: default; user-select: none; }
.demo .tf__control.demo-typing { border-color: var(--md-primary); box-shadow: inset 0 0 0 1px var(--md-primary); }
.demo .tf__control.demo-typing ~ .tf__label { transform: translateY(-26px) scale(0.75); color: var(--md-primary); }
.demo select:disabled { opacity: 1; color: var(--md-on-surface); }
.demo .btn.is-done { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.demo-cursor { position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--md-primary); opacity: 0; pointer-events: none; z-index: 5; box-shadow: 0 0 0 6px color-mix(in srgb, var(--md-primary) 22%, transparent); transform: translate(-50%, -50%); transition: opacity 300ms; }
.demo.animating .demo-cursor { opacity: 0.6; }

/* Документ „Одобрено“ */
.doc-stage { position: relative; max-width: 460px; margin-inline: auto; width: 100%; padding: 24px 0; }
.doc { position: relative; z-index: 1; background: var(--md-surface-container-lowest); border: 1px solid var(--md-outline-variant); border-radius: var(--r-xl) var(--r-xl) var(--r-xl) var(--r-sm); padding: clamp(24px, 4vw, 36px); box-shadow: var(--elev-2); }
.doc__logo { color: var(--md-primary); font-weight: 700; font-size: 1.25rem; padding-bottom: 16px; border-bottom: 1px solid var(--md-outline-variant); text-align: center; }
.doc__title { font-weight: 700; font-size: 1.375rem; margin: 20px 0 8px; text-align: center; }
.doc__row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--md-outline-variant); }
.doc__row:last-child { border-bottom: 0; }
.doc__label { color: var(--md-on-surface-variant); }
.doc__value { font-weight: 600; text-align: right; }
.doc__value.bad { color: var(--md-error); }
.doc__status { text-align: center; margin-top: 24px; }
.stamp { display: inline-block; border: 3px solid var(--md-primary); color: var(--md-primary); border-radius: var(--r-md); padding: 6px 22px; font-weight: 700; font-size: 1.25rem; letter-spacing: 0.12em; transform: rotate(-7deg); background: color-mix(in srgb, var(--md-primary-container) 40%, transparent); }
.doc__note { margin-top: 14px; font-size: 0.8125rem; color: var(--md-on-surface-variant); }
.doc-check { position: absolute; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--md-primary); color: var(--md-on-primary); box-shadow: var(--elev-2); }
.doc-check--1 { top: 0; right: -6px; }
.doc-check--2 { left: -8px; top: 46%; width: 40px; height: 40px; background: var(--md-primary-container); color: var(--md-on-primary-container); }
.doc-check--3 { right: 12px; bottom: 0; width: 36px; height: 36px; background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }

/* Телефон */
.phone-stage { position: relative; width: min(100%, 460px); margin-inline: auto; display: grid; place-items: center; padding: 64px 0 72px; }
.phone { position: relative; z-index: 1; width: 272px; border: 10px solid var(--md-inverse-surface); border-radius: 44px; background: var(--md-surface); overflow: hidden; box-shadow: var(--elev-3); }
.phone__top { background: var(--md-primary); color: var(--md-on-primary); text-align: center; font-weight: 700; padding: 22px 16px 16px; }
.phone__body { padding: 16px 16px 20px; display: grid; gap: 16px; }
.progress { display: flex; align-items: center; gap: 8px; }
.progress__bar { flex: 1; height: 6px; border-radius: 3px; background: var(--md-secondary-container); overflow: hidden; }
.progress__bar span { display: block; width: 33%; height: 100%; background: var(--md-primary); border-radius: 3px; }
.progress__steps { display: flex; gap: 6px; }
.progress__steps span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 0.6875rem; font-weight: 700; background: var(--md-surface-container-high); color: var(--md-on-surface-variant); }
.progress__steps span.on { background: var(--md-primary); color: var(--md-on-primary); }
.phone__title { font-weight: 700; font-size: 1rem; line-height: 1.3; }
.app-field { position: relative; border: 1px solid var(--md-outline); border-radius: var(--r-xs); padding: 14px 12px 8px; font-size: 0.875rem; margin-top: 4px; display: flex; align-items: center; min-height: 44px; }
.app-field small { position: absolute; top: -9px; left: 8px; background: var(--md-surface); padding: 0 4px; font-size: 0.6875rem; color: var(--md-on-surface-variant); line-height: 1.2; }
.app-field .cursor { width: 2px; height: 16px; background: var(--md-primary); margin-left: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.phone .btn { min-height: 44px; font-size: 0.875rem; }
.notif { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; width: 214px; padding: 12px 16px 12px 12px; border-radius: var(--r-lg); background: var(--md-surface-container-lowest); border: 1px solid var(--md-outline-variant); box-shadow: var(--elev-3); }
.notif strong { display: block; font-size: 0.8125rem; line-height: 1.2; }
.notif span.t { display: block; font-size: 0.75rem; color: var(--md-on-surface-variant); line-height: 1.3; }
.notif--1 { right: 0; top: 8px; }
.notif--2 { left: 0; bottom: 8px; }
@media (max-width: 420px) { .notif { width: 190px; } }

/* FAQ */
.faq { max-width: 52rem; margin-inline: auto; }

/* Призив за действие */
.cta-card { position: relative; overflow: hidden; border-radius: var(--r-3xl) var(--r-3xl) var(--r-3xl) var(--r-md); padding: clamp(36px, 7vw, 88px) clamp(24px, 6vw, 80px); background: var(--md-primary); color: var(--md-on-primary); text-align: center; }
.cta-card > :not(.shape) { position: relative; z-index: 1; }
.cta-card h2 { margin-bottom: 16px; }
.cta-card p { max-width: 36em; margin-inline: auto; opacity: 0.9; }
.cta-card .row { justify-content: center; margin-top: 32px; }
.cta-card .btn-container { box-shadow: none; }
.cta-card .btn-outlined { color: var(--md-on-primary); border-color: color-mix(in srgb, var(--md-on-primary) 55%, transparent); }