@font-face {
  font-family: 'Bebas';
  src: url('../fonts/BebasNeue_bold.ttf') format('truetype');
  font-display: swap;
  font-weight: 500;
}
@font-face {
  font-family: 'Bebasregular';
  src: url('../fonts/BebasNeue_regular.ttf') format('truetype');
  font-display: swap;
  font-weight: 400;
}

/* ============================================================================
 * AQUATEC J6 — Inner page "company"
 * Auto-generated by aquatec-hero-generator.sh
 * Hero Canon: v1.2 (Session 24)
 * Gradient: #1e293b (dark, left) -> #a78050 (light, right)
 * ============================================================================ */

/* ---- [01] BASE ---- */

/* ---- [02] HIDE legacy artifacts ---- */
body:has(#corner) .mod-breadcrumbs__wrapper { display: none !important; }
body.aquatec-site #youtube_reviews { display: none !important; }

/* ============================================================================
   [03] HERO #corner V2 (canon v1.2)
   ============================================================================ */

body:has(#corner) .aeo-summary { display: none; }
body:has(#corner) .inner-banner { display: none; }

#corner {
  --corner-skew: clamp(45px, 6.7vw, 100px);
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: calc(-1 * var(--aq-header-h, 80px));
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' x2='1'><stop offset='0' stop-color='%231e293b'/><stop offset='1' stop-color='%23a78050'/></linearGradient></defs><polygon points='0,0 100,0 100,85 0,100' fill='url(%23g)'/></svg>") no-repeat center / 100% 100%;
  overflow: visible;
  isolation: isolate;
}

#corner > div {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) 1fr;
  column-gap: 56px;
  align-items: center;
  max-width: var(--aq-container, 1366px);
  margin: 0 auto;
  padding: calc(var(--aq-header-h, 80px) - 48px) 24px 77px;
  min-height: clamp(420px, 52vh, 580px);
}

#corner img.hero__image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 500px;
  object-fit: contain;
  margin: 0 auto;
  background: transparent;
  filter: drop-shadow(0 22px 32px rgba(0, 0, 0, 0.28));
  animation: hero-image-float 4s ease-in-out infinite;
  will-change: transform;
}

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

@media (prefers-reduced-motion: reduce) {
  #corner img.hero__image { animation: none !important; }
}

#h1_anim {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

#h1_anim h1 {
  margin: 0;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 3.0vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.5px;
  color: #fff;
  text-wrap: pretty;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

#h1_anim p {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  max-width: 60ch;
}

#h1_anim .get_in_touch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #fff;
  background: var(--aq-orange, #f58025);
  padding: 16px 40px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow:
    0 10px 24px -8px rgba(196, 87, 8, 0.45),
    0 4px 10px -2px rgba(0, 0, 0, 0.16);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

#h1_anim .get_in_touch::after {
  content: '→';
  font-size: 18px;
  transition: transform 0.25s ease;
}

#h1_anim .get_in_touch:hover {
  background: #ff8c2e;
  transform: translateY(-2px);
  box-shadow:
    0 14px 32px -8px rgba(196, 87, 8, 0.55),
    0 6px 14px -2px rgba(0, 0, 0, 0.22);
}

#h1_anim .get_in_touch:hover::after {
  transform: translateX(4px);
}

@media (max-width: 1199px) {
  #corner { --corner-skew: clamp(34px, 5.3vw, 67px); }
  #corner > div {
    grid-template-columns: 1fr;
    row-gap: 36px;
    padding: calc(var(--aq-header-h, 80px) + 0px) 20px 72px;
    min-height: auto;
    text-align: center;
  }
  #corner img.hero__image {
    max-width: 425px;
    margin: 0 auto;
  }
  #h1_anim { align-items: center; }
  #h1_anim p { max-width: 100%; text-align: center; }
  #h1_anim p br.desktop { display: none; }
}

@media (max-width: 602px) {
  #corner { --corner-skew: clamp(25px, 5vw, 46px); }
  #h1_anim h1 { font-size: clamp(24px, 7.5vw, 38px); }
  #corner img.hero__image {
    max-width: 300px;
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.25));
    animation-duration: 5s;
  }
  @keyframes hero-image-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
  }
}

/* ============================================================================
   [04] HERO TOP FORCE — header transparent, body gradient match
   ============================================================================ */

body.aquatec-site.inner:has(#corner) #site-header:not(.scrolled),
body.aquatec-site.inner:has(#corner) #site-header:not(.scrolled) .site-header__inner {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

body.aquatec-site.inner:has(#corner) {
  background: linear-gradient(to right, #1e293b 0%, #a78050 100%) !important;
  background-color: #1e293b !important;
}

body.aquatec-site.inner:has(#corner) #main,
body.aquatec-site.inner:has(#corner) main.site-main,
body.aquatec-site.inner:has(#corner) .com-content-article,
body.aquatec-site.inner:has(#corner) .com-content-article > .item-page {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body.aquatec-site.inner:has(#corner) #corner {
  margin-top: calc(-1 * var(--aq-header-h, 80px)) !important;
}

/* ============================================================================
   [09] HERO SHADOW (skew drop-shadow + overflow:visible parents)
   ============================================================================ */

:root {
  --aq-skew-shadow: drop-shadow(0 14px 12px rgba(0, 0, 0, 0.32));
  --aq-skew-shadow-mobile: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.25));
}

#corner { filter: var(--aq-skew-shadow); }

@media (max-width: 768px) {
  #corner { filter: var(--aq-skew-shadow-mobile); }
}

html, body { overflow-x: clip; }

body:has(#corner) main,
body:has(#corner) .com-content-article,
body:has(#corner) .com-content-article__body,
body:has(#corner) .item-page,
body:has(#corner) #center {
  overflow: visible !important;
}

/* ============================================================================
 * COMPANY PAGE SECTIONS — appended to aquatec-company.css after Hero canon
 * Order: [00] tokens → [01] Hero z-index + main bg → [02] H2 → [03] intro →
 *        [04] history → [05] values FLIPCARDS → [06] team → [07] offices →
 *        [08] clients-strip → [09] partners marquee → [10] certs →
 *        [11] bridge → [N] dark theme → [R] reduced motion → [POLISH-BG]
 * Pattern parent: aquatec-aka.css + aquatec-models.css + aquatec-big-los.css
 * ============================================================================ */

/* === COMPANY PAGE SECTIONS START === */

/* ----- [00] Page tokens ----- */
.aquatec-site {
  --com-slate:        #1e293b;
  --com-bronze:       #a78050;
  --com-bronze-soft:  #d4b896;
  --com-bronze-deep:  #6f4d2a;
  --com-strip-from:   #5a6573;
  --com-strip-to:     #a8b3bd;
  --com-band-pale:    rgba(167, 128, 80, 0.06);
  --com-band-pale-2:  rgba(30, 41, 59, 0.04);
  --com-card-shadow:
    0 24px 48px -18px rgba(15, 35, 56, 0.20),
    0 8px 18px -6px  rgba(15, 35, 56, 0.10);
  --com-card-shadow-hover:
    0 32px 56px -16px rgba(15, 35, 56, 0.24),
    0 12px 24px -6px  rgba(15, 35, 56, 0.12);
}

/* ----- [01] Hero z-index canon + main bg high-spec (VFL §4.3, §4.5) ----- */
body.aquatec-site #corner { position: relative; z-index: 2; }
body.aquatec-site section[id^="about_"] { position: relative; z-index: 1; }

html body.aquatec-site main,
html body.aquatec-site main#main,
html body.aquatec-site main.site-main,
html body.aquatec-site main#main.site-main,
html body.aquatec-site.inner main {
  background: #f7f9fc !important;
}
html[data-theme="dark"] body.aquatec-site main,
html[data-theme="dark"] body.aquatec-site main#main,
html[data-theme="dark"] body.aquatec-site main.site-main,
html[data-theme="dark"] body.aquatec-site main#main.site-main {
  background: #262e3a !important;
}

/* ----- [02] H2 canon — whitelist (H2 Flipcards Canon §1) ----- */
section#about_intro h2,
section#about_history h2,
section#about_values h2,
section#about_team h2,
section#about_offices h2,
section#about_partners h2,
section#about_certs h2,
section#about_bridge h2,
section#about_clients_strip h2 {
  font-family: 'Bebas', 'Bebas Neue', sans-serif;
  font-weight: 500;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.18;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
  color: var(--aq-text, #1b2935);
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
  margin: 0 auto clamp(32px, 4vw, 56px);
  max-width: var(--aq-container, 1366px);
  padding: 0 24px;
  position: relative;
}
section#about_intro h2 hr,
section#about_history h2 hr,
section#about_values h2 hr,
section#about_team h2 hr,
section#about_offices h2 hr,
section#about_partners h2 hr,
section#about_certs h2 hr,
section#about_bridge h2 hr,
section#about_clients_strip h2 hr {
  display: block;
  width: 56px;
  height: 4px;
  margin: 0 auto 18px;
  background: var(--aq-orange, #f58025);
  border: 0;
  border-radius: 2px;
}

/* H2 on dark/colored sections — white */
section#about_clients_strip h2,
section#about_bridge h2 {
  color: #fff;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* ----- [03] #about_intro — Lead + 4 stat cards ----- */
section#about_intro {
  padding: clamp(48px, 6vw, 88px) 24px clamp(40px, 5vw, 64px);
  background: #f7f9fc;
}
section#about_intro .lead {
  max-width: 920px;
  margin: 0 auto clamp(36px, 4vw, 56px);
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
  color: var(--aq-text, #1b2935);
  text-align: center;
}
section#about_intro .lead strong {
  color: var(--aq-orange, #f58025);
  font-weight: 700;
}
section#about_intro .stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  max-width: 1200px;
  margin: 0 auto;
}
section#about_intro .stat {
  background: #fff;
  border-radius: 14px;
  padding: clamp(20px, 2.4vw, 32px) 18px;
  text-align: center;
  box-shadow: var(--com-card-shadow);
  transition: transform .35s ease, box-shadow .35s ease;
  position: relative;
  overflow: hidden;
}
section#about_intro .stat::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--com-slate), var(--com-bronze));
}
section#about_intro .stat:hover {
  transform: translateY(-4px);
  box-shadow: var(--com-card-shadow-hover);
}
section#about_intro .stat__num {
  font-family: 'Bebas', 'Bebas Neue', sans-serif;
  font-weight: 500;
  font-size: clamp(42px, 5vw, 56px);
  line-height: 1;
  color: var(--com-slate);
  letter-spacing: 0.02em;
}
section#about_intro .stat__label {
  margin-top: 8px;
  font-family: Manrope, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.35;
  color: var(--aq-text-muted, #6b7c8c);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
@media (max-width: 768px) {
  section#about_intro .stats { grid-template-columns: repeat(2, 1fr); }
}

/* ----- [04] #about_history — Zigzag timeline (Iter 1 replaced flat timeline) ----- */
section#about_history {
  padding: clamp(64px, 7vw, 96px) 24px clamp(56px, 6vw, 88px);
  background: var(--com-band-pale-2);
  position: relative;
}
section#about_history .timeline-zigzag {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  padding: 20px 0;
}
/* Central vertical line */
section#about_history .timeline-zigzag::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg,
    var(--com-slate) 0%,
    var(--com-bronze) 100%);
  z-index: 0;
}
section#about_history .ms {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 96px 1fr;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  margin: 0 0 clamp(28px, 3vw, 48px);
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
section#about_history .ms.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Round dot on the central line */
section#about_history .ms__year {
  grid-column: 2;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--com-slate) 0%, var(--com-bronze) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas', 'Bebas Neue', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.25);
  box-shadow:
    0 14px 28px -8px rgba(30, 41, 59, 0.42),
    0 0 0 6px #fff,
    0 0 0 7px rgba(30, 41, 59, 0.12);
  position: relative;
  z-index: 2;
}
/* Card body */
section#about_history .ms__body {
  background: #fff;
  border-radius: 14px;
  padding: 22px 26px;
  box-shadow: var(--com-card-shadow);
  position: relative;
  z-index: 1;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
section#about_history .ms.is-visible .ms__body:hover {
  transform: translateY(-4px);
  box-shadow: var(--com-card-shadow-hover);
}
section#about_history .ms--left .ms__body {
  grid-column: 1;
  text-align: right;
}
section#about_history .ms--right .ms__body {
  grid-column: 3;
  text-align: left;
}
/* Empty cell on the opposite side */
section#about_history .ms--left::after,
section#about_history .ms--right::before {
  content: "";
  display: block;
}
section#about_history .ms--left::after  { grid-column: 3; }
section#about_history .ms--right::before { grid-column: 1; }

/* Connecting "tail" pointer from card to dot */
section#about_history .ms__body::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  background: #fff;
  transform: translateY(-50%) rotate(45deg);
  box-shadow: -3px 3px 6px -3px rgba(15, 35, 56, 0.08);
}
section#about_history .ms--left .ms__body::before  { right: -9px; }
section#about_history .ms--right .ms__body::before { left: -9px; }

section#about_history .ms__body p {
  font-family: Manrope, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--aq-text, #1b2935);
  margin: 0;
}

/* Mobile — single column on the left, all cards on the right */
@media (max-width: 768px) {
  section#about_history .timeline-zigzag::before {
    left: 36px;
    transform: none;
  }
  section#about_history .ms {
    grid-template-columns: 72px 1fr;
    gap: 18px;
  }
  section#about_history .ms__year {
    grid-column: 1;
    width: 72px;
    height: 72px;
    font-size: 17px;
    box-shadow:
      0 10px 20px -6px rgba(30, 41, 59, 0.35),
      0 0 0 4px #fff,
      0 0 0 5px rgba(30, 41, 59, 0.12);
  }
  section#about_history .ms__body,
  section#about_history .ms--left .ms__body,
  section#about_history .ms--right .ms__body {
    grid-column: 2;
    text-align: left;
  }
  section#about_history .ms__body::before {
    left: -9px;
    right: auto;
    top: 24px;
  }
  section#about_history .ms--left::after,
  section#about_history .ms--right::before {
    display: none;
  }
}

/* Dark theme */
html[data-theme="dark"] body.aquatec-site section#about_history {
  background: rgba(255, 255, 255, 0.03);
}
html[data-theme="dark"] body.aquatec-site section#about_history .ms__body {
  background: var(--aq-card-bg, #2d3748) !important;
}
html[data-theme="dark"] body.aquatec-site section#about_history .ms__body p {
  color: var(--aq-text, #e8edf3) !important;
}
html[data-theme="dark"] body.aquatec-site section#about_history .ms__body::before {
  background: var(--aq-card-bg, #2d3748);
}

@media (prefers-reduced-motion: reduce) {
  section#about_history .ms {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ----- [05] #about_values — 3 FLIPCARDS (canon /models 1:1) ----- */
section#about_values {
  padding: clamp(64px, 7vw, 96px) 24px clamp(56px, 6vw, 88px);
  background: #f7f9fc;
}
section#about_values #values_use {
  max-width: 1200px;
  margin: 0 auto;
}
section#about_values #values_use .container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 32px);
  perspective: 1500px;
}

/* card_wrapper holds two faces */
section#about_values .card_wrapper {
  position: relative;
  aspect-ratio: 3 / 4;
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  cursor: pointer;
}
section#about_values .card_wrapper.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Both faces */
section#about_values .card_wrapper .card {
  position: absolute;
  inset: 0;
  border-radius: 0;
  overflow: hidden;
  backface-visibility: hidden;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--com-card-shadow);
  display: flex;
  flex-direction: column;
}

/* Front faces — colored solid backgrounds (canon /models orange/grey/blue) */
section#about_values .card.first  { background: linear-gradient(135deg, #f7a44a 0%, #ef7d1a 100%); }
section#about_values .card.second { background: linear-gradient(135deg, #8a99a8 0%, #5d6b7a 100%); }
section#about_values .card.third  { background: linear-gradient(135deg, #01b1b0 0%, #005f5e 100%); }

/* Back faces — dark info (canon /models) */
section#about_values .card.is-flipped {
  transform: rotateY(180deg);
  background: #1b2935;
}

/* Wrapper hover — desktop only */
@media (hover: hover) {
  section#about_values .card_wrapper:hover .card:not(.is-flipped) {
    transform: translateY(-6px);
    box-shadow: var(--com-card-shadow-hover);
  }
}

/* When wrapper has .is-flipped class — toggle faces */
section#about_values .card_wrapper.is-flipped .card:not(.is-flipped) {
  transform: rotateY(180deg);
}
section#about_values .card_wrapper.is-flipped .card.is-flipped {
  transform: rotateY(0deg);
}

/* Top section — icon */
section#about_values .card > .top {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px 16px;
}
section#about_values .card > .top .img {
  width: 48%;
  height: 56%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: com-icon-pulse 3.2s ease-in-out infinite;
}
section#about_values .card.second > .top .img { animation-delay: 0.7s; }
section#about_values .card.third  > .top .img { animation-delay: 1.4s; }
section#about_values .card > .top .img svg {
  width: 100%;
  height: 100%;
  fill: rgba(255, 255, 255, 0.94);
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.25));
}
@keyframes com-icon-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* Bottom section — title + description */
section#about_values .card > .bottom {
  background: rgba(0, 0, 0, 0.18);
  padding: 22px 24px 28px;
  text-align: center;
  color: #fff;
}
section#about_values .card > .bottom .title h3 {
  font-family: 'Bebas', 'Bebas Neue', sans-serif;
  font-weight: 500;
  font-size: 30px;
  line-height: 32px;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.20);
}
section#about_values .card > .bottom p {
  font-family: Manrope, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.96);
  margin: 0 0 18px;
}

/* CTA "Подробнее" on front bottom */
section#about_values .card .details {
  display: inline-block;
  padding: 11px 30px;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  font-family: Manrope, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
section#about_values .card .details:hover {
  background: #fff;
  color: var(--aq-text, #1b2935);
  transform: translateY(-2px);
}

/* Back face content */
section#about_values .card.is-flipped .info-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
  padding: 32px 28px;
  color: #fff;
}
section#about_values .card.is-flipped .info-2 p {
  font-family: Manrope, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.94);
  margin: 0 0 20px;
}

@media (max-width: 768px) {
  section#about_values #values_use .container {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin: 0 auto;
  }
  section#about_values .card_wrapper { aspect-ratio: 4 / 3; }
}

/* ----- [06] #about_team — Team description + 2 office cards header ----- */
section#about_team {
  padding: clamp(64px, 7vw, 96px) 24px clamp(56px, 6vw, 80px);
  background: var(--com-band-pale);
  position: relative;
}
section#about_team .team-lead {
  max-width: 900px;
  margin: 0 auto clamp(36px, 4vw, 56px);
  font-family: Manrope, sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6;
  color: var(--aq-text, #1b2935);
  text-align: center;
}
section#about_team .team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  max-width: 1100px;
  margin: 0 auto;
}
section#about_team .team-card {
  background: #fff;
  border-radius: 14px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: var(--com-card-shadow);
  transition: transform .35s ease, box-shadow .35s ease;
}
section#about_team .team-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--com-card-shadow-hover);
}
section#about_team .team-card__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--com-slate) 0%, var(--com-bronze) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
section#about_team .team-card__icon svg {
  width: 32px;
  height: 32px;
  fill: #fff;
}
section#about_team .team-card h3 {
  font-family: 'Bebas', 'Bebas Neue', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--aq-text, #1b2935);
  margin: 0 0 10px;
}
section#about_team .team-card p {
  font-family: Manrope, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  color: var(--aq-text-muted, #6b7c8c);
  margin: 0;
}
@media (max-width: 768px) {
  section#about_team .team-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
}

/* ----- [07] #about_offices — 2 office cards: Kyiv + Kharkiv ----- */
section#about_offices {
  padding: clamp(64px, 7vw, 96px) 24px clamp(56px, 6vw, 80px);
  background: #f7f9fc;
}
section#about_offices .offices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 36px);
  max-width: 1100px;
  margin: 0 auto;
}
section#about_offices .office {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--com-card-shadow);
  transition: transform .35s ease, box-shadow .35s ease;
  position: relative;
}
section#about_offices .office::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--com-slate), var(--com-bronze));
  z-index: 1;
}
section#about_offices .office:hover {
  transform: translateY(-4px);
  box-shadow: var(--com-card-shadow-hover);
}
section#about_offices .office__body { padding: 32px 30px 28px; }
section#about_offices .office__city {
  font-family: 'Bebas', 'Bebas Neue', sans-serif;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--com-slate);
  margin: 0 0 4px;
}
section#about_offices .office__sub {
  font-family: Manrope, sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--com-bronze);
  margin: 0 0 22px;
}
section#about_offices .office__row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}
section#about_offices .office__row svg {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  fill: var(--com-bronze);
}
section#about_offices .office__row span,
section#about_offices .office__row a {
  font-family: Manrope, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--aq-text, #1b2935);
  text-decoration: none;
}
section#about_offices .office__row a:hover { color: var(--aq-orange, #f58025); }

@media (max-width: 768px) {
  section#about_offices .offices { grid-template-columns: 1fr; }
}

/* ----- [08] #about_clients_strip — Slate gradient strip (canon big-los §3.6) ----- */
section#about_clients_strip {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: clamp(56px, 6vw, 88px) 24px;
  background: linear-gradient(135deg, var(--com-strip-from) 0%, var(--com-strip-to) 100%);
  color: #fff;
  text-align: center;
  position: relative;
  isolation: isolate;
  box-shadow:
    inset 0 -24px 36px -24px rgba(0, 0, 0, 0.35),
    0 18px 30px -16px rgba(30, 41, 59, 0.40);
}
section#about_clients_strip .strip-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 36px);
  max-width: 1200px;
  margin: 0 auto;
}
section#about_clients_strip .strip-stat {
  text-align: center;
}
section#about_clients_strip .strip-stat__num {
  font-family: 'Bebas', 'Bebas Neue', sans-serif;
  font-weight: 500;
  font-size: clamp(48px, 6vw, 72px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.30);
}
section#about_clients_strip .strip-stat__label {
  margin-top: 10px;
  font-family: Manrope, sans-serif;
  font-weight: 500;
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}
section#about_clients_strip h2 {
  color: #fff !important;
  margin-bottom: clamp(32px, 4vw, 52px) !important;
}
@media (max-width: 768px) {
  section#about_clients_strip .strip-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ----- [09] #about_partners — Logos marquee (canon big-los) ----- */
section#about_partners {
  padding: clamp(48px, 6vw, 80px) 0 clamp(40px, 5vw, 64px);
  background: #f7f9fc;
  overflow: hidden;
}
section#about_partners h2 { margin-bottom: clamp(28px, 3vw, 44px); }
section#about_partners .marquee {
  display: flex;
  width: max-content;
  animation: com-marquee-slide 45s linear infinite;
  gap: clamp(32px, 4vw, 60px);
  padding: 12px 0;
}
section#about_partners .marquee:hover { animation-play-state: paused; }
section#about_partners .marquee__item {
  flex: 0 0 auto;
  height: clamp(48px, 6vw, 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  filter: grayscale(70%) opacity(0.78);
  transition: filter .4s ease;
  padding: 0 24px;
}
section#about_partners .marquee__item:hover {
  filter: grayscale(0%) opacity(1);
}
section#about_partners .marquee__item .marquee-text {
  font-family: 'Bebas', 'Bebas Neue', sans-serif;
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 32px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--com-slate);
}
@keyframes com-marquee-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ----- [10] #about_certs — 4 cert cards ----- */
section#about_certs {
  padding: clamp(64px, 7vw, 96px) 24px clamp(56px, 6vw, 80px);
  background: var(--com-band-pale-2);
}
section#about_certs .cert-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  max-width: 1200px;
  margin: 0 auto;
}
section#about_certs .cert-card {
  background: #fff;
  border-radius: 12px;
  padding: 32px 24px 28px;
  text-align: center;
  box-shadow: var(--com-card-shadow);
  transition: transform .35s ease, box-shadow .35s ease;
  position: relative;
  overflow: hidden;
}
section#about_certs .cert-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--com-card-shadow-hover);
}
section#about_certs .cert-card__badge {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--com-slate) 0%, var(--com-bronze) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px -8px rgba(30, 41, 59, 0.30);
}
section#about_certs .cert-card__badge svg {
  width: 32px;
  height: 32px;
  fill: #fff;
}
section#about_certs .cert-card h3 {
  font-family: 'Bebas', 'Bebas Neue', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--aq-text, #1b2935);
  margin: 0 0 10px;
}
section#about_certs .cert-card p {
  font-family: Manrope, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--aq-text-muted, #6b7c8c);
  margin: 0;
}
@media (max-width: 768px) {
  section#about_certs .cert-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  section#about_certs .cert-grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
}

/* ----- [11] #about_bridge — Orange CTA pill ----- */
section#about_bridge {
  padding: clamp(56px, 6vw, 88px) 24px clamp(48px, 5vw, 72px);
  background: linear-gradient(135deg, #f58025 0%, #ec5b1f 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}
section#about_bridge::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -10%;
  right: -10%;
  bottom: -20%;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}
section#about_bridge > * { position: relative; z-index: 1; }
section#about_bridge h2 {
  color: #fff !important;
  margin-bottom: clamp(20px, 2vw, 28px) !important;
}
section#about_bridge p {
  font-family: Manrope, sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 auto clamp(28px, 3vw, 40px);
  max-width: 680px;
}
section#about_bridge .bridge-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 44px;
  background: #fff;
  color: var(--com-slate);
  border-radius: 999px;
  font-family: 'Bebas', 'Bebas Neue', sans-serif;
  font-weight: 500;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow:
    0 18px 32px -12px rgba(0, 0, 0, 0.30),
    0 6px 14px -4px rgba(0, 0, 0, 0.18);
  transition: transform .35s ease, box-shadow .35s ease;
}
section#about_bridge .bridge-cta:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 24px 40px -12px rgba(0, 0, 0, 0.36),
    0 10px 20px -4px rgba(0, 0, 0, 0.22);
}
section#about_bridge .bridge-cta svg {
  width: 22px;
  height: 22px;
  fill: var(--com-bronze);
}

/* ============================================================================
 * [N] DARK THEME OVERRIDES
 * ============================================================================ */
html[data-theme="dark"] body.aquatec-site section#about_intro,
html[data-theme="dark"] body.aquatec-site section#about_offices,
html[data-theme="dark"] body.aquatec-site section#about_partners {
  background: var(--aq-bg, #262e3a);
}
html[data-theme="dark"] body.aquatec-site section#about_values {
  background: var(--aq-bg, #262e3a);
}
html[data-theme="dark"] body.aquatec-site section#about_history,
html[data-theme="dark"] body.aquatec-site section#about_certs {
  background: rgba(255, 255, 255, 0.03);
}
html[data-theme="dark"] body.aquatec-site section#about_team {
  background: rgba(167, 128, 80, 0.04);
}
html[data-theme="dark"] body.aquatec-site section#about_intro .stat,
html[data-theme="dark"] body.aquatec-site section#about_team .team-card,
html[data-theme="dark"] body.aquatec-site section#about_offices .office,
html[data-theme="dark"] body.aquatec-site section#about_certs .cert-card {
  background: var(--aq-card-bg, #2d3748) !important;
  color: var(--aq-text, #e8edf3) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] body.aquatec-site section#about_intro .stat__num,
html[data-theme="dark"] body.aquatec-site section#about_offices .office__city,
html[data-theme="dark"] body.aquatec-site section#about_certs .cert-card h3,
html[data-theme="dark"] body.aquatec-site section#about_team .team-card h3,
html[data-theme="dark"] body.aquatec-site section#about_history .milestone__title {
  color: var(--aq-text, #e8edf3) !important;
}
html[data-theme="dark"] body.aquatec-site section#about_intro .stat__label,
html[data-theme="dark"] body.aquatec-site section#about_offices .office__row span,
html[data-theme="dark"] body.aquatec-site section#about_offices .office__row a,
html[data-theme="dark"] body.aquatec-site section#about_certs .cert-card p,
html[data-theme="dark"] body.aquatec-site section#about_team .team-card p,
html[data-theme="dark"] body.aquatec-site section#about_history .milestone__desc,
html[data-theme="dark"] body.aquatec-site section#about_intro .lead,
html[data-theme="dark"] body.aquatec-site section#about_team .team-lead {
  color: var(--aq-text-muted, #a3b2c2) !important;
}
html[data-theme="dark"] body.aquatec-site section#about_intro h2,
html[data-theme="dark"] body.aquatec-site section#about_history h2,
html[data-theme="dark"] body.aquatec-site section#about_values h2,
html[data-theme="dark"] body.aquatec-site section#about_team h2,
html[data-theme="dark"] body.aquatec-site section#about_offices h2,
html[data-theme="dark"] body.aquatec-site section#about_partners h2,
html[data-theme="dark"] body.aquatec-site section#about_certs h2 {
  color: var(--aq-text, #e8edf3) !important;
}
html[data-theme="dark"] body.aquatec-site section#about_partners .marquee__item .marquee-text {
  color: var(--aq-text-muted, #a3b2c2);
}

/* ============================================================================
 * [R] prefers-reduced-motion
 * ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  section#about_values .card_wrapper,
  section#about_values .card,
  section#about_intro .stat,
  section#about_team .team-card,
  section#about_offices .office,
  section#about_certs .cert-card {
    transition: none !important;
  }
  section#about_values .card > .top .img {
    animation: none !important;
  }
  section#about_partners .marquee {
    animation: none !important;
  }
}

/* ============================================================================
 * [POLISH-BG] Body bg gradient limited to 100vh (canon KakVybrat §4.5)
 * Hero gradient should NOT bleed past Hero into rest of page
 * ============================================================================ */
body.aquatec-site.inner {
  background-image: none !important;
  background-color: var(--aq-bg, #f7f9fc) !important;
  background-attachment: scroll !important;
  background-repeat: no-repeat !important;
  background-position: 0 0 !important;
}

/* === COMPANY PAGE SECTIONS END === */


/* ============================================================================
 * [12] #about_factory + [13] #about_team_video — Video sections (Iter 1)
 * ============================================================================ */
section.video-section {
  padding: clamp(56px, 6vw, 88px) 24px clamp(48px, 5vw, 72px);
  background: #f7f9fc;
}
section#about_factory {
  background: var(--com-band-pale);
}
section.video-section h2 {
  text-align: center;
}
section.video-section .video-section__lead {
  max-width: 920px;
  margin: 0 auto clamp(28px, 3vw, 44px);
  font-family: Manrope, sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  color: var(--aq-text, #1b2935);
  text-align: center;
}
section.video-section .video-section__lead strong {
  color: var(--com-bronze);
  font-weight: 700;
}
section.video-section .video-section__player {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: #1b2935;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--com-card-shadow);
  cursor: pointer;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
section.video-section .video-section__player:hover {
  transform: translateY(-3px);
  box-shadow: var(--com-card-shadow-hover);
}
section.video-section .video-section__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.4s ease, transform 6s ease;
}
section.video-section .video-section__player:hover .video-section__poster {
  filter: brightness(0.85);
  transform: scale(1.04);
}
section.video-section .video-section__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(245, 128, 37, 0.95);
  border: 4px solid rgba(255, 255, 255, 0.92);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow:
    0 18px 36px -10px rgba(0, 0, 0, 0.45),
    0 0 0 0 rgba(245, 128, 37, 0.6);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  animation: video-play-pulse 2.4s ease-in-out infinite;
}
section.video-section .video-section__play svg {
  width: 38px;
  height: 38px;
  fill: #fff;
  margin-left: 4px; /* optical center for triangle */
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}
section.video-section .video-section__player:hover .video-section__play {
  transform: translate(-50%, -50%) scale(1.08);
}
@keyframes video-play-pulse {
  0%, 100% {
    box-shadow:
      0 18px 36px -10px rgba(0, 0, 0, 0.45),
      0 0 0 0 rgba(245, 128, 37, 0.55);
  }
  50% {
    box-shadow:
      0 18px 36px -10px rgba(0, 0, 0, 0.45),
      0 0 0 22px rgba(245, 128, 37, 0);
  }
}
section.video-section .video-section__caption {
  position: absolute;
  left: 16px;
  bottom: 14px;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border-radius: 999px;
  font-family: Manrope, sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}
section.video-section video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 600px) {
  section.video-section .video-section__play {
    width: 72px;
    height: 72px;
  }
  section.video-section .video-section__play svg {
    width: 28px;
    height: 28px;
  }
  section.video-section .video-section__caption {
    font-size: 12px;
    padding: 5px 12px;
  }
}

/* Dark theme */
html[data-theme="dark"] body.aquatec-site section#about_factory {
  background: rgba(167, 128, 80, 0.04);
}
html[data-theme="dark"] body.aquatec-site section#about_team_video {
  background: var(--aq-bg, #262e3a);
}
html[data-theme="dark"] body.aquatec-site section.video-section .video-section__lead {
  color: var(--aq-text-muted, #a3b2c2) !important;
}

@media (prefers-reduced-motion: reduce) {
  section.video-section .video-section__play {
    animation: none !important;
  }
  section.video-section .video-section__poster {
    transition: none !important;
  }
}



/* ============================================================================
 * Iter 2 — #about_values blue banner (matches prod Image 1)
 * ============================================================================ */
body.aquatec-site section#about_values {
  background: #276cba !important;
  padding-top: clamp(56px, 6vw, 88px) !important;
  padding-bottom: clamp(56px, 6vw, 88px) !important;
}
body.aquatec-site section#about_values h2 {
  color: #fff !important;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}
body.aquatec-site section#about_values h2 hr {
  background: var(--aq-orange, #f58025) !important;
}
/* Intentionally preserved across themes */
html[data-theme="dark"] body.aquatec-site section#about_values {
  background: #276cba !important;
}
html[data-theme="dark"] body.aquatec-site section#about_values h2 {
  color: #fff !important;
}


/* ============================================================================
 * Iter 3 — Flipcard PNG icons (replaces inline SVG)
 * ============================================================================ */
/* Container size bump for PNG illustrations (prod-matching) */
body.aquatec-site section#about_values .card > .top .img {
  width: 70% !important;
  height: 70% !important;
}
/* PNG icon styling: scale to container, preserve aspect, soft shadow */
body.aquatec-site section#about_values .card > .top .img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.30));
  display: block;
}
/* Disable color filter that previously applied to SVG fill */
body.aquatec-site section#about_values .card > .top .img img {
  fill: unset;
}

/* ============================================================================
 * Iter 6 — Vibrant Timeline — colored milestones, glow, drawing line
 * Higher specificity via html body.aquatec-site overrides [04] history block
 * ============================================================================ */

/* ----- Section compaction: less vertical padding ----- */
html body.aquatec-site section#about_history {
  padding-top: clamp(48px, 5vw, 72px);
  padding-bottom: clamp(40px, 4vw, 64px);
}

/* ----- Per-milestone color tokens (13 epochs of growth) ----- */
html body.aquatec-site section#about_history .ms:nth-of-type(1)  { --ms-from: #f97316; --ms-to: #ea580c; } /* 2004 — birth, orange */
html body.aquatec-site section#about_history .ms:nth-of-type(2)  { --ms-from: #fbbf24; --ms-to: #d97706; } /* 2005 — gold spark */
html body.aquatec-site section#about_history .ms:nth-of-type(3)  { --ms-from: #fb923c; --ms-to: #ea580c; } /* 2006-07 — first deals */
html body.aquatec-site section#about_history .ms:nth-of-type(4)  { --ms-from: #06b6d4; --ms-to: #0891b2; } /* 2008 — official rep cyan */
html body.aquatec-site section#about_history .ms:nth-of-type(5)  { --ms-from: #3b82f6; --ms-to: #1d4ed8; } /* 2009 — expansion blue */
html body.aquatec-site section#about_history .ms:nth-of-type(6)  { --ms-from: #ec4899; --ms-to: #be185d; } /* 2010 — charity pink */
html body.aquatec-site section#about_history .ms:nth-of-type(7)  { --ms-from: #a855f7; --ms-to: #7c3aed; } /* 2011-13 — Odessa purple */
html body.aquatec-site section#about_history .ms:nth-of-type(8)  { --ms-from: #6366f1; --ms-to: #4338ca; } /* 2014-15 — crisis indigo */
html body.aquatec-site section#about_history .ms:nth-of-type(9)  { --ms-from: #14b8a6; --ms-to: #0d9488; } /* 2016-17 — polypropylene teal */
html body.aquatec-site section#about_history .ms:nth-of-type(10) { --ms-from: #10b981; --ms-to: #047857; } /* 2018-19 — new models green */
html body.aquatec-site section#about_history .ms:nth-of-type(11) { --ms-from: #22c55e; --ms-to: #15803d; } /* 2020-21 — boom bright green */
html body.aquatec-site section#about_history .ms:nth-of-type(12) { --ms-from: #fbbf24; --ms-to: #d97706; } /* 2022-23 — war gold (resilience) */
html body.aquatec-site section#about_history .ms:nth-of-type(13) { --ms-from: #f59e0b; --ms-to: #ea580c; } /* 2024-25 — prosperity flame */

/* ----- Vertical line: rainbow gradient instead of slate→bronze ----- */
html body.aquatec-site section#about_history .timeline-zigzag::before {
  width: 4px;
  background: linear-gradient(180deg,
    #f97316 0%,    /* 2004 */
    #fbbf24 8%,    /* 2005 */
    #fb923c 16%,   /* 2006-07 */
    #06b6d4 24%,   /* 2008 */
    #3b82f6 32%,   /* 2009 */
    #ec4899 40%,   /* 2010 */
    #a855f7 48%,   /* 2011-13 */
    #6366f1 56%,   /* 2014-15 */
    #14b8a6 64%,   /* 2016-17 */
    #10b981 72%,   /* 2018-19 */
    #22c55e 80%,   /* 2020-21 */
    #fbbf24 88%,   /* 2022-23 */
    #f59e0b 100%   /* 2024-25 */
  );
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
  border-radius: 2px;
}

/* ----- Compact spacing between milestones ----- */
html body.aquatec-site section#about_history .ms {
  margin-bottom: clamp(14px, 1.8vw, 28px);
  grid-template-columns: 1fr 112px 1fr;
}

/* ----- Bigger, brighter year dots ----- */
html body.aquatec-site section#about_history .ms__year {
  width: 112px;
  height: 112px;
  background: linear-gradient(135deg, var(--ms-from) 0%, var(--ms-to) 100%);
  font-family: 'Bebas', 'Bebas Neue', sans-serif;
  font-size: 30px;
  letter-spacing: 0.03em;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  box-shadow:
    0 18px 36px -10px color-mix(in srgb, var(--ms-from) 55%, transparent),
    0 0 0 7px #fff,
    0 0 0 9px color-mix(in srgb, var(--ms-from) 25%, transparent),
    inset 0 -8px 18px rgba(0, 0, 0, 0.18),
    inset 0 4px 12px rgba(255, 255, 255, 0.28);
  position: relative;
  z-index: 2;
}

/* Glowing aura ring around dot when card visible */
html body.aquatec-site section#about_history .ms__year::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--ms-from) 35%, transparent) 0%,
    transparent 70%);
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: -1;
  pointer-events: none;
}
html body.aquatec-site section#about_history .ms.is-visible .ms__year::after {
  opacity: 1;
  animation: ms-dot-pulse 3s ease-in-out infinite;
}
@keyframes ms-dot-pulse {
  0%, 100% { transform: scale(1); opacity: 0.65; }
  50%      { transform: scale(1.25); opacity: 1; }
}

/* ----- Cards: white with gradient left accent + colored aura ----- */
html body.aquatec-site section#about_history .ms__body {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, var(--ms-from), var(--ms-to)) border-box;
  border: 2px solid transparent;
  border-radius: 16px;
  padding: 18px 24px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 14px 28px -10px color-mix(in srgb, var(--ms-from) 28%, transparent),
    0 4px 10px -4px rgba(15, 35, 56, 0.08);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.4s ease;
}

/* Inner top-left "highlight beam" (subtle gradient sheen) */
html body.aquatec-site section#about_history .ms__body::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ms-from), var(--ms-to));
  opacity: 0.85;
}

/* Shimmer effect on first appearance */
html body.aquatec-site section#about_history .ms.is-visible .ms__body {
  animation: ms-shimmer-in 1.2s ease-out;
}
@keyframes ms-shimmer-in {
  0% {
    box-shadow:
      0 14px 28px -10px color-mix(in srgb, var(--ms-from) 28%, transparent),
      0 0 0 0 color-mix(in srgb, var(--ms-from) 0%, transparent),
      0 4px 10px -4px rgba(15, 35, 56, 0.08);
  }
  35% {
    box-shadow:
      0 14px 28px -10px color-mix(in srgb, var(--ms-from) 28%, transparent),
      0 0 40px -8px color-mix(in srgb, var(--ms-to) 80%, transparent),
      0 4px 10px -4px rgba(15, 35, 56, 0.08);
  }
  100% {
    box-shadow:
      0 14px 28px -10px color-mix(in srgb, var(--ms-from) 28%, transparent),
      0 0 0 0 color-mix(in srgb, var(--ms-from) 0%, transparent),
      0 4px 10px -4px rgba(15, 35, 56, 0.08);
  }
}

/* Hover — intensified, brand-tinted glow */
html body.aquatec-site section#about_history .ms__body:hover {
  transform: translateY(-5px) scale(1.015);
  box-shadow:
    0 24px 44px -12px color-mix(in srgb, var(--ms-from) 50%, transparent),
    0 0 26px -4px color-mix(in srgb, var(--ms-to) 35%, transparent),
    0 6px 14px -4px rgba(15, 35, 56, 0.12);
}

/* Tail pointer — match card color accent */
html body.aquatec-site section#about_history .ms__body::before {
  background: #fff;
  border-top: 2px solid transparent;
  border-right: 2px solid transparent;
  border-image: linear-gradient(135deg, var(--ms-from), var(--ms-to)) 1;
  width: 16px;
  height: 16px;
}

/* ----- Body text: slightly larger and tighter ----- */
html body.aquatec-site section#about_history .ms__body p {
  font-size: 17px;
  line-height: 1.55;
  color: #1b2935;
  margin: 0;
}

/* ----- Dark theme — keep gradients, adapt card bg ----- */
html[data-theme="dark"] body.aquatec-site section#about_history .ms__body {
  background:
    linear-gradient(#2d3748, #2d3748) padding-box,
    linear-gradient(135deg, var(--ms-from), var(--ms-to)) border-box;
}
html[data-theme="dark"] body.aquatec-site section#about_history .ms__body p {
  color: #e8edf3;
}
html[data-theme="dark"] body.aquatec-site section#about_history .ms__body::before {
  background: #2d3748;
}

/* ----- Mobile — keep gradient, compact ----- */
@media (max-width: 768px) {
  html body.aquatec-site section#about_history .ms {
    grid-template-columns: 88px 1fr;
    gap: 14px;
    margin-bottom: 16px;
  }
  html body.aquatec-site section#about_history .ms__year {
    width: 88px;
    height: 88px;
    font-size: 22px;
  }
  html body.aquatec-site section#about_history .timeline-zigzag::before {
    left: 44px;
  }
  html body.aquatec-site section#about_history .ms__body {
    padding: 16px 18px;
  }
  html body.aquatec-site section#about_history .ms__body p {
    font-size: 15px;
  }
}

/* ----- Reduced motion — strip animations only, keep colors ----- */
@media (prefers-reduced-motion: reduce) {
  html body.aquatec-site section#about_history .ms.is-visible .ms__year::after,
  html body.aquatec-site section#about_history .ms.is-visible .ms__body {
    animation: none !important;
  }
  html body.aquatec-site section#about_history .ms__body:hover {
    transform: none !important;
  }
}


/* ============================================================================
 * Iter 7 — Timeline polish (canon font 20px + dot fit + new anim + bg fix)
 * ============================================================================ */

/* ----- Canon font 20px on card body ----- */
html body.aquatec-site section#about_history .ms__body p {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 20px !important;
  line-height: 1.5 !important;
  font-weight: 400;
  color: #1b2935;
}
html[data-theme="dark"] body.aquatec-site section#about_history .ms__body p {
  color: #e8edf3;
}

/* ----- Dot fits 2-period years ----- */
html body.aquatec-site section#about_history .ms {
  grid-template-columns: 1fr 120px 1fr;
}
html body.aquatec-site section#about_history .ms__year {
  width: 120px;
  height: 120px;
  font-size: 28px;
  letter-spacing: 0.02em;
  font-feature-settings: "tnum" 1;  /* tabular numerals for nicer fit */
}

/* ----- Remove the right-side triangle pointer ----- */
html body.aquatec-site section#about_history .ms__body::before {
  display: none !important;
}

/* ----- New slide-in animation: cards arrive from opposite sides ----- */
html body.aquatec-site section#about_history .ms {
  opacity: 0;
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
html body.aquatec-site section#about_history .ms--left {
  transform: translateX(-60px) scale(0.96);
}
html body.aquatec-site section#about_history .ms--right {
  transform: translateX(60px) scale(0.96);
}
html body.aquatec-site section#about_history .ms.is-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* Mobile single column → slide from left only, more subtle */
@media (max-width: 768px) {
  html body.aquatec-site section#about_history .ms,
  html body.aquatec-site section#about_history .ms--left,
  html body.aquatec-site section#about_history .ms--right {
    transform: translateX(-20px) scale(1);
  }
  html body.aquatec-site section#about_history .ms.is-visible {
    transform: translateX(0) scale(1);
  }
  html body.aquatec-site section#about_history .ms__year {
    width: 92px;
    height: 92px;
    font-size: 21px;
  }
  html body.aquatec-site section#about_history .timeline-zigzag::before {
    left: 46px;
  }
  html body.aquatec-site section#about_history .ms {
    grid-template-columns: 92px 1fr;
  }
  html body.aquatec-site section#about_history .ms__body p {
    font-size: 17px !important;
  }
}

/* ============================================================================
 * Iter 7 — Body bg bleed fix (canon KakVybrat §4.5 POLISH-BG longhand)
 * Hero gradient must NOT continue past Hero into footer area
 * ============================================================================ */
html body.aquatec-site,
html body.aquatec-site.inner,
html body.aquatec-site.com-page {
  background-image: none !important;
  background-color: var(--aq-bg, #f7f9fc) !important;
  background-attachment: scroll !important;
  background-repeat: no-repeat !important;
  background-position: 0 0 !important;
  background-size: auto !important;
}
html[data-theme="dark"] body.aquatec-site,
html[data-theme="dark"] body.aquatec-site.inner {
  background-image: none !important;
  background-color: #262e3a !important;
}


/* ============================================================================
 * Iter 8 — body bg specificity beat (POLISH-BG canon)
 * Generator wrote at line ~194:
 *   body.aquatec-site.inner:has(#corner) { background: linear-gradient(...) }
 * Specificity 0,3,1 — beats our Iter 7 POLISH-BG (0,2,2).
 * Add html prefix to match :has + win on count, kill bg-image entirely.
 * ============================================================================ */
html body.aquatec-site.inner:has(#corner),
html[data-theme="dark"] body.aquatec-site.inner:has(#corner) {
  background-image: none !important;
  background-color: var(--aq-bg, #f7f9fc) !important;
  background-attachment: scroll !important;
  background-repeat: no-repeat !important;
}
html[data-theme="dark"] body.aquatec-site.inner:has(#corner) {
  background-color: #262e3a !important;
}

/* ============================================================================
 * Iter 9 — H2 canon wildcard for ALL about_* sections
 * Previously [02] whitelist missed #about_factory + #about_team_video (Iter 1).
 * Wildcard guarantees Bebas H2 on any future about_* section too.
 * ============================================================================ */
html body.aquatec-site section[id^="about_"] h2 {
  font-family: 'Bebas', 'Bebas Neue', sans-serif !important;
  font-weight: 500;
  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1.18 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  color: var(--aq-text, #1b2935) !important;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.15) !important;
  margin: 0 auto clamp(32px, 4vw, 56px) !important;
  max-width: var(--aq-container, 1366px) !important;
  padding: 0 24px !important;
  position: relative;
}
html body.aquatec-site section[id^="about_"] h2 hr {
  display: block !important;
  width: 56px !important;
  height: 4px !important;
  margin: 0 auto 18px !important;
  background: var(--aq-orange, #f58025) !important;
  border: 0 !important;
  border-radius: 2px !important;
}
/* H2 on dark/colored sections — white text (already covered, repeat to be safe) */
html body.aquatec-site section#about_values h2,
html body.aquatec-site section#about_clients_strip h2,
html body.aquatec-site section#about_bridge h2 {
  color: #fff !important;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}
/* Dark theme */
html[data-theme="dark"] body.aquatec-site section[id^="about_"] h2 {
  color: var(--aq-text, #e8edf3) !important;
}
html[data-theme="dark"] body.aquatec-site section#about_values h2,
html[data-theme="dark"] body.aquatec-site section#about_clients_strip h2,
html[data-theme="dark"] body.aquatec-site section#about_bridge h2 {
  color: #fff !important;
}

/* ============================================================================
 * Iter 10 — Hero transparent header fix (restore body bg, constrain to 80px)
 *
 * Iter 8 mistakenly used `background-image: none` to kill the bronze stripe
 * before footer. But transparent Hero header NEEDS body bg gradient to show
 * through it — otherwise white gap appears between header and Hero.
 *
 * Correct approach: keep gradient, constrain via background-size to header
 * height only. Result:
 *   - 0..80px (behind transparent header): gradient visible — Hero look intact
 *   - 80px..bottom: bg-color (#f7f9fc) — no bronze stripe before footer
 *
 * Specificity 0,3,2 (html + 3 classes + :has + #corner element ref) — wins
 * over generator's 0,3,1 and over my own Iter 8.
 * ============================================================================ */
html body.aquatec-site.inner:has(#corner) {
  background-image: linear-gradient(to right, #1e293b 0%, #a78050 100%) !important;
  background-color: var(--aq-bg, #f7f9fc) !important;
  background-attachment: scroll !important;
  background-repeat: no-repeat !important;
  background-size: 100% var(--aq-header-h, 80px) !important;
  background-position: 0 0 !important;
}
html[data-theme="dark"] body.aquatec-site.inner:has(#corner) {
  background-image: linear-gradient(to right, #1e293b 0%, #a78050 100%) !important;
  background-color: #262e3a !important;
  background-attachment: scroll !important;
  background-repeat: no-repeat !important;
  background-size: 100% var(--aq-header-h, 80px) !important;
  background-position: 0 0 !important;
}

/* ============================================================================
 * Iter 12 — bg 100vh + force-zero parent paddings
 *
 * Iter 10's bg-size 100% 80px left a 5-15px hard-transition seam between
 * body gradient end (80px) and Hero polygon top (slightly below 80px due to
 * possible padding on .item-page / .com-content-article from Joomla defaults).
 * Extending gradient to 100vh covers any gap entirely. Below 100vh = bg-color.
 * Main #f7f9fc covers everything past the visible viewport, so no bronze
 * stripe reappears before footer.
 * ============================================================================ */
html body.aquatec-site.inner:has(#corner) {
  background-image: linear-gradient(to right, #1e293b 0%, #a78050 100%) !important;
  background-color: #f7f9fc !important;
  background-attachment: scroll !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100vh !important;
  background-position: 0 0 !important;
}
html[data-theme="dark"] body.aquatec-site.inner:has(#corner) {
  background-color: #262e3a !important;
}

/* Brute-force kill padding/margin on all containers between body and #corner */
html body.aquatec-site.inner:has(#corner) #main,
html body.aquatec-site.inner:has(#corner) main,
html body.aquatec-site.inner:has(#corner) main.site-main,
html body.aquatec-site.inner:has(#corner) .com-content,
html body.aquatec-site.inner:has(#corner) .com-content-article,
html body.aquatec-site.inner:has(#corner) .com-content-article > .item-page,
html body.aquatec-site.inner:has(#corner) .item-page,
html body.aquatec-site.inner:has(#corner) #system-message-container,
html body.aquatec-site.inner:has(#corner) .page-header,
html body.aquatec-site.inner:has(#corner) .container-component {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Bulletproof #corner margin-top */
html body.aquatec-site.inner:has(#corner) #corner {
  margin-top: -80px !important;
}

/* ============================================================================
 * Iter 13 — dark main bg shorthand (fix bronze stripe in dark mode)
 *
 * Iter 1 [01] block used shorthand `background: #f7f9fc` for light main
 * but only longhand `background-color: var(--aq-bg)` for dark main.
 * In dark mode bg-image stayed as Cassiopeia default (transparent or none),
 * making body gradient bleed through main on full page height.
 * Use shorthand `background: #262e3a` to reset all bg-* properties on dark.
 * ============================================================================ */
html[data-theme="dark"] body.aquatec-site main,
html[data-theme="dark"] body.aquatec-site main#main,
html[data-theme="dark"] body.aquatec-site main.site-main,
html[data-theme="dark"] body.aquatec-site main#main.site-main,
html[data-theme="dark"] body.aquatec-site.inner main,
html[data-theme="dark"] body.aquatec-site.inner main.site-main {
  background: #262e3a !important;
}

/* ============================================================================
 * Iter 14 — dark main mirror gradient (eliminate Hero gap contrast)
 *
 * Iter 13 set main bg = #262e3a in dark mode, but main covers body gradient
 * everywhere except behind transparent header. Between header bottom (y=80)
 * and Hero polygon visible top edge — main shows #262e3a, contrasting
 * sharply with body bronze gradient on right → dark horizontal stripe.
 *
 * Solution: mirror body bg gradient onto main in dark mode too. Same gradient
 * spans 100vh on both layers → no contrast between them in Hero zone.
 * Below 100vh: main bg = #262e3a solid (matching dark sections).
 * ============================================================================ */
html[data-theme="dark"] body.aquatec-site main,
html[data-theme="dark"] body.aquatec-site main#main,
html[data-theme="dark"] body.aquatec-site main.site-main,
html[data-theme="dark"] body.aquatec-site main#main.site-main,
html[data-theme="dark"] body.aquatec-site.inner main,
html[data-theme="dark"] body.aquatec-site.inner main.site-main {
  background-image: linear-gradient(to right, #1e293b 0%, #a78050 100%) !important;
  background-color: #262e3a !important;
  background-attachment: scroll !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100vh !important;
  background-position: 0 0 !important;
}

/* ============================================================================
 * Iter 15 — final dark fix: main transparent + sections opaque
 *
 * Iter 13 (main bg = #262e3a) → dark stripe between header and Hero polygon
 *   (main color contrasts with bronze gradient at right).
 * Iter 14 (main bg = gradient 100vh) → bronze bleeds 100-200px below Hero
 *   polygon, into #about_factory zone (visible as bronze stripe).
 *
 * Correct: main = TRANSPARENT in dark. Body gradient shows continuously
 * through main in Hero zone. Sections must be opaque dark to prevent
 * gradient bleeding into their content areas.
 * ============================================================================ */

/* 1. Main transparent in dark — body gradient shows continuous in Hero zone */
html[data-theme="dark"] body.aquatec-site main,
html[data-theme="dark"] body.aquatec-site main#main,
html[data-theme="dark"] body.aquatec-site main.site-main,
html[data-theme="dark"] body.aquatec-site main#main.site-main,
html[data-theme="dark"] body.aquatec-site.inner main,
html[data-theme="dark"] body.aquatec-site.inner main.site-main {
  background: transparent !important;
}

/* 2. Dark sections opaque — prevent body gradient bleed into about_factory etc */
html[data-theme="dark"] body.aquatec-site section#about_factory,
html[data-theme="dark"] body.aquatec-site section#about_history,
html[data-theme="dark"] body.aquatec-site section#about_team_video {
  background-color: #262e3a !important;
}
/* #about_values stays blue #276cba per Iter 2 — do NOT touch */


/* ============================================================================
 * Iter 16 — bg-size 100vh DEFINITIVE
 *
 * DevTools showed bg-size = "100% 80px" despite Iter 12 setting 100vh.
 * Iter 10's "100% var(--aq-header-h, 80px)" wins cascade somehow.
 * Force 100vh with cascade-latest position + dark variant explicit override.
 *
 * Root cause of Vasyl's stripe: 12px gap at y=80..92 in dark mode showed
 * body bg-color #262e3a (because gradient ended at 80px). Extending gradient
 * to 100vh covers the gap with continuous gradient.
 * ============================================================================ */
html body.aquatec-site.inner:has(#corner),
html[data-theme="dark"] body.aquatec-site.inner:has(#corner) {
  background-size: 100% 100vh !important;
}

/* ============================================================================
 * Iter 17 — close right-side gradient corner (dark mode "квадрат")
 *
 * Iter 16 fixed the 12px header-to-Hero gap, but exposed a new artifact:
 * body bg gradient (100% × 100vh) extends beyond Hero polygon on the right
 * (where polygon ends within container width but gradient extends to viewport
 * edge) AND below Hero (where gradient continues until 100vh, but sections
 * sit in container width too, leaving viewport-edge strips visible).
 * Sharp transition at y=100vh where bg-color #262e3a kicks in → "квадрат".
 *
 * Triple fix:
 *   1. Shrink body bg-size to Hero height (~600px) — gradient stays in Hero zone
 *   2. Hero #corner forced full-bleed (covers edges in Hero zone)
 *   3. Sections forced full-bleed (covers edges in section zones)
 * ============================================================================ */

/* 1. Body bg-size — match header zone only, transition to bg-color below */
html body.aquatec-site.inner:has(#corner),
html[data-theme="dark"] body.aquatec-site.inner:has(#corner) {
  background-size: 100% 120px !important;
}

/* 2. Hero #corner full-bleed (canon, but explicit override) */
html body.aquatec-site.inner:has(#corner) #corner {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  box-sizing: border-box !important;
}

/* 3. Sections full-bleed — bg covers viewport edges, content stays centered
      via inner container/padding constraints (sections wrap content with
      its own max-width so this only extends background, not content width) */
html body.aquatec-site section#about_factory,
html body.aquatec-site section#about_values,
html body.aquatec-site section#about_team_video,
html body.aquatec-site section#about_history {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box !important;
}

/* ============================================================================
 * Iter 18 — Close right-side gradient corner wedge under Hero slant in dark mode
 * Background color applied to #corner itself to paint behind transparent parts
 * of the slanted SVG, matching light/dark page backgrounds respectively.
 * ============================================================================ */
#corner {
  background-color: transparent !important;
}
html[data-theme="dark"] #corner {
  background-color: transparent !important;
}

/* ============================================================================
 * Iter 19 — Premium Charity Callout Card inside Team section
 * ============================================================================ */
.video-section__charity-card {
  max-width: 980px;
  margin: 48px auto 0;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 32px;
  background: rgba(27, 41, 53, 0.03);
  border: 1px solid rgba(0, 174, 238, 0.15);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02), inset 0 1px 2px rgba(255, 255, 255, 0.6);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  text-align: left;
}
.video-section__charity-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(0, 174, 238, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 174, 238, 0.3);
}

/* Dark mode glassmorphism */
html[data-theme="dark"] .video-section__charity-card {
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.05) !important;
}
html[data-theme="dark"] .video-section__charity-card:hover {
  border-color: rgba(0, 174, 238, 0.25) !important;
  box-shadow: 0 15px 35px rgba(0, 174, 238, 0.12) !important;
}

.video-section__charity-logo-wrapper {
  flex: 0 0 100px;
  width: 100px;
  height: 50px;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.video-section__charity-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

.video-section__charity-content {
  flex: 1 1 auto;
}
.video-section__charity-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 20px;
  line-height: 1.3;
  color: var(--aq-text, #1b2935);
  margin: 0 0 8px;
  text-transform: none;
  letter-spacing: normal;
}
html[data-theme="dark"] .video-section__charity-title {
  color: #fff !important;
}

.video-section__charity-desc {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: var(--aq-text-muted, #6b7c8c);
  margin: 0;
}
html[data-theme="dark"] .video-section__charity-desc {
  color: var(--aq-text-muted, #a3b2c2) !important;
}

.video-section__charity-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  background: linear-gradient(135deg, #f58025 0%, #ec5b1f 100%);
  color: #fff !important;
  border-radius: 30px;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  text-decoration: none;
  box-shadow: 0 8px 16px rgba(245, 128, 37, 0.25);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.video-section__charity-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 20px rgba(245, 128, 37, 0.35);
}
.video-section__charity-btn svg {
  width: 16px;
  height: 16px;
  fill: #fff;
  transition: transform 0.3s ease;
}
.video-section__charity-btn:hover svg {
  transform: translateX(3px);
}

@media (max-width: 860px) {
  .video-section__charity-card {
    flex-direction: column;
    text-align: center;
    gap: 20px;
    padding: 28px 20px;
  }
  .video-section__charity-logo-wrapper {
    margin: 0 auto;
  }
  .video-section__charity-btn {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }
}