/* ============================================================================
   stil.css — Karmin. Atelierul: hârtie, cerneală, carmin. Tot din ../tokens.css.
   Componentele, în ordine: baza · butoane · antet · meniu · secțiuni · Acasă · Lucrări ·
   studiul de caz (costumul clientului) · Servicii · Despre · Prețuri · Contact · texte ·
   subsol · bara de jos · mișcare · ecrane mici.
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
body {
  margin: 0; background: var(--c-hartie); color: var(--c-cerneala);
  font: 400 var(--step-0)/var(--lh-text) var(--f-text);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, canvas, svg, picture { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--c-carmin); outline-offset: 3px; border-radius: 2px; }
[data-tema="carmin"] :focus-visible, [data-tema="noapte"] :focus-visible { outline-color: var(--c-foaie); }
h1, h2, h3 {
  margin: 0; font-family: var(--f-display); font-weight: 800;
  line-height: var(--lh-display); letter-spacing: var(--ls-display); text-wrap: balance;
  hyphens: auto; overflow-wrap: anywhere;   /* germana: „Veranstaltungen" pe 360 px (audit 09.10); „anywhere" contează și în grilă, „break-word" nu */
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
sup { font-size: .6em; line-height: 0; }
.cadru { max-width: var(--latime); margin-inline: auto; padding-inline: var(--gutter); }
.eticheta { font: 500 var(--step--1)/1.3 var(--f-mono); letter-spacing: var(--ls-eticheta); text-transform: uppercase; }
.sari { position: absolute; left: -9999px; z-index: 100; }
.sari:focus { left: 16px; top: 16px; background: var(--c-foaie); padding: .6rem 1rem; }
.vizual-ascuns { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.selectabil { user-select: all; }
.mic { font-size: .8125rem; }

/* fundalurile de secțiune */
[data-tema="carmin"] { background: var(--c-carmin); color: var(--c-pe-carmin); position: relative; }
[data-tema="noapte"] { background: var(--c-cerneala); color: var(--c-foaie); }
[data-tema="carmin"]::after {   /* bobul hârtiei: carminul să nu pară ecran (§8, textură) */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .09; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .38 0 0 0 0 .08 0 0 0 0 .06 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-tema="carmin"] > * { position: relative; z-index: 1; }
.sect { padding-block: var(--sp-9); }
.sect--adancit { background: var(--c-hartie-2); }
.sect-cap { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-7); max-width: 60rem; }
.sect-cap h2 { font-size: var(--step-5); }
.sect-cap p { font-size: var(--step-1); color: var(--c-cerneala-2); max-width: 46ch; }
.sect-cap .eticheta { color: var(--c-carmin-adanc); }
.sect-cap h2.eticheta { font: 500 var(--step--1)/1.3 var(--f-mono); letter-spacing: var(--ls-eticheta); }
@media (min-width: 900px) {
  .sect-cap--lat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; max-width: none; column-gap: var(--sp-8); }
  .sect-cap--lat .eticheta { grid-column: 1 / -1; }
}

/* ---------- butoane și legături ---------- */
.buton {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font: 600 var(--step-0)/1.1 var(--f-text); padding: 1em 1.4em; border-radius: 999px; border: 2px solid transparent;
  background: var(--c-carmin-adanc); color: var(--c-pe-carmin); text-decoration: none; cursor: pointer;
  transition: transform var(--t-scurt) var(--e-iesire), background-color var(--t-scurt), color var(--t-scurt);
}
.buton:hover { transform: translateY(-2px); }
.sageata { display: inline-block; transition: transform var(--t-scurt) var(--e-iesire); }
a:hover .sageata, .buton:hover .sageata { transform: translateX(.3em); }
.buton--pe-carmin { background: var(--c-foaie); color: var(--c-carmin-adanc); }
.buton--contur { background: transparent; color: var(--c-pe-carmin); border-color: color-mix(in srgb, var(--c-pe-carmin) 55%, transparent); }
.buton--contur:hover { border-color: var(--c-pe-carmin); }
.buton--costum { background: var(--k-cerneala); color: var(--k-fond); justify-self: start; }
.link-sub {
  display: inline-flex; align-items: center; gap: .5em; font: 600 var(--step-0)/1.2 var(--f-text);
  text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: .25em; justify-self: start; margin-top: var(--sp-6);
}
.inapoi { font: 500 var(--step--1)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; justify-self: start; }
.inapoi:hover { text-decoration: underline; text-underline-offset: .3em; }

/* ---------- antetul ---------- */
.antet {
  position: fixed; inset: 0 0 auto; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  color: var(--antet-culoare, var(--c-cerneala));
  background: color-mix(in srgb, var(--antet-fond, var(--c-hartie)) 90%, transparent);
  transition: color .45s var(--e-iesire), background-color .45s var(--e-iesire), transform .45s var(--e-iesire);
}
.antet--carmin { --antet-culoare: var(--c-pe-carmin); --antet-fond: var(--c-carmin); --antet-buton: var(--c-foaie); --antet-buton-text: var(--c-carmin-adanc); }
.antet--noapte { --antet-culoare: var(--c-foaie); --antet-fond: var(--c-cerneala); --antet-buton: var(--c-foaie); --antet-buton-text: var(--c-cerneala); }
.antet--ascuns { transform: translateY(-110%); }
.antet .cadru { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 72px; }
.antet-logo { position: relative; display: block; width: 116px; height: 37px; color: inherit; flex: none; }
.antet-logo .logo-pensula, .meniu-logo {
  position: absolute; inset: 0; background: currentColor;
  -webkit-mask: url("img/logo.svg") no-repeat left center / contain; mask: url("img/logo.svg") no-repeat left center / contain;
  transition: opacity .35s, transform .35s var(--e-iesire);
}
.antet-logo .logo-costum {
  position: absolute; left: 0; top: 50%; transform: translateY(-40%); opacity: 0;
  font: var(--logo-greutate, 700) 1.75rem/1 var(--logo-font, var(--f-display)); letter-spacing: -.01em;
  white-space: nowrap; transition: opacity .35s, transform .35s var(--e-iesire);
}
.antet--costum .logo-pensula { opacity: 0; transform: translateY(-30%); }
.antet--costum .logo-costum { opacity: 1; transform: translateY(-50%); }
.antet-nav ul { display: flex; gap: clamp(1rem, 2vw, 1.9rem); }
.antet-nav a { text-decoration: none; font: 500 .9375rem/1 var(--f-text); padding-block: .5rem; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .3s var(--e-iesire); }
.antet-nav a:hover, .antet-nav a[aria-current="page"] { background-size: 100% 1.5px; }
.antet-dreapta { display: flex; align-items: center; gap: 1rem; }
.antet .buton { padding: .8em 1.15em; font-size: .9375rem; background: var(--antet-buton, var(--c-carmin-adanc)); color: var(--antet-buton-text, var(--c-pe-carmin)); }
.meniu-buton {
  display: none; font: 600 .9375rem/1 var(--f-text); padding: .75em 1.1em; border-radius: 999px; cursor: pointer;
  background: transparent; color: inherit; border: 1.5px solid currentColor;
}

/* selectorul de limbă */
.limbi { position: relative; }
.limbi summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .35rem;
  font: 500 .8125rem/1 var(--f-mono); letter-spacing: .12em; padding: .6rem .4rem;
}
.limbi summary::-webkit-details-marker { display: none; }
.limbi summary svg { width: 10px; transition: transform .25s; }
.limbi[open] summary svg { transform: rotate(180deg); }
.limbi-lista {
  position: absolute; right: 0; top: calc(100% + .4rem); min-width: 13rem; padding: .5rem; border-radius: 10px;
  background: var(--c-foaie); color: var(--c-cerneala); box-shadow: var(--umbra-2); display: grid;
}
.limbi-lista a { display: flex; gap: .8rem; padding: .6rem .7rem; border-radius: 6px; text-decoration: none; font: 500 .9375rem/1.2 var(--f-text); }
.limbi-lista b { font: 600 .75rem/1.5 var(--f-mono); letter-spacing: .1em; color: var(--c-carmin-adanc); width: 1.8rem; }
.limbi-lista a:hover, .limbi-lista a[aria-current="true"] { background: var(--c-hartie); }

/* costumul clientului în antet, pe paginile de studiu de caz */
.pagina-costum .antet { --antet-culoare: var(--k-cerneala); --antet-fond: var(--k-fond); --antet-buton: var(--k-cerneala); --antet-buton-text: var(--k-fond);
  --logo-font: var(--k-f-display); --logo-greutate: var(--k-greutate); }

/* ---------- meniul de pe telefon (în afara antetului: antetul se mișcă, panoul nu) ---------- */
.meniu {
  position: fixed; inset: 0; z-index: 70; background: var(--c-carmin); color: var(--c-pe-carmin);
  display: grid; grid-template-rows: auto 1fr auto auto; gap: var(--sp-5); padding: calc(env(safe-area-inset-top, 0px) + 14px) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 24px);
  overflow-y: auto;
}
.meniu-sus { display: flex; justify-content: space-between; align-items: center; height: 44px; }
.meniu-logo { position: relative; width: 116px; height: 37px; display: block; }
.meniu-inchide { font: 600 .9375rem/1 var(--f-text); padding: .75em 1.1em; border-radius: 999px; background: var(--c-foaie); color: var(--c-carmin-adanc); border: 0; cursor: pointer; }
.meniu-lista { display: grid; gap: .2rem; align-content: center; }
.meniu-lista a { font: 800 clamp(2.6rem, 12vw, 4.5rem)/1 var(--f-display); text-decoration: none; text-transform: uppercase; letter-spacing: -.005em; }
.meniu-limbi { display: flex; flex-wrap: wrap; gap: .5rem; }
.meniu-limbi a { font: 600 .875rem/1 var(--f-mono); letter-spacing: .1em; padding: .65rem .8rem; border: 1.5px solid color-mix(in srgb, var(--c-pe-carmin) 50%, transparent); border-radius: 999px; text-decoration: none; }
.meniu-limbi a[aria-current="true"] { background: var(--c-foaie); color: var(--c-carmin-adanc); border-color: var(--c-foaie); }
.meniu-contact { display: grid; gap: .4rem; font: 500 var(--step-1)/1.3 var(--f-text); }
.meniu-contact a { text-decoration: none; }

/* ---------- capul paginilor interioare ---------- */
.cap-pagina { padding: calc(72px + var(--sp-8)) 0 var(--sp-7); }
.cap-pagina .cadru { display: grid; gap: var(--sp-5); }
.cap-pagina .eticheta { color: var(--c-carmin-adanc); }
.cap-pagina h1 { font-size: var(--step-6); max-width: 14ch; }
.cap-text { font-size: var(--step-1); color: var(--c-cerneala-2); max-width: 52ch; line-height: 1.5; }
.cap-pagina--carmin { padding-bottom: var(--sp-8); }
.cap-pagina--carmin .eticheta, .cap-pagina--carmin .cap-text { color: var(--c-pe-carmin); }

/* =============================================================== ACASĂ */
.erou { min-height: 100svh; display: grid; grid-template-rows: 1fr auto; padding-top: 72px; overflow: hidden; }
.erou-grila { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--sp-6); padding-block: var(--sp-7); }
.erou-text { display: grid; gap: var(--sp-5); }
.erou-h1 { font-size: min(var(--step-7), 17svh, 11.5vw); line-height: .86; letter-spacing: -.01em; text-transform: uppercase; }
.rand-erou { display: block; white-space: nowrap; }
.erou-p { font-size: var(--step-1); line-height: 1.5; max-width: 44ch; }
.erou-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); }
.erou-cta .link-sub { margin-top: 0; }
.evantai { position: relative; height: min(64svh, 560px); }
.ev {
  position: absolute; left: 50%; bottom: 4%; width: clamp(108px, 12vw, 170px); aspect-ratio: 3 / 4.4; margin-left: calc(clamp(108px, 12vw, 170px) / -2);
  transform-origin: 50% 260%; transform: rotate(calc((var(--i) - 2.5) * 8deg)) translateY(var(--ev-y, 0));
  background: var(--k-fond); color: var(--k-cerneala); border-radius: 6px 6px 12px 12px; box-shadow: var(--umbra-3);
  display: grid; grid-template-rows: auto 1fr auto; padding: .8rem; border-bottom: 8px solid var(--k-accent);
}
/* ca la un evantai de mostre: „Aa" în colțul de sus, să se vadă pe fiecare */
.ev b { font: var(--k-greutate) clamp(1.6rem, 2.6vw, 2.4rem)/1 var(--k-f-display); letter-spacing: var(--k-ls); justify-self: start; }
.ev small { font: 500 .625rem/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--k-cerneala-2); }
.ev--al-tau { background: transparent; color: var(--c-pe-carmin); border: 2px dashed color-mix(in srgb, var(--c-pe-carmin) 70%, transparent); box-shadow: none; }
.ev--al-tau b { font-family: var(--f-display); }
.ev--al-tau small { color: var(--c-pe-carmin); }
.banda { border-top: 1px solid color-mix(in srgb, var(--c-pe-carmin) 30%, transparent); overflow: hidden; padding-block: 1rem; }
.banda-pista { display: flex; width: max-content; animation: banda 48s linear infinite; }
.banda-pista span { font: 500 var(--step-1)/1 var(--f-mono); letter-spacing: .04em; white-space: pre; }   /* fără majuscule: „Maß” ar deveni „MASS” */
@keyframes banda { to { transform: translateX(-50%); } }

/* ce facem: index cu suprafață care urcă la hover */
.index { border-top: 1px solid var(--c-cerneala); }
.index li { border-bottom: 1px solid var(--c-linie); }
.index-rand {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 3fr) auto; gap: var(--sp-5);
  align-items: center; padding: var(--sp-5) var(--sp-3); text-decoration: none; isolation: isolate;
}
.index-rand::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-carmin); transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--e-iesire); }
.index-rand:hover::before, .index-rand:focus-visible::before { transform: scaleY(1); }
.index-rand:hover, .index-rand:focus-visible { color: var(--c-pe-carmin); }
.index-nume { font: 800 var(--step-3)/1 var(--f-display); text-transform: uppercase; transition: transform .45s var(--e-iesire); }
.index-rand:hover .index-nume { transform: translateX(.35em); }
.index-text { color: inherit; opacity: .85; }
.index-cip { display: flex; flex-wrap: wrap; gap: .3rem; }
.cip { font: 600 .6875rem/1 var(--f-mono); letter-spacing: .06em; padding: .45em .65em; border-radius: 999px; background: var(--k-fond); color: var(--k-cerneala); border: 1px solid var(--k-accent); white-space: nowrap; }

/* de unde venim */
.congrese-grila { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-7); align-items: center; }
.congrese-cifra { font: 900 clamp(12rem, 34vw, 30rem)/.78 var(--f-display); color: var(--c-carmin); letter-spacing: -.03em; }
.congrese-text { display: grid; gap: var(--sp-4); }
.congrese-text .eticheta { color: var(--c-carmin-adanc); }
.congrese-text h2 { font-size: var(--step-5); }
.congrese-text > p { font-size: var(--step-1); max-width: 50ch; }
.congrese-sub { font: 500 var(--step--1)/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--c-cerneala-2); }
.ani { display: grid; border-left: 2px solid var(--c-carmin); margin-top: var(--sp-3); }
.ani li { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--sp-3); padding: .55rem 0 .55rem var(--sp-4); position: relative; }
.ani li::before { content: ""; position: absolute; left: -6px; top: 1.05rem; width: 10px; height: 10px; border-radius: 50%; background: var(--c-carmin); }
.ani .an { font: 600 .9375rem/1.6 var(--f-mono); color: var(--c-carmin-adanc); }

/* cum lucrăm: cărți care se așază una peste alta */
.pasi { display: grid; gap: 0; }
.pas {
  position: sticky; top: calc(92px + var(--k) * 20px); margin-bottom: 14vh;
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--sp-5) var(--sp-7); align-items: start;
  background: var(--c-foaie); border-radius: 14px; padding: clamp(1.5rem, 4vw, 3.5rem); box-shadow: var(--umbra-2); min-height: 14rem;
}
.pas:last-child { margin-bottom: 0; background: var(--c-carmin); color: var(--c-pe-carmin); }
.pas-nr { grid-row: span 2; font: 900 clamp(4rem, 9vw, 8rem)/.8 var(--f-display); color: var(--c-carmin); }
.pas:last-child .pas-nr { color: var(--c-pe-carmin); }
.pas h3 { font-size: var(--step-4); text-transform: uppercase; }
.pas p { font-size: var(--step-1); max-width: 48ch; }

/* noi doi */
.portrete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); }
.portret {
  position: relative; overflow: hidden; border-radius: 14px; padding: clamp(1.5rem, 3vw, 2.5rem); min-height: 30rem;
  display: grid; align-content: end; gap: var(--sp-3); box-shadow: var(--umbra-2);
}
.portret h3 { font-size: var(--step-4); position: relative; }
.portret p:not(.portret-nume) { max-width: 40ch; position: relative; }
.portret .eticheta { position: relative; }
.portret-nume { position: absolute; top: .1em; left: .1em; font: 400 clamp(7rem, 14vw, 13rem)/1 var(--f-pensula); transform: rotate(-6deg); pointer-events: none; }
.portret--niki { background: var(--c-cerneala); color: var(--c-foaie); }
.portret--niki .portret-nume { color: var(--c-carmin-noapte); }
.portret--mara { background: var(--c-carmin); color: var(--c-pe-carmin); }
.portret--mara .portret-nume { color: var(--c-foaie); }
.fapte-noi { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--sp-5); }
.fapte-noi li { font: 500 .8125rem/1.2 var(--f-mono); padding: .6em .9em; border: 1px solid var(--c-cerneala-2); border-radius: 999px; }
.noi .link-sub { color: var(--c-carmin-adanc); }
.noi-nota { font-size: var(--step-1); max-width: 56ch; margin-top: var(--sp-5); }

/* 218 */
.o218 { padding-block: var(--sp-9); overflow: hidden; }
.o218 .eticheta { color: var(--c-pe-cerneala-2); }
.o218-nr { font: 900 clamp(10rem, 36vw, 36rem)/.78 var(--f-display); color: var(--c-carmin-noapte); letter-spacing: -.03em; margin-block: var(--sp-5); }
.o218-fraza { font: 600 var(--step-3)/1.2 var(--f-text); max-width: 30ch; letter-spacing: -.01em; }
.o218-fraza .cuv { color: var(--c-pe-cerneala-3); transition: color .3s; }
.o218-fraza .cuv.aprins { color: var(--c-foaie); }

/* cifre */
.cifre .eticheta { color: var(--c-carmin-adanc); margin-bottom: var(--sp-6); }
.cifre-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr)); gap: var(--sp-6) var(--sp-5); }
.cifre-lista li { display: grid; gap: .6rem; border-top: 2px solid var(--c-cerneala); padding-top: var(--sp-4); }
.cifra-val { font: 600 clamp(2.2rem, 3.7vw, 4.4rem)/1 var(--f-mono); color: var(--c-carmin-adanc); letter-spacing: -.03em; white-space: nowrap; }
.cifra-text { color: var(--c-cerneala-2); max-width: 30ch; }
.cifre-lista--noapte li { border-top-color: var(--c-foaie); }
.cifre-lista--noapte .cifra-val { color: var(--c-carmin-noapte); }
.cifre-lista--noapte .cifra-text { color: var(--c-pe-cerneala-2); }

/* prețuri (rânduri, nu carduri) */
.preturi-tabel { border-top: 1px solid var(--c-cerneala); }
.pret-rand { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 2fr); gap: var(--sp-4); align-items: baseline; padding: var(--sp-5) 0; border-bottom: 1px solid var(--c-linie); }
.pret-rand h3 { font-size: var(--step-2); text-transform: uppercase; }
.pret-rand p { color: var(--c-cerneala-2); }
.pret-rand .pret-val { font: 600 var(--step-2)/1.1 var(--f-mono); color: var(--c-carmin-adanc); white-space: nowrap; }
.pret-rand .pret-durata { font: 500 .875rem/1.3 var(--f-mono); color: var(--c-cerneala); }
.pret-cap { font: 500 .75rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c-cerneala-2); padding-block: var(--sp-3); }
.pret-rand--cerere { background: var(--c-carmin); color: var(--c-pe-carmin); padding-inline: var(--sp-5); border-radius: 12px; margin-top: var(--sp-4); border: 0; }
.pret-rand--cerere p, .pret-rand--cerere .pret-val, .pret-rand--cerere .pret-durata { color: var(--c-pe-carmin); }
.preturi-note { display: grid; gap: .5rem; margin-top: var(--sp-6); color: var(--c-cerneala-2); }
.preturi-note li::before { content: "— "; color: var(--c-carmin-adanc); }
.preturi-acasa .link-sub { color: var(--c-carmin-adanc); }

/* întrebări */
.intrebari-lista { border-top: 1px solid var(--c-cerneala); max-width: 62rem; }
.intrebare { border-bottom: 1px solid var(--c-linie); }
.intrebare summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: var(--sp-5) 0; font: 600 var(--step-2)/1.25 var(--f-text); }
.intrebare summary::-webkit-details-marker { display: none; }
.intrebare i { flex: none; width: 22px; height: 22px; position: relative; }
.intrebare i::before, .intrebare i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--c-carmin-adanc); transition: transform .3s var(--e-iesire); }
.intrebare i::after { transform: rotate(90deg); }
.intrebare[open] i::after { transform: rotate(0); }
.intrebare p { padding: 0 0 var(--sp-5); font-size: var(--step-1); max-width: 60ch; color: var(--c-cerneala-2); }

/* finalul, pe carmin */
.final { padding-block: var(--sp-9); }
.final .cadru { display: grid; gap: var(--sp-5); }
.final-h2 { font-size: var(--step-7); text-transform: uppercase; line-height: .84; }
.final-p { font-size: var(--step-2); max-width: 36ch; line-height: 1.3; }
.final-butoane { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }

/* =============================================================== LUCRĂRI */
.lucrare { background: var(--k-fond); color: var(--k-cerneala); font-family: var(--k-f-text); padding-block: var(--sp-8); position: relative; }
.lucrare-grila { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-7); align-items: center; }
.lucrare-text { display: grid; gap: var(--sp-4); }
.lucrare h2.c-nume { font-size: var(--step-5); }
.lucrare-leg { text-decoration: none; }
.lucrare-leg::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.lucrare-rez { font-size: var(--step-1); line-height: 1.45; max-width: 42ch; }
.lucrare-semn { font: 500 .875rem/1.3 var(--k-f-mono); }
.lucrare-semn span { text-transform: uppercase; letter-spacing: .1em; color: var(--k-cerneala-2); margin-right: .4em; }
.lucrare-cta { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-2); }
.lucrare-ext { position: relative; z-index: 2; }
.lucrare .dispozitive { transition: transform .6s var(--e-iesire); }
.lucrare:hover .dispozitive { transform: translateY(-10px) rotate(-.6deg); }
.dispozitive { position: relative; padding-bottom: 4%; }
.disp-laptop { width: 88%; }
.disp-tel { position: absolute; right: 0; bottom: 0; width: 23%; filter: drop-shadow(0 30px 40px rgb(0 0 0 / .35)); }
.dispozitive--mare .disp-laptop { width: 90%; }
.masina-grila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-7); align-items: start; }
.masina .eticheta { color: var(--c-pe-cerneala-2); }
.masina h2 { font-size: var(--step-5); margin-block: var(--sp-4); }
.masina p { font-size: var(--step-1); max-width: 48ch; color: var(--c-foaie); }
.acord-demo { font-size: .875rem; color: var(--c-cerneala-2); padding-block: var(--sp-5); }
.pagina-costum .acord-demo { color: var(--k-cerneala-2); }

/* =============================================================== STUDIUL DE CAZ — în costumul clientului */
.pagina-costum { background: var(--k-fond); color: var(--k-cerneala); font-family: var(--k-f-text); }
.pagina-costum h1, .pagina-costum h2, .pagina-costum h3 { font-family: var(--k-f-display); font-weight: var(--k-greutate); letter-spacing: var(--k-ls); text-transform: var(--k-transform, none); font-stretch: var(--k-stretch, 100%); }
.caz-erou { padding: calc(72px + var(--sp-7)) 0 var(--sp-8); overflow: hidden; }
.caz-erou-grila { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-7); align-items: center; }
.caz-erou-text { display: grid; gap: var(--sp-4); }
.caz-erou-text .inapoi { color: var(--k-cerneala-2); }
.caz-h1 { font-size: clamp(2.8rem, 6.6vw, 7rem); overflow-wrap: anywhere; }
.caz-rez { font-size: var(--step-1); line-height: 1.45; max-width: 40ch; }
.caz-sect { padding-block: var(--sp-8); border-top: 1px solid color-mix(in srgb, var(--k-cerneala) 18%, transparent); }
.caz-doua { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--sp-6); align-items: start; }
.caz-pornire { display: grid; gap: var(--sp-4); }
.caz-pornire p { font-size: var(--step-1); max-width: 56ch; }
.caz-pornire p:first-child { font: var(--k-greutate) var(--step-3)/1.15 var(--k-f-display); letter-spacing: var(--k-ls); max-width: 30ch; }
.caz-semnatura { padding-block: var(--sp-9) var(--sp-8); background: color-mix(in srgb, var(--k-cerneala) 6%, var(--k-fond)); overflow: hidden; }
.caz-semnatura .cadru { display: grid; gap: var(--sp-4); }
.caz-semn-h2 { font-size: clamp(2.6rem, 1rem + 6.5vw, 9.5rem); }
.caz-semn-text { font-size: var(--step-1); max-width: 60ch; line-height: 1.5; }
.film { margin-top: var(--sp-7); overflow-x: auto; scrollbar-width: none; }
.film-pista { display: flex; gap: var(--sp-5); padding-inline: var(--gutter); width: max-content; will-change: transform; }
.cadru-film { margin: 0; width: min(68vw, 760px); flex: none; display: grid; gap: .5rem; }
.cadru-film img { border-radius: 10px; box-shadow: var(--umbra-3); aspect-ratio: 16 / 10; object-fit: cover; object-position: top; width: 100%; }
.cadru-film figcaption { font: 500 .75rem/1 var(--k-f-mono); letter-spacing: .12em; color: var(--k-cerneala-2); }
.caz-lista { border-top: 1px solid var(--k-cerneala); }
.caz-lista li { display: grid; grid-template-columns: 3rem 1fr; gap: var(--sp-3); padding: var(--sp-4) 0; border-bottom: 1px solid color-mix(in srgb, var(--k-cerneala) 18%, transparent); font-size: var(--step-1); }
.caz-lista .nr { font: 500 .8125rem/2 var(--k-f-mono); color: var(--k-cerneala-2); }
.caz-sect--cifre .c-eticheta { margin-bottom: var(--sp-6); }
.caz-cifre { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: var(--sp-6); }
.caz-cifre li { display: grid; gap: .5rem; border-top: 2px solid var(--k-cerneala); padding-top: var(--sp-4); }
.caz-cifra-val { font: var(--k-greutate) clamp(2.6rem, 5.6vw, 6.5rem)/.95 var(--k-f-display); letter-spacing: var(--k-ls); color: var(--k-accent-text); white-space: nowrap; }
.paleta { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-3); }
.paleta li { display: grid; gap: .4rem; }
.mostra-paleta { aspect-ratio: 3 / 4; border-radius: 8px; box-shadow: var(--umbra-2); border: 1px solid color-mix(in srgb, var(--k-cerneala) 15%, transparent); }
.paleta code { font: 600 .8125rem/1 var(--k-f-mono); }
.paleta span:last-child { font-size: .875rem; color: var(--k-cerneala-2); }
.caz-fonturi { margin-top: var(--sp-5); font-size: var(--step-1); }
.caz-fonturi span { font: 500 .75rem/1 var(--k-f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--k-cerneala-2); margin-right: .6em; }
.caz-urmator { display: block; background: var(--k-fond); color: var(--k-cerneala); font-family: var(--k-f-text); padding-block: var(--sp-9); text-decoration: none; }
.caz-urmator .cadru { display: grid; gap: var(--sp-3); }
.caz-urmator .c-nume { font-size: var(--step-6); }
.caz-urmator:hover .sageata { transform: translateX(.3em); }

/* =============================================================== SERVICII */
.servicii-lista { border-top: 1px solid var(--c-cerneala); }
.serviciu-rand { border-bottom: 1px solid var(--c-linie); }
.serviciu-rand a {
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-3) var(--sp-7);
  padding: var(--sp-6) var(--sp-3); text-decoration: none;
}
.serviciu-rand a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-foaie); transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--e-iesire); }
.serviciu-rand a:hover::before { transform: scaleY(1); }
.serviciu-rand h2 { font-size: var(--step-4); text-transform: uppercase; grid-row: span 3; transition: transform .45s var(--e-iesire); }
.serviciu-rand a:hover h2 { transform: translateX(.2em); }
.serviciu-scurt { font-size: var(--step-1); }
.serviciu-inc { display: flex; flex-wrap: wrap; gap: .3rem .9rem; color: var(--c-cerneala-2); }
.serviciu-inc li::before { content: "· "; color: var(--c-carmin-adanc); }
.serviciu-jos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.serviciu-pret { font: 600 .9375rem/1 var(--f-mono); color: var(--c-carmin-adanc); }
.nu-facem h2 { font-size: var(--step-4); }
.nu-lista { display: grid; gap: var(--sp-4); }
.nu-lista li { font-size: var(--step-2); line-height: 1.3; padding-left: 1.4em; position: relative; }
.nu-lista li::before { content: "×"; position: absolute; left: 0; color: var(--c-carmin-adanc); font-weight: 700; }
.serviciu-cap h1 { max-width: 18ch; }
.pentru { font-size: var(--step-1); max-width: 56ch; display: grid; gap: .4rem; }
.pentru .eticheta { color: var(--c-carmin-adanc); }
.include-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-7); border-top: 1px solid var(--c-cerneala); }
.include-lista li { display: grid; gap: .5rem; padding: var(--sp-5) 0; border-bottom: 1px solid var(--c-linie); }
.include-lista h3 { font-size: var(--step-3); text-transform: uppercase; }
.include-lista p { color: var(--c-cerneala-2); max-width: 46ch; }
.dovezi-lista { display: grid; gap: var(--sp-3); }
.dovada a { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) auto; align-items: center; gap: var(--sp-5); background: var(--k-fond); color: var(--k-cerneala); padding: var(--sp-5) var(--sp-6); border-radius: 12px; text-decoration: none; font-family: var(--k-f-text); transition: transform .4s var(--e-iesire); }
.dovada a:hover { transform: translateX(8px); }
.dovada .c-nume { font-size: var(--step-4); }
.dovada-semn { font: 500 .875rem/1.2 var(--k-f-mono); }
.pret-serviciu-grila { display: grid; gap: var(--sp-3); }
.pret-serviciu-grila .eticheta { color: var(--c-carmin-adanc); }
.pret-mare { font: 600 var(--step-5)/1 var(--f-mono); color: var(--c-carmin-adanc); }
.pret-serviciu .link-sub { margin-top: var(--sp-3); }

/* =============================================================== DESPRE */
.ani-lista { border-top: 1px solid var(--c-cerneala); }
.ani-lista li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr) minmax(0, 5fr); gap: var(--sp-5); padding: var(--sp-5) 0; border-bottom: 1px solid var(--c-linie); align-items: baseline; }
.ani-lista .an { font: 600 var(--step-3)/1 var(--f-mono); color: var(--c-carmin-adanc); }
.ani-ev { font: 800 var(--step-2)/1.1 var(--f-display); text-transform: uppercase; }
.ani-cine { color: var(--c-cerneala-2); }
.ani-nota { margin-top: var(--sp-5); font-size: var(--step-1); max-width: 56ch; }
.poveste-bloc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-7); padding-block: var(--sp-7); border-top: 1px solid var(--c-linie); }
.poveste-bloc:first-child { border-top: 0; padding-top: 0; }
.poveste-bloc h2 { font-size: var(--step-4); position: sticky; top: 110px; align-self: start; }
.poveste-bloc div { display: grid; gap: var(--sp-4); }
.poveste-bloc p { font-size: var(--step-1); line-height: 1.6; max-width: 58ch; }
.masuram-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: var(--sp-6); }
.masuram-lista li { display: grid; gap: .8rem; border-top: 2px solid var(--c-cerneala); padding-top: var(--sp-4); }
.masura-val { font: 800 var(--step-5)/1 var(--f-display); color: var(--c-carmin-adanc); }

/* =============================================================== CONTACT */
.persoane-grila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); }
.persoana { position: relative; overflow: hidden; background: var(--c-foaie); border-radius: 14px; padding: clamp(1.5rem, 3vw, 2.5rem); padding-top: clamp(7rem, 12vw, 10rem); display: grid; gap: var(--sp-3); box-shadow: var(--umbra-2); }
.persoana .portret-nume { color: var(--c-carmin); font-size: clamp(5rem, 10vw, 9rem); }
.persoana h2 { font-size: var(--step-3); position: relative; }
.persoana .eticheta { color: var(--c-cerneala-2); position: relative; }
.persoana-tel { font: 600 var(--step-3)/1 var(--f-mono); text-decoration: none; color: var(--c-carmin-adanc); position: relative; }
.persoana .link-sub { margin-top: var(--sp-2); position: relative; }
.formular-sect h2 { font-size: var(--step-4); margin-bottom: var(--sp-4); }
.formular-nota { color: var(--c-cerneala-2); max-width: 44ch; margin-top: var(--sp-3); }
.formular { display: grid; gap: .5rem; max-width: 40rem; }
.formular label { font: 600 .9375rem/1.3 var(--f-text); margin-top: var(--sp-3); }
.formular input:not([type="checkbox"]), .formular textarea {
  font: 400 var(--step-0)/1.4 var(--f-text); padding: .9rem 1rem; border: 1.5px solid var(--c-cerneala-2); border-radius: 10px;
  background: var(--c-foaie); color: var(--c-cerneala); width: 100%;
}
.formular input:focus-visible, .formular textarea:focus-visible { outline: 2px solid var(--c-carmin); outline-offset: 1px; }
.formular .acord { display: flex; gap: .7rem; align-items: flex-start; font-weight: 400; }
.formular .acord input { width: 1.2rem; height: 1.2rem; margin-top: .15rem; accent-color: var(--c-carmin-adanc); flex: none; }
.formular .buton { margin-top: var(--sp-4); justify-self: start; }
.formular-eroare { color: var(--c-carmin-adanc); font-weight: 600; }

/* =============================================================== TEXTE (confidențialitate, date legale) */
.text-coloana { max-width: 48rem; display: grid; gap: var(--sp-6); }
.text-bloc { display: grid; gap: var(--sp-3); }
.text-bloc h2 { font-size: var(--step-3); text-transform: uppercase; }
.text-bloc p, .text-coloana > p { font-size: var(--step-1); line-height: 1.6; color: var(--c-cerneala); }
.actualizat { font: 500 .8125rem/1 var(--f-mono); color: var(--c-cerneala-2); }
.legal-lista { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); border-top: 1px solid var(--c-cerneala); }
.legal-lista dt, .legal-lista dd { padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-linie); margin: 0; }
.legal-lista dt { font: 500 .8125rem/1.6 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--c-cerneala-2); }

/* =============================================================== SUBSOL */
.subsol { padding-block: var(--sp-9) var(--sp-7); }
.subsol-sus { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-5); padding-bottom: var(--sp-7); border-bottom: 1px solid color-mix(in srgb, var(--c-foaie) 25%, transparent); }
.subsol-logo { display: block; width: min(420px, 78vw); aspect-ratio: 3075 / 984; background: var(--c-carmin-noapte);
  -webkit-mask: url("img/logo.svg") no-repeat left center / contain; mask: url("img/logo.svg") no-repeat left center / contain; }
.subsol-titlu { font: 800 var(--step-5)/1 var(--f-display); text-transform: uppercase; }
.subsol-coloane { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); padding-block: var(--sp-7); }
.subsol-coloane .eticheta { color: var(--c-pe-cerneala-2); margin-bottom: var(--sp-4); }
.subsol-coloane ul { display: grid; gap: .55rem; }
.subsol-coloane a { text-decoration: none; }
.subsol-coloane a:hover { text-decoration: underline; text-underline-offset: .25em; }
.subsol-coloane .mic { color: var(--c-pe-cerneala-2); }
.subsol-jos { display: grid; gap: .5rem; padding-top: var(--sp-5); border-top: 1px solid color-mix(in srgb, var(--c-foaie) 25%, transparent); color: var(--c-pe-cerneala-2); }
.subsol-jos a { color: var(--c-foaie); }

/* =============================================================== BARA DE JOS (telefon) și NOTA DE LIMBĂ */
.bara-mobil { display: none; }
.nota-limba {
  position: fixed; left: var(--gutter); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 65; max-width: min(30rem, calc(100vw - 2 * var(--gutter)));
  background: var(--c-cerneala); color: var(--c-foaie); border-radius: 14px; padding: 1rem 1.1rem; box-shadow: var(--umbra-3);
  display: grid; gap: .7rem; font-size: .9375rem;
}
.nota-limba .rand-butoane { display: flex; flex-wrap: wrap; gap: .5rem; }
.nota-limba button, .nota-limba a { font: 600 .875rem/1 var(--f-text); padding: .65em 1em; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none; background: var(--c-foaie); color: var(--c-cerneala); }
.nota-limba .secundar { background: transparent; color: var(--c-foaie); border: 1.5px solid color-mix(in srgb, var(--c-foaie) 50%, transparent); }

/* metrul: progresul derulării, ca un centimetru de croitor (doar pe ecrane mari) */
.metru { position: fixed; right: 0; top: 0; bottom: 0; width: 22px; z-index: 45; pointer-events: none; mix-blend-mode: difference; color: var(--c-alb-metru);
  background-image: repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 7.56px), repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 37.8px);
  background-size: 7px 100%, 14px 100%; background-repeat: repeat-y; background-position: right 0 top var(--metru-y, 0px), right 0 top var(--metru-y, 0px); opacity: .5; }
.metru span { position: absolute; right: 26px; top: 50%; font: 500 .625rem/1 var(--f-mono); letter-spacing: .08em; white-space: nowrap; transform: translateY(-50%); }
.metru::after { content: ""; position: absolute; right: 0; top: 50%; width: 22px; height: 2px; background: currentColor; }

/* =============================================================== MIȘCARE */
.rand { padding-block: .14em; margin-block: -.14em; }   /* masca nu taie Î, Ă, Ș (lecția SSER) */
.js-miscare .apare { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--e-iesire) var(--intarziere, 0ms), transform .7s var(--e-iesire) var(--intarziere, 0ms); }
.js-miscare .apare.vazut { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .banda-pista { animation: none; }
  @view-transition { navigation: none; }
}

/* =============================================================== ECRANE MICI */
@media (max-width: 1100px) {
  .antet-nav { display: none; }
  .meniu-buton { display: inline-block; }
}
@media (max-width: 900px) {
  .erou-grila, .congrese-grila, .lucrare-grila, .caz-erou-grila, .masina-grila, .caz-doua, .poveste-bloc, .persoane-grila { grid-template-columns: minmax(0, 1fr); }
  .evantai { height: 300px; }
  .index-rand { grid-template-columns: minmax(0, 1fr) auto; }
  .index-text, .index-cip { grid-column: 1; }
  .index-rand .sageata { grid-row: 1; grid-column: 2; }
  .pas { grid-template-columns: minmax(0, 1fr); }
  .pas-nr { grid-row: auto; }
  .portrete { grid-template-columns: minmax(0, 1fr); }
  .portret { min-height: 22rem; }
  .pret-rand { grid-template-columns: minmax(0, 1fr) auto; }
  .pret-rand > div { grid-column: 1 / -1; }
  .pret-cap { display: none; }
  .serviciu-rand a { grid-template-columns: minmax(0, 1fr); }
  .serviciu-rand h2 { grid-row: auto; }
  .include-lista { grid-template-columns: minmax(0, 1fr); }
  .dovada a { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .ani-lista li { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
  .poveste-bloc h2 { position: static; }
  .subsol-coloane { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paleta { gap: .5rem; }
  .congrese-cifra { font-size: clamp(9rem, 44vw, 14rem); }
}
@media (max-width: 760px) {
  .antet-cta { display: none; }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .bara-mobil {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; gap: .6rem;
    padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--c-foaie) 94%, transparent);
    box-shadow: 0 -10px 30px -18px rgb(25 25 25 / .45); transition: transform .4s var(--e-iesire);
  }
  .bara-mobil .buton { flex: 1; padding: .9em 1em; }
  .bara-wa { display: grid; place-items: center; padding: 0 1.1rem; border-radius: 999px; border: 1.5px solid var(--c-cerneala); text-decoration: none; font: 600 .9375rem/1 var(--f-text); color: var(--c-cerneala); }
  html.in-garderoba .bara-mobil { transform: translateY(120%); }
  .nota-limba { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .metru { display: none; }
  .sect { padding-block: var(--sp-8); }
  .erou { min-height: auto; }
  .erou-h1 { font-size: clamp(3.4rem, 17.5vw, 7rem); }
  .evantai { height: 230px; }
  .ev { width: 92px; margin-left: -46px; bottom: 0; }
  .final-h2 { font-size: clamp(3.6rem, 17vw, 6rem); }
  .cadru-film { width: 82vw; }
  .disp-tel { width: 26%; }
  .subsol-coloane { grid-template-columns: minmax(0, 1fr); }
  .persoana-tel { font-size: var(--step-2); }
}