@import url('https://fonts.googleapis.com/css2?family=Cabin:wght@400;700&family=Open+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;600;700&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;500;600;700&display=swap");
@font-face {
  font-family: "Rajdhani";
  src: url("../fonts/rajdhani-400-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Rajdhani";
  src: url("../fonts/rajdhani-500-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Rajdhani";
  src: url("../fonts/rajdhani-600-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Rajdhani";
  src: url("../fonts/rajdhani-700-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Flaticon";
  src: url("../fonts/flaticon.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
  font-display: block;
}

:root {
  --blue: #0c5adb;
  --blue-light: #2371f0;
  --navy: #0b1b35;
  --text: #232323;
  --muted: #7a7a7a;
  --border: #e5e5e5;
  --header-height: 105px;
  --content-width: 1170px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: #fff;
  color: var(--text);
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}

body.menu-open {
  overflow: hidden;
}

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

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

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 9999;
  padding: 10px 16px;
  color: #fff;
  background: var(--blue);
  transform: translateY(-160%);
  transition: transform 0.2s ease;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--header-height);
  background: #fff;
  transition: box-shadow 0.25s ease;
}

.site-header.is-scrolled {
  box-shadow: 0 4px 20px rgba(18, 31, 54, 0.1);
}

.header-inner {
  width: min(var(--content-width), calc(100% - 36px));
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.site-logo {
  flex: 0 0 auto;
  line-height: 0;
}

.site-logo img {
  width: 166px;
  height: 42px;
  object-fit: contain;
}

.primary-navigation {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.nav-list,
.nav-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list {
  display: flex;
  align-items: stretch;
}

.nav-list > li {
  position: relative;
  min-height: var(--header-height);
  display: flex;
  align-items: center;
}

.nav-list > li > a {
  position: relative;
  padding: 41px 18px 39px;
  color: #2b2b2b;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 25px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.25s ease;
}

.nav-list > li > a::after {
  position: absolute;
  right: 18px;
  bottom: 29px;
  left: 18px;
  height: 2px;
  content: "";
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}

.nav-list > li:hover > a,
.nav-list > li:focus-within > a,
.nav-list > li.current-menu-item > a {
  color: var(--blue);
}

.nav-list > li:hover > a::after,
.nav-list > li:focus-within > a::after,
.nav-list > li.current-menu-item > a::after {
  transform: scaleX(1);
}

.chevron {
  position: relative;
  top: -1px;
  margin-left: 2px;
  font-size: 14px;
}

.submenu-toggle {
  display: none;
}

.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  width: 260px;
  padding: 10px 0 !important;
  border-top: 3px solid var(--blue);
  background: #fff;
  box-shadow: 0 10px 35px rgba(20, 35, 60, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

.submenu li {
  position: relative;
}

.submenu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 22px;
  color: #333;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  transition: color 0.2s ease, background 0.2s ease, padding 0.2s ease;
}

.submenu a:hover,
.submenu a:focus-visible {
  padding-left: 27px;
  color: var(--blue);
  background: #f6f8fc;
}

.has-submenu:hover > .submenu,
.has-submenu:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nested-submenu {
  top: -13px;
  left: calc(100% - 4px);
}

.submenu-arrow {
  font-size: 22px;
  line-height: 1;
}

.header-contact {
  display: none;
  margin-left: 16px;
  padding: 10px 26px;
  border-radius: 3px;
  color: #fff;
  background: var(--blue);
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
}

.menu-toggle {
  display: none;
  width: 46px;
  height: 42px;
  margin-left: auto;
  padding: 9px;
  border: 0;
  border-radius: 3px;
  background: var(--blue);
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  margin: 5px 0;
  background: #fff;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.hero-slider {
  position: relative;
  height: 90vh;
  min-height: 650px;
  max-height: 940px;
  overflow: hidden;
  color: #fff;
  background: #10182a;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.65s ease, visibility 0.65s;
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.hero-background,
.hero-overlay,
.hero-inner {
  position: absolute;
  inset: 0;
}

.hero-background {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.015);
  transition: transform 5.6s ease-out;
}

.hero-slide.is-active .hero-background {
  transform: scale(1.06);
}

.hero-overlay {
  background: rgba(10, 15, 25, 0.66);
}

.hero-inner {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 4rem;
  text-align: center;
}

.hero-content {
  width: min(66%, 1040px);
  opacity: 0;
  transform: translateY(35px);
}

.hero-slide.is-active .hero-content {
  animation: heroContentIn 0.85s 0.12s ease forwards;
}

@keyframes heroContentIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-content h1,
.hero-content h2 {
  margin: 0 0 18px;
  color: #fff;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: clamp(44px, 3.5em, 62px);
  font-weight: 600;
  line-height: 1.12;
}

.hero-content p {
  max-width: 1020px;
  margin: 0 auto 31px;
  color: #fff;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.45;
}

.hero-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 43px;
  padding: 11px 29px 10px;
  border: 1px solid var(--blue);
  border-radius: 3px;
  color: #fff;
  background: var(--blue);
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.hero-inner:hover .hero-button,
.hero-inner:focus-visible .hero-button {
  border-color: var(--blue-light);
  background: var(--blue-light);
  transform: translateY(-2px);
}

.slider-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 48px;
  height: 58px;
  padding: 10px;
  border: 0;
  color: #fff;
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
  opacity: 0.9;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.slider-arrow:hover,
.slider-arrow:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  opacity: 1;
}

.slider-arrow svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.slider-prev {
  left: 0;
}

.slider-next {
  right: 0;
}

.slider-dots {
  position: absolute;
  bottom: 21px;
  left: 50%;
  z-index: 6;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
}

.slider-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.62);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.slider-dot.is-active {
  background: #111;
  transform: scale(1.15);
}

.feature-cards {
  position: relative;
  z-index: 10;
  margin-top: -115px;
  padding-bottom: 68px;
}

.feature-grid {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.flip-card {
  min-width: 0;
  min-height: 320px;
  perspective: 1000px;
  outline: none;
}

.flip-card-inner {
  position: relative;
  min-height: 320px;
  transition: transform 0.6s cubic-bezier(0.2, 0.85, 0.4, 1.275);
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner,
.flip-card.is-flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card:focus-visible {
  outline: 3px solid rgba(12, 90, 219, 0.45);
  outline-offset: 4px;
}

.flip-face {
  position: absolute;
  inset: 0;
  min-height: 320px;
  padding: 27px 32px 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  border-radius: 4px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flip-front {
  z-index: 2;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.flip-back {
  color: #fff;
  background: var(--blue);
  transform: rotateY(180deg);
}

.flip-back::before {
  position: absolute;
  top: -112px;
  right: -112px;
  width: 224px;
  height: 224px;
  border-radius: 50%;
  content: "";
  background: #fff;
  opacity: 0.1;
}

.feature-icon {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-bottom: 26px;
  color: var(--blue);
  font-family: "Flaticon";
  font-size: 55px;
  font-style: normal;
  line-height: 1;
}

.flaticon-headset::before {
  content: "\f117";
}

.flaticon-computer::before {
  content: "\f112";
}

.flaticon-android::before {
  content: "\f10f";
}

.flaticon-network::before {
  content: "\f18f";
}

.flip-back .feature-icon {
  color: #fff;
  font-size: 45px;
}

.flip-card.animate-front-icon .flip-front .feature-icon,
.flip-card.animate-back-icon .flip-back .feature-icon {
  animation: feature-icon-active-bounce 2s cubic-bezier(0.34, 1.2, 0.64, 1);
  will-change: transform;
}

@keyframes feature-icon-active-bounce {
  0%,
  100% {
    transform: translateY(0);
  }

  13% {
    transform: translateY(-11px);
  }

  25% {
    transform: translateY(3px);
  }

  38% {
    transform: translateY(-8px);
  }

  50% {
    transform: translateY(2px);
  }

  63% {
    transform: translateY(-5px);
  }

  75% {
    transform: translateY(1px);
  }

  88% {
    transform: translateY(-2px);
  }
}

.apple-icon {
  width: 45px;
  height: 45px;
  border: 3px solid currentColor;
  border-radius: 50%;
  color: #fff;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: 0;
}

.apple-icon::before {
  position: absolute;
  top: 10px;
  left: 11px;
  width: 18px;
  height: 20px;
  border-radius: 50% 50% 45% 45%;
  content: "";
  background: currentColor;
}

.flip-face h2 {
  position: relative;
  z-index: 1;
  margin: 0 0 9px;
  color: #292929;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.18;
}

.flip-face p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #777;
  font-size: 16px;
  line-height: 1.6;
}

.flip-back h2,
.flip-back p {
  color: #fff;
}

.flip-action,
.flip-back a {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: 20px 0 0;
  border: 0;
  color: #111;
  background: transparent;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
}

.flip-action span,
.flip-back a span {
  display: inline-block;
  margin-left: 5px;
  font-size: 23px;
  line-height: 0;
  transition: transform 0.25s ease;
}

.flip-action:hover span,
.flip-back a:hover span {
  transform: translateX(6px);
}

.flip-back a {
  color: #fff;
}

.service-list {
  background: #fff;
}

.service-row {
  width: min(var(--content-width), calc(100% - 40px));
  margin: 0 auto;
  padding: 12px 0 109px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 65px;
  align-items: center;
  scroll-margin-top: calc(var(--header-height) + 20px);
}

.service-copy {
  max-width: 545px;
}

.section-kicker {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--blue);
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.service-copy h2 {
  margin: 0 0 19px;
  color: #232323;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: clamp(34px, 3.1vw, 47px);
  font-weight: 700;
  line-height: 1.08;
}

.service-copy h2 span {
  color: var(--blue);
}

.service-copy > p {
  margin: 0 0 17px;
  color: var(--muted);
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  line-height: 1.75;
}

.check-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  margin: 8px 0;
  padding-left: 26px;
  color: var(--muted);
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  line-height: 1.55;
}

.check-list li::before {
  position: absolute;
  top: 0.14em;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  content: "✓";
  color: #fff;
  background: var(--blue);
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.detail-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 13px 28px 12px;
  border: 1px solid var(--blue);
  border-radius: 3px;
  color: #fff;
  background: var(--blue);
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  transition: background 0.25s ease, transform 0.25s ease;
}

.detail-button span {
  font-size: 22px;
  line-height: 0.7;
  transition: transform 0.25s ease;
}

.detail-button:hover,
.detail-button:focus-visible {
  background: var(--blue-light);
  transform: translateY(-2px);
}

.detail-button:hover span,
.detail-button:focus-visible span {
  transform: translateX(4px);
}

.service-media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.service-media img {
  width: 100%;
  max-height: 520px;
  object-fit: contain;
}

.compact-media img {
  width: 87%;
  max-width: 520px;
}

.page-hero {
  position: relative;
  min-height: 375px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background: var(--navy);
}

.page-hero-background,
.page-hero-overlay {
  position: absolute;
  inset: 0;
}

.page-hero-background {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.02);
  animation: pageHeroZoom 9s ease-out both;
}

.services-hero .page-hero-background {
  background-image: url("../images/services/services-banner.jpg");
}

.about-hero .page-hero-background {
  background-image: url("../images/magamrol-hardver.jpg");
  background-position: center 47%;
}

.contact-hero .page-hero-background {
  background-image: url("../images/magamrol-hardver.jpg");
  background-position: center 47%;
}

.page-hero-overlay {
  background: linear-gradient(90deg, rgba(5, 18, 39, 0.84), rgba(6, 29, 65, 0.58));
}

.page-hero-content {
  position: relative;
  z-index: 1;
  width: min(var(--content-width), calc(100% - 40px));
  padding: 65px 0;
  text-align: center;
  animation: pageHeroContentIn 0.8s 0.08s ease both;
}

.page-hero-content > p {
  margin: 0 0 4px;
  color: #fff;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.page-hero-content h1 {
  margin: 0 0 12px;
  color: #fff;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: clamp(48px, 6vw, 68px);
  font-weight: 700;
  line-height: 1.08;
}

.breadcrumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.88);
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 15px;
}

.breadcrumbs a {
  transition: color 0.2s ease;
}

.breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
  color: #9ec4ff;
}

@keyframes pageHeroZoom {
  from {
    transform: scale(1.02);
  }
  to {
    transform: scale(1.085);
  }
}

@keyframes pageHeroContentIn {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.services-catalog {
  padding: 96px 0 105px;
  background: #f7f9fc;
}

.catalog-grid {
  width: min(var(--content-width), calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

.catalog-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e7eaf0;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(19, 42, 78, 0.07);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.catalog-card:hover,
.catalog-card:focus-within {
  border-color: rgba(12, 90, 219, 0.28);
  box-shadow: 0 18px 38px rgba(19, 42, 78, 0.14);
  transform: translateY(-7px);
}

.catalog-image-link {
  position: relative;
  height: 235px;
  display: block;
  overflow: visible;
  background: #dfe6f1;
}

.catalog-image-link::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(to top, rgba(6, 24, 51, 0.22), transparent 48%);
  pointer-events: none;
  transition: background 0.3s ease;
}

.catalog-image-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s ease;
}

.catalog-card:hover .catalog-image-link img,
.catalog-card:focus-within .catalog-image-link img {
  transform: scale(1.055);
}

.catalog-card-icon {
  position: absolute;
  right: 28px;
  bottom: -29px;
  z-index: 2;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 4px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: var(--blue);
  box-shadow: 0 6px 18px rgba(12, 90, 219, 0.28);
  transition: background 0.3s ease, transform 0.3s ease;
}

.catalog-card-icon::before {
  content: "\f112";
  font-family: "Flaticon";
  font-size: 25px;
  font-style: normal;
  line-height: 1;
}

.catalog-card:hover .catalog-card-icon,
.catalog-card:focus-within .catalog-card-icon {
  background: var(--blue-light);
  transform: rotate(8deg);
}

.catalog-card-body {
  min-height: 255px;
  padding: 39px 28px 28px;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.catalog-card-body h2 {
  margin: 0 0 11px;
  color: #202839;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.16;
}

.catalog-card-body h2 a {
  transition: color 0.2s ease;
}

.catalog-card-body h2 a:hover,
.catalog-card-body h2 a:focus-visible {
  color: var(--blue);
}

.catalog-card-body p {
  margin: 0 0 22px;
  color: #6f7682;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 15.5px;
  line-height: 1.72;
}

.catalog-more {
  width: max-content;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--blue);
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.catalog-more span {
  font-size: 24px;
  line-height: 0.7;
  transition: transform 0.2s ease;
}

.catalog-more:hover span,
.catalog-more:focus-visible span {
  transform: translateX(4px);
}

.service-detail-section {
  padding: 90px 0 105px;
  background: #f7f9fc;
}

.service-detail-layout {
  width: min(var(--content-width), calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 275px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.service-detail-sidebar {
  position: sticky;
  top: calc(var(--header-height) + 24px);
  overflow: hidden;
  border: 1px solid #e4e8ef;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(19, 42, 78, 0.06);
}

.service-detail-sidebar h2 {
  margin: 0;
  padding: 22px 24px 19px;
  color: #fff;
  background: var(--blue);
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.15;
}

.service-detail-sidebar ul {
  margin: 0;
  padding: 7px 0;
  list-style: none;
}

.service-detail-sidebar li + li {
  border-top: 1px solid #edf0f4;
}

.service-detail-sidebar li a {
  position: relative;
  padding: 12px 37px 11px 20px;
  display: block;
  color: #343b47;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  transition: color 0.2s ease, background 0.2s ease, padding 0.2s ease;
}

.service-detail-sidebar li a::after {
  position: absolute;
  top: 50%;
  right: 20px;
  content: "›";
  color: #a1a8b4;
  font-size: 22px;
  line-height: 1;
  transform: translateY(-52%);
}

.service-detail-sidebar li a:hover,
.service-detail-sidebar li a:focus-visible,
.service-detail-sidebar li a.is-current {
  padding-left: 24px;
  color: var(--blue);
  background: #f2f6fd;
}

.service-detail-sidebar li a.is-current::after {
  color: var(--blue);
}

.sidebar-price-link {
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  background: var(--navy);
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  transition: background 0.2s ease;
}

.sidebar-price-link span {
  font-size: 25px;
  line-height: 1;
}

.sidebar-price-link:hover,
.sidebar-price-link:focus-visible {
  background: #132b50;
}

.service-detail-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e4e8ef;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(19, 42, 78, 0.08);
}

.service-detail-cover {
  position: relative;
  height: clamp(310px, 38vw, 455px);
  display: block;
  overflow: hidden;
  background: #dce4ef;
}

.service-detail-cover::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(to top, rgba(7, 24, 50, 0.16), transparent 45%);
  pointer-events: none;
}

.service-detail-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.service-detail-card:hover .service-detail-cover img {
  transform: scale(1.025);
}

.service-detail-download::before {
  position: absolute;
  right: 25px;
  bottom: 24px;
  z-index: 2;
  padding: 9px 14px;
  border-radius: 3px;
  content: "AnyDesk letöltése";
  color: #fff;
  background: var(--blue);
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
}

.service-gallery {
  padding: 28px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  background: #eef3f9;
}

.service-gallery img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 5px 16px rgba(13, 33, 64, 0.12);
}

.service-rich-content {
  padding: 45px 48px 50px;
  color: #5f6671;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  line-height: 1.78;
}

.service-rich-content h2,
.service-rich-content h3,
.service-rich-content h4,
.service-rich-content h5 {
  color: #202839;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  line-height: 1.2;
}

.service-rich-content h2 {
  margin: 0 0 18px;
  font-size: clamp(31px, 4vw, 40px);
}

.service-rich-content h3 {
  margin: 30px 0 13px;
  font-size: 27px;
}

.service-rich-content h4 {
  margin: 0 0 18px;
  font-size: 30px;
}

.service-rich-content h5 {
  margin: 28px 0 12px;
  font-size: 23px;
}

.service-rich-content p {
  margin: 0 0 18px;
}

.service-rich-content ul,
.service-rich-content ol {
  margin: 0 0 22px;
  padding-left: 24px;
}

.service-rich-content li {
  margin: 7px 0;
  padding-left: 3px;
}

.service-rich-content strong {
  color: #343b47;
}

.service-rich-content a:not(.detail-button):not(.detail-text-link) {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.service-rich-content hr {
  height: 1px;
  margin: 30px 0;
  border: 0;
  background: #e5e9ef;
}

.service-rich-content .tzs-it-managed > div {
  background: #f8fafe;
  box-shadow: 0 5px 15px rgba(19, 42, 78, 0.05);
}

.service-detail-actions {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid #e5e9ef;
  display: flex;
  align-items: center;
  gap: 24px;
}

.service-detail-actions .detail-button {
  margin-top: 0;
}

.detail-text-link {
  color: var(--blue);
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
}

.anydesk-button {
  margin-bottom: 8px;
}

.pricing-section {
  padding: 88px 0 105px;
  background: #f7f9fc;
}

.pricing-intro,
.pricing-table-wrap {
  width: min(var(--content-width), calc(100% - 40px));
  margin-right: auto;
  margin-left: auto;
}

.pricing-intro {
  margin-bottom: 38px;
  text-align: center;
}

.pricing-intro h2 {
  margin: 0 0 10px;
  color: #202839;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: clamp(38px, 5vw, 50px);
  font-weight: 700;
  line-height: 1.1;
}

.pricing-intro p {
  margin: 0;
  color: #707782;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
}

.pricing-table-wrap {
  overflow-x: auto;
  border: 1px solid #dfe4ec;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(19, 42, 78, 0.08);
}

.pricing-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  color: #525b68;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

.pricing-table thead th {
  padding: 20px 24px;
  color: #fff;
  background: var(--navy);
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 19px;
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
}

.pricing-table thead th:last-child {
  width: 245px;
}

.pricing-table tbody th,
.pricing-table tbody td {
  padding: 16px 24px;
  border-top: 1px solid #e5e9ef;
  vertical-align: top;
  text-align: left;
}

.pricing-table tbody th {
  color: #343b47;
  font-weight: 700;
}

.pricing-table tbody td:last-child {
  color: #26334a;
  font-weight: 600;
  white-space: normal;
}

.pricing-table tbody tr:not(.price-group):hover {
  background: #f8fafe;
}

.pricing-table .price-group th {
  padding: 17px 24px;
  color: #fff;
  background: var(--blue);
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
}

.legal-section {
  padding: 88px 0 105px;
  background: #f7f9fc;
}

.legal-card {
  width: min(var(--content-width), calc(100% - 40px));
  margin: 0 auto;
  padding: 48px;
  border: 1px solid #e1e6ee;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(19, 42, 78, 0.08);
}

.legal-intro {
  margin-bottom: 38px;
  text-align: center;
}

.legal-intro h2 {
  margin: 0;
  color: #202839;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: clamp(38px, 5vw, 50px);
  font-weight: 700;
  line-height: 1.1;
}

.legal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 28px;
}

.legal-group {
  overflow: hidden;
  border: 1px solid #dfe4ec;
  border-radius: 5px;
  background: #fff;
}

.legal-group h3 {
  margin: 0;
  padding: 19px 24px;
  color: #fff;
  background: var(--navy);
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 23px;
  font-weight: 700;
}

.legal-list {
  margin: 0;
  color: #525b68;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

.legal-list > div {
  padding: 15px 22px;
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  gap: 18px;
  border-top: 1px solid #e5e9ef;
}

.legal-list > div:first-child {
  border-top: 0;
}

.legal-list dt {
  color: #343b47;
  font-weight: 700;
}

.legal-list dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.legal-list a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.privacy-section {
  padding: 88px 0 105px;
  background: #f5f8fc;
}

.privacy-shell {
  width: min(var(--content-width), calc(100% - 40px));
  margin: 0 auto;
}

.privacy-intro {
  padding: 43px 46px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 265px;
  gap: 45px;
  align-items: center;
  border: 1px solid #dfe5ee;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(19, 42, 78, 0.08);
}

.privacy-intro h2 {
  margin: 0 0 13px;
  color: #202839;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: clamp(38px, 5vw, 50px);
  font-weight: 700;
  line-height: 1.06;
}

.privacy-intro p {
  max-width: 760px;
  margin: 0;
  color: #636d7a;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.75;
}

.privacy-version {
  padding: 24px 25px;
  display: grid;
  gap: 7px;
  border-left: 4px solid var(--blue);
  border-radius: 4px;
  background: #f0f5fd;
  color: #5f6976;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 13px;
}

.privacy-version span {
  color: var(--blue);
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.privacy-version strong {
  color: #26334a;
  font-size: 15px;
}

.privacy-version button {
  width: max-content;
  margin-top: 9px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  color: var(--blue);
  background: transparent;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.privacy-highlights {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.privacy-highlights article {
  min-height: 150px;
  padding: 27px 27px 25px;
  border: 1px solid #dfe5ee;
  border-top: 4px solid var(--blue);
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(19, 42, 78, 0.05);
}

.privacy-highlights strong,
.privacy-highlights span {
  display: block;
}

.privacy-highlights strong {
  margin-bottom: 9px;
  color: #26334a;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 21px;
  font-weight: 700;
}

.privacy-highlights span {
  color: #69727e;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.65;
}

.privacy-toc {
  margin-top: 26px;
  padding: 32px 38px 34px;
  border-radius: 6px;
  color: #d9e5f8;
  background: linear-gradient(135deg, #0b1b35 0%, #102c59 100%);
  box-shadow: 0 12px 30px rgba(11, 27, 53, 0.14);
}

.privacy-toc h2 {
  margin: 0 0 20px;
  color: #fff;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 28px;
  font-weight: 700;
}

.privacy-toc ol {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 35px;
  counter-reset: privacy-toc;
  list-style: none;
}

.privacy-toc li {
  position: relative;
  min-width: 0;
  padding-left: 29px;
  counter-increment: privacy-toc;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
}

.privacy-toc li::before {
  position: absolute;
  top: 0;
  left: 0;
  content: counter(privacy-toc, decimal-leading-zero);
  color: #78a7f5;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
}

.privacy-toc a {
  color: inherit;
  transition: color 0.2s ease;
}

.privacy-toc a:hover,
.privacy-toc a:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.privacy-content {
  margin-top: 28px;
  display: grid;
  gap: 24px;
}

.privacy-block {
  padding: 42px 45px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 28px;
  scroll-margin-top: 110px;
  border: 1px solid #dfe5ee;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 8px 25px rgba(19, 42, 78, 0.055);
}

.privacy-number {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--blue);
  box-shadow: 0 7px 18px rgba(12, 90, 219, 0.22);
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 19px;
  font-weight: 700;
}

.privacy-block h2,
.privacy-block h3,
.privacy-authority h3,
.privacy-processor-grid h3 {
  color: #202839;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
}

.privacy-block h2 {
  margin: 4px 0 20px;
  font-size: clamp(30px, 4vw, 37px);
  line-height: 1.12;
}

.privacy-block h3 {
  margin: 29px 0 12px;
  font-size: 24px;
  line-height: 1.2;
}

.privacy-block p,
.privacy-block li,
.privacy-processor-grid p {
  color: #5e6875;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 15.5px;
  line-height: 1.76;
}

.privacy-block p {
  margin: 0 0 17px;
}

.privacy-block p:last-child {
  margin-bottom: 0;
}

.privacy-block a,
.privacy-processor-grid a {
  color: var(--blue);
  font-weight: 600;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.privacy-block ul {
  margin: 16px 0 21px;
  padding-left: 23px;
}

.privacy-block li {
  margin-bottom: 8px;
  padding-left: 4px;
}

.privacy-note {
  margin-top: 23px;
  padding: 19px 22px;
  border-left: 4px solid var(--blue);
  border-radius: 3px;
  color: #4f5c6d;
  background: #f0f5fd;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.68;
}

.privacy-data-list {
  margin: 0 0 22px;
  overflow: hidden;
  border: 1px solid #dfe4ec;
  border-radius: 5px;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 15px;
}

.privacy-data-list > div {
  padding: 14px 19px;
  display: grid;
  grid-template-columns: 155px minmax(0, 1fr);
  gap: 18px;
  border-top: 1px solid #e5e9ef;
}

.privacy-data-list > div:first-child {
  border-top: 0;
}

.privacy-data-list dt {
  color: #303a48;
  font-weight: 700;
}

.privacy-data-list dd {
  min-width: 0;
  margin: 0;
  color: #5e6875;
  overflow-wrap: anywhere;
}

.privacy-table-wrap {
  margin: 23px 0;
  overflow-x: auto;
  border: 1px solid #dfe4ec;
  border-radius: 5px;
}

.privacy-table {
  width: 100%;
  border-collapse: collapse;
  color: #5e6875;
  background: #fff;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.66;
}

.privacy-table th,
.privacy-table td {
  padding: 16px 19px;
  border-top: 1px solid #e5e9ef;
  vertical-align: top;
  text-align: left;
}

.privacy-table tr:first-child th,
.privacy-table tr:first-child td {
  border-top: 0;
}

.privacy-table th {
  width: 185px;
  color: #26334a;
  background: #f4f7fb;
  font-weight: 700;
}

.privacy-processor-grid {
  margin: 23px 0 25px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.privacy-processor-grid article {
  padding: 24px 25px;
  border: 1px solid #dfe4ec;
  border-radius: 5px;
  background: #f8fafe;
}

.privacy-processor-grid h3 {
  margin: 0 0 11px;
  font-size: 22px;
}

.privacy-processor-grid p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.65;
}

.privacy-rights-list {
  padding: 0 !important;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  list-style: none;
}

.privacy-rights-list li {
  position: relative;
  margin: 0;
  padding: 16px 17px 16px 47px;
  border: 1px solid #e1e6ee;
  border-radius: 4px;
  background: #f9fbfe;
  font-size: 14.5px;
}

.privacy-rights-list li::before {
  position: absolute;
  top: 17px;
  left: 17px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  content: "✓";
  border-radius: 50%;
  color: #fff;
  background: var(--blue);
  font-size: 11px;
  font-weight: 700;
}

.privacy-authority {
  margin: 24px 0;
  padding: 25px 28px;
  border-radius: 5px;
  color: #dbe6f7;
  background: var(--navy);
}

.privacy-authority h3 {
  margin: 0 0 12px;
  color: #fff;
  font-size: 23px;
}

.privacy-authority p {
  margin: 0;
  color: #dbe6f7;
  font-size: 14.5px;
}

.privacy-authority a {
  color: #8ab5ff;
}

.privacy-updated {
  margin-top: 27px !important;
  padding-top: 20px;
  border-top: 1px solid #e2e7ee;
  color: #4c5765 !important;
}

.about-section {
  padding: 88px 0 105px;
  background: #f7f9fc;
}

.about-card {
  width: min(1040px, calc(100% - 40px));
  margin: 0 auto;
  padding: 54px 58px 58px;
  border: 1px solid #e1e6ee;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(19, 42, 78, 0.08);
}

.about-intro {
  max-width: 820px;
  margin: 0 auto 30px;
  text-align: center;
}

.about-intro h2 {
  margin: 0 0 18px;
  color: #202839;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: clamp(38px, 5vw, 50px);
  font-weight: 700;
  line-height: 1.08;
}

.about-lead {
  margin: 0;
  color: #26334a;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.7;
}

.about-copy {
  color: #626b77;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.78;
}

.about-copy p {
  margin: 0 0 18px;
}

.about-copy strong {
  color: #343b47;
}

.about-experience {
  margin: 34px 0 38px;
  padding: 26px 30px;
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 25px;
  align-items: center;
  border-left: 5px solid var(--blue);
  border-radius: 4px;
  background: #f2f6fd;
}

.about-experience > span {
  color: var(--blue);
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.about-experience p {
  margin: 0;
  color: #56606d;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 15.5px;
  line-height: 1.72;
}

.about-experience strong {
  color: #303946;
}

.about-help h3 {
  margin: 0 0 22px;
  color: #202839;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 30px;
  font-weight: 700;
}

.about-checklist {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 26px;
  list-style: none;
}

.about-checklist li {
  position: relative;
  padding: 15px 16px 15px 48px;
  color: #58616e;
  border: 1px solid #e4e9f1;
  border-radius: 4px;
  background: #fff;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.58;
}

.about-checklist li::before {
  position: absolute;
  top: 16px;
  left: 17px;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  content: "✓";
  border-radius: 50%;
  color: #fff;
  background: var(--blue);
  font-size: 12px;
  font-weight: 700;
}

.about-actions {
  margin-top: 38px;
  padding-top: 30px;
  display: flex;
  align-items: center;
  gap: 24px;
  border-top: 1px solid #e5e9ef;
}

.about-actions .detail-button {
  margin-top: 0;
}

.contact-section {
  padding: 88px 0 82px;
  background: #f7f9fc;
}

.contact-map-card,
.contact-info-grid,
.contact-hours,
.contact-form-shell {
  width: min(var(--content-width), calc(100% - 40px));
  margin-right: auto;
  margin-left: auto;
}

.contact-map-card {
  overflow: hidden;
  border: 1px solid #e1e6ee;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(19, 42, 78, 0.08);
}

.contact-section-heading {
  padding: 32px 36px 24px;
  text-align: center;
}

.contact-section-heading h2 {
  margin: 0;
  color: #202839;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: clamp(38px, 5vw, 48px);
  font-weight: 700;
  line-height: 1.05;
}

.contact-map-wrap {
  height: 420px;
  background: #dfe6f1;
}

.contact-map-consent {
  height: 100%;
  padding: 42px;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  color: #dce7f8;
  background:
    radial-gradient(circle at 50% 22%, rgba(58, 123, 226, 0.28), transparent 34%),
    linear-gradient(135deg, #0b1b35 0%, #173767 100%);
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
}

.contact-map-consent-icon {
  width: 66px;
  height: 66px;
  margin-bottom: 18px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 30px;
  font-weight: 700;
}

.contact-map-consent h3 {
  margin: 0 0 9px;
  color: #fff;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 28px;
  font-weight: 700;
}

.contact-map-consent p {
  max-width: 650px;
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.65;
}

.contact-map-consent-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 13px 20px;
}

.contact-map-load {
  min-height: 46px;
  padding: 0 23px;
  border: 2px solid var(--blue);
  border-radius: 3px;
  color: #fff;
  background: var(--blue);
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  cursor: pointer;
}

.contact-map-consent-actions a {
  color: #a9c8f9;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-map-wrap iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.contact-map-link {
  padding: 17px 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--blue);
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.contact-map-link span {
  font-size: 24px;
  line-height: 0.8;
  transition: transform 0.2s ease;
}

.contact-map-link:hover span,
.contact-map-link:focus-visible span {
  transform: translateX(4px);
}

.contact-info-grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.contact-info-card {
  min-height: 220px;
  padding: 34px 28px 30px;
  border: 1px solid #e1e6ee;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(19, 42, 78, 0.06);
  text-align: center;
}

.contact-info-icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 19px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--blue);
  box-shadow: 0 7px 18px rgba(12, 90, 219, 0.24);
}

.contact-info-icon svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.contact-info-card h2 {
  margin: 0 0 9px;
  color: #202839;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 25px;
  font-weight: 700;
}

.contact-info-card p {
  margin: 0;
  color: #626b77;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 15.5px;
  line-height: 1.7;
}

.contact-info-card a {
  color: var(--blue);
  font-weight: 600;
}

.contact-info-card a:hover,
.contact-info-card a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-hours {
  margin-top: 24px;
  padding: 18px 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 30px;
  border-radius: 5px;
  color: #e9f1ff;
  background: var(--navy);
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 15px;
}

.contact-hours strong {
  color: #fff;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 21px;
}

.contact-form-section {
  padding: 94px 0 108px;
  background: #fff;
}

.contact-form-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  overflow: hidden;
  border: 1px solid #e1e6ee;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 15px 42px rgba(19, 42, 78, 0.11);
}

.contact-form-media {
  min-height: 660px;
  overflow: hidden;
  background: #dfe6f1;
}

.contact-form-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 55% center;
}

.contact-form-panel {
  padding: 48px 50px 44px;
}

.contact-form-panel h2 {
  margin: 0 0 10px;
  color: #202839;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: clamp(38px, 5vw, 48px);
  font-weight: 700;
  line-height: 1.08;
}

.contact-form-intro {
  margin: 0 0 27px;
  color: #6a7380;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 15.5px;
  line-height: 1.7;
}

.contact-form {
  display: grid;
  gap: 18px;
}

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

.contact-form > label,
.contact-field-row label {
  display: grid;
  gap: 7px;
  color: #343d49;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 14.5px;
  font-weight: 600;
}

.contact-form label > span {
  color: #777f8a;
  font-size: 13px;
  font-weight: 400;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  border: 1px solid #dce2eb;
  border-radius: 4px;
  color: #333c48;
  background: #f8fafe;
  font: inherit;
  outline: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.contact-form input[type="text"],
.contact-form input[type="email"] {
  height: 47px;
  padding: 0 14px;
}

.contact-form textarea {
  min-height: 145px;
  padding: 12px 14px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(12, 90, 219, 0.11);
}

.contact-consent {
  grid-template-columns: 19px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: start;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.55;
}

.contact-consent input {
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  accent-color: var(--blue);
}

.contact-consent a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact-submit {
  width: max-content;
  min-height: 48px;
  padding: 0 27px;
  border: 2px solid var(--blue);
  border-radius: 3px;
  color: #fff;
  background: var(--blue);
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.contact-submit:hover,
.contact-submit:focus-visible {
  color: var(--blue);
  background: #fff;
  transform: translateY(-2px);
}

.contact-form-note,
.contact-form-status {
  margin: 0;
  color: #7b838e;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
}

.contact-form-status:not(:empty) {
  padding: 10px 12px;
  border-left: 3px solid var(--blue);
  color: #334052;
  background: #edf4ff;
}

.header-contact[aria-current="page"] {
  background: #063f9e;
  box-shadow: 0 0 0 3px rgba(12, 90, 219, 0.15);
}

.site-footer {
  padding: 87px 0 0;
  color: #ccd0d7;
  background: radial-gradient(circle at 82% 8%, rgba(28, 89, 180, 0.23), transparent 34%), #0b1b35;
}

.footer-grid {
  width: min(var(--content-width), calc(100% - 40px));
  margin: 0 auto;
  padding-bottom: 92px;
  display: grid;
  grid-template-columns: 1.25fr 0.8fr 0.9fr 1fr;
  gap: 52px;
}

.footer-brand {
  width: max-content;
  margin-bottom: 22px;
  padding: 8px 13px;
  display: block;
  border-radius: 4px;
  background: #fff;
}

.footer-brand img {
  margin: 0;
}

.site-footer p {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.65;
}

.site-footer h2 {
  margin: 0 0 24px;
  color: #fff;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
}

.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer li + li {
  margin-top: 9px;
}

.site-footer li a {
  color: #fff;
  transition: color 0.2s ease, padding 0.2s ease;
}

.site-footer li a::before {
  margin-right: 10px;
  content: "›";
  color: var(--blue);
  font-size: 20px;
  vertical-align: -1px;
}

.site-footer li a:hover,
.site-footer li a:focus-visible {
  color: var(--blue-light);
}

.footer-more {
  color: #fff;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-weight: 600;
}

.footer-contact-details a,
.footer-bottom a {
  color: #fff;
  transition: color 0.2s ease;
}

.footer-contact-details a:hover,
.footer-contact-details a:focus-visible,
.footer-bottom a:hover,
.footer-bottom a:focus-visible {
  color: #8eb9ff;
}

.footer-bottom {
  width: min(var(--content-width), calc(100% - 40px));
  min-height: 74px;
  margin: 0 auto;
  padding: 16px 0 10px;
  border-top: 1px solid #1b2d4d;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 34px;
}

.footer-bottom p {
  margin: 0;
  color: #fff;
  font-size: 14px;
}

.footer-owner-link {
  font-weight: 600;
}

.footer-bottom-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif;
  font-size: 14px;
}

.footer-bottom-links a {
  font-weight: 600;
  white-space: nowrap;
}

.footer-separator {
  color: #6f7e97;
}

.social-links {
  display: flex;
  gap: 10px;
}

.social-links a {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: #334562;
  font-size: 12px;
  font-weight: 700;
  transition: background 0.2s ease;
}

.social-links a:hover,
.social-links a:focus-visible {
  background: var(--blue);
}

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 800;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 4px;
  color: #fff;
  background: var(--blue);
  box-shadow: 0 8px 20px rgba(12, 90, 219, 0.28);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.motion-ready .reveal {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.motion-ready .reveal.from-left {
  transform: translateX(-44px);
}

.motion-ready .reveal.from-right {
  transform: translateX(44px);
}

.motion-ready .reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

.feature-grid .reveal:nth-child(2) {
  transition-delay: 0.08s;
}

.feature-grid .reveal:nth-child(3) {
  transition-delay: 0.16s;
}

.feature-grid .reveal:nth-child(4) {
  transition-delay: 0.24s;
}

.catalog-grid .reveal:nth-child(3n + 2) {
  transition-delay: 0.08s;
}

.catalog-grid .reveal:nth-child(3n + 3) {
  transition-delay: 0.16s;
}

@media (max-width: 1180px) {
  .header-inner {
    width: calc(100% - 30px);
  }

  .nav-list > li > a {
    padding-right: 11px;
    padding-left: 11px;
    font-size: 15px;
  }

  .nav-list > li > a::after {
    right: 11px;
    left: 11px;
  }
}

@media (max-width: 1024px) {
  :root {
    --header-height: 82px;
  }

  .site-logo img {
    width: 158px;
    height: auto;
  }

  .menu-toggle {
    display: block;
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .primary-navigation {
    position: fixed;
    top: var(--header-height);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    padding: 10px 20px 35px;
    display: block;
    overflow-y: auto;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  }

  .primary-navigation.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-list {
    display: block;
  }

  .nav-list > li {
    min-height: 0;
    display: block;
    border-bottom: 1px solid #ececec;
  }

  .nav-list > li > a {
    display: block;
    padding: 14px 45px 13px 5px;
    font-size: 17px;
  }

  .nav-list > li > a::after,
  .chevron {
    display: none;
  }

  .submenu-toggle {
    position: absolute;
    top: 5px;
    right: 0;
    z-index: 2;
    width: 40px;
    height: 38px;
    display: block;
    border: 0;
    color: #222;
    background: #f4f6fa;
    cursor: pointer;
    transition: transform 0.2s ease;
  }

  .submenu {
    position: static;
    width: 100%;
    max-height: 0;
    padding: 0 !important;
    border-top: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    overflow: hidden;
    transform: none;
    transition: max-height 0.35s ease;
  }

  .has-submenu:hover > .submenu,
  .has-submenu:focus-within > .submenu {
    transform: none;
  }

  .submenu-open > .submenu {
    max-height: 700px;
  }

  .submenu-open > .submenu-toggle {
    transform: rotate(180deg);
  }

  .submenu a {
    padding: 10px 18px;
    background: #f8f9fb;
  }

  .nested-submenu {
    max-height: none;
    padding-left: 15px !important;
  }

  .submenu-nested-item > a .submenu-arrow {
    display: none;
  }

  .header-contact {
    width: 100%;
    margin: 18px 0 0;
    text-align: center;
  }

  .hero-slider {
    height: 76vh;
    min-height: 570px;
    max-height: none;
  }

  .hero-inner {
    padding-bottom: 0;
  }

  .hero-content {
    width: min(82%, 760px);
  }

  .hero-content h1,
  .hero-content h2 {
    font-size: 43px;
  }

  .hero-content p {
    font-size: 19px;
  }

  .feature-cards {
    margin-top: 45px;
  }

  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-row {
    padding: 0 1rem 3.8rem;
    gap: 42px;
  }

  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catalog-grid .reveal:nth-child(n) {
    transition-delay: 0s;
  }

  .catalog-grid .reveal:nth-child(even) {
    transition-delay: 0.08s;
  }

  .service-detail-layout {
    grid-template-columns: 1fr;
  }

  .service-detail-sidebar {
    position: static;
  }

  .service-detail-sidebar ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-detail-sidebar li {
    border-top: 1px solid #edf0f4;
  }

  .service-detail-sidebar li:nth-child(odd) {
    border-right: 1px solid #edf0f4;
  }

  .service-detail-sidebar li:first-child,
  .service-detail-sidebar li:nth-child(2) {
    border-top: 0;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .privacy-intro {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .privacy-version {
    max-width: 330px;
  }

  .privacy-rights-list,
  .privacy-processor-grid {
    grid-template-columns: 1fr;
  }

  .about-checklist {
    grid-template-columns: 1fr;
  }

  .contact-form-shell {
    grid-template-columns: 1fr;
  }

  .contact-form-media {
    min-height: 390px;
  }
}

@media (max-width: 767px) {
  :root {
    --header-height: 74px;
  }

  .header-inner {
    width: calc(100% - 28px);
  }

  .site-logo img {
    width: 142px;
  }

  .hero-slider {
    height: 58vh;
    min-height: 490px;
  }

  .hero-content {
    width: calc(100% - 60px);
  }

  .hero-content h1,
  .hero-content h2 {
    margin-bottom: 13px;
    font-size: 29px;
  }

  .hero-content p {
    margin-bottom: 25px;
    font-size: 16px;
    line-height: 1.4;
  }

  .hero-button {
    padding: 10px 22px 9px;
    font-size: 14px;
  }

  .slider-arrow {
    width: 38px;
    height: 50px;
    padding: 8px;
  }

  .slider-dots {
    bottom: 15px;
  }

  .feature-cards {
    margin-top: 30px;
    padding-bottom: 28px;
  }

  .feature-grid {
    width: calc(100% - 30px);
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .flip-face {
    padding-right: 27px;
    padding-left: 27px;
  }

  .service-row {
    width: calc(100% - 20px);
    padding: 1rem 0 3rem;
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .service-copy {
    max-width: none;
  }

  .service-copy h2 {
    font-size: 36px;
  }

  .service-media img {
    max-height: 420px;
  }

  .page-hero {
    min-height: 305px;
  }

  .page-hero-content {
    padding: 50px 0;
  }

  .page-hero-content h1 {
    font-size: clamp(34px, 9vw, 45px);
  }

  .services-catalog {
    padding: 62px 0 72px;
  }

  .catalog-grid {
    width: calc(100% - 30px);
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .catalog-grid .reveal:nth-child(n) {
    transition-delay: 0s;
  }

  .catalog-image-link {
    height: 230px;
  }

  .catalog-card-body {
    min-height: 0;
    padding: 38px 24px 25px;
  }

  .service-detail-section {
    padding: 58px 0 70px;
  }

  .service-detail-layout {
    width: calc(100% - 30px);
    gap: 24px;
  }

  .service-detail-sidebar ul {
    display: block;
  }

  .service-detail-sidebar li,
  .service-detail-sidebar li:nth-child(odd),
  .service-detail-sidebar li:nth-child(2) {
    border-top: 1px solid #edf0f4;
    border-right: 0;
  }

  .service-detail-sidebar li:first-child {
    border-top: 0;
  }

  .service-detail-cover {
    height: 245px;
  }

  .service-detail-download::before {
    right: 15px;
    bottom: 15px;
    font-size: 14px;
  }

  .service-gallery {
    padding: 16px;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .service-gallery img {
    height: 235px;
  }

  .service-rich-content {
    padding: 34px 24px 38px;
    font-size: 15.5px;
  }

  .service-rich-content h3 {
    font-size: 24px;
  }

  .service-rich-content h4 {
    font-size: 27px;
  }

  .service-detail-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 17px;
  }

  .pricing-section {
    padding: 60px 0 72px;
  }

  .pricing-intro,
  .pricing-table-wrap {
    width: calc(100% - 30px);
  }

  .pricing-intro {
    margin-bottom: 28px;
  }

  .pricing-table {
    min-width: 690px;
    font-size: 14.5px;
  }

  .pricing-table thead th,
  .pricing-table tbody th,
  .pricing-table tbody td {
    padding-right: 18px;
    padding-left: 18px;
  }

  .legal-section {
    padding: 60px 0 72px;
  }

  .legal-card {
    width: calc(100% - 30px);
    padding: 32px 20px;
  }

  .legal-intro {
    margin-bottom: 28px;
  }

  .legal-list > div {
    padding: 14px 18px;
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .privacy-section {
    padding: 60px 0 72px;
  }

  .privacy-shell {
    width: calc(100% - 30px);
  }

  .privacy-intro {
    padding: 32px 22px;
  }

  .privacy-intro p {
    font-size: 15px;
  }

  .privacy-version {
    max-width: none;
  }

  .privacy-highlights {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .privacy-highlights article {
    min-height: 0;
    padding: 23px;
  }

  .privacy-toc {
    padding: 28px 23px 30px;
  }

  .privacy-toc ol {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .privacy-block {
    padding: 31px 21px 34px;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .privacy-number {
    width: 46px;
    height: 46px;
  }

  .privacy-block h2 {
    margin-top: 0;
  }

  .privacy-data-list > div {
    padding: 13px 16px;
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .privacy-table th,
  .privacy-table td {
    padding: 14px 15px;
  }

  .privacy-table th {
    width: 145px;
  }

  .privacy-rights-list {
    grid-template-columns: 1fr;
  }

  .privacy-authority {
    padding: 22px;
  }

  .about-section {
    padding: 60px 0 72px;
  }

  .about-card {
    width: calc(100% - 30px);
    padding: 34px 22px 38px;
  }

  .about-intro {
    margin-bottom: 24px;
  }

  .about-lead {
    font-size: 16.5px;
  }

  .about-experience {
    padding: 22px;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .about-experience > span {
    font-size: 42px;
  }

  .about-help h3 {
    font-size: 27px;
  }

  .about-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 17px;
  }

  .contact-section {
    padding: 60px 0 62px;
  }

  .contact-map-card,
  .contact-info-grid,
  .contact-hours,
  .contact-form-shell {
    width: calc(100% - 30px);
  }

  .contact-section-heading {
    padding: 27px 20px 20px;
  }

  .contact-map-wrap {
    height: 315px;
  }

  .contact-map-consent {
    padding: 28px 20px;
  }

  .contact-map-consent-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 13px;
    font-size: 25px;
  }

  .contact-map-consent h3 {
    font-size: 24px;
  }

  .contact-map-consent p {
    margin-bottom: 15px;
    font-size: 13px;
  }

  .contact-map-load {
    min-height: 43px;
    padding: 0 17px;
    font-size: 14px;
  }

  .contact-info-grid {
    grid-template-columns: 1fr;
    gap: 17px;
  }

  .contact-info-card {
    min-height: 0;
    padding: 28px 22px;
  }

  .contact-hours {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .contact-form-section {
    padding: 60px 0 72px;
  }

  .contact-form-media {
    min-height: 260px;
  }

  .contact-form-panel {
    padding: 34px 22px 38px;
  }

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

  .contact-submit {
    width: 100%;
  }

  .site-footer {
    padding-top: 68px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 42px;
    padding-bottom: 65px;
  }

  .footer-bottom {
    padding: 20px 0;
    flex-direction: column;
    gap: 18px;
    text-align: center;
  }

  .footer-bottom-links {
    justify-content: center;
    gap: 9px 16px;
  }

  .back-to-top {
    right: 15px;
    bottom: 15px;
  }
}

@media (max-width: 420px) {
  .hero-content {
    width: calc(100% - 44px);
  }

  .hero-content h1,
  .hero-content h2 {
    font-size: 26px;
  }

  .hero-content p {
    font-size: 15px;
  }

  .slider-arrow {
    width: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .motion-ready .reveal {
    opacity: 1;
    transform: none;
  }
}

@media print {
  .site-header,
  .page-hero,
  .privacy-highlights,
  .privacy-toc,
  .privacy-version button,
  .site-footer,
  .back-to-top,
  .skip-link {
    display: none !important;
  }

  .motion-ready .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  body,
  .privacy-section {
    color: #000;
    background: #fff !important;
  }

  .privacy-section {
    padding: 0;
  }

  .privacy-shell {
    width: 100%;
  }

  .privacy-intro,
  .privacy-block {
    padding: 20px 0;
    display: block;
    border: 0;
    border-bottom: 1px solid #bbb;
    border-radius: 0;
    box-shadow: none;
  }

  .privacy-intro {
    padding-top: 0;
  }

  .privacy-version {
    margin-top: 14px;
    padding: 12px 16px;
  }

  .privacy-number {
    width: auto;
    height: auto;
    margin-bottom: 7px;
    display: block;
    color: #333;
    background: transparent;
    box-shadow: none;
  }

  .privacy-table-wrap,
  .privacy-data-list,
  .privacy-processor-grid article,
  .privacy-note,
  .privacy-authority,
  .privacy-rights-list li {
    break-inside: avoid;
    box-shadow: none;
  }

  .privacy-authority {
    color: #000;
    background: #eee;
  }

  .privacy-authority h3,
  .privacy-authority p,
  .privacy-authority a {
    color: #000;
  }

  a {
    color: #000 !important;
  }
}


/* ===== TzsWeb 2026-08 FINAL OVERRIDES ===== */
body { font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif; font-weight: 500; }
button, input, textarea, select { font-family: inherit; }

.top-contact-bar { background:#0b2c69; color:#fff; font-family:"Roboto Condensed", "Roboto Condensed", Arial, sans-serif; }
.top-contact-inner { width:min(var(--content-width), calc(100% - 36px)); min-height:38px; margin:0 auto; display:flex; align-items:center; gap:28px; font-size:14px; font-weight:600; }
.top-contact-inner a { display:inline-flex; align-items:center; gap:8px; color:#fff; }
.top-contact-icon { font-size:14px; line-height:1; opacity:.95; }

.pricing-note { margin-top:24px; padding:22px 24px; border-left:4px solid var(--blue); border-radius:4px; background:#f2f7ff; box-shadow:0 5px 18px rgba(12,90,219,.08); }
.pricing-note h3 { margin:0 0 8px; color:var(--navy); font-size:23px; }
.pricing-note p { margin:0; }
.pricing-table small { display:inline-block; margin-top:3px; line-height:1.35; color:#666; }

.contact-info-card h2 { line-height:1.2; }
.contact-hours { flex-wrap:wrap; row-gap:7px; }

@media (max-width: 767px) {
  .top-contact-bar { display:none; }
  .site-header { height:74px; }
  .header-inner { width:calc(100% - 24px); }
  .site-logo img { width:142px; height:auto; }
  .hero-slider { height:auto; min-height:520px; max-height:none; }
  .hero-inner { padding:34px 28px 44px; }
  .hero-content { width:100%; max-width:100%; }
  .hero-content h1, .hero-content h2 { max-width:100%; overflow-wrap:anywhere; font-size:clamp(28px, 8.3vw, 36px); line-height:1.1; }
  .hero-content p { max-width:100%; font-size:17px; line-height:1.42; }
  .slider-arrow { width:34px; height:46px; }
  .slider-prev { left:2px; }
  .slider-next { right:2px; }

  .feature-grid { width:calc(100% - 24px); }
  .flip-card, .flip-card-inner, .flip-face { min-height:300px; }
  .flip-face { padding:26px 24px 24px; }
  .feature-svg { width:50px; height:50px; }

  .service-row, .service-row.media-first { display:grid; grid-template-columns:1fr; }
  .service-row .service-copy, .service-row.media-first .service-copy { order:1; }
  .service-row .service-media, .service-row.media-first .service-media { order:2; }
  .service-copy h2 { font-size:clamp(31px, 9vw, 38px); line-height:1.05; overflow-wrap:anywhere; }
  .service-copy p, .service-copy li { overflow-wrap:anywhere; }
  .service-media, .service-media img { width:100%; max-width:100%; }

  .pricing-table-wrap { overflow:visible; }
  .pricing-table, .pricing-table tbody, .pricing-table tr, .pricing-table td, .pricing-table th { display:block; width:100%; }
  .pricing-table thead { display:none; }
  .pricing-table tr { margin:0 0 12px; border:1px solid #e4e8ef; border-radius:5px; overflow:hidden; background:#fff; }
  .pricing-table tr.price-group { border:0; border-radius:0; margin:26px 0 10px; }
  .pricing-table tr.price-group th { padding:11px 14px; background:var(--navy); color:#fff; }
  .pricing-table td, .pricing-table th { box-sizing:border-box; border:0 !important; padding:12px 14px; }
  .pricing-table td:last-child { padding-top:9px; color:var(--blue); font-size:18px; font-weight:700; background:#f7f9fc; }
  .pricing-note { padding:18px; }

  .contact-info-grid { grid-template-columns:1fr; }
  .contact-info-card h2 { font-size:25px; }
  .contact-hours { align-items:flex-start; flex-direction:column; gap:7px; padding:20px; }
}

/* Egységes, teljes magyar ékezetkészletet használó rendszerbetű. */
html body,
html body :where(h1,h2,h3,h4,h5,h6,p,a,span,li,dt,dd,button,input,textarea,select,label,strong,small,th,td) {
  font-family: "Roboto Condensed", "Roboto Condensed", Arial, sans-serif !important;
}


/* ===== TzsWeb FINAL – eredeti ComRepair tipográfia ===== */
:root{--tzsweb-font:"Roboto Condensed",Arial,sans-serif;}
html,body,button,input,textarea,select,option,label,
h1,h2,h3,h4,h5,h6,p,a,li,dt,dd,th,td,strong,small,em,b,
.main-menu,.main-menu a,.mobile-menu,.mobile-menu a,
.pricing-table,.pricing-table th,.pricing-table td,
.site-footer,.site-footer a,.site-footer p,.site-footer h2 {
  font-family:var(--tzsweb-font)!important;
}
/* Az ikonbetűk maradjanak az eredeti ikonfonton. */
[class^="flaticon-"]::before,[class*=" flaticon-"]::before,.feature-icon::before{font-family:"Flaticon"!important;}


/* =========================================================
   ORIGINAL COMREPAIR MENU - EXACT VISUAL MATCH
   Menu only. No other page elements are changed.
   ========================================================= */
.primary-navigation,
.primary-navigation .nav-list,
.primary-navigation .nav-list li,
.primary-navigation .nav-list a,
.primary-navigation .submenu,
.primary-navigation .submenu li,
.primary-navigation .submenu a,
.primary-navigation .submenu-toggle,
.menu-toggle {
  font-family: "Roboto", Arial, sans-serif !important;
}

.primary-navigation .nav-list > li > a {
  font-family: "Roboto", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-style: normal !important;
  line-height: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
}

.primary-navigation .submenu a {
  font-family: "Roboto", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
}

@media (max-width: 991px) {
  .primary-navigation .nav-list > li > a {
    font-size: 17px !important;
    line-height: 24px !important;
  }
  .primary-navigation .submenu a {
    font-size: 15px !important;
    line-height: 22px !important;
  }
}

/* === TzsWeb top contact: original ComRepair Open Sans === */
.top-contact-bar {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}
.top-contact-inner,
.top-contact-inner a {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.375 !important;
  letter-spacing: 0 !important;
}
.top-contact-icon {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

/* =========================================================
   TzsWeb FINAL TYPOGRAPHY — copied from the original ComRepair theme
   Original theme variables:
   $font-family-base: 'Open Sans'
   $font-family-display: 'Cabin'
   Typography only. Icons/layout/content are intentionally untouched.
   ========================================================= */
:root {
  --comrepair-font-base: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
  --comrepair-font-display: "Cabin", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

html,
body {
  font-family: var(--comrepair-font-base) !important;
  font-weight: 400;
}

html body :where(h1,h2,h3,h4,h5,h6,p,a,span,li,dt,dd,button,input,textarea,select,option,label,strong,small,em,b,th,td,address) {
  font-family: var(--comrepair-font-base) !important;
}

/* Original ComRepair heading rule: Open Sans + bold. */
html body :where(h1,h2,h3,h4,h5,h6) {
  font-weight: 700;
}

/* Original ComRepair display font is Cabin only on display/title components. */
.page-hero-content h1,
.section-heading h1,
.section-heading h2,
.section-heading h3,
.section-heading h4,
.section-heading h5,
.section-heading h6,
.call-to-act,
.call-to-act h1,
.call-to-act h2,
.call-to-act h3,
.call-to-act h4,
.call-to-act h5,
.call-to-act h6 {
  font-family: var(--comrepair-font-display) !important;
}

/* Original ComRepair primary navigation: Open Sans, 700. */
.primary-navigation,
.primary-navigation .nav-list,
.primary-navigation .nav-list li,
.primary-navigation .nav-list a,
.primary-navigation .submenu,
.primary-navigation .submenu li,
.primary-navigation .submenu a,
.primary-navigation .submenu-toggle,
.mobile-navigation,
.mobile-navigation a,
.menu-toggle {
  font-family: var(--comrepair-font-base) !important;
}

.primary-navigation .nav-list > li > a,
.primary-navigation .submenu a {
  font-family: var(--comrepair-font-base) !important;
  font-weight: 700 !important;
}

/* Original ComRepair mobile nested menu uses normal weight. */
@media (max-width: 991px) {
  .primary-navigation .submenu a,
  .mobile-navigation ul ul li > a {
    font-weight: 400 !important;
  }
}

/* Original ComRepair header info text uses the base Open Sans face. */
.top-contact-bar,
.top-contact-inner,
.top-contact-inner a,
.header-contact,
.header-contact a {
  font-family: var(--comrepair-font-base) !important;
}
.top-contact-inner,
.top-contact-inner a {
  font-weight: 400 !important;
}

/* Service cards: original theme uses base Open Sans, not the display font. */
.flip-face h2,
.flip-face p,
.flip-back a,
.catalog-card-body h2,
.catalog-card-body p,
.catalog-more,
.service-detail-sidebar h2,
.service-detail-sidebar li a,
.service-rich-content,
.service-rich-content h1,
.service-rich-content h2,
.service-rich-content h3,
.service-rich-content h4,
.service-rich-content h5,
.service-rich-content h6 {
  font-family: var(--comrepair-font-base) !important;
}

/* Preserve every existing icon font exactly as-is. */
.feature-icon,
[class^="flaticon-"],
[class*=" flaticon-"] {
  font-family: "Flaticon" !important;
}
.feature-icon::before,
[class^="flaticon-"]::before,
[class*=" flaticon-"]::before,
.catalog-card-icon::before {
  font-family: "Flaticon" !important;
}
[class^="fa-"],
[class*=" fa-"],
.fa,
[class^="fa-"]::before,
[class*=" fa-"]::before,
.fa::before {
  font-family: "FontAwesome" !important;
}

/* FINAL: ComRepair service-card typography matched to the original theme. */
.catalog-card-body h2 {
  font-family: var(--comrepair-font-base) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.0625rem !important;
  text-transform: uppercase !important;
}
.catalog-card-body p {
  font-family: var(--comrepair-font-base) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1.71429 !important;
  letter-spacing: 0 !important;
}
.catalog-more {
  font-family: var(--comrepair-font-base) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}


/* =====================================================================
   TzsWeb FINAL LOCK — 2026-08-21
   Only typography + Munkadíjak mobile stability.
   Menu/top contact remain in the already accepted ComRepair-style face.
   Content follows the narrow typography visible on the original _comrep site.
   ===================================================================== */
:root {
  --tzs-content-font: "Roboto Condensed", Arial, sans-serif;
  --tzs-menu-font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --tzs-display-font: "Cabin", "Open Sans", Arial, sans-serif;
}

/* Main content typography: match the original live ComRepair appearance. */
body,
main,
main p,
main li,
main dt,
main dd,
main table,
main th,
main td,
main label,
main input,
main textarea,
main select,
.site-footer,
.site-footer p,
.site-footer a,
.site-footer li,
.footer-more,
.catalog-card-body h2,
.catalog-card-body p,
.catalog-more,
.service-detail-sidebar h2,
.service-detail-sidebar li a,
.sidebar-price-link,
.service-rich-content,
.service-rich-content h1,
.service-rich-content h2,
.service-rich-content h3,
.service-rich-content h4,
.service-rich-content h5,
.service-rich-content h6,
.pricing-intro,
.pricing-table,
.pricing-note {
  font-family: var(--tzs-content-font) !important;
}

/* Accepted menu stays untouched visually: original-theme Open Sans. */
.primary-navigation,
.primary-navigation a,
.primary-navigation .submenu a,
.mobile-navigation,
.mobile-navigation a,
.menu-toggle {
  font-family: var(--tzs-menu-font) !important;
}
.primary-navigation .nav-list > li > a {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}
.primary-navigation .submenu a {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
}

/* Top contact row: original theme header-info proportions. */
.top-contact-bar,
.top-contact-inner,
.top-contact-inner a {
  font-family: var(--tzs-menu-font) !important;
}
.top-contact-inner,
.top-contact-inner a {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.375 !important;
  letter-spacing: 0 !important;
}

/* Original ComRepair card typography (.title + .service-preview-text). */
.catalog-card-body h2 {
  margin-bottom: 1rem !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.0625rem !important;
  text-transform: uppercase !important;
}
.catalog-card-body p {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.71429 !important;
  letter-spacing: 0 !important;
}
.catalog-more {
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}

/* Service detail typography follows the old ComRepair proportions. */
.service-detail-sidebar li a {
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}
.service-detail-sidebar h2 {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}
.service-rich-content {
  font-size: 16px !important;
  line-height: 1.71429 !important;
}
.service-rich-content h2 { font-size: 32px !important; line-height: 1.1 !important; }
.service-rich-content h3 { font-size: 28px !important; line-height: 1.1 !important; }
.service-rich-content h4 { font-size: 24px !important; line-height: 1.1 !important; }
.service-rich-content h5 { font-size: 20px !important; line-height: 1.1 !important; }
.service-rich-content h2,
.service-rich-content h3,
.service-rich-content h4,
.service-rich-content h5 { font-weight: 700 !important; }

/* Display/page titles: original theme's Cabin display family. */
.page-hero-content h1,
.section-heading h1,
.section-heading h2,
.section-heading h3,
.section-heading h4,
.section-heading h5,
.section-heading h6 {
  font-family: var(--tzs-display-font) !important;
  font-weight: 700 !important;
}

/* Munkadíjak: desktop proportions + exact content font. */
.pricing-intro h2 {
  font-family: var(--tzs-content-font) !important;
  font-weight: 700 !important;
}
.pricing-table {
  min-width: 0 !important;
  table-layout: fixed !important;
  font-size: 14px !important;
  line-height: 1.71429 !important;
}
.pricing-table thead th {
  font-family: var(--tzs-content-font) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
.pricing-table .price-group th {
  font-family: var(--tzs-content-font) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}
.pricing-table td:last-child {
  width: 245px;
  font-weight: 700 !important;
}
.pricing-table small {
  display: block !important;
  margin-top: 4px !important;
  color: #68717e !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

/* Important-info panel: same width as the price table; never full-bleed. */
.pricing-note {
  width: min(var(--content-width), calc(100% - 40px)) !important;
  max-width: var(--content-width) !important;
  margin: 30px auto 0 !important;
  padding: 28px 30px 30px !important;
  border: 1px solid #b9d8f3 !important;
  border-top: 4px solid var(--blue) !important;
  border-radius: 8px !important;
  background: #f5faff !important;
  box-shadow: 0 10px 28px rgba(19,42,78,.07) !important;
}
.pricing-note-head { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:22px; }
.pricing-note-mark { display:inline-flex; width:42px; height:42px; flex:0 0 42px; align-items:center; justify-content:center; border-radius:50%; background:var(--blue); color:#fff; font-size:24px; font-weight:700; line-height:1; }
.pricing-note-kicker { display:block; margin-bottom:2px; color:var(--blue); font-size:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.pricing-note h3 { margin:0; color:#202839; font-size:27px !important; font-weight:700 !important; line-height:1.1 !important; }
.pricing-note-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.pricing-note-item { padding:18px 20px; border:1px solid #d7e8f7; border-radius:6px; background:#fff; }
.pricing-note-item strong { display:block; margin-bottom:7px; color:#26334a; font-size:18px; font-weight:700; }
.pricing-note-item p { margin:0; color:#626d7c; font-size:14px; line-height:1.65; }

/* Preserve all icon fonts. */
.feature-icon,
.feature-icon::before,
[class^="flaticon-"],
[class*=" flaticon-"],
[class^="flaticon-"]::before,
[class*=" flaticon-"]::before,
.catalog-card-icon::before { font-family:"Flaticon" !important; }
.fa,
.fa::before,
[class^="fa-"],
[class*=" fa-"],
[class^="fa-"]::before,
[class*=" fa-"]::before { font-family:"FontAwesome" !important; }

@media (max-width: 900px) {
  .pricing-note-grid { grid-template-columns:1fr !important; }
}

/* Mobile price list: no horizontal overflow, real stacked cards. */
@media (max-width: 767px) {
  .pricing-section { overflow-x: clip !important; }
  .pricing-intro,
  .pricing-table-wrap,
  .pricing-note {
    width: calc(100% - 30px) !important;
    max-width: calc(100% - 30px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .pricing-table-wrap {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .pricing-table,
  .pricing-table tbody,
  .pricing-table tr,
  .pricing-table td,
  .pricing-table th {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .pricing-table {
    table-layout: auto !important;
    margin: 0 !important;
  }
  .pricing-table thead { display:none !important; }
  .pricing-table tr {
    margin: 0 0 12px !important;
    overflow: hidden !important;
    border: 1px solid #e4e8ef !important;
    border-radius: 6px !important;
    background: #fff !important;
  }
  .pricing-table tr.price-group {
    margin: 25px 0 10px !important;
    border: 0 !important;
    border-radius: 5px !important;
  }
  .pricing-table tr.price-group:first-child { margin-top:0 !important; }
  .pricing-table tr.price-group th {
    padding: 12px 14px !important;
    color:#fff !important;
    background:var(--blue) !important;
    font-size:17px !important;
  }
  .pricing-table td,
  .pricing-table th {
    padding: 12px 14px !important;
    border: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
  .pricing-table td:last-child {
    width:100% !important;
    padding-top:10px !important;
    color:var(--blue) !important;
    background:#f7f9fc !important;
    font-size:16px !important;
    font-weight:700 !important;
  }
  .pricing-note { padding:23px 18px 20px !important; }
  .pricing-note-head { justify-content:flex-start !important; }
  .pricing-note-item { padding:16px !important; }

  .service-rich-content { font-size:15px !important; }
  .service-rich-content h2 { font-size:28px !important; }
  .service-rich-content h3 { font-size:24px !important; }
  .service-rich-content h4 { font-size:21px !important; }
  .service-rich-content h5 { font-size:18px !important; }
}

/* FINAL typography specificity correction: every textual element inside page content uses the accepted narrow _comrep face. */
main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
main p,
main a,
main span,
main strong,
main small,
main em,
main b,
main li,
main dt,
main dd,
main button,
main label,
main input,
main textarea,
main select,
main th,
main td,
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.site-footer p,
.site-footer a,
.site-footer span,
.site-footer strong,
.site-footer small,
.pricing-note h3,
.pricing-note strong,
.pricing-note p,
.pricing-note span {
  font-family: var(--tzs-content-font) !important;
}

/* Keep ComRepair display treatment for page/section hero titles after the broad content rule above. */
.page-hero-content h1,
.section-heading h1,
.section-heading h2,
.section-heading h3,
.section-heading h4,
.section-heading h5,
.section-heading h6 {
  font-family: var(--tzs-display-font) !important;
}

/* Keep accepted header/menu faces after all content overrides. */
.primary-navigation,
.primary-navigation a,
.primary-navigation span,
.primary-navigation .submenu a,
.mobile-navigation,
.mobile-navigation a,
.menu-toggle,
.top-contact-bar,
.top-contact-inner,
.top-contact-inner a,
.top-contact-inner span {
  font-family: var(--tzs-menu-font) !important;
}


/* TZS SERVICES MEGA MENU - user approved reference */
@media (min-width: 1025px) {
  .services-menu-item > .services-mega {
    left: 50%;
    width: 520px;
    padding: 0 !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
    transform: translate(-50%, 10px);
  }
  .services-menu-item:hover > .services-mega,
  .services-menu-item:focus-within > .services-mega {
    transform: translate(-50%, 0);
  }
  .services-mega > .services-mega-col {
    padding: 4px 0;
  }
  .services-mega > .services-mega-col + .services-mega-col {
    border-left: 1px solid #eceff4;
  }
  .services-mega .services-mega-col > ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .services-mega a {
    min-height: 48px;
    padding: 13px 22px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
  }
}
@media (max-width: 1024px) {
  .services-mega {
    display: block;
  }
  .services-mega > .services-mega-col {
    display: block;
  }
  .services-mega > .services-mega-col > ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .services-menu-item.submenu-open > .services-mega {
    max-height: 1100px;
  }
}


/* TZS EXACT CLASSIC SERVICES FLYOUT MENU */
@media (min-width: 1025px) {
  .services-classic-item > .services-classic-menu {
    left: 0;
    width: 225px;
    padding: 0 !important;
    display: block !important;
    border-top: 0;
    transform: translateY(10px);
    box-shadow: 0 5px 18px rgba(25, 35, 55, .13);
  }

  .services-classic-item:hover > .services-classic-menu,
  .services-classic-item:focus-within > .services-classic-menu {
    transform: translateY(0);
  }

  .services-classic-menu > li {
    border-bottom: 0;
  }

  .services-classic-menu > li > a,
  .services-classic-menu .nested-submenu > li > a {
    min-height: 41px;
    padding: 11px 14px !important;
    background: #fff;
    color: #3f3f3f;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-transform: none !important;
    white-space: nowrap;
  }

  .services-classic-menu > .services-all-link > a {
    color: var(--blue);
    background: #f6f6f6;
  }

  .services-classic-menu a:hover,
  .services-classic-menu a:focus-visible,
  .services-classic-menu .submenu-nested-item:hover > a,
  .services-classic-menu .submenu-nested-item:focus-within > a {
    padding-left: 14px !important;
    color: var(--blue);
    background: #f3f3f3;
  }

  .services-classic-menu .submenu-arrow {
    margin-left: 18px;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
  }

  .services-classic-menu .nested-submenu {
    top: 0;
    left: 100%;
    width: 195px;
    padding: 0 !important;
    border-top: 0;
    transform: translateX(8px);
    box-shadow: 0 5px 18px rgba(25, 35, 55, .13);
  }

  .services-classic-menu .submenu-nested-item:hover > .nested-submenu,
  .services-classic-menu .submenu-nested-item:focus-within > .nested-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }

  .services-classic-menu .services-virus-menu {
    width: 215px;
  }
}

@media (max-width: 1024px) {
  .services-classic-menu,
  .services-classic-menu .nested-submenu {
    display: block !important;
    width: 100% !important;
  }

  .services-classic-menu .nested-submenu {
    position: static;
    max-height: 0;
    padding-left: 14px !important;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
  }

  .services-classic-menu .submenu-open > .nested-submenu {
    max-height: 700px;
  }
}

/* ===== TzsWeb KÁRTYÁK FINAL — _new/fooldal/ kompakt arányai =====
   Csak a főoldali 4 flip-kártyát érinti. */
.feature-cards .flip-card,
.feature-cards .flip-card-inner,
.feature-cards .flip-face {
  min-height: 320px !important;
}

.feature-cards .flip-face {
  padding: 24px 28px 22px !important;
}

.feature-cards .feature-icon {
  margin-bottom: 18px !important;
  font-size: 48px !important;
}

.feature-cards .flip-back .feature-icon {
  font-size: 42px !important;
}

.feature-cards .flip-face h2 {
  margin-bottom: 8px !important;
  font-size: 20px !important;
  line-height: 1.16 !important;
}

.feature-cards .flip-face p {
  font-size: 14px !important;
  line-height: 1.65 !important;
}

.feature-cards .flip-action,
.feature-cards .flip-back a {
  margin-top: auto !important;
  padding-top: 12px !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

.feature-cards .flip-action span,
.feature-cards .flip-back a span {
  font-size: 20px !important;
}

@media (max-width: 767px) {
  .feature-cards .flip-card,
  .feature-cards .flip-card-inner,
  .feature-cards .flip-face {
    min-height: 320px !important;
  }
}



/* Theme-style compact desktop dropdown chevrons */
@media (min-width: 901px) {
  .primary-navigation .nav-list > li > a .chevron {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    font-size: 0 !important;
    line-height: 0;
    vertical-align: 3px;
    transform: rotate(45deg);
    transform-origin: center;
  }
}

/* 2026-08-23 – Mobil UX: szolgáltatás-aloldalon a szolgáltatáslista ne előzze meg a kiválasztott tartalmat. Desktop/tablet változatlan. */
@media (max-width: 767px) {
  .service-detail-sidebar {
    display: none;
  }
}


/* === MUNKADÍJAK 2026-08-23: kategóriás kártyás árlista === */
.prices-page .pricing-section {
  padding: 54px 0 92px !important;
  background: #f7f9fc;
}
.prices-page .pricing-intro {
  width: min(var(--content-width), calc(100% - 40px));
  max-width: 880px;
  margin: 0 auto 34px;
  text-align: center;
}
.prices-page .pricing-intro-kicker {
  margin: 0 0 8px !important;
  color: var(--blue) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.prices-page .pricing-intro h2 {
  margin: 0 0 12px !important;
  color: #202839;
  font-family: var(--tzs-content-font) !important;
  font-size: clamp(30px, 4vw, 42px) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
}
.prices-page .pricing-intro > p:last-child {
  max-width: 760px;
  margin: 0 auto !important;
  color: #68717e;
  font-size: 15px;
  line-height: 1.65;
}
.prices-page .pricing-cards {
  box-sizing: border-box;
  display: grid;
  width: min(var(--content-width), calc(100% - 40px));
  margin: 0 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}
.prices-page .price-category {
  overflow: hidden;
  border: 1px solid #dde5ef;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(19,42,78,.075);
}
.prices-page .price-category-head {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 70px;
  padding: 16px 20px;
  border-bottom: 1px solid #e5ebf2;
  background: #12213d;
}
.prices-page .price-category-kicker {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.prices-page .price-category h3 {
  margin: 0 !important;
  color: #fff !important;
  font-family: var(--tzs-content-font) !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}
.prices-page .price-items { padding: 0 20px; }
.prices-page .price-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(145px, 210px);
  gap: 18px;
  align-items: center;
  padding: 17px 0;
  border-bottom: 1px solid #e9edf3;
}
.prices-page .price-item:last-child { border-bottom: 0; }
.prices-page .price-item-featured {
  margin: 0 -20px;
  padding-right: 20px;
  padding-left: 20px;
  background: #f5f9ff;
}
.prices-page .price-item-copy {
  min-width: 0;
}
.prices-page .price-item-copy strong {
  display: block;
  color: #26334a;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.42;
}
.prices-page .price-item-copy span {
  display: block;
  margin-top: 4px;
  color: #707987;
  font-size: 12.5px;
  line-height: 1.5;
}
.prices-page .price-value {
  color: var(--blue);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  text-align: right;
}
.prices-page .price-value-quote {
  font-size: 14px;
}
.prices-page .pricing-note {
  margin-top: 30px !important;
}

@media (max-width: 980px) {
  .prices-page .pricing-cards {
    grid-template-columns: 1fr;
    max-width: 780px;
  }
}

@media (max-width: 767px) {
  .prices-page .pricing-section {
    padding: 34px 0 62px !important;
  }
  .prices-page .pricing-intro,
  .prices-page .pricing-cards,
  .prices-page .pricing-note {
    width: calc(100% - 30px) !important;
    max-width: calc(100% - 30px) !important;
  }
  .prices-page .pricing-intro {
    margin-bottom: 24px !important;
  }
  .prices-page .pricing-intro h2 {
    font-size: 29px !important;
  }
  .prices-page .pricing-intro > p:last-child {
    font-size: 14px;
    line-height: 1.6;
  }
  .prices-page .pricing-cards {
    gap: 16px;
  }
  .prices-page .price-category {
    border-radius: 8px;
  }
  .prices-page .price-category-head {
    min-height: 0;
    padding: 14px 16px;
  }
  .prices-page .price-category-kicker {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    font-size: 11px;
  }
  .prices-page .price-category h3 {
    font-size: 18px !important;
  }
  .prices-page .price-items {
    padding: 0 16px;
  }
  .prices-page .price-item {
    display: block;
    padding: 15px 0;
  }
  .prices-page .price-item-featured {
    margin: 0 -16px;
    padding-right: 16px;
    padding-left: 16px;
  }
  .prices-page .price-item-copy strong {
    font-size: 14.5px;
  }
  .prices-page .price-item-copy span {
    font-size: 12px;
  }
  .prices-page .price-value {
    margin-top: 8px;
    font-size: 16px;
    text-align: left;
  }
  .prices-page .price-value-quote {
    font-size: 14px;
  }
}