/* ============================================================
   Zamok-044 — Custom CSS
   Замена Tailwind CDN. Только используемые классы.
   ============================================================ */

/* --- 1. CSS Custom Properties (дизайн-токены) --- */
:root {
  /* Colors */
  --color-accent: #FFD904;
  --color-page-bg: #F5F3EC;
  --color-text-primary: #222222;
  --color-text-gray: #666666;
  --color-card-border: #F3F4F6;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-dark: #222222;
  --color-border-light: #E5E7EB;
  --color-border-lighter: #E4E4E7;
  --color-border-faq: rgba(0, 0, 0, 0.12);
  --color-badge-bg: rgba(255, 217, 4, 0.12);
  --color-hero-plate: rgba(255, 255, 255, 0.4);
  --color-hr: rgba(26, 122, 82, 0.12);

  /* Shadows */
  --shadow-btn: 0px 1px 3px 1px rgba(0, 0, 0, 0.05), 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  --shadow-hero-plate: 4px 5px 30px 0px rgba(0, 0, 0, 0.07);
  --shadow-card: 0px 2px 8px 0px rgba(20, 23, 37, 0.08);

  /* Spacing */
  --section-x: 135px;
  --section-y: 60px;
  --gap-section: 60px;
  --gap-cards: 30px;
  --gap-content: 20px;
  --gap-sm: 12px;
  --gap-xs: 8px;
  --gap-xxs: 4px;

  /* Layout */
  --content-max: 1440px;
  --hero-text-w: 43%;
  --hero-image-w: 48.7%;
  --card-sm-w: 270px;
  --card-md-w: 570px;
  --gallery-clip-w: 1170px;

  /* Typography */
  --font-family: 'Roboto', sans-serif;
}

/* --- 2. Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font-family);
  background-color: var(--color-page-bg);
  color: var(--color-text-primary);
}

/* Force disable horizontal scroll globally */
html {
  overflow-x: hidden;
}
  -webkit-font-smoothing: antialiased;
}
p, hr { margin: 0; }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

/* --- 3. Layout --- */
.max-content { max-width: var(--content-max); margin-left: auto; margin-right: auto; }
.wrapper { max-width: var(--content-max); margin-left: auto; margin-right: auto; }

/* Flex */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.flex-grow-2 { flex-grow: 2; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.shrink-0 { flex-shrink: 0; }

/* --- 4. Positioning --- */
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { inset: 0; }
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }

/* --- 5. Spacing: Padding --- */
.px-section { padding-left: var(--section-x); padding-right: var(--section-x); }
.py-section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.py-section-lg { padding-top: 80px; padding-bottom: 80px; }
.px-btn { padding-left: 30px; padding-right: 30px; }
.py-btn { padding-top: 14px; padding-bottom: 14px; }

.p-0\.5 { padding: 2px; }
.pl-0\.5 { padding-left: 2px; }
.pb-0\.5 { padding-bottom: 2px; }
.p-4 { padding: 16px; }
.p-5 { padding: 20px; }
.p-6 { padding: 24px; }
.p-30 { padding: 30px; }
.px-2 { padding-left: 8px; padding-right: 8px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.px-5 { padding-left: 20px; padding-right: 20px; }
.py-0\.5 { padding-top: 2px; padding-bottom: 2px; }
.py-2\.5 { padding-top: 10px; padding-bottom: 10px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.pb-4 { padding-bottom: 16px; }
.pb-20 { padding-bottom: 80px; }
.pl-3 { padding-left: 12px; }
.pr-4 { padding-right: 16px; }
.pr-8 { padding-right: 32px; }
.pt-20 { padding-top: 80px; }
.py-20 { padding-top: 80px; padding-bottom: 80px; }

/* --- 6. Spacing: Gap --- */
.gap-0\.5 { gap: 2px; }
.gap-1 { gap: 4px; }
.gap-1\.5 { gap: 6px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 20px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }
.gap-9 { gap: 36px; }
.gap-10 { gap: 40px; }
.gap-px { gap: 1px; }
.gap-cards { gap: var(--gap-cards); }
.gap-section { gap: var(--gap-section); }
.gap-hero { gap: clamp(40px, 7vw, 100px); }

/* --- 7. Spacing: Margin --- */
.mx-auto { margin-left: auto; margin-right: auto; }

/* --- 8. Sizing: Width --- */
.w-full { width: 100%; }
.w-fit { width: fit-content; }
.w-1\.5 { width: 6px; }
.w-6 { width: 24px; }
.w-10 { width: 40px; }
.w-16 { width: 64px; }
.w-hero-text { width: var(--hero-text-w); }
.w-hero-image { width: var(--hero-image-w); }
.w-card-sm { width: var(--card-sm-w); }
.w-card-md { width: var(--card-md-w); }
.w-btn { width: 261px; }
.w-gallery-clip { width: var(--gallery-clip-w); }
.w-gallery-wide { width: 710px; }
.w-gallery-narrow { width: 350px; }
.w-section-header { max-width: 866px; }
.w-heading-wide { max-width: 786px; }
.w-heading-narrow { max-width: 716px; }
.w-heading-max { max-width: 1170px; }

/* --- 9. Sizing: Height --- */
.h-full { height: 100%; }
.h-1\.5 { height: 6px; }
.h-6 { height: 24px; }
.h-8 { height: 32px; }
.h-10 { height: 40px; }
.h-12 { height: 48px; }
.h-16 { height: 64px; }
.h-btn { height: 48px; }
.h-hero { height: 580px; }
.h-service-img { height: 240px; }
.h-gallery-row1 { height: 360px; }
.h-gallery-row2 { height: 330px; }
.h-gallery-gradient { height: 350px; }

/* --- 10. Typography --- */
.font-roboto { font-family: var(--font-family); }
.font-black { font-weight: 900; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-regular { font-weight: 400; }

.text-center { text-align: center; }
.uppercase { text-transform: uppercase; }
.no-underline { text-decoration: none; }
.whitespace-nowrap { white-space: nowrap; }

/* Font sizes */
.text-h1 { font-size: 48px; line-height: 1.27em; letter-spacing: 0.02em; }
.text-h2 { font-size: 40px; line-height: 50px; letter-spacing: 0.02em; }
.text-h3 { font-size: 30px; line-height: 40px; letter-spacing: 0.02em; }
.text-h4 { font-size: clamp(16px, 0.96vw + 6.2px, 20px); line-height: 1.4; letter-spacing: -0.01em; }
.text-body { font-size: 16px; line-height: 24px; letter-spacing: -0.01em; }
.text-body-sm { font-size: 14px; line-height: 20px; letter-spacing: -0.01em; }
.text-body-xs { font-size: 14px; line-height: 20px; letter-spacing: 0.06em; }
.text-price-lg { font-size: 30px; line-height: 36px; }
.text-price-sm { font-size: 11px; line-height: 17px; }
.text-price-md { font-size: 12px; line-height: 24px; }
.text-btn-bold { font-size: 18px; line-height: 20px; }
.text-btn-call { font-size: 16px; line-height: 20px; }
.text-btn-small { font-size: 14px; line-height: 20px; }
.text-badge { font-size: 14px; line-height: 20px; letter-spacing: 0.06em; }
.text-nav { font-size: 16px; line-height: 24px; letter-spacing: -0.01em; }
.text-review { font-size: 20px; line-height: 28px; letter-spacing: -0.01em; }
.text-number { font-size: 40px; line-height: 50px; }
.text-card-title { font-size: 16px; line-height: 24px; letter-spacing: 0.02em; }
.text-faq-q { font-size: 16px; line-height: 24px; letter-spacing: 0.02em; }
.text-chevron { font-size: 20px; }

/* --- 11. Colors: Text --- */
.text-primary { color: var(--color-text-primary); }
.text-gray { color: var(--color-text-gray); }
.text-white { color: var(--color-white); }
.text-black { color: var(--color-black); }
.text-bg { color: var(--color-page-bg); }
.text-accent { color: var(--color-accent); }

/* --- 12. Colors: Background --- */
.bg-accent { background-color: var(--color-accent); }
.bg-dark { background-color: var(--color-dark); }
.bg-page { background-color: var(--color-page-bg); }
.bg-white { background-color: var(--color-white); }
.bg-text-primary { background-color: var(--color-text-primary); }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-badge { background-color: var(--color-badge-bg); }
.bg-hero-plate { background-color: var(--color-hero-plate); }

/* --- 13. Borders --- */
.border { border: 1px solid; }
.border-t { border-top: 1px solid; }
.border-b { border-bottom: 1px solid; }
.border-accent { border-color: var(--color-accent); }
.border-card { border-color: var(--color-card-border); }
.border-light { border-color: var(--color-border-light); }
.border-lighter { border-color: var(--color-border-lighter); }
.border-faq { border-color: var(--color-border-faq); }
.border-hero { border-color: rgba(255, 255, 255, 0.2); }

/* Badge gradient border */
.border-badge {
  border-image: linear-gradient(176deg, rgba(201,169,110,0) 0%, rgba(201,169,110,0.24) 100%) 1;
  box-shadow: 0 0 0 1px rgba(201,169,110,0.24) inset;
}

/* --- 14. Border Radius --- */
.rounded-btn { border-radius: 72px; }
.rounded-btn-outlined { border-radius: 50px; }
.rounded-badge { border-radius: 100px; }
.rounded-plate { border-radius: 30px; }
.rounded-card { border-radius: 14px; }
.rounded-card-inner { border-radius: 12px; }
.rounded-card-lg { border-radius: 24px; }
.rounded-xl { border-radius: 12px; }
.rounded-2xl { border-radius: 16px; }
.rounded-3xl { border-radius: 24px; }
.rounded-full { border-radius: 50%; }
.rounded-hero-yellow { border-radius: 184px 184px 24px 24px; }
.rounded-price-cutout { border-radius: 0 0 0 13px; }
.price-corner-top {
  position: absolute;
  top: 0;
  left: -28px;
  width: 28px;
  height: 28px;
}
.price-corner-bottom {
  position: absolute;
  bottom: -28px;
  right: 0;
  width: 28px;
  height: 28px;
}
.rounded-icon { border-radius: 60px; }
.rounded-dot { border-radius: 20px; }

/* --- 15. Shadows --- */
.shadow-btn { box-shadow: var(--shadow-btn); }
.shadow-hero-plate { box-shadow: var(--shadow-hero-plate); }
.shadow-card { box-shadow: var(--shadow-card); }

/* --- 16. Overflow --- */
.overflow-hidden { overflow: hidden; }

/* --- 17. Object Fit --- */
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }

/* --- 18. Effects --- */
.backdrop-blur { backdrop-filter: blur(12px); }
.rotate-180 { transform: rotate(180deg); }
.text-xl { font-size: 20px; line-height: 28px; }
.transition-colors { transition: color 0.2s, background-color 0.2s, border-color 0.2s, text-decoration-color 0.2s, fill 0.2s, stroke 0.2s; }
.duration-200 { transition-duration: 0.2s; }
.pointer-events-none { pointer-events: none; }

/* --- 19. Gallery scroll animation --- */
.gallery-scroll-left { will-change: transform; transform: translateX(-302px); }
.gallery-scroll-right { will-change: transform; transform: translateX(-2817px); }

/* --- 20. Sticky header --- */
.sticky-header {
  z-index: 100;
  background-color: var(--color-page-bg);
}

/* Header phone button - fixed width to prevent layout shift across languages */
.header-btn {
  min-width: 180px;
}
.header-btn-icon {
  display: none;
}

/* Language switcher dropdown */
.lang-switch {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.lang-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: 8px;
  padding: 4px 0;
  min-width: 80px;
  z-index: 200;
  box-shadow: 0px 4px 12px rgba(0,0,0,0.1);
}
.lang-dropdown a {
  display: block;
  padding: 6px 16px;
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: 14px;
  line-height: 20px;
}
.lang-dropdown a:hover {
  background-color: rgba(255, 217, 4, 0.1);
}
.lang-switch img {
  transition: transform 0.2s ease;
}
@media (hover: hover) {
  .lang-switch:hover img {
    transform: rotate(180deg);
  }
  .lang-switch:hover .lang-dropdown {
    display: block;
  }
}
.lang-switch .lang-dropdown.open {
  display: block;
}
.lang-switch.open img {
  transform: rotate(180deg);
}

/* Floating call button */
.fab-call {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 150;
  width: 56px;
  height: 56px;
  background: var(--color-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 4px 16px rgba(0,0,0,0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fab-icon-up { display: none; }
.fab-call:hover {
  transform: scale(1.1);
  box-shadow: 0px 6px 24px rgba(0,0,0,0.25);
}
.fab-call.scroll-up .fab-icon-phone { display: none; }
.fab-call.scroll-up .fab-icon-up { display: block; }

/* --- 22. Cursor --- */
.cursor-pointer { cursor: pointer; }

/* --- 23. Hover states --- */

/* Cards: yellow border + shadow */
.hover-card {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.hover-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.15);
  outline: 1px solid var(--color-accent);
  outline-offset: -1px;
}

/* FAQ items: subtle yellow tint */
.hover-faq {
  transition: background-color 0.2s ease;
}
.hover-faq:hover {
  background-color: rgba(255, 217, 4, 0.05);
}

/* FAQ accordion */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.open .faq-answer {
  max-height: 600px;
}
.faq-chevron {
  transition: transform 0.2s ease;
}
.open .faq-chevron {
  transform: rotate(180deg);
}

/* CTA buttons: slightly darker yellow */
.hover-btn {
  transition: background-color 0.2s ease;
}
.hover-btn:hover {
  background-color: #e6c400;
}

/* Outlined button (hero "Наші послуги") */
.btn-outlined {
  border: 2px solid var(--color-accent);
  border-radius: 50px;
  height: 72px;
  padding-left: 30px;
  padding-right: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}
.btn-outlined:hover {
  background-color: #fff204;
}

/* Hero button group */
.btn-group-hero {
  display: flex;
  gap: 20px;
  align-items: center;
}

/* Navigation arrows (already in review block) */
.hover-border-accent:hover { border-color: var(--color-accent); }

/* --- 24. Gallery gradient --- */
.gallery-gradient {
  background: linear-gradient(0deg, rgba(34,34,34,1) 8%, rgba(34,34,34,0.4) 57%, rgba(34,34,34,0) 98%);
}

/* --- 25. Specific inline styles extracted --- */
.badge-gradient {
  background: linear-gradient(176deg, rgba(201,169,110,0) 0%, rgba(201,169,110,0.24) 100%);
}

.hr-review {
  border: none;
  border-top: 1px solid var(--color-hr);
}

/* --- 26. Hero block positioning (one-off values) --- */
.hero-yellow-bg { left: 100px; top: 0; width: 370px; }
.hero-car-img { left: -72px; top: 152px; width: 513px; height: 292px; min-width: 513px; max-width: none; }
.hero-plate-1 { left: 33px; top: 85px; }
.hero-plate-2 { left: 299px; top: 125px; }
.hero-plate-3 { left: 298px; top: 433px; }
.hero-plate-4 { left: 1px; top: 482px; }
.bg-white-40 { background-color: rgba(255, 255, 255, 0.4); }
.border-white-20 { border-color: rgba(255, 255, 255, 0.2); }
.badge-inner { box-shadow: 0 0 0 1px rgba(201,169,110,0.24) inset; background: rgba(255,217,4,0.12); }

/* --- 27. Hero animations --- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
.fade-in-right { animation: fadeInRight 0.8s ease-out forwards; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.float-anim { animation: float 3s ease-in-out infinite; }
.fade-in-left { animation: fadeInLeft 0.8s ease-out forwards; }
.fade-in-up { animation: fadeInUp 0.8s ease-out forwards; }
.delay-1 { animation-delay: 0s; }
.delay-2 { animation-delay: 0.5s; }
.delay-3 { animation-delay: 1s; }
.delay-4 { animation-delay: 1.5s; }

/* Scroll reveal */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal-up.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0s; }
.reveal-delay-2 { transition-delay: 0.15s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* Carousel */
.reviews-carousel { overflow: hidden; padding: 28px; margin: -28px; }
.reviews-track {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  transition: transform 0.4s ease;
}
.reviews-track > * {
  flex-shrink: 0;
  height: 400px;
  width: calc(50% - 15px);
}
/* Push HR + name block to bottom; auto space between text and HR */
.reviews-track > * > hr {
  margin-top: auto;
}
.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  transition: background-color 0.2s;
  padding: 0;
  background-color: rgba(0, 0, 0, 0.15);
}
.carousel-dot.active {
  background-color: var(--color-accent);
}
#carouselDots { margin-top: 24px; }
.mob-dot { display: none; }
.mob-arrows { display: none; }
.desktop-arrows { display: flex; }

@media (max-width: 768px) {
  .mob-dot { display: inline-block; }
  .mob-arrows { display: flex; }
  .desktop-arrows { display: none; }
}

/* ============================================================
   INTERMEDIATE: Responsive scaling between desktop and mobile
   ============================================================ */
@media (max-width: 1400px) and (min-width: 769px) {
  /* -- Section padding: 135px@1400 → 16px@769 -- */
  :root {
    --section-x: clamp(16px, calc(16px + 119 * (100vw - 769px) / 631), 135px);
  }

  /* -- Headings & body scale proportionally -- */
  .text-h1 { font-size: clamp(30px, calc(30px + 18 * (100vw - 769px) / 631), 48px); }
  .text-h2 { font-size: clamp(32px, calc(32px +  8 * (100vw - 769px) / 631), 40px); }
  .text-body { font-size: clamp(14px, calc(14px + 2 * (100vw - 769px) / 631), 16px); }

  /* -- Hero car: gentle scale, slightly toward text -- */
  .hero-scale-inner {
    transform-origin: 15% center;
    transform: scale(clamp(0.65, calc(100vw / 1400px), 1));
  }

  /* -- Right-side plates: prevent shrink-to-fit constraint -- */
  .hero-plate-2, .hero-plate-3 {
    width: max-content;
  }

  /* -- Clip any hero overflow -- */
  /* .max-content.mx-auto > section:first-of-type { overflow: hidden; } */
}

/* ============================================================
   REVIEW CARDS: Smaller text below 970px to prevent overflow
   ============================================================ */
@media (max-width: 985px) and (min-width: 769px) {
  .max-content.mx-auto > section:nth-of-type(5) .reviews-track > div .text-h4 {
    /* 16px@985 → 14px@769 — prevents text overflowing card signature */
    font-size: clamp(14px, calc(14px + 2 * (100vw - 769px) / 216), 16px);
    line-height: 1.35;
  }
}

/* ============================================================
   MOBILE (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
  /* --- Header --- */
  .sticky-header .max-content {
    padding: 8px 12px 8px 16px;
  }
  .sticky-header .max-content > a:first-child img {
    width: 136px;
    height: 40px;
  }
  /* Phone button: icon-only circle (header only) */
  .sticky-header .header-btn {
    min-width: auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    padding: 0;
    gap: 0;
    justify-content: center;
  }
  .sticky-header .header-btn span {
    display: none;
  }
  .sticky-header .header-btn-icon {
    display: block;
  }

  /* --- Hero --- */
  .max-content.mx-auto > section:first-of-type {
    flex-direction: column;
    padding: 40px 16px;
    gap: 24px;
    align-items: center;
  }
  .max-content.mx-auto > section:first-of-type .w-hero-text {
    width: 100%;
    align-items: center;
    gap: 24px;
  }
  .max-content.mx-auto > section:first-of-type .text-h1 {
    font-size: 30px;
    text-align: center;
  }
  .max-content.mx-auto > section:first-of-type .text-body {
    font-size: 14px;
    text-align: center;
  }
  .max-content.mx-auto > section:first-of-type .w-hero-image {
    width: 370px;
    height: 376px;
    flex-shrink: 0;
    overflow: visible;
  }
  /* Yellow rectangle */
  .max-content.mx-auto > section:first-of-type .hero-yellow-bg {
    left: 65px;
    top: 0;
    width: 240px;
    height: 376px;
    border-radius: 119px 119px 15px 15px;
  }
  /* Car image */
  .max-content.mx-auto > section:first-of-type .hero-car-img {
    left: -48px;
    top: 93px;
    width: 335px;
    height: 190px;
    min-width: 335px;
    max-width: 335px;
  }
  /* Floating badges — one by one from user specs */
  .max-content.mx-auto > section:first-of-type .hero-plate-1 { left: 22px; top: 55px; width: 123px; height: 39px; }
  .max-content.mx-auto > section:first-of-type .hero-plate-2 { left: 195px; top: 81px; width: 170px; height: 39px; }
  .max-content.mx-auto > section:first-of-type .hero-plate-3 { left: 194px; top: 281px; width: 178px; height: 39px; }
  .max-content.mx-auto > section:first-of-type .hero-plate-4 { left: 1px; top: 313px; width: 190px; height: 39px; }
  .max-content.mx-auto > section:first-of-type .rounded-plate {
    padding: 8px 10px 8px 8px;
    gap: 6px;
    border-radius: 19px;
  }
  .max-content.mx-auto > section:first-of-type .rounded-plate img {
    width: 23px;
    height: 23px;
  }
  .max-content.mx-auto > section:first-of-type .rounded-plate span {
    font-size: 10px;
    line-height: 16px;
  }
  /* Hero button group: tighter on mobile */
  .max-content.mx-auto > section:first-of-type .btn-group-hero {
    gap: 12px;
    width: 100%;
    justify-content: center;
  }
  .max-content.mx-auto > section:first-of-type .btn-group-hero .px-btn {
    padding-left: 24px;
    padding-right: 24px;
  }
  .max-content.mx-auto > section:first-of-type .btn-outlined {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* --- Advantages (Block 3) --- */
  .max-content.mx-auto > section:nth-of-type(2) {
    padding: 40px 16px;
    gap: 32px;
  }
  .max-content.mx-auto > section:nth-of-type(2) .text-h2 {
    font-size: 32px;
    line-height: 42px;
  }
  .max-content.mx-auto > section:nth-of-type(2) .flex.gap-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 16px;
  }
  .max-content.mx-auto > section:nth-of-type(2) .w-card-sm {
    width: auto;
  }
  .max-content.mx-auto > section:nth-of-type(2) .rounded-icon {
    padding: 20px;
    border-radius: 60px;
  }

  /* --- Services (Block 4) --- */
  .max-content.mx-auto > section:nth-of-type(3) {
    padding: 40px 16px;
    gap: 32px;
  }
  .max-content.mx-auto > section:nth-of-type(3) .text-h2 {
    font-size: 32px;
    line-height: 40px;
  }
  .max-content.mx-auto > section:nth-of-type(3) .flex.gap-cards {
    flex-direction: column;
    gap: 12px;
  }

  /* --- How We Work (Block 5) --- */
  .max-content.mx-auto > section:nth-of-type(4) {
    padding: 40px 16px;
    gap: 28px;
  }
  .max-content.mx-auto > section:nth-of-type(4) .text-h2 {
    font-size: clamp(24px, 6.5vw, 30px);
    line-height: 1.3em;
  }
  .max-content.mx-auto > section:nth-of-type(4) .flex.gap-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .max-content.mx-auto > section:nth-of-type(4) .w-card-sm {
    width: auto;
  }

  /* --- Reviews (Block 6) --- */
  .max-content.mx-auto > section:nth-of-type(5) {
    padding: 40px 0 60px;
    gap: 32px;
  }
  .max-content.mx-auto > section:nth-of-type(5) .reveal-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .max-content.mx-auto > section:nth-of-type(5) > div:first-of-type {
    padding-left: 16px;
    padding-right: 16px;
  }
  .max-content.mx-auto > section:nth-of-type(5) .reviews-track {
    padding-left: 16px;
  }
  .max-content.mx-auto > section:nth-of-type(5) #carouselDots {
    display: none;
  }
  .max-content.mx-auto > section:nth-of-type(5) .mob-arrows {
    margin-top: 0;
  }
  .max-content.mx-auto > section:nth-of-type(5) .reviews-carousel {
    width: 100%;
    padding: 28px 0;
    margin: -28px 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .max-content.mx-auto > section:nth-of-type(5) .reviews-track::after {
    content: '';
    display: block;
    width: 16px;
    height: 1px;
    flex-shrink: 0;
    margin-left: -30px;
  }
  .max-content.mx-auto > section:nth-of-type(5) .reviews-carousel::-webkit-scrollbar {
    display: none;
  }
  .max-content.mx-auto > section:nth-of-type(5) .reviews-track > div {
    width: calc(100vw - 32px);
    padding: 20px;
    gap: 20px;
    flex-shrink: 0;
  }
  .max-content.mx-auto > section:nth-of-type(5) .reviews-track > div .text-h4 {
    font-size: 16px;
    line-height: 24px;
  }

  /* --- Gallery (Block 7 - full-width, outside wrapper) --- */
  .bg-dark.py-20 {
    padding-top: 40px;
    padding-bottom: 0;
  }
  .bg-dark .max-content {
    gap: 40px;
  }
  .bg-dark .px-section {
    padding-left: 16px;
    padding-right: 16px;
  }
  .bg-dark .text-h2 {
    font-size: 30px;
    line-height: 40px;
  }
  .bg-dark .text-body {
    font-size: 14px;
  }
  .bg-dark .w-gallery-clip {
    width: 100%;
    border-radius: 17px;
  }

  .max-content.mx-auto:last-of-type > section:first-of-type {
    padding: 40px 0;
    gap: 24px;
  }
  .max-content.mx-auto:last-of-type > section:first-of-type .flex.flex-col.gap-10 {
    padding: 0 16px;
  }
  .max-content.mx-auto:last-of-type > section:first-of-type .text-h2 {
    font-size: clamp(24px, 7vw, 30px);
    line-height: 1.3em;
  }
  .why-track {
    display: flex;
    gap: 12px;
    overflow: hidden;
    transition: transform 0.4s ease;
  }
  /* --- Why Us (Block 8) mobile carousel --- */
  .max-content.mx-auto:last-of-type > section:first-of-type .flex.flex-col.gap-cards {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-padding: 0 16px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 8px;
    gap: 12px;
    width: 100%;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .max-content.mx-auto:last-of-type > section:first-of-type .flex.flex-col.gap-cards::-webkit-scrollbar {
    display: none;
  }
  .max-content.mx-auto:last-of-type > section:first-of-type .flex.flex-col.gap-cards > .flex.gap-cards {
    display: contents;
  }
  .max-content.mx-auto:last-of-type > section:first-of-type .hover-card {
    flex: 0 0 330px;
    scroll-snap-align: start;
  }
  .max-content.mx-auto:last-of-type > section:first-of-type {
    overflow: hidden;
  }
  .why-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
  }
  .why-dots {
    display: flex;
    gap: 8px;
  }
  .why-dots span {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E5E7EB;
    cursor: pointer;
  }
  .why-dots span.active {
    background: var(--color-accent);
  }
}
@media (min-width: 769px) {
  .why-nav { display: none; }
}

  /* --- FAQ (Block 9) --- */
  @media (max-width: 768px) {
  .max-content.mx-auto:last-of-type > section:last-of-type {
    padding: 0px 16px 40px;
    gap: 24px;
  }
  .max-content.mx-auto:last-of-type > section:last-of-type .text-h3 {
    font-size: 24px;
    line-height: 30px;
  }
}