:root {
  --bg: #060f1b;
  --bg-deep: #020713;
  --bg-mid: #0a182a;
  --panel: rgba(12, 24, 41, 0.76);
  --panel-strong: rgba(12, 25, 45, 0.92);
  --line: rgba(125, 159, 205, 0.18);
  --line-strong: rgba(13, 110, 253, 0.45);
  --white: #ffffff;
  --muted: rgba(255, 255, 255, 0.72);
  --soft: rgba(255, 255, 255, 0.48);
  --orange: #FA5A00;
  --orange-hot: #FA5A00;
  --blue: #0D6EFD;
  --blue-deep: #0D6EFD;
  --cyan: #38bdf8;
  --radius: 14px;
  --shadow-soft: 0 18px 70px rgba(0, 0, 0, 0.26);
  --shadow-strong: 0 34px 120px rgba(0, 0, 0, 0.44);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 68% 5%, rgba(13, 110, 253, 0.3), transparent 34rem),
    radial-gradient(circle at 82% 58%, rgba(13, 110, 253, 0.16), transparent 30rem),
    linear-gradient(180deg, #020612 0%, #060f1b 34%, #091525 70%, #142336 100%);
  color: var(--white);
  font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-optical-sizing: auto;
  letter-spacing: -0.01em;
  text-rendering: geometricPrecision;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 70%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at center top, transparent 0%, rgba(0, 0, 0, 0.22) 68%, rgba(0, 0, 0, 0.36) 100%);
}

body.is-modal-open {
  overflow: hidden;
}

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

button,
input,
select,
textarea {
  font: inherit;
}

img,
svg {
  display: block;
}

.site-shell {
  width: min(1216px, calc(100% - 44px));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 100;
  transform: translateY(-140%);
  border-radius: 999px;
  background: var(--white);
  color: var(--bg);
  padding: 10px 14px;
  font-weight: 800;
  transition: transform 0.2s var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(125, 159, 205, 0.11);
  background: linear-gradient(180deg, rgba(2, 8, 20, 0.86), rgba(2, 8, 20, 0.62));
  backdrop-filter: blur(22px) saturate(130%);
}

.site-header__inner {
  min-height: 86px;
  display: flex;
  align-items: center;
  gap: 22px;
}

.brand {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  min-width: max-content;
}

.brand__name {
  font-size: clamp(1.85rem, 2vw, 2.35rem);
  font-weight: 800;
  font-style: italic;
  line-height: 0.92;
  letter-spacing: -0.07em;
}

.brand__name span {
  color: var(--orange-hot);
  text-shadow: 0 0 26px rgba(250, 90, 0, 0.24);
}

.brand__name strong {
  color: var(--blue);
  font-weight: 800;
  text-shadow: 0 0 26px rgba(13, 110, 253, 0.32);
}

.brand__caption {
  display: block;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.94rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.12;
}

.brand__caption-1,
.brand__caption-2 {
  display: block;
}

.brand__caption-2 {
  padding-left: 1.4em;
}

.primary-nav {
  flex: 1;
}

.primary-nav__list {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 1.55vw, 28px);
  margin: 0;
  padding: 0;
}

.primary-nav__list a,
.primary-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.94rem;
  font-weight: 700;
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.22s var(--ease);
}

.primary-nav__list a::after,
.primary-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 2px;
  transform: scaleX(0);
  transform-origin: center;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--orange), var(--blue));
  transition: transform 0.22s var(--ease);
}

.primary-nav__list a:hover,
.primary-nav__link:hover {
  color: var(--white);
}

.primary-nav__list a:hover::after,
.primary-nav__link:hover::after {
  transform: scaleX(1);
}

.primary-nav__item {
  position: relative;
}

/* Unified dropdown ("Послуги" / "Статті"): opens on hover / keyboard focus
   (desktop) or when pinned via .is-open (chevron click / mobile). */
.primary-nav__item--dropdown.is-open > .services-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

@media (min-width: 981px) {
  .primary-nav__item--dropdown:hover > .services-dropdown,
  .primary-nav__item--dropdown:focus-within > .services-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
}

.services-dropdown {
  position: absolute;
  left: 0;
  top: calc(100% + 16px);
  width: min(560px, calc(100vw - 48px));
  transform: translateY(10px);
  z-index: 30;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  border: 1px solid rgba(92, 159, 255, 0.18);
  border-radius: 16px;
  background:
    radial-gradient(circle at 20% 0%, rgba(250, 90, 0, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(10, 24, 43, 0.98), rgba(4, 12, 24, 0.98));
  box-shadow: 0 26px 90px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  padding: 16px;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s var(--ease);
}

.services-dropdown__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.services-dropdown__grid a {
  display: flex;
  gap: 10px;
  min-height: 38px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.86rem;
  white-space: normal;
}

.services-dropdown__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--blue);
  background: rgba(13, 110, 253, 0.1);
}

.services-dropdown__icon svg {
  width: 18px;
  height: 18px;
}

.services-dropdown__grid a:hover .services-dropdown__icon {
  color: var(--orange-hot);
}

.services-dropdown__grid a::after {
  display: none;
}

.services-dropdown__grid a:hover {
  background: rgba(13, 110, 253, 0.12);
  color: #fff;
}

.header-contacts {
  display: flex;
  align-items: stretch;
  gap: 18px;
}

.header-mobile-locations {
  display: none;
  order: 999;
}

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9rem;
  white-space: nowrap;
}

.header-phone__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(13, 110, 253, 0.12);
  color: var(--blue);
  font-size: 0.95rem;
  box-shadow: 0 0 22px rgba(13, 110, 253, 0.18);
}

.header-phone strong,
.header-phone small {
  display: block;
}

.header-phone span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.header-phone strong {
  font-size: 0.95rem;
  font-weight: 800;
  white-space: nowrap;
}

.header-phone small {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
}

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 8px;
  padding: 0 21px;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  white-space: nowrap;
  cursor: pointer;
  transform: translateZ(0);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease), color 0.22s var(--ease), background 0.22s var(--ease);
}

.button--primary {
  background: linear-gradient(135deg, #FA5A00 0%, #FA5A00 42%, #FA5A00 100%);
  color: #fff;
  box-shadow:
    0 6px 18px rgba(250, 90, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 0 0 1px rgba(250, 90, 0, 0.3);
}

.button--primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 24px rgba(250, 90, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 0 0 1px rgba(250, 90, 0, 0.42);
}

.button--primary .button__icon,
.button--primary:hover .button__icon {
  color: #fff;
}

.button--outline {
  border: 1px solid rgba(13, 110, 253, 0.78);
  background: linear-gradient(180deg, rgba(13, 110, 253, 0.2), rgba(13, 110, 253, 0.09));
  color: #7ab4ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.button--outline:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.72);
  color: #fff;
  box-shadow: 0 18px 54px rgba(13, 110, 253, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

/* Three identical bars (classic hamburger). Flex + gap keeps the spacing even
   and pixel-aligned, so no bar renders thinner than the others. */
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.hero-section {
  position: relative;
  overflow: hidden;
  padding: 56px 0 24px;
}

.hero-section::before {
  content: "";
  position: absolute;
  inset: -120px 0 auto;
  height: 660px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 70% 42%, rgba(13, 110, 253, 0.28), transparent 44%),
    radial-gradient(ellipse at 34% 48%, rgba(250, 90, 0, 0.11), transparent 34%),
    linear-gradient(180deg, rgba(2, 8, 20, 0.04), transparent);
}

.hero-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent 72%);
}

.hero-section__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.72fr 1.5fr;
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 28px;
}

.hero-copy {
  max-width: 500px;
  padding-top: 14px;
  grid-column: 1;
  grid-row: 1 / 3;
}

.hero-visual {
  grid-column: 2;
  grid-row: 1;
}

.hero-edu-cta {
  display: flex;
  justify-content: flex-start;
  padding-bottom: 0;
  transform: translate(var(--edu-x, 0px), var(--edu-y, 0px));
  position: relative;
  z-index: 7;
  pointer-events: auto;
}

.hero-actions .hero-edu-cta {
  transform: none;
}

.hero-edu-cta .button--edu {
  pointer-events: auto;
}

.hero-edu-cta .button--edu {
  width: auto;
  max-width: none;
  justify-content: center;
  background: linear-gradient(180deg, rgba(13, 110, 253, 0.58), rgba(13, 110, 253, 0.40));
  border-color: rgba(13, 110, 253, 0.95);
  box-shadow: inset 0 0 0 1px rgba(13, 110, 253, .72), 0 8px 22px rgba(13, 110, 253, .2);
  color: #fff;
  opacity: var(--edu-opacity, 1);
  transition: opacity .22s ease, background .22s ease, box-shadow .22s ease, color .22s ease;
}

.hero-edu-cta .button--edu .button__icon,
.hero-edu-cta .button--edu .resave-icon {
  color: var(--blue);
  transition: color .22s ease;
}

.hero-edu-cta .button--edu:hover,
.hero-edu-cta .button--edu:focus {
  opacity: 1;
  color: #fff;
  background: linear-gradient(180deg, rgba(13, 110, 253, 0.75), rgba(13, 110, 253, 0.58));
  box-shadow: inset 0 0 0 1px rgba(13, 110, 253, .9), 0 14px 32px rgba(13, 110, 253, .28);
}

.hero-edu-cta .button--edu:hover .button__icon,
.hero-edu-cta .button--edu:hover .resave-icon,
.hero-edu-cta .button--edu:focus .button__icon,
.hero-edu-cta .button--edu:focus .resave-icon {
  color: #FA5A00;
}

.hero-badge {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 28px;
  border: 1px solid rgba(79, 150, 255, 0.28);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(13, 110, 253, 0.16), rgba(13, 110, 253, 0.06));
  color: #38bdf8;
  padding: 10px 14px;
  font-size: 0.77rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 14px 34px rgba(13, 110, 253, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.hero-title {
  margin: 0;
  max-width: 600px;
  font-size: clamp(2.35rem, 3.4vw, 3.7rem);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -0.03em;
}

.hero-title > span {
  display: block;
  color: var(--orange-hot);
  text-shadow: 0 0 34px rgba(250, 90, 0, 0.28);
}

.hero-subtitle {
  max-width: 390px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.58;
}

.hero-locations {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 30px;
}

.hero-location {
  display: grid;
  grid-template-columns: 38px auto;
  column-gap: 10px;
  align-items: center;
}

.hero-location strong,
.hero-location small {
  grid-column: 2;
}

.hero-location strong {
  font-size: 0.98rem;
  font-weight: 800;
}

.hero-location small {
  color: var(--soft);
  font-size: 0.78rem;
  font-weight: 600;
}

.flag {
  grid-row: 1 / span 2;
  width: 34px;
  height: 23px;
  border-radius: 4px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

.flag--ua {
  background: linear-gradient(#0D6EFD 0 50%, #facc15 50%);
}

.flag--pl {
  background: linear-gradient(#fff 0 50%, #dc2626 50%);
}

.flag--ru {
  background: linear-gradient(#fff 0 33.333%, #2563eb 33.333% 66.666%, #dc2626 66.666%);
}

.hero-location-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 18px 5px rgba(250, 90, 0, 0.36);
}

.hero-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
  width: max-content;
  max-width: min(930px, calc(100vw - 64px));
}

.quick-contact {
  display: none;
}

.hero-visual {
  min-height: 560px;
  display: grid;
  place-items: center;
  min-width: 0;
}

.hero-visual__stage {
  position: relative;
  width: min(810px, 100%);
  aspect-ratio: 1.42;
  transform-style: preserve-3d;
  transition: transform 0.32s var(--ease);
  will-change: transform;
}

.hero-visual__stage::before {
  content: "";
  position: absolute;
  left: 14%;
  right: 0%;
  bottom: 0%;
  height: 28%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 56% 40%, rgba(56, 189, 248, 0.16), transparent 60%),
    radial-gradient(ellipse at center, rgba(13, 110, 253, 0.3), rgba(0, 0, 0, 0) 70%);
  filter: blur(18px);
}

.hero-visual__stage::after {
  content: "";
  position: absolute;
  left: 24%;
  top: 4%;
  width: 56%;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(13, 110, 253, 0.16), transparent 62%);
  filter: blur(34px);
  z-index: 0;
}

.premium-laptop {
  position: absolute;
  z-index: 4;
  left: 29%;
  top: 12%;
  width: 63%;
  transform: rotate(-3deg);
  transform-style: preserve-3d;
  animation: laptop-float 7.8s ease-in-out infinite;
  will-change: transform;
}

.premium-laptop__screen {
  position: relative;
  width: 78%;
  margin-left: 22%;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 8px solid;
  border-color: #2b3340 #232b37 #1a212c #2b3340;
  border-bottom-width: 14px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 44% 26%, rgba(13, 110, 253, 0.2), transparent 34%),
    linear-gradient(145deg, #020713, #0a1524 72%, #020611);
  box-shadow:
    0 40px 94px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(140, 165, 200, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 26px 56px rgba(255, 255, 255, 0.04);
}

.premium-laptop__screen::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  width: 42px;
  height: 3px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.premium-laptop__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.08), transparent 31%, transparent 100%);
  opacity: 0.72;
  pointer-events: none;
}

.screen-glare {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 72% 22%, rgba(56, 189, 248, 0.11), transparent 34%);
}

.screen-logo {
  max-width: 78%;
  white-space: nowrap;
  font-size: clamp(1.45rem, 3vw, 2.85rem);
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.07em;
  line-height: 1;
  transform: translateZ(20px);
}

.screen-logo span {
  color: var(--orange-hot);
  text-shadow: 0 0 28px rgba(250, 90, 0, 0.24);
}

.screen-logo strong {
  color: var(--blue);
  font-weight: 800;
  text-shadow: 0 0 28px rgba(13, 110, 253, 0.35);
}

.premium-laptop__hinge {
  width: 40%;
  height: 10px;
  margin-left: 45%;
  border-radius: 999px;
  background: linear-gradient(90deg, #111827, #aab3bf 48%, #151b26);
  box-shadow: 0 7px 16px rgba(0, 0, 0, 0.38);
}

.premium-laptop__base {
  position: relative;
  width: 88%;
  margin-top: -1px;
  aspect-ratio: 2.18;
  transform: perspective(920px) rotateX(58deg) rotateZ(2deg);
  transform-origin: top;
  overflow: hidden;
  border-radius: 16px 16px 28px 28px;
  background:
    linear-gradient(155deg, rgba(226, 232, 240, 0.84) 0%, #697282 12%, #1b2430 37%, #080d15 100%);
  box-shadow:
    0 44px 82px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -18px 32px rgba(0, 0, 0, 0.46);
}

.base-lip {
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: 0;
  height: 18%;
  border-radius: 0 0 24px 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.28));
}

.board {
  position: absolute;
  inset: 8% 5% 17% 17%;
  overflow: hidden;
  border: 1px solid rgba(68, 140, 255, 0.4);
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(13, 110, 253, 0.38) 1px, transparent 1px),
    linear-gradient(rgba(250, 90, 0, 0.28) 1px, transparent 1px),
    radial-gradient(circle at 70% 30%, rgba(13, 110, 253, 0.25), transparent 22%),
    linear-gradient(135deg, #151f2d, #07111f 72%);
  background-size: 42px 42px, 34px 34px, auto, auto;
  box-shadow: inset 0 0 28px rgba(13, 110, 253, 0.12);
}

.board__fan {
  position: absolute;
  width: 24%;
  aspect-ratio: 1;
  border: 5px solid #111827;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 8deg, #0f172a 0 17deg, #64748b 17deg 27deg),
    #111827;
  box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.06), 0 0 16px rgba(13, 110, 253, 0.13);
}

.board__fan--left {
  left: 11%;
  top: 15%;
}

.board__fan--right {
  right: 8%;
  top: 15%;
}

.board__chip,
.board__ssd,
.board__memory,
.board__connector {
  position: absolute;
  border-radius: 6px;
  border: 1px solid rgba(56, 189, 248, 0.42);
  background: linear-gradient(145deg, #172033, #08111f);
}

.board__chip {
  left: 42%;
  top: 46%;
  width: 17%;
  height: 22%;
  box-shadow: 0 0 20px rgba(13, 110, 253, 0.25);
}

.board__ssd {
  left: 9%;
  bottom: 13%;
  width: 34%;
  height: 13%;
}

.board__memory {
  width: 17%;
  height: 11%;
  background: linear-gradient(145deg, #102719, #08111f);
}

.board__memory--one {
  left: 50%;
  top: 16%;
}

.board__memory--two {
  left: 50%;
  top: 31%;
}

.board__connector {
  width: 12%;
  height: 8%;
  background: linear-gradient(145deg, #293241, #0b1220);
}

.board__connector--one {
  right: 12%;
  bottom: 18%;
}

.board__connector--two {
  left: 31%;
  top: 42%;
}

.board__track {
  position: absolute;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--orange));
  box-shadow: 0 0 14px rgba(13, 110, 253, 0.5);
}

.board__track--one {
  left: 47%;
  bottom: 24%;
  width: 38%;
}

.board__track--two {
  left: 17%;
  top: 52%;
  width: 23%;
}

.board__track--three {
  right: 11%;
  bottom: 42%;
  width: 22%;
}

.trackpad {
  position: absolute;
  left: 6%;
  bottom: 12%;
  width: 21%;
  height: 24%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
}

.premium-laptop__shadow {
  position: absolute;
  left: 10%;
  right: 2%;
  bottom: -8%;
  height: 20%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.52), transparent 70%);
  filter: blur(12px);
  transform: rotate(3deg);
}

.floating-part {
  position: absolute;
  z-index: 5;
  border: 1px solid rgba(83, 170, 255, 0.32);
  background: linear-gradient(135deg, #141d2b, #07101d);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32), 0 0 20px rgba(13, 110, 253, 0.18);
}

.floating-part--ssd {
  --part-rotate: -23deg;
  left: 20%;
  top: 15%;
  width: 136px;
  height: 54px;
  transform: rotate(-23deg);
  border-radius: 8px;
}

.floating-part--ssd span {
  position: absolute;
  left: 43px;
  top: 14px;
  color: #fff;
  font-size: 1.04rem;
  font-weight: 800;
}

.floating-part--ssd i {
  position: absolute;
  width: 18px;
  height: 18px;
  top: 16px;
  border: 2px solid rgba(250, 90, 0, 0.72);
  border-radius: 50%;
}

.floating-part--ssd i:first-of-type {
  left: 14px;
}

.floating-part--ssd i:last-of-type {
  right: 12px;
}

.floating-part--ram {
  --part-rotate: 13deg;
  left: 24%;
  top: 40%;
  width: 166px;
  height: 50px;
  transform: rotate(13deg);
  border-radius: 8px;
  background: linear-gradient(135deg, #0b2d1f, #06131f);
}

.floating-part--ram i {
  display: inline-block;
  width: 25px;
  height: 24px;
  margin: 12px 5px 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 4px;
  background: linear-gradient(145deg, #253044, #0d1422);
}

.floating-part--chip {
  right: 11%;
  bottom: 11%;
  width: 82px;
  height: 70px;
  border-radius: 8px;
}

.floating-part--chip span {
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(255, 255, 255, 0.2) 6px 8px);
}

.floating-part--screwdriver {
  right: 0;
  top: 40%;
  width: 200px;
  height: 28px;
  border: 0;
  background: transparent;
  transform: rotate(-34deg);
}

.floating-part--screwdriver::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 150px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #dce5ef, #64748b);
}

.floating-part--screwdriver span {
  position: absolute;
  right: 0;
  top: 0;
  width: 78px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(90deg, #111827 0%, #1f2937 34%, var(--orange) 100%);
  box-shadow: 0 0 20px rgba(250, 90, 0, 0.32);
}

.section-title {
  margin: 0 0 28px;
  font-size: clamp(1.85rem, 2.6vw, 2.55rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.055em;
  color: var(--orange-hot);
}
/* The Re-Save wordmark inside a heading keeps its own two-tone brand colours. */
.section-title .resave-wordmark__re { color: var(--orange-hot); }
.section-title .resave-wordmark__save { color: var(--blue); }

.stats-section,
.process-section,
.services-section,
.trust-section,
.faq-section {
  position: relative;
  padding: 24px 0;
}

.stats-card,
.panel,
.faq-item,
.service-card {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(15, 30, 51, 0.82), rgba(6, 15, 29, 0.66));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 18px 58px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(18px) saturate(125%);
}

.stats-card {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: 0 22px 80px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.stat-item {
  display: grid;
  grid-template-columns: 60px 1fr;
  align-items: center;
  gap: 16px;
  min-height: 122px;
  padding: 28px 24px;
}

.stat-item + .stat-item {
  border-left: 1px solid rgba(125, 159, 205, 0.13);
}

.stat-item__icon,
.service-card__icon,
.process-step__icon {
  display: grid;
  place-items: center;
  color: var(--blue);
}

.stat-item__icon svg,
.service-card__icon svg,
.process-step__icon svg {
  width: 42px;
  height: 42px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 12px rgba(13, 110, 253, 0.34));
}

.stat-item strong {
  display: block;
  color: var(--orange-hot);
  font-size: clamp(1.3rem, 1.45vw, 1.7rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.stat-item p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
}

.process-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
}

.process-step {
  position: relative;
  text-align: center;
}

.process-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 42px;
  right: -22px;
  width: 50px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), rgba(13, 110, 253, 0.18), transparent);
}

.process-step__icon {
  width: 82px;
  height: 82px;
  margin: 0 auto 16px;
  border: 1px solid rgba(125, 159, 205, 0.2);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, rgba(13, 110, 253, 0.15), rgba(255, 255, 255, 0.03));
  box-shadow: 0 0 38px rgba(13, 110, 253, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform 0.28s var(--ease), border-color 0.28s var(--ease), box-shadow 0.28s var(--ease), color 0.28s var(--ease);
}

.process-step__number {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--blue);
  font-size: 0.72rem;
  font-weight: 800;
  box-shadow: 0 0 18px rgba(13, 110, 253, 0.42);
}

.process-step h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
}

.process-step p {
  margin: 10px auto 0;
  max-width: 170px;
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 500;
  line-height: 1.58;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.service-card {
  position: relative;
  height: 100%;
  min-height: 96px;
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: start;
  gap: 16px;
  overflow: hidden;
  border-radius: 12px;
  padding: 20px 18px;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at 20% 20%, rgba(13, 110, 253, 0.18), transparent 44%);
  transition: opacity 0.25s var(--ease);
}

.service-card:hover {
  transform: translateY(-5px);
  border-color: rgba(13, 110, 253, 0.65);
  background: linear-gradient(145deg, rgba(13, 110, 253, 0.13), rgba(10, 25, 45, 0.82));
  box-shadow: 0 26px 74px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(13, 110, 253, 0.5), 0 0 26px rgba(13, 110, 253, 0.32);
}

.service-card:hover::before {
  opacity: 1;
}

.service-card__icon,
.service-card span {
  position: relative;
  z-index: 1;
}

.service-card__icon {
  align-self: start;
  transition: color 0.25s var(--ease), transform 0.25s var(--ease);
}

.service-card:hover .service-card__icon {
  color: var(--orange-hot);
  transform: translateY(-1px) scale(1.04);
}

.service-card strong,
.service-card small {
  display: block;
}

.service-card strong {
  font-size: 0.97rem;
  font-weight: 800;
  line-height: 1.25;
}

.service-card small {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.82rem;
  font-weight: 600;
}

.service-card em {
  display: none;
}

.services-section__action {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

.trust-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr) minmax(0, 0.82fr);
  gap: 18px;
  align-items: stretch;
}

.panel {
  border-radius: var(--radius);
  min-height: 232px;
  padding: 22px;
  display: flex;
  flex-direction: column;
}

.panel h2 {
  margin: 0 0 14px;
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.panel__header h2 {
  margin-bottom: 0;
}

.panel__header span {
  color: #93c5fd;
}

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

.gallery-grid figure {
  min-height: 150px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(125, 159, 205, 0.12);
  border-radius: 10px;
  background: #0f172a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-placeholder {
  position: relative;
}

.gallery-placeholder::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(13, 110, 253, 0.38);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 42%, rgba(250, 90, 0, 0.34), transparent 18%),
    linear-gradient(135deg, rgba(13, 110, 253, 0.2), transparent);
}

.trust-list ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trust-list li {
  position: relative;
  padding-left: 28px;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.34;
}

.review-score {
  display: flex;
  align-items: center;
  gap: 10px;
}

.review-score strong {
  color: var(--orange-hot);
  font-size: 1.95rem;
  font-weight: 800;
}

.review-score span {
  color: var(--orange);
  letter-spacing: 0.08em;
}

.reviews-panel p {
  color: var(--muted);
  font-weight: 500;
  line-height: 1.52;
  margin: 0;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.review-author > span {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f8fafc, #64748b);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

.review-author strong,
.review-author small {
  display: block;
}

.review-author strong {
  font-weight: 800;
}

.review-author small {
  color: var(--soft);
  font-weight: 600;
}

.faq-section {
  padding-bottom: 58px;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: 12px 18px;
}

.faq-item {
  overflow: hidden;
  border-radius: 10px;
  transition: border-color 0.22s var(--ease), background 0.22s var(--ease), box-shadow 0.22s var(--ease);
}

.faq-item[open] {
  border-color: rgba(13, 110, 253, 0.42);
  background: linear-gradient(145deg, rgba(13, 110, 253, 0.1), rgba(7, 16, 30, 0.72));
  box-shadow: 0 18px 58px rgba(0, 0, 0, 0.22);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  padding: 18px 20px;
  font-weight: 750;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item__icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--orange);
  transition: transform 0.28s var(--ease), color 0.28s var(--ease);
}

.faq-item__icon .resave-icon {
  width: 18px;
  height: 18px;
}

.faq-item[open] .faq-item__icon {
  color: var(--blue);
  transform: rotate(180deg);
}

.faq-item p {
  margin: 0;
  border-top: 1px solid rgba(125, 159, 205, 0.14);
  padding: 0 20px 20px;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.66;
  animation: faq-reveal 0.24s var(--ease);
}

.site-footer {
  position: relative;
  border-top: 1px solid rgba(125, 159, 205, 0.15);
  background:
    radial-gradient(circle at 20% 0%, rgba(13, 110, 253, 0.12), transparent 32rem),
    linear-gradient(180deg, rgba(12, 25, 42, 0.84), rgba(2, 8, 20, 0.9));
  padding: 46px 0 24px;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.3fr 0.85fr 0.85fr 0.8fr 1.1fr;
  gap: 40px;
}

/* Footer wraps to two rows on mid widths before collapsing to one column. */
@media (max-width: 1080px) and (min-width: 861px) {
  .site-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 40px;
  }
}

.footer-brand p,
.footer-list {
  color: var(--muted);
}

.footer-brand p {
  max-width: 330px;
  font-weight: 500;
  line-height: 1.65;
}

.footer-socials {
  display: flex;
  gap: 10px;
}

.footer-socials a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.035);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.footer-socials a:hover {
  transform: translateY(-2px);
  border-color: rgba(13, 110, 253, 0.5);
  color: #93c5fd;
}

.site-footer h2 {
  margin: 0 0 16px;
  font-size: 1rem;
  font-weight: 800;
}

.footer-list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 500;
}

.footer-list a:hover {
  color: var(--white);
}

.footer-list--contacts span {
  display: block;
  color: var(--soft);
  font-size: 0.78rem;
}

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 38px;
  color: var(--soft);
  font-size: 0.86rem;
  font-weight: 500;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  place-items: center;
  padding: 24px;
}

.modal.is-open {
  display: grid;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 20, 0.76);
  backdrop-filter: blur(20px);
}

.modal__dialog {
  position: relative;
  width: min(520px, 100%);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(15, 27, 45, 0.98), rgba(2, 8, 20, 0.98));
  box-shadow: var(--shadow-strong);
  padding: 30px;
}

.modal__close {
  position: absolute;
  right: 16px;
  top: 14px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--white);
  cursor: pointer;
}

.modal__eyebrow {
  margin: 0 0 8px;
  color: var(--orange);
  font-weight: 800;
}

.modal h2 {
  margin: 0;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.05em;
}

.modal h2 + p {
  color: var(--muted);
  line-height: 1.6;
}

.lead-form {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.lead-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.lead-form input,
.lead-form select,
.lead-form textarea {
  width: 100%;
  border: 1px solid rgba(125, 159, 205, 0.22);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
  padding: 13px 14px;
  outline: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.lead-form select option {
  background: #0f172a;
}

.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
  border-color: rgba(13, 110, 253, 0.72);
  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.16);
}

/* Phone field: country-code prefix select + number input */
.phone-field {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 10px;
}

.phone-field__code {
  width: 100%;
  text-align: left;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  background:
    rgba(255, 255, 255, 0.06)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2393b4e0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E")
    no-repeat right 12px center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 30px;
}

.phone-field__number {
  letter-spacing: 0.02em;
}

@media (max-width: 380px) {
  .phone-field {
    grid-template-columns: 104px 1fr;
  }
}

.modal__fallback {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  color: var(--soft);
}

.modal__fallback a {
  color: #60a5fa;
}

.lead-toast {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 120;
  width: min(520px, calc(100vw - 48px));
  transform: translate(-50%, -50%);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(15, 27, 45, 0.98), rgba(2, 8, 20, 0.98));
  box-shadow: var(--shadow-strong);
  padding: 30px;
  color: var(--white);
}

.lead-toast::before {
  content: "";
  position: fixed;
  inset: -100vmax;
  z-index: -1;
  background: rgba(2, 8, 20, 0.76);
  backdrop-filter: blur(20px);
}

.lead-toast h2 {
  margin: 0;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.05em;
}

.lead-toast h2 + p {
  margin: 14px 0 22px;
  color: var(--muted);
  line-height: 1.6;
}

.lead-toast.is-error {
  border-color: rgba(250, 90, 0, 0.44);
}

.subpage-hero {
  padding: 80px 0 40px;
}

.subpage-hero__grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 40px;
  align-items: start;
}

.subpage-hero h1 {
  margin: 18px 0;
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
}

.subpage-hero p,
.content-panel {
  color: var(--muted);
  line-height: 1.7;
}

.breadcrumbs {
  display: flex;
  gap: 9px;
  color: var(--soft);
}

.service-summary,
.content-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 26px;
}

.service-summary { overflow: hidden; }

/* Service photo inside the price card — mobile only (shown via the ≤768 rule). */
.service-summary__photo { display: none; }

.service-summary__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -26px -26px 22px;
  padding: 28px 0 26px;
  background:
    radial-gradient(circle at 50% 32%, rgba(20, 120, 255, 0.24), transparent 70%),
    linear-gradient(180deg, rgba(20, 120, 255, 0.1), rgba(11, 26, 45, 0));
  border-bottom: 1px solid rgba(125, 159, 205, 0.18);
  box-shadow: inset 0 -2px 0 rgba(255, 106, 0, 0.55);
}

.service-summary__badge svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.6;
  filter: drop-shadow(0 0 10px rgba(20, 120, 255, 0.45));
}

.service-summary dl {
  margin: 20px 0 0;
  display: grid;
  gap: 14px;
  text-align: center;
}

.service-summary dt {
  color: var(--soft);
}

.service-summary dd {
  margin: 4px 0 0;
  font-weight: 800;
}
.service-summary__price {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.01em;
}
.service-summary__price--uah { color: #ff6a00; }
.service-summary__price--zl { color: #ff6a00; }

@keyframes laptop-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-3deg);
  }
  50% {
    transform: translate3d(0, -8px, 0) rotate(-2.2deg);
  }
}

@keyframes faq-reveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1180px) {
  .header-contacts {
    display: none;
  }

  .hero-section__grid {
    grid-template-columns: 0.8fr 1.25fr;
  }

  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .stats-card {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-item + .stat-item {
    border-left: 0;
    border-top: 1px solid rgba(125, 159, 205, 0.13);
  }
}

@media (max-width: 920px) {
  .site-header__inner {
    min-height: 74px;
  }

  .primary-nav {
    position: fixed;
    left: 20px;
    right: 20px;
    top: 124px;   /* clears the taller two-row mobile header (brand + phones row) */
    z-index: 60;  /* above the dim backdrop (45) */
    max-height: calc(100dvh - 140px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: none;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(2, 8, 20, 0.96);
    padding: 18px;
  }

  body.is-nav-open .primary-nav {
    display: block;
  }

  .primary-nav__list {
    display: grid;
    justify-content: stretch;
    gap: 0;
  }

  .primary-nav__list a {
    display: block;
    padding: 13px 6px;
  }

  .primary-nav__list a::after {
    display: none;
  }

  .header-cta {
    display: none;
  }

  .nav-toggle {
    display: flex;
    margin-left: auto;
  }

  .hero-section {
    padding-top: 36px;
  }

  .hero-section__grid {
    display: flex;              /* linearize: no grid tracks can overlap */
    flex-direction: column;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .hero-copy {
    max-width: 700px;
    grid-column: auto;
    grid-row: auto;
  }

  .hero-visual {
    min-height: 450px;
    grid-column: auto;
    grid-row: auto;
  }

  .hero-edu-cta {
    grid-column: auto;
    grid-row: auto;
    order: 3;
    transform: none;            /* drop desktop --edu-x/--edu-y on small screens */
    padding-bottom: 4px;
    margin-top: clamp(10px, 3vw, 16px);
  }

  .hero-edu-cta .button--edu {
    max-width: 460px;
  }

  .hero-visual__stage {
    width: min(720px, 100%);
  }

  .process-track,
  .trust-grid,
  .site-footer__grid,
  .subpage-hero__grid {
    grid-template-columns: 1fr;
  }

  .process-step:not(:last-child)::after {
    display: none;
  }

  .process-track {
    gap: 18px;
  }

  .process-step {
    display: grid;
    grid-template-columns: 76px 32px 1fr;
    gap: 10px;
    align-items: center;
    text-align: left;
  }

  .process-step__icon {
    margin: 0;
  }

  .process-step p {
    grid-column: 3;
    max-width: none;
    margin: 0;
  }

  .faq-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .site-shell {
    width: min(100% - 28px, 1216px);
  }

  .brand__name {
    font-size: 1.66rem;
  }

  .brand__caption {
    font-size: 0.82rem;
  }

  .hero-title {
    font-size: clamp(2.05rem, 8.5vw, 2.85rem);
    letter-spacing: -0.025em;
  }

  .hero-subtitle {
    max-width: none;
    font-size: 1.04rem;
  }

  .hero-actions,
  .hero-actions .button {
    width: 100%;
  }

  .hero-edu-cta {
    padding-inline: 0;
    padding-bottom: 0;
    margin-top: 12px;           /* slightly tighter than the 16px action gap */
  }

  .hero-edu-cta .button--edu {
    max-width: none;
    min-height: 50px;
    height: auto;
    font-size: 1rem;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    padding-block: 12px;
  }

  .hero-locations {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .hero-location-dot {
    display: none;
  }

  .hero-visual {
    min-height: 365px;
  }

  .hero-visual__stage {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }

  .premium-laptop {
    left: 15%;
    top: 23%;
    width: 80%;
  }

  .floating-part--ssd,
  .floating-part--ram,
  .floating-part--chip {
    opacity: 0.78;
    scale: 0.74;
  }

  .floating-part--screwdriver {
    display: none;
  }

  .stats-card,
  .services-grid,
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .stat-item {
    min-height: auto;
    grid-template-columns: 48px 1fr;
    padding: 20px;
  }

  .trust-section,
  .faq-section {
    padding-top: 12px;
  }

  .site-footer__bottom {
    flex-direction: column;
  }

  .modal {
    padding: 14px;
  }

  .modal__dialog {
    padding: 24px;
  }
}

.button--telegram .button__tg {
  flex: 0 0 auto;
}

/* ---- How we work: icon hover ---- */
.process-step:hover .process-step__icon {
  transform: translateY(-4px);
  border-color: rgba(13, 110, 253, 0.55);
  box-shadow: 0 0 52px rgba(13, 110, 253, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--orange-hot);
}

/* ---- Unified stats + process composition ---- */
/* Stats band sits above process steps inside the same section */
.process-section__stats-band {
  margin-bottom: 48px;
}
/* Visual divider between stats band and process heading */
.process-section__stats-band + .section-title {
  padding-top: 8px;
  border-top: 1px solid rgba(125, 159, 205, 0.14);
}
/* Remove the standalone .stats-section section padding when stats are
   embedded inside the process section (the parent section already has it) */
.process-section--with-stats > .site-shell > .stats-card:first-child {
  margin-top: 0;
}

/* ---- Lightweight carousel (gallery + reviews) ---- */
.carousel {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.carousel__track {
  display: flex;
  transition: transform 0.5s var(--ease);
  will-change: transform;
  touch-action: pan-y;
}

.carousel__slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  margin: 0;
}

.carousel--gallery .carousel__slide {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid rgba(125, 159, 205, 0.14);
  border-radius: 12px;
  background: #0f172a;
}

.carousel--gallery .carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carousel--gallery .gallery-placeholder::before {
  inset: 0;
  border: 0;
  border-radius: 12px;
}

.carousel-nav {
  display: flex;
  gap: 8px;
}

.carousel-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: #cfe0ff;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}

.carousel-btn:hover {
  background: rgba(13, 110, 253, 0.18);
  border-color: rgba(13, 110, 253, 0.6);
  color: #fff;
}

.carousel-btn:active {
  transform: scale(0.92);
}

.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 16px;
}

.carousel__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.26);
  cursor: pointer;
  transition: background 0.22s var(--ease), width 0.22s var(--ease);
}

.carousel__dot.is-active {
  width: 22px;
  background: var(--orange);
}

/* ---- Reviews slide + client avatar ---- */
.review-slide {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.review-author__avatar {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #0D6EFD, #38bdf8);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.review-author__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- FAQ smooth open/close ---- */
.faq-item__body {
  overflow: hidden;
}

/* ---- Global scroll reveal (Intersection Observer) ---- */
.has-js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.has-js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.has-js .carousel--fade .carousel__track {
  display: block;
  position: relative;
  transition: none;
}

.has-js .carousel--fade .carousel__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}

.has-js .carousel--fade .carousel__slide.is-active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}

.locations-panel__contacts {
  list-style: none;
  margin: 22px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 14px;
}

.locations-panel__contacts li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
}

.locations-panel__contacts li small {
  margin-left: auto;
  color: var(--soft);
  font-weight: 600;
}

.locations-panel__contacts a {
  color: var(--white);
  transition: color 0.2s var(--ease);
}

.locations-panel__contacts a:hover {
  color: var(--cyan);
}

.locations-panel__contacts span {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(13, 110, 253, 0.12);
  color: var(--blue);
}

.locations-panel__contacts span svg {
  width: 18px;
  height: 18px;
}

.location-card__phone {
  margin-top: 8px;
  font-weight: 700;
}

.location-card__phone a {
  color: var(--cyan);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

  .hero-visual__stage {
    transform: none !important;
  }

  .has-js .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .carousel__track {
    transition: none !important;
  }
}

/* Phase 3 native media polish */
.hero-visual__stage--media {
  min-height: 520px;
  overflow: visible;
}

.premium-laptop--image {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 32px;
  width: min(760px, 82vw);
  transform: rotate(-1deg);
  transform-origin: 50% 70%;
  animation: none;
  filter: drop-shadow(0 34px 46px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 34px rgba(0, 119, 255, 0.26));
}

.premium-laptop--image .premium-laptop__media {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

.premium-laptop--image .premium-laptop__shadow {
  position: absolute;
  left: 10%;
  right: 14%;
  bottom: -3%;
  height: 12%;
  border-radius: 999px;
  background: radial-gradient(ellipse, rgba(0, 119, 255, 0.34), transparent 70%);
  filter: blur(18px);
  z-index: -1;
}

.floating-part--image {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible;
  transform-origin: 50% 50%;
  z-index: 5;
}

.floating-part--image::before,
.floating-part--image::after {
  display: none !important;
}

.floating-part--image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.38)) drop-shadow(0 0 16px rgba(0, 119, 255, 0.24));
  user-select: none;
  pointer-events: none;
}

.hero-visual__stage--media .floating-part--ssd {
  width: 184px;
  height: 92px;
  top: 86px;
  left: 140px;
  --part-rotate: -23deg;
  --float-distance: 8px;
}

.hero-visual__stage--media .floating-part--ram {
  width: 206px;
  height: 76px;
  top: 220px;
  left: 122px;
  --part-rotate: 13deg;
  --float-distance: 10px;
}

.hero-visual__stage--media .floating-part--chip {
  width: 92px;
  height: 76px;
  right: 38px;
  bottom: 122px;
  --part-rotate: -7deg;
  --float-distance: 6px;
}

.hero-visual__stage--media .floating-part--screwdriver {
  width: 244px;
  height: 118px;
  right: 0;
  top: 174px;
  --part-rotate: -22deg;
  --float-distance: 12px;
}

.carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.review-author__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.locations-section {
  position: relative;
  padding: 18px 0 32px;
}

.locations-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.72fr);
  gap: 22px;
  align-items: stretch;
  padding: 22px;
  border: 1px solid rgba(92, 159, 255, 0.18);
  border-radius: 16px;
  background:
    radial-gradient(circle at 82% 18%, rgba(0, 119, 255, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(9, 25, 44, 0.86), rgba(5, 15, 28, 0.92));
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.locations-panel .section-title {
  margin-bottom: 16px;
  font-size: clamp(1.32rem, 2.2vw, 1.8rem);
}

.locations-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.location-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  gap: 14px;
  min-height: 176px;
  padding: 16px;
  border: 1px solid rgba(92, 159, 255, 0.16);
  border-radius: 14px;
  background: rgba(8, 22, 39, 0.72);
}

.location-card__country {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--color-muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.location-card h3 {
  margin: 0 0 4px;
  color: var(--color-text);
  font-size: 1.05rem;
}

.location-card p {
  margin: 0 0 10px;
  color: var(--color-muted);
  font-size: 0.86rem;
}

.location-card a {
  display: inline-flex;
  color: var(--color-blue);
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
}

.location-card pre {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-family: inherit;
  font-size: 0.78rem;
  line-height: 1.65;
  white-space: pre-wrap;
}

.location-card img {
  width: 128px;
  height: 144px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.locations-panel__cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding: 12px 4px 12px 18px;
}

.locations-panel__cta h2 {
  margin: 0 0 12px;
  color: var(--color-text);
  font-size: clamp(1.45rem, 2.4vw, 2.15rem);
  line-height: 1.08;
}

.locations-panel__cta p {
  max-width: 320px;
  margin: 0 0 22px;
  color: var(--color-muted);
}

.locations-panel__cta .button {
  width: fit-content;
}

@media (max-width: 1180px) {
  .premium-laptop--image {
    right: -76px;
    width: min(700px, 88vw);
  }

  .hero-visual__stage--media .floating-part--screwdriver {
    right: -52px;
  }
}

@media (max-width: 980px) {
  .hero-visual__stage--media {
    min-height: 420px;
  }

  .premium-laptop--image {
    right: 50%;
    bottom: 8px;
    width: min(680px, 96vw);
    transform: translateX(50%) rotate(-1deg);
  }

  .hero-visual__stage--media .floating-part--ssd {
    left: 8%;
    top: 42px;
  }

  .hero-visual__stage--media .floating-part--ram {
    left: 13%;
    top: 158px;
  }

  .hero-visual__stage--media .floating-part--screwdriver {
    right: 4%;
    top: 116px;
  }

  .hero-visual__stage--media .floating-part--chip {
    right: 10%;
    bottom: 72px;
  }

  .locations-panel,
  .locations-grid {
    grid-template-columns: 1fr;
  }

  .locations-panel__cta {
    padding: 4px;
  }
}

@media (max-width: 640px) {
  .hero-visual__stage--media {
    min-height: 310px;
  }

  .premium-laptop--image {
    width: 100%;
    max-width: 100%;
  }

  .hero-visual__stage--media .floating-part--ssd {
    width: 112px;
    height: 58px;
    left: 0;
    top: 38px;
  }

  .hero-visual__stage--media .floating-part--ram {
    width: 126px;
    height: 48px;
    left: 9%;
    top: 118px;
  }

  .hero-visual__stage--media .floating-part--screwdriver {
    width: 148px;
    height: 76px;
    right: -12px;
    top: 86px;
  }

  .hero-visual__stage--media .floating-part--chip {
    width: 62px;
    height: 52px;
    right: 7%;
    bottom: 48px;
  }

  .location-card {
    grid-template-columns: 1fr;
  }

  .location-card img {
    width: 100%;
    height: 180px;
  }
}

/* ---- Reference polish: trust/reviews/locations alignment ---- */
/* ── Reviews grid section ─────────────────────────────────── */
.reviews-grid-section {
  padding: 52px 0 60px;
}

.reviews-grid-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin-bottom: 26px;
}
.reviews-grid-header .section-title { margin-bottom: 0; }

/* Aggregate rating badge */
.reviews-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  text-decoration: none;
  transition: border-color .2s, background .2s;
}
a.reviews-rating-badge:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,106,0,.4);
}
.reviews-rating-badge__num {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: #ff6a00;
  letter-spacing: -.5px;
}
.reviews-rating-badge__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.reviews-rating-badge__stars {
  font-size: 15px;
  line-height: 1;
  letter-spacing: 1px;
}
.reviews-rating-badge__meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: rgba(255,255,255,.6);
  white-space: nowrap;
}
.reviews-rating-badge__meta svg { flex-shrink: 0; }

.reviews-grid-glink {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: rgba(255,255,255,.45);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s;
}
.reviews-grid-glink:hover { color: rgba(255,255,255,.85); }

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

.review-grid-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color .2s, background .2s;
}
.review-grid-card:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,100,0,.35);
}

.review-grid-card__stars {
  display: flex;
  gap: 1px;
  font-size: 17px;
  line-height: 1;
}
.rgc-star--on  { color: #ff6a00; }
.rgc-star--off { color: rgba(255,255,255,.2); }

.review-grid-card__text {
  flex: 1;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(255,255,255,.78);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.review-grid-card__author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,.07);
}

.review-grid-card__avatar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.review-grid-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.review-grid-card__avatar--initial {
  background: linear-gradient(135deg, #ff6a00, #ff9040);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.review-grid-card__meta strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  line-height: 1.25;
}
.review-grid-card__meta small {
  font-size: 11.5px;
  color: rgba(255,255,255,.45);
  line-height: 1.3;
}

/* Tablet: 2 columns */
@media (max-width: 920px) {
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Mobile: 1 column */
@media (max-width: 520px) {
  .reviews-grid { grid-template-columns: 1fr; }
  .reviews-grid-section { padding: 36px 0 44px; }
}

/* ── Trust section (gallery + trust-list only, reviews moved) ── */
.trust-section {
  padding-top: 20px;
}

.trust-grid {
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 18px;
}

.trust-grid > .panel {
  height: 100%;
  min-height: 246px;
  padding: 22px;
}

.service-gallery .carousel {
  flex: 1 1 auto;
  min-height: 150px;
}

.service-gallery .carousel__track,
.service-gallery .carousel__slide {
  height: 100%;
}

.carousel--gallery .carousel__slide {
  aspect-ratio: auto;
}

.carousel--gallery .carousel__slide img {
  object-fit: cover;
  object-position: center;
}

.service-gallery .carousel__dots {
  margin-top: 12px;
}

.trust-list {
  justify-content: flex-start;
}

.trust-list h2,
.reviews-panel h2 {
  margin-bottom: 12px;
}

.trust-list ul {
  gap: 8px;
}

.trust-list li {
  min-height: 20px;
  padding-left: 27px;
  font-size: 0.88rem;
  line-height: 1.32;
}

.reviews-panel .carousel {
  flex: 1 1 auto;
}

.review-slide {
  min-height: 160px;
}

.review-score {
  gap: 8px;
}

.review-score strong {
  font-size: 1.8rem;
  line-height: 1;
}

.review-score span {
  font-size: 0.9rem;
}

.reviews-panel p {
  font-size: 0.9rem;
}

.review-author {
  margin-top: auto;
}

.reviews-panel .carousel__dots {
  justify-content: flex-end;
  margin-top: 10px;
}

.reviews-google-link {
  text-align: right;
  margin: 6px 0 0;
  font-size: 12px;
}
.reviews-google-link a {
  color: var(--color-text-muted, #8b9aaa);
  text-decoration: none;
  opacity: .75;
  transition: opacity .2s;
}
.reviews-google-link a:hover { opacity: 1; }

.locations-panel {
  grid-template-columns: minmax(0, 1.62fr) minmax(280px, 0.62fr);
  align-items: stretch;
}

.locations-panel__content {
  min-width: 0;
}

.locations-grid {
  align-items: stretch;
}

.location-card {
  grid-template-columns: minmax(0, 0.84fr) minmax(190px, 1.16fr);
  min-height: 236px;
  gap: 16px;
}

.location-card__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.location-card__media {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.location-card__media img {
  width: 100%;
  height: 184px;
  border-radius: 12px;
  object-fit: cover;
  object-position: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.location-card__media a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid rgba(13, 110, 253, 0.42);
  border-radius: 9px;
  background: rgba(13, 110, 253, 0.08);
  color: #70b7ff;
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.22s var(--ease), border-color 0.22s var(--ease), background 0.22s var(--ease), color 0.22s var(--ease);
}

.location-card__media a:hover {
  transform: translateY(-1px);
  border-color: rgba(13, 110, 253, 0.7);
  background: rgba(13, 110, 253, 0.16);
  color: #fff;
}

.location-card > a {
  display: none;
}

.locations-panel__cta {
  justify-content: center;
  align-self: stretch;
}

.locations-panel__button {
  width: fit-content;
  color: #fff;
}

@media (max-width: 1080px) {
  .trust-grid {
    grid-template-columns: 1fr;
  }

  .trust-grid > .panel {
    min-height: auto;
  }

  .service-gallery .carousel {
    min-height: 260px;
  }
}

@media (max-width: 980px) {
  .locations-panel {
    grid-template-columns: 1fr;
  }

  .location-card {
    grid-template-columns: minmax(0, 0.9fr) minmax(220px, 1.1fr);
  }
}

@media (max-width: 640px) {
  .service-gallery .carousel {
    min-height: 210px;
  }

  .location-card {
    grid-template-columns: 1fr;
  }

  .location-card__media img {
    height: 220px;
  }
}

/* ---- Prompt fixes: header wrapping, stats rhythm, mobile dropdown ---- */
.header-cta {
  flex: 0 0 auto;
  min-width: max-content;
}

.stat-item {
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 14px;
}

.stat-item p {
  max-width: 138px;
  text-wrap: balance;
}

@media (min-width: 981px) {
  .primary-nav__list > li {
    flex: 0 0 auto;
  }

  .header-contacts {
    flex: 0 0 auto;
  }
}

@media (max-width: 980px) {
  .primary-nav__list {
    align-items: stretch;
  }

  .primary-nav__item--dropdown {
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-inline: 0;
  }

  .primary-nav__dropdown-link {
    flex: 1 1 auto;
  }

  .primary-nav__submenu-toggle {
    flex: 0 0 auto;
    padding: 12px 6px;
  }

  .primary-nav__item--dropdown::after {
    display: none;
  }

  .primary-nav__link {
    width: 100%;
    justify-content: space-between;
    padding: 12px 0;
    font-size: 1.08rem;
  }

  .services-dropdown {
    position: static;
    flex: 1 1 100%;
    width: 100%;
    max-height: 0;
    margin-top: 0;
    padding: 0 12px;
    overflow: hidden;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    border: 0;
    border-radius: 12px;
    background: rgba(13, 110, 253, 0.08);
    box-shadow: none;
    transition: max-height 0.28s var(--ease), padding 0.28s var(--ease), margin 0.28s var(--ease);
  }

  .primary-nav__item--dropdown.is-open > .services-dropdown {
    max-height: 70vh;
    margin-top: 6px;
    padding: 10px 12px;
    overflow-y: auto;
  }

  .services-dropdown__grid {
    grid-template-columns: 1fr;
  }

  .hero-actions {
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  .lead-toast {
    width: min(520px, calc(100vw - 28px));
    padding: 26px 22px;
  }

  .lead-toast h2 {
    font-size: 1.65rem;
  }
}

/* ---- SVG icon system and requested polish ---- */
.resave-icon {
  display: block;
  width: 1em;
  height: 1em;
  color: currentColor;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: color 0.2s ease, stroke 0.2s ease, transform 0.2s ease;
}

.stat-item__icon,
.service-card__icon,
.process-step__icon,
.trust-list__icon,
.footer-list--contacts > li > span,
.footer-socials a,
.location-card__media a span,
.button__icon,
.primary-nav__chevron {
  color: #0d6efd;
  transition: color 0.2s ease, transform 0.2s ease;
}

.stat-item:hover .stat-item__icon,
.service-card:hover .service-card__icon,
.process-step:hover .process-step__icon,
.trust-list li:hover .trust-list__icon,
.footer-list--contacts li:hover > span,
.footer-socials a:hover,
.location-card__media a:hover span,
.button:hover .button__icon,
.primary-nav__item--dropdown:hover .primary-nav__chevron {
  color: #FA5A00;
}

.button {
  gap: 10px;
}

.button__icon .resave-icon {
  width: 18px;
  height: 18px;
}

/* Unified dropdown tab: label link + chevron toggle button, one component. */
.primary-nav__item--dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-inline: 6px;
}

.primary-nav__submenu-toggle {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 14px 2px;
  font: inherit;
  cursor: pointer;
}

.primary-nav__chevron .resave-icon,
.primary-nav__chevron svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.4;
}

.primary-nav__chevron {
  display: inline-flex;
  transition: transform 0.3s var(--ease), color 0.22s var(--ease);
}

.primary-nav__item--dropdown.is-open .primary-nav__chevron {
  transform: rotate(180deg);
}

@media (min-width: 981px) {
  .primary-nav__item--dropdown:hover .primary-nav__chevron,
  .primary-nav__item--dropdown:focus-within .primary-nav__chevron {
    transform: rotate(180deg);
  }
}

.services-dropdown__grid a svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* Invisible hover bridge between the tab and the dropdown panel. */
.primary-nav__item--dropdown::after {
  content: "";
  position: absolute;
  left: -22px;
  right: -22px;
  top: 100%;
  height: 28px;
  pointer-events: auto;
}

.services-dropdown {
  margin-top: 12px;
}

.header-phone {
  gap: 0;
}

.hero-badge {
  gap: 0;
}

.trust-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-left: 0;
}

.trust-list__icon {
  flex: 0 0 auto;
  margin-top: 2px;
}

.trust-list__icon .resave-icon {
  width: 18px;
  height: 18px;
}

.trust-list li strong,
.trust-list li small {
  display: block;
}

.trust-list li small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.carousel-btn .resave-icon {
  width: 18px;
  height: 18px;
}

.modal__close .resave-icon {
  width: 18px;
  height: 18px;
}

.footer-socials a .resave-icon {
  width: 18px;
  height: 18px;
}

.footer-list--contacts > li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
}

.footer-list--contacts > li > span {
  grid-row: 1 / span 2;
  margin-top: 2px;
}

.footer-list--contacts > li > span .resave-icon {
  width: 17px;
  height: 17px;
}

.footer-list--contacts small {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}

.location-card__image {
  display: block;
  width: 100%;
  height: 184px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(125, 159, 205, 0.16);
}

.location-card__image img,
.location-card__media img {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  object-fit: cover;
  object-position: var(--location-image-x, 50%) var(--location-image-y, 50%);
  transform: scale(var(--location-image-scale, 1));
  transform-origin: var(--location-image-x, 50%) var(--location-image-y, 50%);
}

.location-card__media a .resave-icon {
  width: 15px;
  height: 15px;
}

@media (max-width: 640px) {
  .location-card__image {
    height: 220px;
  }
}

/* ---- Phase 2 static hero and conversion polish ---- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--site-header-offset, 112px));
}

:where(section[id], footer[id]) {
  scroll-margin-top: calc(var(--site-header-offset, 112px));
}

.hero-visual__stage--media {
  min-height: 520px;
  overflow: visible;
  transform: none !important;
}

.hero-visual__stage--media::before,
.hero-visual__stage--media::after {
  display: none !important;
  animation: none !important;
}

.hero-visual__stage--media .floating-part,
.hero-visual__stage--media .premium-laptop,
.hero-visual__stage--media .floating-part--image,
.hero-visual__stage--media .premium-laptop--image {
  animation: none !important;
  transition: none;
}

.premium-laptop--image {
  left: 22%;
  top: 15%;
  width: min(710px, 82%);
  transform: none;
  z-index: 4;
}

.premium-laptop__media,
.floating-part--image img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.premium-laptop__shadow {
  left: 12%;
  right: 8%;
  bottom: 4%;
  height: 36px;
  opacity: .52;
  filter: blur(20px);
}

.floating-part--image {
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  filter: drop-shadow(0 24px 28px rgba(0, 0, 0, .34));
}

.floating-part--ssd {
  left: 14%;
  top: 9%;
  width: min(178px, 22%);
  transform: rotate(-18deg);
  z-index: 5;
}

.floating-part--ram {
  left: 17%;
  top: 30%;
  width: min(178px, 22%);
  transform: rotate(8deg);
  z-index: 5;
}

.floating-part--screwdriver {
  right: -2%;
  top: 30%;
  width: min(205px, 24%);
  transform: rotate(-23deg);
  z-index: 3;
}

.floating-part--chip {
  right: 9%;
  bottom: 8%;
  width: min(82px, 11%);
  transform: rotate(-5deg);
  z-index: 5;
}

.button,
.button__icon,
.button__icon .resave-icon {
  transition-duration: .3s;
}

.button--telegram {
  opacity: 1;
  transition: opacity .22s ease;
}

.button--telegram:hover,
.button--telegram:focus {
  opacity: 1;
}

.button--telegram {
  background: linear-gradient(180deg, rgba(13, 110, 253, 0.58), rgba(13, 110, 253, 0.40));
  border-color: rgba(13, 110, 253, 0.95);
  box-shadow: inset 0 0 0 1px rgba(13, 110, 253, .72), 0 8px 22px rgba(13, 110, 253, .2);
  color: #fff;
}

.button--telegram .button__icon,
.button--telegram .resave-icon {
  color: var(--blue);
  transition: color .22s ease;
}

.button--telegram:hover {
  background: linear-gradient(180deg, rgba(13, 110, 253, 0.75), rgba(13, 110, 253, 0.58));
  box-shadow: inset 0 0 0 1px rgba(13, 110, 253, .9), 0 14px 32px rgba(13, 110, 253, .28);
  color: #fff;
}

.button--telegram:hover .button__icon,
.button--telegram:hover .resave-icon,
.button--telegram:focus .button__icon,
.button--telegram:focus .resave-icon {
  color: #FA5A00;
}

.button--primary .button__icon,
.button--primary:hover .button__icon {
  color: #f7fbff;
}

.button--primary:hover .button__icon .resave-icon {
  color: #dff2ff;
  filter: drop-shadow(0 0 7px rgba(13, 110, 253, .9));
}

.button--outline:hover .button__icon {
  color: #FA5A00;
}

.phone-field {
  grid-template-columns: minmax(172px, .9fr) minmax(190px, 1.1fr);
}

.phone-field__code {
  min-width: 0;
  padding-right: 38px;
}

.lead-toast {
  width: min(520px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  text-align: left;
}

.lead-toast .button {
  margin-top: 18px;
  width: 100%;
  justify-content: center;
}

.locations-panel {
  grid-template-columns: 1fr !important;
  gap: 18px;
}

.locations-panel__content {
  min-width: 0;
}

.locations-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.location-card {
  min-height: 318px;
  grid-template-columns: minmax(0, .98fr) minmax(250px, 1.02fr);
  align-items: stretch;
}

.location-card__body {
  align-self: stretch;
}

.location-card__media {
  align-self: stretch;
}

.location-card__image {
  height: 224px;
}

.location-card__phone {
  margin-top: 12px;
}

.locations-panel__cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px 28px;
  width: 100%;
  min-height: 146px;
}

.locations-panel__cta h2,
.locations-panel__cta p {
  margin: 0;
}

.locations-panel__button {
  justify-self: end;
}

.locations-panel__contacts {
  display: none !important;
}

.resave-icon {
  stroke-width: 1.7;
}

@media (max-width: 1180px) {
  .hero-visual__stage--media {
    min-height: 470px;
  }

  .premium-laptop--image {
    left: 18%;
    top: 17%;
    width: min(650px, 84%);
  }

  .floating-part--screwdriver {
    right: 0;
    width: min(178px, 24%);
  }
}

@media (max-width: 980px) {
  html {
    scroll-padding-top: calc(var(--site-header-offset, 92px));
  }

  :where(section[id], footer[id]) {
    scroll-margin-top: calc(var(--site-header-offset, 92px));
  }

  .hero-visual__stage--media {
    min-height: 430px;
    max-width: 720px;
    margin-inline: auto;
  }

  .premium-laptop--image {
    left: 18%;
    top: 17%;
    width: 78%;
  }

  .floating-part--ssd {
    left: 9%;
    top: 7%;
    width: 22%;
  }

  .floating-part--ram {
    left: 12%;
    top: 29%;
    width: 23%;
  }

  .floating-part--screwdriver {
    right: 0;
    top: 34%;
    width: 23%;
  }

  .floating-part--chip {
    right: 11%;
    bottom: 8%;
    width: 10%;
  }

  .locations-grid {
    grid-template-columns: 1fr;
  }

  .location-card {
    min-height: 0;
  }

  .locations-panel__cta {
    grid-template-columns: 1fr;
  }

  .locations-panel__button {
    justify-self: start;
  }
}

@media (max-width: 640px) {
  .hero-visual__stage--media {
    min-height: 330px;
  }

  .premium-laptop--image {
    left: 15%;
    top: 24%;
    width: 86%;
  }

  .floating-part--ssd {
    left: 6%;
    top: 8%;
    width: 26%;
  }

  .floating-part--ram {
    left: 8%;
    top: 29%;
    width: 27%;
  }

  .floating-part--screwdriver {
    right: -2%;
    top: 35%;
    width: 27%;
  }

  .floating-part--chip {
    right: 7%;
    bottom: 8%;
    width: 13%;
  }

  .phone-field {
    grid-template-columns: 1fr;
  }

  .location-card {
    grid-template-columns: 1fr;
  }

  .location-card__image {
    height: 236px;
  }
}

/* ---- Prompt bd79518a: editable hero assets and layout fixes ---- */
.hero-section__grid {
  grid-template-columns: minmax(410px, .82fr) minmax(0, 1.38fr);
  gap: 18px;
}

.hero-copy {
  max-width: 610px;
}

.hero-title {
  max-width: 610px;
}

.hero-title span {
  color: inherit;
  text-shadow: none;
}

.hero-title__prefix,
.hero-title__line,
.hero-title__middle,
.hero-title__suffix {
  color: var(--white);
}

.hero-title__line {
  display: block;
  white-space: nowrap;
}

.hero-title__line .hero-title__accent,
.hero-title__line .hero-title__middle {
  display: inline;
}

.hero-title__line .hero-title__middle {
  margin-left: .16em;
}

.hero-title__accent {
  color: var(--orange-hot) !important;
  text-shadow: 0 0 34px rgba(250, 90, 0, 0.28) !important;
}

@media (min-width: 769px) {
  .hero-title__prefix {
    white-space: nowrap;
  }
}

.hero-visual__stage--media {
  min-height: 520px;
  overflow: visible;
}

.hero-asset {
  position: absolute;
  left: 0;
  top: 0;
  z-index: var(--hero-z, 5);
  width: min(var(--hero-width, 180px), var(--hero-max-width, 30%));
  max-width: var(--hero-max-width, 30%);
  transform: translate3d(var(--hero-x, 0px), var(--hero-y, 0px), 0) scale(var(--hero-scale, 1));
  transform-origin: center center;
  pointer-events: none;
  user-select: none;
}

.hero-asset__inner {
  width: 100%;
  height: auto;
  animation-delay: var(--hero-delay, 0s);
  animation-fill-mode: both;
}

.hero-asset__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.hero-asset--glow-blue .hero-asset__inner {
  filter: drop-shadow(0 18px 24px rgba(13, 110, 253, .22));
}

.hero-asset--glow-orange .hero-asset__inner {
  filter: drop-shadow(0 18px 24px rgba(250, 90, 0, .2));
}

.hero-asset--glow-soft-white .hero-asset__inner {
  filter: drop-shadow(0 18px 24px rgba(255, 255, 255, .16));
}

.hero-asset--glow-blue.hero-asset--glow-strength-medium .hero-asset__inner {
  filter: drop-shadow(0 20px 30px rgba(13, 110, 253, .28));
}

.hero-asset--glow-blue.hero-asset--glow-strength-high .hero-asset__inner {
  filter: drop-shadow(0 22px 36px rgba(13, 110, 253, .34));
}

.hero-asset--glow-orange.hero-asset--glow-strength-medium .hero-asset__inner {
  filter: drop-shadow(0 20px 30px rgba(250, 90, 0, .26));
}

.hero-asset--glow-orange.hero-asset--glow-strength-high .hero-asset__inner {
  filter: drop-shadow(0 22px 36px rgba(250, 90, 0, .32));
}

.hero-asset--glow-soft-white.hero-asset--glow-strength-medium .hero-asset__inner {
  filter: drop-shadow(0 20px 30px rgba(255, 255, 255, .22));
}

.hero-asset--glow-soft-white.hero-asset--glow-strength-high .hero-asset__inner {
  filter: drop-shadow(0 22px 36px rgba(255, 255, 255, .28));
}

.hero-asset--float-small .hero-asset__inner {
  animation-name: hero-float-small;
}

.hero-asset--float-medium .hero-asset__inner {
  animation-name: hero-float-medium;
}

.hero-asset--float-large .hero-asset__inner {
  animation-name: hero-float-large;
}

.hero-asset--rotate-slow .hero-asset__inner {
  animation-name: hero-rotate-slow;
}

.hero-asset--tilt-soft .hero-asset__inner {
  animation-name: hero-tilt-soft;
}

.hero-asset--pulse-glow .hero-asset__inner {
  animation-name: hero-pulse-glow;
}

.hero-asset--orbit-soft .hero-asset__inner {
  animation-name: hero-orbit-soft;
}

.hero-asset--speed-slow .hero-asset__inner {
  animation-duration: 8.5s;
}

.hero-asset--speed-normal .hero-asset__inner {
  animation-duration: 6.5s;
}

.hero-asset--speed-fast .hero-asset__inner {
  animation-duration: 4.8s;
}

.hero-asset:not(.hero-asset--none) .hero-asset__inner {
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes hero-float-small {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -5px, 0); }
}

@keyframes hero-float-medium {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -10px, 0); }
}

@keyframes hero-float-large {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -16px, 0); }
}

@keyframes hero-rotate-slow {
  0%, 100% { transform: rotate(-1.4deg); }
  50% { transform: rotate(1.4deg); }
}

@keyframes hero-tilt-soft {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

@keyframes hero-pulse-glow {
  0%, 100% { opacity: .96; filter: brightness(1); }
  50% { opacity: 1; filter: brightness(1.08); }
}

@keyframes hero-orbit-soft {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(5px, -3px, 0); }
  50% { transform: translate3d(2px, -7px, 0); }
  75% { transform: translate3d(-4px, -2px, 0); }
}

.button--primary:hover .button__icon,
.button--primary:hover .button__icon .resave-icon {
  color: #bfe8ff !important;
  stroke: currentColor;
  filter: drop-shadow(0 0 6px rgba(13, 110, 253, .76));
}

.locations-panel {
  grid-template-columns: 1fr !important;
}

.locations-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.location-card {
  min-height: 360px;
  grid-template-columns: minmax(0, .86fr) minmax(310px, 1.14fr);
}

.location-card__image {
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 230px;
}

.location-card__media {
  min-width: 0;
}

.locations-panel__cta {
  display: none !important;
}

.footer-list--contacts > li {
  display: block;
}

.footer-list--contacts > li > span {
  display: none !important;
}

.phone-field {
  grid-template-columns: minmax(132px, .58fr) minmax(230px, 1.42fr);
}

.modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.lead-toast {
  width: min(520px, calc(100vw - 48px));
  min-height: 0;
  text-align: center;
}

.lead-toast h2 + p {
  margin-inline: auto;
}

.service-card small {
  display: grid;
  gap: 2px;
}

.service-card small span {
  display: block;
}

@media (max-width: 980px) {
  .hero-section__grid {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    max-width: 680px;
  }

  .hero-asset {
    transform: translate3d(var(--hero-tablet-x, var(--hero-x, 0px)), var(--hero-tablet-y, var(--hero-y, 0px)), 0) scale(var(--hero-tablet-scale, var(--hero-scale, 1)));
  }

  .location-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .hero-asset {
    transform: translate3d(var(--hero-mobile-x, var(--hero-tablet-x, var(--hero-x, 0px))), var(--hero-mobile-y, var(--hero-tablet-y, var(--hero-y, 0px))), 0) scale(var(--hero-mobile-scale, var(--hero-tablet-scale, var(--hero-scale, 1))));
  }

  .locations-grid {
    grid-template-columns: 1fr;
  }

  .phone-field {
    grid-template-columns: minmax(118px, .56fr) minmax(0, 1.44fr);
  }
}

/* ---- Prompt 481dc638: final UX polish and admin-driven visual controls ---- */
.brand__logo {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
}

.brand__logo-img {
  display: block;
  width: auto;
  max-width: 194px;
  max-height: 66px;
  object-fit: contain;
}

.header-phone {
  gap: 10px;
}

.header-phone > span:not(.header-phone__icon) {
  display: grid;
  gap: 2px;
}

.header-phone__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: #0D6EFD;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 10px rgba(0, 128, 255, .34));
}

.header-phone__icon svg {
  width: 19px;
  height: 19px;
}

.lead-form textarea[name="lead_issue"] {
  height: 150px;
  min-height: 150px;
  max-height: 150px;
  resize: none;
}

.button--primary:hover .button__icon,
.header-cta:hover .button__icon {
  color: #0D6EFD;
  background: rgba(0, 140, 255, .12);
  box-shadow: none;
  filter: none;
}

.services-dropdown {
  width: min(760px, calc(100vw - 32px));
  padding: 24px;
}

.services-dropdown__grid {
  gap: 12px;
}

.services-dropdown__grid a {
  min-height: 64px;
  padding: 16px 18px;
  font-size: 15px;
}

.services-dropdown__icon {
  width: 40px;
  height: 40px;
}

.hero-section__grid {
  grid-template-columns: minmax(500px, .94fr) minmax(0, 1.46fr);
}

.hero-copy {
  max-width: 740px;
}

.hero-title {
  line-height: 1.12;
  max-width: 760px;
}

.hero-visual__stage {
  perspective: 1200px;
}

.hero-asset {
  --hero-tilt-x: 0deg;
  --hero-tilt-y: 0deg;
  transform:
    translate3d(var(--hero-x, 0px), var(--hero-y, 0px), 0)
    scale(var(--hero-scale, 1))
    rotateX(var(--hero-tilt-y))
    rotateY(var(--hero-tilt-x));
  transform-style: preserve-3d;
  transition: transform .38s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}

.hero-asset__inner {
  transform: translateZ(24px);
}

.stat-item__icon {
  width: 58px;
  height: 58px;
}

.stat-item__icon svg {
  width: 38px;
  height: 38px;
}

.service-card {
  align-items: center;
}

.service-card__icon {
  align-self: center;
  display: grid;
  place-items: center;
  margin-inline: auto;
}

.process-step:not(:last-child)::after {
  opacity: .86;
  background: linear-gradient(90deg, rgba(0, 140, 255, .78), rgba(255, 255, 255, .58));
  box-shadow: 0 0 18px rgba(0, 140, 255, .28);
}

.process-step:hover .process-step__icon {
  color: #0D6EFD;
  transform: translateY(-8px) scale(1.06);
  box-shadow: 0 16px 32px rgba(0, 128, 255, .24), inset 0 0 0 1px rgba(0, 140, 255, .5);
  filter: drop-shadow(0 0 16px rgba(0, 140, 255, .38));
}

.process-step:hover h3,
.process-step:hover p {
  color: inherit;
}

.location-card {
  grid-template-rows: auto 1fr auto;
  align-items: stretch;
}

.location-card__media {
  align-self: stretch;
}

.location-card__image {
  min-height: 280px;
  height: 100%;
}

.location-card__action {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  margin-top: 14px;
}

.location-card__action a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 11px 16px;
  border-radius: 8px;
  border: 1px solid rgba(0, 127, 255, .42);
  color: #6bb8ff;
  background: rgba(0, 127, 255, .08);
  transition: transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease), color .22s var(--ease);
}

.location-card__action a:hover {
  color: #fff;
  border-color: rgba(250, 90, 0, .72);
  background: linear-gradient(135deg, rgba(250, 90, 0, .94), rgba(250, 90, 0, .86));
  transform: translateY(-2px);
}

.location-card__action svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 980px) {
  .hero-section__grid {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    max-width: 760px;
  }

  .hero-asset {
    transform:
      translate3d(var(--hero-tablet-x, var(--hero-x, 0px)), var(--hero-tablet-y, var(--hero-y, 0px)), 0)
      scale(var(--hero-tablet-scale, var(--hero-scale, 1)))
      rotateX(var(--hero-tilt-y))
      rotateY(var(--hero-tilt-x));
  }
}

@media (max-width: 640px) {
  .brand__logo-img {
    max-width: 150px;
    max-height: 54px;
  }

  .services-dropdown {
    padding: 18px;
  }

  .services-dropdown__grid a {
    min-height: 58px;
    padding: 14px;
  }

  .hero-title {
    line-height: 1.16;
  }

  .hero-asset {
    transform:
      translate3d(var(--hero-mobile-x, var(--hero-tablet-x, var(--hero-x, 0px))), var(--hero-mobile-y, var(--hero-tablet-y, var(--hero-y, 0px))), 0)
      scale(var(--hero-mobile-scale, var(--hero-tablet-scale, var(--hero-scale, 1))))
      rotateX(var(--hero-tilt-y))
      rotateY(var(--hero-tilt-x));
  }

  .location-card__image {
    min-height: 230px;
  }
}

/* ---- Prompt точкові правки: locations, process reveal, buttons and hover states ---- */
.location-card__image {
  width: var(--location-photo-width, 100%);
  height: var(--location-photo-height, 100%);
  min-height: var(--location-photo-height, 280px);
}

.location-card__image img,
.location-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.process-step:hover .process-step__icon {
  color: var(--blue);
  transform: none !important;
  box-shadow: inset 0 0 0 1px rgba(0, 127, 255, .22);
  filter: none;
}

.has-js .process-step.process-step--scroll {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .72s cubic-bezier(.2, .8, .2, 1), transform .72s cubic-bezier(.2, .8, .2, 1);
}

.has-js .process-step.process-step--scroll .process-step__icon {
  transform: translateY(12px);
  transition: transform .72s cubic-bezier(.2, .8, .2, 1), opacity .72s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, color .3s ease;
}

.has-js .process-step.process-step--scroll.is-process-visible {
  opacity: 1;
  transform: translateY(0);
}

.has-js .process-step.process-step--scroll.is-process-visible .process-step__icon {
  transform: translateY(0);
}

.stat-item__icon {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
}

.stat-item__icon svg {
  width: 48px;
  height: 48px;
}

.button--primary .button__icon,
.button--primary .button__icon .resave-icon {
  background: transparent !important;
  color: #fff;
  box-shadow: none !important;
  filter: none;
  transition: color .28s ease, transform .28s ease, background-color .28s ease;
}

.button--primary:hover .button__icon,
.button--primary:hover .button__icon .resave-icon,
.header-cta:hover .button__icon,
.header-cta:hover .button__icon .resave-icon {
  background: transparent !important;
  color: #0D6EFD !important;
  stroke: currentColor;
  box-shadow: none !important;
  filter: none !important;
}

.button--telegram,
.button--telegram .button__icon,
.button--telegram .button__icon .resave-icon {
  transition-duration: .22s !important;
  transition-delay: 0s !important;
}

.service-card {
  transform-origin: center;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), border-color .28s ease, box-shadow .28s ease, background .28s ease;
}

.service-card:hover {
  transform: translateY(-3px) scale(1.03) !important;
  border-color: rgba(250, 90, 0, .62);
  background: linear-gradient(145deg, rgba(250, 90, 0, .13), rgba(10, 25, 45, .86));
  box-shadow: 0 24px 56px rgba(0, 0, 0, .26), 0 0 0 1px rgba(250, 90, 0, .34), 0 0 30px rgba(250, 90, 0, .22);
}

.service-card:hover .service-card__icon {
  color: var(--orange-hot);
  transform: scale(1.08);
}

.hero-section__grid {
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 1.26fr);
  gap: 0;
}

.hero-copy {
  max-width: 940px;
  margin-right: -170px;
  position: relative;
  z-index: 4;
}

.hero-title {
  max-width: 920px;
}

.hero-asset[data-hero-tilt-asset] {
  pointer-events: auto;
}

.hero-asset[data-hero-tilt-asset] .hero-asset__image {
  pointer-events: none;
}

@media (max-width: 980px) {
  .hero-copy {
    max-width: 760px;
    margin-right: 0;
  }
}

@media (max-width: 640px) {
  .stat-item__icon {
    width: 60px;
    height: 60px;
  }

  .stat-item__icon svg {
    width: 40px;
    height: 40px;
  }

  .location-card__image {
    min-height: var(--location-photo-height, 230px);
  }
}

/* ---- Prompt hero alignment and UX refinements ---- */
.site-header__inner {
  gap: clamp(10px, 1.15vw, 20px);
}

.primary-nav__list {
  gap: clamp(10px, 1vw, 22px);
}

.primary-nav__list a,
.primary-nav__link {
  padding-inline: 2px;
}

.header-contacts {
  gap: 10px;
}

.header-phone {
  justify-content: center;
  min-width: max-content;
}

.header-phone > span:not(.header-phone__icon) {
  text-align: center;
}

.header-cta {
  flex: 0 0 auto;
  white-space: nowrap;
  padding-inline: 16px;
}

/* The header content sits in a fixed 1216px shell, so at ≥1260px the layout is
   identical at every desktop width (1280 → 2K → 4K) and the phone block already
   sits centred between the last nav item and the CTA with equal gaps on both
   sides — no extra offset needed.

   Below 1260 the shell narrows and the seven nav items + both phones + CTA no
   longer share one row cleanly, so the header phones are hidden here (they stay
   in the hero quick-contact and the footer); the nav + CTA then fit. Scoped
   above the 920px mobile cutoff, so the hamburger layout is untouched. */
@media (min-width: 921px) and (max-width: 1259px) {
  .header-contacts { display: none; }
  .primary-nav__list a,
  .primary-nav__link { font-size: 0.9rem; }
}

.hero-section {
  overflow-x: clip;
}

.hero-section__grid {
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.2fr);
  gap: clamp(6px, 1vw, 18px);
  max-width: min(1440px, calc(100vw - 48px));
}

.hero-copy {
  max-width: 860px;
  margin-right: -34px;
  isolation: isolate;
  z-index: 2;
}

.hero-title {
  max-width: 840px;
}

.hero-visual {
  min-width: 0;
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.hero-visual__stage--media {
  max-width: min(820px, 100%);
  margin-left: auto;
  position: relative;
  z-index: 4;
}

.hero-visual__stage--media .premium-laptop,
.hero-visual__stage--media .premium-laptop--image,
.hero-visual__stage--media .floating-part {
  position: absolute;
  z-index: 5;
}

.hero-visual__stage--media .hero-asset {
  position: absolute;
  z-index: var(--hero-z, 6);
}

.hero-visual__stage--media::before,
.hero-visual__stage--media::after {
  z-index: 0 !important;
  pointer-events: none;
}

.hero-locations {
  display: none !important;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-badge__text {
  min-width: 0;
}

.hero-badge__flags {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}

.hero-language-switcher {
  position: relative;
  padding: 4px 0;
  margin: -4px 0;
}

.hero-badge__flag-link {
  display: inline-grid;
  place-items: center;
  width: max-content;
  height: max-content;
  border-radius: 5px;
  outline: none;
  transition: transform .18s ease, box-shadow .18s ease;
}

.hero-badge__flag-link:hover,
.hero-badge__flag-link:focus-visible,
.hero-badge__flag-link.is-active {
  transform: translateY(-1px);
}

.hero-badge__flag-link:focus-visible {
  box-shadow: 0 0 0 2px rgba(56, 189, 248, .75);
}

/* RU flag slides out to the RIGHT, inline inside the badge (no drop-down, no
   overflow). Collapsed it has zero width and a negative margin that cancels the
   flex gap, so there is no permanent empty slot; on hover/focus it expands. */
.hero-language-switcher__more {
  position: static;
  display: inline-grid;
  place-items: center;
  width: 0;
  margin-left: -5px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: none;
  transition: width .22s ease, margin-left .22s ease, opacity .2s ease;
}

.hero-language-switcher:hover .hero-language-switcher__more,
.hero-language-switcher:focus-within .hero-language-switcher__more,
.hero-language-switcher.is-open .hero-language-switcher__more {
  width: 20px;
  margin-left: 0;
  opacity: 1;
  pointer-events: auto;
}

.hero-badge__flags .flag {
  width: 20px;
  height: 14px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18);
}

.button--telegram .button__icon,
.button--telegram .button__icon .resave-icon {
  transition-property: color, transform;
  transition-duration: .24s !important;
  transition-timing-function: ease-out;
  transition-delay: 0s !important;
}

.button--telegram:hover .button__icon,
.button--telegram:hover .button__icon .resave-icon {
  color: var(--orange-hot) !important;
  stroke: currentColor;
  filter: none !important;
}

.service-card {
  transition-duration: .15s;
}

.service-card:hover {
  transform: translateY(-4px) scale(1.08) !important;
  transition-duration: .28s;
  border-color: rgba(250, 90, 0, .72);
  box-shadow: 0 30px 68px rgba(0, 0, 0, .3), 0 0 0 1px rgba(250, 90, 0, .42), 0 0 38px rgba(250, 90, 0, .28);
}

.service-card:hover .service-card__icon {
  transform: scale(1.12);
}

.location-card__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.location-card__action {
  width: var(--location-photo-width, 100%);
  max-width: 100%;
  margin-top: 0;
  align-self: center;
}

.location-card__action a {
  width: 100%;
}

@media (max-width: 1220px) {
  .primary-nav__list {
    gap: 10px;
  }

  .header-contacts {
    gap: 8px;
  }

  .header-phone {
    gap: 7px;
  }

  .header-cta {
    padding-inline: 13px;
  }
}

@media (max-width: 980px) {
  .hero-section__grid {
    max-width: min(100% - 32px, 760px);
    grid-template-columns: 1fr;
  }

  .hero-copy {
    max-width: 760px;
    margin-right: 0;
  }

  .hero-title {
    max-width: 760px;
  }
}

/* ---- Focused UI fixes: hero alignment, badge controls and hover polish ---- */
:root {
  --resave-content-max: 1360px;
  --resave-content-gutter: 32px;
}

.site-shell,
.hero-section__grid {
  width: min(var(--resave-content-max), calc(100% - (var(--resave-content-gutter) * 2)));
  max-width: var(--resave-content-max);
  margin-inline: auto;
}

.site-header__inner,
.hero-section__grid,
.stats-panel,
.process-section .site-shell,
.services-section .site-shell,
.trust-grid,
.locations-panel,
.faq-section .site-shell,
.site-footer__grid,
.site-footer__bottom {
  max-width: var(--resave-content-max);
}

.site-header__inner {
  gap: clamp(8px, 1vw, 18px);
}

.primary-nav__list {
  gap: clamp(9px, .85vw, 20px);
}

.header-cta {
  flex: 0 0 auto;
  max-width: 100%;
}

.hero-section {
  overflow-x: clip;
}

.hero-section__grid {
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.18fr);
}

.hero-copy {
  max-width: 850px;
  margin-right: -70px;
}

.hero-title {
  max-width: 820px;
}

.hero-visual,
.hero-visual__stage,
.hero-visual__stage--media {
  min-width: 0;
}

.hero-badge {
  width: var(--hero-badge-width, fit-content);
  min-height: var(--hero-badge-height, auto);
  color: var(--hero-badge-color, #38bdf8);
  background: var(--hero-badge-bg, linear-gradient(180deg, rgba(13, 110, 253, 0.16), rgba(13, 110, 253, 0.06)));
  border-color: var(--hero-badge-border, rgba(79, 150, 255, 0.28));
  font-size: var(--hero-badge-font-size, .77rem);
  transition: transform .28s ease-out, color .28s ease-out, background .28s ease-out, border-color .28s ease-out, box-shadow .28s ease-out;
}

.hero-badge__flags .flag {
  width: var(--hero-badge-flag-size, 20px);
  height: auto;
  aspect-ratio: 10 / 7;
}

.hero-actions .button,
.header-cta {
  transition: transform .28s ease-out, box-shadow .28s ease-out, border-color .28s ease-out, color .28s ease-out, background .28s ease-out;
}

.hero-actions .button .button__icon,
.hero-actions .button .button__icon .resave-icon,
.header-cta .button__icon,
.header-cta .button__icon .resave-icon {
  transition: color .26s ease-out, transform .26s ease-out, background-color .26s ease-out, opacity .26s ease-out;
}

.button--telegram,
.button--telegram:hover,
.button--telegram:focus {
  text-decoration: none;
}

.button--telegram::before,
.button--telegram::after,
.button--telegram .button__icon::before,
.button--telegram .button__icon::after {
  content: none !important;
  display: none !important;
}

.button--telegram .button__icon,
.button--telegram .button__icon .resave-icon {
  transition-property: color, transform, opacity;
  transition-duration: .24s !important;
  transition-timing-function: ease-out;
  transition-delay: 0s !important;
}

.button--telegram:hover .button__icon,
.button--telegram:hover .button__icon .resave-icon {
  color: var(--orange-hot) !important;
  stroke: currentColor;
  filter: none !important;
}

.process-step__icon {
  transform-origin: center;
  transition: transform .28s ease-out, border-color .28s ease-out, box-shadow .28s ease-out, color .28s ease-out;
}

.process-step:hover .process-step__icon {
  transform: scale(1.2) !important;
}

.process-step:hover h3,
.process-step:hover p {
  transform: none !important;
}

.service-card {
  will-change: transform;
  transition: transform .09s ease-out, border-color .12s ease-out, background .12s ease-out, box-shadow .12s ease-out;
}

.service-card:hover {
  transform: translateY(-4px) scale(1.08) !important;
  transition-duration: .24s;
  transition-timing-function: cubic-bezier(.2, .8, .2, 1);
}

.service-card__icon {
  transition: color .18s ease-out, transform .18s ease-out;
}

.service-card:hover .service-card__icon {
  transform: scale(1.14);
}

.site-footer a[aria-label="TikTok"] svg {
  display: block;
}

@media (max-width: 1220px) {
  :root {
    --resave-content-gutter: 24px;
  }

  .hero-section__grid {
    grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr);
  }

  .hero-copy {
    max-width: 760px;
    margin-right: -42px;
  }
}

@media (max-width: 980px) {
  :root {
    --resave-content-gutter: 18px;
  }

  .site-shell,
  .hero-section__grid {
    width: min(760px, calc(100% - (var(--resave-content-gutter) * 2)));
  }

  .hero-section__grid {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    max-width: 760px;
    margin-right: 0;
  }

}

/* ---- Premium service dropdown separators ---- */
.services-dropdown__grid {
  gap: 0 12px;
}

.services-dropdown__grid a {
  position: relative;
  transition: color .28s ease-out;
}

.services-dropdown__grid a:hover {
  background: transparent;
  color: var(--white);
}

.services-dropdown__grid a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  pointer-events: none;
  opacity: .46;
  background: linear-gradient(90deg, transparent 0%, rgba(13, 110, 253, .82) 34%, rgba(250, 90, 0, .8) 62%, transparent 100%);
}

.services-dropdown__grid a:nth-child(-n + 2)::before {
  display: none;
}

.services-dropdown__grid a::after {
  display: none !important;
}

@media (max-width: 980px) {
  .services-dropdown__grid {
    gap: 0;
  }

  .services-dropdown__grid a::before {
    display: block;
  }

  .services-dropdown__grid a:first-child::before {
    display: none;
  }
}

/* =====================================================================
   Re-Save v1.4.6 — targeted fixes (audit)
   Appended last so these win the cascade over earlier stacked overrides.
   ===================================================================== */

/* ---- (6) Service cards: instant, symmetric hover -------------------
   Root cause of the old "delay": the scroll-reveal observer writes an
   inline transition-delay (0-300ms) on every .service-card, and the
   `.has-js .reveal` rule forces a 0.6s transform transition. Both leaked
   into :hover, so cards grew/shrank late and could stick enlarged.
   The !important transition below governs hover for BOTH enter and leave
   at 150ms ease-out with 0 delay, overriding the inline delay too. */
.has-js .service-card,
.service-card {
  transition: transform 150ms ease-out,
              opacity 150ms ease-out,
              border-color 150ms ease-out,
              background 150ms ease-out,
              box-shadow 150ms ease-out !important;
  transition-delay: 0ms !important;
}
.has-js .service-card:hover,
.service-card:hover {
  transition-duration: 150ms !important;
  transition-delay: 0ms !important;
}
.has-js .service-card__icon,
.service-card__icon {
  transition: transform 150ms ease-out, color 150ms ease-out !important;
  transition-delay: 0ms !important;
}

/* ---- (7) Footer TikTok icon: same visual weight as other socials --- */
.footer-socials a[aria-label="TikTok"] .resave-icon {
  width: 20px;
  height: 20px;
}
.footer-socials a[aria-label="TikTok"] svg {
  display: block;
}

/* ---- (8) Footer contacts: country-grouped blocks ------------------- */
.site-footer .footer-list--contacts {
  gap: 16px;
}
.site-footer .footer-list--contacts > li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  grid-template-columns: none;   /* cancel the old 18px icon grid */
  column-gap: 0;
}
.site-footer .footer-list--contacts > li > span {
  grid-row: auto;
  margin-top: 0;
}
.site-footer .footer-contact__label {
  font-weight: 700;
  color: var(--white);
  font-size: 0.9rem;
}
.site-footer .footer-contact__phone {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
}
.site-footer .footer-contact__address {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}
.site-footer .footer-contact--single {
  margin-top: 2px;
}

/* ---- Stats composition, carousel controls and social icon polish ---- */
.stats-card .stat-item {
  grid-template-columns: minmax(96px, .42fr) minmax(0, 1fr) !important;
  gap: clamp(20px, 1.7vw, 28px) !important;
  padding-inline: clamp(18px, 1.7vw, 26px);
}

.stats-card .stat-item__icon {
  justify-self: center;
  align-self: center;
  width: clamp(88px, 7.2vw, 104px);
  height: clamp(88px, 7.2vw, 104px);
  margin-left: clamp(-14px, -0.8vw, -6px);
}

.stats-card .stat-item__icon svg {
  width: clamp(68px, 5.4vw, 82px);
  height: clamp(68px, 5.4vw, 82px);
}

.stats-card .stat-item > div {
  min-width: 0;
  justify-self: start;
}

.panel__header {
  align-items: center;
}

.panel__header .carousel-nav {
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}

.carousel-btn {
  display: inline-grid;
  place-items: center;
  padding: 0;
}

.carousel-btn .resave-icon,
.carousel-btn svg {
  display: block;
  margin: auto;
}

.service-gallery .carousel__dots,
.reviews-panel .carousel__dots {
  width: 100%;
  justify-content: center;
  margin-inline: auto;
}

.footer-socials a[aria-label="TikTok"] .resave-icon {
  width: 23px;
  height: 23px;
}

@media (max-width: 720px) {
  .stats-card .stat-item {
    grid-template-columns: 86px minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  .stats-card .stat-item__icon {
    width: 82px;
    height: 82px;
    margin-left: -6px;
  }

  .stats-card .stat-item__icon svg {
    width: 64px;
    height: 64px;
  }
}

/* ---- v1.4.7.6 launch architecture polish ---- */
.process-step:hover .process-step__icon,
.process-step:hover .process-step__icon .resave-icon,
.process-step:hover .process-step__icon svg {
  color: var(--orange) !important;
  stroke: currentColor;
}

.process-step:hover .process-step__icon {
  border-color: rgba(250, 90, 0, 0.52);
  box-shadow: inset 0 0 0 1px rgba(250, 90, 0, 0.24), 0 0 28px rgba(250, 90, 0, 0.18);
}

.archive-card__image--avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
}

.archive-card__image--avatar img,
.review-single-head__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-archive-card .review-score,
.review-single-head .review-score {
  color: var(--orange);
  font-size: 1.35rem;
  font-weight: 800;
}

.review-city {
  margin-top: -8px;
}

.review-single-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}

.review-single-head__avatar {
  flex: 0 0 86px;
  width: 86px;
  height: 86px;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid rgba(13, 110, 253, 0.28);
  box-shadow: 0 0 24px rgba(13, 110, 253, 0.18);
}

/* ---- SEO architecture templates and corrected stats alignment ---- */
.stats-card .stat-item {
  grid-template-columns: clamp(76px, 6vw, 92px) minmax(0, 1fr) !important;
  gap: clamp(10px, 1vw, 15px) !important;
  padding-inline: clamp(14px, 1.4vw, 20px) !important;
  align-items: center;
}

.stats-card .stat-item__icon {
  justify-self: center;
  width: clamp(74px, 5.7vw, 90px) !important;
  height: clamp(74px, 5.7vw, 90px) !important;
  margin-left: 0 !important;
}

.stats-card .stat-item__icon svg {
  width: clamp(56px, 4.2vw, 68px) !important;
  height: clamp(56px, 4.2vw, 68px) !important;
}

.stats-card .stat-item > div {
  min-width: 0;
  max-width: 100%;
}

.stats-card .stat-item strong,
.stats-card .stat-item p {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.archive-header {
  margin-bottom: clamp(20px, 3vw, 34px);
}

.archive-header h1,
.content-panel--article h1 {
  margin: 0 0 14px;
  color: var(--text);
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.05;
}

.archive-header p,
.archive-card p {
  color: var(--muted);
}

.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
}

.archive-grid--compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.archive-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.archive-card__image,
.article-featured,
.service-detail-gallery img,
.before-after-grid figure {
  overflow: hidden;
  border-radius: 16px;
}

.archive-card__image img,
.article-featured img,
.service-detail-gallery img,
.before-after-grid img {
  display: block;
  width: 100%;
  height: auto;
}

.archive-card h2 {
  margin: 0;
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
}

.archive-card h2 a,
.text-link {
  color: var(--text);
  text-decoration: none;
}

.text-link {
  color: var(--blue);
  font-weight: 700;
}

.content-panel--article {
  max-width: 940px;
  margin-inline: auto;
}

.content-panel--article > * + * {
  margin-top: 18px;
}

.article-featured {
  margin: 22px 0;
}

.service-detail-panel {
  margin-top: clamp(18px, 2.5vw, 30px);
}

.service-detail-panel h2 {
  margin: 0 0 16px;
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
}

.service-detail-grid,
.before-after-grid,
.service-detail-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
}

.service-detail-gallery {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Рівна сітка 3 в ряд без «шахового» зсуву. Глобальне правило
   picture{display:contents} виставляло внутрішній <source> як зайвий елемент
   grid (порожня клітинка), через що фото розкидало в шахову розкладку.
   Робимо кожен <picture> звичайною плиткою 4:3 у складі сітки, а зображення
   заповнює її. Для випадку без <picture> (немає webp) правило для img нижче
   тримає ту саму геометрію. */
.service-detail-panel .service-detail-gallery picture {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 16px;
}
.service-detail-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.content-list,
.content-steps {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--muted);
}

.content-list li + li,
.content-steps li + li {
  margin-top: 10px;
}

.case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 22px;
}

.case-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid rgba(13, 110, 253, 0.28);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(13, 110, 253, 0.08);
}

.before-after-grid figure {
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

.before-after-grid figcaption {
  padding: 12px 14px;
  color: var(--muted);
  font-weight: 700;
}

@media (max-width: 1024px) {
  .archive-grid,
  .archive-grid--compact,
  .service-detail-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .stats-card .stat-item {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding-inline: 14px !important;
  }

  .stats-card .stat-item__icon {
    width: 70px !important;
    height: 70px !important;
  }

  .stats-card .stat-item__icon svg {
    width: 52px !important;
    height: 52px !important;
  }

  .archive-grid,
  .archive-grid--compact,
  .service-detail-grid,
  .before-after-grid,
  .service-detail-gallery {
    grid-template-columns: 1fr;
  }
}

/* Footer legal links (Privacy / Cookies) — inherit muted bottom-bar style */
.site-footer__legal a { color: inherit; text-decoration: none; }
.site-footer__legal a:hover { color: var(--white); text-decoration: underline; }
.site-footer__legal span { opacity: .6; margin: 0 4px; }

/* === Service constructor: new blocks (reuse existing panel system) === */
.service-hero {
  position: relative;
  overflow: hidden;
  /* Neutral dark base (no blue/orange) — keeps the fade colour-neutral. */
  background: linear-gradient(110deg, rgba(2, 7, 18, .98), rgba(5, 11, 24, .94));
}
.service-hero__bg {
  --service-hero-bg: none;
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  /* Image only — no blue/orange overlays. The fade reveals the neutral dark
     hero background, so it stays colour-neutral at every scale. */
  background-image: var(--service-hero-bg);
  background-position: var(--service-bg-pos, center center);
  background-size: var(--service-bg-size, cover);
  background-repeat: no-repeat;
  /* Admin-driven: opacity + optional blur (left/right & top/bottom fade below). */
  opacity: var(--service-bg-opacity, 1);
  filter: saturate(1.04) contrast(1.03);
  /* Neutral 2D fade. Both gradients share the image's size & position, so the
     mask scales and moves together with the photo. mask-composite:intersect
     keeps a clean fade on all four edges (a plain stack would default to "add"
     and produce a cross-shaped artifact instead of a frame).
     The horizontal gradient uses --service-bg-edge-x (left/right fade) and the
     vertical uses --service-bg-edge-y (top/bottom fade); both fall back to the
     shade preset (--service-bg-edge) and then 8%. */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 var(--service-bg-edge-x, var(--service-bg-edge, 8%)), #000 calc(100% - var(--service-bg-edge-x, var(--service-bg-edge, 8%))), transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 var(--service-bg-edge-y, var(--service-bg-edge, 8%)), #000 calc(100% - var(--service-bg-edge-y, var(--service-bg-edge, 8%))), transparent 100%);
  -webkit-mask-size: var(--service-bg-size, cover), var(--service-bg-size, cover);
  -webkit-mask-position: var(--service-bg-pos, center center), var(--service-bg-pos, center center);
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 var(--service-bg-edge-x, var(--service-bg-edge, 8%)), #000 calc(100% - var(--service-bg-edge-x, var(--service-bg-edge, 8%))), transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 var(--service-bg-edge-y, var(--service-bg-edge, 8%)), #000 calc(100% - var(--service-bg-edge-y, var(--service-bg-edge, 8%))), transparent 100%);
  mask-size: var(--service-bg-size, cover), var(--service-bg-size, cover);
  mask-position: var(--service-bg-pos, center center), var(--service-bg-pos, center center);
  mask-repeat: no-repeat, no-repeat;
  mask-composite: intersect;
}
.service-hero__bg::before,
.service-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.service-hero__bg::before {
  /* Neutral side shade only (no blue/orange, no colour-shifting blend). */
  background: linear-gradient(90deg, rgba(2, 7, 18, .55) 0%, transparent 50%, rgba(2, 7, 18, .55) 100%);
}
.service-hero__bg::after {
  background:
    linear-gradient(90deg, rgba(2, 7, 18, .5) 0%, rgba(2, 7, 18, .28) 26%, transparent 50%, rgba(2, 7, 18, .28) 74%, rgba(2, 7, 18, .5) 100%),
    linear-gradient(180deg, rgba(2, 7, 18, .6) 0%, transparent 38%, rgba(2, 7, 18, .82) 100%);
  opacity: var(--service-bg-shade, 1);
}
.service-hero--has-bg {
  /* Neutral dark site background revealed by the fade — no blue tint. */
  background: linear-gradient(110deg, #020712, #050b18 54%, #020712);
}
.service-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 50% 30%, #000, transparent 70%);
  opacity: .28;
}
.service-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 0;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(2, 7, 18, .96));
}
.service-hero .site-shell {
  position: relative;
  z-index: 2;
}
.service-hero__copy > p {
  max-width: 680px;
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.7;
}
.service-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.service-hero__benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  max-width: 680px;
  margin-top: 22px;
}
.service-hero__benefits span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 11px;
  border: 1px solid rgba(125, 159, 205, .22);
  border-radius: 999px;
  color: rgba(255, 255, 255, .9);
  background: rgba(255, 255, 255, .055);
  font-size: .88rem;
  font-weight: 800;
  line-height: 1.2;
}
.service-hero__benefits svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--orange);
}
.subpage-hero__subtitle { font-size: 1.15rem; font-weight: 600; margin: 2px 0 14px; opacity: .92; }
.service-summary__media { display: block; }
.service-summary__media img { display: block; width: 100%; height: auto; border-radius: 12px; }
.service-summary__note { margin: 14px 0 0; font-size: .85rem; color: var(--muted); text-align: center; }
.service-summary--premium {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(125, 159, 205, .28);
  border-radius: 20px;
  padding: 26px;
  background:
    radial-gradient(circle at 20% 8%, rgba(250, 90, 0, .16), transparent 34%),
    radial-gradient(circle at 100% 0, rgba(13, 110, 253, .2), transparent 38%),
    linear-gradient(145deg, rgba(7, 18, 34, .92), rgba(4, 11, 24, .86));
}
/* glow levels (Off / Soft / Medium / Strong) */
.service-summary--glow-off { box-shadow: 0 28px 80px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .06); }
.service-summary--glow-soft { box-shadow: 0 28px 80px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 0 1px rgba(79, 150, 255, .34), 0 0 18px rgba(13, 110, 253, .3), 0 0 34px rgba(56, 160, 255, .22); }
.service-summary--glow-medium { box-shadow: 0 28px 80px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(79, 150, 255, .32), 0 0 30px rgba(13, 110, 253, .26), 0 0 34px rgba(56, 160, 255, .2); }
.service-summary--glow-strong { box-shadow: 0 28px 80px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px rgba(79, 150, 255, .5), 0 0 44px rgba(13, 110, 253, .42), 0 0 52px rgba(56, 160, 255, .3); }
.service-summary__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.service-summary__badge {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 30%, rgba(20, 120, 255, .24), rgba(11, 26, 45, .2));
  border: 1px solid rgba(79, 150, 255, .3);
  box-shadow: inset 0 -2px 0 rgba(255, 106, 0, .45);
}
.service-summary__heading h2 { margin: 0; font-size: 1.32rem; line-height: 1.2; color: var(--white); }
.service-summary__tagline { margin: 4px 0 0; color: var(--muted); font-size: .86rem; }
.service-summary__prices {
  display: grid;
  gap: 4px 0;
  margin: 0;
  text-align: center;
}
.service-summary__prices div { padding: 8px 0; }
.service-summary__prices dt {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 600;
  text-transform: none;
}
.service-summary__price {
  margin: 2px 0 0;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.01em;
}
.service-summary__price--uah { color: #ff6a00; text-shadow: 0 0 22px rgba(250, 90, 0, .26); }
.service-summary__price--zl { color: #ff6a00; text-shadow: 0 0 22px rgba(250, 90, 0, .26); }
/* In-card CTA: right after the price so a decided client can act instantly. */
.service-summary__cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 4px;
}
.service-summary__cta .button { width: 100%; }
.service-summary__warranty {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(125, 159, 205, .16);
  text-align: left;
}
.service-summary__warranty-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 11px;
  color: #3b9bff;
  background: rgba(13, 110, 253, .12);
  border: 1px solid rgba(13, 110, 253, .28);
}
.service-summary__warranty-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; }
.service-summary__warranty h3 { margin: 0 0 6px; font-size: .98rem; color: var(--white); font-weight: 800; }
.service-summary__warranty p { margin: 0 0 6px; font-size: .82rem; line-height: 1.5; color: rgba(255, 255, 255, .62); }
.service-summary__warranty p:last-child { margin-bottom: 0; }
.service-summary__features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 18px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(125, 159, 205, .16);
  list-style: none;
}
.service-summary__features li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  font-size: .76rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, .78);
}
.service-summary__features li span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: #ff6a00;
  background: rgba(250, 90, 0, .1);
  border: 1px solid rgba(250, 90, 0, .24);
}
.service-summary__features li:nth-child(even) span {
  color: #3b9bff;
  background: rgba(13, 110, 253, .1);
  border-color: rgba(13, 110, 253, .26);
}
.service-summary__features li span svg { width: 20px; height: 20px; stroke: currentColor; fill: none; }

.service-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.service-info-card {
  position: relative;
  min-height: 170px;
  padding: 20px;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  align-content: start;
  column-gap: 14px;
  row-gap: 12px;
  border: 1px solid rgba(125, 159, 205, .2);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)),
    rgba(6, 18, 35, .78);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .28);
  transition: transform .24s ease-out, border-color .24s ease-out, box-shadow .24s ease-out;
}
.service-info-card::after {
  content: "";
  position: absolute;
  inset: auto -24px -34px auto;
  width: 110px;
  height: 110px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(13, 110, 253, .2), transparent 68%);
}
.service-info-card:hover {
  transform: translateY(-3px);
  border-color: rgba(56, 160, 255, .42);
  box-shadow: 0 24px 56px rgba(0, 0, 0, .36), 0 0 28px rgba(13, 110, 253, .14);
}
.service-info-card__icon {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 0;
  border-radius: 15px;
  color: var(--blue);
  background: rgba(13, 110, 253, .13);
  box-shadow: inset 0 0 0 1px rgba(13, 110, 253, .2), 0 0 24px rgba(13, 110, 253, .16);
}
.service-info-card--include .service-info-card__icon {
  color: #56a8ff;
  background: rgba(56, 160, 255, .13);
  box-shadow: inset 0 0 0 1px rgba(56, 160, 255, .22), 0 0 24px rgba(56, 160, 255, .14);
}
.service-info-card__icon svg {
  width: 26px;
  height: 26px;
}
.service-info-card h3 {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 1.04rem;
}
.service-info-card p {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.service-includes-columns {
  column-count: 3;
  column-gap: 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.service-includes-columns li {
  position: relative;
  break-inside: avoid;
  margin: 0 0 13px;
  padding-left: 22px;
  color: rgba(255, 255, 255, .86);
  line-height: 1.55;
}
.service-includes-columns li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--orange);
  box-shadow: 0 0 14px rgba(250, 90, 0, .36);
}

.service-timeline {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0 18px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.service-step {
  position: relative;
  padding-right: 12px;
}
.service-step__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.service-step__head::before {
  content: "";
  position: absolute;
  left: 82px;
  right: -18px;
  top: 17px;
  height: 2px;
  background: linear-gradient(90deg, rgba(125, 159, 205, .32), rgba(125, 159, 205, .12));
  z-index: 0;
}
.service-step:last-child .service-step__head::before { display: none; }
.service-step__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 999px;
  border: 2px solid var(--orange);
  background: rgba(5, 15, 30, .92);
  color: var(--orange);
  font-weight: 900;
  font-size: .78rem;
}
.service-step__icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--orange);
  background: transparent;
}
.service-step__icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; }
.service-step:nth-child(even) .service-step__num { border-color: #3b9bff; color: #3b9bff; }
.service-step:nth-child(even) .service-step__icon { color: #3b9bff; }
.service-step__title {
  margin: 0 0 6px;
  color: var(--white);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.25;
}
.service-step__text {
  margin: 0;
  color: rgba(255, 255, 255, .6);
  font-size: .82rem;
  line-height: 1.5;
  max-width: 185px;
}

.service-brands {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  scrollbar-width: thin;
  scrollbar-color: rgba(125, 159, 205, .35) transparent;
  -ms-overflow-style: none;
  padding-bottom: 6px;
}
.service-brands::-webkit-scrollbar { height: 6px; }
.service-brands::-webkit-scrollbar-thumb { background: rgba(125, 159, 205, .35); border-radius: 999px; }
.service-brands::-webkit-scrollbar-track { background: transparent; }
.service-brands.is-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; }
.service-brands.is-dragging .service-brand { pointer-events: none; }
.service-brands > .service-brand { flex: 0 0 auto; }
.service-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 4px 10px;
  text-decoration: none;
  color: rgba(255, 255, 255, .72);
  font-weight: 800;
  filter: grayscale(.08);
  opacity: .86;
  transition: opacity .18s ease-out, transform .18s ease-out, filter .18s ease-out;
}
.service-brand:hover {
  opacity: 1;
  filter: grayscale(0);
  transform: translateY(-2px);
}
.service-brand img {
  max-width: 96px;
  max-height: 42px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.service-reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.service-review {
  border: 1px solid rgba(125, 159, 205, .18);
  border-radius: 16px;
  padding: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025));
  box-shadow: 0 18px 42px rgba(0, 0, 0, .24);
}
.service-review .review-score {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #f59e0b;
}
.service-review .review-score strong {
  color: var(--white);
  font-size: 1.18rem;
}
.service-review p { margin: 12px 0; color: rgba(255, 255, 255, .82); }

.service-cta { text-align: center; }
.service-cta h2 { margin-top: 0; }

@media (max-width: 1024px) {
  .service-includes-columns {
    column-count: 2;
  }
  .service-timeline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 28px;
  }
  .service-step:nth-child(3n) .service-step__head::before,
  .service-step:last-child .service-step__head::before {
    display: none;
  }
}

@media (max-width: 680px) {
  .service-includes-columns {
    column-count: 1;
  }
  .service-timeline {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .service-step {
    padding-right: 0;
  }
  .service-step__head {
    margin-bottom: 10px;
  }
  .service-step__head::before {
    display: none;
  }
  .service-step__text {
    max-width: none;
  }
}

/* =====================================================================
   MOBILE POLISH (v2.4) — appended last, scoped to phones only.
   Desktop (>768px) is untouched. Targets 360 / 390 / 412 / 430 / 768.
   ===================================================================== */
@media (max-width: 768px) {
  /* No horizontal scroll (clip keeps the sticky header working) */
  body { overflow-x: clip; }
  img, svg, video, iframe { max-width: 100%; height: auto; }

  /* Tighter section spacing */
  .stats-section, .process-section, .services-section,
  .trust-section, .faq-section, .locations-section { padding: 18px 0; }
  .content-panel { padding: 18px; }
  .subpage-hero { padding: 22px 0 6px; }
  .service-hero__bg {
    background-position: center top;
    opacity: var(--service-bg-opacity, .52);
    /* Same neutral 2D fade, anchored to the scaled image (center top on mobile). */
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%),
      linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    -webkit-mask-size: var(--service-bg-size, cover), var(--service-bg-size, cover);
    -webkit-mask-position: center top, center top;
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%),
      linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    mask-size: var(--service-bg-size, cover), var(--service-bg-size, cover);
    mask-position: center top, center top;
    mask-composite: intersect;
  }
  .service-hero__benefits,
  .service-info-grid {
    grid-template-columns: 1fr;
  }
  .service-info-card {
    min-height: 0;
    padding: 18px;
  }

  /* Section titles */
  .section-title { font-size: clamp(1.55rem, 6vw, 2rem); line-height: 1.15; }

  /* Header */
  .brand__name { font-size: 1.5rem; }
  .brand__caption { font-size: .72rem; }
  .brand__logo-img { max-height: 38px; }
  .header-phone strong { font-size: .92rem; }
  .header-phone small { font-size: .7rem; }

  /* Hero */
  .hero-title { font-size: clamp(1.9rem, 7.4vw, 2.4rem); line-height: 1.12; letter-spacing: -.02em; }
  .hero-subtitle { font-size: 1rem; line-height: 1.5; }
  .hero-badge { font-size: var(--hero-badge-font-size, .72rem); }
  .quick-contact { font-size: .9rem; }

  /* Buttons */
  .button { font-size: .95rem; }
  .hero-actions .button, .service-cta .button { padding: 12px 18px; }

  /* Stats */
  .stat-item strong { font-size: 1.55rem; }
  .stat-item p { font-size: .85rem; line-height: 1.35; }

  /* Service cards */
  .service-card { padding: 16px 14px; min-height: auto; }
  .service-card__icon { width: 42px; height: 42px; }
  .service-card__icon svg { width: 24px; height: 24px; }
  .service-card strong { font-size: 1rem; }
  .service-card small { font-size: .8rem; }
  .service-card em { font-size: .85rem; line-height: 1.4; }

  /* FAQ */
  .faq-item summary { font-size: 1rem; padding: 14px 16px; }
  .faq-item__body { font-size: .9rem; }
  .faq-item__body p { font-size: .9rem; }

  /* Locations */
  .location-card { padding: 18px; }
  .location-card h3 { font-size: 1.2rem; }
  .location-card p, .location-card pre { font-size: .9rem; }

  /* Footer */
  .site-footer { font-size: .92rem; }
  .site-footer h2 { font-size: .95rem; margin-bottom: 12px; }
  .site-footer__grid { gap: 22px; }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .service-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  :root { --resave-content-gutter: 16px; }

  .stats-section, .process-section, .services-section,
  .trust-section, .faq-section, .locations-section { padding: 14px 0; }
  .content-panel, .panel { padding: 16px; }
  .section-heading { margin-bottom: 14px; }

  .section-title { font-size: clamp(1.35rem, 7vw, 1.8rem); }

  /* Header */
  .brand__name { font-size: 1.34rem; }
  .brand__caption { font-size: .66rem; }
  .brand__logo-img { max-height: 34px; }

  /* Hero — compact, proportional, no overflow */
  .hero-section { padding-top: 24px; }
  .hero-title { font-size: clamp(1.7rem, 8vw, 2.05rem); line-height: 1.1; }
  .hero-subtitle { font-size: .95rem; }
  .hero-actions .button { width: 100%; }
  .hero-visual, .hero-visual__stage, .hero-visual__stage--media { min-height: 290px; }
  /* Declutter small decorative PNGs on the smallest screens; keep the laptop */
  .hero-asset--ssd, .hero-asset--ram, .hero-asset--micro, .hero-asset--screwdriver { display: none; }

  /* Stats — lighter blocks, smaller icons (override earlier !important rules) */
  .stats-card .stat-item { grid-template-columns: 54px minmax(0, 1fr) !important; gap: 12px !important; padding: 14px !important; }
  .stats-card .stat-item__icon { width: 52px !important; height: 52px !important; margin-left: 0 !important; }
  .stats-card .stat-item__icon svg { width: 30px !important; height: 30px !important; }
  .stat-item strong { font-size: 1.4rem; }
  .stat-item p { font-size: .82rem; }

  /* Service cards — compact */
  .service-card { padding: 14px 12px; gap: 12px; }
  .service-card__icon { width: 38px; height: 38px; }
  .service-card__icon svg { width: 22px; height: 22px; }
  .service-card strong { font-size: .95rem; }
  .service-card em { font-size: .82rem; }

  /* Process / steps */
  .process-step { padding: 16px; }
  .process-step h3 { font-size: 1rem; }
  .process-step p { font-size: .85rem; }

  /* Forms / modal */
  .modal { padding: 12px; }
  .modal__dialog { padding: 20px; }
  .lead-form__field span { font-size: .9rem; }

  /* Subpage hero (service pages) */
  .subpage-hero h1 { font-size: clamp(1.6rem, 7.5vw, 2rem); }
  .subpage-hero__subtitle { font-size: 1rem; }
}

/* =====================================================================
   FLUID MOBILE SYSTEM (v2.5) — appended last, phones/tablets only.
   Uses clamp()/min()/max() so sizing scales smoothly 320 → 768px.
   Desktop (>768px) is fully untouched. Kills horizontal overflow.
   ===================================================================== */
@media (max-width: 768px) {
  /* ---- Global anti-overflow guards ---- */
  body { overflow-x: clip; }
  img, svg, video, iframe { max-width: 100%; height: auto; }
  .hero-section, .hero-visual, .hero-visual__stage, .hero-visual__stage--media,
  .services-section, .stats-section, .trust-section, .locations-section,
  .subpage-hero, .service-single { overflow-x: clip; }
  /* let flex/grid children shrink instead of forcing width */
  .site-header__inner, .hero-actions, .hero-copy, .stats-card, .services-grid,
  .site-footer__grid, .service-summary, .subpage-hero__grid, .lead-form { min-width: 0; }
  .hero-title, .section-title, .service-card em, .faq-item summary,
  .location-card p, .subpage-hero h1, p { overflow-wrap: break-word; }

  /* ---- Fluid spacing ---- */
  :root { --resave-content-gutter: clamp(14px, 4.2vw, 26px); }
  .stats-section, .process-section, .services-section,
  .trust-section, .faq-section, .locations-section { padding: clamp(14px, 4vw, 26px) 0; }
  .content-panel, .panel { padding: clamp(14px, 4vw, 22px); }
  .subpage-hero { padding: clamp(16px, 5vw, 30px) 0 6px; }

  /* ---- Fluid typography ---- */
  .section-title { font-size: clamp(1.4rem, 5.2vw, 2rem); line-height: 1.18; }
  .brand__name { font-size: clamp(1.35rem, 5.4vw, 1.6rem); }
  .brand__caption { font-size: clamp(.55rem, 2vw, .72rem); }
  .brand__logo-img { max-height: clamp(26px, 7.6vw, 38px); }  /* ~12-15% smaller logo */

  .hero-title { font-size: clamp(1.6rem, 6.2vw, 2.4rem); line-height: 1.12; letter-spacing: -.02em; }
  /* Mobile Hero title: 4 deliberate lines. */
  .hero-title__prefix,
  .hero-title__line,
  .hero-title__suffix { display: block; }
  .hero-title__line {
    white-space: normal;
  }
  .hero-title__line .hero-title__accent,
  .hero-title__line .hero-title__middle {
    display: block;
    font-size: inherit !important;
    line-height: inherit !important;
  }
  .hero-title__line .hero-title__accent {
    color: var(--orange-hot) !important;
    text-transform: lowercase;
  }
  .hero-title__line .hero-title__middle {
    margin-left: 0;
    color: var(--white) !important;
  }
  .hero-subtitle { font-size: clamp(.92rem, 3.2vw, 1.1rem); line-height: 1.5; max-width: none; }
  .quick-contact { font-size: clamp(.82rem, 3vw, .95rem); }

  .button { font-size: clamp(.85rem, 3.4vw, 1rem); padding: clamp(10px, 3vw, 14px) clamp(14px, 4.5vw, 22px); max-width: 100%; }

  .stat-item strong { font-size: clamp(1.3rem, 5.5vw, 2rem); }
  .stat-item p { font-size: clamp(.75rem, 3vw, .95rem); line-height: 1.35; }

  .service-card strong { font-size: clamp(.92rem, 3.6vw, 1.05rem); }
  .service-card small { font-size: clamp(.74rem, 3vw, .85rem); }
  .service-card em { font-size: clamp(.78rem, 3.2vw, .9rem); line-height: 1.4; }

  .faq-item summary { font-size: clamp(.92rem, 3.6vw, 1.05rem); padding: clamp(12px, 3.6vw, 16px); }
  .faq-item__body, .faq-item__body p { font-size: clamp(.85rem, 3.2vw, .95rem); }

  .location-card h3 { font-size: clamp(1.05rem, 4.4vw, 1.35rem); }
  .location-card p, .location-card pre { font-size: clamp(.82rem, 3.2vw, .95rem); }

  .site-footer { font-size: clamp(.85rem, 3.2vw, .95rem); }
  .site-footer h2 { font-size: clamp(.9rem, 3.4vw, 1rem); }

  /* ---- Hero badge: never overflows, no lifting transform on mobile ---- */
  .hero-badge {
    width: auto !important;
    max-width: 100%;
    flex-wrap: wrap;
    white-space: normal;
    line-height: 1.25;
    padding: 8px 12px;
    margin: 0 0 clamp(14px, 4vw, 24px);
    font-size: var(--hero-badge-font-size, clamp(.6rem, 2.6vw, .78rem));
  }
  .hero-badge__text { white-space: normal; }
  .hero-badge__flags { flex: 0 0 auto; }

  /* ---- Hero visual: must fit viewport (kills the 115vw / negative-margin overflow) ---- */
  .hero-visual__stage, .hero-visual__stage--media {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .hero-visual, .hero-visual__stage, .hero-visual__stage--media {
    min-height: clamp(220px, 58vw, 420px);
  }
  .hero-actions { flex-wrap: wrap; }
  .hero-actions .button { width: 100%; }

  /* ---- Service cards: compact, fluid icons ---- */
  .service-card { padding: clamp(13px, 3.6vw, 18px); gap: clamp(10px, 3vw, 16px); min-height: auto; }
  .service-card__icon { width: clamp(38px, 10vw, 46px); height: clamp(38px, 10vw, 46px); }
  .service-card__icon svg { width: clamp(22px, 6vw, 26px); height: clamp(22px, 6vw, 26px); }

  /* ---- Stats: lighter blocks + fluid icons (override earlier !important sizes) ---- */
  .stats-card .stat-item {
    grid-template-columns: clamp(46px, 12vw, 72px) minmax(0, 1fr) !important;
    gap: clamp(10px, 3vw, 18px) !important;
    padding: clamp(14px, 4vw, 22px) !important;
  }
  .stats-card .stat-item__icon {
    width: clamp(46px, 12vw, 72px) !important;
    height: clamp(46px, 12vw, 72px) !important;
    margin-left: 0 !important;
  }
  .stats-card .stat-item__icon svg { width: clamp(28px, 7vw, 56px) !important; height: clamp(28px, 7vw, 56px) !important; }

  /* ---- Locations ---- */
  .location-card { padding: clamp(14px, 4vw, 20px); }
  .location-card__image, .location-card__image img { max-width: 100%; }

  /* ---- Single service page ---- */
  .subpage-hero__grid { grid-template-columns: 1fr; }
  /* Hide the breadcrumb (Головна → Послуги → …) on mobile only — service pages. */
  .service-hero .breadcrumbs { display: none; }
  /* Sales-first order on mobile: the price/offer card goes to the very top,
     the benefit cards (Чесна діагностика / Гарантія / Швидкий ремонт) follow. */
  .service-hero .service-summary { order: -1; margin-bottom: clamp(14px, 4vw, 22px); }
  /* On mobile the service photo lives inside the price card (.service-summary__photo
     below), so the hero background is hidden to keep the hero clean. */
  .service-hero--has-bg .service-hero__bg { display: none; }

  /* Compact service photo inside the price card: Price ↓ photo ↓ Warranty. */
  .service-summary__photo {
    display: block;
    margin: 14px auto 4px;
    width: min(220px, 100%);
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
  }
  .service-summary__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .subpage-hero h1 { font-size: clamp(1.5rem, 6vw, 2.1rem); }
  .subpage-hero__subtitle { font-size: clamp(.95rem, 3.4vw, 1.1rem); }
  .service-summary { width: 100%; }
  .service-summary__media img, .service-detail-gallery img { max-width: 100%; height: auto; }
  .before-after-grid, .service-detail-grid { grid-template-columns: 1fr; }
  .service-brands { gap: 10px; }

  /* Hide the "Обслуговуємо" service-area interlink block on mobile (per request).
     It stays on desktop where the wide region/city columns add SEO value. */
  .local-serve { display: none; }

  /* "Всі послуги" page: drop the hero benefit cards (Діагностика / Гарантія /
     Швидкий ремонт / Україна та Польща) on mobile only. (!important beats the
     later non-media .service-hero__cards{display:grid}.) */
  .services-landing__hero-cards { display: none !important; }

  /* Repair-case pages: hide the breadcrumb on mobile only (desktop keeps it). */
  .repair-case-main .breadcrumbs { display: none; }

  /* ---- Single article hero on mobile ----
     The photo carries desktop X/Y/scale offsets that slide it off-centre on the
     narrow framed card ("image moved to the right"). Centre it and cover, and
     use an even top-down scrim instead of the desktop left-bias one so it reads
     as a proper hero behind the text. Tame the very large/bold title so it sits
     tidily inside the block. */
  .article-hero__frame .service-hero__bg {
    background-position: 50% 50% !important;
    background-size: cover !important;
  }
  .article-hero__frame::before {
    background:
      linear-gradient(180deg, rgba(2, 6, 14, .82) 0%, rgba(2, 6, 14, .5) 36%, rgba(2, 6, 14, .22) 68%, rgba(2, 6, 14, .4) 100%) !important;
  }
  .article-hero__title {
    font-size: clamp(1.25rem, 5.1vw, 1.7rem) !important;
    line-height: 1.16 !important;
    letter-spacing: -.005em;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }
  .article-hero__lead { font-size: clamp(.95rem, 3.4vw, 1.1rem); }
}

/* ---- Header on mobile: brand + burger share row 1; the two click-to-call
   phones sit on a full-width row 2 (compact, readable, fully tappable). ---- */
@media (max-width: 920px) {
  .site-header__inner { flex-wrap: wrap; gap: clamp(8px, 2.5vw, 16px); row-gap: 9px; }
  .brand { min-width: 0; }

  .header-contacts {
    display: flex !important;
    order: 1000 !important;          /* after the burger (order:999) -> row 2 */
    flex: 0 0 100%;
    justify-content: center;
    align-items: stretch;
    gap: clamp(16px, 6vw, 40px);
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }
  .header-phone { gap: 8px; white-space: nowrap; }
  .header-phone__icon { width: 26px; height: 26px; font-size: .9rem; }
  .header-phone span { align-items: center; gap: 0; text-align: center; }
  .header-phone strong { font-size: .9rem; }
  .header-phone small { font-size: .68rem; text-align: center; }
}

/* Extra-narrow phones: drop the city sub-label and tighten so both numbers
   stay on one row down to 320px. */
@media (max-width: 410px) {
  .header-contacts { gap: clamp(10px, 3.5vw, 18px); }
  .header-phone { gap: 6px; }
  .header-phone small { display: none; }
  .header-phone strong { font-size: .8rem; }
  .header-phone__icon { width: 22px; height: 22px; }
}

/* Phone header: replace the burger with two map links from admin Locations. */
@media (max-width: 640px) {
  .site-header .site-shell {
    width: min(100% - 20px, 1216px);
  }

  .site-header__inner {
    min-height: 66px;
    flex-wrap: nowrap;
    gap: 8px;
    row-gap: 0;
  }

  .brand {
    flex: 0 1 108px;
    min-width: 0;
    overflow: hidden;
  }

  .brand__logo {
    min-height: 0;
    max-width: 108px;
  }

  .brand__logo-img {
    max-width: 108px;
    max-height: 30px;
  }

  .brand__caption {
    max-width: 108px;
    overflow: hidden;
    font-size: clamp(.52rem, 2.1vw, .62rem);
    line-height: 1.08;
    letter-spacing: 0;
  }

  .brand__caption-1,
  .brand__caption-2 {
    display: inline;
    padding-left: 0;
  }

  .brand__caption-1::after {
    content: " ";
  }

  .header-contacts {
    display: none !important;
  }

  .header-mobile-locations {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    min-width: 0;
    max-width: 238px;
    margin-left: auto;
  }

  .header-mobile-location {
    display: grid;
    grid-template-columns: 13px minmax(0, 1fr);
    align-items: center;
    gap: 4px;
    min-width: 0;
    min-height: 44px;
    border: 1px solid rgba(125, 159, 205, .2);
    border-radius: 8px;
    padding: 5px 6px;
    background: rgba(255, 255, 255, .045);
    color: #fff;
  }

  .header-mobile-location__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--orange-hot);
  }

  .header-mobile-location__icon .resave-icon,
  .header-mobile-location__icon svg {
    width: 13px;
    height: 13px;
  }

  .header-mobile-location__text {
    display: grid;
    min-width: 0;
    gap: 1px;
  }

  .header-mobile-location strong,
  .header-mobile-location small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .header-mobile-location strong {
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.06;
    white-space: nowrap;
  }

  .header-mobile-location small {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: .56rem;
    font-weight: 650;
    line-height: 1.08;
    color: rgba(255, 255, 255, .72);
  }

  .nav-toggle {
    display: none !important;
  }

  body.is-nav-open .primary-nav {
    display: none !important;
  }
}

@media (min-width: 400px) and (max-width: 640px) {
  .header-mobile-locations {
    max-width: 260px;
  }
}

@media (max-width: 374px) {
  .site-header .site-shell {
    width: calc(100% - 16px);
  }

  .site-header__inner {
    gap: 6px;
  }

  .brand,
  .brand__logo,
  .brand__logo-img,
  .brand__caption {
    max-width: 96px;
  }

  .brand {
    flex-basis: 96px;
  }

  .brand__logo-img {
    max-height: 28px;
  }

  .header-mobile-locations {
    max-width: 210px;
    gap: 4px;
  }

  .header-mobile-location {
    grid-template-columns: 11px minmax(0, 1fr);
    gap: 3px;
    padding: 5px 4px;
  }

  .header-mobile-location__icon .resave-icon,
  .header-mobile-location__icon svg {
    width: 11px;
    height: 11px;
  }

  .header-mobile-location strong {
    font-size: .66rem;
  }

  .header-mobile-location small {
    font-size: .52rem;
  }
}

/* ---- Extra-narrow phones (≤360px): final tightening ---- */
@media (max-width: 360px) {
  .hero-title { font-size: clamp(1.5rem, 7.4vw, 1.85rem); }
  .section-title { font-size: clamp(1.3rem, 6.4vw, 1.7rem); }
  .hero-badge { font-size: var(--hero-badge-font-size, .62rem); padding: 7px 10px; }
  .button { padding: 10px 14px; }
}

/* =====================================================================
   HERO MOBILE ORDER (v2.6) — visual → text → buttons (phones only).
   Buttons already sit at the end of .hero-copy, so moving the visual
   above the copy gives: image → title/subtitle → CTA buttons.
   Desktop layout (>768px) is untouched.
   ===================================================================== */
@media (max-width: 768px) {
  .hero-section__grid { display: flex; flex-direction: column; }
  .hero-section__grid > .hero-visual { order: 1; margin-bottom: clamp(10px, 3.5vw, 22px); }
  .hero-section__grid > .hero-copy   { order: 2; }
  .hero-section__grid > .hero-edu-cta { order: 3; }
}

/* ===== Icon accent aligned to brand #DF6F1F (hover) — safe override ===== */
.stat-item:hover .stat-item__icon,
.service-card:hover .service-card__icon,
.process-step:hover .process-step__icon,
.trust-list li:hover .trust-list__icon,
.footer-list--contacts li:hover > span,
.footer-socials a:hover,
.location-card__media a:hover span,
.primary-nav__item--dropdown:hover .primary-nav__chevron,
.faq-item:hover summary::after { color: #DF6F1F; }

/* ===== Premium brand system ===== */
.brand-archive-hero,
.brand-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 18%, rgba(13, 110, 253, .2), transparent 32%),
    radial-gradient(circle at 28% 70%, rgba(250, 90, 0, .14), transparent 34%),
    linear-gradient(115deg, #020712 0%, #07182b 52%, #020712 100%);
}
.brand-archive-hero::before,
.brand-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(13, 110, 253, .07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(250, 90, 0, .05) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: radial-gradient(circle at 50% 25%, #000, transparent 70%);
  opacity: .32;
}
.brand-archive-hero .site-shell,
.brand-hero .site-shell {
  position: relative;
  z-index: 1;
}
.brand-archive-hero h1,
.brand-hero h1 {
  margin: 18px 0 16px;
  max-width: 820px;
  font-size: clamp(2.4rem, 5vw, 5.2rem);
  line-height: 1;
  letter-spacing: -.04em;
}
.brand-archive-hero p,
.brand-hero__copy p {
  max-width: 720px;
  color: rgba(226, 236, 255, .78);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.7;
}
.brand-hero {
  padding: clamp(28px, 4.5vw, 56px) 0 clamp(34px, 5vw, 70px);
}
.brand-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
}
.brand-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 8px 12px;
  border: 1px solid rgba(13, 110, 253, .28);
  border-radius: 999px;
  color: #8fc2ff;
  background: rgba(13, 110, 253, .08);
  font-size: .76rem;
  font-weight: 900;
  text-transform: uppercase;
}
.brand-hero__card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(13, 110, 253, .34);
  border-radius: 24px;
  padding: 28px;
  background:
    radial-gradient(circle at 20% 10%, rgba(250, 90, 0, .2), transparent 34%),
    radial-gradient(circle at 100% 0, rgba(13, 110, 253, .22), transparent 38%),
    linear-gradient(145deg, rgba(8, 22, 39, .94), rgba(3, 10, 22, .9));
  box-shadow: 0 30px 90px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.brand-hero__card::after {
  content: "";
  position: absolute;
  inset: auto -70px -90px auto;
  width: 190px;
  height: 190px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(250, 90, 0, .2), transparent 68%);
}
.brand-hero__logo {
  display: grid;
  place-items: center;
  min-height: 124px;
  margin-bottom: 20px;
  border: 1px solid rgba(125, 159, 205, .16);
  border-radius: 20px;
  background: rgba(255, 255, 255, .045);
}
.brand-hero__logo img {
  max-width: 220px;
  max-height: 92px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.brand-logo-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  min-height: 44px;
  padding: 9px 18px;
  border-radius: 999px;
  color: var(--white);
  background: linear-gradient(135deg, rgba(250, 90, 0, .96), rgba(13, 110, 253, .86));
  box-shadow: 0 0 34px rgba(13, 110, 253, .24);
  font-size: 1.05rem;
  font-weight: 950;
  letter-spacing: -.02em;
}
.brand-hero__card h2 {
  margin: 0 0 8px;
  font-size: 1.55rem;
}
.brand-hero__card p {
  margin: 0 0 18px;
  color: rgba(226, 236, 255, .72);
  line-height: 1.55;
}
.brand-hero__card ul,
.brand-check-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.brand-hero__card li,
.brand-check-list li {
  position: relative;
  padding-left: 22px;
  color: rgba(255, 255, 255, .86);
  line-height: 1.5;
}
.brand-hero__card li::before,
.brand-check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 0 16px rgba(13, 110, 253, .44);
}
.brand-check-list--warning li::before {
  background: var(--orange);
  box-shadow: 0 0 16px rgba(250, 90, 0, .44);
}
.brand-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.brand-section h2 {
  margin-top: 0;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
}
.brand-section p {
  color: rgba(226, 236, 255, .78);
  line-height: 1.75;
}
.brand-capsules {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.brand-capsules span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid rgba(125, 159, 205, .22);
  border-radius: 999px;
  color: rgba(255, 255, 255, .88);
  background: rgba(255, 255, 255, .055);
  font-size: .9rem;
  font-weight: 800;
}
.brand-capsule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.brand-capsule-card a {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-height: 126px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(125, 159, 205, .2);
  border-radius: 999px;
  color: var(--white);
  text-decoration: none;
  background:
    radial-gradient(circle at 0 50%, rgba(250, 90, 0, .13), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025));
  box-shadow: 0 18px 48px rgba(0, 0, 0, .24);
  transition: transform .22s ease-out, border-color .22s ease-out, box-shadow .22s ease-out;
}
.brand-capsule-card a:hover {
  transform: translateY(-3px) scale(1.015);
  border-color: rgba(250, 90, 0, .4);
  box-shadow: 0 24px 62px rgba(0, 0, 0, .34), 0 0 32px rgba(250, 90, 0, .13);
}
.brand-capsule-card__logo {
  display: grid;
  place-items: center;
  width: 96px;
  height: 72px;
  border-radius: 999px;
  background: rgba(2, 8, 20, .46);
}
.brand-capsule-card__logo img {
  max-width: 74px;
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.brand-capsule-card__body {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.brand-capsule-card strong {
  font-size: 1.08rem;
  letter-spacing: -.01em;
}
.brand-capsule-card small {
  color: rgba(226, 236, 255, .7);
  line-height: 1.45;
}
.brand-capsule-card .brand-logo-fallback {
  min-width: 0;
  min-height: 34px;
  padding: 7px 12px;
  font-size: .82rem;
}
@media (max-width: 820px) {
  .brand-hero__grid,
  .brand-two-col {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px) {
  .brand-capsule-card a {
    grid-template-columns: 72px minmax(0, 1fr);
    min-height: 110px;
    border-radius: 26px;
  }
  .brand-capsule-card__logo {
    width: 72px;
    height: 60px;
  }
}

/* ===== Articles / blog ===== */
.archive-card__tag { display: inline-block; margin: 4px 0 0; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; color: #cfe0ff; background: rgba(20,120,255,0.16); }
.content-panel--article { max-width: 860px; margin: 0 auto; }
.article-meta { display: flex; gap: 14px; margin: 6px 0 18px; font-size: .85rem; color: var(--soft); }
.article-cover { margin: 0 0 22px; border-radius: 14px; overflow: hidden; }
.article-cover img { display: block; width: 100%; height: auto; }
.article-body { line-height: 1.75; }
.article-body h2 { margin: 28px 0 12px; }
.article-body h3 { margin: 22px 0 10px; }
.article-body p { margin: 0 0 16px; }
.article-body img { max-width: 100%; height: auto; border-radius: 12px; }
.article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.article-tags a { padding: 4px 12px; border-radius: 999px; font-size: .8rem; color: #9fc1ff; background: rgba(255,255,255,0.05); border: 1px solid var(--line); }
.article-tags a:hover { color: #fff; border-color: rgba(20,120,255,0.5); }
.article-latest { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.article-latest li { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.article-latest li:last-child { border-bottom: 0; }
.article-latest a { font-weight: 600; }
.article-latest a:hover { color: var(--cyan); }
.article-latest span { color: var(--soft); font-size: .8rem; white-space: nowrap; }
@media (max-width: 640px) { .content-panel--article { max-width: 100%; } }

/* ===== Brand featured image — constrained to a standard box ===== */
.article-featured--brand { max-width: 360px; margin: 22px auto; display: flex; align-items: center; justify-content: center; padding: 22px; background: #0b1a2d; border: 1px solid var(--line); }
.article-featured--brand img { width: auto; max-width: 100%; max-height: 200px; height: auto; object-fit: contain; }
@media (max-width: 640px) { .article-featured--brand { max-width: 100%; padding: 16px; } .article-featured--brand img { max-height: 160px; } }

/* ===== Universal service Hero — 4 benefit cards ===== */
.service-hero__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: var(--cards-maxw, 760px); margin-top: 26px; transform: translate(var(--cards-x, 0px), var(--cards-y, 0px)); }
.service-hero__card { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 11px; row-gap: 7px; padding: var(--card-pad, 16px); min-height: var(--card-h, auto); border: 1px solid rgba(125,159,205,0.22); border-radius: 14px; background: linear-gradient(155deg, rgba(13,26,44,0.66), rgba(6,15,29,0.5)); box-shadow: 0 14px 38px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.05); }
/* Hero benefit card icons — changed blue in v2.46 for glow-hunt.
   Original orange palette restored in v2.50 (see override block at EOF). */
.service-hero__card-icon { grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; color: #3b9bff; background: rgba(13,110,253,0.12); border: 1px solid rgba(13,110,253,0.3); }
.service-hero__card-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; }
.service-hero__card:nth-child(even) .service-hero__card-icon { color: #56a8ff; background: rgba(56,160,255,0.12); border-color: rgba(56,160,255,0.32); }
.service-hero__card h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: .98rem; font-weight: 800; color: #fff; line-height: 1.2; }
.service-hero__card p { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: .82rem; line-height: 1.5; color: rgba(255,255,255,0.7); }
/* On tablet/mobile drop the desktop-tuned --cards-y nudge: with the cards
   stacked it only pushed them (via transform, no reflow) into the next section
   ("Коли потрібна ця послуга"), causing the overlap. */
@media (max-width: 1024px) { .service-hero__cards { grid-template-columns: repeat(2, 1fr); max-width: 100%; transform: none; } }
@media (max-width: 480px) { .service-hero__cards { grid-template-columns: 1fr; } }

/* =====================================================================
 * Social Floating Buttons — Instagram / TikTok (premium, responsive)
 * Structural rules only. Per-device appearance (size, style, colours,
 * position, glow, animation list) is generated inline per breakpoint by
 * resave_social_buttons_render() via CSS custom properties + media queries.
 * ===================================================================== */
.resave-sfb {
  position: fixed;
  z-index: 9990;
  right: 24px;
  bottom: 130px;
  display: flex;
  flex-direction: column;
  gap: var(--sfb-gap, 12px);
  opacity: var(--sfb-opacity, 1);
  pointer-events: none;
}
.resave-sfb__btn {
  pointer-events: auto;
  display: grid;
  place-items: center;
  width: var(--sfb-size, 52px);
  height: var(--sfb-size, 52px);
  border-radius: var(--sfb-radius, 50%);
  background: var(--btn-bg, var(--sfb-bg-default, rgba(8, 12, 24, .9)));
  border: var(--sfb-bw, 1.5px) solid var(--btn-border, var(--sfb-border-default, rgba(125, 159, 205, .4)));
  color: var(--btn-icon, var(--sfb-icon-default, #fff));
  text-decoration: none;
  -webkit-backdrop-filter: var(--sfb-blur, blur(10px) saturate(135%));
  backdrop-filter: var(--sfb-blur, blur(10px) saturate(135%));
  box-shadow:
    0 6px 22px rgba(0, 0, 0, .4),
    0 0 calc(20px * var(--sfb-glow, .6)) calc(2px * var(--sfb-glow, .6)) var(--btn-glow, var(--sfb-glow-default, transparent)),
    inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: scale .24s cubic-bezier(.2, .8, .2, 1), box-shadow .26s ease, border-color .26s ease, background .26s ease, color .24s ease, filter .26s ease;
}
.resave-sfb__btn svg {
  width: var(--sfb-icon, 22px);
  height: var(--sfb-icon, 22px);
  display: block;
}
/* Hover animations use independent transform props (scale) so they layer on
   top of the idle/float keyframes without fighting for `transform`. */
.resave-sfb--hscale .resave-sfb__btn:hover,
.resave-sfb--hscale .resave-sfb__btn:focus-visible {
  scale: 1.12;
  outline: none;
}
.resave-sfb--hglow .resave-sfb__btn:hover,
.resave-sfb--hglow .resave-sfb__btn:focus-visible {
  box-shadow:
    0 8px 28px rgba(0, 0, 0, .46),
    0 0 26px 6px var(--btn-glow, var(--sfb-glow-default, rgba(0, 232, 220, .6))),
    inset 0 1px 0 rgba(255, 255, 255, .1);
  border-color: var(--btn-border, var(--sfb-border-default, #fff));
  color: #fff;
  outline: none;
}
@keyframes sfb-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -7px; }
}
@keyframes sfb-pulse {
  0%, 100% { box-shadow: 0 6px 22px rgba(0, 0, 0, .4), 0 0 0 0 var(--btn-glow, var(--sfb-glow-default, transparent)), inset 0 1px 0 rgba(255, 255, 255, .08); }
  50%      { box-shadow: 0 6px 22px rgba(0, 0, 0, .4), 0 0 calc(26px * var(--sfb-glow, .6)) calc(4px * var(--sfb-glow, .6)) var(--btn-glow, var(--sfb-glow-default, transparent)), inset 0 1px 0 rgba(255, 255, 255, .08); }
}
@keyframes sfb-idle {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.14); }
}
@media (prefers-reduced-motion: reduce) {
  .resave-sfb__btn { animation: none !important; }
}

/* =====================================================================
   v2.50 — Part 1: Restore original orange icon accents (reverts v2.46
   changes that were never rolled back in v2.48).

   Part 2: Unified service-page content backdrop — prevents body-gradient
   (blue radials) from bleeding through at different intensities on short
   vs tall service pages, making all service pages look visually consistent.
   ===================================================================== */

/* --- Hero benefit cards: alternating blue / orange icon accents ------
   Card order on every service hero:
     1. Чесна діагностика     → blue   (odd)
     2. Гарантія до 12 міс.   → orange (even)
     3. Швидкий ремонт        → blue   (odd)
     4. Україна та Польща     → orange (even)
   Only the icon colour changes — text, layout and hover are untouched. */
.service-hero__card-icon {
  color: #3b9bff;
  background: rgba(13, 110, 253, .12);
  border-color: rgba(13, 110, 253, .30);
}
.service-hero__card:nth-child(even) .service-hero__card-icon {
  color: #FA5A00;
  background: rgba(250, 90, 0, .10);
  border-color: rgba(250, 90, 0, .26);
}

/* --- "Коли потрібна ця послуга" cards: restore orange hover + corner -- */
.service-info-card::after {
  background: radial-gradient(circle, rgba(250, 90, 0, .20), transparent 68%);
}
.service-info-card:hover {
  border-color: rgba(250, 90, 0, .42);
  box-shadow: 0 24px 56px rgba(0, 0, 0, .36), 0 0 28px rgba(250, 90, 0, .18);
}
/* --include variant (e.g. "Що входить у послугу") — restore orange icon */
.service-info-card--include .service-info-card__icon {
  color: #FA5A00;
  background: rgba(250, 90, 0, .10);
  box-shadow: inset 0 0 0 1px rgba(250, 90, 0, .22), 0 0 24px rgba(250, 90, 0, .14);
}

/* --- Unified service page content backdrop (Part 2) -----------------
   .subpage-content sits below the hero and has no background of its
   own, so the body's blue radials show through at different positions
   depending on page height.  A consistent semi-opaque layer here makes
   every service page look the same regardless of how much content it has. */
.service-single .subpage-content {
  background: rgba(3, 9, 22, 0.30);
}

/* =====================================================================
   v2.51 — Premium ARTICLE template + "All Services" LANDING page.
   Uses the existing Re-Save dark palette (blue #0D6EFD / orange #FA5A00),
   panel system and spacing tokens. Scoped to new classes only.
   ===================================================================== */

/* ---------- Shared: article single backdrop ------------------------- */
.article-single.subpage-content { background: rgba(3, 9, 22, 0.30); }

/* ---------- ARTICLE HERO (single article) — aligned with archive hero style */
.article-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(28px, 5vw, 64px) 0 clamp(24px, 4vw, 48px);
  /* Opaque neutral dark — same base as .article-archive-hero */
  background: linear-gradient(110deg, #03070f, #060d18 54%, #03070f);
}
/* Subtle grid texture (matches body grid but lighter — premium depth) */
.article-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 72%);
}
.article-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: .26;
  filter: saturate(1.05);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 60%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 60%, transparent 100%);
}
/* Premium cinematic hero — photo framed as a content-width card.
   The photo (scale / X / Y / opacity admin-driven) sits inside a rounded,
   elevated frame; a STATIC FX layer (scrim + vignette + film grain + light
   ring) lives on the frame pseudos, so it never moves when the photo is
   repositioned. Width = site-shell: min(1216px, calc(100% - 44px)). */
.article-hero__frame.site-shell {
  position: absolute;
  top: clamp(14px, 2.2vw, 26px);
  bottom: clamp(14px, 2.2vw, 26px);
  left: 50%;
  z-index: 0;
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
  border-radius: clamp(18px, 2vw, 28px);
  box-shadow:
    0 28px 64px -30px rgba(0, 0, 0, .85),
    0 10px 26px -18px rgba(0, 0, 0, .7);
}
/* The photo: clean image, gently graded, clipped to the frame. No edge mask. */
.article-hero__frame .service-hero__bg {
  inset: 0;
  opacity: var(--service-bg-opacity, 1);
  filter: saturate(1.06) contrast(1.04) brightness(1.02) blur(var(--service-bg-blur, 0px));
  -webkit-mask-image: none;
  mask-image: none;
}
.article-hero__frame .service-hero__bg::before,
.article-hero__frame .service-hero__bg::after { display: none; }
/* FX layer 1 (z1): cinematic scrim (top, for text legibility) + corner vignette
   + the premium light ring (1px inner border + top highlight edge). */
.article-hero__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(135% 115% at 50% 0%, transparent 50%, rgba(2, 6, 14, .58) 100%),
    linear-gradient(180deg, rgba(2, 6, 14, .8) 0%, rgba(2, 6, 14, .4) 34%, rgba(2, 6, 14, .08) 62%, transparent 82%),
    linear-gradient(96deg, rgba(2, 6, 14, .58) 0%, rgba(2, 6, 14, .16) 44%, transparent 74%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .09),
    inset 0 1px 0 0 rgba(255, 255, 255, .16);
}
/* FX layer 2 (z2): delicate monochrome film grain (overlay blend, low opacity). */
.article-hero__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  opacity: .4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 150px 150px;
}
.article-hero__content { position: relative; z-index: 1; padding-inline: clamp(14px, 2.2vw, 40px); }
.article-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 16px 0 14px;
  color: var(--soft);
  font-size: .88rem;
  font-weight: 600;
}
.article-hero__cat {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #FA5A00, #ff7a20);
  box-shadow: 0 8px 22px rgba(250, 90, 0, .26);
  font-size: .76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.article-hero__read {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, .72);
}
.article-hero__meta-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: #3b9bff;
}
.article-hero__meta-icon .resave-icon { width: 16px; height: 16px; }
.article-hero__read::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
}
.article-hero__title {
  margin: 0;
  max-width: 880px;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.015em;
}
.article-hero__lead {
  max-width: 760px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, .82);
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  line-height: 1.65;
}

/* ---------- ARTICLE LAYOUT (main + sidebar) ------------------------- */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
  gap: clamp(18px, 2.4vw, 30px);
  padding-top: clamp(20px, 3vw, 34px);
}
.article-main { padding: clamp(22px, 3vw, 38px); }

/* ---------- ARTICLE BODY: auto-numbered premium sections ------------ */
.article-body { counter-reset: article-section; line-height: 1.78; color: rgba(255, 255, 255, .86); }
.article-body > h2 {
  counter-increment: article-section;
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 34px 0 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(125, 159, 205, .16);
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.article-body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.article-body > h2::before {
  content: counter(article-section, decimal-leading-zero);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, rgba(13, 110, 253, .9), rgba(13, 110, 253, .55));
  border: 1px solid rgba(79, 150, 255, .4);
  box-shadow: 0 10px 26px rgba(13, 110, 253, .26), inset 0 1px 0 rgba(255, 255, 255, .18);
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0;
}
.article-body > h2:nth-of-type(even)::before {
  background: linear-gradient(145deg, rgba(250, 90, 0, .92), rgba(250, 90, 0, .6));
  border-color: rgba(255, 122, 32, .42);
  box-shadow: 0 10px 26px rgba(250, 90, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.article-body h3 {
  margin: 24px 0 10px;
  font-size: clamp(1.08rem, 1.6vw, 1.32rem);
  font-weight: 800;
  color: #fff;
}
.article-body p { margin: 0 0 16px; }
.article-body a { color: #6bb8ff; text-decoration: underline; text-underline-offset: 2px; }
.article-body a:hover { color: #8fc8ff; }
.article-body ul,
.article-body ol { margin: 0 0 18px; padding-left: 4px; list-style: none; }
.article-body ul li,
.article-body ol li {
  position: relative;
  padding-left: 30px;
  margin: 0 0 11px;
  line-height: 1.6;
}
.article-body ul li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 12px rgba(250, 90, 0, .4);
}
.article-body ol { counter-reset: article-ol; }
.article-body ol li { counter-increment: article-ol; }
.article-body ol li::before {
  content: counter(article-ol);
  position: absolute;
  left: 0;
  top: .1em;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(13, 110, 253, .16);
  border: 1px solid rgba(13, 110, 253, .4);
  color: #6bb8ff;
  font-size: .72rem;
  font-weight: 800;
}
.article-body blockquote {
  margin: 22px 0;
  padding: 16px 20px;
  border-left: 3px solid var(--orange);
  border-radius: 0 12px 12px 0;
  background: rgba(13, 110, 253, .08);
  color: rgba(255, 255, 255, .9);
  font-style: italic;
}
.article-body img { max-width: 100%; height: auto; border-radius: 14px; margin: 8px 0 18px; }
.article-body h2 + p,
.article-body h3 + p { margin-top: 0; }

.article-main .article-tags { margin-top: 26px; }
.article-faq { margin-top: 30px; padding-top: 26px; border-top: 1px solid rgba(125, 159, 205, .16); }
.article-faq h2 { margin: 0 0 16px; font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 800; }
.article-faq .faq-grid--single { grid-template-columns: 1fr; }

/* ---------- ARTICLE SIDEBAR ----------------------------------------- */
.article-aside {
  position: sticky;
  top: calc(var(--site-header-offset, 112px) + 12px);
  display: grid;
  gap: 16px;
}
.article-widget {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.article-widget__title {
  margin: 0 0 14px;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.article-widget__more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  color: #6bb8ff;
  font-size: .86rem;
  font-weight: 800;
}
.article-widget__more:hover { color: #fff; }
.article-widget__more .resave-icon { width: 15px; height: 15px; }

/* Share */
.article-share__buttons { display: flex; gap: 10px; }
.article-share__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .8);
  cursor: pointer;
  transition: transform .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.article-share__btn:hover {
  transform: translateY(-2px);
  border-color: rgba(13, 110, 253, .55);
  background: rgba(13, 110, 253, .12);
  color: #fff;
}
.article-share__btn .resave-icon { width: 18px; height: 18px; }
.article-share__btn.is-copied { border-color: rgba(34, 197, 94, .6); color: #4ade80; }

/* Related articles */
.article-related__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.article-related__item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; }
.article-related__item:has(.article-related__body:only-child) { grid-template-columns: 1fr; }
.article-related__thumb {
  display: block;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(125, 159, 205, .16);
}
.article-related__thumb img { width: 100%; height: 100%; object-fit: cover; }
.article-related__body a { font-size: .92rem; font-weight: 700; line-height: 1.35; color: #fff; }
.article-related__body a:hover { color: #6bb8ff; }

/* Related services */
.article-services__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.article-services__list a {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(125, 159, 205, .16);
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
  color: rgba(255, 255, 255, .88);
  font-weight: 700;
  font-size: .9rem;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.article-services__list a:hover {
  transform: translateX(2px);
  border-color: rgba(13, 110, 253, .5);
  background: rgba(13, 110, 253, .1);
}
.article-services__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: var(--blue);
  background: rgba(13, 110, 253, .12);
}
.article-services__icon .resave-icon { width: 20px; height: 20px; }
.article-services__list a:hover .article-services__icon { color: var(--orange-hot); }
.article-services__arrow { color: var(--soft); display: inline-flex; }
.article-services__arrow .resave-icon { width: 16px; height: 16px; }

/* Consultation CTA box */
.article-cta-box {
  background:
    radial-gradient(circle at 100% 0, rgba(13, 110, 253, .22), transparent 46%),
    radial-gradient(circle at 0 100%, rgba(250, 90, 0, .12), transparent 42%),
    var(--panel-strong);
}
.article-cta-box p { margin: 0 0 16px; color: var(--muted); line-height: 1.55; font-size: .9rem; }
.article-cta-box__phone {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
}
.article-cta-box__phone-icon { display: inline-flex; color: #3b9bff; flex: 0 0 auto; }
.article-cta-box__phone-icon .resave-icon { width: 20px; height: 20px; }
.article-cta-box__phone-text { display: grid; gap: 1px; min-width: 0; }
.article-cta-box__phone-label {
  color: var(--soft);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .03em;
  line-height: 1.2;
  text-transform: uppercase;
}
.article-cta-box__phone-value {
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.2;
}
.article-cta-box .button { width: 100%; margin-top: 8px; }

.article-latest-panel { margin-top: clamp(18px, 2.5vw, 30px); }

@media (max-width: 980px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-aside { position: static; }
}

/* =====================================================================
   "ALL SERVICES" LANDING
   ===================================================================== */
.services-landing__hero {
  padding: clamp(28px, 5vw, 60px) 0 clamp(20px, 4vw, 40px);
}
.services-landing__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}
.services-landing__title {
  margin: 14px 0 0;
  font-size: clamp(2.2rem, 4.6vw, 3.8rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.04em;
}
.services-landing__title span { color: var(--blue); text-shadow: 0 0 32px rgba(13, 110, 253, .34); }
/* Two-colour wordmark: "Re-" orange, "Save" blue (decorative heading only) */
.services-landing__title .resave-wordmark { color: inherit; text-shadow: none; }
.services-landing__title .resave-wordmark__re { color: var(--orange-hot); text-shadow: 0 0 32px rgba(250, 90, 0, .3); }
.services-landing__title .resave-wordmark__save { color: var(--blue); text-shadow: 0 0 32px rgba(13, 110, 253, .34); }
.services-landing__subtitle {
  max-width: 540px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, .82);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.6;
}
.services-landing__hero-cards { max-width: 100%; margin-top: clamp(22px, 3vw, 30px); }
.services-landing__hero-visual {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(13, 110, 253, .26);
  box-shadow: 0 34px 100px rgba(0, 0, 0, .5), 0 0 60px rgba(13, 110, 253, .16);
}
.services-landing__hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 70% 30%, rgba(250, 90, 0, .14), transparent 50%);
}
.services-landing__hero-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

/* Filter chips */
.services-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(18px, 2.4vw, 28px);
}
.services-filter__chip {
  border: 1px solid rgba(125, 159, 205, .24);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .82);
  padding: 10px 18px;
  font-size: .88rem;
  font-weight: 800;
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.services-filter__chip:hover { transform: translateY(-1px); color: #fff; border-color: rgba(13, 110, 253, .5); }
.services-filter__chip.is-active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--blue), #3b9bff);
  box-shadow: 0 10px 26px rgba(13, 110, 253, .3);
}
.services-filter__empty { margin: 8px 0 0; color: var(--muted); }

/* Landing service cards — 3 columns desktop, 2 tablet, 1 mobile */
.services-landing__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.service-card--landing {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
}
/* Card photo (admin-driven Service Card Image + mask) */
.service-card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(13, 110, 253, .18), rgba(6, 15, 29, .7));
}
.service-card__media-img,
.service-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
}
.service-card__media-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.service-card__media-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(123, 180, 255, .45);
}
.service-card__media-placeholder .resave-icon { width: 60px; height: 60px; }
.service-card__content {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 18px;
}
.service-card--landing .service-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(13, 110, 253, .1);
  border: 1px solid rgba(13, 110, 253, .24);
  margin: 0;
}
.service-card--landing .service-card__icon svg { width: 28px; height: 28px; }
.service-card--landing .service-card__body { display: grid; gap: 4px; min-width: 0; }
.service-card--landing strong { font-size: 1.02rem; font-weight: 800; line-height: 1.2; }
.service-card--landing em {
  display: block;
  font-style: normal;
  color: rgba(255, 255, 255, .64);
  font-size: .84rem;
  line-height: 1.45;
}
.service-card--landing .service-card__price {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 4px;
  color: #fff;
}
.service-card--landing .service-card__price span { font-size: .86rem; font-weight: 800; }
.service-card--landing .service-card__price span:first-child { color: #ff7a20; }
.service-card--landing .service-card__price span:last-child { color: #ff7a20; }
.service-card--landing .service-card__arrow {
  display: inline-flex;
  align-self: center;
  color: var(--soft);
  transition: transform .2s var(--ease), color .2s var(--ease);
}
.service-card--landing .service-card__arrow .resave-icon { width: 20px; height: 20px; }
.service-card.service-card--landing:hover {
  transform: translateY(-4px) !important;
}
.service-card--landing:hover .service-card__arrow { color: var(--orange-hot); transform: translateX(3px); }
.service-card--landing[hidden] { display: none !important; }

/* Advantages */
.services-landing__benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.services-landing__benefit {
  padding: 22px;
  border: 1px solid rgba(125, 159, 205, .2);
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(13, 26, 44, .66), rgba(6, 15, 29, .5));
  box-shadow: 0 14px 38px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.services-landing__benefit-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  border-radius: 14px;
  color: var(--blue);
  background: rgba(13, 110, 253, .12);
  border: 1px solid rgba(13, 110, 253, .28);
}
.services-landing__benefit:nth-child(even) .services-landing__benefit-icon {
  color: var(--orange-hot);
  background: rgba(250, 90, 0, .1);
  border-color: rgba(250, 90, 0, .26);
}
.services-landing__benefit-icon .resave-icon { width: 26px; height: 26px; }
.services-landing__benefit h3 { margin: 0 0 8px; font-size: 1.06rem; font-weight: 800; }
.services-landing__benefit p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }

/* CTA */
.services-landing__cta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(13, 110, 253, .28);
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 20%, rgba(250, 90, 0, .14), transparent 38%),
    radial-gradient(circle at 100% 0, rgba(13, 110, 253, .2), transparent 42%),
    linear-gradient(145deg, rgba(8, 22, 39, .94), rgba(3, 10, 22, .9));
  box-shadow: 0 30px 90px rgba(0, 0, 0, .4);
}
.services-landing__cta-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  color: var(--orange-hot);
  background: rgba(250, 90, 0, .12);
  border: 1px solid rgba(250, 90, 0, .3);
}
.services-landing__cta-icon .resave-icon { width: 32px; height: 32px; }
.services-landing__cta-copy h2 { margin: 0 0 6px; font-size: clamp(1.3rem, 2.2vw, 1.85rem); font-weight: 800; letter-spacing: -.02em; }
.services-landing__cta-copy p { margin: 0; color: var(--muted); line-height: 1.55; }
.services-landing__cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 980px) {
  .services-landing__hero-grid { grid-template-columns: 1fr; }
  .services-landing__hero-visual { order: -1; }
  .services-landing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .services-landing__benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services-landing__cta { grid-template-columns: 1fr; text-align: center; }
  .services-landing__cta-icon { margin: 0 auto; }
  .services-landing__cta-actions { justify-content: center; }
}

@media (max-width: 560px) {
  .services-landing__grid { grid-template-columns: 1fr; gap: 12px; }
  .services-landing__benefits-grid { grid-template-columns: 1fr; }
  .services-landing__cta-actions .button { width: 100%; }
}

/* =====================================================================
   v2.52 — Price colours (zł = blue, грн = orange) + article author meta
   ===================================================================== */
/* Homepage "Наші послуги" + any .service-card price spans.
   zł price → blue accent, грн price → orange accent. */
.service-card .service-price--zl { color: #ff7a20; }
.service-card .service-price--uah { color: #ff7a20; }
.service-card small .service-price { font-weight: 800; }

/* Article hero: author chip (matches date / reading-time styling) */
.article-hero__author {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, .72);
}

/* =====================================================================
   v2.53 — All-Services Hero (admin-driven) + header "Статті" dropdown
   ===================================================================== */

/* ---- Global Hero background + mask for the "All Services" page ------ */
.services-landing__hero { position: relative; overflow: hidden; }
/* Content-width clipping frame: keeps the photo inside the site's content grid
   (same max-width + gutters as .site-shell / .hero-section__grid). overflow:hidden
   guarantees the image never crosses the left/right alignment lines, no matter
   the Scale / Position X / Y values. */
.services-landing__hero-media {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--resave-content-max, 1360px), calc(100% - (var(--resave-content-gutter, 32px) * 2)));
  max-width: var(--resave-content-max, 1360px);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Hero Image: a real <img> that moves/zooms inside the fixed frame.
   Only its transform changes with Position X/Y (translate) and Scale (scale);
   the frame never moves. overflow:hidden on the frame clips it like a mask. */
.services-landing__hero-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  will-change: transform;
  pointer-events: none;
  user-select: none;
}
/* Legacy background variant (kept for safety; no longer emitted). */
.services-landing__hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: center;
  pointer-events: none;
}
.services-landing__hero-mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.services-landing__hero > .site-shell { position: relative; z-index: 1; }

/* ---- Unified dropdown: allow long article titles to wrap to 2 lines ---
   (services labels are short, so this is a no-op for them). */
.services-dropdown__grid a {
  line-height: 1.3;
}
.services-dropdown__grid a > span:not(.services-dropdown__icon),
.services-dropdown__grid a {
  overflow-wrap: anywhere;
}
.primary-nav__dropdown-link { white-space: nowrap; }

/* =====================================================================
   v2.61 — Single-service Hero: breadcrumb sits right under the header.
   Scoped to .service-single so it applies to EVERY service page (current
   and future) via single-services.php, and nothing else. Only vertical
   spacing changes — Hero design, colours, typography and structure are
   untouched. Responsive top gap (same value desktop / tablet / mobile).
   ===================================================================== */
.service-single .subpage-hero {
  padding-top: clamp(14px, 2.2vw, 22px);
}
/* Full breadcrumb tree (Головна → Послуги → поточна послуга) — let it wrap
   on narrow screens and keep the current item as plain (non-link) text. */
.service-single .breadcrumbs {
  flex-wrap: wrap;
  row-gap: 4px;
}
.service-single .breadcrumbs__current {
  color: var(--soft);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---------- ARTICLE CARDS: clickable, hover glow, "Читати далі" --------- */
.archive-card--article {
  position: relative;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.archive-card--article h2 {
  color: #ffb36d;
  background: linear-gradient(135deg, #ffe2be 0%, #ffad61 46%, #ff7a1a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 850;
  line-height: 1.16;
  text-wrap: balance;
  filter: drop-shadow(0 8px 22px rgba(250, 90, 0, 0.16));
  transition: filter .28s ease, transform .28s ease;
}

.archive-card--article:hover,
.archive-card--article:focus-within {
  transform: translateY(-4px) scale(1.015);
  border-color: rgba(250, 90, 0, 0.45);
  box-shadow:
    0 0 0 1px rgba(250, 90, 0, 0.28),
    0 10px 34px rgba(250, 90, 0, 0.18),
    0 18px 48px rgba(3, 9, 22, 0.45);
}

.archive-card--article:hover h2,
.archive-card--article:focus-within h2 {
  filter: drop-shadow(0 10px 28px rgba(250, 90, 0, 0.28));
  transform: translateY(-1px);
}

.archive-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.archive-card--article .archive-card__image img {
  transition: transform .35s ease;
}

.archive-card--article:hover .archive-card__image img {
  transform: scale(1.04);
}

.archive-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  color: var(--orange);
  font-weight: 700;
  font-size: .92rem;
}

.archive-card__more .resave-icon {
  width: 16px;
  height: 16px;
  transition: transform .25s ease;
}

.archive-card--article:hover .archive-card__more .resave-icon {
  transform: translateX(4px);
}

.articles-pagination {
  display: grid;
  gap: 14px;
  justify-items: center;
  margin: clamp(28px, 4vw, 52px) auto 0;
}

/* Top copy of the pagination — same controls/style, sits above the cards. */
.articles-pagination--top {
  margin: 0 auto clamp(22px, 3vw, 34px);
}

.articles-pagination__status {
  color: var(--soft);
  font-size: .92rem;
  font-weight: 700;
}

.articles-pagination__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  width: 100%;
}

.articles-pagination__button a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  min-width: min(100%, 230px);
  padding: 15px 26px;
  border: 1px solid rgba(13, 110, 253, 0.52);
  border-radius: 8px;
  color: #c8dfff;
  background:
    linear-gradient(135deg, rgba(13, 110, 253, 0.22) 0%, rgba(13, 110, 253, 0.08) 100%),
    rgba(4, 10, 22, 0.94);
  box-shadow:
    0 0 0 1px rgba(13, 110, 253, 0.14) inset,
    0 4px 18px rgba(13, 110, 253, 0.10),
    0 16px 34px rgba(3, 9, 22, 0.34);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
  outline: none;
  transition: transform .24s cubic-bezier(.2,.8,.2,1), border-color .24s ease, box-shadow .24s ease, background .24s ease, color .24s ease;
}

.articles-pagination__button a:hover {
  transform: translateY(-3px);
  border-color: rgba(250, 90, 0, 0.62);
  color: #fff;
  background:
    linear-gradient(135deg, rgba(250, 90, 0, 0.22) 0%, rgba(250, 90, 0, 0.08) 100%),
    rgba(6, 12, 24, 0.98);
  box-shadow:
    0 0 0 1px rgba(250, 90, 0, 0.18) inset,
    0 0 24px rgba(250, 90, 0, 0.18),
    0 0 48px rgba(250, 90, 0, 0.08),
    0 20px 42px rgba(3, 9, 22, 0.44);
}

.articles-pagination__button a:focus-visible {
  outline: 2px solid rgba(13, 110, 253, 0.72);
  outline-offset: 3px;
}

/* ---------- NEXT ARTICLE button (single article, below hero) ---------- */
.article-next-wrap {
  padding: 18px 0 0;
}
.article-next-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px 14px 16px;
  border: 1px solid rgba(13, 110, 253, 0.38);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(13, 110, 253, 0.12) 0%, rgba(13, 110, 253, 0.04) 100%), rgba(4, 10, 22, 0.88);
  box-shadow: 0 4px 18px rgba(13, 110, 253, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: #fff;
  text-decoration: none;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.article-next-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(250, 90, 0, 0.55);
  background: linear-gradient(135deg, rgba(250, 90, 0, 0.14) 0%, rgba(250, 90, 0, 0.05) 100%), rgba(6, 12, 24, 0.96);
  box-shadow: 0 0 22px rgba(250, 90, 0, 0.16), 0 8px 28px rgba(3, 9, 22, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: #fff;
}
.article-next-btn__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(13, 110, 253, 0.14);
  border: 1px solid rgba(13, 110, 253, 0.28);
  color: var(--blue);
  transition: background .22s ease, border-color .22s ease, color .22s ease;
}
.article-next-btn:hover .article-next-btn__icon {
  background: rgba(250, 90, 0, 0.14);
  border-color: rgba(250, 90, 0, 0.32);
  color: var(--orange-hot);
}
.article-next-btn__icon .resave-icon { width: 20px; height: 20px; }
.article-next-btn__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.article-next-btn__label {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.article-next-btn__title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.92);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 580px;
}
@media (max-width: 640px) {
  .article-next-btn__title { max-width: 220px; }
}

/* ---------- HOME: articles preview section --------------------------- */
.articles-preview {
  padding: clamp(18px, 2.6vw, 38px) 0 clamp(40px, 6vw, 90px);
}

.articles-preview__subtitle {
  margin: -6px 0 26px;
  color: var(--muted);
  max-width: 640px;
}

.articles-preview__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(24px, 3vw, 40px);
}

/* ---------- HOME: repair cases preview section ------------------------ */
.repair-cases-preview {
  padding: clamp(40px, 6vw, 90px) 0 clamp(18px, 2.4vw, 32px);
}

.repair-cases-preview__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 32px);
  margin-bottom: clamp(22px, 3vw, 34px);
}

.repair-cases-preview__head p {
  margin: -6px 0 0;
  color: var(--muted);
  max-width: 680px;
}

.repair-cases-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
}

.repair-case-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 16px;
  background: rgba(2, 7, 18, .72);
  box-shadow: 0 18px 48px rgba(3, 9, 22, .34);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.repair-case-card:hover,
.repair-case-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(250, 90, 0, .42);
  box-shadow: 0 18px 52px rgba(250, 90, 0, .14), 0 18px 48px rgba(3, 9, 22, .44);
}

.repair-case-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: rgba(15, 23, 42, .8);
}

.repair-case-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .35s ease;
}

.repair-case-card:hover .repair-case-card__image img,
.repair-case-card:focus-within .repair-case-card__image img {
  transform: scale(1.035);
}

.repair-case-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: clamp(16px, 2vw, 22px);
}

.repair-case-card__eyebrow,
.repair-case-card__model {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
}

.repair-case-card__eyebrow {
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.repair-case-card h3 {
  margin: 0;
  font-size: clamp(1.05rem, 1.35vw, 1.28rem);
  line-height: 1.18;
}

.repair-case-card h3 {
  color: var(--text);
}

.repair-case-card p {
  margin: 0;
  color: var(--soft);
  line-height: 1.58;
}

.repair-case-card__model {
  margin-top: auto;
}

.repair-case-card__link {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}

.repair-case-card__link:focus-visible {
  outline: 3px solid rgba(250, 90, 0, .72);
  outline-offset: -3px;
}

.repair-cases-preview__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(24px, 3vw, 40px);
}

@media (max-width: 980px) {
  .repair-cases-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- ARTICLE HERO: neutral overlay (matches archive hero mask style) */
/* Overlay (used by local-page heroes without a photo). The single-article hero
   no longer renders this element — its photo is shown clean, no overlay. */
.article-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Combined neutral dark gradients — same style as archive hero default mask */
  background:
    linear-gradient(180deg, rgba(2, 7, 18, 0.82) 0%, transparent 70%),
    linear-gradient(90deg, rgba(2, 7, 18, 0.78) 0%, transparent 72%),
    rgba(2, 7, 18, 0.32);
  /* UNIVERSAL: scale down the hero scrim on ALL SEO/location/article photo
     heroes at once so nav/title/text stay readable (was too dark). */
  opacity: .55;
}

.article-hero__title {
  color: var(--orange-hot);
  background: linear-gradient(120deg, #ff8a3d 0%, var(--orange) 55%, #ff6a14 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Brand glow + a soft dark drop for legibility over the cinematic photo. */
  filter: drop-shadow(0 2px 16px rgba(250, 90, 0, 0.3)) drop-shadow(0 4px 22px rgba(0, 0, 0, 0.55));
}

.article-hero__lead {
  max-width: 880px;
  display: block;
  overflow: visible;
}

@media (max-width: 760px) {
  .repair-cases-preview__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .repair-cases-grid {
    grid-template-columns: 1fr;
  }

  .articles-preview__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- SINGLE REPAIR CASE: controlled photo frames --------------- */
.repair-case-primary-image {
  width: 100%;
  max-height: 430px;
  margin: 0 0 clamp(22px, 3vw, 34px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(15, 23, 42, .8);
}

.repair-case-primary-image img,
.repair-case-gallery-grid img,
.repair-case-main .before-after-grid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.repair-case-gallery-panel {
  margin-top: clamp(26px, 4vw, 44px);
}

.repair-case-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 20px);
}

.repair-case-gallery-grid figure,
.repair-case-main .before-after-grid figure {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(15, 23, 42, .8);
}

.repair-case-main .before-after-grid {
  gap: clamp(14px, 2vw, 20px);
}

.repair-case-main .before-after-grid figcaption {
  padding: 10px 12px;
  color: var(--soft);
  font-size: .9rem;
}

@media (max-width: 760px) {
  .repair-case-primary-image {
    max-height: none;
    aspect-ratio: 4 / 3;
  }

  .repair-case-gallery-grid,
  .repair-case-main .before-after-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Uniform article card images (object-fit cover) -------------- */
.archive-card--article .archive-card__image {
  display: block;
  aspect-ratio: 16 / 10;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}
.archive-card--article .archive-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ---------- Article archive HERO (admin-driven, NEUTRAL mask) ----------- */
/* Opaque neutral base — blocks the site-wide blue ambient glow from bleeding
   into the hero. No blue anywhere in this block. */
.article-archive-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(150px, 20vw, 240px);
  display: flex;
  align-items: flex-start;
  padding: clamp(30px, 4vw, 56px) 0 clamp(18px, 3vw, 34px);
  margin-bottom: clamp(20px, 3vw, 34px);
  background: linear-gradient(110deg, #03070f, #060d18 54%, #03070f);
}
/* Fixed frame — only the photo INSIDE moves/scales; the frame never changes. */
.article-archive-hero__frame {
  position: absolute;
  inset: 0 auto 0 50%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateX(-50%);
}
.article-archive-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.article-archive-hero__photo {
  width: 100%;
  height: 100%;
  display: block;
  /* object-fit / object-position / transform / opacity / filter come inline
     from the admin (resave_article_archive_hero_styles). */
  will-change: transform;
}
/* Neutral dark mask (directional gradient + flat overlay) — inline-styled. */
.article-archive-hero__mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.article-archive-hero__content { position: relative; z-index: 2; }
.article-archive-hero h1 {
  margin: 12px 0 10px;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: 0;
}
.article-archive-hero__subtitle {
  margin: 0 0 6px;
  color: var(--orange-hot);
  font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
}
.article-archive-hero__desc {
  max-width: 760px;
  margin: 0;
  color: rgba(255, 255, 255, .82);
  line-height: 1.6;
}
@media (max-width: 768px) {
  .article-archive-hero {
    min-height: clamp(132px, 34vw, 210px);
    padding: clamp(30px, 7vw, 44px) 0 18px;
  }
  .articles-pagination__actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .articles-pagination__button a {
    width: 100%;
  }
}

/* ---------- Single-article overlay direction variants ------------------- */
.article-hero--dir-tb .article-hero__overlay {
  background: linear-gradient(180deg, rgba(2, 7, 18, .86) 0%, rgba(2, 7, 18, .4) 50%, rgba(2, 7, 18, .1) 100%);
}
.article-hero--dir-lr .article-hero__overlay {
  background: linear-gradient(90deg, rgba(2, 7, 18, .84) 0%, rgba(2, 7, 18, .36) 52%, rgba(2, 7, 18, .05) 100%);
}
.article-hero--dir-combined .article-hero__overlay {
  /* Lighter than before so the breadcrumb / title / lead stay readable on the
     SEO location pages, while keeping enough scrim for contrast. */
  background:
    linear-gradient(180deg, rgba(2, 7, 18, .58) 0%, rgba(2, 7, 18, .26) 50%, rgba(2, 7, 18, .06) 100%),
    linear-gradient(90deg, rgba(2, 7, 18, .52) 0%, rgba(2, 7, 18, .18) 54%, transparent 100%);
}

/* ---------- Article author experience ----------------------------------- */
.article-hero__lead {
  display: block;
  overflow: visible;
  max-height: none;
  -webkit-line-clamp: none;
  line-height: 1.6;
}
.article-hero__author-exp {
  display: block;
  margin-top: 2px;
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .6);
}

/* ---------- Single-article internal links + brands ---------------------- */
.article-internal-links {
  margin: 26px 0;
  padding: 18px 22px;
  border: 1px solid rgba(250, 90, 0, .22);
  border-radius: 14px;
  background: rgba(250, 90, 0, .05);
}
.article-internal-links h2 { margin: 0 0 10px; font-size: 1.15rem; }
.article-internal-links ul { margin: 0; padding-left: 18px; }
.article-internal-links li { margin: 4px 0; }
.article-internal-links a { color: var(--orange-hot); font-weight: 600; }
.article-brands { margin: 26px 0; }
.article-brands h2 { margin: 0 0 12px; font-size: 1.15rem; }
.article-brands__list { display: flex; flex-wrap: wrap; gap: 12px; }
.article-brands__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  font-weight: 600;
  transition: border-color .2s ease, transform .2s ease;
}
.article-brands__item:hover { border-color: rgba(250, 90, 0, .5); transform: translateY(-2px); }
.article-brands__item img { width: 24px; height: 24px; object-fit: contain; border-radius: 4px; }

/* ---------- v3.7: Local SEO pages ------------------------------------- */
.local-body { font-size: 1.02rem; line-height: 1.7; }
.local-body h2 {
  margin: 26px 0 12px;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  color: var(--text);
}
.local-body ul, .local-body ol { margin: 0 0 14px; padding-left: 22px; }
.local-body li { margin: 6px 0; }
.local-faq__item {
  margin: 8px 0;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
}
.local-faq__item summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--text);
  list-style: none;
}
.local-faq__item summary::-webkit-details-marker { display: none; }
.local-faq__item[open] summary { color: var(--orange-hot); }
.local-faq__item p { margin: 10px 0 0; color: var(--muted); }

/* "Обслуговуємо" interlink block */
.local-serve { margin-top: 24px; }
.local-serve__title {
  margin: 0 0 16px;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
}
.local-serve__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 36px);
}
.local-serve__col h3 {
  margin: 0 0 10px;
  font-size: 1.05rem;
  color: var(--orange-hot);
}
.local-serve__col ul { list-style: none; margin: 0; padding: 0; }
.local-serve__col li { margin: 6px 0; }
.local-serve__col a { color: var(--text); text-decoration: none; transition: color .2s ease; }
.local-serve__col a:hover { color: var(--orange-hot); }
.local-serve__more a { color: var(--muted); font-weight: 600; }

/* Hub: location cards */
.local-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(14px, 2vw, 22px);
  margin: clamp(18px, 3vw, 30px) 0;
}
.local-hub-card { padding: 20px 22px; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.local-hub-card:hover {
  transform: translateY(-4px);
  border-color: rgba(250, 90, 0, .4);
  box-shadow: 0 10px 30px rgba(250, 90, 0, .14);
}
.local-hub-card__city {
  margin: 0 0 12px;
  font-size: 1.25rem;
  color: var(--text);
}
.local-hub-card__services { list-style: none; margin: 0; padding: 0; }
.local-hub-card__services li { margin: 7px 0; }
.local-hub-card__services a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s ease;
}
.local-hub-card__services a::before { content: "→"; color: var(--orange-hot); }
.local-hub-card__services a:hover { color: var(--orange-hot); }

/* Local CTA panel */
.local-cta { margin-top: 24px; text-align: center; }
.local-cta h2 { margin: 0 0 10px; }
.local-cta p { margin: 0 auto 18px; max-width: 620px; color: var(--muted); }
.local-cta .button { margin: 0 6px 8px; }

@media (max-width: 640px) {
  .local-serve__cols { grid-template-columns: 1fr; }
}

/* ---------- v3.11: Nova Poshta shipping page ------------------------- */
:root { --np-accent: var(--orange-hot); --np-accent-soft: rgba(250, 90, 0, .14); }

.np-page .np-body { padding-bottom: clamp(30px, 5vw, 60px); }

.np-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(30px, 5vw, 64px) 0 clamp(26px, 4vw, 48px);
  margin-bottom: clamp(18px, 3vw, 30px);
  background: linear-gradient(120deg, #050608 0%, #0c0d10 55%, #050608 100%);
}
/* Premium cinematic hero — same content-width framed-card treatment as the
   single-article hero (rounded, elevated; static scrim + vignette + grain +
   ring on the frame pseudos; photo scale / X / Y / opacity stay admin-driven). */
.np-hero .np-hero__frame.site-shell {
  position: absolute;
  top: clamp(14px, 2.2vw, 26px);
  bottom: clamp(14px, 2.2vw, 26px);
  left: 50%;
  z-index: 0;
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
  border-radius: clamp(18px, 2vw, 28px);
  box-shadow:
    0 28px 64px -30px rgba(0, 0, 0, .85),
    0 10px 26px -18px rgba(0, 0, 0, .7);
}
.np-hero .np-hero__frame .service-hero__bg {
  inset: 0;
  opacity: var(--service-bg-opacity, 1);
  filter: saturate(1.06) contrast(1.04) brightness(1.02) blur(var(--service-bg-blur, 0px));
  -webkit-mask-image: none;
  mask-image: none;
}
.np-hero .np-hero__frame .service-hero__bg::before,
.np-hero .np-hero__frame .service-hero__bg::after { display: none; }
.np-hero .np-hero__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(135% 115% at 50% 0%, transparent 50%, rgba(2, 6, 14, .58) 100%),
    linear-gradient(180deg, rgba(2, 6, 14, .8) 0%, rgba(2, 6, 14, .4) 34%, rgba(2, 6, 14, .08) 62%, transparent 82%),
    linear-gradient(96deg, rgba(2, 6, 14, .58) 0%, rgba(2, 6, 14, .16) 44%, transparent 74%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .09),
    inset 0 1px 0 0 rgba(255, 255, 255, .16);
}
.np-hero .np-hero__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  opacity: .4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 150px 150px;
}
/* Overlay glow removed — premium FX lives on the frame pseudos above. */
.np-hero__overlay { display: none; }
.np-hero .site-shell { position: relative; z-index: 1; }
.np-badge {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 14px 0 12px; padding: 6px 14px; border-radius: 999px;
  font-size: .8rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  color: #fff; background: linear-gradient(135deg, var(--np-accent), #ff8a3d);
  box-shadow: 0 8px 22px rgba(250, 90, 0, .26);
}
.np-badge .resave-icon { width: 16px; height: 16px; }
.np-hero__title {
  margin: 0 0 12px; max-width: 880px;
  font-size: clamp(1.9rem, 4vw, 3.2rem); font-weight: 800; line-height: 1.08; letter-spacing: -.02em;
}
.np-hero__lead { max-width: 760px; margin: 0 0 20px; color: rgba(255,255,255,.82); font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.65; }
.np-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.np-hero__note {
  display: flex; align-items: flex-start; gap: 10px; max-width: 760px; margin: 0;
  padding: 12px 16px; border-radius: 12px;
  background: var(--np-accent-soft); border: 1px solid rgba(250, 90, 0, .3);
  color: rgba(255,255,255,.88); font-size: .95rem; line-height: 1.55;
}
.np-hero__note-icon { color: var(--np-accent); flex: 0 0 auto; margin-top: 2px; }
.np-hero__note-icon .resave-icon, .np-h-icon .resave-icon { width: 18px; height: 18px; }

/* ===================================================================
   PREMIUM HERO POLISH — single-article & Nova Poshta
   Richer ambient backdrop behind the framed photo card, refined
   typography and edge legibility. Photo controls stay admin-driven.
   =================================================================== */
.article-hero,
.np-hero {
  /* Deeper, directional ambient so the rounded photo card feels lifted. */
  background:
    radial-gradient(120% 150% at 16% -10%, #0b1426 0%, #050a16 52%, #02050d 100%);
}
/* A touch more vertical room so the inset card breathes top & bottom. */
.article-hero { padding: clamp(34px, 5vw, 72px) 0 clamp(30px, 4vw, 54px); }
.np-hero { padding: clamp(34px, 5vw, 72px) 0 clamp(30px, 4vw, 54px); }

/* Content sits above the framed photo with comfortable inner padding. */
.article-hero__content,
.np-hero > .site-shell { position: relative; z-index: 1; }
/* Lower the NP hero text block + add inner padding so it no longer crowds the
   top of the banner photo (matches the breathing room of regular article heroes). */
.np-hero > .site-shell {
  padding-top: clamp(18px, 4.5vw, 44px);
  padding-inline: clamp(14px, 2.2vw, 40px);
}
/* Clear separation between the banner hero and the first body section. */
.np-page .np-body { margin-top: clamp(10px, 2.5vw, 22px); }

/* Headlines — tighter tracking, with legibility shadow on photo. */
.article-hero__title {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing: -.018em;
  line-height: 1.1;
}
.np-hero__title {
  font-size: clamp(2rem, 4.1vw, 3.35rem);
  letter-spacing: -.03em;
  line-height: 1.07;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .55);
}
.article-hero__lead,
.np-hero__lead { text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }
.article-hero__meta,
.np-hero .breadcrumbs,
.article-hero .breadcrumbs { text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
/* Brighter breadcrumb on photo heroes (location/article/NP) for readability. */
.article-hero .breadcrumbs,
.np-hero .breadcrumbs { color: rgba(226, 236, 255, .82); }
.article-hero .breadcrumbs a,
.np-hero .breadcrumbs a { color: rgba(226, 236, 255, .92); }
.article-hero .breadcrumbs a:hover,
.np-hero .breadcrumbs a:hover { color: #fff; }

/* Premium pill chips — glass edge + soft brand glow. */
.article-hero__cat,
.np-badge {
  box-shadow:
    0 10px 26px rgba(250, 90, 0, .32),
    inset 0 1px 0 rgba(255, 255, 255, .28);
}

/* On narrow screens keep the card edge-to-edge-friendly (smaller radius/inset). */
@media (max-width: 600px) {
  .article-hero__frame.site-shell,
  .np-hero .np-hero__frame.site-shell {
    top: clamp(8px, 2vw, 14px);
    bottom: clamp(8px, 2vw, 14px);
    border-radius: clamp(12px, 3vw, 18px);
  }
}

.np-block, .np-ship, .np-cta { margin-top: clamp(16px, 2.4vw, 24px); }
.np-block h2, .np-ship h2, .np-cta h2 {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px; font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.2;
}
.np-h-icon { display: inline-flex; color: var(--np-accent); flex: 0 0 auto; }
.np-block p { color: var(--muted); line-height: 1.7; }

.np-ship__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.np-ship__item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px; border-radius: 14px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
}
.np-ship__icon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 11px;
  color: var(--np-accent); background: var(--np-accent-soft);
}
.np-ship__icon .resave-icon { width: 22px; height: 22px; }
.np-ship__label { display: block; font-size: .78rem; color: var(--soft); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 3px; }
.np-ship__item strong { font-weight: 700; line-height: 1.4; }
.np-ship__item a { color: var(--text); text-decoration: none; }
.np-ship__item a:hover { color: var(--np-accent); }

.np-accent {
  display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0;
  padding: 12px 16px; border-radius: 12px; line-height: 1.55;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1);
}
.np-accent .resave-icon { width: 18px; height: 18px; color: var(--orange-hot); flex: 0 0 auto; margin-top: 1px; }
.np-accent--strong { background: var(--np-accent-soft); border-color: rgba(250, 90, 0, .34); color: #fff; font-weight: 600; }
.np-accent--strong .resave-icon { color: var(--np-accent); }

.np-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.np-list li { position: relative; padding-left: 30px; line-height: 1.55; color: var(--text); }
.np-list li::before {
  position: absolute; left: 0; top: 1px; width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 12px; font-weight: 800;
}
.np-list--check li::before { content: "\2713"; color: #1a7f37; background: rgba(26,127,55,.16); }
.np-list--x li::before { content: "\00d7"; color: var(--np-accent); background: var(--np-accent-soft); }

.np-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.np-chip {
  display: inline-flex; padding: 7px 14px; border-radius: 999px;
  font-size: .9rem; color: var(--text);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
}

.np-table-wrap { overflow-x: auto; }
.np-table { width: 100%; border-collapse: collapse; }
.np-table th, .np-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.09); vertical-align: top; }
.np-table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--soft); }
.np-table td:first-child { font-weight: 600; color: var(--text); }
.np-table td:last-child { color: var(--muted); }

.np-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.np-steps li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.5; }
.np-steps__num {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; font-weight: 800; font-size: .9rem;
  color: #fff; background: linear-gradient(135deg, var(--np-accent), #ff8a3d);
}

.np-faq { display: grid; gap: 8px; }

.np-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.np-link {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border-radius: 12px; text-decoration: none; color: var(--text);
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1);
  transition: border-color .2s ease, transform .2s ease;
}
.np-link:hover { border-color: rgba(250, 90, 0, .45); transform: translateY(-2px); }

/* v3.32: keep service thumbnails sharp on hover by moving the card without scaling it. */
.service-card.service-card--landing:hover,
.has-js .service-card.service-card--landing:hover {
  transform: translateY(-4px) !important;
}

.np-link__icon { color: var(--np-accent); display: inline-flex; flex: 0 0 auto; }
.np-link__icon .resave-icon { width: 20px; height: 20px; }
.np-link span:nth-child(2) { flex: 1; font-weight: 600; }
.np-link__arrow { color: var(--soft); display: inline-flex; }
.np-link__arrow .resave-icon { width: 16px; height: 16px; }

.np-cta { text-align: center; }
.np-cta p { max-width: 660px; margin: 0 auto 18px; }
.np-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

@media (max-width: 760px) {
  .np-ship__grid { grid-template-columns: 1fr; }
  .np-links { grid-template-columns: 1fr; }
  .np-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .np-table, .np-table tbody, .np-table tr, .np-table td { display: block; width: 100%; }
  .np-table tr { margin-bottom: 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; overflow: hidden; }
  .np-table td { border-bottom: 1px solid rgba(255,255,255,.07); padding: 10px 14px; }
  .np-table td:last-child { border-bottom: 0; }
  .np-table td::before {
    content: attr(data-label); display: block; margin-bottom: 3px;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--soft);
  }
}

/* ---------- Nova Poshta page — branded action buttons --------------------
   Telegram = Re-Save blue (--blue #0D6EFD); call = Re-Save orange (--orange
   #FA5A00). Scoped to .np-page so the global .button--primary/.button--outline
   stay unchanged elsewhere. No red is used. Hover keeps the same hue. */
.np-page .button--np-tg {
  border: 1px solid rgba(13, 110, 253, 0.9);
  background: linear-gradient(135deg, var(--blue) 0%, #0b5ed7 100%);
  color: #fff;
  box-shadow:
    0 6px 18px rgba(13, 110, 253, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 0 1px rgba(13, 110, 253, 0.34);
}
.np-page .button--np-tg:hover {
  transform: translateY(-2px);
  border-color: rgba(13, 110, 253, 1);
  background: linear-gradient(135deg, #2b7bff 0%, var(--blue) 100%);
  box-shadow:
    0 10px 26px rgba(13, 110, 253, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 0 0 1px rgba(13, 110, 253, 0.46);
}
.np-page .button--np-tg .button__icon,
.np-page .button--np-tg .button__icon .resave-icon,
.np-page .button--np-tg:hover .button__icon,
.np-page .button--np-tg:hover .button__icon .resave-icon {
  color: #fff;
}

.np-page .button--np-call {
  border: 1px solid rgba(250, 90, 0, 0.9);
  background: linear-gradient(135deg, var(--orange) 0%, #e85100 100%);
  color: #fff;
  box-shadow:
    0 6px 18px rgba(250, 90, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 0 1px rgba(250, 90, 0, 0.34);
}
.np-page .button--np-call:hover {
  transform: translateY(-2px);
  border-color: rgba(250, 90, 0, 1);
  background: linear-gradient(135deg, #ff7320 0%, var(--orange) 100%);
  box-shadow:
    0 10px 26px rgba(250, 90, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 0 0 1px rgba(250, 90, 0, 0.46);
}
.np-page .button--np-call .button__icon,
.np-page .button--np-call .button__icon .resave-icon,
.np-page .button--np-call:hover .button__icon,
.np-page .button--np-call:hover .button__icon .resave-icon {
  color: #fff;
}

/* ---------- Home Hero — photo CAROUSEL + per-slide darkening mask ----------
   Active when at least one Hero Slide is set (.hero-section--has-bg). Each slide
   is a photo layer + a left→right darkening overlay (admin --hero-ov-l/c/r,
   defaults .75/.45/.15) plus an optional uniform mask veil (--hero-mask) and
   edge fades (--hero-fade-x/y). The carousel frame is clamped to the site
   container width (.site-shell) so the photo aligns to the grid (content-left ↔
   header-CTA-right), not the viewport. Slides cross-fade via the shared
   [data-carousel] engine; decorative PNG parts stay in the DOM, only hidden. */
.hero-carousel.site-shell {
  position: absolute;
  inset: 0 auto 0 50%;
  transform: translateX(-50%);
  z-index: 0;
  overflow: hidden;
  border-radius: 16px;
  pointer-events: none; /* photos are non-interactive; dots re-enable below */
}
.hero-carousel__track {
  position: absolute;
  inset: 0;
  /* Enable mouse drag (desktop) and swipe (mobile) on the photo area. The
     parent frame is pointer-events:none; this child re-enables pointer input,
     while empty areas of the content grid above pass clicks through to here. */
  pointer-events: auto;
  cursor: grab;
  touch-action: pan-y;
}
.hero-carousel__track:active {
  cursor: grabbing;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s var(--ease, ease);
}
.hero-slide.is-active {
  opacity: 1;
}
.hero-slide__photo {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center center; /* overridden inline per slide */
  background-size: cover;             /* overridden inline per slide */
  /* Optional edge feathering (horizontal/vertical fade %), 0 = hard edges. */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 var(--hero-fade-x, 0%), #000 calc(100% - var(--hero-fade-x, 0%)), transparent 100%),
    linear-gradient(180deg, transparent 0, #000 var(--hero-fade-y, 0%), #000 calc(100% - var(--hero-fade-y, 0%)), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 var(--hero-fade-x, 0%), #000 calc(100% - var(--hero-fade-x, 0%)), transparent 100%),
    linear-gradient(180deg, transparent 0, #000 var(--hero-fade-y, 0%), #000 calc(100% - var(--hero-fade-y, 0%)), transparent 100%);
  mask-composite: intersect;
}
.hero-slide__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, var(--hero-ov-l, 0.75)) 0%,
    rgba(0, 0, 0, var(--hero-ov-c, 0.45)) 50%,
    rgba(0, 0, 0, var(--hero-ov-r, 0.15)) 100%
  );
}
.hero-slide__overlay::after {
  /* Optional uniform "mask strength" veil on top of the directional gradient. */
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--hero-mask, 0));
}
.hero-carousel__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 3;
  margin: 0;
  pointer-events: auto;
}
/* The Home Hero mirrors the service-page Hero: neutral dark base + section
   padding, photo → mask → content above. */
.hero-section--has-bg {
  /* Absolutely black base; the carousel photos sit on top of it. */
  background: #000000;
  padding: 80px 0 40px;
  min-height: clamp(460px, 44vw, 660px);
  display: flex;
  align-items: center;
}
.hero-section--has-bg::before,
.hero-section--has-bg::after {
  display: none;
}
.hero-section--has-bg .hero-visual {
  display: none;
}
.hero-section--has-bg .hero-section__grid {
  position: relative;
  z-index: 2;
  grid-template-columns: 1fr;
  /* Let clicks on empty areas reach the carousel dots beneath; re-enable copy. */
  pointer-events: none;
}
.hero-section--has-bg .hero-copy {
  max-width: 560px;
  pointer-events: auto;
}
/* Tablet — mirrors the service Hero's reduced padding. */
@media (max-width: 1024px) {
  .hero-section--has-bg {
    padding: 56px 0 30px;
    min-height: clamp(420px, 52vw, 560px);
  }
}
/* Mobile — tighter padding + the mask auto-strengthens (extra vertical veil).
   The admin-chosen per-slide object-position still applies (inline on __photo). */
@media (max-width: 640px) {
  .hero-section--has-bg {
    padding: 40px 0 24px;
    min-height: clamp(420px, 96vw, 540px);
  }
  .hero-carousel.site-shell {
    border-radius: 12px;
  }
  .hero-slide__overlay {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.58) 100%),
      linear-gradient(
        90deg,
        rgba(0, 0, 0, var(--hero-ov-l, 0.75)) 0%,
        rgba(0, 0, 0, var(--hero-ov-c, 0.45)) 50%,
        rgba(0, 0, 0, var(--hero-ov-r, 0.15)) 100%
      );
  }
  .hero-section--has-bg .hero-copy {
    max-width: 100%;
  }
  /* Keep mobile clean — the carousel still auto-rotates without dots. */
  .hero-carousel__dots {
    display: none;
  }
}

/* v3.32 final override: hover moves service cards only, never scales them. */
.service-card.service-card--landing:hover,
.has-js .service-card.service-card--landing:hover {
  transform: translateY(-4px) !important;
}

/* =====================================================================
   v3.61 — Touch devices: instant tap, no janky sticky hover.
   On a phone :hover is triggered by the tap and STICKS until the page
   unloads, so the big scale(1.08) + heavy box-shadow repaint while the
   next page is still loading — that is the "jerky 3-step grow + 1s hang"
   the user reported. On touch we drop the sticky hover entirely and give
   a crisp, GPU-cheap :active press feedback instead, so a tap feels
   immediate. Mouse / trackpad devices (hover: hover) keep the full
   lift effect untouched.
   ===================================================================== */
@media (hover: none) {
  .service-card:hover,
  .has-js .service-card:hover,
  .service-card.service-card--landing:hover,
  .has-js .service-card.service-card--landing:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  .service-card:hover::before { opacity: 0 !important; }
  .service-card:hover .service-card__icon {
    transform: none !important;
  }
  .service-card {
    will-change: auto !important;
    transition: transform .07s ease-out, border-color .12s ease-out,
                background .12s ease-out !important;
  }
  /* Immediate press feedback — transform/opacity only (compositor-cheap). */
  .service-card:active {
    transform: scale(.97) !important;
    border-color: rgba(250, 90, 0, .6) !important;
    background: linear-gradient(145deg, rgba(250, 90, 0, .12), rgba(10, 25, 45, .86)) !important;
  }
  .service-card:active .service-card__icon { color: var(--orange-hot) !important; }
}

/* ===== Mobile nav: dim backdrop + scroll lock (standard mobile UX) ===== */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(2, 6, 14, .55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}
body.is-nav-open .nav-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* Lock the page behind the open menu (JS pins top to preserve scroll position). */
body.is-nav-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}
/* The scroll-to-top button must not float over the open menu. */
body.is-nav-open .resave-totop {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
@media (min-width: 921px) {
  .nav-backdrop { display: none; }
}

/* "Всі послуги" hero: align the ReSave chip to the right edge (per request). */
.services-landing__hero .service-hero__bg {
  background-position: 100% center !important;
}

/* ===== Article "Quick answer" (⚡ Швидка відповідь) ===== */
.article-quick-answer {
  margin: 0 0 clamp(20px, 3vw, 30px);
  padding: clamp(16px, 2.4vw, 22px) clamp(18px, 2.6vw, 26px);
  border: 1px solid rgba(13, 110, 253, .28);
  border-left: 3px solid var(--orange, #FA5A00);
  border-radius: 14px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(250, 90, 0, .10), transparent 42%),
    linear-gradient(150deg, rgba(13, 110, 253, .10), rgba(8, 18, 34, .55));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.article-quick-answer__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.article-quick-answer__icon {
  font-size: 1.1rem;
  line-height: 1;
  filter: drop-shadow(0 0 10px rgba(250, 90, 0, .5));
}
.article-quick-answer__label {
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #ffb27a;
}
.article-quick-answer__text {
  margin: 0;
  color: rgba(236, 243, 255, .92);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.65;
}
@media (max-width: 768px) {
  .article-quick-answer { padding: 14px 16px; border-radius: 12px; }
  .article-quick-answer__text { font-size: clamp(.95rem, 3.4vw, 1.05rem); }
}

/* =====================================================================
   HERO — DEFINITIVE MOBILE LAYOUT (v3.90). Kept LAST so it wins source order.

   ROOT CAUSE of the overlapping buttons (measured via CDP at 390px):
   the hero text/CTA blocks carry `transform: translate(...)` offsets from the
   admin POSITION settings (e.g. subtitle +55px, actions +25px). Those are a
   DESKTOP fine-tuning feature, but `transform` shifts an element visually
   WITHOUT moving it in flow — so on mobile the subtitle dropped onto the
   consultation button and the telegram button dropped onto the edu button.

   Fix: neutralise every hero position transform on mobile, then lay the three
   buttons out as one clean vertical stack with explicit, equal gaps.
   ===================================================================== */
@media (max-width: 768px) {
  /* 1) Kill desktop position-offset transforms — the actual cause of overlaps. */
  .hero-copy .hero-badge,
  .hero-copy .hero-title,
  .hero-copy .hero-subtitle,
  .hero-copy .hero-actions,
  .hero-edu-cta,
  .hero-edu-cta .button--edu {
    transform: none !important;
  }

  /* 2) FIXED STAGE with 3 independent layers (decoupled from content):
        - .hero-section__grid is a fixed-height flex column → the carousel photo
          (position:absolute; inset:0) fills it and NO LONGER stretches when the
          text or buttons move.
        - .hero-copy grows to fill the stage; the text sits at its TOP and the
          buttons are pushed to the BOTTOM (margin-top:auto), so the photo shows
          through the empty middle.
        - edu button (separate grid item) lands right under the action buttons. */
  .hero-section__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    align-items: stretch !important;
    /* No min-height here — the grid sizes to its content so the hero background
       ends right below the buttons (see padding-bottom). The stage height lives
       on .hero-copy instead, so the buttons reach the bottom with no dead space. */
  }
  .hero-section__grid > .hero-visual  { display: none !important; }  /* hidden on mobile anyway */
  .hero-section__grid > .hero-copy    { order: 1; flex: 0 0 auto; display: flex; flex-direction: column; }
  .hero-section__grid > .hero-edu-cta { order: 2; flex: 0 0 auto; }

  /* 2b) Raise the text block: badge close under the phone numbers (small gap)
         and the title pulled up to the badge. */
  /* The section is display:flex; align-items:center on desktop, which inflates the
     grid height on mobile and leaves dead space below the buttons. Force plain block
     flow so the hero hugs its content and its background ends 12px below the last
     button. */
  .hero-section {
    display: block !important;
    min-height: 0 !important;
    padding-top: 16px !important;     /* badge ~16px below phones */
    padding-bottom: 12px !important;  /* 12px below the last button */
  }
  .hero-copy { padding-top: 0 !important; }
  /* Badge must size to its content (a pill), NOT stretch to full hero-copy width
     — the flex column above defaults to align-items:stretch, which pushed the
     badge to the screen edge. Sizing to content also lets it grow naturally when
     the RU flag slides out of the language switcher. */
  .hero-copy .hero-badge {
    margin-bottom: 8px !important;     /* title up to badge */
    align-self: flex-start !important; /* don't stretch full width */
    width: fit-content !important;
    max-width: 100% !important;
  }

  /* Hero title nudged 12px down from the badge. */
  .hero-copy .hero-title { margin-top: 12px !important; }

  /* DECOUPLE the photo from the CTA offset. The CTA offset (--hero-btn-y-m) shrinks
     the hero by reducing the subtitle gap (below), which would also shrink the
     full-bleed carousel. Compensate the carousel height by the SAME offset so its
     rendered size stays constant — the photo no longer moves when the CTA offset
     changes. (Overflow is clipped at the hero bottom.) */
  .hero-carousel {
    top: 0 !important;
    bottom: auto !important;
    height: calc(100% + var(--hero-btn-y-m, 0px)) !important;
  }

  /* Mobile hero photo is controlled from admin: X / Y / scale. */
  .hero-slide__photo {
    background-size: var(--hero-slide-mobile-size, 80% auto) !important;
    transform:
      translate(var(--hero-slide-mobile-x, var(--hero-mobile-photo-x, 0px)), var(--hero-mobile-photo-y, -152px))
      scale(var(--hero-slide-mobile-scale, var(--hero-mobile-photo-scale, 1))) !important;
    transform-origin: var(--hero-slide-mobile-origin, center center);
  }
  .hero-slide[data-hero-mobile-mode="left"] .hero-slide__photo {
    background-position: 0% 50% !important;
    --hero-slide-mobile-origin: left center;
  }
  .hero-slide[data-hero-mobile-mode="right"] .hero-slide__photo {
    background-position: 100% 50% !important;
    --hero-slide-mobile-origin: right center;
  }
  .hero-slide[data-hero-mobile-mode="stretch"] .hero-slide__photo {
    --hero-slide-mobile-size: cover;
  }

  /* 3) Explicit photo band between the title and the subtitle. The admin button
        offset (--hero-btn-y-m) is subtracted from this gap: a positive value
        shrinks the photo band so the subtitle+buttons rise (move up) WITHOUT
        leaving dead space below the buttons. Deterministic → the hero hugs its
        content and its background ends 12px below the last button. */
  .hero-copy .hero-subtitle {
    margin-top: max(40px, calc(clamp(170px, 38vh, 300px) - var(--hero-btn-y-m, 0px))) !important;
  }
  .hero-actions {
    margin: 12px 0 0 0 !important;   /* subtitle → consultation (small gap) */
    gap: 12px !important;            /* consultation → telegram */
    width: 100% !important;
    max-width: none !important;
    flex-wrap: wrap;
  }
  .hero-actions .button { width: 100%; }

  .hero-edu-cta {
    /* No bottom offset here anymore — the button block is moved via the subtitle
       photo-band gap (above), so the hero background ends a clean 12px below edu. */
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    justify-content: center;
    z-index: auto;
  }
  .hero-edu-cta .button--edu {
    width: 100%;
    max-width: none !important;
    min-height: 50px;
    height: auto;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    padding-block: 12px;
  }
}

/* Hotfix: mobile header keeps both phone numbers while burger is replaced by locations. */
@media (max-width: 640px) {
  .site-header .site-shell {
    width: calc(100% - 16px);
  }

  .site-header__inner {
    min-height: 92px;
    flex-wrap: wrap !important;
    align-items: center;
    gap: 6px;
    row-gap: 5px;
    padding-block: 6px;
  }

  .brand {
    order: 10 !important;
    flex: 0 0 clamp(112px, 34vw, 142px) !important;
    max-width: clamp(112px, 34vw, 142px) !important;
    min-width: 0;
    gap: 12px;
  }

  .brand__name {
    line-height: 1 !important;
  }

  .brand__logo {
    min-height: 0;
    max-width: 100% !important;
  }

  .brand__logo-img {
    max-width: 100% !important;
    max-height: clamp(30px, 9vw, 38px) !important;
  }

  .brand__caption {
    max-width: 100% !important;
    overflow: hidden;
    font-size: clamp(.46rem, 1.85vw, .56rem) !important;
    line-height: 1.04;
    letter-spacing: 0;
  }

  .brand__caption-1,
  .brand__caption-2 {
    display: block;
    padding-left: 0;
  }

  .brand__caption-1::after {
    content: "";
  }

  .header-mobile-locations {
    order: 20 !important;
    display: grid !important;
    flex: 1 1 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    min-width: 0;
    max-width: none !important;
    margin-left: 0;
  }

  .header-mobile-location {
    grid-template-columns: 11px minmax(0, 1fr);
    min-height: 42px;
    gap: 3px;
    padding: 5px 4px;
    border-radius: 8px;
  }

  .header-mobile-location__icon .resave-icon,
  .header-mobile-location__icon svg {
    width: 11px;
    height: 11px;
  }

  .header-mobile-location strong {
    font-size: .66rem;
    line-height: 1.04;
  }

  .header-mobile-location small {
    font-size: .5rem;
    line-height: 1.05;
  }

  .header-contacts {
    order: 30 !important;
    display: flex !important;
    flex: 0 0 100%;
    justify-content: center;
    align-items: center;
    gap: clamp(8px, 3.2vw, 16px);
    margin-top: 0;
    padding-top: 6px;
    border-top: 1px solid rgba(125, 159, 205, .16);
  }

  .header-phone {
    flex: 0 1 auto;
    min-width: 0;
    gap: 7px;
    font-size: .82rem;
  }

  .header-phone__icon {
    width: 22px;
    height: 22px;
    font-size: .78rem;
  }

  .header-phone strong {
    font-size: .82rem;
    line-height: 1.05;
  }

  .header-phone small {
    display: none;
    font-size: .52rem;
    line-height: 1.05;
  }

  .nav-toggle {
    display: none !important;
  }
}

@media (max-width: 374px) {
  .brand {
    flex-basis: clamp(98px, 30vw, 112px) !important;
    max-width: clamp(98px, 30vw, 112px) !important;
  }

  .brand__logo-img {
    max-height: 30px !important;
  }

  .brand__caption {
    font-size: .44rem !important;
  }

  .header-mobile-location {
    min-height: 40px;
    grid-template-columns: 10px minmax(0, 1fr);
    padding-inline: 3px;
  }

  .header-mobile-location__icon .resave-icon,
  .header-mobile-location__icon svg {
    width: 10px;
    height: 10px;
  }

  .header-mobile-location strong {
    font-size: .62rem;
  }

  .header-mobile-location small {
    font-size: .48rem;
  }

  .header-phone__icon {
    width: 20px;
    height: 20px;
  }

  .header-phone strong {
    font-size: .76rem;
  }

  .header-phone small {
    display: none;
  }
}

/* Hotfix: compact mobile locations, readable brand. */
@media (max-width: 640px) {
  .site-header__inner {
    min-height: 94px;
    gap: 6px;
    row-gap: 6px;
  }

  .brand {
    flex: 0 0 clamp(116px, 34vw, 146px) !important;
    max-width: clamp(116px, 34vw, 146px) !important;
  }

  .brand__logo-img {
    max-height: clamp(30px, 8.5vw, 40px) !important;
  }

  .brand__caption {
    font-size: clamp(.54rem, 2vw, .68rem) !important;
    line-height: 1.04;
  }

  .header-mobile-locations {
    display: flex !important;
    flex: 1 1 0 !important;
    justify-content: flex-end;
    align-items: stretch;
    gap: 6px;
    max-width: none !important;
  }

  .header-mobile-location {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    justify-content: center;
    width: max-content;
    max-width: 100%;
    min-height: 42px;
    gap: 5px;
    padding: 5px 6px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid rgba(250, 90, 0, .38);
    box-shadow: 0 0 8px rgba(250, 90, 0, .12), inset 0 0 6px rgba(250, 90, 0, .05);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  }

  .header-mobile-location:active {
    border-color: rgba(250, 90, 0, .65);
    background: rgba(250, 90, 0, .09);
    box-shadow: 0 0 12px rgba(250, 90, 0, .22), inset 0 0 7px rgba(250, 90, 0, .08);
  }

  .header-mobile-location__icon {
    display: none;
  }

  .header-mobile-location strong {
    font-size: .72rem;
    line-height: 1.05;
  }

  .header-mobile-location small {
    display: block;
    font-size: .62rem;
    line-height: 1.04;
    white-space: nowrap;
  }
}

@media (max-width: 374px) {
  .brand {
    flex-basis: clamp(112px, 34vw, 124px) !important;
    max-width: clamp(112px, 34vw, 124px) !important;
  }

  .brand__logo-img {
    max-height: 34px !important;
  }

  .brand__caption {
    font-size: .56rem !important;
  }

  .header-mobile-location {
    max-width: none;
    min-height: 35px;
    padding-inline: 6px;
  }

  .header-mobile-location strong {
    font-size: .6rem;
  }

  .header-mobile-location small {
    font-size: .44rem;
  }
}

/* =====================================================================
   MOBILE v4.48 — full-screen selling Hero + 2-up compact services grid.
   Appended last so it wins the cascade. Scoped to <=640px ONLY; desktop
   and tablet are untouched. dvh makes the Hero fill the real visible
   viewport on phones (the sticky header is ~118-134px tall).
   ===================================================================== */
@media (max-width: 640px) {
  /* ---------- HERO: fill the first screen, balanced selling block ----------
     Overrides the content-hug layout (.hero-section{display:block;min-height:0})
     and the fixed photo-band gap. The copy becomes a flex column that spreads
     badge → title → subtitle → CTA → quick-contact across the full viewport,
     with the carousel photo as a full-bleed background behind it. */
  /* Content-driven height: the Hero hugs its copy and ends exactly 20px below
     the last button. Moving the buttons (via --hero-btn-push margin) stretches
     or shrinks the Hero while that 20px bottom gap stays constant. */
  .hero-section--has-bg {
    display: block !important;
    min-height: 0 !important;
    padding: 14px 0 20px !important;
  }
  .hero-section--has-bg .hero-section__grid {
    display: block !important;
    width: 100%;
  }
  .hero-section--has-bg .hero-copy {
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    gap: clamp(14px, 4vw, 24px);
  }
  /* The button block is the last visible element, so its bottom + the 20px
     section padding define the Hero bottom. Its vertical move (admin "Усі 3
     кнопки ↕") is applied as margin-top by the engine, which drags the Hero. */
  /* Drop the big fixed photo-band gap — space-between now owns the rhythm. */
  .hero-section--has-bg .hero-copy .hero-subtitle { margin-top: 0 !important; }
  .hero-section--has-bg .hero-copy .hero-title { margin-top: 6px !important; }
  .hero-section--has-bg .hero-copy .hero-badge { margin-bottom: 0 !important; }
  /* Full-bleed cover photo so it fills the tall hero (band tuning used 80% +
     a -152px upward shift). Neutralise the vertical shift; keep admin X/scale. */
  .hero-section--has-bg .hero-slide__photo {
    /* "contain" = the whole photo is shown, centred, never stretched across the
       hero. "cover" = full-bleed fill. Switchable from the Mobile Hero panel. */
    background-size: var(--hero-mobile-photo-fit, contain) !important;
    background-repeat: no-repeat !important;
    background-position: center var(--hero-mobile-photo-posy, 50%) !important;
    filter: brightness(var(--hero-mobile-photo-brightness, 1)) !important;
    transform: translate(var(--hero-mobile-photo-x, 0px), var(--hero-mobile-photo-y, 0px))
               scale(var(--hero-mobile-photo-scale, 1)) !important;
  }

  /* ---------- HOME SERVICES: 2 compact, near-square cards per row ----------
     Scoped with :not(.service-card--landing) so the richer "Всі послуги"
     archive cards (image + horizontal content) keep their own layout. ------ */
  .services-grid:not(.services-landing__grid) {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .service-card:not(.service-card--landing) {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-content: center !important;
    text-align: center !important;
    gap: 8px !important;
    padding: 16px 10px !important;
    min-height: 120px !important;
  }
  .service-card:not(.service-card--landing) > span { width: 100%; min-width: 0; }
  .service-card:not(.service-card--landing) .service-card__icon { margin: 0 auto !important; }
  .service-card:not(.service-card--landing) strong {
    font-size: clamp(.8rem, 3.4vw, .95rem) !important;
    line-height: 1.18 !important;
    overflow-wrap: anywhere;
  }
  .service-card:not(.service-card--landing) small {
    margin-top: 4px !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 8px;
  }
}

/* =====================================================================
   MOBILE v4.54 — compact service-page summary card + hide-on-scroll
   header. Scoped to <=640px ONLY; desktop and tablet are untouched.
   ===================================================================== */
@media (max-width: 640px) {
  /* --- Central service card: ~5% narrower each side, ~tighter bottom --- */
  .service-hero .service-summary {
    width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .service-summary--premium {
    padding: 18px 18px 14px !important;
    border-radius: 16px !important;
  }
  .service-summary__heading h2 { font-size: 1.16rem !important; }
  .service-summary__prices { gap: 2px 0 !important; }
  .service-summary__prices div { padding: 4px 0 !important; }
  .service-summary__price { font-size: 1.5rem !important; }
  .service-summary__photo {
    width: min(176px, 70%) !important;
    margin: 8px auto 2px !important;
  }
  .service-summary__warranty { margin-top: 10px !important; padding-top: 10px !important; }
  .service-summary__features {
    margin-top: 10px !important;
    padding-top: 10px !important;
    gap: 8px !important;
  }
  /* CTA now lives at the very bottom of the card; the hero-copy actions below
     would just duplicate it on mobile, so hide that duplicate set. */
  .service-hero__actions { display: none !important; }
  .service-summary__cta { margin: 12px 0 0 !important; gap: 8px !important; }

  /* --- Header: smooth hide on scroll-down, reveal on scroll-up --- */
  .site-header {
    transition: transform .32s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
  }
  .site-header.is-hidden {
    transform: translateY(-100%);
  }
}

/* =====================================================================
   MOBILE v4.58 — premium Hero photo framing. A deliberate vertical
   gradient (dark at the badge/title, a clear window over the photo,
   dark again under the buttons) plus a soft vignette make the image
   read as intentional, professional imagery instead of a flat stretch.
   <=640px only; desktop/tablet untouched.
   ===================================================================== */
@media (max-width: 640px) {
  .hero-section--has-bg .hero-slide__overlay {
    background:
      linear-gradient(180deg,
        rgba(3, 8, 20, .86) 0%,
        rgba(3, 8, 20, .42) 26%,
        rgba(3, 8, 20, .22) 50%,
        rgba(3, 8, 20, .55) 78%,
        rgba(3, 8, 20, .92) 100%),
      radial-gradient(135% 64% at 50% 44%, transparent 38%, rgba(3, 8, 20, .5) 100%) !important;
  }
}

/* =====================================================================
   MOBILE v4.63 — "Всі послуги" archive as a tidy 2-up grid. Compact
   vertical cards: photo on top, centered title + price below. The icon,
   arrow and description are hidden so two cards sit harmoniously per row
   without oversized text/photos. <=640px only; desktop/tablet untouched.
   ===================================================================== */
@media (max-width: 640px) {
  .services-landing__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .service-card--landing .service-card__content {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    text-align: center !important;
    gap: 5px !important;
    padding: 10px 9px 12px !important;
  }
  .service-card--landing .service-card__icon,
  .service-card--landing .service-card__arrow,
  .service-card--landing em { display: none !important; }
  .service-card--landing .service-card__body { gap: 3px !important; }
  .service-card--landing strong {
    font-size: .88rem !important;
    line-height: 1.18 !important;
    overflow-wrap: break-word;
  }
  .service-card--landing .service-card__price {
    justify-content: center !important;
    margin-top: 2px !important;
    gap: 2px 8px !important;
  }
  .service-card--landing .service-card__price span { font-size: .76rem !important; }
}

/* =====================================================================
   MOBILE v4.68 — home "Статті" preview as a 2-up compact grid (image +
   title), like the services grid, to save vertical space on the home
   screen. <=640px only; desktop/tablet untouched.
   ===================================================================== */
@media (max-width: 640px) {
  .articles-preview__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .articles-preview__grid .archive-card--article {
    padding: 8px !important;
    gap: 8px !important;
  }
  /* Compact: keep the photo + title, drop the excerpt and "Читати далі". */
  .articles-preview__grid .archive-card--article > p,
  .articles-preview__grid .archive-card--article .archive-card__more {
    display: none !important;
  }
  .articles-preview__grid .archive-card--article h3,
  .articles-preview__grid .archive-card--article h2 {
    font-size: .86rem !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    overflow-wrap: break-word;
  }
  .articles-preview__grid .archive-card--article .archive-card__image {
    aspect-ratio: 16 / 10;
    border-radius: 10px;
  }
}

/* Home "Статті": always a 2-up grid so the 4 latest form a clean 2×2 with no
   lonely card / empty gap (overrides the inherited 3-col archive grid). */
.articles-preview__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}