/* ==========================================================================
   Catedra de sport — foaia de stil a site-ului
   1. Fonturi  2. Variabile  3. Bază  4. Componente  5. Secțiuni  6. Mișcare
   Spațierea urmează o grilă de 8 px: orice distanță vine din variabilele --s-*.
   ========================================================================== */

/* 1. Fonturi — găzduite local, subset latin + diacriticele românești (ă â î ș ț) */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var-ro.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-var-ro.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* 2. Variabile */
:root {
  color-scheme: dark;

  --fundal: #140824;
  --fundal-2: #1A0C2E;
  --suprafata: #211036;
  --suprafata-2: #2A1644;
  --linie: rgba(197, 180, 230, .13);
  --linie-tare: rgba(197, 180, 230, .24);
  --text: #F5F0FF;
  --text-2: #BBAAD8;
  --text-3: #9D8DBE;
  --galben: #FFCC1F;
  --galben-2: #FFD95A;
  --galben-slab: rgba(255, 204, 31, .1);
  --pe-galben: #1C0B35;
  --hartie: #FBF9F4;
  --eroare: #FF9AAA;

  --font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --t-xs: .8125rem;
  --t-sm: clamp(.875rem, .85rem + .12vw, .9375rem);
  --t-base: clamp(1rem, .97rem + .15vw, 1.0625rem);
  --t-lg: clamp(1.125rem, 1.06rem + .3vw, 1.3125rem);
  --t-xl: clamp(1.375rem, 1.22rem + .7vw, 1.75rem);
  --t-2xl: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  --t-3xl: clamp(3rem, 1.9rem + 5.2vw, 6rem);
  --t-cifra: clamp(2.5rem, 1.9rem + 2.8vw, 4.25rem);

  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 40px;
  --s-6: 48px;
  --s-8: 64px;
  --s-10: 80px;
  --s-12: 96px;
  --sectiune: clamp(80px, 4vw + 64px, 144px);
  --margine: clamp(16px, 4vw, 32px);
  --lat: 1200px;
  --nav: 64px;

  --r-1: 8px;
  --r-2: 16px;
  --r-3: 24px;
  --r-pastila: 999px;

  --umbra-1: 0 1px 2px rgba(0, 0, 0, .3);
  --umbra-2: 0 24px 48px -24px rgba(0, 0, 0, .7);
  --umbra-carte: 0 56px 96px -40px rgba(0, 0, 0, .8), 0 24px 48px -24px rgba(0, 0, 0, .6);
  --umbra-foaie: 0 16px 40px -16px rgba(0, 0, 0, .65);

  --d-1: 150ms;
  --d-2: 250ms;
  --d-3: 700ms;
  --d-4: 1000ms;
  --ease: cubic-bezier(.25, 1, .5, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

/* 3. Bază */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav) + var(--s-2)); }
html.lb-deschis { overflow: hidden; }
body {
  margin: 0;
  background: var(--fundal);
  color: var(--text);
  font: 400 var(--t-base)/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--galben); color: var(--pe-galben); }
:focus-visible { outline: 2px solid var(--galben); outline-offset: 3px; border-radius: 4px; }
strong { font-weight: 600; color: var(--text); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sari {
  position: fixed; top: var(--s-1); left: var(--s-1); z-index: 100;
  padding: var(--s-1) var(--s-2); border-radius: var(--r-1);
  background: var(--galben); color: var(--pe-galben); font-weight: 600; text-decoration: none;
  transform: translateY(-160%); transition: transform var(--d-2) var(--ease);
}
.sari:focus-visible { transform: none; }

.lat { width: min(100% - 2 * var(--margine), var(--lat)); margin-inline: auto; }
.sectiune { padding-block: var(--sectiune); content-visibility: auto; contain-intrinsic-size: auto 960px; }
.banda { background: var(--fundal-2); border-block: 1px solid var(--linie); }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ico-mic { width: 16px; height: 16px; }

/* 4. Componente */

/* Tipografie */
h1 { font-size: var(--t-3xl); font-weight: 650; line-height: .98; letter-spacing: -.045em; }
h1 .rand { display: block; }
.titlu { font-size: var(--t-2xl); font-weight: 600; line-height: 1.06; letter-spacing: -.035em; text-wrap: balance; max-width: 22ch; }
.titlu .stins, h1 .stins { color: var(--text-3); }
h3 { font-size: var(--t-lg); font-weight: 600; line-height: 1.3; letter-spacing: -.015em; }
.lead { font-size: var(--t-lg); line-height: 1.55; color: var(--text-2); max-width: 58ch; text-wrap: pretty; }
.eticheta {
  display: inline-block;
  font: 500 var(--t-xs)/1.5 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2);
}
.eticheta b { font-weight: 500; color: var(--galben); margin-right: var(--s-1); }
.cap { display: grid; gap: var(--s-2); margin-bottom: var(--s-6); }
.cap .eticheta { margin-bottom: var(--s-1); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.accent { color: var(--galben); }

/* Linkuri în text */
.link {
  color: var(--text); text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: var(--linie-tare); text-underline-offset: 4px;
  transition: text-decoration-color var(--d-1) var(--ease), color var(--d-1) var(--ease);
}
.link:hover { text-decoration-color: var(--galben); }
.link-sageata { display: inline-flex; align-items: center; gap: var(--s-1); justify-self: start; }
.link-sageata .ico { transition: transform var(--d-2) var(--ease); }
.link-sageata:hover .ico { transform: translateX(3px); }

/* Butoane */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1);
  min-height: 48px; padding: 0 var(--s-3); border: 1px solid transparent; border-radius: var(--r-pastila);
  background: var(--galben); color: var(--pe-galben);
  font-size: var(--t-base); font-weight: 600; letter-spacing: -.01em; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: background-color var(--d-1) var(--ease), border-color var(--d-1) var(--ease), box-shadow var(--d-2) var(--ease), transform var(--d-1) var(--ease);
}
.btn:hover { background: var(--galben-2); box-shadow: 0 12px 32px -12px rgba(255, 204, 31, .5); }
.btn:active { transform: translateY(1px) scale(.985); box-shadow: none; }
.btn .ico { transition: transform var(--d-2) var(--ease); }
.btn:hover .ico-sageata { transform: translateX(3px); }
.btn-mare { min-height: 56px; padding: 0 var(--s-4); font-size: var(--t-lg); }
.btn-mic { min-height: 40px; padding: 0 var(--s-2); font-size: var(--t-sm); }
.btn-contur { background: transparent; color: var(--text); border-color: var(--linie-tare); }
.btn-contur:hover { background: rgba(245, 240, 255, .05); border-color: var(--text-3); box-shadow: none; }
.btn-mov { background: var(--pe-galben); color: var(--galben); }
.btn-mov:hover { background: #2A1449; box-shadow: 0 12px 32px -12px rgba(28, 11, 53, .6); }
.btn-contur-mov { background: transparent; color: var(--pe-galben); border-color: rgba(28, 11, 53, .3); }
.btn-contur-mov:hover { background: rgba(28, 11, 53, .07); border-color: var(--pe-galben); box-shadow: none; }
.btn-lat { width: 100%; }
.actiuni { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* Navigarea */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav);
  border-bottom: 1px solid transparent;
  transition: background-color var(--d-2) var(--ease), border-color var(--d-2) var(--ease);
}
.nav.derulat { background: rgba(20, 8, 36, .82); border-bottom-color: var(--linie); -webkit-backdrop-filter: saturate(150%) blur(16px); backdrop-filter: saturate(150%) blur(16px); }
.nav .lat { display: flex; align-items: center; gap: var(--s-4); height: 100%; }
.brand { display: inline-flex; align-items: center; gap: var(--s-1); font-weight: 600; letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }
.brand img { width: 36px; height: 32px; }
.nav-linkuri { display: none; }
.nav-butoane { display: flex; align-items: center; gap: var(--s-1); margin-left: auto; }
@media (max-width: 479px) {
  .nav .lat { gap: var(--s-2); }
  .nav .brand-nume { display: none; }
  .nav-butoane .btn { padding-inline: var(--s-2); }
}
.nav-linkuri a { font-size: var(--t-sm); color: var(--text-2); text-decoration: none; transition: color var(--d-1) var(--ease); }
.nav-linkuri a:hover { color: var(--text); }
@media (min-width: 960px) {
  .nav-linkuri { display: flex; gap: var(--s-4); margin-left: auto; }
  .nav-butoane { margin-left: 0; }
}

/* Carduri */
.card { background: var(--suprafata); border: 1px solid var(--linie); border-radius: var(--r-3); padding: var(--s-3); }
@media (min-width: 768px) { .card { padding: var(--s-4); } }

/* Bife */
.bife { display: grid; gap: var(--s-2); }
.bife li { display: grid; grid-template-columns: 20px 1fr; gap: var(--s-2); align-items: start; color: var(--text-2); }
.bife .ico { margin-top: 3px; color: var(--galben); }

/* 5. Secțiuni */

/* Hero */
.hero {
  position: relative;
  padding: calc(var(--nav) + var(--s-6)) 0 var(--s-10);
  background: linear-gradient(180deg, #1D0D35 0%, var(--fundal) 72%);
  overflow: clip;
}
.hero-grila { display: grid; gap: var(--s-5); align-items: center; }
.hero-text { display: grid; gap: var(--s-3); justify-items: start; }
.hero .lead { max-width: 36ch; }
.hero-meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); font-size: var(--t-sm); color: var(--text-2); }
.hero-meta li { display: inline-flex; align-items: center; gap: var(--s-1); }
.hero-meta .ico { color: var(--galben); }
@media (max-width: 479px) {
  .hero .actiuni .btn { width: 100%; }
}
@media (min-width: 960px) {
  .hero { padding-top: calc(var(--nav) + var(--s-10)); padding-bottom: var(--s-12); }
  .hero-grila { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s-6); }
}

/* Cartea din hero */
.carte-scena { --rx: 0deg; --ry: 0deg; position: relative; display: grid; place-items: center; padding: 0 0 var(--s-2); }
.carte { position: relative; width: min(56vw, 272px); aspect-ratio: 1240 / 1754; margin-right: 32%; animation: carte-intra var(--d-4) var(--ease) both; }
.carte-coperta {
  position: relative; z-index: 2; height: 100%;
  transform: perspective(1600px) rotateY(calc(-14deg + var(--ry))) rotateX(calc(4deg + var(--rx)));
  transition: transform 600ms var(--ease);
}
.carte-coperta img { width: 100%; height: 100%; border-radius: 3px 6px 6px 3px; box-shadow: var(--umbra-carte); }
.carte-coperta::before {
  content: ""; position: absolute; top: 1.2%; bottom: 1.2%; right: -9px; width: 10px; z-index: -1;
  border-radius: 0 3px 3px 0;
  background: repeating-linear-gradient(90deg, #EAE4D8 0 1px, #CFC7B8 1px 2px);
}
.carte-coperta::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 22%, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, .18) 100%);
}
.carte-foaie {
  position: absolute; z-index: 1; top: 8%; left: 46%; width: 86%;
  transform: rotate(8deg); border-radius: 4px; overflow: hidden; background: var(--hartie);
  box-shadow: var(--umbra-foaie); animation: foaie-intra var(--d-4) var(--ease) 120ms both;
}
.carte-foaie img { opacity: .96; }
@media (min-width: 960px) {
  .carte { width: min(28vw, 360px); }
  .carte-scena { padding: 0; }
}

/* Cifrele */
.cifre { border-block: 1px solid var(--linie); background: var(--fundal); }
.cifre ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cifre li { padding: var(--s-4) var(--s-2); border-top: 1px solid var(--linie); display: grid; gap: var(--s-1); align-content: start; }
.cifre li:nth-child(-n + 2) { border-top: 0; }
.cifre li:nth-child(even) { border-left: 1px solid var(--linie); padding-left: var(--s-3); }
.cifre b { font-size: var(--t-cifra); font-weight: 600; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.cifre span { font-size: var(--t-sm); color: var(--text-2); }
@media (min-width: 768px) {
  .cifre ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cifre li { border-top: 0; padding: var(--s-6) var(--s-4); }
  .cifre li + li { border-left: 1px solid var(--linie); }
  .cifre li:first-child { padding-left: 0; }
}

/* Ce conține */
.doua { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
@media (min-width: 960px) { .doua { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; } }
.puncte { display: grid; gap: var(--s-4); }
.puncte li { display: grid; grid-template-columns: 40px 1fr; gap: var(--s-2); }
.puncte .ico-cutie {
  width: 40px; height: 40px; border-radius: var(--r-1); display: grid; place-items: center;
  background: var(--suprafata-2); border: 1px solid var(--linie); color: var(--galben);
}
.puncte h3 { margin-bottom: var(--s-1); }
.puncte p { color: var(--text-2); }
.prio-card { display: grid; gap: var(--s-3); }
.prio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1); }
.prio div { display: grid; gap: var(--s-1); padding: var(--s-2); border-radius: var(--r-2); background: var(--suprafata-2); border: 1px solid var(--linie); }
.prio b { font-size: var(--t-2xl); font-weight: 600; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.prio span { font: 500 var(--t-xs)/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.prio .p-max { background: var(--galben); border-color: var(--galben); color: var(--pe-galben); }
.prio .p-max span { color: var(--pe-galben); }
.prio .p-mare { border-color: rgba(255, 204, 31, .55); }
.nota { font-size: var(--t-sm); color: var(--text-2); }
@media (min-width: 480px) { .prio { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Cuprinsul interactiv */
.impartire { display: flex; gap: 3px; height: 8px; border-radius: var(--r-pastila); overflow: hidden; }
.impartire span { display: block; }
.i-materie { flex: 179; background: var(--galben); }
.i-anexa { flex: 55; background: var(--text-2); }
.i-rest { flex: 8; background: var(--linie-tare); }
.legenda { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin: var(--s-2) 0 var(--s-6); font-size: var(--t-sm); color: var(--text-2); }
.legenda li { display: inline-flex; align-items: center; gap: var(--s-1); }
.legenda i { width: 8px; height: 8px; border-radius: 2px; }
.legenda b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

.cup { padding: 0; overflow: hidden; }
.cup-unelte { display: grid; gap: var(--s-2); padding: var(--s-3); border-bottom: 1px solid var(--linie); }
.cautare { position: relative; }
.cautare .ico { position: absolute; left: var(--s-2); top: 50%; translate: 0 -50%; color: var(--text-3); pointer-events: none; }
.cautare input {
  width: 100%; min-height: 48px; padding: 0 var(--s-2) 0 var(--s-6);
  background: var(--fundal); border: 1px solid var(--linie-tare); border-radius: var(--r-2);
  transition: border-color var(--d-1) var(--ease), box-shadow var(--d-1) var(--ease);
}
.cautare input::placeholder { color: var(--text-3); }
.cautare input:focus { outline: none; border-color: var(--galben); box-shadow: 0 0 0 4px var(--galben-slab); }
.cautare input::-webkit-search-cancel-button { filter: invert(.8); }
.filtre {
  display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--s-3)); padding-inline: var(--s-3);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--s-3), #000 calc(100% - var(--s-6)), transparent);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--s-3), #000 calc(100% - var(--s-6)), transparent);
}
.filtre::-webkit-scrollbar { display: none; }
.cip {
  flex: none; display: inline-flex; align-items: center; gap: var(--s-1);
  min-height: 40px; padding: 0 var(--s-2); border-radius: var(--r-pastila);
  background: transparent; border: 1px solid var(--linie-tare); color: var(--text-2);
  font-size: var(--t-sm); white-space: nowrap;
  transition: background-color var(--d-1) var(--ease), color var(--d-1) var(--ease), border-color var(--d-1) var(--ease);
}
.cip:hover { color: var(--text); border-color: var(--text-3); }
.cip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--pe-galben); }
.cip .mono { font-size: var(--t-xs); opacity: .75; }
.cup-stare { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--text-3); }
.cup-stare button { background: none; border: 0; padding: var(--s-1) 0; color: var(--text-2); text-decoration: underline; text-underline-offset: 4px; }

.bloc-cap {
  display: flex; justify-content: space-between; gap: var(--s-2); align-items: baseline;
  padding: var(--s-2) var(--s-3); background: var(--fundal-2); border-bottom: 1px solid var(--linie);
  font: 500 var(--t-xs)/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3);
}
.bloc-cap b { font-weight: 500; color: var(--text-2); white-space: nowrap; }
.tema {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "nr titlu prio" "nr titlu pag";
  gap: var(--s-1) var(--s-2); align-items: center;
  padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--linie);
  transition: background-color var(--d-1) var(--ease);
}
.tema:hover { background: rgba(245, 240, 255, .03); }
.tema-nr { grid-area: nr; font: 500 var(--t-sm)/1 var(--font-mono); color: var(--text-3); }
.tema-titlu { grid-area: titlu; line-height: 1.35; }
.tema-pag { grid-area: pag; justify-self: end; font: 400 var(--t-xs)/1 var(--font-mono); color: var(--text-3); white-space: nowrap; }
.bloc:last-of-type .tema:last-child { border-bottom: 0; }
.eticheta-prio {
  grid-area: prio; justify-self: end; display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--s-1); border-radius: var(--r-pastila);
  font: 500 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; border: 1px solid transparent;
}
.prio-max { background: var(--galben); color: var(--pe-galben); }
.prio-mare { border-color: rgba(255, 204, 31, .6); color: var(--galben); }
.prio-medie { border-color: var(--linie-tare); color: var(--text-2); }
.prio-mica { color: var(--text-3); }
.cup-gol { padding: var(--s-6) var(--s-3); text-align: center; color: var(--text-2); }
.cup-anexa { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-2); padding: var(--s-2) var(--s-3); background: var(--fundal-2); border-top: 1px solid var(--linie); font-size: var(--t-sm); color: var(--text-2); }
.cup-mai-mult { display: none; }
.cup.strans .bloc:nth-of-type(n + 3) { display: none; }
.cup.strans .cup-mai-mult { display: flex; justify-content: center; padding: var(--s-3); border-top: 1px solid var(--linie); }
.cup.strans .cup-anexa { display: none; }
.cup-legenda { margin-top: var(--s-2); }
@media (min-width: 768px) {
  .cautare { max-width: 400px; }
  .filtre { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; -webkit-mask-image: none; mask-image: none; }
  .tema { grid-template-columns: 40px minmax(0, 1fr) 96px 64px; grid-template-areas: "nr titlu prio pag"; }
}

/* Verificabil */
.verif { border-top: 1px solid var(--linie); }
.verif li { display: grid; gap: var(--s-1); padding: var(--s-3) 0; border-bottom: 1px solid var(--linie); }
.verif p:first-child { font-size: var(--t-lg); line-height: 1.45; }
.verif p:first-child strong { color: var(--galben); }
.verif .unde { font: 400 var(--t-xs)/1.5 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
@media (min-width: 768px) {
  .verif li { grid-template-columns: minmax(0, 1fr) 280px; gap: var(--s-4); align-items: baseline; }
}

/* Galeria */
.galerie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5) var(--s-3); }
.galerie a { display: grid; gap: var(--s-2); text-decoration: none; }
.galerie .foaie, .galerie .leg { display: block; }
.galerie .foaie {
  position: relative; border-radius: var(--r-1); overflow: hidden; background: var(--hartie);
  box-shadow: var(--umbra-foaie); transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}
.galerie .foaie::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(28, 11, 53, .06);
}
.galerie .mareste {
  position: absolute; right: var(--s-1); bottom: var(--s-1); z-index: 1; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: var(--pe-galben); color: var(--text);
  opacity: 0; transform: scale(.9); transition: opacity var(--d-2) var(--ease), transform var(--d-2) var(--ease);
}
.galerie a:hover .foaie, .galerie a:focus-visible .foaie { transform: translateY(-4px); box-shadow: 0 32px 56px -24px rgba(0, 0, 0, .8); }
.galerie a:hover .mareste, .galerie a:focus-visible .mareste { opacity: 1; transform: none; }
.galerie a:focus-visible { outline: none; }
.galerie a:focus-visible .foaie { outline: 2px solid var(--galben); outline-offset: 4px; }
.galerie figcaption, .galerie .leg { font-size: var(--t-sm); color: var(--text-2); }
.galerie .leg b { display: block; font-weight: 600; color: var(--text); }
@media (max-width: 767px) {
  .galerie { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--s-2); margin-inline: calc(-1 * var(--margine)); padding: var(--s-1) var(--margine) var(--s-3); scrollbar-width: none; }
  .galerie::-webkit-scrollbar { display: none; }
  .galerie > li { flex: 0 0 72%; scroll-snap-align: center; }
  .galerie .mareste { opacity: 1; transform: none; }
}
.sub-galerie { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; color: var(--text-2); }
.sub-galerie a { display: inline-flex; align-items: center; gap: var(--s-1); }

/* Lightbox */
.lightbox {
  width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(12, 4, 22, .94); color: var(--text);
}
.lightbox::backdrop { background: transparent; }
.lightbox[open] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; animation: apare var(--d-2) var(--ease); }
.lb-sus { display: flex; justify-content: space-between; align-items: center; padding: var(--s-2) var(--margine); font: 500 var(--t-sm)/1 var(--font-mono); color: var(--text-2); }
.lb-scena { display: grid; place-items: center; padding: 0 var(--margine); min-height: 0; touch-action: pan-y; user-select: none; }
.lb-scena picture { max-width: 100%; max-height: 100%; }
.lb-scena img { width: auto; max-width: 100%; max-height: calc(100dvh - 160px); border-radius: var(--r-1); background: var(--hartie); box-shadow: var(--umbra-carte); transition: opacity var(--d-2) var(--ease), transform var(--d-2) var(--ease); }
.lb-scena img.schimba { opacity: 0; transform: scale(.98); }
.lb-jos { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--margine) var(--s-3); }
.lb-jos p { font-size: var(--t-sm); color: var(--text-2); }
.lb-jos p b { color: var(--text); font-weight: 600; }
.lb-btn {
  flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(245, 240, 255, .08); border: 1px solid var(--linie); color: var(--text);
  transition: background-color var(--d-1) var(--ease), transform var(--d-1) var(--ease);
}
.lb-btn:hover { background: rgba(245, 240, 255, .16); }
.lb-btn:active { transform: scale(.94); }
.lb-nav { display: flex; gap: var(--s-1); }

/* Recenzia */
.recenzie { display: grid; gap: var(--s-4); max-width: 880px; }
.recenzie blockquote { display: grid; gap: var(--s-3); padding-left: var(--s-3); border-left: 2px solid var(--galben); font-size: var(--t-lg); line-height: 1.5; letter-spacing: -.01em; text-wrap: pretty; }
@media (min-width: 768px) { .recenzie blockquote { padding-left: var(--s-4); font-size: var(--t-xl); line-height: 1.45; } }
.recenzie + .recenzie { margin-top: var(--s-8); }
.recenzie blockquote p + p { font-size: var(--t-lg); color: var(--text-2); letter-spacing: 0; }
.recenzie .semnatura { font: 400 var(--t-xs)/1.6 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); padding-top: var(--s-3); border-top: 1px solid var(--linie); }

/* Prețul */
.oferte { display: grid; gap: var(--s-3); }
@media (min-width: 960px) { .oferte { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: start; } }
.oferta { display: grid; gap: var(--s-3); align-content: start; }
.oferta-principala { position: relative; border-color: rgba(255, 204, 31, .5); background: linear-gradient(180deg, #281240 0%, var(--suprafata) 60%); }
.oferta-sus { display: grid; grid-template-columns: 72px 1fr; gap: var(--s-3); align-items: center; }
.oferta-sus img { border-radius: 3px; box-shadow: var(--umbra-foaie); }
.oferta-sus h3 { font-size: var(--t-lg); letter-spacing: -.02em; margin-top: var(--s-1); }
@media (min-width: 960px) { .oferta-sus h3 { font-size: var(--t-xl); } }
.suma { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-1) var(--s-2); }
.suma b { font-size: var(--t-cifra); font-weight: 600; line-height: 1; letter-spacing: -.05em; }
.suma span { font-size: var(--t-sm); color: var(--text-2); }
.oferta .btn { margin-top: var(--s-1); }
.sigur { display: flex; align-items: center; gap: var(--s-1); font-size: var(--t-xs); color: var(--text-3); }

/* Formularul hărții — marcaj și logică neschimbate, doar stil */
.form-harta { display: grid; gap: var(--s-2); }
.form-harta label { font-weight: 600; font-size: var(--t-sm); }
.form-harta input[type=email] {
  width: 100%; min-height: 48px; padding: 0 var(--s-2);
  background: var(--fundal); border: 1px solid var(--linie-tare); border-radius: var(--r-2);
  transition: border-color var(--d-1) var(--ease), box-shadow var(--d-1) var(--ease);
}
.form-harta input[type=email]::placeholder { color: var(--text-3); }
.form-harta input[type=email]:focus { outline: none; border-color: var(--galben); box-shadow: 0 0 0 4px var(--galben-slab); }
.form-harta .capcana { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-harta .acord { display: grid; grid-template-columns: 24px 1fr; gap: var(--s-1); font-weight: 400; color: var(--text-2); line-height: 1.5; }
.form-harta .acord input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--galben); }
.form-harta .acord a { color: var(--text); text-underline-offset: 3px; }
.form-harta .btn { width: 100%; font-family: inherit; }
.form-harta .btn:disabled { opacity: .6; cursor: wait; transform: none; }
.form-harta .stare:empty { display: none; }
.form-harta .stare { font-size: var(--t-sm); }
.form-harta.trimis .stare { color: var(--text); background: var(--fundal); border-left: 3px solid var(--galben); border-radius: var(--r-1); padding: var(--s-2); }
.newsletter > * { max-width: 640px; }
.newsletter .cap { margin-bottom: var(--s-4); }
.form-harta.eroare .stare { color: var(--eroare); }
.form-harta .atentie, .form-harta .stare strong { color: var(--galben); font-weight: 600; }
.form-harta .atentie { font-size: var(--t-sm); line-height: 1.5; }

/* Pașii */
.pasi { display: grid; gap: var(--s-3); counter-reset: pas; }
.pas { display: grid; gap: var(--s-2); align-content: start; padding-top: var(--s-3); border-top: 1px solid var(--linie-tare); }
.pas::before {
  counter-increment: pas; content: "0" counter(pas);
  font: 500 var(--t-sm)/1 var(--font-mono); color: var(--galben);
}
.pas p { color: var(--text-2); }
@media (min-width: 768px) { .pasi { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); } }

/* Timpul de învățat */
.ore { display: grid; gap: var(--s-2); }
.ora { display: grid; gap: var(--s-1) var(--s-3); padding: var(--s-3); border-radius: var(--r-2); background: var(--suprafata); border: 1px solid var(--linie); }
.ora-timp { font: 500 var(--t-xl)/1 var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ora p { color: var(--text-2); }
.ora-nota { font: 500 var(--t-xs)/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.ora-nota b { font: 600 var(--t-lg)/1 var(--font); letter-spacing: -.02em; text-transform: none; color: var(--galben); margin-left: var(--s-1); }
@media (min-width: 768px) {
  .ora { grid-template-columns: 160px minmax(0, 1fr) 160px; align-items: center; }
  .ora-nota { text-align: right; }
}
.avert { display: flex; gap: var(--s-2); align-items: flex-start; margin-top: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-2); background: var(--galben-slab); color: var(--text); font-size: var(--t-sm); }
.avert .ico { color: var(--galben); margin-top: 2px; }

/* Întrebări */
.intrebari { border-top: 1px solid var(--linie); max-width: 880px; }
.intrebari details { border-bottom: 1px solid var(--linie); interpolate-size: allow-keywords; }
.intrebari summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-2);
  min-height: 64px; padding: var(--s-2) 0; list-style: none; cursor: pointer;
  font-size: var(--t-lg); font-weight: 500; letter-spacing: -.01em;
  transition: color var(--d-1) var(--ease);
}
.intrebari summary::-webkit-details-marker { display: none; }
.intrebari summary:hover { color: var(--galben); }
.intrebari summary .ico { color: var(--text-3); transition: transform var(--d-2) var(--ease); }
.intrebari details[open] summary .ico { transform: rotate(45deg); color: var(--galben); }
.intrebari details::details-content { block-size: 0; overflow: clip; transition: block-size var(--d-2) var(--ease), content-visibility var(--d-2) allow-discrete; }
.intrebari details[open]::details-content { block-size: auto; }
.intrebari .raspuns { padding: 0 var(--s-6) var(--s-3) 0; color: var(--text-2); max-width: 68ch; }

/* Banda finală */
.final { background: var(--galben); color: var(--pe-galben); }
.final .lat { display: grid; justify-items: center; text-align: center; gap: var(--s-3); }
.final .eticheta { color: var(--pe-galben); }
.final h2 { font-size: var(--t-3xl); font-weight: 650; line-height: 1; letter-spacing: -.045em; }
.final p { max-width: 56ch; font-size: var(--t-lg); }
.final .actiuni { justify-content: center; }
.final .contact { font-size: var(--t-sm); color: rgba(28, 11, 53, .82); }
.final .contact a { font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }
.final :focus-visible { outline-color: var(--pe-galben); }
@media (max-width: 479px) { .final .actiuni .btn { width: 100%; } }

/* Subsolul */
.subsol { padding: var(--s-10) 0 var(--s-5); background: var(--fundal); font-size: var(--t-sm); color: var(--text-2); }
.col { display: grid; gap: var(--s-5); padding-bottom: var(--s-5); border-bottom: 1px solid var(--linie); }
@media (min-width: 768px) { .col { grid-template-columns: 1.4fr 1fr 1fr; } }
.col h2 { margin-bottom: var(--s-2); font: 500 var(--t-xs)/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.col ul { display: grid; gap: var(--s-1); }
.col a { text-decoration: none; transition: color var(--d-1) var(--ease); }
.col a:hover { color: var(--galben); }
.col .brand { color: var(--text); margin-bottom: var(--s-2); }
.date { display: grid; gap: var(--s-1); padding: var(--s-4) 0; border-bottom: 1px solid var(--linie); font-size: var(--t-xs); line-height: 1.7; }
.date h2 { font: 500 var(--t-xs)/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s-1); }
.date p { max-width: 80ch; }
.date a { text-underline-offset: 3px; }
.jos { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-3); padding-top: var(--s-3); font-size: var(--t-xs); color: var(--text-3); }
.jos a { text-underline-offset: 3px; }

/* Pagini simple (404, confirmare) */
.simplu { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }
.simplu .nav { position: static; border-bottom-color: var(--linie); }
.simplu main { display: grid; align-content: center; gap: var(--s-3); padding-block: var(--s-10); justify-items: start; }
.simplu h1 { font-size: var(--t-2xl); line-height: 1.06; letter-spacing: -.035em; font-weight: 600; max-width: 20ch; }
.simplu .subsol { padding-block: var(--s-3); border-top: 1px solid var(--linie); }

/* 6. Mișcare */
@keyframes carte-intra { from { opacity: 0; transform: translateY(32px); } }
@keyframes foaie-intra { from { opacity: 0; transform: rotate(0deg) translateX(-12%); } }
@keyframes apare { from { opacity: 0; } }
@keyframes urca { from { opacity: 0; transform: translateY(16px); } }
.hero-text > * { animation: urca var(--d-3) var(--ease) both; }
.hero-text > :nth-child(2) { animation-delay: 60ms; }
.hero-text > :nth-child(3) { animation-delay: 120ms; }
.hero-text > :nth-child(4) { animation-delay: 180ms; }
.hero-text > :nth-child(5) { animation-delay: 240ms; }
.hero-text > :nth-child(6) { animation-delay: 300ms; }

[data-apare] { transition: opacity var(--d-3) var(--ease), transform var(--d-3) var(--ease); }
[data-apare].ascuns { opacity: 0; transform: translateY(24px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
  [data-apare].ascuns { opacity: 1; transform: none; }
}

/* Buton Tema 1 gratuit */
.cta-tema { padding: var(--s-5) 0; background: var(--fundal); border-bottom: 1px solid var(--linie); }
.cta-tema .lat { display: grid; justify-items: center; }
@media (max-width: 479px) { .cta-tema .btn { width: 100%; white-space: normal; text-align: center; line-height: 1.2; padding-block: var(--s-1); } }

/* WhatsApp plutitor, doar pe telefon */
.wa-plutitor { display: none; }
@media (max-width: 767px) {
  .wa-plutitor {
    position: fixed; right: var(--s-2); bottom: calc(var(--s-2) + env(safe-area-inset-bottom, 0px)); z-index: 40;
    display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
    background: #25D366; color: #fff; box-shadow: 0 8px 24px -6px rgba(0, 0, 0, .5);
  }
  .wa-plutitor .ico { width: 30px; height: 30px; }
  .wa-plutitor:active { transform: scale(.94); }
  .subsol { padding-bottom: calc(var(--s-5) + 72px); }
}
@media (max-width: 479px) { .btn-tema { white-space: normal; text-align: center; line-height: 1.2; min-width: 0; } }