/* =========================================================
   Láser Indoloro en Bilbao
   Paleta luata din graficele lor: roz pal (#ffeedd, #eebbbb) si
   violetul adanc (#441166), ajustat cat sa fie lizibil ca accent.
   Un singur accent pe tot siteul. Tema luminoasa blocata.

   Fotografiile lor sunt mici (multe sub 720px), deci designul nu se sprijina
   pe imagini mari: rame mici, mult spatiu, tipografie si dovezi.
   ========================================================= */

:root {
  --bg:          #FCF5F4;
  --bg-2:        #F6E8E7;
  --bg-3:        #EEDAD9;
  --card:        #FFFFFF;

  --violet:      #4E1A73;
  --violet-deep: #37124F;
  --violet-tint: rgba(78, 26, 115, 0.07);
  --blush:       #EEBBBB;

  --ink:         #2C2130;
  --ink-soft:    #5F5566;
  --ink-mute:    #8B8093;

  --line:        rgba(44, 33, 48, 0.13);
  --line-soft:   rgba(44, 33, 48, 0.07);

  /* forma: butoane pill, carduri 16px, media 12px */
  --r:      12px;
  --r-lg:   16px;
  --r-pill: 999px;

  --shadow-soft: 0 1px 3px rgba(55, 18, 79, 0.04), 0 8px 26px rgba(55, 18, 79, 0.06);
  --shadow-lift: 0 2px 8px rgba(55, 18, 79, 0.06), 0 22px 60px rgba(55, 18, 79, 0.11);
  --shadow-deep: 0 34px 90px rgba(55, 18, 79, 0.2);

  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --wrap: 1240px;
  --pad:  20px;
  --nav-h: 62px;

  --z-grain: 60;
  --z-cta:   88;
  --z-menu:  90;
  --z-nav:   96;
  --z-modal: 100;
  --z-trans: 110;
  --z-intro: 120;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* pe iOS overflow:hidden nu opreste derularea: corpul se fixeaza si se retine pozitia */
body.is-locked { position: fixed; inset-inline: 0; width: 100%; overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--violet); color: #fff; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 3px; }

.skip {
  position: absolute; top: -70px; left: 16px; z-index: 200;
  padding: 12px 18px; border-radius: var(--r-pill);
  background: var(--violet); color: #fff; font-size: 14px; font-weight: 600;
  transition: top 200ms var(--ease-out);
}
.skip:focus { top: 16px; }

/* granulatie doar pe ecran mare: pe telefon un strat fix peste tot ecranul
   inseamna repictare la fiecare cadru de scroll */
.grain {
  position: fixed; inset: 0; z-index: var(--z-grain);
  pointer-events: none; opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
}
@media (max-width: 767px) { .grain { display: none; } }

/* stratul care acopera pagina cat se schimba */
.tranzitie {
  position: fixed; inset: 0; z-index: var(--z-trans);
  background: var(--bg); opacity: 0; pointer-events: none;
  transition: opacity 240ms var(--ease-out);
}
.tranzitie.se-vede { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tranzitie { display: none; } }

/* ---------- tipografie ---------- */

h1, h2, h3, h4 { margin: 0; font-weight: 600; }

.h1, .h2 {
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.04;
  text-wrap: balance;
}
.h1 { font-size: clamp(2.5rem, 9.5vw, 4.6rem); }
.h2 { font-size: clamp(1.95rem, 6.2vw, 3.3rem); }
.h3 { font-size: clamp(1.15rem, 3vw, 1.4rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.22; }

.h1 em, .h2 em { font-style: normal; color: var(--violet); }

.lede {
  font-size: clamp(1rem, 2.4vw, 1.12rem);
  color: var(--ink-soft); line-height: 1.62; max-width: 54ch; margin: 0;
  text-wrap: pretty;
}
p { margin: 0 0 1rem; max-width: 66ch; text-wrap: pretty; }

.eyebrow {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--violet); margin-bottom: 18px;
}
.muted { color: var(--ink-soft); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- structura ---------- */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }

section { padding-block: 70px; }
@media (min-width: 768px)  { section { padding-block: 108px; } :root { --pad: 30px; --nav-h: 68px; } }
@media (min-width: 1180px) { section { padding-block: 140px; } :root { --pad: 44px; } }

.section-head { max-width: 26ch; margin-bottom: 40px; }
@media (min-width: 768px) { .section-head { margin-bottom: 62px; } }
.section-head .lede { max-width: 50ch; margin-top: 16px; }

/* ---------- imagini ---------- */

.pic { position: relative; overflow: hidden; background: var(--bg-2); }
.pic img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 480ms var(--ease-out); }
.pic img.is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pic img { opacity: 1; transition: none; } }

/* ---------- butoane ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 20px 14px 24px;
  border: 0; border-radius: var(--r-pill);
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  white-space: nowrap; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, box-shadow 200ms ease, color 200ms ease;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--violet); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn-ico {
  display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.2);
  transition: transform 200ms var(--ease-out), background-color 200ms ease;
}
.btn-ghost .btn-ico { background: var(--violet-tint); color: var(--violet); }
.btn-ico svg { width: 14px; height: 14px; }

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--violet-deep); }
  .btn-ghost:hover { background: var(--card); box-shadow: inset 0 0 0 1px transparent, var(--shadow-soft); }
  .btn:hover .btn-ico { transform: translate(3px, -1px); }
}

/* raspuns la apasare pe tot ce e apasabil */
.nav-links a, .menu-nav a, .menu-contact a, .logo, .disc summary,
.foot ul a, .foot address a, .masonry .pic, .svc {
  transition: transform 160ms var(--ease-out), color 200ms ease, background-color 200ms ease, box-shadow 240ms var(--ease-out);
}
.nav-links a:active, .menu-contact a:active, .logo:active,
.foot ul a:active, .foot address a:active { transform: scale(0.96); }
.menu-nav a:active { transform: scale(0.985); }
.disc summary:active, .masonry .pic:active { transform: scale(0.99); }

/* ---------- cortina de deschidere ---------- */

.intro { position: fixed; inset: 0; z-index: var(--z-intro); display: grid; place-items: center; background: var(--bg); }
.intro-mark {
  font-family: 'Outfit', sans-serif; font-size: clamp(1.6rem, 7vw, 3rem);
  font-weight: 500; letter-spacing: -0.04em; color: var(--ink); line-height: 1;
}
.intro-mark span { display: inline-block; opacity: 0; transform: translateY(0.28em); }
.intro-rule { position: absolute; left: 50%; bottom: 26%; width: 0; height: 1px; background: var(--violet); transform: translateX(-50%); }
html:not(.js) .intro, .no-motion .intro { display: none; }

/* ---------- navigatie ---------- */

.nav { position: fixed; inset-inline: 0; top: 0; z-index: var(--z-nav); padding: 12px var(--pad); }
@media (min-width: 768px) { .nav { padding-top: 16px; } }

.nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  max-width: 1440px; margin-inline: auto; height: var(--nav-h);
  padding: 0 14px 0 18px; border-radius: var(--r-pill);
  background: rgba(252, 245, 244, 0.8);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  transition: background-color 300ms ease, box-shadow 300ms ease;
}
@media (min-width: 1024px) { .nav-inner { padding-left: 22px; } }
.nav.is-scrolled .nav-inner { background: rgba(252, 245, 244, 0.95); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), var(--shadow-soft); }
/* blurul e scump pe telefon */
@media (max-width: 767px) {
  .nav-inner { background: rgba(252, 245, 244, 0.97); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-transparency: reduce) { .nav-inner { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; } }

.logo { display: flex; align-items: center; gap: 10px; }
.logo-mark {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 10px; background: var(--violet); color: #fff;
  font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -0.03em;
}
.logo-text { display: flex; flex-direction: column; line-height: 1.08; }
.logo-name { font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: -0.02em; }
.logo-role { font-size: 9px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }

.nav-links { display: none; }
@media (min-width: 1024px) {
  .nav-links { display: flex; align-items: center; gap: 2px; }
  .nav-links a { padding: 9px 13px; border-radius: var(--r-pill); font-size: 14px; font-weight: 600; color: var(--ink-soft); }
  .nav-links a[aria-current="page"] { color: var(--violet); }
}
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { color: var(--ink); background: var(--violet-tint); } }

.nav-cta { display: none; }
@media (min-width: 1024px) { .nav-cta { display: inline-flex; padding: 11px 16px 11px 19px; font-size: 14px; } }

/* butonul de meniu: pereche cu monograma din stanga.
   Barele sunt pozitionate din centru, ca X-ul sa se inchida exact. */
.burger {
  position: relative; display: block; width: 38px; height: 38px;
  border: 0; border-radius: 10px; background: var(--ink); cursor: pointer;
  transition: background-color 200ms ease, transform 160ms var(--ease-out);
}
.burger:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .burger:hover { background: var(--violet); } }
@media (min-width: 1024px) { .burger { display: none; } }
.burger span {
  position: absolute; top: 50%; left: 50%; width: 15px; height: 1.4px;
  margin: -0.7px 0 0 -7.5px; border-radius: 2px; background: var(--bg);
  transition: transform 320ms var(--ease-drawer), opacity 140ms ease;
}
.burger span:nth-child(1) { transform: translateY(-4.6px); }
.burger span:nth-child(3) { transform: translateY(4.6px); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  display: flex; flex-direction: column; justify-content: center;
  padding: 96px var(--pad) 40px;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: var(--bg);
  opacity: 0; pointer-events: none;
  transition: opacity 250ms var(--ease-out);
}
.menu.is-open { opacity: 1; pointer-events: auto; }
.menu-inner { width: 100%; max-width: 560px; margin-inline: auto; }
.menu-nav a {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--line-soft);
  font-family: 'Outfit', sans-serif; font-size: clamp(1.6rem, 8vw, 2.3rem);
  font-weight: 500; letter-spacing: -0.035em;
  opacity: 0; transform: translateY(14px);
}
.menu.is-open .menu-nav a { opacity: 1; transform: none; transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }
.menu.is-open .menu-nav a:nth-child(1) { transition-delay: 40ms; }
.menu.is-open .menu-nav a:nth-child(2) { transition-delay: 80ms; }
.menu.is-open .menu-nav a:nth-child(3) { transition-delay: 120ms; }
.menu.is-open .menu-nav a:nth-child(4) { transition-delay: 160ms; }
.menu.is-open .menu-nav a:nth-child(5) { transition-delay: 200ms; }
.menu-i { font-family: 'Manrope', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.2em; color: var(--ink-mute); width: 26px; flex: 0 0 auto; }
.menu-t { flex: 1; }
.menu-thumb { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; }
@media (min-width: 560px) { .menu-thumb { width: 64px; height: 64px; } }
.menu-foot { margin-top: 30px; opacity: 0; transform: translateY(12px); transition: opacity 300ms var(--ease-out) 240ms, transform 300ms var(--ease-out) 240ms; }
.menu.is-open .menu-foot { opacity: 1; transform: none; }
.menu-foot .btn { width: 100%; justify-content: space-between; }
.menu-contact { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.menu-contact a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--r-pill); background: var(--card); box-shadow: inset 0 0 0 1px var(--line-soft); font-size: 13.5px; font-weight: 600; }
.menu-contact svg { width: 15px; height: 15px; color: var(--violet); }

/* ---------- hero ----------
   Fara fotografie pe toata latimea: pozele lor nu au rezolutia pentru asa ceva.
   In schimb, tipografie mare, nota de pe Google si un panou de imagini mic si controlat. */

.hero { padding-top: calc(var(--nav-h) + 44px); padding-bottom: 56px; }
@media (min-width: 768px) { .hero { padding-top: calc(var(--nav-h) + 74px); padding-bottom: 90px; } }
.hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.08fr 0.92fr; gap: 60px; } }
.hero h1 { max-width: 13ch; }
.hero .lede { margin-top: 20px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 28px; }

/* nota reala de pe Google, pusa in fata */
.nota {
  /* pe randul ei: langa eyebrow se suprapuneau */
  display: flex; width: fit-content; align-items: center; gap: 12px;
  padding: 11px 18px 11px 14px; margin-bottom: 22px;
  border-radius: var(--r-pill); background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line-soft), var(--shadow-soft);
}
.nota-cifra { font-family: 'Outfit', sans-serif; font-size: 20px; font-weight: 600; letter-spacing: -0.03em; }
.stele { display: flex; gap: 2px; color: var(--violet); }
.stele svg { width: 13px; height: 13px; }
.nota small { font-size: 12.5px; color: var(--ink-soft); }

/* panoul de imagini: rame mici, decalate */
.hero-art { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
@media (min-width: 560px) { .hero-art { gap: 14px; } }
.hero-art .pic { border-radius: var(--r); box-shadow: var(--shadow-soft); }
.hero-art .a { grid-column: 1 / span 4; aspect-ratio: 4 / 5; }
.hero-art .b { grid-column: 5 / span 2; aspect-ratio: 1 / 1; align-self: end; }
.hero-art .c { grid-column: 1 / span 2; aspect-ratio: 1 / 1; }
.hero-art .d { grid-column: 3 / span 4; aspect-ratio: 4 / 3; }

/* ---------- fasia de dovezi ---------- */

.dovezi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; overflow: hidden; border-radius: var(--r-lg); background: var(--line-soft); box-shadow: inset 0 0 0 1px var(--line-soft); }
@media (min-width: 860px) { .dovezi { grid-template-columns: repeat(4, 1fr); } }
.dovezi div { padding: 24px 20px; background: var(--bg); }
@media (min-width: 768px) { .dovezi div { padding: 32px 26px; } }
.dovezi b { display: block; font-family: 'Outfit', sans-serif; font-size: clamp(1.5rem, 4.6vw, 2.1rem); font-weight: 500; letter-spacing: -0.035em; color: var(--violet); }
.dovezi span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }

/* ---------- servicii ---------- */

.svc-grid { display: grid; gap: 12px; }
@media (min-width: 700px)  { .svc-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (min-width: 1080px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }

.svc {
  display: flex; flex-direction: column; gap: 14px;
  width: 100%; padding: 14px; border: 0; border-radius: var(--r-lg);
  background: var(--card); box-shadow: inset 0 0 0 1px var(--line-soft);
  text-align: left; cursor: pointer;
}
.svc:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) {
  .svc:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px transparent, var(--shadow-lift); }
  .svc:hover .svc-thumb img { transform: scale(1.05); }
  .svc:hover .svc-go i { background: var(--violet); color: #fff; transform: translate(3px, -1px); }
}
.svc-thumb { border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 10; }
.svc-thumb img { transition: opacity 480ms var(--ease-out), transform 700ms var(--ease-out); }
.svc-body { padding: 0 6px 6px; }
.svc h3 { font-family: 'Outfit', sans-serif; font-weight: 600; letter-spacing: -0.025em; }
.svc p { margin: 7px 0 0; max-width: 40ch; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.svc-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 13px; font-size: 12.5px; font-weight: 700; color: var(--violet); }
.svc-go i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-pill); background: var(--violet-tint); transition: transform 260ms var(--ease-out), background-color 220ms ease, color 220ms ease; }
.svc-go svg { width: 13px; height: 13px; }

/* ---------- cum functioneaza ---------- */

.pasi-grid { display: grid; gap: 14px; counter-reset: pas; }
@media (min-width: 900px) { .pasi-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.pas-card {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.pas-media { aspect-ratio: 16 / 10; }
.pas-media img { transition: opacity 480ms var(--ease-out), transform 700ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .pas-card:hover .pas-media img { transform: scale(1.04); } }
.pas-text { padding: 24px 24px 28px; }
.pas-text::before {
  counter-increment: pas; content: counter(pas, decimal-leading-zero);
  display: block; margin-bottom: 12px;
  font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; color: var(--violet);
}
.pas-text h3 { font-family: 'Outfit', sans-serif; font-weight: 600; letter-spacing: -0.025em; }
.pas-text p { margin: 9px 0 0; font-size: 14.5px; color: var(--ink-soft); }

/* fapte concrete, nu doar afirmatii */
.fapte { display: grid; gap: 10px; margin-top: 18px; }
@media (min-width: 700px) { .fapte { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (min-width: 1080px) { .fapte { grid-template-columns: repeat(4, 1fr); } }
.fapt {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 20px 20px; border-radius: var(--r-lg);
  background: var(--card); box-shadow: inset 0 0 0 1px var(--line-soft);
}
.fapt svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: var(--violet); }
.fapt b { display: block; font-size: 14.5px; font-weight: 700; }
.fapt span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }

/* ---------- rezultate ---------- */

.masonry { columns: 2; column-gap: 10px; }
@media (min-width: 768px)  { .masonry { columns: 3; column-gap: 14px; } }
@media (min-width: 1180px) { .masonry { columns: 4; column-gap: 16px; } }
.masonry .pic { margin: 0 0 10px; border-radius: var(--r); break-inside: avoid; box-shadow: var(--shadow-soft); }
@media (min-width: 768px) { .masonry .pic { margin-bottom: 14px; } }
.masonry .pic img { height: auto; transition: opacity 480ms var(--ease-out), transform 700ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .masonry .pic:hover img { transform: scale(1.03); } }

.filtre { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.filtre button { padding: 9px 16px; border: 0; border-radius: var(--r-pill); background: var(--bg-2); font-size: 14px; font-weight: 700; color: var(--ink-soft); cursor: pointer; transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out); }
.filtre button:active { transform: scale(0.96); }
.filtre button[aria-pressed="true"] { background: var(--violet); color: #fff; }

/* cardurile din banda de rezultate: acelasi crop la toate, ca sa se citeasca a serie */
.gal-card { width: 62vw; max-width: 290px; margin: 0; }
@media (min-width: 700px)  { .gal-card { width: 32vw; max-width: 300px; } }
@media (min-width: 1100px) { .gal-card { width: 22vw; max-width: 320px; } }
.gal-card .pic { aspect-ratio: 4 / 5; border-radius: var(--r); box-shadow: var(--shadow-soft); }
.gal-card figcaption { margin-top: 10px; font-size: 12.5px; color: var(--ink-mute); }

/* ---------- opinii: banda care curge ---------- */

/* marginile se estompeaza in loc sa taie cardul in doua */
.banda {
  overflow: hidden !important;
  touch-action: pan-y;
  cursor: grab;
  margin-inline: calc(var(--pad) * -1);
  padding-inline: var(--pad);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
@media (min-width: 1024px) {
  .banda {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  }
}
.banda:active, .banda.se-trage { cursor: grabbing; }
.banda-sina { display: flex; gap: 14px; width: max-content; will-change: transform; }
.banda > .banda-sina > * { flex: 0 0 auto; }

.op {
  display: flex; flex-direction: column; gap: 14px;
  width: 82vw; max-width: 350px; padding: 24px 22px;
  border-radius: var(--r-lg); background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
@media (min-width: 700px)  { .op { width: 42vw; max-width: 380px; } }
@media (min-width: 1100px) { .op { width: 28vw; max-width: 400px; } }
.op-q { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink); }
.op-who { display: flex; align-items: center; gap: 11px; margin-top: auto; }
.op-init { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--violet); color: #fff; font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 600; }
.op-who b { display: block; font-size: 13.5px; font-weight: 700; }
.op-who span { display: block; font-size: 12px; color: var(--ink-mute); }

/* banda cu frazele lor, miscare constanta deci liniara */
.fraze { padding-block: 0; overflow: hidden; border-block: 1px solid var(--line-soft); background: var(--bg-2); }
.fraze-sina { display: flex; width: max-content; will-change: transform; }
.fraze-sina p {
  flex: 0 0 auto; margin: 0; max-width: none; padding: 20px 0;
  font-family: 'Outfit', sans-serif; font-size: clamp(1.15rem, 3.2vw, 1.9rem);
  font-weight: 500; letter-spacing: -0.03em; color: var(--ink); white-space: nowrap;
}
.fraze-sina p i { color: var(--violet); font-style: normal; padding-inline: 0.6em; }

/* ---------- locul ---------- */

.loc-grid { display: grid; gap: 30px; }
@media (min-width: 900px) { .loc-grid { grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; } }
.date { display: grid; gap: 2px; margin-top: 26px; border-radius: var(--r-lg); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-soft); background: var(--line-soft); }
.date > div, .date > a { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; background: var(--bg); }
.date svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: var(--violet); }
.date b { display: block; font-size: 14.5px; font-weight: 700; }
.date span { display: block; font-size: 14px; color: var(--ink-soft); }
.date a:active { transform: none; }
@media (hover: hover) and (pointer: fine) { .date a:hover { background: var(--bg-2); } }

.orar { display: grid; gap: 1px; border-radius: var(--r-lg); overflow: hidden; background: var(--line-soft); box-shadow: inset 0 0 0 1px var(--line-soft); }
.orar div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 20px; background: var(--bg); font-size: 14.5px; }
.orar div b { font-weight: 700; }
.orar div span { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.orar div.inchis span { color: var(--ink-mute); }

/* ---------- fereastra de serviciu ---------- */

.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: end center; opacity: 0; pointer-events: none; transition: opacity 250ms var(--ease-out); }
@media (min-width: 768px) { .modal { place-items: center; padding: 30px; } }
.modal.is-open { opacity: 1; pointer-events: auto; }
.modal-scrim { position: absolute; inset: 0; background: rgba(44, 33, 48, 0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.modal-panel {
  position: relative; width: 100%; max-width: 900px; max-height: 92vh;
  overflow: hidden auto; overscroll-behavior: contain;
  border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--card);
  box-shadow: var(--shadow-deep); transform-origin: center;
  transform: translateY(26px) scale(0.985); opacity: 0;
  transition: transform 320ms var(--ease-drawer), opacity 220ms var(--ease-out);
}
@media (min-width: 768px) { .modal-panel { border-radius: var(--r-lg); max-height: 88vh; } }
.modal.is-open .modal-panel { transform: none; opacity: 1; }
.modal-grid { display: grid; }
@media (min-width: 768px) { .modal-grid { grid-template-columns: 0.8fr 1.2fr; } }
.modal-media { aspect-ratio: 16 / 11; }
@media (min-width: 768px) { .modal-media { aspect-ratio: auto; } }
.modal-media .pic { height: 100%; min-height: 200px; }
.modal-body { padding: 26px 22px 30px; }
@media (min-width: 768px) { .modal-body { padding: 42px 40px; } }
.modal-body h3 { font-family: 'Outfit', sans-serif; font-size: clamp(1.5rem, 4.6vw, 2.05rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; }
.modal-body > p { margin-top: 12px; color: var(--ink-soft); }
.modal-close { position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--r-pill); background: rgba(252, 245, 244, 0.94); backdrop-filter: blur(8px); color: var(--ink); cursor: pointer; transition: transform 200ms var(--ease-out), background-color 200ms ease; }
.modal-close:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .modal-close:hover { background: var(--card); } }
.modal-close svg { width: 15px; height: 15px; }

.disc { margin-top: 22px; border-top: 1px solid var(--line-soft); }
.disc summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 0; font-size: 15px; font-weight: 700; cursor: pointer; list-style: none; }
.disc summary::-webkit-details-marker { display: none; }
.disc summary i { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--r-pill); background: var(--violet-tint); color: var(--violet); transition: transform 260ms var(--ease-out); }
.disc[open] summary i { transform: rotate(180deg); }
.disc summary i svg { width: 12px; height: 12px; }
.disc-body { padding-bottom: 18px; overflow: hidden; }
.puncte { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.puncte li { display: flex; gap: 11px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; }
.puncte svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; color: var(--violet); }
.modal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* ---------- apel final ---------- */

.cta-band { padding: 52px 24px; border-radius: var(--r-lg); text-align: center; background: var(--violet); color: #fff; }
@media (min-width: 768px) { .cta-band { padding: 86px 40px; } }
.cta-band h2 { color: #fff; max-width: 17ch; margin-inline: auto; }
.cta-band h2 em { color: var(--blush); }
.cta-band .lede { color: rgba(255, 255, 255, 0.82); margin: 16px auto 0; }
.cta-band .hero-actions { justify-content: center; }
.cta-band .btn-primary { background: #fff; color: var(--violet); }
.cta-band .btn-ghost { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
.cta-band .btn-ghost .btn-ico { background: rgba(255, 255, 255, 0.16); color: #fff; }
.cta-band .btn-primary .btn-ico { background: var(--violet-tint); color: var(--violet); }
@media (hover: hover) and (pointer: fine) {
  .cta-band .btn-primary:hover { background: var(--bg-2); }
  .cta-band .btn-ghost:hover { background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
}

/* ---------- bara de jos, pe telefon ---------- */

.cta-jos { display: none; }
@media (max-width: 1023px) {
  .cta-jos {
    position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-cta);
    display: flex; gap: 8px;
    padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(252, 245, 244, 0.97);
    box-shadow: 0 -1px 0 var(--line-soft), 0 -10px 30px rgba(55, 18, 79, 0.07);
    transform: translateY(110%);
    transition: transform 420ms var(--ease-out);
  }
  .cta-jos.se-vede { transform: none; }
  .cta-jos .btn { flex: 1; justify-content: center; padding-block: 13px; }
  .cta-jos .btn-tel { flex: 0 0 auto; display: grid; place-items: center; width: 48px; padding: 0; background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
  .cta-jos .btn-tel svg { width: 19px; height: 19px; }
  .foot { padding-bottom: 96px; }
}

/* ---------- subsol ---------- */

.foot { background: var(--bg-2); padding-block: 62px 28px; border-top: 1px solid var(--line-soft); }
@media (min-width: 768px) { .foot { padding-block: 100px 34px; } }
.foot-top { display: grid; gap: 40px; }
@media (min-width: 900px) { .foot-top { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 50px; } }
.foot h4 { font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 18px; }
.foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.foot ul a, .foot address a { color: var(--ink-soft); font-size: 15px; font-style: normal; }
@media (hover: hover) and (pointer: fine) { .foot ul a:hover, .foot address a:hover { color: var(--violet); } }
.foot address { font-style: normal; display: grid; gap: 12px; }
.foot address > a, .foot address > div { display: flex; align-items: flex-start; gap: 10px; }
.foot address svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; color: var(--violet); }
.foot-blurb { margin-top: 20px; max-width: 38ch; font-size: 14.5px; line-height: 1.62; color: var(--ink-soft); }
.foot-tel { font-family: 'Outfit', sans-serif; font-size: clamp(1.4rem, 4.2vw, 1.8rem); font-weight: 600; letter-spacing: -0.035em; color: var(--ink) !important; }
.foot-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 50px; }
@media (min-width: 700px) { .foot-strip { grid-template-columns: repeat(8, 1fr); } }
.foot-strip .pic { aspect-ratio: 1 / 1; border-radius: 8px; }
.foot-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-mute); }
.foot-social { display: flex; gap: 8px; }
.foot-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-pill); background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-soft); transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out); }
.foot-social a:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .foot-social a:hover { background: var(--violet); color: #fff; } }
.foot-social svg { width: 17px; height: 17px; }

/* ---------- pagini interioare ---------- */

.page-head { padding-top: calc(var(--nav-h) + 52px); padding-bottom: 14px; }
@media (min-width: 768px) { .page-head { padding-top: calc(var(--nav-h) + 86px); padding-bottom: 22px; } }
.page-head-grid { display: grid; gap: 26px; align-items: center; }
@media (min-width: 900px) { .page-head-grid { grid-template-columns: 1.1fr 0.9fr; gap: 52px; } }
.page-head h1 { max-width: 15ch; }
.page-head .lede { margin-top: 18px; }
.page-head-art { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow-lift); }
@media (min-width: 900px) { .page-head-art { aspect-ratio: 1 / 1; } }

/* formular */
.form { display: grid; gap: 18px; max-width: 560px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); color: var(--ink); font: inherit; font-size: 15px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-soft); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-tint); }
.field small { font-size: 12.5px; color: var(--ink-soft); }
.field[data-error] input { border-color: #A0304A; }
.err { font-size: 12.5px; font-weight: 700; color: #A0304A; }
.form-note { font-size: 13.5px; color: var(--ink-soft); }

/* 404 */
.nf { min-height: 100vh; min-height: 100svh; min-height: var(--vh, 100svh); display: grid; place-items: center; text-align: center; padding: 120px var(--pad) 60px; }
.nf .h1 { max-width: 14ch; margin-inline: auto; }
.nf .lede { margin: 18px auto 0; }
.nf .hero-actions { justify-content: center; }

/* ---------- reveal ---------- */

.rise { opacity: 0; transform: translateY(20px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.rise.is-in { opacity: 1; transform: none; }
.gsap-on .rise { transition: none; }

.lines span { display: block; overflow: hidden; padding-bottom: 0.04em; }
.lines span > i { display: block; font-style: inherit; transform: translateY(105%); }
html:not(.js) .lines span > i, .no-motion .lines span > i { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1 !important; transform: none !important; transition: none !important; }
  .lines span > i { transform: none !important; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mt-lg { margin-top: 40px; }
.center { text-align: center; }