/* ─────────────────────────────────────────────────────────────
   Paleta și tipografia: crem cu o umbră de gri, albastru intens,
   accente vii — roz aprins, galben-neon, coral, verde.
   Titlurile pe Fraunces (serif rotund), textul pe Inter.
   ───────────────────────────────────────────────────────────── */
:root {
  --cream:      #EFEEE6;
  --cream-deep: #E4E3D4;
  --paper:      #FFFFFF;
  --navy:       #191E77;
  --navy-soft:  #4B4F8C;
  --coral:      #FD795B;
  --pink:       #F42A88;
  --pink-soft:  #F9CFE0;
  --yellow:     #F6FF54;
  --green:      #4E9B6F;
  --rule:       #DBDACB;
  --shadow:     0 2px 4px rgba(25,30,119,.06), 0 16px 40px -16px rgba(25,30,119,.18);

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --wrap: 72rem;
  --gut: clamp(1.25rem, 5vw, 3rem);
  --radius: 26px;
}

*, *::before, *::after { box-sizing: border-box; }
/* Safari nu dă întâietate atributului hidden în fața lui display:flex din
   clase; fără regula asta, bara de cookie-uri și rezultatul testului ar
   rămâne pe ecran chiar și „ascunse" */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--sans);
  font-size: clamp(1rem, .97rem + .2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
  letter-spacing: -.01em;
}
p { margin: 0; }
a { color: inherit; }
img, svg, video, iframe { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ─── butoane-pastilă ─── */
.btn {
  display: inline-block;
  font-family: var(--sans); font-weight: 700; font-size: .9375rem;
  padding: .9375rem 1.75rem;
  border: 0; border-radius: 999px;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: transform .18s cubic-bezier(.22,1,.36,1), background-color .18s, box-shadow .18s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: none; }
.btn-primary { background: var(--navy); color: var(--cream); }
.btn-primary:hover { background: var(--pink); color: #fff; box-shadow: var(--shadow); }
.btn-ghost { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
.btn-ghost:hover { background: var(--navy); color: var(--cream); }
.btn-yellow { background: var(--yellow); color: var(--navy); }
.btn-yellow:hover { background: color-mix(in srgb, var(--yellow) 88%, var(--navy)); box-shadow: var(--shadow); }

/* ─── navigația ─── */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .875rem var(--gut);
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.nav-logo {
  font-family: var(--display); font-weight: 600; font-size: 1.25rem;
  text-decoration: none; margin-right: auto;
  letter-spacing: -.01em;
}
.nav-logo-dr { color: var(--pink); }
.nav-links { display: flex; gap: 1.375rem; }
.nav-links a {
  text-decoration: none; font-weight: 500; font-size: .9375rem;
  color: var(--navy-soft);
}
.nav-links a:hover { color: var(--pink); }
.btn-nav { padding: .625rem 1.25rem; font-size: .875rem; background: var(--navy); color: var(--cream); }
.btn-nav:hover { background: var(--pink); color: #fff; }
.nav-burger { display: none; }

/* meniul are acum destule linkuri cât să ceară burger și pe tabletă */
@media (max-width: 63.9rem) {
  .nav { flex-wrap: wrap; gap: .75rem 1rem; }
  .btn-nav { display: none; }
  .nav-burger {
    display: flex; flex-direction: column; gap: 5px;
    background: none; border: 0; padding: .5rem; cursor: pointer;
  }
  .nav-burger span { width: 22px; height: 2.5px; background: var(--navy); border-radius: 2px; }
  .nav-links {
    display: none; width: 100%; flex-direction: column; gap: .875rem;
    padding: .5rem 0 .875rem;
  }
  .nav.is-open .nav-links { display: flex; }
}

/* ─── hero ─── */
.hero {
  display: grid; gap: clamp(2rem, 5vw, 3rem);
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2.5rem, 6vw, 4.5rem);
}
@media (min-width: 54rem) {
  .hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}
/* la ancore, conținutul nu se ascunde sub meniul lipit sus */
section[id] { scroll-margin-top: 4.75rem; }

/* pe mobil, fotografia deschide pagina, pe toată lățimea, până sub meniu:
   meniul stă transparent peste ea și devine crem abia la derulare, iar poza
   se topește în crem sus (spre meniu) și jos (spre text) */
.has-cover .nav {
  position: fixed; left: 0; right: 0; top: 0;
  background: transparent; border-bottom-color: transparent;
  backdrop-filter: none;
  transition: background-color .25s, border-color .25s;
}
.has-cover .nav.is-solid,
.has-cover .nav.is-open {
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--rule);
}

/* meniul nu există în primul ecran: stă ridicat deasupra paginii și
   coboară, crem, abia după prima derulare — pe orice ecran */
.has-cover .nav {
  transform: translateY(-100%);
  pointer-events: none;
  transition: transform .3s cubic-bezier(.22,1,.36,1), background-color .25s, border-color .25s;
}
.has-cover .nav.is-solid {
  transform: none;
  pointer-events: auto;
}

/* identitatea din hero: numele mare, liniuța, specialitatea */
.hero-brand { margin-bottom: clamp(1.25rem, 3vw, 1.75rem); }
.hero-brand-name {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.75rem, 1.2rem + 1.3vw, 2.5rem);
  line-height: 1.15; letter-spacing: -.01em;
  color: var(--navy);
}
.brand-dr { color: var(--pink); }
.hero-brand-name::after {
  content: ""; display: block;
  width: 2.5rem; height: 3px; border-radius: 2px;
  background: var(--pink);
  margin-block: .875rem;
}
.hero-brand-spec {
  font-weight: 700; font-size: .8125rem;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--navy-soft);
}

@media (max-width: 53.9rem) {
  .has-cover .hero { padding-top: 0; }
  /* pe mobil identitatea stă pe fotografie (photo-kicker), nu în text */
  .has-cover .hero-brand { display: none; }

  .has-cover .hero-photo {
    order: -1;
    max-width: none; width: 100vw;
    margin-inline: calc(50% - 50vw);
  }
  .has-cover .hero-photo-shot {
    border-radius: 0; box-shadow: none;
    aspect-ratio: 4 / 4.1;
    background: var(--cream);
    position: relative;
  }
  .has-cover .hero-photo-shot img { object-position: var(--photo-pos-m, 78% 22%); }
  .has-cover .hero-photo-shot::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background:
      linear-gradient(to bottom, color-mix(in srgb, var(--cream) 45%, transparent) 0%, transparent 11%),
      linear-gradient(105deg, color-mix(in srgb, var(--cream) 85%, transparent) 0%, color-mix(in srgb, var(--cream) 40%, transparent) 34%, transparent 56%);
  }
  .has-cover .hero-photo-shot::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 6rem; z-index: 1;
    background: linear-gradient(to top, var(--cream) 12%, transparent);
  }
  .has-cover .hero .doodle { display: none; }

  /* eticheta de specialitate stă pe fotografie, în stânga chipului:
     echilibrează hero-ul, iar sub poză rămân doar titlul și textul */
  .has-cover .photo-kicker {
    display: block; position: absolute; z-index: 2;
    left: var(--gut); top: 45%; transform: translateY(-50%);
    margin: 0; max-width: 50vw;
    text-align: left;
  }
  .has-cover .photo-kicker .photo-brand {
    display: block;
    font-family: var(--display); font-weight: 600;
    font-size: 1.4375rem; line-height: 1.25;
    letter-spacing: -.01em; text-transform: none;
    color: var(--navy);
  }
  .photo-brand-dr { color: var(--pink); }
  /* liniuța de accent desparte numele de specialitate */
  .has-cover .photo-kicker .photo-brand::after {
    content: ""; display: block;
    width: 2.25rem; height: 3px; border-radius: 2px;
    background: var(--pink);
    margin-block: .875rem;
  }
  .has-cover .photo-kicker span {
    display: block;
    font-weight: 700; font-size: .875rem; line-height: 1.6;
    letter-spacing: .09em; text-transform: uppercase;
    color: var(--navy);
    text-wrap: balance;
  }
  .has-cover .photo-kicker small {
    display: block; margin-top: .5rem;
    font-weight: 700; font-size: .75rem;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--pink);
  }

  .has-cover .hero-copy { text-align: center; margin-top: -2rem; position: relative; z-index: 2; }
  .has-cover .hero-cta { justify-content: center; margin-top: 1.25rem; }
  .has-cover .lead { margin-inline: auto; margin-top: 1rem; }
  /* titlul mai mic pe mobil: meniul, poza și titlul încap în primul ecran */
  .has-cover .hero h1 { font-size: clamp(1.75rem, 7vw, 2.125rem); line-height: 1.12; }
}

/* pe desktop, aceeași idee, culcată: fotografia e fundalul întregului hero,
   textul stă pe partea stângă, pe un văl de crem, iar meniul transparent
   deasupra — totul se topește în crem sus, jos și spre text */
@media (min-width: 54rem) {
  .has-cover .hero {
    max-width: none; padding-inline: 0;
    position: relative; display: flex; align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    padding-block: clamp(3.5rem, 9vh, 6rem) clamp(3rem, 9vh, 5rem);
    overflow: hidden;
  }
  .has-cover .hero-copy {
    position: relative; z-index: 2;
    width: 100%; max-width: var(--wrap);
    margin-inline: auto; padding-inline: var(--gut);
  }
  /* textul se oprește înainte de chip: coloana e limitată și față de ecran,
     nu doar în rem, ca pe lățimi medii să nu urce în păr */
  .has-cover .hero-copy > * { max-width: min(33rem, 44vw); }
  /* titlul puțin mai temperat în modul copertă, ca să nu rupă rândurile urât
     în coloana îngustă */
  .has-cover .hero h1 { font-size: clamp(2rem, 1.1rem + 2.3vw, 2.875rem); line-height: 1.1; }
  .has-cover .hero-photo {
    position: absolute; inset: 0; z-index: 0;
    max-width: none; margin: 0;
  }
  .has-cover .hero-photo-shot {
    width: 100%; height: 100%;
    aspect-ratio: auto; border-radius: 0; box-shadow: none;
    background: var(--cream);
    position: relative;
  }
  .has-cover .hero-photo-shot img { object-position: var(--photo-pos-d, 78% 30%); }
  .has-cover .hero-photo-shot::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background:
      linear-gradient(to bottom, color-mix(in srgb, var(--cream) 50%, transparent) 0%, transparent 11%),
      linear-gradient(to top, var(--cream) 4%, transparent 22%),
      linear-gradient(to right, var(--cream) 38%, color-mix(in srgb, var(--cream) 60%, transparent) 55%, transparent 76%);
  }
  .has-cover .hero-photo-shot::after { content: none; }
  .has-cover .hero .doodle { display: none; }
}
.kicker {
  font-weight: 700; font-size: .8125rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 1.25rem;
}
h1 {
  font-size: clamp(2.375rem, 1.4rem + 4.2vw, 4.25rem);
  line-height: 1.04;
}
/* sublinierea desenată de mână, sub partea accentuată a titlului */
.accent-underline {
  position: relative; white-space: pre-wrap;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M4 10C60 3 120 3 150 7s90 4 146-3' fill='none' stroke='%23F42A88' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% .14em;
  padding-bottom: .1em;
}
.lead {
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  max-width: 33em;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  color: var(--navy-soft);
}
.hero-cta {
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  display: flex; flex-wrap: wrap; gap: .875rem;
}

.photo-kicker { display: none; }

/* fotografia: arcadă pe fond roz, cu doodle-uri în jur */
.hero-photo { position: relative; max-width: 26rem; margin-inline: auto; width: 100%; }
.hero-photo-shot {
  overflow: hidden;
  border-radius: 47% 47% var(--radius) var(--radius) / 38% 38% var(--radius) var(--radius);
  background: var(--pink-soft);
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow);
}
.hero-photo-shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--photo-pos, 93% 50%);
}
.doodle { position: absolute; pointer-events: none; }
.doodle-spark {
  width: clamp(30px, 12%, 44px); top: -4%; left: -6%;
  fill: var(--yellow);
  animation: twinkle 3.4s ease-in-out infinite;
}
.doodle-squig {
  width: 42%; bottom: -7%; right: -5%;
  fill: none; stroke: var(--green); stroke-width: 4; stroke-linecap: round;
}
@keyframes twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50%      { transform: scale(.78) rotate(18deg); opacity: .75; }
}

/* ─── benzile de secțiune: dreptunghiuri mari, rotunjite, pe culori ─── */
section h2 {
  font-size: clamp(1.75rem, 1.25rem + 2.3vw, 2.875rem);
  line-height: 1.1;
  /* italicul Fraunces, ca la banda de filmulețe — semnătura titlurilor */
  font-style: italic;
}
.band-sub { color: var(--navy-soft); max-width: 36em; margin-top: .75rem; }

/* etichetele de secțiune: numerotate singure, în ordinea în care apar —
   secțiunile ascunse (fără conținut) nu strică numărătoarea */
main { counter-reset: eyebrow; }
.eyebrow {
  counter-increment: eyebrow;
  display: inline-flex; align-items: center; gap: .5625rem;
  font-size: .75rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--pink);
  margin-bottom: .875rem;
}
.eyebrow::before {
  content: counter(eyebrow, decimal-leading-zero);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  padding: .1875rem .5rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.eyebrow::after {
  content: "";
  width: 2.25rem; height: 2px;
  background: currentColor; border-radius: 2px;
  opacity: .45;
}
.social-band .eyebrow { color: var(--yellow); }
.reels-band .eyebrow { justify-content: center; }

/* banda-ticker: specialitățile defilează în buclă, ușor înclinat;
   învelișul taie colțurile rotite, ca lățimea de 104% să nu lase
   pagina să deruleze orizontal */
.ticker-clip { overflow: clip; }
.ticker {
  overflow: hidden;
  background: var(--yellow);
  transform: rotate(-1.1deg);
  width: 104%;
  margin: clamp(1.25rem, 3vw, 2rem) -2% clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: var(--shadow);
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 28s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-half {
  display: flex; align-items: center; gap: 2.25rem;
  padding: .6875rem 2.25rem .6875rem 0;
}
.ticker-half span {
  font-family: var(--display); font-weight: 500;
  font-size: 1.0625rem; color: var(--navy);
  white-space: nowrap;
}
.ticker-half i { font-style: normal; font-size: .8125rem; color: var(--pink); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* filmulețe: pe cremul paginii, ca la referință — simple, fără cutie.
   Titlul stă în italic, pe centru, iar cardurile plutesc libere */
.reels-band { padding-block: clamp(3rem, 7vw, 5rem); }
.reels-band .band-head { text-align: center; }
.reels-band .band-sub { margin-inline: auto; }
.band-head { margin-bottom: clamp(1.5rem, 4vw, 2.25rem); }

/* caruselul: filmulețul din centru e întreg, vecinii se retrag puțin */
.reels-shell { position: relative; }
/* cu puține filmulețe (nimic de derulat), banda stă frumos pe centru;
   centrarea nu se aplică la derulare — ar face capătul stâng de neatins */
.reels-shell:not(.is-scrollable) .reels { justify-content: center; }
.reel { transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .35s; }
/* lateralele rămân luminoase, doar mai mici — diferența o face mărimea */
.reel.is-away { transform: scale(.88); opacity: .92; }
.reel.is-away { cursor: pointer; }
.reel.is-center { transform: scale(1.04); z-index: 2; }
.reel.is-center.is-away { transform: scale(1.04); opacity: 1; }
@media (min-width: 54rem) {
  .reel.is-center { transform: scale(1.07); }
  .reel.is-center.is-away { transform: scale(1.07); }
}
/* săgeți discrete: doar semnul, fără disc și fără umbră */
.reels-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 2.75rem; height: 2.75rem;
  border: 0; border-radius: 50%;
  background: none; color: var(--navy);
  font-family: var(--display);
  font-size: 2.375rem; line-height: 1; font-weight: 500;
  cursor: pointer;
  transition: color .15s, transform .15s;
  display: none;
}
.reels-arrow:hover { color: var(--pink); transform: translateY(-50%) scale(1.12); }
.reels-prev { left: clamp(.5rem, 2vw, 1.5rem); }
.reels-next { right: clamp(.5rem, 2vw, 1.5rem); }
@media (min-width: 54rem) { .reels-shell.is-scrollable .reels-arrow { display: block; } }

.reels {
  --reelw: min(88vw, 20rem);
  display: flex; gap: clamp(1rem, 2.5vw, 1.5rem);
  overflow-x: auto;
  /* aer sus și jos, ca mărirea cardului central să nu se taie */
  padding: .625rem var(--gut) .75rem;
  scroll-snap-type: x mandatory;
  /* fără bară de derulare: banda se mișcă din gesturi, săgeți și
     atingerea cardurilor laterale */
  scrollbar-width: none;
}
.reels::-webkit-scrollbar { display: none; }
@media (min-width: 54rem) {
  .reels { --reelw: 21rem; }
}
/* la derulare, capetele primesc căptușeală cât să poată ajunge și primul,
   și ultimul card în centru — altfel clicul pe ele n-ar avea unde să le ducă */
.reels-shell.is-scrollable .reels {
  padding-inline: max(var(--gut), calc(50% - var(--reelw) / 2));
}
.reel {
  margin: 0; flex: 0 0 auto;
  /* cardul aproape cât ecranul pe mobil, cu vecinul ițindu-se — filmulețele
     urcate direct rulează mare, ca într-un feed de reels */
  width: var(--reelw);
  scroll-snap-align: center;
  position: relative;
}
.reel video, .reel iframe {
  width: 100%; aspect-ratio: 9 / 16;
  object-fit: cover; border: 0;
  border-radius: 18px;
  background: var(--cream-deep);
  box-shadow: var(--shadow);
}
.reel figcaption {
  margin-top: .75rem;
  font-size: .875rem; font-weight: 500;
  color: var(--navy-soft);
  text-align: center;
}
.reel-sound {
  position: absolute; right: .75rem; top: .75rem;
  width: 2.5rem; height: 2.5rem;
  border: 0; border-radius: 50%;
  background: rgba(16,20,79,.72); color: #fff;
  font-size: 1rem; cursor: pointer;
}

/* sub carusel: unde se urmăresc restul materialelor video */
.reels-follow {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  text-align: center;
}
.reels-follow p {
  font-size: .9375rem; color: var(--navy-soft);
  max-width: 34em; margin-inline: auto;
}
.reels-follow-links {
  margin-top: 1rem;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem;
}
/* pe fundal crem, pastilele au nevoie de contur, nu de crem pe crem */
.reels-follow .social-link {
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--rule), var(--shadow);
}
.reels-follow .social-link:hover { background: var(--yellow); }

/* poarta de consimțământ peste filmulețele găzduite de terți */
.reel-gate {
  position: absolute; inset: 0;
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--rule), var(--shadow);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 1rem; text-align: center;
  padding: 1.25rem;
}
.reel-gate p { font-size: .8438rem; line-height: 1.5; color: var(--navy-soft); }
.reel-gate .btn { font-size: .8438rem; padding: .6875rem 1.25rem; }

/* cum lucrez */
.cards-band { padding-block: clamp(3rem, 7vw, 5rem); }
.cards {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  display: grid; gap: clamp(1rem, 2.5vw, 1.5rem);
}
@media (min-width: 44rem) { .cards { grid-template-columns: 1fr 1fr; } }
.card {
  background: var(--paper);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: .625rem;
}
.card-tag {
  align-self: flex-start;
  font-size: .75rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .3125rem .8125rem .3125rem 1.625rem;
  border-radius: 999px;
  background: var(--cream);
  position: relative;
}
.card-tag::before {
  content: ""; position: absolute;
  left: .625rem; top: 50%; margin-top: -4px;
  width: 8px; height: 8px; border-radius: 50%;
}
.dot-red::before    { background: var(--coral); }
.dot-yellow::before { background: var(--yellow); }
.dot-green::before  { background: var(--green); }
.dot-pink::before   { background: var(--pink); }
.card h3 { font-size: 1.375rem; line-height: 1.22; }
.card p { color: var(--navy-soft); font-size: .9688rem; }

/* ─── omul din halat: fotografii în rame înclinate, cu umbre colorate ─── */
.gallery-band {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5rem);
  overflow: clip;
}
.gallery-blob {
  position: absolute; left: clamp(-8rem, -10vw, -4rem); top: 10%;
  width: clamp(16rem, 34vw, 26rem);
  fill: var(--pink-soft); opacity: .6;
  animation: drift 9s ease-in-out infinite;
  pointer-events: none;
  /* decor, nu conținut: stă în spatele textului și al ramelor */
  z-index: -1;
}
.gallery-spark {
  right: clamp(.75rem, 4vw, 3rem); top: clamp(1.5rem, 4vw, 3rem);
  width: clamp(30px, 4vw, 44px);
  fill: var(--yellow);
  animation: twinkle 3.4s ease-in-out infinite;
}
.gallery-squig {
  position: absolute; right: 6%; bottom: 1.25rem;
  width: clamp(6rem, 14vw, 10rem);
  fill: none; stroke: var(--coral); stroke-width: 4; stroke-linecap: round;
  pointer-events: none;
  animation: drift 7s ease-in-out infinite reverse;
  z-index: -1;
}
@keyframes drift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(12px) rotate(3deg); }
}
/* pe mobil, cardurile stau unul sub altul — toată banda se vede derulând
   pagina, fără nicio derulare laterală */
.gallery {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  display: grid; gap: 2.25rem;
  justify-items: center;
  padding-block: .5rem 1rem;
}
.g-item { width: min(100%, 19rem); }
/* pe tabletă, două coloane */
@media (min-width: 34rem) and (max-width: 53.9rem) {
  .gallery { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .g-item { width: min(100%, 17rem); }
}
/* doar pe rândul de desktop intrarea vine în cascadă, de la stânga la
   dreapta; în coloană, fiecare card intră imediat ce ajunge în cadru */
@media (min-width: 54rem) {
  .g-item:nth-child(2) { transition-delay: .09s; }
  .g-item:nth-child(3) { transition-delay: .18s; }
  .g-item:nth-child(4) { transition-delay: .27s; }
}
.snap {
  margin: 0; position: relative;
  background: var(--paper);
  padding: .625rem .625rem 0;
  border-radius: 18px;
  box-shadow: var(--shadow);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.g-item:nth-child(4n+1) .snap { transform: rotate(-2.4deg); }
.g-item:nth-child(4n+2) .snap { transform: rotate(1.8deg) translateY(10px); }
.g-item:nth-child(4n+3) .snap { transform: rotate(-1.2deg) translateY(3px); }
.g-item:nth-child(4n+4) .snap { transform: rotate(2.6deg) translateY(8px); }
.g-item:hover .snap, .g-item:focus-within .snap { transform: rotate(0deg) translateY(-6px); }
.snap::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  transform: translate(9px, 11px) rotate(1.2deg);
}
.g-item:nth-child(4n+1) .snap::after { background: var(--pink-soft); }
.g-item:nth-child(4n+2) .snap::after { background: var(--yellow); }
.g-item:nth-child(4n+3) .snap::after { background: var(--green); opacity: .3; }
.g-item:nth-child(4n+4) .snap::after { background: var(--coral); opacity: .45; }
.snap img {
  width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 12px;
}
.snap figcaption { padding: .6875rem .125rem .8125rem; }
.snap .card-tag { display: inline-block; }
@media (min-width: 54rem) {
  .gallery {
    display: flex; gap: clamp(1.25rem, 2.5vw, 1.75rem);
    justify-content: center;
  }
  .g-item { width: calc((100% - 3 * clamp(1.25rem, 2.5vw, 1.75rem)) / 4); }
}

/* despre */
.about-band { padding-block: clamp(3rem, 7vw, 5rem); }
.about {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  display: grid; gap: clamp(1.75rem, 4vw, 2.5rem);
}
@media (min-width: 44rem) { .about { grid-template-columns: 1fr 1.2fr; gap: clamp(2rem, 5vw, 3.5rem); } }
/* portretul cu tratatul, în ramă-arcadă; pe ecrane late are coloana lui */
.about-photo { margin: 0; position: relative; max-width: 15rem; }
.about-photo img {
  width: 100%; height: auto;
  aspect-ratio: 3 / 4.2;
  object-fit: cover; object-position: 50% 18%;
  border-radius: 999px 999px 22px 22px;
  box-shadow: var(--shadow);
}
.about-photo::before {
  content: ""; position: absolute; z-index: -1;
  /* umbra roz urmărește doar fotografia (aceeași proporție), nu și legenda */
  top: 1.25rem; left: 1.25rem; right: -0.875rem;
  aspect-ratio: 3 / 4.2;
  border-radius: 999px 999px 22px 22px;
  background: var(--pink-soft);
}
.about-spark {
  width: 34px; top: .25rem; right: -1.125rem;
  fill: var(--pink);
  animation: twinkle 3.8s ease-in-out infinite;
}
/* legenda: o pastilă albă, ca etichetele din galerie, călare pe marginea
   de jos a arcadei — nu text liber peste fundalul roz */
.about-photo figcaption {
  position: relative; z-index: 1;
  width: fit-content; max-width: 94%;
  margin: -1.125rem auto 0;
  padding: .4375rem 1rem;
  background: var(--paper);
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-size: .8125rem; font-weight: 500;
  color: var(--navy-soft);
  text-align: center; line-height: 1.4;
}
@media (min-width: 44rem) and (max-width: 59.9rem) {
  .about-photo { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 1.25rem; max-width: none; }
  .about-photo img { width: min(38%, 13rem); }
  .about-photo figcaption { margin: 0 0 .75rem; }
  .about-photo::before, .about-spark { display: none; }
}
@media (min-width: 60rem) {
  .about { grid-template-columns: minmax(11rem, 14rem) 1fr 1.2fr; gap: clamp(2rem, 4vw, 3rem); }
}
.mini-label {
  font-family: var(--sans);
  font-size: .75rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--pink);
  margin: 0 0 .75rem;
}
.mini-label:not(:first-child) { margin-top: 1.75rem; }
.about-line { color: var(--navy-soft); font-size: .9688rem; }
.chips {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.chips li {
  font-size: .9062rem; font-weight: 500;
  padding: .4375rem .9375rem;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--rule);
}
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.125rem; }
.timeline li {
  display: grid; grid-template-columns: 5.75rem 1fr; gap: 1rem;
  align-items: baseline;
}
.timeline-year {
  font-weight: 700; font-size: .8125rem;
  color: var(--pink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.timeline-what { color: var(--navy-soft); font-size: .9375rem; line-height: 1.55; }

/* recenzii de pe Google — banda roz pal aduce culoare la mijlocul paginii */
.reviews-band {
  background: var(--pink-soft);
  border-radius: var(--radius);
  margin-inline: clamp(.5rem, 1.5vw, 1rem);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.reviews-band .band-sub { color: var(--navy); opacity: .75; }
.reviews {
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  display: grid; gap: clamp(.875rem, 2vw, 1.25rem);
}
@media (min-width: 44rem) { .reviews { grid-template-columns: 1fr 1fr; } }
@media (min-width: 66rem) { .reviews { grid-template-columns: repeat(3, 1fr); } }
.review {
  margin: 0;
  background: var(--paper);
  border-radius: 20px;
  padding: 1.5rem 1.625rem;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: .75rem; align-items: flex-start;
}
.review-stars { color: var(--coral); font-size: 1.0625rem; letter-spacing: .1em; }
.review blockquote {
  margin: 0;
  font-family: var(--display); font-weight: 500;
  font-size: 1.0625rem; line-height: 1.5;
}
.review figcaption { font-size: .8438rem; font-weight: 700; }
.review figcaption small {
  display: block; font-weight: 400; color: var(--navy-soft);
}
.reviews-all { margin-top: clamp(1.25rem, 3vw, 1.75rem); }

/* unde am apărut */
.press-band { padding-block: clamp(3rem, 7vw, 5rem); }
.press {
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  display: grid; gap: clamp(.875rem, 2vw, 1.25rem);
}
@media (min-width: 44rem) { .press { grid-template-columns: 1fr 1fr; } }
@media (min-width: 66rem) { .press { grid-template-columns: 1fr 1fr 1fr; } }
.press-card {
  position: relative;
  display: flex; flex-direction: column; gap: .5rem; align-items: flex-start;
  background: var(--paper);
  border-radius: 20px;
  padding: 1.375rem 1.5rem;
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform .18s cubic-bezier(.22,1,.36,1);
}
a.press-card:hover { transform: translateY(-3px); }
a.press-card:hover .press-title { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--pink); }
.press-kind {
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--pink);
  padding: .25rem .6875rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.press-outlet { font-size: .8125rem; font-weight: 700; color: var(--navy-soft); }
.press-title {
  font-family: var(--display); font-weight: 500;
  font-size: 1.125rem; line-height: 1.3;
}
.press-go {
  position: absolute; right: 1.25rem; top: 1.125rem;
  font-size: 1.125rem; color: var(--pink);
}

/* urmărește-mă */
.social-band {
  background: var(--navy); color: var(--cream);
  border-radius: var(--radius);
  margin-inline: clamp(.5rem, 1.5vw, 1rem);
  padding-block: clamp(3rem, 7vw, 4.5rem);
  text-align: center;
}
.social-band h2 { color: var(--cream); max-width: 18em; margin-inline: auto; }
.social-wrap { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.social-note { font-size: .9375rem; color: color-mix(in srgb, var(--cream) 72%, var(--navy)); max-width: 36em; }
.social-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.social-link {
  display: inline-flex; align-items: center; gap: .5625rem;
  font-weight: 700; font-size: .9375rem;
  color: var(--navy); background: var(--cream);
  text-decoration: none;
  padding: .8125rem 1.375rem;
  border-radius: 999px;
  transition: transform .18s cubic-bezier(.22,1,.36,1), background-color .18s, color .18s;
}
.social-link:hover { transform: translateY(-2px); background: var(--yellow); }
.social-link svg { width: 1.25rem; height: 1.25rem; }

/* unde mă găsești */
.find-band {
  background: var(--cream-deep);
  border-radius: var(--radius);
  margin-inline: clamp(.5rem, 1.5vw, 1rem);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.find {
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  display: grid; gap: clamp(1rem, 2.5vw, 1.5rem);
  align-items: start;
}
/* câte un card pe loc: două locuri stau umăr la umăr, unul singur respiră */
@media (min-width: 44rem) { .find { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); } }
.find-card {
  background: var(--paper);
  border-radius: 20px;
  padding: clamp(1.5rem, 3.5vw, 2rem);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: .25rem;
}
.find-name {
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.5rem);
  line-height: 1.25;
  margin-bottom: .375rem;
}
.find-card .mini-label { margin-top: 1rem; }
.find-mail {
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  color: var(--navy-soft); font-size: .9375rem;
}
.find-mail a { text-underline-offset: 3px; text-decoration-color: var(--rule); font-weight: 600; }
.find-mail a:hover { text-decoration-color: var(--pink); }
.find-line { color: var(--navy-soft); }
.find-line a { text-underline-offset: 3px; text-decoration-color: var(--rule); }
.find-line a:hover { text-decoration-color: var(--pink); }
.find-big {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.25rem, 1.1rem + .8vw, 1.625rem);
  color: var(--navy);
}
.find-big a { text-decoration: none; }
.find-big a:hover { color: var(--pink); }
.find-map { margin-top: 1rem; }
.find-hours { border-collapse: collapse; width: 100%; }
.find-hours th, .find-hours td {
  text-align: left; padding: .5625rem 0;
  border-bottom: 1px dashed var(--rule);
  font-size: .9375rem;
}
.find-hours tr:last-child th, .find-hours tr:last-child td { border-bottom: 0; }
.find-hours th { font-weight: 700; padding-right: 1rem; }
.find-hours td { color: var(--navy-soft); font-variant-numeric: tabular-nums; }

/* subsol */
.foot {
  padding-block: clamp(2rem, 5vw, 3rem);
  text-align: center;
  font-size: .875rem; color: var(--navy-soft);
  display: grid; gap: .375rem;
}
.foot a { text-underline-offset: 3px; text-decoration-color: var(--rule); }
.foot a:hover { text-decoration-color: var(--pink); }
.foot-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule);
}
.foot-btn:hover { text-decoration-color: var(--pink); }

/* bannerul de cookie-uri */
.cookie-bar {
  position: fixed; z-index: 90;
  left: clamp(.5rem, 2vw, 1.25rem); right: clamp(.5rem, 2vw, 1.25rem); bottom: clamp(.5rem, 2vw, 1.25rem);
  max-width: 44rem; margin-inline: auto;
  background: var(--navy); color: var(--cream);
  border-radius: 20px;
  box-shadow: 0 18px 50px -12px rgba(16,20,79,.5);
  padding: 1.125rem 1.375rem;
  display: flex; flex-wrap: wrap; gap: .875rem 1.5rem;
  align-items: center; justify-content: space-between;
}
.cookie-bar p { font-size: .875rem; line-height: 1.55; flex: 1 1 22rem; }
.cookie-bar a { color: var(--yellow); text-underline-offset: 3px; }
.cookie-actions { display: flex; gap: .625rem; }
.cookie-bar .btn { font-size: .8438rem; padding: .6875rem 1.25rem; }
.cookie-no { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cream) 40%, var(--navy)); }
.cookie-no:hover { box-shadow: inset 0 0 0 2px var(--cream); }

/* pagina de 404 */
.notfound {
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; text-align: center;
  padding-block: 3rem;
}
.notfound-logo { width: clamp(7rem, 20vw, 10rem); height: auto; }
/* aici eticheta poartă chiar codul 404 — numărătoarea de secțiuni n-are sens */
.notfound .eyebrow::before { display: none; }
.notfound h1 {
  font-style: italic;
  font-size: clamp(1.75rem, 1.25rem + 2.3vw, 2.875rem);
}
.notfound .lead { max-width: 28em; color: var(--navy-soft); }
.notfound .btn { margin-top: .5rem; }

/* paginile de politici */
.prose {
  max-width: 44rem;
  padding-block: clamp(2rem, 5vw, 3.5rem);
  display: flex; flex-direction: column; gap: 1rem;
}
.prose h1 { font-size: clamp(1.875rem, 1.4rem + 2vw, 2.75rem); margin-bottom: .5rem; }
.prose h2 { font-size: 1.375rem; margin-top: 1.25rem; }
.prose p, .prose li { color: var(--navy-soft); font-size: .9688rem; }
.prose ul { margin: 0; padding-left: 1.25rem; display: grid; gap: .5rem; }
.prose strong { color: var(--navy); }
.prose a { text-underline-offset: 3px; text-decoration-color: var(--rule); }
.prose a:hover { text-decoration-color: var(--pink); }
.prose table { border-collapse: collapse; width: 100%; font-size: .875rem; }
.prose th, .prose td {
  text-align: left; vertical-align: top;
  padding: .625rem .75rem;
  border-bottom: 1px solid var(--rule);
  color: var(--navy-soft);
}
.prose th { color: var(--navy); font-weight: 700; }
.prose-updated { font-size: .8125rem; }

/* ─── mișcare ─── */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* animații legate de derulare — doar unde browserul le știe (Chrome/Edge);
   restul primesc reveal-ul obișnuit, nimic nu depinde de ele.
   Transformă doar poziția/rotația: opacitatea rămâne treaba lui .reveal,
   pusă pe alt element, ca cele două să nu se calce pe transform.
   Rulează doar fără „reduced motion”: durata nu contează la scroll-timeline,
   așa că regula globală de mai jos nu le-ar putea opri. */
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
  .snap {
    animation: snap-rise both cubic-bezier(.22, 1, .36, 1);
    animation-timeline: view();
    animation-range: entry 5% entry 70%;
  }
  @keyframes snap-rise {
    from { transform: translateY(2.5rem) scale(.93) rotate(0deg); }
  }
  .about-photo img {
    animation: arch-rise both ease-out;
    animation-timeline: view();
    animation-range: entry 0% entry 65%;
  }
  @keyframes arch-rise {
    from { transform: translateY(1.75rem) rotate(-2.5deg); }
  }
}
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}