/* =========================================================
   Metal Work Shape – stiluri
   Paleta: fier brut (grafit, oțel) plus lemn (chihlimbar, nuc).
   ========================================================= */

:root {
  --grafit: #1B1C1F;
  --grafit-2: #26282C;
  --otel: #9BA3AD;
  --otel-2: #C7CCD3;
  --lemn: #D89A3E;
  --lemn-2: #A96A24;
  --alb: #F6F4F0;                  /* alb cald, se potrivește cu lemnul */
  --piatra: #ECE6DD;               /* fundal cald pentru piesele decupate */
  --piatra-2: #E2D9CC;
  --wa: #25D366;                   /* verdele WhatsApp */
  --wa-2: #4BE385;
  --text: #2A2926;
  --text-2: #615C55;
  --linie: #E3DDD3;
  --granulatie: 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='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --font-titlu: "Archivo Black", "Arial Black", Impact, sans-serif;
  --font-text: "Barlow", "Segoe UI", Roboto, Arial, sans-serif;

  --latime: 1200px;
  --spatiu: clamp(1.25rem, 4vw, 2.5rem);
  --raza: 4px;                     /* colțuri aproape drepte: registru industrial */
}

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

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--alb);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 { font-family: var(--font-titlu); font-weight: 400; line-height: 1.08; margin: 0 0 .5em; color: var(--grafit); }
h1 { font-size: clamp(2.6rem, 6.5vw, 5rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); letter-spacing: -.015em; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
a { color: var(--lemn-2); }

.eticheta {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--lemn-2);
  margin-bottom: .9rem;
  display: flex; align-items: center; gap: .8rem;
}

.eticheta::before { content: ""; width: 28px; height: 2px; background: currentColor; flex-shrink: 0; }

:focus-visible { outline: 3px solid var(--lemn); outline-offset: 3px; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--grafit); color: #fff; padding: .6rem 1rem; z-index: 100; }

/* ---------- Butoane ---------- */
.btn {
  white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .7rem 1.5rem;
  font: 700 1rem/1.2 var(--font-text);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--grafit); background: var(--lemn);
  border: 2px solid var(--lemn); border-radius: var(--raza);
  text-decoration: none; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn:hover { background: #E8AB4F; border-color: #E8AB4F; }
.btn svg { width: 1.3em; height: 1.3em; fill: currentColor; }
.btn--mare { min-height: 56px; padding: .9rem 1.9rem; font-size: 1.05rem; }
.btn--mic { min-height: 42px; padding: .5rem 1.1rem; font-size: .92rem; }
.btn--contur { background: transparent; color: var(--alb); border-color: rgba(244,245,247,.5); }
.btn--contur:hover { background: var(--alb); color: var(--grafit); border-color: var(--alb); }
.btn--wa { background: var(--wa); border-color: var(--wa); color: #0B2E17; }
.btn--wa:hover { background: var(--wa-2); border-color: var(--wa-2); }

/* ---------- Banda UE, sub bara de meniu ---------- */
.banda-ue { background: #fff; border-bottom: 1px solid var(--linie); }
.banda-ue__in {
  max-width: var(--latime); margin: 0 auto;
  padding: 1rem var(--spatiu);
  display: flex; align-items: center; gap: clamp(1rem, 4vw, 3rem);
}
.banda-ue__ue { display: block; flex-shrink: 0; }
.banda-ue__ue img { width: 220px; height: auto; display: block; }
.banda-ue__emblema { width: 62px; height: auto; flex-shrink: 0; margin-left: auto; }

/* ---------- Mențiunea de finanțare, în subsol ---------- */
.ue-subsol { border-top: 1px solid #34373C; }
.ue-subsol__in {
  max-width: var(--latime); margin: 0 auto;
  padding: 1.6rem var(--spatiu) 2rem;
  display: flex; align-items: flex-start; gap: 1.2rem;
}
.ue-subsol img { width: 64px; height: 43px; flex-shrink: 0; }
.ue-subsol p { font-size: .92rem; color: var(--otel); margin: 0 0 .4rem; max-width: 80ch; }
.ue-subsol a { color: var(--otel-2); }

/* ---------- Antet ---------- */
.antet {
  position: sticky; top: 0; z-index: 50;
  background: var(--grafit);
  border-bottom: 1px solid #34373C;
}
.antet__in {
  max-width: var(--latime); margin: 0 auto;
  padding: .55rem var(--spatiu);
  display: flex; align-items: center; gap: 1.1rem;
}
/* doar emblema (roata cu dălțile și munții), întreagă, fără text lângă ea */
.marca { margin-right: auto; display: block; }
.marca img { display: block; width: auto; height: 56px; }

.antet__wa {
  display: grid; place-items: center; flex-shrink: 0;
  width: 42px; height: 42px; border-radius: var(--raza);
  border: 2px solid rgba(37,211,102,.55); color: var(--wa);
  transition: background-color .2s, color .2s, border-color .2s;
}
.antet__wa svg { width: 22px; height: 22px; fill: currentColor; }
.antet__wa:hover { background: var(--wa); border-color: var(--wa); color: var(--grafit); }

.meniu { display: flex; gap: 1.3rem; }
.meniu a {
  color: var(--otel-2); text-decoration: none;
  font-weight: 600; font-size: .95rem;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  padding: .4rem 0; border-bottom: 2px solid transparent;
}
.meniu a:hover, .meniu a.activ { color: #fff; border-bottom-color: var(--lemn); }

.burger { display: none; width: 46px; height: 46px; background: none; border: 0; padding: 10px; cursor: pointer; }
.burger span { display: block; height: 2.5px; margin: 5px 0; background: var(--otel-2); transition: transform .25s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Hero ----------
   Straturi: poza bușteanului (stinsă) → degradeu → text și masa decupată. */
.hero { position: relative; background: var(--grafit); color: var(--alb); overflow: hidden; isolation: isolate; }
.hero__fundal {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 30% 50%; opacity: .34;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 70% at 72% 52%, rgba(216,154,62,.24), transparent 70%),
    linear-gradient(90deg, rgba(27,28,31,.96) 0%, rgba(27,28,31,.86) 38%, rgba(27,28,31,.55) 70%, rgba(27,28,31,.72) 100%),
    linear-gradient(0deg, rgba(27,28,31,1) 0%, rgba(27,28,31,0) 30%);
}
.hero__in {
  max-width: var(--latime); margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 6rem) var(--spatiu) clamp(2.5rem, 5vw, 3.5rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center; gap: clamp(1.5rem, 4vw, 3rem);
}
.hero h1 { color: #fff; margin-bottom: .35em; font-size: clamp(2.4rem, 4.8vw, 3.9rem); }
.hero__lead { font-size: clamp(1.1rem, 1.7vw, 1.3rem); color: var(--otel-2); max-width: 44ch; margin-bottom: 2rem; }
.actiuni { display: flex; flex-wrap: wrap; gap: .8rem; }

.hero__produs { position: relative; margin: 0 -2% 0 0; }
.hero__produs img {
  width: 100%;
  filter: drop-shadow(0 34px 34px rgba(0,0,0,.6)) drop-shadow(0 8px 10px rgba(0,0,0,.35));
}
.hero__produs figcaption {
  margin-top: .6rem; padding-left: 12%;
  font-size: .9rem; font-weight: 600; letter-spacing: .04em; color: var(--otel-2);
}
.hero__produs figcaption::before { content: ""; display: inline-block; vertical-align: middle; width: 36px; height: 2px; margin: -2px .7rem 0 0; background: var(--lemn); }
.hero__produs figcaption span { color: var(--otel); font-weight: 500; }

.hero__puncte {
  position: relative;
  max-width: var(--latime); margin: 0 auto;
  padding: 0 var(--spatiu) clamp(2.5rem, 5vw, 3.5rem);
  list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.hero__puncte::before { content: ""; position: absolute; top: 0; left: var(--spatiu); right: var(--spatiu); border-top: 1px solid #34373C; }
.hero__puncte li { padding: 1.4rem 1.4rem; border-left: 1px solid #34373C; }
.hero__puncte li:first-child { border-left: 0; padding-left: 0; }
.hero__puncte strong { display: block; font-family: var(--font-titlu); font-size: 1.15rem; color: var(--lemn); letter-spacing: .02em; }
.hero__puncte span { color: var(--otel); font-size: .98rem; }

/* ---------- Secțiuni ---------- */
.sectiune { max-width: var(--latime); margin: 0 auto; padding: clamp(3.5rem, 8vw, 6rem) var(--spatiu); }
.sectiune__cap { max-width: 640px; margin-bottom: 2.6rem; }
.sectiune__cap p:last-child { color: var(--text-2); }

/* ---------- Servicii ---------- */
.servicii-sec__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; }
.servicii-sec__cap { position: sticky; top: 120px; margin-bottom: 0; }
.servicii-sec__cap h2 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); }
.link-sageata {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: .4rem;
  font-weight: 700; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--grafit); text-decoration: none;
  border-bottom: 2px solid var(--lemn); padding-bottom: .2rem;
}
.link-sageata span { transition: transform .25s ease; }
.link-sageata:hover span { transform: translateX(4px); }

.servicii { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
.servicii li { background: var(--alb); padding: 2rem 1.8rem 2.1rem; transition: background-color .2s; }
.servicii li:hover { background: #fff; }
.servicii__ico {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin-bottom: 1.2rem;
  border: 1px solid var(--linie); border-radius: 50%;
  color: var(--lemn-2); background: #fff;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.servicii__ico svg { width: 30px; height: 30px; stroke-width: 1.4; }
.servicii li:hover .servicii__ico { background: var(--grafit); border-color: var(--grafit); color: var(--lemn); }
.servicii h3 { margin-bottom: .45rem; }
.servicii p { color: var(--text-2); margin: 0; font-size: 1.02rem; }


/* ---------- Lucrări: piese decupate pe fundal cald ---------- */
.lucrari { background: var(--piatra); }
.galerie { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 290px; grid-auto-flow: dense; gap: 14px; }
.galerie__item {
  margin: 0; position: relative; overflow: hidden;
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  border-radius: 6px;
  background: radial-gradient(120% 95% at 50% 32%, #FFFEFC 0%, #F6F2EC 55%, #EAE2D6 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(60,40,20,.08);
  transition: box-shadow .35s ease;
}
.galerie__item:hover { box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 18px 40px -18px rgba(60,40,20,.35); }
.galerie__item--mare { grid-column: span 2; grid-row: span 2; }
.galerie__item button {
  all: unset; box-sizing: border-box; display: block;
  width: 100%; height: 100%; min-height: 0;
  padding: 1.4rem 1.4rem .4rem; cursor: zoom-in;
}
.galerie__item--mare button { padding: 2.2rem 2.4rem .6rem; }
.galerie__item button:focus-visible { outline: 3px solid var(--lemn); outline-offset: -3px; }
.galerie__item img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 14px 12px rgba(70,40,12,.24)) drop-shadow(0 3px 3px rgba(70,40,12,.18));
  transition: transform .55s cubic-bezier(.2, .7, .3, 1);
}
.galerie__item:hover img { transform: translateY(-6px) scale(1.035); }
.galerie__item figcaption {
  padding: .7rem 1.1rem 1rem;
  display: flex; flex-direction: column; gap: .1rem;
  line-height: 1.3; pointer-events: none;
}
.galerie__item figcaption strong { font-family: var(--font-titlu); font-weight: 400; font-size: .98rem; color: var(--grafit); letter-spacing: .01em; }
.galerie__item figcaption span { font-size: .92rem; color: var(--text-2); }
.galerie__item--mare figcaption { padding: .9rem 1.6rem 1.4rem; }
.galerie__item--mare figcaption strong { font-size: 1.3rem; }
.galerie__item--mare figcaption span { font-size: 1rem; }

.lucrari__cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem;
  margin-top: 2.2rem; padding: 1.6rem 1.8rem;
  background: var(--grafit); border-radius: 6px; color: var(--otel-2);
}
.lucrari__cta p { margin: 0; max-width: 60ch; font-size: 1.08rem; }
.lucrari__cta strong { color: #fff; font-family: var(--font-titlu); font-weight: 400; margin-right: .35rem; }
.lucrari__cta .btn svg { width: 1.35em; height: 1.35em; }

/* ---------- Atelier (fundal închis) ---------- */
.atelier { background: var(--grafit) var(--granulatie); color: var(--otel-2); }
.atelier__in { max-width: var(--latime); margin: 0 auto; padding: clamp(3.5rem, 8vw, 6rem) var(--spatiu); }
.atelier__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.atelier__foto { position: relative; margin-bottom: 3rem; }
.atelier__principal { width: 88%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--raza); }
.atelier__detaliu {
  position: absolute; right: 0; bottom: -3rem;
  width: 36%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--raza);
  outline: 6px solid var(--grafit);
  box-shadow: 0 24px 40px -12px rgba(0,0,0,.6);
}
.atelier h2 { color: #fff; }
.atelier__text p { color: var(--otel); }
.atelier .eticheta { color: var(--lemn); }
.bife { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.bife li { position: relative; padding-left: 2rem; margin-bottom: .7rem; color: var(--otel-2); }
.bife li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 11px; height: 11px;
  background: var(--lemn);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}

/* ---------- De la buștean la piesă ---------- */
.drum { margin-top: clamp(4rem, 9vw, 6.5rem); padding-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid #34373C; }
.drum__cap { margin-bottom: 1.8rem; }
.drum__cap h3 { color: #fff; font-size: clamp(1.5rem, 2.8vw, 2.1rem); margin: 0; }
.drum__pasi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.drum__pasi li { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--raza); background: var(--grafit-2); }
.drum__pasi img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .3, 1); }
.drum__pasi li:hover img { transform: scale(1.05); }
.drum__pasi li::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,16,18,0) 35%, rgba(15,16,18,.55) 60%, rgba(15,16,18,.94) 100%);
  pointer-events: none;
}
.drum__text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 1.2rem 1.2rem 1.3rem; }
.drum__nr { display: block; font-family: var(--font-titlu); font-size: 1.05rem; color: var(--lemn); margin-bottom: .35rem; }
.drum__text h4 { color: #fff; font-size: 1.12rem; margin-bottom: .35rem; }
.drum__text p { color: var(--otel-2); font-size: .95rem; line-height: 1.45; margin: 0; }

/* ---------- Proces (fundal deschis) ---------- */
.proces { background: var(--piatra); }
.proces__in { max-width: var(--latime); margin: 0 auto; padding: clamp(3.5rem, 8vw, 6rem) var(--spatiu); }
/* Linie de timp: cercuri numerotate pe o linie; linia chihlimbar se trage la derulare. */
.pasi { --gol: clamp(1.2rem, 3vw, 2.5rem); list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gol); position: relative; }
/* linia pleacă din centrul primului cerc și se oprește în centrul ultimului */
.pasi::before { content: ""; position: absolute; left: 28px; right: calc((100% - 3 * var(--gol)) / 4 - 28px); top: 27px; height: 2px; background: var(--piatra-2); }
.pasi li { position: relative; }
.pasi h3 { margin-bottom: .45rem; }
.pasi p { color: var(--text-2); font-size: 1rem; margin: 0; max-width: 30ch; }
.pasi__nr {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 56px; height: 56px; margin-bottom: 1.4rem;
  border-radius: 50%; border: 2px solid var(--lemn); background: var(--piatra);
  font-family: var(--font-titlu); font-size: 1.05rem; line-height: 1; color: var(--lemn-2);
}

/* ---------- Contact ---------- */
.contact { background: var(--grafit) var(--granulatie); color: var(--otel-2); }
.contact__in {
  max-width: var(--latime); margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 6rem) var(--spatiu);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem);
}
.contact h2 { color: #fff; }
.contact .eticheta { color: var(--lemn); }
.contact__text > p { max-width: 42ch; }
.contact__text .btn--wa { margin: .4rem 0 0; }
.contact__text .btn--wa svg { width: 1.4em; height: 1.4em; }
.contact__sau { margin: 1.8rem 0 0; font-size: .95rem; color: var(--otel); }

.telefon {
  display: inline-block;
  font-family: var(--font-titlu); font-size: clamp(2rem, 4.5vw, 2.9rem);
  color: #fff; text-decoration: none; line-height: 1.1;
  margin: .2rem 0 1.8rem;
  border-bottom: 4px solid var(--lemn);
}
.telefon:hover { color: var(--lemn); }

.info { display: grid; gap: 1.2rem; margin: 0; }
.info dt { font-weight: 700; color: #fff; letter-spacing: .06em; text-transform: uppercase; font-size: .85rem; }
.info dd { margin: 0; }
.info a { color: var(--otel-2); }

/* ---------- Formular ---------- */
.formular { background: var(--grafit-2); padding: clamp(1.6rem, 3vw, 2.2rem); border-radius: var(--raza); border: 1px solid #3A3D43; }
.formular h3 { color: #fff; margin-bottom: 1.2rem; display: flex; align-items: center; gap: .6rem; }
.formular h3 svg { width: 1.3em; height: 1.3em; fill: var(--wa); flex-shrink: 0; }
.formular .optional { font-weight: 400; color: var(--otel); }
.formular label { display: block; font-weight: 600; font-size: .92rem; color: var(--otel-2); margin: 0 0 .35rem; }
.formular input, .formular select, .formular textarea {
  width: 100%; margin-bottom: 1.1rem;
  padding: .75rem .9rem;
  font: 400 1rem var(--font-text); color: #fff;
  background: #1F2124; border: 1px solid #3F434A; border-radius: var(--raza);
}
.formular textarea { resize: vertical; }
.formular input:focus, .formular select:focus, .formular textarea:focus { outline: 2px solid var(--lemn); outline-offset: 0; border-color: var(--lemn); }
.formular input[aria-invalid="true"] { border-color: #E0603F; }
.formular .btn { width: 100%; }
.formular .btn svg { width: 1.35em; height: 1.35em; }

/* previzualizarea mesajului, în stilul unei conversații WhatsApp */
.wa-previz {
  margin: .2rem 0 1.2rem; padding: .8rem .9rem 1rem;
  background: #0B141A; border-radius: var(--raza);
  border: 1px solid #202C33;
}
.wa-previz__eticheta { display: block; margin-bottom: .55rem; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8696A0; }
.wa-previz__bula {
  position: relative; margin: 0 0 0 auto; max-width: 94%; width: fit-content;
  padding: .55rem .8rem .6rem; border-radius: 8px 0 8px 8px;
  background: #005C4B; color: #E9EDEF;
  font-size: .95rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
}
.wa-previz__bula::after {
  content: ""; position: absolute; top: 0; right: -8px; width: 0; height: 0;
  border-top: 10px solid #005C4B; border-right: 8px solid transparent;
}
.formular__nota { font-size: .9rem; color: var(--otel); margin: .9rem 0 0; }

/* ---------- Subsol ---------- */
.subsol { background: #141517; color: var(--otel); }
.subsol__in {
  max-width: var(--latime); margin: 0 auto;
  padding: clamp(3rem, 6vw, 4.5rem) var(--spatiu) 2.5rem;
  display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1.2fr; gap: 2.5rem;
}
.subsol__logo { width: 220px; margin-bottom: 1.1rem; }
.subsol p { margin: 0; font-size: 1rem; max-width: 34ch; }
.subsol__col h4 {
  font-family: var(--font-text); font-weight: 700; font-size: .8rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--lemn);
  margin: .4rem 0 1.1rem;
}
.subsol__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .98rem; }
.subsol a { color: var(--otel-2); text-decoration: none; transition: color .2s; }
.subsol a:hover { color: #fff; }
.subsol__jos {
  width: min(calc(100% - 2 * var(--spatiu)), calc(var(--latime) - 2 * var(--spatiu)));
  margin: 0 auto; padding: 1.3rem 0;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem;
  border-top: 1px solid #2A2C30;
}
.subsol__jos p { font-size: .9rem; max-width: none; color: #7C838C; }
.subsol .ue-subsol { border-top-color: #2A2C30; }
.subsol .ue-subsol p { max-width: 80ch; font-size: .92rem; color: var(--otel); }

/* ---------- Buton fix pe mobil ---------- */
.apel-fix {
  display: none; position: fixed; left: 1rem; right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 40;
  gap: .6rem;
  transition: transform .3s, opacity .3s;
}
.apel-fix a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 56px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--grafit); text-decoration: none;
  border-radius: var(--raza);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.apel-fix__suna { background: var(--lemn); }
.apel-fix__wa { background: var(--wa); color: #0B2E17 !important; }
.apel-fix svg { width: 1.3em; height: 1.3em; fill: currentColor; }
.apel-fix.ascuns { transform: translateY(160%); opacity: 0; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: radial-gradient(60% 60% at 50% 45%, #33281B, #0E0F11 75%);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: min(1200px, 100%); }
.lightbox img {
  max-height: 72vh; width: auto; margin: 0 auto;
  filter: drop-shadow(0 30px 30px rgba(0,0,0,.55));
}
.lightbox figcaption { color: #fff; text-align: center; margin-top: 1rem; font-weight: 600; }
.lightbox figcaption span { display: block; color: var(--otel); font-weight: 500; font-size: .95rem; }
.lightbox button { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; width: 54px; height: 54px; border-radius: 50%; font-size: 2rem; line-height: 1; cursor: pointer; }
.lightbox button:hover { background: rgba(255,255,255,.25); }
.lightbox__inchide { top: 1rem; right: 1rem; }
.lightbox__nav--stanga { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav--dreapta { right: 1rem; top: 50%; transform: translateY(-50%); }

/* ---------- Antet pe două coloane (titlu | text) ---------- */
.cap-lat { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 4rem; align-items: end; }
.cap-lat h2 { margin: 0; }
.cap-lat > p { margin: 0; max-width: 46ch; }

/* ---------- Meniu: acțiunile apar doar în meniul de pe telefon ---------- */
.meniu__actiuni { display: none; }

/* ---------- Galerie: semnul că piesa se deschide mărită ---------- */
.galerie__zoom {
  position: absolute; top: .75rem; right: .75rem; z-index: 1;
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: rgba(255,255,255,.9); color: var(--grafit);
  box-shadow: 0 2px 8px rgba(60,40,20,.15);
  opacity: 0; transform: scale(.8);
  transition: opacity .25s ease, transform .25s ease, background-color .25s ease, color .25s ease;
  pointer-events: none;
}
.galerie__zoom svg { width: 15px; height: 15px; }
.galerie__item:hover .galerie__zoom,
.galerie__item button:focus-visible .galerie__zoom { opacity: 1; transform: none; background: var(--grafit); color: var(--lemn); }
@media (hover: none) {
  .galerie__zoom { opacity: 1; transform: none; width: 30px; height: 30px; top: .55rem; right: .55rem; }
}

/* ---------- Servicii: „Cere ofertă” și cartonașul pentru alte idei ---------- */
/* cartonașele sunt coloane flex, ca „Cere ofertă” să stea aliniat jos pe tot rândul */
.servicii li { display: flex; flex-direction: column; align-items: flex-start; }
.servicii__cta {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: 1.1rem;
  font-weight: 700; font-size: .84rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--lemn-2); text-decoration: none;
}
.servicii__cta span { transition: transform .25s ease; }
.servicii li:hover .servicii__cta span, .servicii__cta:focus-visible span { transform: translateX(4px); }
.servicii .servicii__alt, .servicii .servicii__alt:hover { background: var(--grafit) var(--granulatie); }
.servicii__alt h3 { color: #fff; }
.servicii__alt p { color: var(--otel); }
.servicii__alt .btn { margin-top: 1.3rem; }
.servicii__alt .btn svg { width: 1.35em; height: 1.35em; }

/* ---------- De la buștean: indiciu de glisare, doar pe telefon ---------- */
.drum__indiciu { display: none; align-items: center; gap: .4rem; margin: .7rem 0 0; font-size: .85rem; font-weight: 600; color: var(--otel); }
.drum__indiciu span { display: inline-block; animation: glisare 1.6s ease-in-out infinite; }
@keyframes glisare { 0%, 100% { transform: none; } 50% { transform: translateX(6px); } }

/* ---------- Lightbox: numărătoare și cerere pentru o piesă asemănătoare ---------- */
.lightbox__actiuni { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem 1.2rem; margin-top: 1.1rem; }
.lightbox__nr { color: var(--otel); font-size: .9rem; font-weight: 600; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.lightbox__cta svg { width: 1.3em; height: 1.3em; }

/* ---------- Formular: tipul ales dintr-un serviciu clipește scurt ---------- */
.formular select.ales { border-color: var(--lemn); animation: evidentiere 1.1s ease .5s 2; }
@keyframes evidentiere { 0% { box-shadow: 0 0 0 0 rgba(216,154,62,.65); } 100% { box-shadow: 0 0 0 10px rgba(216,154,62,0); } }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1100px) {
  .servicii-sec__grid { grid-template-columns: 1fr; }
  .servicii-sec__cap { position: static; }
  .servicii { grid-template-columns: repeat(2, 1fr); }
  .subsol__in { grid-template-columns: 1fr 1fr; }
  .galerie { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 260px; }
  .drum__pasi { grid-template-columns: repeat(2, 1fr); }
  .drum__pasi li { aspect-ratio: 4 / 3; }
  .meniu { gap: 1.1rem; }
  .marca img { height: 50px; }
}

@media (max-width: 880px) {
  .burger { display: block; }
  .antet__tel { display: none; }
  .antet__wa { width: 40px; height: 40px; }
  .meniu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--grafit); border-bottom: 1px solid #34373C;
    padding: .4rem var(--spatiu) 1.2rem; display: none;
  }
  .meniu.deschis { display: flex; }
  .meniu a { padding: .9rem 0; font-size: 1.05rem; border-bottom: 1px solid #2E3136; }
  .meniu__actiuni { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1.1rem; }
  .meniu .meniu__actiuni .btn { padding: .75rem .8rem; font-size: .9rem; min-height: 48px; border: 2px solid; }
  .meniu .meniu__actiuni .btn::after { display: none; }
  .meniu .meniu__actiuni .btn--wa { border-color: var(--wa); color: #0B2E17; }
  .meniu .meniu__actiuni .btn--contur { border-color: rgba(244,245,247,.45); color: #fff; }
  .hero__lead { font-size: 1.08rem; }
  .cap-lat { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .atelier__grid { grid-template-columns: 1fr; }
  .contact__in { grid-template-columns: 1fr; }
  .apel-fix { display: flex; }
  .servicii { grid-template-columns: repeat(2, 1fr); }
  /* linia de timp devine verticală */
  .pasi { grid-template-columns: 1fr; gap: 2rem; }
  .pasi::before, .pasi::after { left: 27px !important; right: auto !important; top: 28px; bottom: 28px; width: 2px; height: auto !important; }
  .pasi li { padding-left: 80px; min-height: 56px; }
  .pasi__nr { position: absolute; left: 0; top: 0; margin: 0; }
  .pasi h3 { padding-top: .9rem; }
  .subsol__jos { padding-bottom: 6.5rem; }
}

/* Hero pe telefon: produsul urcă imediat sub titlu, ca să se vadă din primul ecran.
   .hero__text devine „transparent” pentru layout, iar copiii lui se ordonează cu figura. */
@media (max-width: 760px) {
  .hero__in { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-top: 2.4rem; padding-bottom: 1.2rem; }
  .hero__text { display: contents; }
  .hero__text .eticheta { order: 1; }
  .hero__text h1 { order: 2; margin-bottom: .2em; }
  .hero__produs { order: 3; width: 100%; max-width: 520px; margin: 0 auto .6rem; }
  .hero__lead { order: 4; margin-bottom: 1.4rem; }
  .actiuni { order: 5; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
  .actiuni .btn { min-width: 0; padding: .85rem .6rem; font-size: .92rem; letter-spacing: .04em; }
  .hero__produs figcaption { padding-left: 0; margin-top: .2rem; font-size: .82rem; }
  .hero::before {
    background:
      radial-gradient(80% 30% at 50% 45%, rgba(216,154,62,.22), transparent 70%),
      linear-gradient(180deg, rgba(27,28,31,.9) 0%, rgba(27,28,31,.72) 50%, rgba(27,28,31,.95) 100%);
  }
}
@media (max-width: 460px) {
  .hero__produs figcaption span { display: none; }
}
@media (max-width: 360px) {
  .actiuni { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .marca img { height: 44px; }
  /* banda UE: siglele mai mici, ca să încapă pe un rând */
  .banda-ue__in { padding: .6rem var(--spatiu); gap: 1rem; justify-content: space-between; }
  .banda-ue__ue img { width: 160px; }
  .banda-ue__emblema { width: 46px; margin-left: 0; }
  .ue-subsol__in { flex-direction: column; gap: .8rem; }
  .hero__puncte li { padding: 1rem .7rem 0; }
  .hero__puncte strong { font-size: .88rem; }
  .hero__puncte span { display: block; font-size: .8rem; line-height: 1.35; margin-top: .2rem; }
  .servicii { grid-template-columns: 1fr; }
  .servicii li { padding: 1.5rem 1.4rem 1.6rem; display: grid; grid-template-columns: 52px 1fr; column-gap: 1.1rem; }
  .servicii__ico { grid-row: span 3; margin: 0; }
  .servicii__cta { grid-column: 2; }
  .servicii .servicii__alt { display: block; }
  .servicii__alt .btn { width: 100%; }
  .servicii h3 { align-self: end; margin-bottom: .25rem; }
  .lucrari__cta { padding: 1.4rem; }
  .lucrari__cta .btn { width: 100%; }
  .subsol__in { grid-template-columns: 1fr; gap: 2rem; }
  .galerie { grid-auto-rows: 210px; gap: 10px; }
  .galerie__item button { padding: .9rem .9rem .2rem; }
  .galerie__item--mare button { padding: 1.4rem 1.4rem .4rem; }
  .galerie__item figcaption { padding: .5rem .8rem .8rem; }
  .galerie__item figcaption strong { font-size: .88rem; }
  .galerie__item figcaption span { font-size: .82rem; }
  .galerie__item--mare figcaption strong { font-size: 1.1rem; }
  .atelier__principal { width: 100%; }
  .atelier__detaliu { width: 40%; right: 4%; bottom: -2.2rem; outline-width: 4px; }
  .atelier__foto { margin-bottom: 2.2rem; }
  /* pașii devin o bandă care se derulează orizontal, cu opriri pe fiecare poză */
  .drum__pasi {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 0 calc(var(--spatiu) * -1); padding: 0 var(--spatiu) .4rem;
    scroll-padding: 0 var(--spatiu); scrollbar-width: none;
  }
  .drum__pasi::-webkit-scrollbar { display: none; }
  .drum__pasi li { aspect-ratio: 4 / 5; scroll-snap-align: start; }
  .drum__indiciu { display: flex; }
  .lightbox__nav { top: auto !important; bottom: 1.5rem; transform: none !important; }
  .lightbox img { max-height: 56vh; }
  .lightbox__actiuni { margin-bottom: 4.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* deschiderea are propria variantă simplă (vezi „.intro-simpla”), deci o lăsăm în afara regulii */
  *:not(.intro):not(.intro *), *:not(.intro):not(.intro *)::before, *:not(.intro):not(.intro *)::after { animation: none !important; transition: none !important; }
}

/* =========================================================
   Mișcare
   O singură secvență la încărcare, în hero. În rest, mișcarea
   răspunde la ce face vizitatorul: derulare, hover, clic.
   Totul se oprește dacă sistemul cere mai puțină mișcare.
   ========================================================= */

/* ---------- Bara de progres a citirii ---------- */
.progres {
  position: absolute; left: 0; bottom: -1px;
  height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--lemn-2), var(--lemn));
  transform: scaleX(0); transform-origin: left;
  will-change: transform;
}

/* ---------- Antetul se strânge la derulare ---------- */
.antet { transition: padding .35s ease, background-color .35s ease; }
.antet__in { transition: padding .35s ease; }
.marca img { transition: height .35s ease; }
.antet.micsorat { background: rgba(27, 28, 31, .97); backdrop-filter: blur(6px); }
.antet.micsorat .antet__in { padding-top: .3rem; padding-bottom: .3rem; }
.antet.micsorat .marca img { height: 44px; }
@media (max-width: 620px) { .antet.micsorat .marca img { height: 38px; } }

/* ---------- Sublinierea din meniu ---------- */
.meniu a { position: relative; border-bottom: 0; }
.meniu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--lemn);
  transform: scaleX(0); transform-origin: right;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.meniu a:hover::after,
.meniu a.activ::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Secvența de intrare din hero ---------- */
/* Poza de fundal pornește puțin mai mare și se așază; după aceea rămâne
   cu 12% marjă, din care se mișcă ușor la derulare. */
.hero__fundal { transform: scale(1.22); transition: transform 1.7s cubic-bezier(.2, .7, .3, 1); will-change: transform; }
.intrat .hero__fundal { transform: scale(1.12); }
.asezat .hero__fundal { transition: none; }

html:not(.fara-js) [data-intro] > * { opacity: 0; transform: translateY(14px); }
html:not(.fara-js) .intrat [data-intro] > * {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1);
}
.intrat [data-intro] > *:nth-child(1) { transition-delay: .10s; }
.intrat [data-intro] > *:nth-child(2) { transition-delay: .20s; }
.intrat [data-intro] > *:nth-child(3) { transition-delay: .30s; }
.intrat [data-intro] > *:nth-child(4) { transition-delay: .40s; }

/* Masa intră din dreapta și se așază; eticheta de sub ea apare după. */
html:not(.fara-js) .hero__produs img { opacity: 0; transform: translate3d(40px, 10px, 0) rotate(1.5deg); }
html:not(.fara-js) .intrat .hero__produs img {
  opacity: 1; transform: none;
  transition: opacity .9s ease .25s, transform 1.3s cubic-bezier(.2, .7, .3, 1) .25s;
}
html:not(.fara-js) .hero__produs figcaption { opacity: 0; }
html:not(.fara-js) .intrat .hero__produs figcaption { opacity: 1; transition: opacity .6s ease 1s; }
.hero__produs { will-change: transform; }

html:not(.fara-js) .hero__puncte li { opacity: 0; transform: translateY(14px); }
html:not(.fara-js) .intrat .hero__puncte li {
  opacity: 1; transform: none;
  transition: opacity .6s ease .55s, transform .6s cubic-bezier(.2, .7, .3, 1) .55s;
}
.intrat .hero__puncte li:nth-child(2) { transition-delay: .65s; }
.intrat .hero__puncte li:nth-child(3) { transition-delay: .75s; }

/* ---------- Apariția la derulare ---------- */
html:not(.fara-js) [data-apare] { opacity: 0; transform: translateY(18px); }
html:not(.fara-js) [data-apare].apare {
  opacity: 1; transform: none;
  transition: opacity .65s ease, transform .65s cubic-bezier(.2, .7, .3, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
/* umbra de hover a cartonașelor nu așteaptă decalajul de apariție */
html:not(.fara-js) .galerie__item[data-apare].apare {
  transition: opacity .65s ease calc(var(--i, 0) * 70ms),
              transform .65s cubic-bezier(.2, .7, .3, 1) calc(var(--i, 0) * 70ms),
              box-shadow .35s ease;
}

/* Piesele din galerie: pornesc puțin mai jos și se așază pe „raft”.
   Nu folosim clip-path aici: ar micșora caseta la zero, iar observatorul
   de derulare n-ar mai considera-o vizibilă și nu s-ar declanșa nimic. */
html:not(.fara-js) .galerie__item[data-apare]:not(.apare) img { transform: translateY(16px) scale(.97); }

/* Pozele din „De la buștean la piesă” pornesc mai mari și se așază în ramă. */
html:not(.fara-js) .drum__pasi li[data-apare]:not(.apare) img { transform: scale(1.1); }

/* ---------- Pașii de lucru: linia care se trage ---------- */
.pasi { position: relative; }
.pasi::after {
  content: ""; position: absolute; left: 28px; right: calc((100% - 3 * var(--gol)) / 4 - 28px); top: 27px;
  height: 2px;
  background: var(--lemn);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.4s cubic-bezier(.3, .8, .3, 1) .15s;
}
.pasi.apare::after { transform: scaleX(1); }
.pasi__nr { transition: background-color .3s ease, color .3s ease; }
.pasi li:hover .pasi__nr { background: var(--lemn); color: var(--grafit); }
@media (max-width: 880px) {
  .pasi::after { transform: scaleY(0); transform-origin: top; }
  .pasi.apare::after { transform: scaleY(1); }
}

/* ---------- Pozele se aprind după ce se încarcă ---------- */
img[data-fade] { opacity: 0; transition: opacity .6s ease; }
img[data-fade].incarcat { opacity: 1; }
.galerie__item img[data-fade] { transition: opacity .6s ease, transform .55s cubic-bezier(.2, .7, .3, 1); }
.drum__pasi img[data-fade] { transition: opacity .6s ease, transform .8s cubic-bezier(.2, .7, .3, 1); }

/* ---------- Cartonașele de servicii ---------- */
.servicii li { position: relative; transition: background-color .25s ease, transform .25s ease; }
.servicii li::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--lemn);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.servicii li:hover::before { transform: scaleY(1); transform-origin: top; }

/* ---------- Lightbox: deschidere și schimbarea pozei ---------- */
.lightbox { opacity: 0; transition: opacity .28s ease; }
.lightbox.vizibil { opacity: 1; }
.lightbox figure { transform: scale(.94); transition: transform .32s cubic-bezier(.2, .8, .3, 1); }
.lightbox.vizibil figure { transform: scale(1); }
.lightbox img { transition: opacity .2s ease; }
.lightbox.schimba img { opacity: 0; }

/* ---------- Formular ---------- */
.eroare {
  margin: -.7rem 0 .9rem; font-size: .9rem; font-weight: 600;
  color: #F0A08A;
}
.formular .btn { transition: background-color .2s ease, color .2s ease, opacity .2s ease; }
.formular .btn[data-trimite] { opacity: .75; pointer-events: none; }

/* ---------- Butonul fix de pe telefon ---------- */
.apel-fix { transition: transform .35s cubic-bezier(.2, .8, .3, 1), opacity .3s ease; }

@media (prefers-reduced-motion: reduce) {
  .hero__fundal { transform: scale(1) !important; transition: none !important; }
  html:not(.fara-js) [data-intro] > *,
  html:not(.fara-js) .hero__puncte li,
  html:not(.fara-js) .hero__produs img,
  html:not(.fara-js) .hero__produs figcaption,
  html:not(.fara-js) [data-apare],
  img[data-fade] {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
  .pasi::after { transform: none !important; }
  .progres { display: none; }
  .lightbox, .lightbox figure { opacity: 1 !important; transform: none !important; }
}

/* =========================================================
   Deschiderea paginii
   Rulează doar când <html> are clasa „cu-intro” (o pune scriptul din <head>).
   Straturile pornesc ascunse; clasa „.porneste” le dă drumul, „.iese” deschide ușile.
   ========================================================= */
.intro { display: none; }
html.cu-intro { overflow: hidden; }
html.cu-intro .intro {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 1000;
  --roata-x: 49.68%; --roata-y: 49.87%;      /* centrul roții în straturile din img/intro */
}
html.cu-intro .marca img { opacity: 0; }      /* emblema din antet apare când aterizează cea animată */

/* cele două uși formează fundalul; la final alunecă spre margini */
.intro__usa {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  background:
    radial-gradient(120% 70% at var(--x) 46%, rgba(216,154,62,.13), transparent 60%),
    var(--granulatie),
    var(--grafit);
  transition: transform .8s cubic-bezier(.77, 0, .18, 1) .22s;
}
.intro__usa--st { left: 0; --x: 100%; }
.intro__usa--dr { right: 0; --x: 0%; }
/* îmbinarea dintre uși: o linie chihlimbar care se aprinde înainte de deschidere */
.intro::after {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -.5px;
  background: linear-gradient(transparent, var(--lemn) 30%, var(--lemn) 70%, transparent);
  transform: scaleY(0); opacity: 0;
}

.intro__scena {
  position: relative; z-index: 1;
  width: min(84vw, 620px);
  display: flex; flex-direction: column; align-items: center;
  margin-top: -4vh;
}
.intro__embleme {
  position: relative; width: 100%; aspect-ratio: 957 / 384;
  transform-origin: 50% 50%;
  transition: transform .7s cubic-bezier(.7, 0, .2, 1) .08s;
}
.intro__embleme img { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro__lumina {
  position: absolute; left: var(--roata-x); top: var(--roata-y);
  width: 62%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(232,171,79,.30), rgba(216,154,62,.08) 60%, transparent);
  opacity: 0;
}
.intro__roata, .intro__dalta, .intro__lumina { transform-origin: var(--roata-x) var(--roata-y); }
.intro__roata { filter: drop-shadow(0 10px 18px rgba(0,0,0,.55)); }

.intro__nume { position: relative; width: 92%; margin-top: 7%; }
.intro__nume img { display: block; width: 100%; height: auto; }
/* luciul care trece peste litere, doar pe forma lor */
.intro__nume::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 38%, rgba(255,236,200,.95) 50%, transparent 62%) no-repeat;
  background-size: 250% 100%; background-position: 160% 0;
  -webkit-mask: url("../img/intro/nume.webp") center / 100% 100% no-repeat;
          mask: url("../img/intro/nume.webp") center / 100% 100% no-repeat;
  mix-blend-mode: soft-light; opacity: 0;
}
.intro__ornament { width: 80%; height: auto; margin-top: 3%; }
.intro__slogan {
  margin: 4.5% 0 0; text-align: center;
  font-size: clamp(.7rem, 2.6vw, .82rem); font-weight: 600;
  letter-spacing: .32em; text-transform: uppercase; color: var(--otel);
}

.intro__sari {
  position: absolute; z-index: 2; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
  padding: .6rem 1rem; min-height: 44px;
  font: 600 .82rem var(--font-text); letter-spacing: .14em; text-transform: uppercase;
  color: var(--otel); background: transparent; border: 1px solid #3A3D43; border-radius: var(--raza);
  cursor: pointer; opacity: 0; transition: opacity .4s ease, color .2s, border-color .2s;
}
.intro__sari:hover, .intro__sari:focus-visible { color: #fff; border-color: var(--otel); }

/* stările de plecare: totul ascuns până pornește secvența */
.intro__roata, .intro__dalta, .intro__munti, .intro__nume, .intro__ornament, .intro__slogan { opacity: 0; }

/* ---------- Secvența (secunde de la pornire; totul durează ~3 s) ----------
   0.05–0.95  roata se rostogolește din stânga până în mijloc și se așază
   0.70–1.30  dălțile ies din spatele roții și se încrucișează
   0.90–1.50  munții cresc din spatele roții spre margini
   1.05–1.65  numele se dezvăluie de la stânga la dreapta, apoi îl străbate un luciu
   1.30–2.00  ornamentul și sloganul
   2.05–3.05  emblema zboară în antet, ușile se deschid */
.porneste .intro__roata { animation: intro-rostogolire .9s .05s both; }
.porneste .intro__lumina { animation: intro-lumina 1.2s .7s both; }
.porneste .intro__dalta--a { animation: intro-dalta-a .55s .7s cubic-bezier(.2, .9, .3, 1.12) both; }
.porneste .intro__dalta--b { animation: intro-dalta-b .55s .76s cubic-bezier(.2, .9, .3, 1.12) both; }
.porneste .intro__munti { animation: intro-munti .6s .9s cubic-bezier(.3, .8, .3, 1) both; }
.porneste .intro__nume { animation: intro-nume .6s 1.05s cubic-bezier(.6, 0, .25, 1) both; }
.porneste .intro__nume::after { animation: intro-luciu .7s 1.6s ease-in-out both; }
.porneste .intro__ornament { animation: intro-ornament .5s 1.3s cubic-bezier(.3, .8, .3, 1) both; }
.porneste .intro__slogan { animation: intro-slogan .6s 1.4s ease both; }
.porneste .intro__sari { opacity: 1; transition-delay: .5s; }

/* rostogolire reală: unghiul se potrivește cu distanța parcursă (le calculează scriptul) */
@keyframes intro-rostogolire {
  0% { opacity: 0; transform: translateX(var(--drum, -60vw)) rotate(var(--unghi, -540deg)); animation-timing-function: cubic-bezier(.22, .7, .3, 1); }
  6% { opacity: 1; }
  82% { opacity: 1; transform: translateX(calc(var(--drum, -60vw) * -.016)) rotate(calc(var(--unghi, -540deg) * -.016)); animation-timing-function: ease-in-out; }
  100% { opacity: 1; transform: none; }
}
@keyframes intro-lumina { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 45% { opacity: 1; } 100% { opacity: .75; transform: translate(-50%, -50%) scale(1); } }
@keyframes intro-dalta-a { from { opacity: 0; transform: rotate(26deg) scale(.42); } 45% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes intro-dalta-b { from { opacity: 0; transform: rotate(-26deg) scale(.42); } 45% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes intro-munti { from { opacity: 0; clip-path: inset(0 50% 0 50%); transform: translateY(10px); } to { opacity: 1; clip-path: inset(0 0 0 0); transform: none; } }
@keyframes intro-nume { from { opacity: 1; clip-path: inset(0 100% 0 0); transform: translateY(6px); } to { opacity: 1; clip-path: inset(0 0 0 0); transform: none; } }
@keyframes intro-luciu { 0% { opacity: 1; background-position: 160% 0; } 100% { opacity: 1; background-position: -60% 0; } }
@keyframes intro-ornament { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }
@keyframes intro-slogan { from { opacity: 0; letter-spacing: .6em; } to { opacity: 1; letter-spacing: .32em; } }

/* „Sari peste”: toate straturile ajung imediat în poziția finală */
.intro.sari * { animation-delay: 0s !important; animation-duration: .01s !important; }

/* ---------- Ieșirea ---------- */
.intro.iese .intro__nume, .intro.iese .intro__ornament, .intro.iese .intro__slogan { animation: intro-stinge .32s ease both; }
.intro.iese .intro__nume::after { animation: none; opacity: 0; }
.intro.iese .intro__lumina { animation: intro-stinge-lumina .4s ease both; }
.intro.iese .intro__sari { opacity: 0; transition-delay: 0s; }
.intro.iese::after { animation: intro-imbinare .85s cubic-bezier(.3, .8, .3, 1) both; }
@keyframes intro-stinge { from { opacity: 1; } to { opacity: 0; transform: translateY(-8px); } }
@keyframes intro-stinge-lumina { from { opacity: .75; transform: translate(-50%, -50%); } to { opacity: 0; transform: translate(-50%, -50%) scale(.8); } }
@keyframes intro-imbinare { 0% { opacity: 1; transform: scaleY(0); } 40% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(1); } }
.intro.iese .intro__usa--st { transform: translateX(-101%); }
.intro.iese .intro__usa--dr { transform: translateX(101%); }

/* ---------- Varianta simplă (sistemul cere mai puțină mișcare) ----------
   Fără rostogolire, zbor sau uși: sigla apare, stă puțin și totul se stinge. */
.intro-simpla .porneste :is(.intro__roata, .intro__dalta, .intro__munti, .intro__nume, .intro__ornament, .intro__slogan) {
  animation: intro-apare .6s ease both;
}
.intro-simpla .porneste .intro__lumina, .intro-simpla .porneste .intro__nume::after { animation: none; }
.intro-simpla .intro.iese { opacity: 0; transition: opacity .6s ease .1s; }
.intro-simpla .intro.iese .intro__usa { transform: none; }
.intro-simpla .intro.iese::after { animation: none; }
@keyframes intro-apare { from { opacity: 0; } to { opacity: 1; } }