:root {
  --prisdent-bg-image: url("/assets/prisdent/images/bg.jpg");
  --color-primary: #b8d4e3;
  --color-primary-dark: #9ba9b5;
  --color-primary-light: #d4e8f0;
  --color-pure-white: #ffffff;
  --color-white: #ffffff;
  --color-cloud: #ebebeb;
  --color-light-grey: #f5f5f5;
  --color-medium-grey: #9e9e9e;
  --color-charcoal: #303030;
  --color-dark-grey: #5a5a5a;
  --shadow-card: 0 2px 8px rgba(48, 48, 48, 0.08);
  --shadow-hover: 0 12px 24px rgba(48, 48, 48, 0.12);
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-pill: 9999px;
  /* design-system.json — typography tokens (Urbanist) */
  --font-family: "Urbanist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-display-size: 3.75rem;
  --ds-h1-size: 3rem;
  --ds-h2-size: 2.25rem;
  --ds-h3-size: 1.875rem;
  --ds-title-rule: 0.1875rem;
}

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

html,
body {
  margin: 0;
  padding: 0;
}

/*
 * Nimic nu trebuie să poată împinge pagina lateral.
 *
 * Pusă pe elementul rădăcină, valoarea se propagă la fereastră, iar `html` nu
 * devine el însuși container de derulare — deci `position: sticky` continuă să
 * se raporteze la fereastră (bara laterală de la serviciu, sub-navigația).
 * Pe `body` ar fi fost riscant, de aceea nu este acolo.
 *
 * Două declarații: `hidden` pentru browserele fără `clip`, apoi `clip`, care
 * nu creează container de derulare deloc.
 */
html {
  overflow-x: hidden;
  overflow-x: clip;
}

html {
  scroll-behavior: smooth;
}

#acasa,
#despre,
#servicii,
#avantaje,
#specialisti,
#certificate,
#intrebari,
#contact {
  scroll-margin-top: clamp(5.5rem, 9vw, 7.5rem);
}

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

body {
  min-height: 100vh;
  font-family: var(--font-family);
  color: var(--color-charcoal);
}

.page {
  width: min(1820px, 96vw);
  margin: 0 auto;
  padding: 1rem 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.site-layout__booking-wrap {
  width: min(1820px, 96vw);
  margin: 1.4rem auto;
  padding: 0;
}

.site-layout__footer-wrap {
  width: min(1820px, 96vw);
  margin: 0 auto 1rem;
}

.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  width: min(720px, calc(100vw - 2rem));
  z-index: 100001;
}

.cookie-banner__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: end;
  padding: 1.1rem 1.15rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 48px rgba(48, 48, 48, 0.16);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.cookie-banner__copy {
  min-width: 0;
}

.cookie-banner__eyebrow {
  margin: 0 0 0.3rem;
  color: var(--color-primary-dark);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cookie-banner__copy h2 {
  margin: 0;
  color: var(--color-charcoal);
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  line-height: 1.2;
  font-weight: 700;
}

.cookie-banner__copy p:last-child {
  margin: 0.55rem 0 0;
  color: var(--color-dark-grey);
  font-size: 0.96rem;
  line-height: 1.55;
}

.cookie-banner__copy a {
  color: var(--color-charcoal);
  font-weight: 600;
}

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
}

.cookie-banner__button {
  min-height: 2.85rem;
  padding: 0.78rem 1.15rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-family);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.cookie-banner__button:hover {
  transform: translateY(-1px);
}

.cookie-banner__button--ghost {
  border-color: rgba(48, 48, 48, 0.12);
  background: var(--color-pure-white);
  color: var(--color-charcoal);
}

.cookie-banner__button--primary {
  background: var(--color-charcoal);
  color: var(--color-pure-white);
}

.hero {
  position: relative;
  border-radius: var(--radius-2xl);
  width: 100%;
  display: flex;
}

.hero__surface {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .08), transparent 42%), linear-gradient(180deg, var(--color-primary-dark) 0%, #8498a7 100%);;
  width: 100%;
  /* Un minim, nu o inaltime fixa. Cu `height` hero-ul era blocat la exact un
     ecran, iar pe unul scund continutul nu mai incapea: `overflow: hidden` ii
     taia caseta cu recenzii. Asa umple ecranul cand incape si creste cand nu. */
  min-height: calc(100svh - 2rem);
  padding: clamp(1.4rem, 2.4vw, 2.4rem);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

.hero__topbar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.hero__brand {
  width: 200px;
  display: inline-flex;
  align-items: center;
}

.hero__brand img {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.98;
}

.hero__nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.8vw, 2rem);
  margin-right: auto;
  margin-left: clamp(1rem, 2.2vw, 2.4rem);
  flex-wrap: wrap;
  transition:
    background 240ms ease,
    box-shadow 240ms ease,
    transform 240ms ease,
    border-color 240ms ease;
}

/* Grupul plutitor doar poziționează; el însuși nu are fundal. Pastila rămâne
   în jurul meniului, iar butoanele stau alături, la dreapta ei. */
.hero__floating.is-fixed {
  position: fixed;
  top: 0.55rem;
  left: 0;
  right: 0;
  width: max-content;
  max-width: min(94vw, 1320px);
  margin-inline: auto;
  z-index: 99999;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: clamp(0.5rem, 0.9vw, 0.8rem);
}

/* Fără spațiu liber de împins, marginile automate ale barei largi n-au ce
   alinia și trebuie anulate. */
.hero__floating.is-fixed .hero__nav,
.hero__floating.is-fixed .hero__bar-actions {
  margin: 0;
  gap: clamp(0.5rem, 0.9vw, 0.8rem);
}

.hero__floating.is-fixed .hero__nav {
  flex-wrap: nowrap;
  gap: clamp(0.8rem, 1.2vw, 1.2rem);
  padding: clamp(0.5rem, 0.9vw, 0.85rem) clamp(0.8rem, 1.6vw, 1.25rem);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(48, 48, 48, 0.42);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.hero__floating.is-fixed .hero__nav a {
  color: rgba(255, 255, 255, 0.94);
}

.hero__floating.is-fixed .hero__nav a:hover {
  color: var(--color-primary-light);
  opacity: 1;
  transform: none;
}

/*
 * Odată ieșite din pastilă, butoanele plutesc peste conținutul paginii, care
 * este alb. Telefonul are text alb, deci primește același fundal întunecat ca
 * meniul, altfel ar deveni invizibil imediat sub hero.
 */
.hero__floating.is-fixed .hero__phone {
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(48, 48, 48, 0.42);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.hero__floating.is-fixed .hero__book {
  padding: 0.6rem 1.1rem;
  font-size: 0.95rem;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
}

/* Cand bara pluteste peste continut, fundalul de sub ea este alb. Comutatorul
   avea text alb pe un fundal translucid deschis, deci disparea. Primeste
   acelasi fundal inchis ca telefonul de langa el. */
.hero__floating.is-fixed .language-switcher__toggle {
  padding: 0.6rem 0.9rem;
  font-size: 0.95rem;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(48, 48, 48, 0.42);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.hero__floating.is-fixed .language-switcher__toggle:hover,
.hero__floating.is-fixed .language-switcher.is-open .language-switcher__toggle {
  background: rgba(48, 48, 48, 0.62);
  border-color: rgba(255, 255, 255, 0.36);
}

.hero__nav a {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 200ms ease, opacity 200ms ease, transform 200ms ease;
}

.hero__nav a:hover {
  color: var(--color-pure-white);
  opacity: 1;
  transform: translateY(-1px);
}

.hero__menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  transition: transform 220ms ease, background 220ms ease, border-color 220ms ease;
}

.hero__menu-toggle:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.5);
}

.hero__menu-toggle span {
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  transition: transform 220ms ease, opacity 220ms ease;
}

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

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

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

.hero__topbar-spacer {
  display: none;
}

.hero__menu-backdrop {
  /* `fixed`, nu `absolute`: hero-ul care îl conține are `overflow: hidden`,
     deci un fundal absolut ar întuneca doar antetul, nu pagina. */
  position: fixed;
  inset: 0;
  z-index: 9998;
  border: 0;
  background: rgba(20, 28, 35, 0.28);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.hero__nav-phone {
  display: none;
}

/* Comutatorul de limba: un buton care deschide o lista scurta. Pe desktop sta
   in bara, langa telefon; pe ecrane inguste bara nu mai are loc, deci trece in
   meniu (vezi mai jos). */
.language-switcher {
  position: relative;
  display: inline-flex;
}

/* Conturul implicit al browserului nu se potriveste cu bara; il inlocuim cu
   unul din paleta, vizibil doar la navigarea de la tastatura. */
.language-switcher__toggle:focus {
  outline: none;
}

.language-switcher__toggle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}

.language-switcher__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Umple inaltimea grupului din bara, ca sa fie la fel cu vecinii. */
  height: 100%;
  gap: 0.35rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.96);
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease;
}

.language-switcher__toggle:hover,
.language-switcher.is-open .language-switcher__toggle {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.5);
}

.language-switcher__caret {
  width: 0.85em;
  height: 0.85em;
  flex-shrink: 0;
  /* Clicul trece prin sageata la buton: altfel, pe unele browsere, tinta
     evenimentului ar fi ea si un `event.target` verificat gresit ar rata. */
  pointer-events: none;
  transition: transform 200ms ease;
}

.language-switcher.is-open .language-switcher__caret {
  transform: rotate(180deg);
}

/* Atributul `hidden` are din browser un `display: none`, dar regula de mai jos
   pune `display: flex` cu aceeasi specificitate — si stilul paginii bate stilul
   browserului. Fara randul asta meniul ramane deschis pentru totdeauna, iar
   butonul pare ca nu face nimic. */
.language-switcher__menu[hidden] {
  display: none;
}

.language-switcher__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 40;
  min-width: 11rem;
  padding: 0.35rem;
  border-radius: 1rem;
  border: 1px solid rgba(155, 169, 181, 0.2);
  background: var(--color-pure-white);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.language-switcher__option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.7rem;
  border-radius: 0.7rem;
  color: var(--color-dark-grey);
  text-decoration: none;
  font-size: 0.95rem;
  transition: background 160ms ease, color 160ms ease;
}

.language-switcher__option:hover {
  background: rgba(184, 212, 227, 0.26);
  color: var(--color-charcoal);
}

.language-switcher__option.is-active {
  color: var(--color-charcoal);
  background: rgba(184, 212, 227, 0.42);
  font-weight: 700;
}

.language-switcher__code {
  min-width: 1.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* Pe desktop se vede varianta din bara; cea din meniu asteapta ecranul ingust. */
.language-switcher--menu {
  display: none;
}

.hero__phone-icon {
  display: none;
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
}

/* Meniul plus butoanele. Cât timp bara stă în hero, grupul doar ocupă spațiul
   rămas după logo, iar copiii lui se aranjează ca înainte. */
.hero__floating {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex: 1 1 auto;
  min-width: 0;
}

/* Telefonul și butonul de programare stau împreună, în dreapta barei. */
.hero__bar-actions {
  display: flex;
  /* `stretch`, nu `center`: telefonul, comutatorul de limba si butonul de
     programare au fonturi si chenare diferite, deci calculate din padding ar
     iesi trei inaltimi apropiate, dar nu egale. Asa se aliniaza la cel mai
     inalt dintre ele, oricum s-ar schimba textul. */
  align-items: stretch;
  gap: 0.6rem;
  margin-left: auto;
}

.hero__book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-pure-white);
  color: var(--color-charcoal);
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition:
    background 200ms ease,
    transform 200ms ease;
}

.hero__book:hover {
  background: var(--color-primary-light);
  transform: translateY(-1px);
}

/* În meniul hamburger, unde trece butonul pe ecrane mici. */
.hero__nav-book {
  display: none;
}

.hero__phone {
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.38);
  color: rgba(255, 255, 255, 0.96);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-pill);
  text-align: center;
  padding: 1rem 1.4rem;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 200ms ease, border-color 200ms ease;
}

.hero__phone:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.5);
}

.hero__content {
  position: relative;
  z-index: 4;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: clamp(420px, 62vh, 760px);
}

/* Textul si caseta cu recenzii stau in fluxul coloanei, nu una peste alta.
   Erau amandoua pozitionate absolut, iar caseta era prinsa de `bottom: 0`:
   pe un ecran inalt incapeau, dar pe unul scund inaltimea containerului
   (62vh) scadea, caseta urca si intra peste buton si peste descriere. In flux
   nu se pot suprapune, oricat de scund ar fi ecranul — coloana creste. */
.hero__copy {
  position: relative;
  z-index: 4;
  /* `flex-start`, ca latimea sa ramana cea data de titlu, exact ca la
     pozitionarea absoluta de dinainte. */
  align-self: flex-start;
  padding: clamp(5.8rem, 9vw, 7.4rem) 0 clamp(1.6rem, 3.2vh, 2.8rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.6vw, 1.55rem);
  box-sizing: border-box;
}

.hero__copy h1 {
  margin: 0;
  align-self: flex-start;
  color: rgba(255, 255, 255, 0.98);
  font-size: clamp(3.2rem, 6.6vw, 5.8rem);
  line-height: 0.92;
  letter-spacing: -0.055em;
  font-weight: 700;
  text-transform: none;
  display: inline-block;
}

.hero__copy h1 span {
  color: var(--color-primary-light);
  font-weight: 700;
}

.hero__copy p {
  margin: 0;
  max-width: 40ch;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(1.1rem, 1.22vw, 1.5rem);
  line-height: 1.58;
  font-weight: 500;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.65rem, 1.2vw, 1rem);
  align-self: flex-start;
  width: 100%;
}

.hero__proof {
  position: relative;
  z-index: 6;
  /* Ramane jos, dar impinsa de flux: daca textul de deasupra are nevoie de
     mai mult loc, coboara odata cu el in loc sa treaca peste. */
  margin-top: auto;
  width: min(100%, 40rem);
  max-width: calc(100% - 2 * clamp(1.4rem, 2.4vw, 2.4rem));
  padding: 1.25rem 1.4rem;
  border-radius: 2rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hero__proof-top {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hero__proof-avatars {
  display: flex;
  align-items: center;
  padding-left: 0.1rem;
}

.hero__proof-avatars img {
  width: 2.85rem;
  height: 2.85rem;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-pure-white);
  margin-left: -0.55rem;
  box-shadow: 0 8px 18px rgba(48, 48, 48, 0.12);
}

.hero__proof-avatars img:first-child {
  margin-left: 0;
}

.hero__proof-rating {
  color: var(--color-pure-white);
  font-size: 1.95rem;
  line-height: 1;
  letter-spacing: 0.08em;
}

.hero__proof p {
  margin-top: 1rem;
  max-width: 28ch;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.02rem;
  line-height: 1.55;
  font-weight: 500;
}

.hero__visual {
  position: absolute;
  right: 1.6%;
  top: 50px;
  width: min(49%, 760px);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 100%;
}

.hero__visual img {
  position: relative;
  z-index: 3;
  width: auto;
  height: clamp(560px, 84vh, 1020px);
  max-width: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 18px 50px rgba(48, 48, 48, 0.18));
}

.hero__pulses {
  position: absolute;
  z-index: 1;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(320px, 34vw, 560px);
  aspect-ratio: 1 / 1;
  pointer-events: none;
}

.ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    transparent 53%,
    rgba(255, 255, 255, 0.13) 60%,
    rgba(255, 255, 255, 0.24) 67%,
    rgba(255, 255, 255, 0.12) 74%,
    transparent 82%
  );
  transform-origin: center;
  filter: blur(0.55px);
  opacity: 0;
  animation: wave-expand-fade 10.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

.ring--1 {
  animation-delay: 0s;
}

.ring--2 {
  animation-delay: 3.6s;
}

.ring--3 {
  animation-delay: 7.2s;
}

@keyframes wave-expand-fade {
  0% {
    transform: scale(0.54);
    opacity: 0;
  }
  22% {
    opacity: 0.42;
  }
  60% {
    opacity: 0.24;
  }
  100% {
    transform: scale(1.16);
    opacity: 0;
  }
}

/* Primary CTA — aceeași rețetă ca .team-card__cta / .certificates-section__action (fără umbră) */
.hero__cta {
  position: static;
  box-sizing: border-box;
  text-decoration: none;
  color: var(--color-pure-white);
  background: var(--color-primary);
  border: none;
  border-radius: 0.65rem;
  min-width: min(100%, 15.25rem);
  min-height: clamp(2.75rem, 4.2vw, 3.25rem);
  padding: clamp(0.7rem, 1.4vw, 0.85rem) clamp(1.35rem, 2.2vw, 2rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: clamp(0.98rem, 1.35vw, 1.2rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  box-shadow: none;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.hero__cta:hover {
  transform: translateY(-1px);
  background: var(--color-primary-dark);
  color: var(--color-pure-white);
}

.hero__cta:active {
  transform: translateY(0);
}

.hero__cta:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.75);
  outline-offset: 4px;
}

.about-clinic {
  position: relative;
  width: 100%;
}

.about-clinic__surface {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  padding: clamp(2.2rem, 4.2vw, 4rem) clamp(1rem, 2.4vw, 2rem) clamp(1.8rem, 3.4vw, 3rem);
  background: linear-gradient(to bottom, var(--color-light-grey), var(--color-pure-white));
  /* box-shadow: var(--shadow-card); */
}

.about-clinic__head {
  text-align: center;
  max-width: 920px;
  margin: 0 auto;
}

/* Centred section title — h2 + misty rule */
.about-clinic__head h2 {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, var(--ds-h2-size));
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--color-charcoal);
}

.about-clinic__head p {
  margin: clamp(0.75rem, 1.6vw, 1.2rem) auto 0;
  max-width: 54ch;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  color: var(--color-dark-grey);
}

.about-clinic__head p span {
  color: var(--color-primary-dark);
  font-weight: 500;
}

.about-clinic__showcase {
  position: relative;
  margin-top: clamp(1.2rem, 3vw, 2.6rem);
  min-height: clamp(360px, 44vw, 700px);
  display: flex;
  justify-content: center;
}

.about-clinic__showcase > img {
  width: min(98%, 1200px);
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center bottom;
}

.about-slider {
  display: contents;
}

.about-slider__track {
  display: contents;
}

.about-slider__controls {
  display: none;
}

.about-card {
  position: absolute;
  z-index: 3;
  width: min(32vw, 440px);
  padding: clamp(1.25rem, 2.2vw, 2.2rem);
  border-radius: var(--radius-xl);
  /* border: 1px solid var(--color-cloud); */
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  text-align: center;
}

.about-card h3 {
  margin: 0 0 clamp(0.7rem, 1.2vw, 1.1rem);
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  line-height: 1.4;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-charcoal);
}

.about-card p {
  margin: 0;
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.6;
  color: var(--color-dark-grey);
}

.about-card--left {
  left: 0;
  top: 34%;
}

.about-card--center {
  left: 50%;
  top: 6%;
  transform: translateX(-50%);
  width: min(38vw, 560px);
}

.about-card--right {
  right: 0;
  top: 34%;
}

.services-section {
  width: 100%;
  position: relative;
}



.services-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1rem, 1.8vw, 1.6rem);
}

.services-section__head h2 {
  margin: 0;
  color: var(--color-charcoal);
  font-size: clamp(1.5rem, 4vw, var(--ds-h2-size));
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 700;
  max-width: 780px;
}

.services-section__head h2 span {
  color: var(--color-primary);
  font-weight: 700;
}

.services-section__controls {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}

.services-section__btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  border: none;
  background-color: var(--color-cloud);
  color: var(--color-medium-grey);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  transition: all 0.2s ease;
}

.services-section__btn--next {
  background-color: var(--color-primary-dark);
  color: var(--color-pure-white);
}

.services-section__btn:hover {
  background-color: var(--color-charcoal);
  color: var(--color-pure-white);
}

.services-section__viewport {
  overflow: hidden;
}

.services-section__track {
  display: flex;
  gap: 0.7rem;
  transition: transform 450ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.service-card {
  position: relative;
  overflow: hidden;
  flex: 0 0 calc((100% - 2.8rem) / 5);
  min-height: clamp(220px, 22vw, 340px);
  border-radius: var(--radius-xl);
  padding: clamp(1rem, 1.5vw, 1.35rem);
  background: var(--color-cloud);
  color: var(--color-dark-grey);
  cursor: pointer;
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}

.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(48, 48, 48, 0.15) 0%, rgba(48, 48, 48, 0.72) 100%),
    var(--prisdent-bg-image) center / cover no-repeat;
  opacity: 0;
  transition: opacity 280ms ease;
}

.service-card h3,
.service-card p,
.service-card__number,
.service-card__link {
  position: relative;
  z-index: 2;
}

.service-card h3 {
  margin: 0;
  font-size: clamp(1.125rem, 1.5vw, var(--ds-h3-size));
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--color-primary-dark);
  font-weight: 600;
}

.service-card p {
  margin: 0.65rem 0 0;
  max-width: 30ch;
  font-size: clamp(0.9rem, 1.05vw, 1.2rem);
  line-height: 1.4;
  color: var(--color-dark-grey);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 240ms ease, transform 240ms ease;
}

.service-card__number {
  position: absolute;
  right: 0.65rem;
  bottom: -1.45rem;
  font-size: clamp(3.8rem, 8vw, 8.4rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}

.service-card__link {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: none;
  background: var(--color-pure-white);
  color: var(--color-charcoal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 220ms ease, transform 220ms ease;
}


.service-card.is-active::before {
  opacity: 1;
}

.service-card.is-active h3,
.service-card.is-active p {
  color: var(--color-pure-white);
}

.service-card.is-active p {
  opacity: 1;
  transform: translateY(0);
}

.service-card.is-active .service-card__number {
  color: rgba(255, 255, 255, 0.3);
}

.service-card.is-active .service-card__link {
  opacity: 1;
  transform: translateY(0);
}

.benefits-section {
  width: 100%;
}

.benefits-section__surface {
  padding: clamp(3.2rem, 2.6vw, 4.2rem) 0;
}

.benefits-section__top {
  display: grid;
  grid-template-columns: minmax(280px, 0.68fr) minmax(380px, 1.32fr);
  gap: clamp(0.8rem, 1.8vw, 1.4rem);
  align-items: stretch;
}

.benefits-section__copy {
  padding: clamp(0.25rem, 0.8vw, 0.75rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.4vw, 1.1rem);
  max-width: 100%;
}

.benefits-section__copy h2 {
  margin: 0;
  color: var(--color-charcoal);
  font-size: clamp(1.5rem, 4.2vw, var(--ds-h2-size));
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 700;
  max-width: 16ch;
}

.benefits-section__copy h2 span {
  color: var(--color-primary);
  font-weight: 700;
}

.benefits-section__copy h3 {
  margin: 0;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-charcoal);
}

.benefits-section__copy p {
  margin: 0;
  max-width: 37ch;
  font-size: clamp(0.95rem, 1.06vw, 1.12rem);
  line-height: 1.45;
  color: var(--color-dark-grey);
}

.benefits-section__image {
  overflow: hidden;
  border-radius: var(--radius-xl);
  aspect-ratio: 16 / 9;
  min-height: 0;
}

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

.benefits-stats {
  margin-top: clamp(0.8rem, 1.6vw, 1.25rem);
  display: grid;
  /* Numarul de cifre se administreaza din dashboard, deci coloanele se
     potrivesc dupa cate sunt: cu trei arata ca inainte, cu doua sau patru se
     aseaza singure, fara un rand rupt. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.7rem;
}

.benefits-stat {
  border-radius: var(--radius-xl);
  background: var(--color-cloud);
  min-height: clamp(180px, 16vw, 250px);
  padding: clamp(1rem, 1.7vw, 1.55rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.benefits-stat__value {
  font-size: clamp(2.2rem, 4.6vw, 5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--color-primary-dark);
}

.benefits-stat h4 {
  margin: 0;
  font-size: clamp(1.3rem, 2vw, 2rem);
  line-height: 1.15;
  color: var(--color-charcoal);
  font-weight: 600;
}

.benefits-stat p {
  margin: 0.42rem 0 0;
  font-size: clamp(0.9rem, 1.02vw, 1.05rem);
  line-height: 1.4;
  color: var(--color-dark-grey);
}

.benefits-stat--featured {
  background: var(--color-primary-dark);
}

.benefits-stat--featured .benefits-stat__value,
.benefits-stat--featured h4,
.benefits-stat--featured p {
  color: var(--color-pure-white);
}

.team-section {
  width: 100%;
}

.team-section__surface {
  background: var(--color-light-grey);
  border-radius: var(--radius-2xl);
  padding: clamp(1.2rem, 2.6vw, 2.2rem);
}

.team-section__head {
  text-align: center;
  margin: 0 auto clamp(0.9rem, 1.7vw, 1.25rem);
  max-width: 900px;
}

.team-section__head h2 {
  margin: 0;
  color: var(--color-charcoal);
  font-size: clamp(1.5rem, 4vw, var(--ds-h2-size));
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 700;
}

.team-section__head p {
  margin: clamp(0.65rem, 1.3vw, 1rem) auto 0;
  color: var(--color-dark-grey);
  font-size: clamp(1rem, 1.15vw, 1.2rem);
  line-height: 1.5;
  max-width: 62ch;
}

.team-section__viewport {
  overflow: hidden;
}

.team-section__track {
  display: flex;
  gap: 0.8rem;
  transition: transform 450ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.team-card {
  flex: 0 0 calc((100% - 2.4rem) / 4);
  background: var(--color-pure-white);
  border: 1px solid var(--color-cloud);
  border-radius: var(--radius-xl);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.team-card__photo {
  height: clamp(180px, 15vw, 245px);
  border-radius: 0.75rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(184, 212, 227, 0.4) 100%),
    var(--photo-image, var(--prisdent-bg-image)) var(--photo-pos, center) / cover no-repeat;
}

.team-card h3 {
  margin: 0.25rem 0 0;
  color: var(--color-primary-dark);
  font-size: clamp(1.05rem, 1.2vw, 1.25rem);
  line-height: 1.2;
  font-weight: 600;
}

.team-card h4 {
  margin: 0.1rem 0 0;
  color: var(--color-charcoal);
  font-size: clamp(1rem, 1.1vw, 1.16rem);
  line-height: 1.3;
  font-weight: 600;
}

.team-card p {
  margin: 0.05rem 0 0;
  color: var(--color-dark-grey);
  font-size: clamp(0.88rem, 0.98vw, 1rem);
  line-height: 1.4;
}

/* Un link, nu un buton: duce la programare, deci are nevoie și de regulile
   care îl fac să arate ca unul. */
.team-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  margin-top: 0.45rem;
  width: 100%;
  border: none;
  border-radius: 0.65rem;
  min-height: 3rem;
  background: var(--color-primary);
  color: var(--color-pure-white);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.team-card__cta:hover {
  background: var(--color-primary-dark);
  color: var(--color-pure-white);
}

.team-section__controls {
  margin-top: clamp(0.9rem, 1.5vw, 1.2rem);
  display: flex;
  justify-content: center;
  gap: 0.65rem;
}

.team-section__btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  border: none;
  background-color: var(--color-cloud);
  color: var(--color-charcoal);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  transition: all 0.2s ease;
}

.team-section__btn--next {
  background-color: var(--color-primary-dark);
  color: var(--color-pure-white);
}

.team-section__btn:hover {
  background-color: var(--color-charcoal);
  color: var(--color-pure-white);
}

.certificates-section {
  width: 100%;
}

.certificates-section__surface {
  background: var(--color-pure-white);
  border-radius: var(--radius-2xl);
  padding: clamp(1.4rem, 2.8vw, 2.4rem) 0;
  overflow: hidden;
}

.certificates-section__top {
  display: grid;
  grid-template-columns: minmax(320px, 560px) auto;
  gap: clamp(1rem, 2vw, 1.8rem);
  align-items: start;
}

.certificates-section__intro {
  max-width: min(36rem, 100%);
}

.certificates-section__intro h2 {
  margin: 0;
  color: var(--color-charcoal);
  font-size: clamp(1.5rem, 4.2vw, var(--ds-h2-size));
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 700;
}

.certificates-section__intro h2 span {
  color: var(--color-primary);
  font-weight: 700;
}

.certificates-section__intro p:last-child {
  margin: 1rem 0 0;
  color: var(--color-dark-grey);
  font-size: 1.125rem;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
  max-width: 42ch;
}

.certificates-section__action {
  justify-self: end;
  align-self: start;
  min-height: 2.75rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  background: var(--color-primary);
  color: var(--color-pure-white);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  border: none;
  box-shadow: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.certificates-section__action:hover {
  transform: translateY(-1px);
  background: #9bc4d8;
  box-shadow: 0 4px 6px rgba(184, 212, 227, 0.2);
}

.certificates-section__action:focus-visible {
  outline: 2px solid var(--color-charcoal);
  outline-offset: 3px;
}

.certificates-marquee {
  --certificates-gap: 1.25rem;
  margin-top: clamp(2rem, 3.4vw, 2.8rem);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, black 4%, black 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 4%, black 96%, transparent 100%);
}

.certificates-marquee__track {
  display: flex;
  width: max-content;
  gap: var(--certificates-gap);
  align-items: stretch;
  animation: certificates-marquee-scroll var(--certificates-duration, 45s) linear infinite;
}

.certificates-marquee:hover .certificates-marquee__track {
  animation-play-state: paused;
}

.certificates-marquee__group {
  display: flex;
  flex-shrink: 0;
  gap: var(--certificates-gap);
  align-items: stretch;
}

.certificate-panel {
  display: flex;
  align-items: stretch;
  flex: 0 0 clamp(220px, 18vw, 300px);
}

/* Lățimi variate în rând, înălțime comună (mod preview imagini) */
.certificate-panel--preview.certificate-panel--w-sm {
  flex: 0 0 clamp(200px, 16vw, 260px);
}

.certificate-panel--preview.certificate-panel--w-md {
  flex: 0 0 clamp(220px, 19vw, 300px);
}

.certificate-panel--preview.certificate-panel--w-lg {
  flex: 0 0 clamp(260px, 24vw, 340px);
}

.certificate-panel--short {
  min-height: clamp(280px, 29vw, 360px);
}

.certificate-panel--medium {
  min-height: clamp(340px, 34vw, 470px);
}

.certificate-panel--tall {
  min-height: clamp(390px, 39vw, 560px);
}

.certificate-panel__sheet {
  position: relative;
  width: 100%;
  min-height: inherit;
  border-radius: 2rem;
  border: 1px solid rgba(184, 212, 227, 0.36);

  padding: 1rem 1rem 1.25rem;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}

.certificate-panel__sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(184, 212, 227, 0.22), transparent 60%);
  pointer-events: none;
}

.certificate-panel__sheet:hover {
  border-color: rgba(184, 212, 227, 0.52);
}

.certificate-panel--featured .certificate-panel__sheet {
  background: linear-gradient(180deg, rgba(214, 231, 241, 0.86), rgba(255, 255, 255, 0.98));
}

.certificate-panel__sheet-top,
.certificate-panel__sheet-body {
  position: relative;
  z-index: 1;
}

.certificate-panel__sheet-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.certificate-panel__tag,
.certificate-panel__status {
  display: inline-flex;
  align-items: center;
  min-height: 1.95rem;
  padding: 0.35rem 0.72rem;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  line-height: 1;
  font-weight: 600;
}

.certificate-panel__tag {
  background: rgba(184, 212, 227, 0.22);
  color: var(--color-primary-dark);
}

.certificate-panel__status {
  background: rgba(48, 48, 48, 0.06);
  color: var(--color-charcoal);
}

.certificate-panel__sheet-body {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.8rem;
  padding-top: clamp(2.4rem, 5vw, 4.8rem);
}

.certificate-panel__brand {
  color: var(--color-primary-dark);
  font-size: 0.95rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.certificate-panel__sheet h3 {
  margin: 0;
  max-width: 11ch;
  color: var(--color-charcoal);
  font-size: clamp(1.35rem, 1.55vw, 1.85rem);
  letter-spacing: -0.03em;
  line-height: 1.06;
  font-weight: 500;
}

.certificate-panel__line {
  display: block;
  width: 100%;
  height: 0.55rem;
  border-radius: 999px;
  background: rgba(155, 196, 216, 0.34);
}

.certificate-panel__line--short {
  width: 62%;
}

.certificate-panel__seal {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.92), rgba(184, 212, 227, 0.9));
  border: 1px solid rgba(155, 196, 216, 0.55);
  box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.28);
}

.certificate-panel--featured .certificate-panel__sheet h3 {
  color: var(--color-primary-dark);
}

/* Doar imagine full-bleed: card cu înălțime fixă ca img (cover) să umple 100% */
.certificate-panel--preview {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  min-height: clamp(300px, 30vw, 400px);
  height: clamp(300px, 30vw, 400px);
}

.certificate-panel--preview.certificate-panel--short,
.certificate-panel--preview.certificate-panel--medium,
.certificate-panel--preview.certificate-panel--tall {
  min-height: clamp(300px, 30vw, 400px);
  height: clamp(300px, 30vw, 400px);
}

.certificate-panel--preview .certificate-panel__sheet--preview {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  display: block;
  overflow: hidden;
  background: #eef3f6;
  border: none;
  border-radius: 1.5rem;
  box-shadow: none;
  transition: transform 240ms ease, box-shadow 240ms ease;
}

.certificate-panel--preview .certificate-panel__sheet--preview::before {
  display: none;
}

.certificate-panel--featured.certificate-panel--preview .certificate-panel__sheet--preview {
  background: #eef3f6;
}

.certificate-panel--preview .certificate-panel__sheet--preview:hover {
  border-color: transparent;
}

.certificate-panel__preview-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

@keyframes certificates-marquee-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50% - (var(--certificates-gap) / 2)));
  }
}

.faq-section {
  width: 100%;
}

.faq-section__surface {
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .08), transparent 42%), linear-gradient(180deg, var(--color-primary-dark) 0%, #8498a7 100%);;
  border-radius: var(--radius-2xl);
  padding: clamp(1.2rem, 2.6vw, 2.2rem);
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(440px, 1.1fr);
  gap: clamp(0.9rem, 1.8vw, 1.6rem);
}

.faq-section__intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
}

.faq-section__intro h2 {
  margin: 0;
  color: var(--color-pure-white);
  font-size: clamp(2rem, 6.5vw, var(--ds-display-size));
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 800;
  text-transform: none;
}

.faq-section__intro h3 {
  margin: clamp(0.8rem, 1.5vw, 1.2rem) 0 0;
  color: var(--color-pure-white);
  font-size: clamp(1.25rem, 2vw, var(--ds-h3-size));
  line-height: 1.3;
  letter-spacing: 0;
  font-weight: 600;
}

.faq-section__intro p {
  margin: 0.5rem 0 0;
  max-width: 40ch;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(0.92rem, 1.02vw, 1.04rem);
  line-height: 1.45;
}

.faq-section__list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.faq-item {
  background: var(--color-pure-white);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.faq-item__trigger {
  font-family: var(--font-family);
  width: 100%;
  border: none;
  background: transparent;
  color: var(--color-charcoal);
  text-align: left;
  cursor: pointer;
  min-height: clamp(76px, 8vw, 108px);
  padding:  0 clamp(0.9rem, 1.5vw, 1.2rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: clamp(1rem, 1.3vw, 1.45rem);
  line-height: 1.25;
  font-weight: 500;
}

.faq-item__icon {
  flex-shrink: 0;
  width: clamp(2.3rem, 3.2vw, 3rem);
  height: clamp(2.3rem, 3.2vw, 3rem);
  border-radius: 50%;
  background: var(--color-primary-dark);
  color: var(--color-pure-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.faq-item__content {
  height: 0;
  overflow: hidden;
  opacity: 0;
  color: var(--color-dark-grey);
  font-size: clamp(0.92rem, 1.02vw, 1rem);
  line-height: 1.5;
  will-change: height, opacity;
  transition:
    height 460ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 320ms ease;
}

.faq-item__content-inner {
  padding: 0 clamp(0.9rem, 1.5vw, 1.2rem) clamp(1.35rem, 1.9vw, 1.8rem);
}

.faq-item__content-inner p {
  margin: 0;
}

.faq-item.is-open .faq-item__icon {
  transform: rotate(180deg);
}

.faq-item.is-open .faq-item__content {
  opacity: 1;
}

.booking-cta-section {
  width: 100%;
}

.booking-cta {
  --cta-orbit-inner: min(24vw, 260px);
  --cta-orbit-middle: min(31vw, 340px);
  --cta-orbit-outer: min(39vw, 450px);
  position: relative;
  overflow: hidden;
  min-height: clamp(420px, 48vw, 720px);
  border-radius: calc(var(--radius-2xl) + 0.35rem);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08), transparent 42%),
    linear-gradient(180deg, #9ec2d7 0%, var(--color-primary) 100%);
  /* box-shadow: var(--shadow-card); */
  isolation: isolate;
}

.booking-cta__rings {
  position: absolute;
  inset: 0;
}

.booking-cta__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.48);
  transform: translate(-50%, -50%);
}

.booking-cta__ring--inner {
  width: calc(var(--cta-orbit-inner) * 2);
  height: calc(var(--cta-orbit-inner) * 2);
}

.booking-cta__ring--middle {
  width: calc(var(--cta-orbit-middle) * 2);
  height: calc(var(--cta-orbit-middle) * 2);
}

.booking-cta__ring--outer {
  width: calc(var(--cta-orbit-outer) * 2);
  height: calc(var(--cta-orbit-outer) * 2);
}

.booking-cta__content {
  position: relative;
  z-index: 2;
  min-height: inherit;
  padding: clamp(2rem, 5vw, 3.8rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.booking-cta__content h2 {
  margin: 0;
  color: var(--color-pure-white);
  font-size: clamp(1.5rem, 4.2vw, var(--ds-h2-size));
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 700;
}


.booking-cta__content p {
  margin: clamp(0.875rem, 1.5vw, 1.25rem) auto 0;
  max-width: 38ch;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.125rem;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
}

.booking-cta__button {
  margin-top: clamp(1.25rem, 2vw, 2rem);
  min-width: min(100%, 15.25rem);
  min-height: 2.75rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  background: var(--color-charcoal);
  color: var(--color-pure-white);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.booking-cta__button:hover {
  transform: translateY(-1px);
  background: var(--color-dark-grey);
  box-shadow: 0 4px 6px rgba(48, 48, 48, 0.1);
}

.booking-cta__button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(48, 48, 48, 0.1);
}

.booking-cta__button:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.75);
  outline-offset: 4px;
}

.booking-cta__orbiter {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--cta-radius) * 2);
  height: calc(var(--cta-radius) * 2);
  margin-left: calc(var(--cta-radius) * -1);
  margin-top: calc(var(--cta-radius) * -1);
  z-index: 1;
  animation: cta-orbit var(--cta-duration) linear infinite;
  transform-origin: 50% 50%;
  will-change: transform;
}

.booking-cta__orbiter--reverse {
  animation-name: cta-orbit-reverse;
}

.booking-cta__avatar-shell {
  position: absolute;
  left: 50%;
  top: 0;
  display: block;
  animation: cta-avatar-counter var(--cta-duration) linear infinite;
}

.booking-cta__orbiter--reverse .booking-cta__avatar-shell {
  animation-name: cta-avatar-counter-reverse;
}

.booking-cta__avatar {
  width: clamp(58px, 5.2vw, 74px);
  height: clamp(58px, 5.2vw, 74px);
  display: block;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 20px rgba(48, 48, 48, 0.14);
  background: rgba(255, 255, 255, 0.42);
}

@keyframes cta-orbit {
  from {
    transform: rotate(var(--cta-angle));
  }

  to {
    transform: rotate(calc(var(--cta-angle) + 1turn));
  }
}

@keyframes cta-orbit-reverse {
  from {
    transform: rotate(var(--cta-angle));
  }

  to {
    transform: rotate(calc(var(--cta-angle) - 1turn));
  }
}

@keyframes cta-avatar-counter {
  from {
    transform: translate(-50%, -50%) rotate(calc(var(--cta-angle) * -1));
  }

  to {
    transform: translate(-50%, -50%) rotate(calc((var(--cta-angle) * -1) - 1turn));
  }
}

@keyframes cta-avatar-counter-reverse {
  from {
    transform: translate(-50%, -50%) rotate(calc(var(--cta-angle) * -1));
  }

  to {
    transform: translate(-50%, -50%) rotate(calc((var(--cta-angle) * -1) + 1turn));
  }
}

.site-footer {
  width: 100%;
}

.site-footer__surface {
  background: var(--color-pure-white);
  border-radius: var(--radius-2xl);
  padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid var(--color-cloud);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(200px, 1.35fr) minmax(320px, auto);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

.site-footer__brand {
  max-width: 36ch;
}

.site-footer__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, auto));
  justify-content: end;
  justify-items: start;
  gap: clamp(1.5rem, 2.8vw, 4rem);
  margin-left: auto;
}

.site-footer__intro {
  margin: 0;
  color: var(--color-charcoal);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
}

.site-footer__follow-heading {
  margin: 1.25rem 0 0.65rem;
  color: var(--color-charcoal);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}

.site-footer__social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
}

.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-charcoal);
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.site-footer__social-link:hover {
  opacity: 0.65;
  transform: translateY(-1px);
}

.site-footer__social-icon {
  display: block;
  flex-shrink: 0;
}

.site-footer__col-title {
  margin: 0 0 0.85rem;
  color: var(--color-charcoal);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.site-footer__links a {
  text-decoration: none;
  color: var(--color-charcoal);
  font-size: 1rem;
  line-height: 1.45;
  font-weight: 400;
  transition: opacity 0.2s ease;
}

.site-footer__links a:hover {
  opacity: 0.65;
}

.site-footer__separator {
  margin: clamp(1.75rem, 3vw, 2.5rem) 0;
  height: 1px;
  background: var(--color-cloud);
  border: 0;
}

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
}

.site-footer__logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}

.site-footer__logo-img {
  display: block;
  height: auto;
  max-height: 40px;
  width: auto;
  max-width: min(200px, 46vw);
  filter: brightness(0) saturate(100%);
  opacity: 0.9;
}

.site-footer__logo-link:hover .site-footer__logo-img {
  opacity: 0.72;
}

.site-footer__legal {
  margin: 0;
  text-align: right;
  color: var(--color-charcoal);
  font-size: clamp(0.9rem, 1.8vw, 1rem);
  line-height: 1.5;
  font-weight: 400;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
}

.site-footer__legal-email {
  color: var(--color-charcoal);
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.2s ease;
}

.site-footer__legal-email:hover {
  opacity: 0.65;
  text-decoration: underline;
}

@media (max-width: 1200px) {
  .hero__topbar {
    justify-content: space-between;
    align-items: center;
    gap: clamp(0.7rem, 1.2vw, 1.2rem);
    flex-wrap: nowrap;
  }

  .hero__brand {
    width: 112px;
    flex-shrink: 0;
  }

  .hero__nav {
    order: 0;
    width: auto;
    margin-left: clamp(0.7rem, 1.7vw, 1.4rem);
    margin-right: auto;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: clamp(0.65rem, 1.1vw, 1.05rem);
    min-width: 0;
    overflow: hidden;
  }

  .hero__nav a {
    font-size: clamp(0.9rem, 0.95vw, 0.98rem);
    white-space: nowrap;
  }

  .hero__bar-actions {
    order: 0;
    margin-left: auto;
    flex-shrink: 0;
    gap: 0.5rem;
  }

  .hero__phone {
    padding: 0.72rem 1rem;
    font-size: clamp(0.9rem, 0.98vw, 1rem);
  }

  .hero__book {
    padding: 0.72rem 1.1rem;
    font-size: clamp(0.9rem, 0.98vw, 1rem);
  }

  .about-card {
    width: min(34vw, 380px);
    padding: 1.2rem 1rem;
  }

  .about-card--center {
    width: min(45vw, 520px);
    top: 9%;
  }

  .about-card--left,
  .about-card--right {
    top: 38%;
  }

  .services-section__head h2 {
    max-width: 640px;
    font-size: clamp(1.45rem, 3.8vw, var(--ds-h2-size));
  }

  .service-card {
    flex-basis: calc((100% - 1.4rem) / 3);
    min-height: 230px;
  }

  .benefits-section__top {
    grid-template-columns: 1fr;
  }

  .benefits-section__copy {
    padding: clamp(0.15rem, 0.6vw, 0.4rem);
    gap: clamp(0.6rem, 1.2vw, 0.95rem);
    max-width: min(92ch, 100%);
  }

  .benefits-section__copy h2 {
    max-width: 16ch;
  }

  .benefits-section__copy h3 {
    font-size: clamp(1.02rem, 1.45vw, 1.25rem);
  }

  .benefits-section__copy p {
    max-width: 66ch;
    font-size: clamp(0.94rem, 1.02vw, 1.02rem);
    line-height: 1.5;
  }

  .benefits-section__image {
    aspect-ratio: 16 / 9;
  }

  .team-card {
    flex-basis: calc((100% - 1.6rem) / 3);
  }

  .certificates-section__surface {
    padding-bottom: 1.6rem;
  }

  .certificates-section__intro {
    max-width: 60ch;
  }

  .certificates-section__top {
    grid-template-columns: 1fr;
  }

  .certificates-section__action {
    justify-self: start;
  }

  .certificates-marquee__track {
    animation-duration: var(--certificates-duration, 45s);
  }

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

  .faq-section__intro h2 {
    font-size: clamp(1.85rem, 7vw, var(--ds-display-size));
    max-width: 10ch;
  }

  .faq-section__intro p {
    max-width: 60ch;
  }

  .booking-cta {
    --cta-orbit-inner: min(30vw, 260px);
    --cta-orbit-middle: min(37vw, 330px);
    --cta-orbit-outer: min(44vw, 400px);
    min-height: clamp(390px, 44vw, 540px);
  }

  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    gap: 1.75rem 2rem;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
    max-width: 42ch;
  }

  .site-footer__columns {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    justify-content: start;
    margin-left: 0;
  }
}

/* Laptopuri cu ecran jos (13", ferestre nemaximizate). Hero-ul vrea sa umple
   ecranul, dar titlul, descrierea, butonul si caseta cu recenzii au impreuna o
   inaltime data de text. Aici stramtam ritmul vertical ca sa incapa intr-un
   ecran, in loc sa lasam butonul sa cada sub linia de pliere.

   Doar pe desktop: sub 861px layout-ul este deja altul, iar pe telefon
   inaltimea ferestrei se schimba cand apare bara browserului. */
@media (min-width: 861px) and (max-height: 900px) {
  .hero__copy {
    padding-top: clamp(3.2rem, 7vh, 6rem);
    padding-bottom: clamp(0.9rem, 2vh, 1.8rem);
    gap: clamp(0.7rem, 1.5vh, 1.3rem);
  }

  /* Legat si de inaltimea ferestrei, nu doar de latime: asa marimea coboara
     lin catre ecranele joase, in loc sa sara brusc la limita interogarii. */
  .hero__copy h1 {
    font-size: clamp(2.6rem, min(6.6vw, 9.5vh), 5.8rem);
  }

  .hero__copy p {
    font-size: clamp(1rem, 1.05vw, 1.22rem);
    line-height: 1.5;
  }

  .hero__proof {
    padding: 1rem 1.2rem;
  }
}

@media (max-width: 860px) {
  body.menu-open {
    overflow: hidden;
  }

  .page {
    width: 100%;
    padding: 0.35rem;
  }

  .site-layout__footer-wrap {
    width: 100%;
    margin: 0;
    padding: 0 0.35rem 0.35rem;
  }

  .hero__surface {
    min-height: calc(100dvh - 0.7rem);
    height: calc(100dvh - 0.7rem);
    padding: 0.95rem;
    border-radius: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .hero__topbar {
    position: relative;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: nowrap;
    z-index: 9;
  }

  /*
   * Cât timp meniul e deschis, antetul trebuie ridicat peste fundalul
   * întunecat. `z-index`-ul meniului se aplică *în interiorul* contextului
   * creat de bară, deci fără asta fundalul (9998) se desenează peste bară (9)
   * cu tot cu meniul din ea, iar acesta apare estompat.
   */
  body.menu-open .hero__topbar {
    z-index: 10000;
  }

  /*
   * La scroll, bara coboară din capul ecranului și rămâne acolo. `fixed`, nu
   * `sticky`: antetul care o conține are `overflow: hidden`, deci o bară
   * lipită s-ar opri la marginea lui de jos și ar dispărea odată cu el.
   */
  .hero__topbar.is-docked {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    padding: 0.6rem clamp(0.9rem, 4vw, 1.4rem);
    background: rgba(48, 48, 48, 0.72);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    animation: hero-topbar-dock 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .hero__topbar-spacer.is-active {
    display: block;
  }
}

@keyframes hero-topbar-dock {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__topbar.is-docked {
    animation: none;
  }
}

@media (max-width: 860px) {

  /* Numărul rămâne la vedere în bara de sus, nu ascuns sub hamburger:
     pe telefon, apelul este acțiunea principală. */
  .hero__floating {
    /* Logo, apoi telefonul, apoi hamburgerul: altfel hamburgerul se lipește
       de logo și numărul rămâne la margine, rupt de restul barei. */
    order: 1;
    margin-left: auto;
    flex: 0 1 auto;
    gap: 0;
    min-width: 0;
  }

  .hero__bar-actions {
    margin-left: 0;
    min-width: 0;
  }

  .hero__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    flex-shrink: 1;
    padding: 0.6rem 0.85rem;
    font-size: 0.95rem;
    white-space: nowrap;
  }

  /* Bara nu are loc pentru logo, număr, buton și hamburger deodată. */
  .hero__book {
    display: none;
  }

  .hero__nav a.hero__nav-book {
    display: inline-flex;
    justify-content: center;
    margin-top: 0.4rem;
    padding: 0.85rem 1rem;
    border-radius: 999px;
    background: var(--color-pure-white);
    color: var(--color-charcoal);
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
  }

  .hero__menu-toggle {
    display: inline-flex;
    order: 2;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    flex-shrink: 0;
  }

  .hero__nav {
    /* Antetul are `overflow: hidden` pentru colțurile rotunjite și cercurile
       decorative, ceea ce tăia meniul deschis. `fixed` îl scoate din orice
       container care decupează; coordonatele le pune JS, sub buton. Pagina nu
       se poate derula cât timp meniul e deschis, deci rămân valabile. */
    position: fixed;
    top: 0;
    left: auto;
    right: 0;
    width: min(90vw, 370px);
    z-index: 9999;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: linear-gradient(180deg, rgba(162, 178, 191, 0.96) 0%, rgba(152, 170, 183, 0.96) 100%);
    box-shadow: 0 18px 42px rgba(34, 43, 52, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    pointer-events: none;
    transition: opacity 220ms ease, transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .hero__nav.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }

  .hero__nav a {
    width: 100%;
    color: rgba(255, 255, 255, 0.96);
    font-size: 1.08rem;
    font-weight: 600;
    padding: 0.7rem 0.35rem;
    border-radius: 0.7rem;
  }

  .hero__nav a:hover {
    background: rgba(255, 255, 255, 0.12);
    opacity: 1;
    transform: none;
  }

  .hero__nav-phone {
    display: inline-flex;
    margin-top: 0.25rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    justify-content: center;
    padding: 0.8rem 1rem;
  }

  .language-switcher--bar {
    display: none;
  }

  .language-switcher--menu {
    display: flex;
    align-self: stretch;
    margin-top: 0.45rem;
  }

  /* Cele trei controale din josul meniului — telefon, programare, limba — au
     fonturi si chenare diferite, deci din padding ar iesi trei inaltimi
     apropiate, dar nu egale. O inaltime comuna le aliniaza indiferent de text. */
  .hero__nav-phone,
  .hero__nav a.hero__nav-book,
  .language-switcher--menu .language-switcher__toggle {
    /* Peste inaltimea naturala a celui mai inalt dintre ele, ca pragul sa fie
       cel care decide pentru toate trei, nu paddingul fiecaruia. */
    min-height: 3.1rem;
    align-items: center;
    justify-content: center;
  }

  .language-switcher--menu .language-switcher__toggle {
    flex: 1;
    height: auto;
    padding: 0.6rem 1rem;
    border-color: rgba(255, 255, 255, 0.28);
    font-size: 1.05rem;
  }

  /* In meniul mobil lista nu pluteste: ancorata absolut, ar fi taiata de
     marginea panoului. Curge in jos si impinge meniul, ca un acordeon. */
  .language-switcher--menu {
    flex-direction: column;
  }

  .language-switcher--menu .language-switcher__menu {
    position: static;
    margin-top: 0.4rem;
    min-width: 0;
    box-shadow: none;
  }

  /* Meniul mobil coloreaza toate legaturile in alb. Lista de limbi are fundal
     alb, deci optiunile ar fi invizibile — isi iau culoarea inapoi. */
  .hero__nav .language-switcher__option {
    width: auto;
    color: var(--color-dark-grey);
    font-size: 1rem;
    font-weight: 400;
    padding: 0.7rem;
  }

  .hero__nav .language-switcher__option:hover {
    background: rgba(184, 212, 227, 0.26);
    color: var(--color-charcoal);
  }

  .hero__nav .language-switcher__option.is-active {
    color: var(--color-charcoal);
    background: rgba(184, 212, 227, 0.42);
    font-weight: 700;
  }

  .hero__content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
    gap: 0.4rem;
  }

  .hero__copy {
    position: relative;
    left: auto;
    top: auto;
    padding: 0;
    padding-bottom: 0;
    max-width: 100%;
    margin-top: clamp(0.15rem, 1.2vh, 0.7rem);
    gap: 0.85rem;
    flex-shrink: 0;
  }

  .hero__proof {
    position: relative;
    left: auto;
    bottom: auto;
    z-index: 6;
    align-self: stretch;
    max-width: none;
    width: min(100%, 31rem);
    margin-top: auto;
    padding: 1rem 1rem 1.1rem;
    border-radius: 1.4rem;
  }

  .hero__copy h1 {
    font-size: clamp(2.3rem, 11vw, 4.4rem);
    line-height: 0.95;
    max-width: 10ch;
  }

  .hero__copy p {
    max-width: min(94%, 29ch);
    font-size: clamp(1rem, 1.05rem, 1.1rem);
    line-height: 1.42;
    color: rgba(255, 255, 255, 0.88);
  }

  .hero__proof-top {
    gap: 0.75rem;
  }

  .hero__proof-avatars img {
    width: 2.4rem;
    height: 2.4rem;
  }

  .hero__proof-rating {
    font-size: 1.55rem;
  }

  .hero__proof p {
    margin-top: 0.8rem;
    font-size: 0.95rem;
    max-width: 30ch;
  }

  .hero__visual {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 0;
    margin-top: 0;
    justify-content: center;
    align-items: flex-end;
  }

  .hero__visual img {
    width: min(86vw, 420px);
    height: auto;
    max-width: 100%;
    max-height: 49dvh;
  }

  .hero__pulses {
    left: 50%;
    right: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(76vw, 360px);
  }

  .hero__cta {
    position: static;
    margin: 0;
    width: min(90vw, 340px);
    max-width: 100%;
  }

  .about-clinic__surface {
    padding: 1.5rem 0.85rem 1.2rem;
    border-radius: 1.25rem;
  }

  .about-clinic__head h2 {
    font-size: clamp(1.35rem, 8vw, var(--ds-h2-size));
  }

  .about-clinic__head p {
    font-size: 0.96rem;
    max-width: 34ch;
  }

  .about-clinic__showcase {
    margin-top: 1rem;
    min-height: clamp(360px, 72vw, 520px);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .about-clinic__showcase > img {
    width: min(96vw, 620px);
  }

  .about-slider {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
  }

  .about-slider__track {
    display: block;
    width: min(90vw, 430px);
    overflow: hidden;
    margin-top: clamp(1rem, 8vw, 2.8rem);
    position: relative;
    min-height: clamp(170px, 33vw, 230px);
    pointer-events: auto;
  }

  .about-slider__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin-bottom: clamp(0.2rem, 2.4vw, 1rem);
    pointer-events: auto;
  }

  .about-slider__btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    border: none;
    background-color: var(--color-cloud);
    color: var(--color-charcoal);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    transition: all 0.2s ease;
  }

  .about-slider__btn--next {
    background-color: var(--color-primary-dark);
    color: var(--color-pure-white);
  }

  .about-slider__btn:hover {
    background-color: var(--color-charcoal);
    color: var(--color-pure-white);
  }

  .about-slider__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .about-card {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    min-height: clamp(150px, 30vw, 205px);
    transform: none !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    border-radius: 1rem;
    padding: clamp(0.9rem, 2.4vw, 1.35rem);
  }

  .about-card--center {
    order: 0;
    width: 100%;
  }

  .about-card.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    will-change: transform, opacity;
  }

  .about-slider[data-slide-dir="next"] .about-card.is-active {
    animation: card-enter-next 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .about-slider[data-slide-dir="prev"] .about-card.is-active {
    animation: card-enter-prev 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .about-card.is-leaving {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    z-index: 2;
    will-change: transform, opacity;
  }

  .about-slider[data-slide-dir="next"] .about-card.is-leaving {
    animation: card-leave-next 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .about-slider[data-slide-dir="prev"] .about-card.is-leaving {
    animation: card-leave-prev 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .about-card h3 {
    font-size: clamp(1.05rem, 3.2vw, 1.25rem);
    margin-bottom: 0.55rem;
  }

  .about-card p {
    font-size: clamp(0.9rem, 2.7vw, 1.03rem);
    line-height: 1.42;
  }

  .services-section__surface {
    border-radius: 1.25rem;
    padding: 1rem 0.85rem 1.1rem;
  }

  .services-section__head {
    align-items: center;
    margin-bottom: 0.85rem;
  }

  .services-section__head h2 {
    font-size: clamp(1.3rem, 8vw, var(--ds-h2-size));
    max-width: 13ch;
  }

  .service-card {
    flex-basis: calc((100% - 0.7rem) / 2);
    min-height: 215px;
  }

  .service-card p {
    opacity: 1;
    transform: none;
  }

  .service-card__link {
    opacity: 1;
    transform: none;
  }

  .benefits-section__surface {
    border-radius: 1.25rem;
    padding: 1rem 0.85rem 1.1rem;
  }

  .benefits-section__copy {
    padding: 0;
    gap: 0.62rem;
  }

  .benefits-section__copy h2 {
    font-size: clamp(1.3rem, 9vw, var(--ds-h2-size));
    max-width: 13ch;
  }

  .benefits-section__copy h3 {
    font-size: 1.02rem;
    line-height: 1.28;
  }

  .benefits-section__copy p {
    max-width: 100%;
    font-size: 0.95rem;
    line-height: 1.42;
  }

  .benefits-stats {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  .benefits-stat {
    min-height: 170px;
  }

  .team-section__surface {
    border-radius: 1.25rem;
    padding: 1rem 0.85rem 1.1rem;
  }

  .team-section__head h2 {
    font-size: clamp(1.35rem, 9vw, var(--ds-h2-size));
  }

  .team-section__head p {
    font-size: 0.95rem;
    max-width: 34ch;
  }

  .team-card {
    flex-basis: calc((100% - 0.8rem) / 2);
    min-height: 360px;
  }

  .certificates-section__surface {
    border-radius: 1.25rem;
    padding: 1rem 0.85rem 1.1rem;
  }

  .certificates-section__intro h2 {
    font-size: clamp(1.35rem, 7vw, 2.25rem);
  }

  .certificates-marquee {
    --certificates-gap: 0.9rem;
  }

  .certificates-marquee__track {
    animation-duration: var(--certificates-duration, 45s);
  }

  .certificate-panel {
    flex-basis: clamp(220px, 34vw, 280px);
  }

  .certificates-section__action {
    width: fit-content;
  }

  .faq-section__surface {
    border-radius: 1.25rem;
    padding: 1rem 0.85rem 1.1rem;
  }

  .faq-section__intro h2 {
    font-size: clamp(1.75rem, 11vw, var(--ds-display-size));
    max-width: 8ch;
  }

  .faq-section__intro p {
    font-size: 0.95rem;
    max-width: 100%;
  }

  .booking-cta {
    --cta-orbit-inner: min(38vw, 235px);
    --cta-orbit-middle: min(47vw, 310px);
    --cta-orbit-outer: min(59vw, 380px);
    min-height: 420px;
    border-radius: 1.25rem;
  }

  .booking-cta__content h2 {
    font-size: clamp(1.35rem, 5.5vw, 2.25rem);
  }

  .booking-cta__content p {
    max-width: 34ch;
    font-size: 1.0625rem;
  }

  .faq-item__trigger {
    font-size: clamp(0.95rem, 3.5vw, 1.15rem);
  }

  .site-footer__surface {
    border-radius: 1.25rem;
    padding: 1.35rem 1rem 1.4rem;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .site-footer__brand {
    grid-column: auto;
    max-width: 40ch;
  }

  .site-footer__columns {
    grid-template-columns: 1fr;
    justify-content: start;
    gap: 1.5rem;
  }

  .site-footer__legal {
    text-align: left;
    justify-content: flex-start;
  }
}

@keyframes card-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes card-enter-next {
  from {
    opacity: 0;
    transform: translateX(22px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes card-enter-prev {
  from {
    opacity: 0;
    transform: translateX(-22px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes card-leave-next {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(-22px) scale(0.985);
  }
}

@keyframes card-leave-prev {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(22px) scale(0.985);
  }
}

@media (max-width: 640px) {
  .hero__brand {
    width: 112px;
  }

  .hero__copy h1 {
    font-size: clamp(2rem, 14vw, var(--ds-display-size));
    line-height: 1.1;
  }

  .hero__copy p {
    max-width: 34ch;
    font-size: 0.98rem;
  }

  .hero__visual img {
    width: min(84vw, 370px);
    max-height: 46dvh;
  }

  .hero__pulses {
    width: min(78vw, 330px);
  }

  .services-section__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
  }

  .services-section__head h2 {
    max-width: 14ch;
    font-size: clamp(1.3rem, 8.3vw, var(--ds-h2-size));
  }

  .services-section__controls {
    align-self: flex-end;
  }

  .service-card {
    flex-basis: 100%;
    min-height: 205px;
    padding: 0.95rem;
  }

  .service-card h3 {
    font-size: clamp(1rem, 5vw, 1.25rem);
  }

  .service-card p {
    font-size: 0.9rem;
  }

  .service-card__number {
    font-size: clamp(3.2rem, 16vw, 5rem);
  }

  .benefits-section__image {
    aspect-ratio: 16 / 9;
  }

  .benefits-section__copy {
    gap: 0.52rem;
  }

  .benefits-section__copy h2 {
    max-width: 12ch;
    line-height: 1.2;
  }

  .benefits-section__copy h3 {
    font-size: 0.98rem;
  }

  .benefits-section__copy p {
    font-size: 0.9rem;
    max-width: 33ch;
    line-height: 1.36;
  }

  .benefits-stat {
    min-height: 158px;
    padding: 0.95rem;
  }

  .team-section__head {
    text-align: left;
  }

  .team-card {
    flex-basis: 100%;
    min-height: 338px;
  }

  .team-section__controls {
    justify-content: flex-end;
  }

  .certificates-marquee {
    --certificates-gap: 0.8rem;
  }

  .certificates-marquee__track {
    animation-duration: var(--certificates-duration, 45s);
  }

  .certificate-panel {
    flex-basis: clamp(220px, 58vw, 260px);
  }

  .certificates-section__action {
    width: 100%;
    justify-content: center;
  }

  .faq-section__intro h2 {
    font-size: clamp(1.65rem, 13vw, var(--ds-display-size));
  }

  .booking-cta {
    --cta-orbit-inner: min(46vw, 180px);
    --cta-orbit-middle: min(58vw, 230px);
    --cta-orbit-outer: min(69vw, 280px);
    min-height: 360px;
  }

  .booking-cta__content {
    padding: 1.5rem 1.2rem;
  }

  .booking-cta__content h2 {
    font-size: clamp(1.3rem, 8vw, 2.25rem);
  }

  .booking-cta__content p {
    font-size: 1rem;
  }

  .booking-cta__button {
    width: min(100%, 250px);
    min-height: 2.75rem;
    font-size: 1rem;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .site-footer__legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
}

@media (max-width: 420px) {
  .cookie-banner {
    width: calc(100vw - 1rem);
    bottom: 0.5rem;
  }

  .cookie-banner__panel {
    grid-template-columns: 1fr;
    gap: 0.85rem;
    padding: 0.95rem;
    border-radius: 1rem;
  }

  .cookie-banner__copy h2 {
    font-size: 1rem;
  }

  .cookie-banner__copy p:last-child {
    font-size: 0.88rem;
    line-height: 1.45;
  }

  .cookie-banner__actions {
    justify-content: stretch;
  }

  .cookie-banner__button {
    width: 100%;
  }

  .hero__surface {
    padding: 0.85rem 0.8rem;
    border-radius: 1rem;
  }

  .hero__menu-toggle {
    width: 40px;
    height: 40px;
  }

  /* Ecrane foarte înguste: numărul scris ar împinge hamburgerul afară, deci
     rămâne doar iconița — același link tel:, doar mai scurt. */


  .hero__copy h1 {
    font-size: clamp(2.05rem, 15vw, 3.6rem);
    line-height: 0.96;
  }

  .hero__copy p {
    font-size: 0.92rem;
    line-height: 1.36;
  }

  .hero__proof {
    padding: 0.95rem 0.95rem 1rem;
  }

  .hero__proof-avatars img {
    width: 2.15rem;
    height: 2.15rem;
    margin-left: -0.45rem;
  }

  .hero__proof-rating {
    font-size: 1.35rem;
  }

  .hero__proof p {
    font-size: 0.9rem;
  }

  .hero__cta {
    width: min(92vw, 300px);
    max-width: 100%;
  }

  .about-clinic__surface {
    padding: 1.2rem 0.72rem 1rem;
    border-radius: 1rem;
  }

  .about-clinic__head p {
    font-size: 0.9rem;
  }

  .about-card {
    padding: 1rem 0.85rem;
  }

  .about-card h3 {
    font-size: 1rem;
  }

  .about-card p {
    font-size: 0.92rem;
  }

  .about-slider__track {
    width: min(92vw, 350px);
    margin-top: clamp(0.8rem, 6.5vw, 1.8rem);
  }

  .about-slider__btn {
    width: 2.35rem;
    height: 2.35rem;
  }

  .services-section__surface {
    padding: 0.85rem 0.72rem 1rem;
    border-radius: 1rem;
  }

  .services-section__btn {
    width: 2.35rem;
    height: 2.35rem;
  }

  .service-card {
    min-height: 192px;
  }

  .benefits-section__surface {
    padding: 0.85rem 0.72rem 1rem;
    border-radius: 1rem;
  }

  .benefits-section__copy h2 {
    font-size: clamp(1.3rem, 9vw, var(--ds-h2-size));
  }

  .benefits-section__copy h3 {
    font-size: 0.94rem;
  }

  .benefits-section__copy p {
    font-size: 0.9rem;
    line-height: 1.34;
  }

  .benefits-stat h4 {
    font-size: 1.18rem;
  }

  .benefits-stat p {
    font-size: 0.86rem;
  }

  .team-section__surface {
    padding: 0.85rem 0.72rem 1rem;
    border-radius: 1rem;
  }

  .team-section__btn {
    width: 2.35rem;
    height: 2.35rem;
  }

  .certificates-section__surface {
    padding: 0.85rem 0.72rem 1rem;
    border-radius: 1rem;
  }

  .certificates-section__top {
    gap: 1rem;
  }

  .certificates-section__intro h2 {
    font-size: clamp(1.35rem, 11vw, 2.25rem);
  }

  .certificate-panel--short,
  .certificate-panel--medium,
  .certificate-panel--tall {
    min-height: 260px;
  }

  .certificate-panel--preview.certificate-panel--short,
  .certificate-panel--preview.certificate-panel--medium,
  .certificate-panel--preview.certificate-panel--tall {
    min-height: 260px;
    height: 260px;
  }

  .certificate-panel--preview {
    min-height: 260px;
    height: 260px;
  }

  .certificate-panel--preview .certificate-panel__sheet--preview {
    border-radius: 1.15rem;
  }

  .certificate-panel {
    flex-basis: clamp(210px, 72vw, 240px);
  }

  .certificate-panel__sheet {
    border-radius: 1.15rem;
  }

  .certificate-panel__sheet h3 {
    font-size: clamp(1.15rem, 7vw, 1.55rem);
  }

  .certificate-panel__seal {
    width: 3.6rem;
    height: 3.6rem;
  }

  .booking-cta {
    min-height: 340px;
    border-radius: 1rem;
  }

  .booking-cta__content {
    padding: 1.2rem 1rem;
  }

  .booking-cta__content h2 {
    font-size: clamp(1.3rem, 8.6vw, 2.25rem);
  }

  .booking-cta__content p {
    font-size: 0.9375rem;
    line-height: 1.55;
  }

  .booking-cta__avatar {
    width: 52px;
    height: 52px;
    border-width: 3px;
  }

  .faq-section__surface {
    padding: 0.85rem 0.72rem 1rem;
    border-radius: 1rem;
  }

  .faq-item__trigger {
    min-height: 68px;
    padding: 0.82rem;
  }

  .faq-item__content {
    font-size: 0.9rem;
  }

  .faq-item__content-inner {
    padding: 0 0.82rem 1rem;
  }

  .site-footer__surface {
    padding: 0.85rem 0.72rem 1rem;
    border-radius: 1rem;
  }

  .site-footer__logo-img {
    max-height: 34px;
  }

  .site-footer__legal {
    font-size: 0.92rem;
  }
}

@media (max-width: 370px) {
  .page {
    padding: 0.2rem;
  }

  .hero__surface {
    min-height: calc(100dvh - 0.4rem);
    height: calc(100dvh - 0.4rem);
    padding: 0.78rem 0.72rem;
    gap: 0.35rem;
  }

  .hero__brand {
    width: 96px;
  }

  .hero__menu-toggle {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }

  .hero__menu-toggle span {
    width: 17px;
  }

  .hero__nav {
    width: min(94vw, 320px);
    top: calc(100% + 0.55rem);
    padding: 0.85rem;
  }

  .hero__nav a {
    font-size: 0.98rem;
    padding: 0.6rem 0.3rem;
  }

  .hero__content {
    gap: 0.25rem;
  }

  .hero__copy {
    margin-top: 0;
    gap: 0.52rem;
  }

  .hero__copy h1 {
    font-size: clamp(1.8rem, 18vw, 3.2rem);
    line-height: 0.96;
    letter-spacing: -0.04em;
  }

  .hero__copy p {
    max-width: 29ch;
    font-size: 0.87rem;
    line-height: 1.32;
    opacity: 1;
  }

  .hero__proof {
    width: 100%;
    border-radius: 1.2rem;
    padding: 0.9rem;
  }

  .hero__proof-top {
    gap: 0.65rem;
  }

  .hero__proof-rating {
    font-size: 1.15rem;
  }

  .hero__proof p {
    margin-top: 0.7rem;
    font-size: 0.84rem;
  }

  .hero__visual img {
    width: min(84vw, 325px);
    max-height: 41dvh;
  }

  .hero__pulses {
    width: min(84vw, 300px);
    top: 52%;
  }

  .hero__cta {
    width: min(90vw, 280px);
    max-width: 100%;
  }

  .about-slider__track {
    width: min(94vw, 315px);
  }

  .about-slider__controls {
    gap: 0.55rem;
  }

  .about-slider__btn {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 0.92rem;
  }

  .services-section__head h2 {
    font-size: clamp(1.25rem, 8.2vw, var(--ds-h2-size));
  }

  .services-section__btn {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 0.92rem;
  }

  .benefits-section__copy h2 {
    font-size: clamp(1.2rem, 8.1vw, var(--ds-h2-size));
    max-width: 11.5ch;
  }

  .benefits-section__copy h3 {
    font-size: 0.9rem;
  }

  .benefits-section__copy p {
    font-size: 0.86rem;
    line-height: 1.3;
  }

  .benefits-stat__value {
    font-size: 2rem;
  }

  .team-section__head h2 {
    font-size: clamp(1.2rem, 8.1vw, var(--ds-h2-size));
  }

  .team-section__btn {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 0.92rem;
  }

  .faq-section__intro h2 {
    font-size: clamp(1.5rem, 11vw, var(--ds-display-size));
  }

  .faq-item__trigger {
    font-size: 0.92rem;
  }

  .faq-item__icon {
    width: 2.2rem;
    height: 2.2rem;
  }

  .booking-cta {
    min-height: 320px;
  }

  .booking-cta__content h2 {
    font-size: clamp(1.25rem, 10vw, 2.25rem);
  }

  .booking-cta__content p {
    max-width: 28ch;
    font-size: 0.9375rem;
  }

  .booking-cta__button {
    min-width: min(100%, 220px);
    min-height: 2.75rem;
    font-size: 0.9375rem;
  }

  .site-footer__legal {
    font-size: 0.88rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .certificates-marquee__track,
  .booking-cta__orbiter,
  .booking-cta__avatar-shell {
    animation: none;
  }
}

/* Telefoane foarte înguste: numărul scris ar împinge hamburgerul afară din
   bară, deci rămâne doar iconița — același link tel:, doar mai scurt. */
@media (max-width: 360px) {
  .hero__phone-label {
    display: none;
  }

  .hero__phone-icon {
    display: block;
  }

  .hero__phone {
    padding: 0.6rem;
    min-width: 42px;
    justify-content: center;
  }
}

/* --- Buton „înapoi sus” --------------------------------------------------- */

.scroll-top {
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    background 220ms ease;
}

/* Atributul `hidden` singur pierde în fața lui `display: grid`. */
.scroll-top[hidden] {
  display: none;
}

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

.scroll-top:hover {
  background: var(--color-charcoal);
}

.scroll-top:focus-visible {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 3px;
}

.scroll-top svg {
  width: 1.25rem;
  height: 1.25rem;
}



/* --- Bara fixă de jos: rețele sociale + revenire în capul paginii --------- */

.floating-dock {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.floating-social {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.floating-social__link,
.scroll-top {
  width: 3rem;
  height: 3rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(48, 48, 48, 0.72);
  color: var(--color-pure-white);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}

.floating-social__link {
  display: grid;
  place-items: center;
  text-decoration: none;
  transition:
    background 220ms ease,
    transform 220ms ease;
}

.floating-social__link:hover {
  background: var(--color-charcoal);
  transform: translateY(-2px);
}

.floating-social__link:focus-visible {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 3px;
}

.floating-social__icon {
  width: 1.15rem;
  height: 1.15rem;
}

@media (max-width: 860px) {
  /* Rețelele stau la mijloc, iar săgeata rămâne în colțul din dreapta. */
  .floating-dock {
    left: 0;
    right: 0;
    justify-content: center;
    padding-inline: clamp(1rem, 4vw, 2rem);
    /* Bara nu are fundal propriu, deci nu trebuie să prindă click-uri între
       butoane și să blocheze conținutul de dedesubt. */
    pointer-events: none;
  }

  .floating-social,
  .scroll-top {
    pointer-events: auto;
  }

  .scroll-top {
    position: absolute;
    right: clamp(1rem, 4vw, 2rem);
    bottom: 0;
  }
}

@media (max-width: 640px) {
  .floating-social__link,
  .scroll-top {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
  }

  .floating-social {
    gap: 0.35rem;
  }
}