:root {
  --brand-teal: #4bc0c8;
  --brand-teal-light: #96d6da;
  --brand-teal-pale: #c9ecef;
  --brand-orange: #feac5e;
  --brand-purple: #c779d0;
  --brand-muted: #aaaaaa;
  --brand-dark: #323333;
  --gradient-cta: linear-gradient(130deg, #feac5e 0%, #c779d0 51%, #4bc0c8 100%);
  --gradient-cta-hover: linear-gradient(130deg, #feac5e 0%, #eb9a86 0%, #c779d0 21%, #4bc0c8 100%);
  --content-width: 980px;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  color: var(--brand-dark);
  background: #fff;
}

.btn-gradient {
  background: var(--gradient-cta);
  transition: background 0.2s ease, padding 0.2s ease;
}

.btn-gradient:hover {
  background: var(--gradient-cta-hover);
  padding-bottom: 4px;
}

.btn-teal {
  background: var(--brand-teal);
  transition: background 0.2s ease;
}

.btn-teal:hover {
  background: var(--brand-teal-light);
}

.hero-section {
  background-color: var(--brand-teal-pale);
  background-image: url('../img/hero-bg.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.page-top {
  background-color: var(--brand-teal-pale);
  background-image: url('../img/page-top-bg.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  min-height: 140px;
}

.main-decor {
  background-image: url('../img/bg-main.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.about-decor {
  background-image: url('../img/about/bg.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: contain;
}

.expertise-decor {
  background-image: url('../img/expertise/bg.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.footer-section {
  background-image: url('../img/footer-bg.png');
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
}

.value-card,
.service-card,
.content-card {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 2rem;
  box-shadow: 0 8px 40px rgba(75, 192, 200, 0.18);
  backdrop-filter: blur(2px);
}

.legal-prose h2,
.legal-prose h3 {
  color: var(--brand-teal);
  font-weight: 700;
}

.legal-prose h2 {
  font-size: 42px;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 2rem;
}

.legal-prose h3 {
  font-size: 24px;
  line-height: 1.4;
  margin: 2rem 0 0.75rem;
}

.legal-prose p,
.legal-prose li {
  color: var(--brand-muted);
  font-size: 16px;
  line-height: 1.5;
}

.legal-prose ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0.75rem 0 1rem;
}

.legal-prose a {
  color: var(--brand-teal);
  text-decoration: underline;
}

.lang-menu[hidden],
.mobile-nav[hidden] {
  display: none;
}

#site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(75, 192, 200, 0.15);
}

#site-header.is-scrolled .nav-link:not(.is-active) {
  color: #4bc0c8;
  text-shadow: none;
}

#site-header.is-scrolled #lang-toggle {
  color: #4bc0c8;
  text-shadow: none;
}

.nav-link.is-active {
  color: #4bc0c8;
}

/* Scroll / entrance animations */
.reveal {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-left {
  opacity: 0;
  transform: translate3d(-48px, 0, 0);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-right {
  opacity: 0;
  transform: translate3d(48px, 0, 0);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
.reveal-delay-5 { transition-delay: 0.4s; }
.reveal-delay-6 { transition-delay: 0.48s; }
.reveal-delay-7 { transition-delay: 0.56s; }
.reveal-delay-8 { transition-delay: 0.64s; }

.hero-section h1,
.hero-section .btn-gradient {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-section h1.is-visible,
.hero-section .btn-gradient.is-visible {
  opacity: 1;
  transform: none;
}

.hero-section .btn-gradient.is-visible {
  transition-delay: 0.15s;
}

.hero-decor img {
  opacity: 0;
  animation:
    hero-fade-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    float-soft 5s ease-in-out 0.8s infinite;
}

.hero-decor img:nth-child(1) { animation-delay: 0.15s, 0.95s; }
.hero-decor img:nth-child(2) { animation-delay: 0.25s, 1.1s; animation-duration: 0.8s, 5.6s; }
.hero-decor img:nth-child(3) { animation-delay: 0.1s, 0.9s; animation-duration: 0.9s, 6.2s; }
.hero-decor img:nth-child(4) { animation-delay: 0.35s, 1.2s; }
.hero-decor img:nth-child(5) { animation-delay: 0.3s, 1.05s; animation-duration: 0.8s, 5.4s; }
.hero-decor img:nth-child(6) { animation-delay: 0.4s, 1.25s; }
.hero-decor img:nth-child(7) { animation-delay: 0.45s, 1.3s; animation-duration: 0.8s, 5.8s; }
.hero-decor img:nth-child(8) { animation-delay: 0.5s, 1.35s; }

@keyframes hero-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes float-soft {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -12px, 0);
  }
}

.service-card,
.value-card,
.content-card {
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease;
}

.service-card.is-visible:hover,
.value-card.is-visible:hover,
.content-card.is-visible:hover {
  transform: translate3d(0, -8px, 0);
  box-shadow: 0 16px 48px rgba(75, 192, 200, 0.28);
}

@media (max-width: 979px) {
  .hero-decor {
    display: none;
  }
}

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

  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .hero-section h1,
  .hero-section .btn-gradient,
  .service-card,
  .value-card,
  .content-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero-decor img {
    opacity: 1 !important;
    animation: none !important;
  }
}