/* ═══════════════════════════════════════════════════════════
   SOFT-LAB THEME — MAIN STYLESHEET
   ═══════════════════════════════════════════════════════════ */

/* ─── UTILITIES ──────────────────────────────────────────── */
.container { max-width: 1380px; margin: 0 auto; padding-left: 64px; padding-right: 64px; }
/* Longhand, never `padding: 72px 0`. Elements carry both classes
   (`<div class="container section">`), so the shorthand would reset the
   horizontal padding .container sets above and push the content to the
   screen edges. Same trap applies to any rule targeting .section. */
.section    { padding-top: 72px; padding-bottom: 72px; }
.section--offwhite { background: var(--offwhite); }
.section--extra-bottom { padding-bottom: 112px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 28px; border-radius: 8px; font-family: var(--font-head);
  font-weight: 700; font-size: 14px; cursor: pointer; border: none;
  text-decoration: none; transition: opacity .2s, transform .15s;
  white-space: nowrap;
}
.btn:hover { opacity: .88; transform: translateY(-1px); }
.btn--blue         { background: var(--blue);   color: #fff; }
.btn--accent       { background: var(--green);  color: #fff; }
.btn--outline      { background: transparent;   color: var(--blue); border: 1.5px solid var(--blue-light); }
.btn--outline-white{ background: transparent;   color: #fff; border: 1.5px solid rgba(255,255,255,.35); }
.btn--full         { width: 100%; }
.btn--lg           { padding: 15px 32px; font-size: 15px; }

.section-label {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue-light); margin-bottom: 12px;
}
.section-title {
  font-family: var(--font-head); font-weight: 800; font-size: 36px;
  color: var(--charcoal); letter-spacing: -.02em; line-height: 1.15;
  margin-bottom: 40px;
}

.img-placeholder {
  width: 100%; background:
    repeating-linear-gradient(45deg,#d4dce8 0,#d4dce8 1px,#dde5ef 1px,#dde5ef 10px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--slate); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; text-align: center; padding: 20px;
}

.badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; }
.badge--green { background: var(--green-pale); color: var(--green); border: 1px solid var(--green); }

/* ─── NAVBAR ─────────────────────────────────────────────── */
.navbar {
  position: sticky; top: 0; z-index: 200;
  background: var(--blue); box-shadow: 0 2px 16px rgba(0,0,0,.18);
}
.navbar__inner {
  max-width: 100%; margin: 0; padding: 0 48px;
  height: 72px; display: flex; align-items: center; gap: 36px;
}
.navbar__logo { display: flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; flex-shrink: 0; }
.navbar__logo img.custom-logo { height: 40px; width: auto; max-width: none; display: block; }
.navbar__logo-badge {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--brand-navy); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800; font-size: 16px; color: #fff;
}
.navbar__logo-text { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: #fff; letter-spacing: -.01em; }
.navbar__menu { display: flex; gap: 0; list-style: none; }
.navbar__menu li a, .navbar__menu li a:visited {
  font-size: 14px; color: rgba(255,255,255,.8); padding: 4px 0;
  border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
  margin: 0 18px; display: block;
}
.navbar__menu li a:hover,
.navbar__menu li.current-menu-item > a { color: var(--green); border-bottom-color: var(--green); }
.navbar__cta { margin-left: 12px; padding: 10px 22px; font-size: 13px; }
.navbar__burger { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 4px; }
.navbar__burger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: .3s; }

/* ─── HERO ───────────────────────────────────────────────── */
.hero {
  display: grid; grid-template-columns: 1fr 1fr; min-height: 580px;
  background: var(--offwhite);
}
.hero__content {
  padding: 72px 64px; display: flex; flex-direction: column;
  justify-content: center; gap: 22px;
}
.hero__badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px;
  background: var(--blue-pale); border-radius: 100px; border: 1px solid var(--border);
  font-size: 12px; color: var(--blue-mid); font-weight: 500; width: fit-content;
}
.hero__badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue-light); flex-shrink: 0; }
.hero__title {
  font-family: var(--font-head); font-weight: 800; font-size: 52px;
  line-height: 1.1; letter-spacing: -.03em; color: var(--charcoal);
  overflow-wrap: break-word;
}
.hero__title--accent { color: var(--blue-mid); }
.hero__sub  { font-size: 14px; color: var(--slate); line-height: 1.75; max-width: 400px; }
.hero__free-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
  background: var(--green-pale); border-radius: 8px; border: 1px solid var(--green);
  font-size: 13px; color: var(--green); font-weight: 600; width: fit-content;
}
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__image { overflow: hidden; }
.hero__image .img-placeholder { height: 100%; min-height: 580px; }
.hero__img  { width: 100%; height: 100%; object-fit: cover; }

/* ─── TRUST BAR ──────────────────────────────────────────── */
.trust-bar {
  background: var(--blue-pale); padding: 20px 64px;
  display: flex; justify-content: space-between; gap: 16px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.trust-bar__item { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--slate); }
.trust-bar__item span:first-child { font-size: 18px; }

/* ─── STATS BAR ──────────────────────────────────────────── */
.stats-bar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--blue-dark); padding: 32px 64px;
}
.stats-bar__item { text-align: center; padding: 8px 16px; border-right: 1px solid rgba(255,255,255,.12); }
.stats-bar__item:last-child { border-right: none; }
.stats-bar__item strong { display: block; font-family: var(--font-head); font-weight: 800; font-size: 36px; color: var(--amber); }
.stats-bar__item span   { font-size: 12px; color: rgba(255,255,255,.7); margin-top: 4px; display: block; }

/* ─── SERVICE CARDS ──────────────────────────────────────── */
.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.service-card {
  padding: 32px; border-radius: 12px;
  border: 1.5px solid var(--border); background: var(--white);
  transition: border-color .2s, background .2s; cursor: pointer;
  text-decoration: none; color: var(--charcoal); display: flex; flex-direction: column; gap: 10px;
}
.service-card:hover { border-color: var(--blue-mid); background: var(--blue-pale); }
.service-card__icon  { font-size: 32px; }
.service-card__title { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--charcoal); }
.service-card__desc  { font-size: 13px; color: var(--slate); line-height: 1.65; flex: 1; }
.service-card__link  { font-size: 13px; color: var(--blue-mid); font-weight: 600; margin-top: auto; }

/* ─── ABOUT SPLIT ────────────────────────────────────────── */
.about-split { display: grid; grid-template-columns: 1fr 1fr; background: var(--blue-pale); }
.about-split--hero { background: var(--offwhite); }
.about-split__image .img-placeholder { min-height: 480px; height: 100%; }
.about-split__img   { width: 100%; height: 100%; object-fit: cover; }
/* The Customizer's Additional CSS carries a fixed height + center-alignment
   rule for .about-split--hero .about-split__img, tuned specifically for the
   О Компании photo's crop — it also matches this page's identical hero
   markup, forcing a mismatched fixed height with blank space above/below
   whenever this page's text column and image don't happen to line up.
   Overridden here at higher specificity rather than editing that shared
   rule, since it is correctly tuned for a different page and photo. */
.page-template-page-uslugi-php .about-split { align-items: stretch !important; }
.page-template-page-uslugi-php .about-split.about-split--hero .about-split__img {
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}
.about-split__content {
  padding: 72px 64px; display: flex; flex-direction: column;
  justify-content: center; gap: 16px;
}
.about-split__content--left { order: -1; }
.about-split__content p { font-size: 14px; color: var(--slate); line-height: 1.75; max-width: 440px; }
.about-split__sub { color: var(--slate-light) !important; font-size: 13px !important; }

/* ─── CTA STRIP ──────────────────────────────────────────── */
.cta-strip {
  background: var(--charcoal); padding: 64px;
  display: flex; justify-content: space-between; align-items: center; gap: 32px;
}
.cta-strip__text h2 { font-family: var(--font-head); font-weight: 800; font-size: 32px; color: #fff; letter-spacing: -.02em; margin-bottom: 8px; }
.cta-strip__text p  { font-size: 14px; color: var(--slate-light); }
.cta-strip__actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* ─── FOOTER ─────────────────────────────────────────────── */
.site-footer { background: var(--blue-dark); }
.footer__top {
  padding: 48px 64px; display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;
}
.footer__logo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer__logo img.custom-logo { height: 32px; width: auto; max-width: none; display: block; }
.footer__logo-badge {
  width: 32px; height: 32px; border-radius: 7px; background: var(--brand-navy);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800; font-size: 14px; color: #fff;
}
.footer__logo span { font-family: var(--font-head); font-weight: 700; font-size: 16px; color: #fff; }
.footer__tagline { font-size: 13px; color: rgba(255,255,255,.45); line-height: 1.65; max-width: 240px; }
.footer__col-title { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 14px; }
.footer__links { list-style: none; }
.footer__links li, .footer__links a { display: block; font-size: 13px; color: rgba(255,255,255,.6); text-decoration: none; margin-bottom: 8px; line-height: 1.5; }
.footer__links a:hover { color: rgba(255,255,255,.9); }
.footer__hours { font-size: 13px; color: rgba(255,255,255,.6); }
.footer__legal {
  border-top: 1px solid rgba(255,255,255,.08); padding: 14px 64px;
  font-size: 12px; color: rgba(255,255,255,.45);
}
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.08); padding: 16px 64px;
  display: flex; justify-content: space-between; gap: 16px;
}
.footer__bottom span, .footer__bottom a { font-size: 12px; color: rgba(255,255,255,.3); text-decoration: none; }

/* ─── FLOATING CTA ───────────────────────────────────────── */
.floating-cta { position: fixed; bottom: 28px; right: 28px; z-index: 500; opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .4s; pointer-events: none; }
.floating-cta.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.floating-cta__btn {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 22px; background: var(--blue); color: #fff;
  border-radius: 50px; font-family: var(--font-head); font-weight: 700; font-size: 14px;
  text-decoration: none; box-shadow: 0 8px 28px rgba(0,0,0,.22);
  transition: transform .2s;
}
.floating-cta__btn:hover { transform: translateY(-2px); }
.floating-cta__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; }

/* ─── PAGE HERO ──────────────────────────────────────────── */
.page-hero { background: var(--offwhite); padding: 64px 0 56px; border-bottom: 1px solid var(--border); }
.page-hero--contacts .container { max-width: 1380px; }
.page-hero__title { font-family: var(--font-head); font-weight: 800; font-size: 46px; letter-spacing: -.03em; line-height: 1.1; margin: 12px 0 18px; max-width: 640px; }
.page-hero__sub   { font-size: 15px; color: var(--slate); line-height: 1.75; max-width: 560px; margin-bottom: 30px; }
.page-hero__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ─── TABS (УСЛУГИ) ──────────────────────────────────────── */
.tabs__nav { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 48px; gap: 4px; overflow-x: auto; overflow-y: hidden; }
.tabs__btn {
  padding: 12px 18px; background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -2px; cursor: pointer; font-family: var(--font-head); font-weight: 600; font-size: 14px;
  color: var(--slate); transition: color .15s, border-color .15s; white-space: nowrap;
}
.tabs__btn.active, .tabs__btn:hover { color: var(--blue); border-bottom-color: var(--blue); }
.tabs__panel { display: none; }
.tabs__panel.active { display: block; }
.tabs__accordion-header {
  display: none; width: 100%; align-items: center; justify-content: space-between;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font-head); font-weight: 600; font-size: 15px; color: var(--charcoal);
  padding: 18px 4px;
}
.tabs__accordion-header.active { color: var(--blue-mid); }
.tabs__accordion-icon { font-size: 20px; color: var(--slate); transition: transform .2s; flex-shrink: 0; }
.tabs__accordion-header.active .tabs__accordion-icon { transform: rotate(45deg); color: var(--blue-mid); }

/* Tab content and the enquiry form sit side by side, and the form used to be
   far the taller of the two — eight stacked fields against a 5-6 line
   checklist — which left a large dead area under the checklist, since a grid
   row is always as tall as its tallest cell. Two things close that gap
   instead of trying to hide it: the four short contact fields pair up
   two-across so the form is roughly half its former height, and the result
   box is pushed to the bottom of its column so whatever difference remains
   falls between the checklist and the result box, reading as spacing rather
   than as content running out. Both columns stay in normal flow, so the form
   can never overhang the section below it. Below 1101px there's no room for
   two columns and it all stacks. */
.service-detail { padding: 40px; background: var(--offwhite); border-radius: 16px; }
.service-detail__tagline { font-size: 15px; color: var(--blue-mid); font-weight: 500; font-style: italic; margin-bottom: 16px; }
.service-detail__main h2 { font-family: var(--font-head); font-weight: 800; font-size: 32px; color: var(--charcoal); letter-spacing: -.02em; margin-bottom: 28px; }
.service-detail__sidebar { background: var(--white); border-radius: 16px; padding: 32px; border: 1px solid var(--border); margin-top: 32px; }

@media (min-width: 1101px) {
  .service-detail { display: grid; grid-template-columns: 1fr 440px; gap: 48px; }
  .service-detail__sidebar { margin-top: 0; align-self: start; }
  .service-detail__main { display: flex; flex-direction: column; }
  .service-detail__main .tabs__panel.active,
  .service-detail__main .tabs__panel-body { display: flex; flex-direction: column; flex: 1; }
  .service-detail__main .result-box { margin-top: auto; }
  /* CF7 emits one <p> per field; the first four are the short contact ones. */
  .service-detail__sidebar .wpcf7-form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .service-detail__sidebar .wpcf7-form > * { grid-column: 1 / -1; }
  .service-detail__sidebar .wpcf7-form > p:nth-of-type(-n+4) { grid-column: auto; }
  .service-detail__sidebar .wpcf7-form p { margin-bottom: 8px !important; }
  .service-detail__sidebar .wpcf7-form textarea { height: 88px !important; }
}

.checklist-label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); margin-bottom: 16px; }
.checklist { display: flex; flex-direction: column; gap: 12px; list-style: none; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.checklist li::before {
  content: '✓'; width: 20px; height: 20px; border-radius: 50%;
  background: var(--blue-pale); border: 1.5px solid var(--blue-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--blue); flex-shrink: 0; margin-top: 1px;
  font-family: var(--font-head);
}
.result-box { margin-top: 28px; padding: 18px 22px; background: var(--green-pale); border-radius: 10px; border: 1px solid var(--green); }
.result-box__label { font-size: 11px; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.result-box p { font-size: 14px; line-height: 1.6; }

/* ─── FAQ ────────────────────────────────────────────────── */
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.faq__item { border-top: 1px solid var(--border); }
.faq__question {
  width: 100%; background: none; border: none; padding: 22px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  cursor: pointer; font-family: var(--font-head); font-weight: 600; font-size: 15px;
  color: var(--charcoal); text-align: left; line-height: 1.4; transition: background .15s;
}
.faq__question:hover { background: var(--blue-pale); }
.faq__icon { font-size: 20px; color: var(--slate); flex-shrink: 0; transition: transform .2s; }
.faq__question[aria-expanded="true"] .faq__icon { transform: rotate(45deg); }
.faq__answer { display: none; padding: 0 22px 22px; }
.faq__answer p { font-size: 13px; color: var(--slate); line-height: 1.7; }

/* ─── VALUES ─────────────────────────────────────────────── */
.values-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 32px; }
.value-card { display: flex; flex-direction: column; gap: 12px; }
.value-card__icon { width: 52px; height: 52px; border-radius: 14px; background: var(--blue-pale); display: flex; align-items: center; justify-content: center; font-size: 24px; }
.value-card h3 { font-family: var(--font-head); font-weight: 700; font-size: 18px; }
.value-card p  { font-size: 13px; color: var(--slate); line-height: 1.65; }

/* ─── TEAM ───────────────────────────────────────────────── */
.team-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.team-card { background: var(--white); border-radius: 14px; overflow: hidden; border: 1px solid var(--border); }
.team-card__photo { height: 240px; }
.team-card__info { padding: 22px; }
.team-card__info h3 { font-family: var(--font-head); font-weight: 700; font-size: 17px; margin-bottom: 4px; }
.team-card__role    { font-size: 13px; color: var(--blue-mid); font-weight: 500; margin-bottom: 6px; }
.team-card__exp     { font-size: 12px; color: var(--slate-light); }

/* ─── TESTIMONIALS ───────────────────────────────────────── */
.testimonials-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.testimonial-card { padding: 30px; border-radius: 14px; border: 1.5px solid var(--border); display: flex; flex-direction: column; gap: 18px; }
.testimonial-card__stars { color: var(--amber); font-size: 16px; letter-spacing: 2px; }
.testimonial-card__text  { font-size: 14px; color: var(--charcoal); line-height: 1.75; font-style: italic; flex: 1; }
.testimonial-card__author { display: flex; gap: 12px; align-items: center; padding-top: 16px; border-top: 1px solid var(--border); }
.testimonial-card__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--blue-pale); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.testimonial-card__name   { font-size: 13px; font-weight: 600; }
.testimonial-card__city   { font-size: 11px; color: var(--slate-light); }

/* ─── WHY US ─────────────────────────────────────────────── */
.why-us { background: var(--blue); padding: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.why-us__left h2 { font-family: var(--font-head); font-weight: 800; font-size: 36px; color: #fff; letter-spacing: -.025em; margin-bottom: 28px; }
.why-us__list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.why-us__list li { display: flex; gap: 12px; align-items: center; font-size: 14px; color: rgba(255,255,255,.85); }
.why-us__check { width: 22px; height: 22px; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; font-weight: 700; flex-shrink: 0; }
.why-us__form  { background: rgba(255,255,255,.08); border-radius: 16px; padding: 36px; }

/* ─── COURSES ────────────────────────────────────────────── */
.courses-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.course-card  { border-radius: 14px; border: 1.5px solid var(--border); overflow: hidden; background: var(--white); transition: border-color .2s; }
.course-card:hover { border-color: var(--blue-mid); }
.course-card__header { display: flex; justify-content: space-between; align-items: flex-start; padding: 28px 28px 0; margin-bottom: 14px; }
.course-card__icon   { font-size: 28px; }
.course-card__badge  { padding: 4px 12px; border-radius: 100px; background: var(--blue-pale); color: var(--blue); font-size: 11px; font-weight: 700; }
.course-card__title  { font-family: var(--font-head); font-weight: 700; font-size: 20px; color: var(--charcoal); padding: 0 28px; margin-bottom: 10px; }
.course-card__desc   { font-size: 13px; color: var(--slate); line-height: 1.6; padding: 0 28px; margin-bottom: 16px; }
.course-card__meta   { display: flex; gap: 16px; padding: 0 28px 20px; flex-wrap: wrap; }
.course-card__meta span { font-size: 12px; color: var(--slate); display: flex; gap: 4px; align-items: center; }
.course-card__topics { padding: 0 28px 20px; }
.course-card__footer { display: flex; justify-content: space-between; align-items: center; padding: 14px 28px; border-top: 1px solid var(--border); }
.course-card__footer span { font-size: 13px; color: var(--slate); }
.course-card__toggle { background: none; border: none; font-size: 13px; color: var(--blue-mid); font-weight: 600; cursor: pointer; font-family: var(--font-head); }

/* ─── AUDIENCE ───────────────────────────────────────────── */
.audience-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.audience-card { padding: 28px; background: var(--white); border-radius: 12px; border: 1px solid var(--border); }
.audience-card__icon { font-size: 32px; margin-bottom: 14px; }
.audience-card h3 { font-family: var(--font-head); font-weight: 700; font-size: 16px; margin-bottom: 10px; }
.audience-card p  { font-size: 13px; color: var(--slate); line-height: 1.6; }

/* ─── ENROLL ─────────────────────────────────────────────── */
.enroll-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.enroll-features { list-style: none; margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.enroll-features li { font-size: 14px; color: var(--charcoal); }
.hero__meta { display: flex; gap: 20px; flex-wrap: wrap; }
.hero__meta span { font-size: 13px; color: var(--slate); }

/* ─── CONTACTS PAGE ──────────────────────────────────────── */
.contacts-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding: 64px; max-width: 1380px; margin: 0 auto; }
.contacts-hero__guarantees { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.guarantee-item { display: flex; gap: 12px; align-items: center; }
.guarantee-item > span:first-child { width: 36px; height: 36px; border-radius: 10px; background: var(--blue-pale); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.guarantee-item > span:last-child { font-size: 14px; color: var(--charcoal); }
.contacts-hero__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: start; }
.contact-info-card { padding: 22px; background: var(--white); border-radius: 12px; border: 1px solid var(--border); }
.contact-info-card__icon  { font-size: 24px; margin-bottom: 10px; }
.contact-info-card__label { font-size: 11px; font-weight: 600; color: var(--blue-light); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; }
.contact-info-card__line  { font-size: 14px; color: var(--charcoal); line-height: 1.6; }
.contact-info-card__line:first-of-type { font-weight: 500; }

.contacts-main { display: grid; grid-template-columns: 1fr 1fr; }
.contacts-main__form { padding: 64px; }
.contacts-main__map-col { display: flex; flex-direction: column; }
.contacts-map iframe, .contacts-map .img-placeholder, .contacts-map .map-facade { height: 400px; }
.map-facade { display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; background: var(--blue-pale); border-bottom: 1px solid var(--border); }
.map-facade__inner { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 320px; }
.map-facade__address { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--blue); }
.map-facade__note { font-size: 12px; color: var(--slate); line-height: 1.5; }
.contacts-social { padding: 32px 40px; background: var(--offwhite); flex: 1; border-top: 1px solid var(--border); }
.social-links { display: flex; gap: 14px; margin-top: 16px; margin-bottom: 20px; }
.social-link  { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--white); border: 1px solid var(--border); border-radius: 10px; text-decoration: none; flex: 1; }
.social-link span:first-child { font-size: 20px; }
.social-link div { display: flex; flex-direction: column; }
.social-link strong { font-size: 13px; color: var(--charcoal); }
.social-link span:not(:first-child) { font-size: 11px; color: var(--slate); }
.contacts-address-note { background: var(--white); border-radius: 10px; border: 1px solid var(--border); padding: 18px; }
.contacts-address-note p:first-child { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.contacts-address-note p:last-child  { font-size: 13px; color: var(--slate); line-height: 1.65; }

.alt-channels { background: var(--blue-pale); padding: 44px 0; }
.alt-channels__title { font-family: var(--font-head); font-weight: 700; font-size: 18px; margin-bottom: 24px; letter-spacing: -.01em; }
.alt-channels__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.alt-channel { display: flex; align-items: center; gap: 14px; padding: 18px 22px; background: var(--white); border-radius: 10px; border: 1px solid var(--border); }
.alt-channel__icon  { font-size: 24px; flex-shrink: 0; }
.alt-channel__title { font-size: 13px; font-weight: 600; color: var(--charcoal); }
.alt-channel__value { font-size: 14px; color: var(--blue); font-weight: 500; }
.alt-channel__note  { font-size: 11px; color: var(--slate); margin-top: 2px; }

/* ─── FORMS ──────────────────────────────────────────────── */
.contact-form { display: flex; flex-direction: column; gap: 14px; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%; padding: 13px 16px; border: 1px solid var(--border);
  border-radius: 8px; font-family: var(--font-body); font-size: 14px;
  color: var(--charcoal); background: var(--white); outline: none;
  transition: border-color .2s;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { border-color: var(--blue-mid); }
.contact-form textarea { resize: vertical; }
.form-row    { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-field  { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: 12px; font-weight: 600; color: var(--slate); }
.consent-label { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; color: var(--slate-light); line-height: 1.6; cursor: pointer; }
.consent-label input { margin-top: 3px; accent-color: var(--blue); flex-shrink: 0; width: auto; }
.consent-label a { color: var(--blue-mid); }
/* ─── GENERIC PAGE CONTENT (privacy policy, legal text) ──── */
.page-content { max-width: 780px; margin: 0 auto; }
.page-content > h1 {
  font-family: var(--font-head); font-weight: 800; font-size: 38px;
  letter-spacing: -.02em; color: var(--charcoal); margin-bottom: 28px;
}
/* Russian legal vocabulary produces very long single words
   ("конфиденциальности", "Автоматизированные"). Let them break rather
   than run off the side of a narrow screen. */
.page-content > h1,
.entry-content h2,
.entry-content h3 { overflow-wrap: break-word; }
.entry-content { font-size: 15px; line-height: 1.75; color: var(--slate); }
.entry-content h2 {
  font-family: var(--font-head); font-weight: 800; font-size: 26px;
  color: var(--charcoal); margin: 48px 0 16px; padding-top: 8px;
}
.entry-content h3 {
  font-family: var(--font-head); font-weight: 700; font-size: 18px;
  color: var(--charcoal); margin: 32px 0 10px;
}
.entry-content p  { margin-bottom: 14px; }
.entry-content ul { margin: 0 0 18px; padding-left: 22px; list-style: disc; }
.entry-content li { margin-bottom: 8px; }
.entry-content strong { color: var(--charcoal); font-weight: 600; }
.entry-content a { color: var(--green); text-decoration: underline; }
.entry-content hr { border: 0; border-top: 1px solid var(--border); margin: 56px 0; }

.form-note   { font-size: 12px; color: var(--slate-light); text-align: center; }
.form-privacy-note { font-size: 11.5px; color: var(--slate-light); text-align: center; line-height: 1.5; margin-top: 8px; }
.form-success, .form-error { padding: 16px; border-radius: 8px; font-size: 14px; font-weight: 500; }
.form-success { background: var(--green-pale); color: var(--green); border: 1px solid var(--green); }
.form-error   { background: #fef2f2; color: #c0392b; border: 1px solid #f5c6cb; }

/* Lead form */
.lead-form { }
.lead-form--dark { }
.lead-form--dark input,
.lead-form--dark select,
.lead-form--dark textarea { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); color: #fff; }
.lead-form--dark input::placeholder,
.lead-form--dark textarea::placeholder { color: rgba(255,255,255,.45); }
.lead-form__title { font-family: var(--font-head); font-weight: 800; font-size: 22px; color: var(--charcoal); margin-bottom: 4px; letter-spacing: -.02em; }
.lead-form--dark .lead-form__title { color: #fff; }
.lead-form__sub { font-size: 13px; color: var(--slate); margin-bottom: 20px; }
.lead-form--dark .lead-form__sub { color: rgba(255,255,255,.55); }
.lead-form--dark .consent-label { color: rgba(255,255,255,.45); }

/* Contacts form with labels */
.contacts-form .form-field input,
.contacts-form .form-field select,
.contacts-form .form-field textarea { width: 100%; }

/* Enroll form */
.enroll-form { padding: 32px; border: 1.5px solid var(--border); border-radius: 16px; }

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1100px) {
  .container { padding-left: 32px; padding-right: 32px; }
  .navbar__inner { padding: 0 32px; gap: 24px; }
  .hero { grid-template-columns: 1fr; }
  .hero__image { display: none; }
  .services__grid { grid-template-columns: repeat(2,1fr); }
  .stats-bar { grid-template-columns: repeat(2,1fr); padding: 24px 32px; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .values-grid, .audience-grid { grid-template-columns: repeat(2,1fr); }
  .faq { grid-template-columns: 1fr; }
  .courses-grid { grid-template-columns: 1fr; }
  .contacts-hero { grid-template-columns: 1fr; }
  .contacts-main { grid-template-columns: 1fr; }
  .enroll-layout { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2,1fr); }
  .testimonials-grid { grid-template-columns: 1fr; }
  .why-us { grid-template-columns: 1fr; }
  .trust-bar { padding: 16px 32px; flex-wrap: wrap; gap: 12px; }
}

@media (max-width: 768px) {
  .section-title { font-size: 28px; }
  .hero__title { font-size: 38px; }
  .hero__content { padding: 40px 24px; }
  .page-hero__title { font-size: 32px; }
  .navbar__menu, .navbar__cta { display: none; }
  .navbar__burger { display: flex; }
  .navbar__menu.open { display: flex; flex-direction: column; position: absolute; top: 72px; left: 0; right: 0; background: var(--blue); padding: 20px 32px; gap: 0; }
  .navbar__menu.open li a { padding: 12px 0; margin: 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 16px; }
  .navbar__inner { position: relative; }
  .cta-strip { flex-direction: column; text-align: center; padding: 40px 24px; }
  .about-split { grid-template-columns: 1fr; }
  .about-split__content--left { order: 0; }
  .footer__top { grid-template-columns: 1fr; padding: 40px 24px; }
  .footer__legal { padding: 14px 24px; }
  .footer__bottom { padding: 16px 24px; flex-direction: column; gap: 8px; }
  .services__grid { grid-template-columns: 1fr; }
  .stats-bar { grid-template-columns: repeat(2,1fr); padding: 20px 24px; }
  .stats-bar__item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); padding: 12px; }
  .form-row { grid-template-columns: 1fr; }
  .alt-channels__grid { grid-template-columns: 1fr; }
  .contacts-hero { padding: 32px 24px; gap: 32px; }
  .contacts-hero__cards { grid-template-columns: 1fr; }
  .contacts-main__form { padding: 40px 24px; }
  /* The two social cards sit side by side and will not shrink below their
     content (301px), which with 40px side padding forced the whole column —
     and so the page — to 381px. Stack them instead. */
  .contacts-social { padding: 24px; }
  .social-links { flex-direction: column; }
  .why-us { padding: 40px 24px; }
  .service-detail { padding: 24px; }
  .service-detail__sidebar { margin-top: 24px; }
  .audience-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }

  /* Services tabs -> accordion (avoids an undiscoverable horizontally-scrolling tab row) */
  .tabs__nav { display: none; }
  .tabs__accordion-header { display: flex; }
  .tabs__panel { display: block; border-bottom: 1px solid var(--border); }
  .tabs__panel:last-child { border-bottom: none; }
  .tabs__panel .tabs__panel-body { display: none; padding-top: 8px; }
  .tabs__panel.active .tabs__panel-body { display: block; }

  /* Legal pages: 38px headings overflow a phone once .container's 32px side
     padding is taken off ("конфиденциальности" alone needs 423px at 38px). */
  .page-content > h1 { font-size: 26px; margin-bottom: 20px; }
  .entry-content { font-size: 14.5px; }
  .entry-content h2 { font-size: 21px; margin: 36px 0 12px; }
  .entry-content h3 { font-size: 17px; margin: 26px 0 8px; }
  .entry-content ul { padding-left: 20px; }
  .entry-content hr { margin: 40px 0; }

  /* The floating CTA sits over the middle of the text on a long legal
     document, hiding a line at a time as you scroll. */
  .page-legal .floating-cta { display: none; }
  /* On Контакты the floating CTA covers the form's submit button, and it
     links to the page the visitor is already on. */
  .page-contacts .floating-cta { display: none; }
  /* Longhand only: `padding: 44px 0 56px` here would also zero the horizontal
     padding .container sets, pushing the text to the screen edges. */
  .page-legal .section { padding-top: 44px; padding-bottom: 56px; }
}

@media (max-width: 400px) {
  .page-content > h1 { font-size: 24px; }
  .entry-content h2 { font-size: 19px; }
}

/* Smallest phones. Two things stop fitting before this point: "Автоматизация."
   in the hero needs 295px at 38px, and the two value columns need 316px. */
@media (max-width: 380px) {
  .hero__title { font-size: 34px; }
  .hero__content { padding: 36px 20px; }
  .values-grid { grid-template-columns: 1fr; }
}
/* ─── LOGO SLIDER ─────────────────────────────────────────── */
.logo-slider-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
}
.logo-slider-viewport {
  overflow: hidden;
  flex: 1;
}
.logo-slider-track {
  display: flex;
  align-items: center;
  gap: 48px;
  transition: transform 0.4s ease;
}
.logo-slide {
  flex: 0 0 160px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* The whole cell is the click target; the image must not swallow the click. */
.logo-slide a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.logo-slide img {
  max-width: 140px;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
}
.logo-slide:hover img,
.logo-slide a:hover img {
  filter: grayscale(0%);
  opacity: 1;
}
.logo-slider-prev,
.logo-slider-next {
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}
.logo-slider-prev:hover,
.logo-slider-next:hover {
  opacity: 0.8;
}
/* Set by the script when every logo already fits: nothing to page through,
   so the arrows go away and the row is centred instead of left-aligned. */
.logo-slider--static .logo-slider-prev,
.logo-slider--static .logo-slider-next { display: none; }
.logo-slider--static .logo-slider-track { justify-content: center; }

@media (max-width: 400px) {
  /* A 160px slide plus two 40px arrows does not fit the ~144px the container
     leaves on the narrowest phones. */
  .logo-slider-wrap { gap: 10px; }
  .logo-slider-track { gap: 20px; }
  .logo-slide { flex: 0 0 120px; height: 80px; }
  .logo-slide img { max-width: 110px; max-height: 60px; }
  .logo-slider-prev,
  .logo-slider-next { width: 32px; height: 32px; font-size: 15px; }
}