/* Пользовательские CSS-стили для Tilda — ТехДоктор УФА, 26-04 v32
   Вставить в: Настройки сайта → Еще → Пользовательские CSS-стили.
   После вставки CSS в Tilda HTML-блоки T123 из папки 3_T123_blocks можно вставлять без .
*/
:root {
  --bg:#f7f8fc;
  --card:#fff;
  --text:#0b1220;
  --muted:#566276;
  --line:#e4e8f1;
  --accent:#6654f1;
  --accent2:#5142db;
  --soft:#f0edff;
  --orange:#ff5a00;
  --orange2:#fff6ee;
  --green:#00b67a;
  --shadow:0 18px 48px rgba(11,18,32,.07);
  --container:1160px;
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans",sans-serif;
  background:linear-gradient(180deg,#fbfbff 0%,#f7f8fc 100%);
  color:var(--text);
  line-height:1.45;
  padding-top:66px;
}

a {
  color:inherit;
  text-decoration:none
}

.container {
  max-width:var(--container);
  margin:0 auto;
  padding:0 20px
}

.td-header {
  position:fixed;
  z-index:50;
  top:0;
  left:0;
  right:0;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)
}

.td-header-inner {
  height:66px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:275px
}

.logo {
  width:40px;
  height:40px;
  border-radius:13px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:900
}

.brand-title {
  display:flex;
  flex-direction:column;
  line-height:1.1
}

.brand-title strong {
  font-size:17px;
  font-weight:900;
  letter-spacing:-.01em
}

.brand-title span {
  font-size:12.5px;
  color:var(--muted);
  margin-top:3px
}

.td-nav {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex:1
}

.td-nav a {
  font-size:14.5px;
  font-weight:900;
  color:#131a2a;
  padding:8px 10px;
  border-radius:12px
}

.td-nav a:hover {
  background:#f2f4fb;
  color:var(--accent2)
}

.header-actions {
  min-width:170px;
  display:flex;
  justify-content:flex-end
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:13px;
  padding:11px 16px;
  background:#fff;
  font-weight:900;
  font-size:14.5px;
  cursor:pointer;
  transition:.16s ease;
  white-space:nowrap
}

.btn:hover {
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(11,18,32,.08)
}

.btn.primary {
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;
  border-color:rgba(102,84,241,.35);
  box-shadow:0 14px 34px rgba(102,84,241,.22)
}

.btn.orange {
  background:var(--orange2);
  color:var(--orange);
  border-color:#ffb27c
}

.btn.ghost {
  background:#fff;
  color:#0b1220
}

.section {
  padding:18px 0
}

.hero-section {
  padding:10px 0 14px;
  background:radial-gradient(700px 360px at 80% 6%,rgba(102,84,241,.10),transparent 64%)
}

.hero-card {
  display:grid;
  grid-template-columns:1.08fr .82fr;
  gap:22px;
  align-items:center;
  background:rgba(255,255,255,.88);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  border-radius:26px;
  padding:20px
}

.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid #dad5ff;
  background:#fff;
  padding:7px 11px;
  border-radius:999px;
  color:#2d256f;
  font-weight:900;
  font-size:13.5px;
  margin-bottom:12px
}

.eyebrow:before {
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent)
}

h1 {
  font-size:clamp(28px,2.65vw,42px);
  line-height:1.14;
  margin:0 0 10px;
  letter-spacing:-.035em;
  max-width:720px
}

.hero-text {
  font-size:clamp(15.5px,1.05vw,17px);
  color:var(--muted);
  margin:0 0 12px;
  max-width:620px
}

.chips {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:12px 0 5px
}

.chip {
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 10px;
  font-weight:900;
  font-size:13px;
  box-shadow:0 6px 18px rgba(11,18,32,.04)
}

.chip:before {
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent)
}

.profi-mini {
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid #ffbf8d;
  background:#fff6ee;
  color:#8a3300;
  border-radius:999px;
  padding:8px 12px;
  font-weight:900;
  font-size:13.5px;
  margin-top:8px
}

.fine {
  color:#7a8496;
  font-size:13px;
  margin-top:8px
}

.hero-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px
}

.media-card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:21px;
  padding:10px;
  box-shadow:var(--shadow)
}

.media-card img {
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:16px
}

.photo-caption {
  font-size:13.5px;
  color:var(--muted);
  margin:9px 4px 2px
}

.media-blank {
  min-height:360px;
  display:grid;
  place-items:center;
  text-align:center;
  background:linear-gradient(135deg,#fff,#f4f2ff);
  border-radius:16px;
  padding:20px
}

.media-blank .big {
  font-size:58px;
  font-weight:900;
  color:var(--accent);
  margin-bottom:8px
}

.offer-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin:16px 0 18px
}

.offer {
  background:#fff;
  border:1px solid var(--line);
  border-radius:19px;
  padding:18px;
  box-shadow:0 12px 30px rgba(11,18,32,.045)
}

.offer h3 {
  margin:0 0 8px;
  font-size:16px
}

.offer p {
  margin:0;
  color:var(--muted);
  font-size:14.5px
}

.block-card {
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  border-radius:24px;
  padding:20px;
  margin-top:14px
}

.block-card h2,.section-title {
  font-size:clamp(25px,2.2vw,34px);
  line-height:1.18;
  margin:0 0 8px;
  letter-spacing:-.025em
}

.lead {
  color:var(--muted);
  margin:0 0 14px
}

.tabs {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:12px 0 18px
}

.tab-btn {
  min-width:220px;
  flex:0 1 260px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:14px;
  padding:12px 18px;
  font-weight:900;
  font-size:15.5px;
  cursor:pointer;
  color:var(--muted)
}

.tab-btn.active {
  background:var(--soft);
  border-color:#cfc7ff;
  color:#0b1220
}

.service-title {
  font-size:24px;
  margin:0 0 4px
}

.cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px
}

.repair-card {
  border:1px solid var(--line);
  border-top:3px solid var(--orange);
  border-radius:18px;
  background:#fbfcff;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:230px
}

.repair-card h3 {
  margin:0;
  font-size:18px
}

.repair-card ul {
  margin:0;
  padding-left:18px;
  color:var(--muted);
  font-size:14.5px
}

.repair-card li {
  margin:6px 0
}

.visit {
  font-weight:900;
  color:#4d5a70;
  font-size:13.5px;
  margin-top:auto
}

.price {
  font-weight:900;
  font-size:18px
}

.price b {
  color:var(--orange);
  font-size:22px
}

.repair-card .btn {
  width:100%;
  margin-top:0
}

.problem-box {
  margin-top:14px;
  border:1px solid #ffc08f;
  background:linear-gradient(135deg,#fff7ef,#fff);
  border-radius:17px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px
}

.problem-box h3 {
  margin:0 0 3px;
  font-size:17px
}

.problem-box p {
  margin:0;
  color:var(--muted);
  font-size:14.5px
}

.steps {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:16px
}

.step {
  background:#fff;
  border:1px solid var(--line);
  border-radius:19px;
  padding:18px;
  box-shadow:0 12px 30px rgba(11,18,32,.045);
  min-height:145px
}

.num {
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid #d8d2ff;
  color:var(--accent);
  font-weight:900;
  margin-bottom:16px
}

.step h3 {
  margin:0 0 8px;
  font-size:17px
}

.step p {
  margin:0;
  color:var(--muted);
  font-size:14.5px
}

.reviews-head {
  display:grid;
  grid-template-columns:1fr auto;
  gap:20px;
  align-items:end;
  margin-bottom:14px
}

.profi-widget {
  display:flex;
  align-items:center;
  gap:18px;
  border:1px solid #ffbf8d;
  background:#fff7ef;
  border-radius:18px;
  padding:13px 16px
}

.p-logo {
  width:42px;
  height:42px;
  border-radius:10px;
  background:#ff6500;
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:22px
}

.profi-widget .rating {
  font-size:28px;
  font-weight:900;
  line-height:1
}

.stars {
  color:#ffb300;
  letter-spacing:1px
}

.reviews-row {
  display:flex;
  gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:14px;
  scrollbar-color:#ffad69 #e7ddff;
  scrollbar-width:thin
}

.reviews-row::-webkit-scrollbar {
  height:8px
}

.reviews-row::-webkit-scrollbar-track {
  background:#e7ddff;
  border-radius:99px
}

.reviews-row::-webkit-scrollbar-thumb {
  background:linear-gradient(90deg,#c5b5ff,#ffad69);
  border-radius:99px
}

.review {
  scroll-snap-align:start;
  min-width:340px;
  max-width:360px;
  background:#fff;
  border:1px solid var(--line);
  border-top:4px solid var(--orange);
  border-radius:18px;
  padding:16px;
  box-shadow:0 12px 30px rgba(11,18,32,.045)
}

.review-top {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center
}

.avatar {
  width:40px;
  height:40px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#6654f1,#3aa5ff);
  color:#fff;
  font-weight:900
}

.review h3 {
  font-size:16px;
  margin:0
}

.tag {
  display:inline-flex;
  border:1px solid #ffd1a9;
  background:#fff8ed;
  color:#c74a00;
  border-radius:999px;
  padding:5px 9px;
  font-weight:800;
  font-size:12px;
  margin:10px 0
}

.review p {
  color:var(--muted);
  font-size:14.5px;
  margin:0 0 12px
}

.verified {
  border-top:1px solid var(--line);
  padding-top:10px;
  color:var(--green);
  font-weight:900;
  font-size:13px
}

.faq-item {
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  margin:9px 0;
  overflow:hidden
}

.faq-q {
  width:100%;
  background:#fff;
  border:0;
  padding:16px 18px;
  text-align:left;
  font-weight:900;
  font-size:16px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  cursor:pointer
}

.faq-a {
  display:none;
  padding:0 18px 16px;
  color:var(--muted)
}

.faq-item.open .faq-a {
  display:block
}

.faq-item.open .faq-q span:last-child {
  transform:rotate(45deg)
}

.order-card {
  background:#fff;
  border:1px solid var(--line);
  border-top:3px solid #b9aaff;
  box-shadow:var(--shadow);
  border-radius:24px;
  padding:20px;
  margin-bottom:20px
}

.order-card h2 {
  font-size:clamp(25px,2.2vw,34px);
  margin:0 0 6px;
  letter-spacing:-.025em
}

.order-sub {
  color:var(--muted);
  margin:0 0 16px
}

.form-grid {
  display:grid;
  gap:14px
}

.field label {
  display:block;
  font-weight:900;
  margin-bottom:7px;
  color:#445166;
  font-size:14px
}

.input,.textarea {
  width:100%;
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px 15px;
  font-size:15.5px;
  background:#fff;
  color:var(--text);
  font-family:inherit
}

.textarea {
  min-height:92px;
  resize:vertical
}

.form-actions {
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:4px
}

.consent {
  text-align:center;
  color:#7a8496;
  font-size:12.5px;
  margin-top:12px
}

.footer {
  border-top:1px solid var(--line);
  padding:24px 0;
  color:#647084;
  font-size:14px
}

.footer-inner {
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap
}

.call-modal {
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.52);
  backdrop-filter:blur(5px);
  z-index:100;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px
}

.call-modal.open {
  display:flex
}

.modal-card {
  max-width:430px;
  width:100%;
  background:#fff;
  border-radius:22px;
  box-shadow:0 30px 80px rgba(0,0,0,.25);
  padding:22px;
  position:relative
}

.modal-close {
  position:absolute;
  right:14px;
  top:14px;
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  font-size:22px;
  cursor:pointer;
  color:#647084
}

.modal-card h2 {
  font-size:24px;
  margin:0 40px 8px 0;
  letter-spacing:-.02em
}

.modal-card p {
  margin:0 0 14px;
  color:var(--muted)
}

.modal-actions {
  display:grid;
  gap:10px
}

.modal-note {
  text-align:center;
  color:#7a8496;
  font-size:12.5px;
  margin-top:12px
}

.mobile-stick {
  display:none
}

.policy-card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:26px;
  margin:20px 0
}

.policy-card h1 {
  font-size:34px
}

.policy-card h2 {
  font-size:18px;
  margin-top:22px
}

.policy-card p,.policy-card li {
  color:var(--muted);
  font-size:15px
}

@media (max-width:980px) {
  .td-nav {
    display:none
  }

  .brand {
    min-width:auto
  }

  .hero-card {
    grid-template-columns:1fr
  }

  .offer-grid,.steps {
    grid-template-columns:repeat(2,1fr)
  }

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

  .reviews-head {
    grid-template-columns:1fr
  }

  .profi-widget {
    width:100%;
    justify-content:space-between
  }

  .media-card {
    max-width:560px
  }

  .header-actions {
    min-width:auto
  }

  .header-actions .callibri_phone {
    font-size:0
  }

  .header-actions .callibri_phone:after {
    content:'Позвонить';
    font-size:14.5px
  }

  .hero-actions .call-main {
    white-space:normal;
    line-height:1.22;
    text-align:center
  }

  .hero-actions .call-main .full-label {
    display:inline !important
  }

  .hero-actions .call-main:after {
    content:none !important
  }
}

@media (max-width:640px) {
  body {
    padding-top:60px;
    padding-bottom:0
  }

  .container {
    padding:0 14px
  }

  .td-header-inner {
    height:60px
  }

  .brand-title strong {
    font-size:15px
  }

  .brand-title span {
    font-size:11.5px
  }

  .logo {
    width:36px;
    height:36px
  }

  .header-actions .btn {
    padding:9px 12px
  }

  h1 {
    font-size:28px
  }

  .hero-card,.block-card,.order-card {
    padding:16px;
    border-radius:20px
  }

  .hero-section {
    padding-top:8px
  }

  .chips {
    gap:6px
  }

  .chip {
    font-size:12px;
    padding:6px 8px
  }

  .hero-actions,.form-actions {
    grid-template-columns:1fr;
    display:grid
  }

  .hero-actions .btn,.form-actions .btn {
    width:100%
  }

  .offer-grid,.steps {
    grid-template-columns:1fr
  }

  .tab-btn {
    min-width:0;
    flex:1 1 0;
    padding:11px 10px
  }

  .problem-box {
    align-items:stretch;
    flex-direction:column
  }

  .problem-box .btn {
    width:100%
  }

  .review {
    min-width:84vw
  }

  .profi-widget {
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:10px
  }

  .profi-widget .btn {
    grid-column:1/-1
  }

  .mobile-stick {
    display:none !important
  }

  .footer-inner {
    display:block
  }

  .media-blank {
    min-height:240px
  }

  .policy-card {
    padding:18px
  }

  .policy-card h1 {
    font-size:26px
  }
}

/* v32: техническое скрытие старых Tilda-блоков.
   Нужно для старой Tilda-формы, которая отправляет заявки в Telegram.

   ВАЖНО:
   1) На большой HTML-блок T123 с новым сайтом этот класс НЕ ставить.
   2) Ставить только на старый Tilda-блок формы, который должен работать в фоне.
   3) Если на странице вылезла старая фотография/старый ненужный блок — ему можно поставить class: uc-td-hide-old.
*/
.td-engine-form,
.uc-td-engine-form {
  position:absolute !important;
  left:-99999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  z-index:-1 !important;
}

/* Для старых лишних визуальных блоков Tilda: фото, старая форма, старый текст.
   Ставить только на тот старый блок, который нужно полностью убрать с экрана. */
.uc-td-hide-old,
.td-hide-old,
.uc-td-old-photo {
  display:none !important;
}

.input.phone-error {
  border-color:#ff5a00 !important;
  box-shadow:0 0 0 3px rgba(255,90,0,.12) !important;
}

.phone-error-text {
  margin-top:6px;
  color:#d94800;
  font-size:12.5px;
  font-weight:800;
}




/* === FIX v32: скрытие старых блоков Tilda ===
   Старая форма Telegram: поставь класс uc-tdform ИЛИ uc-td-engine-form.
   Старое фото/старый лишний блок: поставь класс uc-td-hide-old.
*/
.t-rec.uc-td-hide-old,
.uc-td-hide-old,
.t-rec:has(.uc-td-hide-old) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.t-rec.uc-tdform,
.t-rec.uc-td-engine-form,
.uc-tdform,
.uc-td-engine-form,
.t-rec:has(.uc-tdform),
.t-rec:has(.uc-td-engine-form) {
  position: absolute !important;
  left: -100000px !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  max-height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
  margin: 0 !important;
  padding: 0 !important;
}



/* === FIX v34: принудительно скрыть старую Tilda-форму Telegram и старые визуальные блоки ===
   Старая форма: uc-tdform / uc-td-tgform / uc-td-engine-form.
   Текущий ID старой формы с Telegram-связкой: #rec1997033732.
*/
#rec1997033732,
.t-rec.uc-tdform,
.t-rec.uc-td-tgform,
.t-rec.uc-td-engine-form,
.uc-tdform,
.uc-td-tgform,
.uc-td-engine-form,
.td-engine-form {
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  height:0 !important;
  min-height:0 !important;
  max-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
}
.t-rec.uc-td-hide-old,
.uc-td-hide-old,
.td-hide-old,
.uc-td-old-photo {
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  height:0 !important;
  min-height:0 !important;
  max-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

/* === FIX v35: вернуть цвета как в согласованной версии ===
   Основной цвет ТехДоктор — фиолетовый.
   Оранжевый оставлен только как акцент Профи.ру / цены / вторичные кнопки.
*/
:root{
  --accent:#6654f1 !important;
  --accent2:#5142db !important;
  --soft:#f0edff !important;
  --orange:#ff5a00 !important;
  --orange2:#fff6ee !important;
}
.td-header .logo,
.logo{
  background:linear-gradient(135deg,#6654f1,#5142db) !important;
  color:#fff !important;
}
.td-header .brand-title strong,
.brand-title strong{
  color:#0b1220 !important;
}
.td-header .brand-title span,
.brand-title span{
  color:#566276 !important;
}
.td-header .td-nav a,
.td-nav a{
  color:#131a2a !important;
  background:transparent !important;
}
.td-header .td-nav a:hover,
.td-nav a:hover{
  color:#5142db !important;
  background:#f2f4fb !important;
}
.btn.primary,
a.btn.primary,
button.btn.primary{
  background:linear-gradient(135deg,#6654f1,#5142db) !important;
  color:#fff !important;
  border-color:rgba(102,84,241,.35) !important;
  box-shadow:0 14px 34px rgba(102,84,241,.22) !important;
}
.btn.primary *,
a.btn.primary *,
button.btn.primary *{
  color:#fff !important;
}
.btn.orange,
a.btn.orange,
button.btn.orange{
  background:#fff6ee !important;
  color:#ff5a00 !important;
  border-color:#ffb27c !important;
}
.btn.orange *,
a.btn.orange *,
button.btn.orange *{
  color:#ff5a00 !important;
}
.header-actions .btn.orange,
.header-actions a.btn.orange{
  background:#fff6ee !important;
  color:#ff5a00 !important;
  border-color:#ffb27c !important;
}
.chip:before,
.eyebrow:before{
  background:#6654f1 !important;
}
.eyebrow{
  color:#2d256f !important;
  border-color:#dad5ff !important;
}
.tab-btn.active{
  background:#f0edff !important;
  border-color:#cfc7ff !important;
  color:#0b1220 !important;
}
.num,
.step-num{
  color:#6654f1 !important;
  border-color:#d8d2ff !important;
}
.order-card{
  border-top-color:#b9aaff !important;
}
.input.phone-error{
  border-color:#ff5a00 !important;
  box-shadow:0 0 0 3px rgba(255,90,0,.12) !important;
}
.optional-label{font-size:14px;color:#8a93a6;font-weight:700}
.phone-error-text{
  color:#d94800 !important;
}

/* === FIX v36: согласованные цвета и кнопки ===
   Фиолетовый — основной CTA.
   Оранжевый — акцент Профи.ру / цены / вторичные действия.
   Обычная кнопка "Оставить заявку" в hero — белая с тёмным текстом.
*/
:root{
  --accent:#6654f1 !important;
  --accent2:#5142db !important;
  --soft:#f0edff !important;
  --orange:#ff5a00 !important;
  --orange2:#fff6ee !important;
}
.logo,
.td-header .logo{
  background:linear-gradient(135deg,#6654f1,#5142db) !important;
  color:#fff !important;
}
.brand-title strong,
.td-header .brand-title strong{
  color:#0b1220 !important;
}
.brand-title span,
.td-header .brand-title span{
  color:#566276 !important;
}
.td-nav a,
.td-header .td-nav a{
  color:#131a2a !important;
  background:transparent !important;
}
.td-nav a:hover,
.td-header .td-nav a:hover{
  color:#5142db !important;
  background:#f2f4fb !important;
}
.btn.primary,
a.btn.primary,
button.btn.primary{
  background:linear-gradient(135deg,#6654f1,#5142db) !important;
  color:#fff !important;
  border-color:rgba(102,84,241,.35) !important;
  box-shadow:0 14px 34px rgba(102,84,241,.22) !important;
}
.btn.primary *,
a.btn.primary *,
button.btn.primary *{
  color:#fff !important;
}
.btn.ghost,
a.btn.ghost,
button.btn.ghost,
.hero-actions .btn.ghost,
.hero-actions a.btn.ghost{
  background:#fff !important;
  color:#0b1220 !important;
  border-color:#e1e6ef !important;
  box-shadow:none !important;
}
.btn.ghost *,
a.btn.ghost *,
button.btn.ghost *{
  color:#0b1220 !important;
}
.btn.orange,
a.btn.orange,
button.btn.orange{
  background:#fff6ee !important;
  color:#ff5a00 !important;
  border-color:#ffb27c !important;
}
.btn.orange *,
a.btn.orange *,
button.btn.orange *{
  color:#ff5a00 !important;
}
.header-actions .btn.orange,
.header-actions a.btn.orange{
  background:#fff6ee !important;
  color:#ff5a00 !important;
  border-color:#ffb27c !important;
}
.chip:before,
.eyebrow:before{
  background:#6654f1 !important;
}
.eyebrow{
  color:#2d256f !important;
  border-color:#dad5ff !important;
}
.tab-btn.active{
  background:#f0edff !important;
  border-color:#cfc7ff !important;
  color:#0b1220 !important;
}
.num,
.step-num{
  color:#6654f1 !important;
  border-color:#d8d2ff !important;
}
.order-card{
  border-top-color:#b9aaff !important;
}


/* === FIX v37: крупнее мобильная типографика ===
   По мобильной проверке: увеличены офферы, карточки неисправностей, этапы, FAQ и форма.
*/
@media (max-width:640px){
  body{font-size:16px;}
  .hero-card{padding:18px 16px;}
  h1{font-size:31px;line-height:1.12;letter-spacing:-.035em;}
  .hero-text{font-size:17px;line-height:1.48;}
  .eyebrow{font-size:14.5px;padding:8px 12px;line-height:1.2;}
  .chips{gap:8px;}
  .chip{font-size:13.5px;padding:8px 10px;line-height:1.15;}
  .profi-mini{font-size:14.5px;padding:9px 12px;line-height:1.2;}
  .fine{font-size:14px;line-height:1.45;}
  .btn{font-size:16px;padding:13px 16px;border-radius:15px;}
  .header-actions .btn{font-size:15.5px;padding:10px 14px;}
  .header-actions .callibri_phone:after{font-size:15.5px;}
  .block-card h2,.section-title,.order-card h2{font-size:30px;line-height:1.15;}
  .lead,.order-sub{font-size:17px;line-height:1.45;}
  .repair-card{padding:18px 17px;gap:14px;border-radius:20px;}
  .repair-card h3{font-size:22px;line-height:1.18;}
  .repair-card ul{font-size:16.5px;line-height:1.5;padding-left:20px;}
  .repair-card li{margin:8px 0;}
  .visit{font-size:15.5px;line-height:1.3;}
  .price{font-size:22px;line-height:1.15;}
  .price b{font-size:30px;}
  .problem-box h3{font-size:21px;line-height:1.2;}
  .problem-box p{font-size:16px;line-height:1.45;}
  .step{padding:20px 18px;min-height:auto;}
  .step h3{font-size:22px;line-height:1.18;}
  .step p{font-size:17px;line-height:1.45;}
  .num{width:42px;height:42px;font-size:18px;margin-bottom:18px;}
  .review{min-width:86vw;}
  .review h3{font-size:18px;}
  .review p{font-size:16.5px;line-height:1.45;}
  .tag,.verified{font-size:14px;}
  .faq-q{font-size:18px;padding:17px 18px;}
  .faq-a{font-size:16px;line-height:1.45;}
  .field label{font-size:16px;}
  .input,.textarea{font-size:17px;padding:15px;}
  .consent{font-size:14px;line-height:1.45;}
  .footer{font-size:16px;line-height:1.45;}
}


/* === FIX v40: аккуратная мобильная типографика без развала сетки ===
   Откатили чрезмерное увеличение шрифтов: текст крупнее исходного, но шапка,
   карточки, форма и кнопки не расползаются на мобильных экранах.
*/
@media (max-width:980px){
  html,body{overflow-x:hidden!important;}
  .td-header-inner{gap:8px!important;}
  .brand{min-width:0!important;flex:1 1 auto!important;}
  .brand-title{min-width:0!important;}
  .brand-title strong{line-height:1.06!important;}
  .brand-title span{line-height:1.18!important;}
  .td-header .header-actions{min-width:auto!important;max-width:128px!important;flex:0 0 auto!important;overflow:hidden!important;}
  .td-header .header-actions a.callibri_phone,
  .td-header .header-actions a.callibri_phone *{font-size:0!important;line-height:0!important;letter-spacing:0!important;}
  .td-header .header-actions a.callibri_phone:after{content:'Позвонить'!important;font-size:14.5px!important;line-height:1!important;letter-spacing:0!important;}
  .td-header .header-actions .btn{padding:9px 13px!important;min-width:104px!important;max-width:124px!important;white-space:nowrap!important;overflow:hidden!important;}
}

@media (max-width:640px){
  body{font-size:15.5px!important;padding-top:60px!important;padding-bottom:0!important;}
  .container{padding:0 14px!important;}
  .td-header-inner{height:60px!important;gap:8px!important;}
  .logo{width:36px!important;height:36px!important;flex:0 0 36px!important;border-radius:13px!important;}
  .brand{gap:9px!important;max-width:calc(100% - 138px)!important;}
  .brand-title strong{font-size:16px!important;line-height:1.04!important;letter-spacing:-.02em!important;}
  .brand-title span{font-size:12px!important;line-height:1.14!important;max-width:150px!important;}

  h1{font-size:28px!important;line-height:1.14!important;letter-spacing:-.035em!important;}
  .hero-section{padding-top:8px!important;}
  .hero-card{padding:16px!important;border-radius:20px!important;gap:14px!important;}
  .hero-text{font-size:16px!important;line-height:1.45!important;}
  .eyebrow{font-size:13px!important;padding:8px 11px!important;line-height:1.18!important;}
  .chips{gap:7px!important;margin:12px 0 6px!important;}
  .chip{font-size:13px!important;padding:7px 9px!important;line-height:1.15!important;}
  .profi-mini{font-size:13.5px!important;padding:8px 11px!important;line-height:1.18!important;}
  .fine{font-size:14px!important;line-height:1.45!important;}
  .btn{font-size:15px!important;padding:12px 14px!important;border-radius:15px!important;}
  .hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;}
  .hero-actions .btn{width:100%!important;}
  .hero-actions .call-main{font-size:14.5px!important;padding:13px 10px!important;line-height:1.18!important;text-align:center!important;white-space:normal!important;}
  .hero-actions .call-main .full-label{display:block!important;max-width:100%!important;}
  .media-card{border-radius:20px!important;}
  .media-card img{border-radius:16px!important;}
  .photo-caption{font-size:14px!important;line-height:1.35!important;}

  .block-card,.order-card{padding:18px 16px!important;border-radius:20px!important;margin-top:12px!important;}
  .block-card h2,.section-title,.order-card h2{font-size:27px!important;line-height:1.15!important;letter-spacing:-.025em!important;}
  .lead,.order-sub{font-size:16px!important;line-height:1.45!important;}
  .cards,.offer-grid,.steps{grid-template-columns:1fr!important;gap:12px!important;}
  .repair-card{padding:16px!important;gap:12px!important;border-radius:19px!important;min-height:auto!important;}
  .repair-card h3{font-size:20px!important;line-height:1.2!important;}
  .repair-card ul{font-size:15.5px!important;line-height:1.45!important;padding-left:18px!important;}
  .repair-card li{margin:7px 0!important;}
  .visit{font-size:14.5px!important;line-height:1.3!important;}
  .price{font-size:20px!important;line-height:1.15!important;}
  .price b{font-size:26px!important;line-height:1.1!important;}
  .problem-box{align-items:stretch!important;flex-direction:column!important;padding:14px!important;border-radius:17px!important;}
  .problem-box h3{font-size:18px!important;line-height:1.2!important;}
  .problem-box p{font-size:15.5px!important;line-height:1.42!important;}
  .problem-box .btn{width:100%!important;}

  .step{padding:17px 16px!important;border-radius:19px!important;min-height:auto!important;}
  .step h3{font-size:19px!important;line-height:1.2!important;}
  .step p{font-size:15.5px!important;line-height:1.42!important;}
  .num{width:38px!important;height:38px!important;font-size:16px!important;margin-bottom:14px!important;}
  .reviews-head{grid-template-columns:1fr!important;gap:12px!important;}
  .review{min-width:84vw!important;padding:16px!important;}
  .review h3{font-size:17px!important;}
  .review p{font-size:15.5px!important;line-height:1.42!important;}
  .tag,.verified{font-size:13px!important;}
  .faq-q{font-size:16.5px!important;padding:16px!important;}
  .faq-a{font-size:15.5px!important;line-height:1.42!important;}
  .field label{font-size:15px!important;}
  .input,.textarea{font-size:16px!important;padding:14px!important;border-radius:14px!important;}
  .consent{font-size:13px!important;line-height:1.45!important;}
  .footer{font-size:15px!important;line-height:1.45!important;}
  .footer-inner{display:block!important;}
}

@media (max-width:380px){
  .brand-title strong{font-size:15px!important;}
  .brand-title span{font-size:11.5px!important;max-width:130px!important;}
  .td-header .header-actions{max-width:118px!important;}
  .td-header .header-actions .btn{min-width:98px!important;max-width:116px!important;padding:8px 11px!important;}
  .td-header .header-actions a.callibri_phone:after{font-size:14px!important;}
  h1{font-size:26.5px!important;}
  .hero-text{font-size:15.5px!important;}
  .chip{font-size:12.5px!important;padding:7px 8px!important;}
  .hero-actions .call-main{font-size:13.8px!important;}
  .block-card h2,.section-title,.order-card h2{font-size:25.5px!important;}
  .repair-card h3{font-size:19px!important;}
}