@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --blue-light: #acdfff;
  --blue-mid: #6bc6ff;
  --blue-pale: #eaf7ff;
  --blue-pale-2: #ceecff;
  --lime: #b2ff6b;
  --ink: #000000;
  --muted: #374957;
  --radius-lg: 20px;
  --radius-md: 7px;
  --container-max: 1880px;
  --gap: 20px;
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* scroll-behavior stays "auto" — Lenis owns all scroll smoothing below;
   native CSS smooth-scroll fights Lenis's own rAF-driven easing and is
   the cause of the "wait, then spring" stutter if both are active. */
html { scroll-behavior: auto; }

body {
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; transition: filter .18s ease; }
a:hover,
.menu-panel__close:hover,
.topbar__cta:hover { filter: brightness(1.25); }

.page { display: flex; flex-direction: column; gap: 40px; padding: 20px; }

section > * { max-width: var(--container-max); }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  border-radius: var(--radius-md);
  padding: 20px 30px;
  font-family: inherit;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.03em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.btn--lime { background: var(--lime); color: var(--ink); }
.btn--blue {
  background: var(--blue-mid);
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  padding: 10px;
  border-radius: var(--radius-md);
}

.cta-call { font-size: 16px; letter-spacing: -0.03em; color: var(--muted); }
.cta-call a { font-weight: 600; color: var(--ink); text-decoration: underline; white-space: nowrap; }

/* ── Topbar ── */
.hero { background: var(--blue-light); border-radius: var(--radius-lg); padding: 26px 20px; }

.topbar {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.topbar__burger {
  display: flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.topbar__burger-lines { display: flex; flex-direction: column; gap: 3px; width: 30px; }
.topbar__burger-lines span { display: block; height: 2px; width: 30px; background: var(--ink); }
.topbar__burger-label { font-weight: 700; font-size: 16px; letter-spacing: -0.03em; color: var(--ink); }
.topbar__logo { font-weight: 800; font-size: 18px; white-space: nowrap; }
.topbar__cta {
  background: var(--blue-mid);
  border-radius: var(--radius-md);
  padding: 10px;
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
}

/* ── Hero ── */
.hero__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); }

.hero__col {
  flex: 0 1 960px;
  min-width: 0;
  height: 921px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px; 
  padding-bottom:134px; 
}
.hero__title { line-height: 1; width: 100%; }
.hero__title-main {
  display: block;
  font-weight: 700;
  font-size: 100px;
  letter-spacing: -0.03em;
}
.hero__title-accent {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 50px; 
}
.hero__desc { font-size: 24px; letter-spacing: -0.03em; width: 458px; max-width: 100%; }

.hero__badges { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.hero__badges li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.7);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.hero__badges li::before { content: '✓'; font-weight: 700; }

.reveal-mask { display: block; overflow: hidden; width: 100%; }
.hero__desc-mask { width: 458px; max-width: 100%; }
.reveal-inner { display: block; transform: translateY(115%); }
.reveal-fade { opacity: 0; }

/* Hero entrance plays on pure CSS, not gated behind GSAP loading/parsing —
   the headline is the page's LCP-relevant content and must never wait on JS. */
@keyframes hero-reveal-up { to { transform: translateY(0%); } }
@keyframes hero-reveal-fade { to { opacity: 1; } }
.hero__text .reveal-inner {
  animation: hero-reveal-up 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
.hero__title .reveal-mask:nth-child(2) .reveal-inner { animation-delay: 0.12s; }
.hero__desc-mask .reveal-inner { animation-duration: 0.8s; animation-delay: 0.52s; }
.hero__text .reveal-fade {
  animation: hero-reveal-fade 0.6s ease forwards;
  animation-delay: 1.02s;
}
@media (prefers-reduced-motion: reduce) {
  .hero__text .reveal-inner,
  .hero__text .reveal-fade { animation: none !important; transform: translateY(0) !important; opacity: 1 !important; }
}

.hero__photo-wrap {
  position: relative;
  flex: 1 0 0%;
  min-width: 400px;
  height: 921px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
}
.hero__photo { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ── Intro ── */
.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 149px;
}
.intro__track { position: relative; height: 145vh; width: 100%; }
.intro__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  overflow: hidden;
}
.intro__heading {
  font-weight: 800;
  font-size: 70px;
  letter-spacing: -0.03em;
  text-align: center;
  max-width: 90%;
}
.intro__sticker {
  position: absolute;
  width: clamp(140px, 15vw, 260px);
  height: auto;
  border-radius: 12px;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.18));
}
.intro__sticker--mouse { top: 4%; left: 4%; }
.intro__sticker--keyboard { bottom: 4%; right: 4%; }
.intro__sticker--design { top: 4%; right: 5%; width: clamp(120px, 12vw, 210px); }

@media (max-width: 700px) {
  .intro__sticker { width: clamp(90px, 22vw, 150px); }
  .intro__sticker--design { width: clamp(80px, 18vw, 130px); }
  .intro__sticker--mouse { top: 2%; left: 2%; }
  .intro__sticker--keyboard { bottom: 2%; right: 2%; }
  .intro__sticker--design { top: 2%; right: 3%; } 
}
.intro__row { display: flex; align-items: center; justify-content: center; gap: 29px; flex-wrap: wrap; }
.intro__text {
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.03em;
  text-align: center;
  max-width: 807px;
}
.intro__squiggle { flex-shrink: 0; overflow: visible; }

/* ── Reasons ── */
.reasons { display: flex; flex-direction: column; align-items: center; gap: 140px; padding-bottom: 100px; }
.reasons__intro { display: flex; flex-wrap: wrap; align-items: center; width: 100%; max-width: var(--container-max); padding: 100px 20px; }
.reasons__intro-inner { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; height: 290px; align-items: flex-start; justify-content: center; }
.reasons__intro-row { display: flex; flex-wrap: wrap; row-gap: 20px; align-items: flex-start; justify-content: space-between; width: 100%; }
.reasons__label { font-weight: 600; font-size: 16px; letter-spacing: -0.03em; color: var(--muted); white-space: nowrap; }
.reasons__intro-text-wrap { flex: 1 0 0; min-width: 360px; max-width: 800px; display: flex; align-items: center; justify-content: center; padding-left: 20px; }
.reasons__intro-text { flex: 1 0 0; min-width: 0; font-weight: 500; font-size: 24px; letter-spacing: -0.03em; }
.reasons__intro-text p { margin-bottom: 4px; }
.reasons__intro-text p.dim { color: #bdbdbd; }

.reasons__list-wrap { display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: var(--container-max); padding: 20px; }
.reasons__list { display: flex; flex-direction: column; gap: 45px; align-items: flex-start; width: 100%; }
.reasons__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-bottom: 1px solid var(--muted);
  padding-bottom: 30px;
}
.reasons__row-text { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.reasons__row-title { font-weight: 700; font-size: 34px; letter-spacing: -0.03em; }
.reasons__row-desc { font-weight: 500; font-size: 24px; color: var(--muted); letter-spacing: -0.03em; width: 672px; max-width: 100%; }
.reasons__row-number { font-weight: 700; font-size: 34px; letter-spacing: -0.03em; text-align: right; width: 672px; flex-shrink: 0; }

/* ── Portfolio ── */
.portfolio { padding-top: 0px; }
.portfolio__card {
  background: var(--blue-pale);
  border-radius: var(--radius-lg);
  padding: 45px 18px;
}
.portfolio__heading { font-weight: 600; font-size: 36px; letter-spacing: -0.03em; margin-bottom: 27px; }
.portfolio__grid { display: flex; flex-direction: column; gap: 27px; }
.portfolio__row { display: flex; gap: var(--gap); align-items: flex-start; }

.case { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }
.case--reveal { opacity: 0; transform: translateY(15px); }
.case__cover {
  position: relative;
  height: 500px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  border: none;
  width: 100%;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.case__cover-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: #fff;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.03em;
}
.case__info {
  background: #fff;
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .35s ease, opacity .3s ease, padding .35s ease;
}
.case__info > * { overflow: hidden; }
.case.is-open .case__info {
  grid-template-rows: 1fr;
  opacity: 1;
  padding: 20px;
}
.case__info-row { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; min-height: 0; }
.case__info-text { flex: 1 1 320px; min-width: 0; }
.case__info-text h3 { font-weight: 600; font-size: 24px; letter-spacing: -0.03em; margin-bottom: 4px; }
.case__info-text p { font-size: 18px; letter-spacing: -0.03em; margin-top: 4px; }
.case__info-link { display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: 18px; letter-spacing: -0.03em; flex-shrink: 0; }

.case--overlay .case__cover { justify-content: space-between; }
.case__cover-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.2); border-radius: var(--radius-lg); }
.case__cover-title { position: relative; color: #fff; font-weight: 700; font-size: 24px; letter-spacing: -0.03em; }
.case__cover-plus { position: relative; color: #fff; font-weight: 700; font-size: 24px; letter-spacing: -0.03em; }

/* ── Pricing ── */
.pricing { padding-top: 130px; }
.pricing__row { display: flex; flex-wrap: wrap; gap: 195px 20px; align-items: center; }
.pricing__intro { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 50px; }
.pricing__label { font-weight: 600; font-size: 16px; letter-spacing: -0.03em; color: var(--muted); }
.pricing__body { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.pricing__text { font-weight: 500; font-size: 24px; letter-spacing: -0.03em; }
.pricing__text b { font-weight: 700; }

.pricing__cards { flex: 1 1 400px; min-width: 0; display: flex; flex-wrap: wrap; gap: 48px; }
.price-card { width: 223px; display: flex; flex-direction: column; gap: 25px; }
.price-card__title { font-weight: 500; font-size: 24px; letter-spacing: -0.03em; }
.price-card__desc { font-weight: 500; font-size: 16px; letter-spacing: -0.03em; color: var(--muted); margin-top: 7px; }
.price-card__cost { font-weight: 500; font-size: 16px; letter-spacing: -0.03em; color: var(--muted); }

/* ── Gallery ── */
.gallery { padding-top: 100px; }
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 19px 18px;
}
.gallery__item { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 3 / 4; cursor: pointer; }
.gallery__item img,
.gallery__item video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.gallery__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent #fff;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
  transition: opacity .2s ease, transform .2s ease;
}
.gallery__item.is-playing .gallery__play { opacity: 0; transform: translate(-50%, -50%) scale(.7); }

/* ── About ── */
.about { padding-top: 0px; }
.about__card {
  background: var(--blue-pale);
  border-radius: var(--radius-lg);
  padding: 45px;
  display: flex;
  gap: 48px;
  align-items: center;
}
.about__col { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.about__label { font-weight: 600; font-size: 16px; letter-spacing: -0.03em; color: var(--muted); }
.about__heading { font-weight: 800; font-size: 36px; letter-spacing: -0.03em; }
.about__text { font-weight: 500; font-size: 18px; letter-spacing: -0.03em; line-height: 1.5; }
.about__video {
  position: relative;
  flex: 1 1 320px;
  min-width: 0;
  max-width: 380px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  cursor: pointer;
  background: #000;
}
.about__photo { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── FAQ ── */
.faq { padding-top: 130px; }
.faq__label { font-weight: 600; font-size: 16px; letter-spacing: -0.03em; color: var(--muted); }
.faq__list { margin-top: 40px; border-top: 1px solid rgba(0,0,0,.12); }
.faq__item { border-bottom: 1px solid rgba(0,0,0,.12); }
.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.03em;
  cursor: pointer;
  list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__plus { font-weight: 700; font-size: 24px; flex-shrink: 0; transition: transform .2s ease; }
.faq__item[open] .faq__plus { transform: rotate(45deg); }
.faq__answer { padding: 0 0 24px; font-size: 18px; letter-spacing: -0.03em; line-height: 1.5; color: var(--muted); max-width: 720px; }

/* ── Lead form ── */
.lead-form { padding-top: 100px; }
.lead-form__card {
  background: var(--blue-pale);
  border-radius: var(--radius-lg);
  padding: 45px;
  display: flex;
  gap: 48px;
  align-items: center;
}
.lead-form__col { flex: 1 1 420px; min-width: 0; }
.lead-form__heading { font-weight: 800; font-size: 36px; letter-spacing: -0.03em; }
.lead-form__sub { font-size: 16px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.lead-form__form { margin-top: 8px; }
.lead-form__form .form-field:first-child { margin-top: 20px; }
.lead-form__alt { margin-top: 20px; font-size: 14px; color: var(--muted); }
.lead-form__alt a { font-weight: 600; color: var(--ink); text-decoration: underline; }
.lead-form__image { flex: 1 1 320px; min-width: 0; max-width: 380px; }
.lead-form__image img { width: 100%; border-radius: var(--radius-lg); }

/* ── Footer ── */
.site-footer { padding-top: 100px; }
.site-footer__card { background: var(--blue-pale-2); border-radius: var(--radius-lg); padding: 26px 20px; display: flex; flex-direction: column; gap: 30px; }
.site-footer__brand { font-weight: 800; font-size: 18px; }
.site-footer__tagline { font-size: 16px; margin-top: 7px; }
.site-footer__bottom { display: flex; flex-direction: column; gap: 10px; }
.site-footer__actions { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer__phone { font-weight: 700; font-size: 100px; }

/* ══════════════════════ RESPONSIVE ══════════════════════ */

@media (max-width: 1200px) {
  .hero__col { height: auto; justify-content: flex-start; gap: 272px; }
  .gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .hero__photo-wrap { width: 100%; min-width: 0; }
  .gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__phone { font-size: 80px; }
  .reasons { gap: 100px; }
  .reasons__intro-row { flex-direction: column; align-items: flex-start; gap: 20px; }
  .reasons__intro-text-wrap { width: 100%; min-width: 0; padding-left: 0; }
  .reasons__intro-text p.dim { color: inherit; }
}

@media (max-width: 768px) {
  .page { padding: 20px 20px; }
  .portfolio__row { flex-direction: column; }
  .case { width: 100%; }
  .pricing__row { flex-direction: column; align-items: stretch; }
  .pricing__intro,
  .pricing__cards { flex-basis: auto; }
  .lead-form__card { flex-direction: column-reverse; padding: 24px; }
  .lead-form__image { max-width: 280px; }
  .about__card { flex-direction: column; padding: 24px; align-items: stretch; }
  .about__video { max-width: 320px; align-self: center; }
  .faq__question { font-size: 18px; padding: 18px 0; }
  .faq__answer { font-size: 16px; padding-bottom: 18px; }
}

@media (max-width: 480px) {
  .page { padding: 7px; }
  .hero { padding: 16px; }
  .hero__col { gap: 100px; }
  .hero__photo-wrap { min-width: 0; height: auto; aspect-ratio: 3 / 4; }
  .hero__title-main,
  .hero__title-accent { font-size: 45px; letter-spacing: -0.03em; }
  .hero__desc { font-size: 16px; width: 100%; }
  .hero__text .btn { font-size: 16px; padding: 20px 30px; }
  .intro { padding-top: 100px; gap: 50px; }
  .intro__heading { font-size: 45px; }
  .intro__row { flex-direction: column; }
  .intro__text { font-size: 16px; width: 100%; }
  .portfolio__card { padding: 45px 16px; }
  .portfolio__heading { font-size: 24px; }
  .case__cover-caption p,
  .case__cover-title { font-size: 16px; }
  .pricing { padding-top: 100px; }
  .pricing__row { gap: 100px; }
  .site-footer__phone { font-size: 45px; }
  .site-footer__actions { gap: 7px; }
  .gallery__grid { grid-template-columns: 1fr; }
  .reasons__intro { padding: 100px 7px 0; }
  .reasons__intro-inner { height: auto; }
  .reasons__intro-text { font-size: 22px; letter-spacing: -0.02em; }
  .reasons__list-wrap { padding: 20px 7px; }
  .reasons__row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .reasons__row-title { font-size: 24px; }
  .reasons__row-desc { font-size: 16px; width: 100%; }
  .reasons__row-number { width: 100%; }

  .topbar { position: relative; }
  .topbar__logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 15px;
    pointer-events: none;
  }
  .topbar__burger-lines { width: 22px; gap: 3px; }
  .topbar__burger-lines span { width: 22px; }
  .topbar__burger-label { font-size: 14px; }
  .topbar__cta-sub { display: none; }
  .topbar__cta { padding: 10px 12px; }
}

@media (max-width: 380px) {
  .site-footer__phone { font-size: 35px; }
}

/* ══════════════════════ MENU PANEL ══════════════════════ */

.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0,0,0,.45);
  display: none;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 20px;
}
.menu-panel.open { display: flex; }
.menu-panel__box {
  background: #fff;
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 1116px;
  height: min(973px, calc(100vh - 40px));
  overflow-y: auto;
  padding: 26px 24px 39px 39px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  animation: menuIn .25s ease;
}
@keyframes menuIn {
  from { transform: translateX(-24px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.menu-panel__content {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 12vh, 177px);
  max-width: 533px;
  min-width: 0;
  flex: 1 0 0%;
}
.menu-panel__list-wrap { padding-top: clamp(24px, 15vh, 200px); }
.menu-panel__list {
  list-style: decimal;
  padding-left: 54px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.03em;
}
.menu-panel__list a:hover { text-decoration: underline; }
.menu-panel__contact { display: flex; flex-direction: column; gap: 12px; font-size: 16px; letter-spacing: -0.03em; width: 138px; }
.menu-panel__contact-title { font-weight: 600; }
.menu-panel__contact a:hover { text-decoration: underline; }
.menu-panel__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  letter-spacing: -0.03em;
}

.menu-panel__close img { transform: rotate(44.15deg); }

/* ══════════════════════ MODAL / FORM ══════════════════════ */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: #fff;
  border-radius: 24px;
  padding: 40px 36px;
  width: 100%;
  max-width: 460px;
  position: relative;
  animation: slideUp .25s ease;
}
@keyframes slideUp {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.modal-close {
  position: absolute;
  top: 16px; right: 16px;
  background: rgba(0,0,0,.07);
  border: none;
  border-radius: 50%;
  width: 34px; height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(0,0,0,.5);
  transition: background .2s;
}
.modal-close:hover { background: rgba(0,0,0,.12); }
.modal-box h3 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.modal-box .sub { font-size: 14px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.form-field { display: flex; flex-direction: column; gap: 6px; margin-top: 20px; }
.form-field label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.form-field input,
.form-field textarea {
  font-family: inherit;
  font-size: 16px; /* меньше 16px нельзя — iOS Safari зумит страницу при фокусе */
  padding: 14px 16px;
  border: 1.5px solid rgba(0,0,0,.15);
  border-radius: 12px;
  outline: none;
  color: var(--ink);
  transition: border-color .2s;
  background: #fff;
  resize: none;
}
.form-field input:focus,
.form-field textarea:focus { border-color: var(--blue-mid); }
.form-submit {
  margin-top: 24px;
  width: 100%;
  padding: 16px;
  background: var(--lime);
  color: var(--ink);
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .18s, transform .18s;
}
.form-submit:hover:not(:disabled) { filter: brightness(0.95); transform: translateY(-1px); }
.form-submit:disabled { opacity: .6; cursor: default; }
.form-note { margin-top: 12px; font-size: 12px; color: var(--muted); text-align: center; }
.form-note a { color: inherit; text-decoration: underline; }
.form-success { display: none; text-align: center; padding: 20px 0; }
.form-success .big { font-size: 40px; margin-bottom: 12px; }
.form-success h4 { font-size: 20px; font-weight: 700; }
.form-success p { font-size: 14px; color: var(--muted); margin-top: 6px; }



@media (max-width:700px) {
    .menu-panel__list {
    list-style: decimal;
    padding-left: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.03em;
}
.menu-panel__box {
    background: #fff;
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 1116px;
    height: min(973px, calc(100vh - 40px));
    overflow-y: auto;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    animation: menuIn .25s ease;
} 
.reasons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 140px;
  padding-bottom: 0px;
}
}
/* ══════════════════════ COOKIE MINI-BANNER ══════════════════════ */

.cookie-mini {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 250;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 100px;
  box-shadow: 0 4px 18px rgba(0,0,0,.12);
  padding: 8px 8px 8px 14px;
  font-size: 13px;
  letter-spacing: -0.02em;
  animation: slideUp .3s ease;
}
.cookie-mini[hidden] { display: none; }
.cookie-mini__text {
  position: relative;
  cursor: default;
  white-space: nowrap;
}
.cookie-mini__tip {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  width: 260px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.45;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  pointer-events: none;
}
.cookie-mini__text:hover .cookie-mini__tip,
.cookie-mini__text:focus-visible .cookie-mini__tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.cookie-mini__ok {
  border: none;
  cursor: pointer;
  background: var(--lime);
  color: var(--ink);
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.02em;
  border-radius: 100px;
  padding: 6px 16px;
  transition: filter .15s ease;
}
.cookie-mini__ok:hover { filter: brightness(.95); }

@media (max-width: 640px) {
  .cookie-mini {
    right: 10px;
    bottom: 10px;
    padding: 6px 6px 6px 12px;
    font-size: 12px;
  }
  .cookie-mini__ok { padding: 5px 14px; font-size: 12px; }
  .cookie-mini__tip { width: min(260px, calc(100vw - 40px)); }
}

/* ══════════════════════ SITE CHAT ══════════════════════ */

.site-chat__bubble {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 260;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: var(--ink);
  color: var(--lime);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 22px rgba(0,0,0,.22);
  transition: transform .15s ease;
}
.site-chat__bubble:hover { transform: scale(1.06); }
.site-chat__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--lime);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
}
.site-chat__panel {
  position: fixed;
  right: 16px;
  bottom: 84px;
  z-index: 260;
  width: 336px;
  max-width: calc(100vw - 32px);
  height: 440px;
  max-height: calc(100vh - 110px);
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 44px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp .25s ease;
}
.site-chat__panel[hidden] { display: none; }
.site-chat__head {
  background: var(--ink);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.site-chat__title { font-weight: 600; font-size: 15px; letter-spacing: -0.02em; }
.site-chat__status { font-size: 12px; opacity: .65; margin-top: 2px; }
.site-chat__close {
  border: none;
  background: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 4px;
}
.site-chat__log {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--blue-pale);
}
.site-chat__msg {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  white-space: pre-wrap;
  word-break: break-word;
}
.site-chat__msg--o {
  align-self: flex-start;
  background: #fff;
  border-bottom-left-radius: 4px;
}
.site-chat__msg--v {
  align-self: flex-end;
  background: var(--lime);
  border-bottom-right-radius: 4px;
}
.site-chat__form {
  display: flex;
  gap: 8px;
  padding: 10px;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.07);
}
.site-chat__form input {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 100px;
  padding: 9px 14px;
  font-family: inherit;
  font-size: 16px; /* меньше 16px нельзя — iOS Safari зумит страницу при фокусе */
  outline: none;
}
.site-chat__form input:focus { border-color: var(--ink); }
.site-chat__form button {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: var(--lime);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* куки-плашка живёт над пузырьком чата */
.cookie-mini { bottom: 84px; }

@media (max-width: 640px) {
  .site-chat__bubble { right: 10px; bottom: 10px; width: 52px; height: 52px; }
  .site-chat__panel {
    right: 10px;
    left: 10px;
    bottom: 72px;
    width: auto;
    height: min(430px, calc(100dvh - 90px));
  }
  .cookie-mini { bottom: 72px; }
}

.site-chat__head { align-items: center; }
.site-chat__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--lime);
}
.site-chat__who { flex: 1; min-width: 0; }

/* гейт с телефоном внутри чата */
.site-chat__msg.site-chat__gate { max-width: 100%; }
.site-chat__gate form { display: flex; gap: 6px; margin-top: 10px; }
.site-chat__gate input {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 100px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 16px; /* меньше 16px нельзя — iOS Safari зумит страницу при фокусе */
  outline: none;
}
.site-chat__gate button {
  flex-shrink: 0;
  border: none;
  border-radius: 100px;
  background: var(--lime);
  color: var(--ink);
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 14px;
  cursor: pointer;
}
.site-chat__form input:disabled { background: rgba(0,0,0,.04); }

/* индикатор «онлайн» */
.site-chat__online {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #31d158;
  border: 2px solid #fff;
  animation: onlinePulse 1.8s ease-out infinite;
}
@keyframes onlinePulse {
  0%   { box-shadow: 0 0 0 0 rgba(49, 209, 88, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(49, 209, 88, 0); }
  100% { box-shadow: 0 0 0 0 rgba(49, 209, 88, 0); }
}
.site-chat__online-text {
  color: #31d158;
  font-weight: 600;
}

/* чипсы «как связаться» под формой */
.contact-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.contact-chip {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1.5px solid rgba(0,0,0,.12);
  border-radius: 999px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.contact-chip:hover {
  border-color: var(--ink);
  background: var(--lime);
  transform: translateY(-1px);
}

/* блок «Связь со мной» */
.contact-me__card {
  background: var(--blue-pale-2);
  border-radius: var(--radius-lg);
  padding: 45px;
}
.contact-me__heading { font-weight: 800; font-size: 36px; letter-spacing: -0.03em; }
.contact-me__sub { font-size: 16px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.contact-me .contact-chips { margin-top: 24px; }
.contact-me .contact-chip {
  font-size: 16px;
  padding: 13px 22px;
  border-color: rgba(0,0,0,.15);
}
@media (max-width: 640px) {
  .contact-me__card { padding: 24px; }
  .contact-me .contact-chip { width: 100%; justify-content: center; }
}

/* ══════════════════════ ТАРИФЫ ══════════════════════ */

.tariffs__card {
  background: var(--blue-pale);
  border-radius: var(--radius-lg);
  padding: 45px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.tariffs__label { font-weight: 600; font-size: 16px; letter-spacing: -0.03em; color: var(--muted); }
.tariffs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.tariff-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 28px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}
.tariff-card__title { font-weight: 700; font-size: 22px; letter-spacing: -0.03em; }
.tariff-card__desc { margin-top: 8px; font-size: 15px; color: var(--muted); line-height: 1.5; }
.tariff-card__link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.tariff-card__price { font-weight: 800; font-size: 28px; letter-spacing: -0.03em; }

@media (max-width: 1000px) {
  .tariffs__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .tariffs__card { padding: 24px; }
  .tariffs__grid { grid-template-columns: 1fr; }
  .tariff-card { min-height: 0; gap: 24px; }
}

/* индикатор «печатает…» в чате */
.site-chat__typing {
  display: inline-flex;
  gap: 5px;
  padding: 13px 14px;
}
.site-chat__typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  animation: typingBlink 1.2s ease-in-out infinite;
}
.site-chat__typing span:nth-child(2) { animation-delay: .18s; }
.site-chat__typing span:nth-child(3) { animation-delay: .36s; }
@keyframes typingBlink {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

/* мини-форма в hero под кнопкой */
.hero-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 458px;
  width: 100%;
}
.hero-form input[type="text"],
.hero-form input[type="tel"] {
  flex: 1 1 150px;
  min-width: 0;
  background: #fff;
  border: 1.5px solid rgba(0,0,0,.12);
  border-radius: var(--radius-md);
  padding: 13px 16px;
  font-family: inherit;
  font-size: 16px; /* меньше 16px нельзя — iOS Safari зумит страницу при фокусе */
  outline: none;
  transition: border-color .2s;
}
.hero-form input:focus { border-color: var(--ink); }
.hero-form button {
  flex: 0 0 auto;
  border: none;
  border-radius: var(--radius-md);
  background: var(--ink);
  color: var(--lime);
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  padding: 13px 24px;
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease;
}
.hero-form button:hover { transform: translateY(-2px); filter: brightness(1.15); }
.hero-form__note {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--muted);
}
.hero-form__note a { text-decoration: underline; }

.hero-form__trust {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-form__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.hero-form__trust-text { display: flex; flex-direction: column; gap: 2px; }
.hero-form__trust-title { font-size: 14px; font-weight: 600; letter-spacing: -0.02em; }
.hero-form__trust-name { font-size: 12px; color: var(--muted); }

@media (max-width: 480px) {
  .hero-form input[type="text"],
  .hero-form input[type="tel"],
  .hero-form button { flex-basis: 100%; }
}

.hero-form__title {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.03em;
}

/* ══════════════════════ КАК Я РАБОТАЮ ══════════════════════ */

.workflow__card {
  background: var(--blue-pale-2);
  border-radius: var(--radius-lg);
  padding: 45px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.workflow__heading { font-weight: 800; font-size: 36px; letter-spacing: -0.03em; }
.workflow__steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.workflow-step {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.workflow-step__num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--ink);
  font-weight: 800;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.workflow-step__title { font-weight: 700; font-size: 19px; letter-spacing: -0.03em; }
.workflow-step__desc { font-size: 14px; color: var(--muted); line-height: 1.5; }

@media (max-width: 1100px) {
  .workflow__steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .workflow__card { padding: 24px; }
  .workflow__heading { font-size: 28px; }
  .workflow__steps { grid-template-columns: 1fr; }
}

/* ══════════════════════ ОТЗЫВЫ (Яндекс Услуги) ══════════════════════ */

.reviews__card {
  background: var(--blue-pale);
  border-radius: var(--radius-lg);
  padding: 45px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.reviews__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.reviews__heading { font-weight: 800; font-size: 36px; letter-spacing: -0.03em; }
.reviews__source { font-size: 16px; font-weight: 600; color: var(--muted); }
.reviews__stars { color: #fcb400; letter-spacing: 2px; }
.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.review {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.review__top { display: flex; align-items: center; gap: 12px; }
.review__avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
}
.review__name { font-weight: 700; font-size: 16px; letter-spacing: -0.02em; }
.review__meta { font-size: 13px; color: var(--muted); margin-top: 2px; }
.review__text { font-size: 14px; line-height: 1.55; }

@media (max-width: 1000px) {
  .reviews__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .reviews__card { padding: 24px; }
  .reviews__heading { font-size: 28px; }
  .reviews__grid { grid-template-columns: 1fr; }
}

a.review { color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
a.review:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  filter: none;
}

/* кнопка «Посмотреть все отзывы» + попап со скрином */
.reviews__more {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: underline;
  cursor: pointer;
}
.reviews__more:hover { filter: brightness(1.25); }

.img-popup {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(0,0,0,.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: zoom-out;
}
.img-popup[hidden] { display: none; }
.img-popup__box {
  position: relative;
  max-width: min(1400px, 96vw);
  max-height: 92vh;
  animation: slideUp .25s ease;
}
.img-popup__box img {
  max-width: 100%;
  max-height: 92vh;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  display: block;
}
.img-popup__close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--lime);
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
@media (max-width: 640px) {
  .img-popup { padding: 10px; }
  .img-popup__close { top: 8px; right: 8px; }
}

.img-popup__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 3px;
}
.img-popup__nav:hover { background: var(--lime); }
.img-popup__nav--prev { left: -14px; }
.img-popup__nav--next { right: -14px; }
.img-popup__counter {
  position: absolute;
  bottom: -34px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
}
@media (max-width: 640px) {
  .img-popup__nav--prev { left: 6px; }
  .img-popup__nav--next { right: 6px; }
}

/* ══════════════════════ ТЁМНАЯ ТЕМА (премиум-версия) ══════════════════════ */

.theme-toggle {
  border: none;
  background: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}

html.theme-dark {
  --blue-light: #15161a;   /* фон hero и футера */
  --blue-pale: #101114;    /* фон секций */
  --blue-pale-2: #17181d;  /* фон акцентных секций */
  --ink: #f2f3f5;          /* основной текст */
  --muted: #a2a9b4;
}
html.theme-dark body { background: #0a0b0d; color: var(--ink); }

/* поверхности */
html.theme-dark .topbar,
html.theme-dark .menu-panel__box,
html.theme-dark .modal-box,
html.theme-dark .tariff-card,
html.theme-dark .workflow-step,
html.theme-dark .review,
html.theme-dark .case__info { background: #1c1e23; }
html.theme-dark .contact-chip {
  background: #1c1e23;
  border-color: rgba(255,255,255,.16);
}
html.theme-dark .contact-chip:hover { color: #0a0b0d; }
html.theme-dark .hero__badges li { background: rgba(255,255,255,.08); }

/* кнопки: в тёмной версии главный акцент — лайм */
html.theme-dark .topbar__cta,
html.theme-dark .btn--blue { background: var(--lime); color: #0a0b0d; }
html.theme-dark .btn--lime { color: #0a0b0d; }
html.theme-dark .form-submit { color: #0a0b0d; }
html.theme-dark .hero-form button { background: var(--lime); color: #0a0b0d; }
html.theme-dark .workflow-step__num,
html.theme-dark .review__avatar,
html.theme-dark .img-popup__close,
html.theme-dark .img-popup__nav { color: #0a0b0d; }

/* поля ввода */
html.theme-dark .hero-form input[type="text"],
html.theme-dark .hero-form input[type="tel"],
html.theme-dark .form-field input,
html.theme-dark .form-field textarea {
  background: #101114;
  border-color: rgba(255,255,255,.18);
  color: var(--ink);
}
html.theme-dark .hero-form input:focus,
html.theme-dark .form-field input:focus,
html.theme-dark .form-field textarea:focus { border-color: var(--lime); }
html.theme-dark input::placeholder,
html.theme-dark textarea::placeholder { color: #6d747e; }

/* разделители и мелочи */
html.theme-dark .faq__list,
html.theme-dark .faq__item { border-color: rgba(255,255,255,.14); }
html.theme-dark .site-footer__phone,
html.theme-dark a { color: inherit; }
html.theme-dark .hero__photo-wrap { background: #000; }

/* ── тарифы в тёмной версии: без Экспресса, зато с деталями ── */
html.theme-dark .tariff-card--express { display: none; }
.tariff-card__features { display: none; }
html.theme-dark .tariff-card__features {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 16px;
  list-style: none;
}
html.theme-dark .tariff-card__features li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}
html.theme-dark .tariff-card__features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--lime);
  font-weight: 700;
}
html.theme-dark .tariffs__grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) {
  html.theme-dark .tariffs__grid { grid-template-columns: 1fr; }
}

/* ── чат и куки-баннер в тёмной теме ── */
html.theme-dark .site-chat__bubble { background: var(--lime); color: #0a0b0d; }
html.theme-dark .site-chat__badge { background: #0a0b0d; color: #fff; }
html.theme-dark .site-chat__online { border-color: #0a0b0d; }
html.theme-dark .site-chat__panel { background: #1c1e23; }
html.theme-dark .site-chat__head { background: #101114; }
html.theme-dark .site-chat__log { background: #15161a; }
html.theme-dark .site-chat__msg--o { background: #26282e; color: #f2f3f5; }
html.theme-dark .site-chat__msg--v { background: var(--lime); color: #0a0b0d; }
html.theme-dark .site-chat__form {
  background: #1c1e23;
  border-top: 1px solid rgba(255,255,255,.1);
}
html.theme-dark .site-chat__form input,
html.theme-dark .site-chat__gate input {
  background: #101114;
  border-color: rgba(255,255,255,.18);
  color: #f2f3f5;
}
html.theme-dark .site-chat__form input:focus,
html.theme-dark .site-chat__gate input:focus { border-color: var(--lime); }
html.theme-dark .site-chat__form input:disabled { background: rgba(255,255,255,.06); }
html.theme-dark .site-chat__form button,
html.theme-dark .site-chat__gate button { color: #0a0b0d; }
html.theme-dark .site-chat__typing span { background: rgba(255,255,255,.45); }

html.theme-dark .cookie-mini {
  background: #1c1e23;
  border-color: rgba(255,255,255,.16);
  color: #f2f3f5;
}
html.theme-dark .cookie-mini__ok { color: #0a0b0d; }
html.theme-dark .cookie-mini__tip { background: #26282e; color: #fff; }

/* переключатель темы спрятан — тёмная версия сейчас основная */
.theme-toggle { display: none; }

/* кнопка «Показать ещё» в портфолио */
.portfolio__more { align-self: center; margin-top: 10px; }
.portfolio__row--extra[hidden] { display: none; }

/* ══════════════════════ КЕЙСЫ (короткий формат) ══════════════════════ */

.case-stories__card {
  background: var(--blue-pale);
  border-radius: var(--radius-lg);
  padding: 45px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.case-stories__heading { font-weight: 800; font-size: 36px; letter-spacing: -0.03em; }
.case-story {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 28px;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 28px;
  align-items: center;
}
.case-story--reverse { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.case-story--reverse .case-story__media { order: 2; }
.case-story__media img {
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: 14px;
}
.case-story__body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.case-story__niche { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.case-story__title { font-weight: 800; font-size: 26px; letter-spacing: -0.03em; }
.case-story__metric { font-weight: 800; font-size: 34px; letter-spacing: -0.03em; line-height: 1.1; }
.case-story__metric span { font-size: 16px; font-weight: 600; color: var(--muted); letter-spacing: -0.02em; }
.case-story__text { font-size: 15px; line-height: 1.55; }
.case-story__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.case-story__stat {
  background: var(--blue-pale);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.case-story__stat b { font-size: 19px; letter-spacing: -0.02em; }
.case-story__stat span { font-size: 12px; color: var(--muted); line-height: 1.35; }
.case-story__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.case-story__tags li {
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--lime);
  color: #0a0b0d;
}
.case-story__note { font-size: 14px; color: var(--muted); line-height: 1.5; }
.case-stories__more { align-self: center; }

@media (max-width: 900px) {
  .case-story, .case-story--reverse { grid-template-columns: 1fr; }
  .case-story--reverse .case-story__media { order: 0; }
  .case-story__media img { max-height: 340px; }
  .case-story__stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .case-stories__card { padding: 24px; }
  .case-stories__heading { font-size: 28px; }
  .case-story { padding: 18px; }
  .case-story__metric { font-size: 28px; }
}

/* кейсы в тёмной теме */
html.theme-dark .case-story { background: #1c1e23; }
html.theme-dark .case-story__stat { background: #101114; }
.case-story--extra[hidden] { display: none; }

/* чипсы в тёмной теме: ховер — лайм, как у кнопок */
html.theme-dark .contact-chip:hover {
  background: var(--lime);
  border-color: var(--lime);
  color: #0a0b0d;
}

/* подзаголовки, плитки «в боль» и список работ внутри кейса */
.case-story__subhead {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
  margin-top: 6px;
}
.case-story__points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.case-story__point {
  background: var(--blue-pale);
  border-radius: 12px;
  padding: 14px;
}
.case-story__point b {
  display: block;
  font-size: 15px;
  letter-spacing: -0.02em;
  margin-bottom: 5px;
}
.case-story__point span {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
}
.case-story__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 16px;
}
.case-story__list li {
  position: relative;
  padding-left: 20px;
  line-height: 1.4;
}
.case-story__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: #65a30d;
  font-weight: 700;
}
.case-story__list b { display: block; font-size: 13.5px; letter-spacing: -0.01em; }
.case-story__list span { display: block; font-size: 12.5px; color: var(--muted); }

html.theme-dark .case-story__point { background: #101114; }
html.theme-dark .case-story__list li::before { color: var(--lime); }

@media (max-width: 640px) {
  .case-story__points { grid-template-columns: 1fr; }
  .case-story__list { grid-template-columns: 1fr; }
}

/* было/стало внутри кейса */
.case-story__ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.case-story__ba-col {
  background: var(--blue-pale);
  border-radius: 12px;
  padding: 14px;
}
.case-story__ba-title {
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 8px;
}
.case-story__ba-col--before .case-story__ba-title { color: #e5484d; }
.case-story__ba-col--after .case-story__ba-title { color: #65a30d; }
.case-story__ba-col ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.case-story__ba-col li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}
.case-story__ba-col li::before { position: absolute; left: 0; font-weight: 700; }
.case-story__ba-col--before li::before { content: '✕'; color: #e5484d; }
.case-story__ba-col--after li::before { content: '✓'; color: #65a30d; }

.case-story__time {
  font-style: normal;
  font-weight: 600;
  font-size: 11.5px;
  color: var(--muted);
  background: var(--blue-pale);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 6px;
  white-space: nowrap;
}
.case-story__points--two { grid-template-columns: 1fr 1fr; }

html.theme-dark .case-story__ba-col { background: #101114; }
html.theme-dark .case-story__ba-col--after .case-story__ba-title,
html.theme-dark .case-story__ba-col--after li::before { color: var(--lime); }
html.theme-dark .case-story__time { background: #101114; }

@media (max-width: 640px) {
  .case-story__ba { grid-template-columns: 1fr; }
  .case-story__points--two { grid-template-columns: 1fr; } 
  .hero__text {

  padding-bottom:30px; 
}
}

/* закрыть меню в тёмной теме: белый текст и белый крестик */
html.theme-dark .menu-panel__close { color: #f2f3f5; }
html.theme-dark .menu-panel__close img { filter: invert(1); }