/* ====================================================
   povesteAI - pagina de pornire

   Se incarca DOAR pe ?p=home. Landing-ul are aproape 600 de linii de decor pe care
   restul sitului nu le foloseste niciodata; servite peste tot, ar fi fost bagaj mort
   pe fiecare pagina.

   Tot ce e „ilustratie" aici - scrisoarea, plicul, timbrul, stampila, sigiliul de
   ceara, etichetele de pret agatate de sfori - e desenat din gradiente si clip-path.
   Singurele fotografii sunt fundalul eroului si cele trei capitole.
   ==================================================== */

/* ====================================================
   EROU
   ==================================================== */
.erou{
    position:relative;min-height:100vh;overflow:hidden;
    background:var(--dark);
    display:flex;
}
.erou-fundal{
    /* In vh, nu in procente din erou (11.2026): pe telefon eroul isi schimba inaltimea cand
       vin fonturile, iar cu `top:-12%` fundalul se muta odata cu el - deplasare de layout
       (CLS). Pe desktop eroul are exact 100vh, deci ramane identic cu `-12%` / `124%`. */
    position:absolute;left:0;top:-12vh;
    width:100%;height:calc(100% + 24vh);
    object-fit:cover;object-position:62% 50%;
    opacity:0.9;
    will-change:transform;
}
/* Doua voaluri: unul lateral, ca textul sa aiba pe ce sta; unul vertical, care duce
   fotografia in culoarea paginii, ca sectiunea urmatoare sa nu inceapa cu o taietura. */
.erou-val{
    position:absolute;inset:0;pointer-events:none;
    background:
        linear-gradient(90deg, rgba(20,10,22,0.90) 0%, rgba(20,10,22,0.60) 42%, rgba(20,10,22,0.15) 100%),
        linear-gradient(180deg, rgba(13,20,32,0.25) 0%, rgba(31,12,26,0) 55%, var(--dark) 100%);
}
/* Zece stele, din zece gradiente radiale, intr-un singur strat. */
.erou-stele{
    /* Acelasi motiv ca la fundal: `inset:-20% 0` se muta cu inaltimea eroului, si Lighthouse
       masura aici toata deplasarea paginii (CLS 0,19 pe telefon). */
    position:absolute;top:-20vh;bottom:-20vh;left:0;right:0;pointer-events:none;
    background-image:
        radial-gradient(1.6px 1.6px at 12% 22%, rgba(255,250,240,0.9), transparent 60%),
        radial-gradient(1.2px 1.2px at 32% 48%, rgba(246,223,163,0.9), transparent 60%),
        radial-gradient(1.4px 1.4px at 58% 14%, rgba(255,250,240,0.8), transparent 60%),
        radial-gradient(1px 1px   at 76% 36%, rgba(255,250,240,0.9), transparent 60%),
        radial-gradient(1.8px 1.8px at 88% 62%, rgba(246,223,163,0.8), transparent 60%),
        radial-gradient(1.2px 1.2px at 44% 78%, rgba(255,250,240,0.7), transparent 60%),
        radial-gradient(1px 1px   at 8%  66%, rgba(255,250,240,0.8), transparent 60%),
        radial-gradient(1.5px 1.5px at 66% 88%, rgba(246,223,163,0.9), transparent 60%),
        radial-gradient(1px 1px   at 24% 8%,  rgba(255,250,240,0.8), transparent 60%),
        radial-gradient(1.3px 1.3px at 94% 12%, rgba(255,250,240,0.8), transparent 60%);
    background-size:900px 700px;
    animation:licarire 4s ease-in-out infinite;
}
@keyframes licarire{0%,100%{opacity:0.5;}50%{opacity:1;}}
.erou-zapada{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}

/* Centrare „sigura": marginile automate impart spatiul liber cand exista, si devin
   zero cand nu exista. Cu `align-items:center` pe parinte (cum are si comp-ul), pe
   telefon - unde continutul eroului e mult mai inalt de 100vh - partea de sus era
   taiata de `overflow:hidden`, iar eticheta „Exemplu · 1:12" de pe card disparea. */
.erou-grila{
    position:relative;z-index:1;width:100%;
    margin-top:auto;margin-bottom:auto;
    padding-top:140px;padding-bottom:90px;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));
    gap:clamp(40px,6vw,80px);align-items:center;
}
.erou-titlu{
    /* Masura comp-ului, nu una mai prudenta de-a mea. Ii facusem plafonul mai jos
       (82px) ca sa incapa pe mai putine randuri - dar exact randurile multe sunt
       efectul: titlul coboara ca un afis, cuvant cu cuvant, iar „pe nume." ramane
       singur pe ultimul rand, in auriu. Micsorat, nu mai e titlul paginii, e un
       subtitlu mare. */
    /* Mai mic decât în comp (era `clamp(46px,7.2vw,104px)`), cerut explicit. Rămâne
       titlul paginii și rămâne pe mai multe rânduri — coborârea aia cuvânt cu cuvânt,
       cu „pe nume." singur pe ultimul rând în auriu, e tot ce face titlul să arate a
       afiș și nu a antet. Doar scara s-a schimbat. */
    font-size:clamp(40px,5.4vw,78px);
    line-height:1;margin:0 0 30px;
}
.erou-titlu .aur{color:var(--main);}
/* Fiecare cuvant urca din propria masca. `overflow:hidden` taie, span-ul dinauntru urca. */
.urca{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:0.1em;margin-bottom:-0.1em;}
.urca > span{display:inline-block;transform:translateY(112%);animation:urca 1s var(--easing) forwards;}
@keyframes urca{to{transform:translateY(0);}}
.urca:nth-of-type(1) > span{animation-delay:0.20s;}
.urca:nth-of-type(2) > span{animation-delay:0.28s;}
.urca:nth-of-type(3) > span{animation-delay:0.36s;}
.urca:nth-of-type(4) > span{animation-delay:0.46s;}
.urca:nth-of-type(5) > span{animation-delay:0.54s;}
.urca:nth-of-type(6) > span{animation-delay:0.64s;}

.erou-text .eyebrow{animation:apare 1s 0.6s both;}
.erou-lead{
    font-size:clamp(19px,1.6vw,23px);line-height:1.5;
    color:rgba(247,238,227,0.82);max-width:520px;margin:0 0 38px;
    animation:apare 1s 0.9s both;
}
.erou-actiuni{display:flex;flex-wrap:wrap;gap:14px;align-items:center;animation:apare 1s 1.1s both;}
@keyframes apare{from{opacity:0;}to{opacity:1;}}

/* Reperele de sub buton (11.2026): ce era in banda care curgea, acum fix si la vedere. */
.erou-repere{
    list-style:none;margin:22px 0 0;padding:0;
    display:flex;flex-wrap:wrap;gap:8px 10px;
    animation:apare 1s 1.2s both;
}
.erou-repere li{
    font-size:15px;line-height:1.3;color:rgba(247,238,227,0.9);
    padding:6px 12px;border-radius:var(--radius-pill);
    border:1px solid rgba(232,184,90,0.35);background:rgba(31,12,26,0.45);
}
.erou-repere strong{color:var(--main);font-weight:600;}

/* ---------- Cardul-exemplu ---------- */
/* Aliniat la DREAPTA, nu centrat: marginea din dreapta a cardului cade acum exact pe
   cea a butonului „Comandă videoclipul" din antet. Zona se întindea deja până acolo,
   dar cardul stătea centrat în ea și rămânea cu ~48px în interior — destul cât să se
   vadă că nu e pe aceeași linie cu nimic. */
.erou-card-zona{display:flex;flex-direction:column;align-items:flex-end;perspective:1400px;}
.erou-card{
    position:relative;display:block;
    /* Pe ecrane mari, raportul videoclipului, exact: 9:16, fara nicio taietura. Pe
       telefon (11.2026) cardul e 4:5 - vezi RESPONSIV: 9:16 umplea tot primul ecran. */
    width:min(100%,420px);aspect-ratio:9/16;
    border-radius:20px;overflow:hidden;
    box-shadow:0 50px 90px -30px rgba(0,0,0,0.8), 0 0 0 1px rgba(232,184,90,0.4);
    transition:transform 0.25s ease-out;
    animation:intra-plutind 1.3s var(--easing) 0.5s both;
    transform-style:preserve-3d;
}
/* Fara opacitate (11.2026): cardul e cel mai mare element din primul ecran, deci „cand s-a
   desenat pagina" (LCP). Pornit din opacity:0, era numarat abia dupa animatie. Acum e vizibil
   din primul cadru si doar aluneca la locul lui. */
@keyframes intra-plutind{
    from{transform:translateY(40px) rotate(4deg);}
    to{transform:translateY(0) rotate(0);}
}
.erou-card img,
.erou-card .erou-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);}

/* Cat ruleaza, decorul se da la o parte: valul, reflexia, butonul si textul de jos ar
   sta toate peste imagine si peste comenzile native de redare. */
.erou-card.ruleaza .erou-card-val,
.erou-card.ruleaza .erou-card-licar,
.erou-card.ruleaza .erou-card-play,
.erou-card.ruleaza .erou-card-jos{opacity:0;pointer-events:none;transition:opacity 0.3s ease;}
/* La redare se scoate doar marirea de 4% (era acolo ca sa nu apara dungi la
   inclinarea cardului). Decuparea RAMANE: `contain` ar fi aratat tot cadrul, dar
   cu doua benzi negre late pe laturi, intr-o pagina fara nimic negru in ea. Cum
   videoclipul e un portret centrat pe fundal plin, umplerea cardului arata mai
   bine decat cadrul intreg cu chenar. */
.erou-card.ruleaza .erou-video{transform:none;}

/* Butonul de play e acum un `<button>`, nu un `<span>` decorativ. */
.erou-card-play{background:none;border:0;padding:0;cursor:pointer;}

.erou-card-link{
    display:block;margin-top:18px;text-align:center;
    color:var(--muted);font-size:15px;
}
.erou-card-link:hover{color:var(--text);}
.erou-card-val{position:absolute;inset:0;background:linear-gradient(180deg, rgba(31,12,26,0) 40%, rgba(31,12,26,0.9) 100%);}
/* Reflexia care urmareste cursorul; pozitia vine din JS, prin --sx/--sy. */
.erou-card-licar{
    position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
    background:radial-gradient(circle at var(--sx,50%) var(--sy,50%), rgba(246,223,163,0.32), transparent 45%);
}
.erou-card-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:86px;height:86px;}
.erou-card-play .inel{
    position:absolute;inset:0;border-radius:50%;
    border:1px solid rgba(246,223,163,0.8);
    animation:inel-puls 2.4s ease-out infinite;
}
.erou-card-play .inel-2{animation-delay:1.2s;}
@keyframes inel-puls{0%{transform:scale(1);opacity:0.7;}100%{transform:scale(1.9);opacity:0;}}
.erou-card-play .disc{
    position:absolute;inset:0;border-radius:50%;background:var(--main);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 20px 40px -10px rgba(232,184,90,0.8);
}
.erou-card-play .disc svg{width:30px;height:30px;fill:var(--dark-3);margin-left:5px;}
.erou-card-jos{position:absolute;left:24px;right:24px;bottom:22px;display:block;}
.erou-card-citat{font-family:var(--font-titlu);font-size:28px;line-height:1.1;color:var(--text);display:block;}
.erou-card-meta{margin-top:8px;color:var(--muted);font-style:italic;display:block;}

/* „Vezi un exemplu · 2:46", sub card: deschide fereastra cu exemplul de comanda. */
.erou-exemplu{
    margin-top:16px;min-height:44px;padding:7px 16px 7px 7px;
    display:inline-flex;align-items:center;gap:10px;
    font-family:inherit;font-size:16px;color:var(--text);cursor:pointer;
    background:rgba(31,12,26,0.55);
    border:1px solid rgba(232,184,90,0.45);border-radius:var(--radius-pill);
    transition:border-color 0.2s ease, background 0.2s ease;
}
.erou-exemplu:hover{border-color:var(--main);background:rgba(31,12,26,0.75);}
.erou-exemplu-play{width:30px;height:30px;border-radius:50%;background:var(--main);display:grid;place-items:center;flex:none;}
.erou-exemplu-play svg{width:14px;height:14px;fill:var(--dark-3);margin-left:2px;}

/* ---------- Fereastra cu exemplul ---------- */
.exemplu-fereastra{
    /* `margin:auto` explicit: resetarea globala a marginilor anula centrarea nativa a lui
       <dialog>, iar fereastra se lipea de marginea de sus a ecranului. */
    margin:auto;
    width:min(960px,92vw);max-width:none;max-height:none;
    padding:0;border:0;background:transparent;color:var(--text);overflow:visible;
}
.exemplu-fereastra::backdrop{background:rgba(10,4,12,0.86);}
.exemplu-cutie{
    position:relative;padding:14px;border-radius:16px;
    background:var(--dark-3);border:1px solid rgba(232,184,90,0.4);
    box-shadow:0 40px 80px -20px rgba(0,0,0,0.8);
}
.exemplu-video{display:block;width:100%;aspect-ratio:16/9;background:#000;border-radius:10px;}
.exemplu-text{margin:12px 4px 2px;font-size:16px;line-height:1.5;color:var(--muted);}
.exemplu-text a{color:var(--main);}
.exemplu-inchide{
    position:absolute;top:-14px;right:-6px;z-index:2;
    width:44px;height:44px;border-radius:50%;border:0;padding:0;cursor:pointer;
    display:grid;place-items:center;
    background:var(--main);color:var(--dark-3);
    box-shadow:0 8px 20px -6px rgba(0,0,0,0.7);
}
.exemplu-inchide svg{width:14px;height:14px;display:block;}

/* ---------- Butonul fix de jos (doar telefon) ---------- */
.cta-fix{display:none;}

/* ====================================================
   POVESTEA NOASTRA + SCRISOAREA
   ==================================================== */
.poveste-grila{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
    gap:clamp(48px,7vw,110px);align-items:center;
}
.poveste-grila h2{font-size:clamp(38px,4.6vw,66px);margin:0 0 28px;}
.poveste-grila > div > p{font-size:20px;line-height:1.6;margin:0 0 20px;}
.poveste-cifre{display:flex;gap:clamp(22px,3vw,40px);flex-wrap:wrap;margin-top:36px;}
.poveste-cifre strong{font-family:var(--font-titlu);font-size:44px;line-height:1;color:var(--rosu);display:block;font-weight:400;}
.poveste-cifre span{font-size:16px;color:var(--muted-pe-crema);margin-top:6px;display:block;}

.poveste-vizual{display:flex;justify-content:center;perspective:1400px;padding:30px 0 50px;}
.scrisoare{
    position:relative;width:min(100%,470px);
    opacity:0;transform:rotateX(18deg) rotate(-3deg) translateY(30px);
    transition:opacity 1.1s var(--easing), transform 1.1s var(--easing);
}
.scrisoare.vizibil{opacity:1;transform:none;}

/* ---------- plicul ---------- */
.scrisoare-plic{position:absolute;left:-7%;right:5%;top:10%;bottom:-7%;transform:rotate(-7deg);filter:drop-shadow(0 30px 30px rgba(59,31,43,0.45));}
.plic-corp{
    position:absolute;inset:0;border-radius:3px;background-color:var(--rosu-2);
    background-image:
        linear-gradient(135deg, rgba(255,255,255,0.1), rgba(0,0,0,0.2)),
        repeating-linear-gradient(0deg, rgba(0,0,0,0.035) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 4px);
}
.plic-clapa{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 55%);background:linear-gradient(180deg,#8f3434,#7a2a2c);filter:brightness(1.05);}
.plic-umbra{position:absolute;left:0;right:0;bottom:0;height:60%;clip-path:polygon(0 100%,0 8%,50% 55%,100% 8%,100% 100%);background:linear-gradient(0deg, rgba(0,0,0,0.12), rgba(0,0,0,0));}
.plic-adresa{position:absolute;left:9%;bottom:2%;font-family:var(--font-caligrafic);font-size:30px;line-height:1.1;color:var(--light);transform:rotate(-2deg);}

.scrisoare-dedesubt{position:absolute;inset:0;background:#efe0c4;transform:rotate(4.5deg) translate(12px,8px);box-shadow:0 20px 40px -18px rgba(59,31,43,0.45);border:1px solid rgba(150,100,50,0.15);}

/* ---------- hartia ---------- */
.scrisoare-hartie{
    position:relative;padding:44px 46px 62px 56px;
    background-color:var(--crema-2);color:var(--text-pe-crema);
    /* Sapte straturi, in ordinea comp-ului. Dunga din mijloc e indoitura, elipsa e
       umbra marginilor, cele doua cercuri sunt pete de vechime - iar ultimele doua sunt
       LINIATURA: margine rosie la 36px si o linie la fiecare 35px. Le omisesem, si fara
       ele hartia iesea goala, ca o foaie de imprimanta, nu ca o scrisoare. */
    background-image:
        linear-gradient(180deg, rgba(255,255,255,0) 49.3%, rgba(120,80,50,0.13) 49.85%, rgba(255,255,255,0.75) 50.15%, rgba(255,255,255,0) 50.8%),
        linear-gradient(180deg, rgba(120,80,50,0.045) 0 50%, rgba(0,0,0,0) 50%),
        radial-gradient(ellipse at 50% 45%, rgba(255,255,255,0) 55%, rgba(150,100,50,0.17) 100%),
        radial-gradient(circle at 84% 86%, rgba(150,100,50,0.10) 0 16px, rgba(150,100,50,0) 42px),
        radial-gradient(circle at 10% 22%, rgba(150,100,50,0.07) 0 8px, rgba(150,100,50,0) 26px),
        linear-gradient(90deg, transparent 36px, rgba(154,59,63,0.2) 36px 37px, transparent 37px),
        repeating-linear-gradient(180deg, transparent 0 35px, rgba(154,59,63,0.09) 35px 36px);
    box-shadow:0 30px 50px -24px rgba(59,31,43,0.5);
}
.scrisoare-hartie p{font-size:20px;line-height:36px;margin:0 0 18px;color:var(--text-pe-crema);}
.scrisoare-data{display:block;font-style:italic;color:rgba(59,31,43,0.6);font-size:16px;margin-bottom:70px;}
.scrisoare-semnatura{font-family:var(--font-caligrafic);font-size:46px;line-height:1;color:var(--rosu);transform:rotate(-4deg);display:inline-block;margin-top:8px;}
.scrisoare-colt{position:absolute;left:0;bottom:0;width:44px;height:44px;background:linear-gradient(45deg, var(--crema) 0 50%, #e6d2b0 50%, var(--crema-2) 100%);box-shadow:3px -3px 6px rgba(59,31,43,0.12);}

/* ---------- timbru ---------- */
.timbru{
    position:absolute;top:20px;right:22px;width:78px;height:96px;padding:6px;
    transform:rotate(4deg);
    /* Dantelatura: cercuri transparente decupate din hartie, repetate pe margine. */
    background:radial-gradient(circle at 50% 50%, transparent 3px, #fffaf0 3.6px) -5px -5px/10px 10px;
    filter:drop-shadow(0 2px 2px rgba(59,31,43,0.35));
}
.timbru-interior{position:relative;display:flex;flex-direction:column;gap:3px;height:100%;background:#fffaf0;padding:4px;}
/* Bradul si steaua, desenate: nicio fotografie de strain pe citatele reale.
   Doua gradiente incrucisate dadeau un X, nu un brad - de-asta triunghiul e taiat
   cu `clip-path`, care chiar face o forma, nu o iluzie de forma. */
.timbru-desen{
    flex:1;position:relative;overflow:hidden;
    background:radial-gradient(ellipse 130% 85% at 50% 112%, rgba(232,184,90,0.4), var(--dark) 72%);
}
.timbru-desen:before{
    content:'';position:absolute;left:50%;top:24%;
    width:56%;height:56%;transform:translateX(-50%);
    background:var(--main);
    clip-path:polygon(50% 0, 100% 100%, 0 100%);
}
.timbru-desen:after{
    content:'';position:absolute;left:50%;top:9%;
    width:10px;height:10px;margin-left:-5px;
    background:var(--light);
    clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.timbru-jos{display:flex;justify-content:space-between;font-size:10px;line-height:1;color:var(--rosu);font-weight:600;}
.timbru-mic{width:72px;height:88px;top:-6px;right:-4px;transform:rotate(3deg);}

/* ---------- stampila postala ---------- */
.stampila{position:absolute;top:58px;right:104px;display:flex;align-items:center;pointer-events:none;mix-blend-mode:multiply;transform:rotate(-12deg);}
.stampila-linii{width:70px;height:28px;background:repeating-linear-gradient(180deg, rgba(58,45,90,0.5) 0 2px, transparent 2px 8px);border-radius:40%;}
.stampila-cerc{
    width:84px;height:84px;border-radius:50%;
    border:3px double rgba(58,45,90,0.55);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    color:rgba(58,45,90,0.7);font-size:11px;font-weight:700;letter-spacing:0.12em;
    line-height:1.3;text-align:center;
}
.stampila-cerc span{font-size:10px;font-weight:600;letter-spacing:0.06em;border-top:1px solid rgba(58,45,90,0.5);margin-top:2px;padding-top:2px;}
.stampila-mica{top:30px;right:40px;transform:rotate(-14deg);}
.stampila-mica .stampila-linii{width:50px;height:24px;}
.stampila-mica .stampila-cerc{width:66px;height:66px;font-size:9px;}

/* ---------- sigiliul de ceara ---------- */
.sigiliu{position:absolute;right:34px;bottom:-34px;width:96px;height:110px;}
/* Cozile de panglică: lungimi și unghiuri diferite (62px/16° și 56px/−14°), cu
   gradientele oglindite, ca cele două să prindă lumina din părți opuse. */
.sigiliu-panglica-1,.sigiliu-panglica-2{
    position:absolute;top:50px;width:20px;
    clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%);transform-origin:top;
}
.sigiliu-panglica-1{left:24px;height:62px;background:linear-gradient(90deg,#b08d4a,#e8c77a 45%,#9a7a32);transform:rotate(16deg);}
.sigiliu-panglica-2{left:52px;height:56px;background:linear-gradient(90deg,#9a7a32,#e8c77a 55%,#b08d4a);transform:rotate(-14deg);}
.sigiliu-ceara{
    position:absolute;left:4px;top:0;width:88px;height:86px;
    /* Marginea neregulata face diferenta dintre „ceara" si „cerc rosu". */
    border-radius:48% 52% 45% 55% / 53% 46% 54% 47%;
    background:radial-gradient(circle at 36% 32%, #d8605f 0, #a8363b 36%, #7c2329 68%, #5a171c 100%);
    box-shadow:0 12px 18px -6px rgba(70,15,20,0.6), inset 0 -5px 9px rgba(0,0,0,0.35), inset 0 3px 6px rgba(255,255,255,0.2);
    transform:rotate(-10deg);
    display:flex;align-items:center;justify-content:center;
}
/* Discul presat de ștampilă: FĂRĂ fundal propriu — ceara se vede prin el. E definit
   doar din umbre: una interioară (adâncitura) și o linie albă sub ea (buza ridicată).
   Asta lipsea, și fără ea „M" stătea lipit pe ceară ca un autocolant. */
.sigiliu-disc{
    width:58px;height:58px;border-radius:50%;
    box-shadow:inset 0 2px 4px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.22);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-titlu);font-size:30px;color:#7c2329;
    text-shadow:0 1px 0 rgba(255,255,255,0.25), 0 -1px 0 rgba(0,0,0,0.35);
}

/* ====================================================
   CAPITOLE
   ==================================================== */
.capitole-antet{
    display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;
    gap:24px;margin-bottom:clamp(36px,5vw,64px);
}
.capitole-antet h2{font-size:clamp(38px,4.6vw,66px);margin:0;max-width:640px;}
.capitole-antet p{margin:0;max-width:380px;color:var(--muted);font-size:19px;}

.capitole{display:flex;gap:clamp(8px,1.2vw,16px);height:clamp(460px,68vh,640px);}
.capitol{
    position:relative;flex:1;min-width:64px;
    border-radius:14px;overflow:hidden;cursor:pointer;
    background:#140a18;border:0;padding:0;text-align:left;
    box-shadow:0 0 0 1px rgba(247,238,227,0.08), 0 40px 60px -40px rgba(0,0,0,0.8);
    transition:flex 0.9s cubic-bezier(.65,0,.25,1), box-shadow 0.9s ease;
}
.capitol.deschis{flex:4;box-shadow:0 0 0 1px rgba(232,184,90,0.45), 0 40px 60px -40px rgba(0,0,0,0.8);}
.capitol img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    transform:scale(1.12);filter:saturate(0.7) brightness(0.5);
    transition:transform 1.6s var(--easing), filter 0.9s ease;
}
.capitol.deschis img{transform:scale(1);filter:saturate(1) brightness(0.78);}
.capitol-val{position:absolute;inset:0;background:linear-gradient(180deg, rgba(20,10,24,0.15) 0%, rgba(20,10,24,0.1) 40%, rgba(20,10,24,0.92) 100%);}
.capitol-numar{
    position:absolute;top:22px;left:22px;
    font-family:var(--font-titlu);font-size:clamp(44px,5vw,72px);line-height:0.8;
    color:transparent;-webkit-text-stroke:1.2px var(--main);
}
/* Eticheta verticala, cat timp panoul e inchis. */
.capitol-vertical{
    position:absolute;left:0;right:0;bottom:30px;
    display:flex;justify-content:center;
    opacity:1;transition:opacity 0.5s ease;pointer-events:none;
}
/* Scrisul vertical sta pe span-ul dinauntru, NU pe invelisul pozitionat: un element
   lat de 100% cu `writing-mode:vertical-rl` isi revarsa textul in jos, afara din panou. */
.capitol-vertical span{
    writing-mode:vertical-rl;transform:rotate(180deg);
    font-family:var(--font-titlu);font-size:24px;white-space:nowrap;color:var(--text);
}
.capitol.deschis .capitol-vertical{opacity:0;}
.capitol-corp{
    position:absolute;left:clamp(22px,3vw,40px);right:clamp(22px,3vw,40px);bottom:clamp(26px,3vw,40px);
    min-width:240px;max-width:520px;display:block;
    opacity:0;transform:translateY(20px);
    transition:opacity 0.6s 0.2s ease, transform 0.8s 0.2s var(--easing);
}
.capitol.deschis .capitol-corp{opacity:1;transform:none;}
.capitol-eticheta{display:block;font-style:italic;color:var(--main);font-size:18px;margin-bottom:8px;}
.capitol-titlu{display:block;font-family:var(--font-titlu);font-size:clamp(28px,3.2vw,46px);line-height:1.05;margin-bottom:12px;color:var(--text);}
.capitol-text{display:block;margin-bottom:22px;color:rgba(247,238,227,0.85);font-size:clamp(17px,1.4vw,20px);line-height:1.5;}
.capitol-bara{display:block;height:2px;background:rgba(247,238,227,0.2);overflow:hidden;max-width:220px;}
.capitol-bara span{display:block;height:100%;background:var(--main);transform-origin:left;transform:scaleX(0);}

/* ====================================================
   ETICHETE DE PRET, AGATATE DE SFORI
   ==================================================== */
.etichete{position:relative;}
.etichete-sina{display:block;height:2px;background:linear-gradient(90deg, transparent, #8a6a3a 8%, #8a6a3a 92%, transparent);margin:0 -5vw;}
.etichete-grila{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
    gap:clamp(20px,3vw,40px);align-items:start;
}
.eticheta-zona{
    display:flex;flex-direction:column;align-items:center;
    transform-origin:top center;
    opacity:0;transform:translateY(-40px);
    transition:opacity 1s var(--easing) var(--intarziere,0ms), transform 1s var(--easing) var(--intarziere,0ms);
}
.eticheta-zona.vizibil{opacity:1;transform:none;}
/* Leaganul e separat de zona: una face intrarea, cealalta balansul perpetuu.
   Pe acelasi element, animatia cu `both` ar bloca transform-ul si balansul ar muri. */
.eticheta-leagan{
    display:flex;flex-direction:column;align-items:center;width:100%;
    transform-origin:top center;
    animation:balans 7s ease-in-out infinite;
    animation-delay:var(--balans,0s);
}
@keyframes balans{0%,100%{transform:rotate(-1.6deg);}50%{transform:rotate(1.6deg);}}
.eticheta-sfoara{width:3px;height:var(--sfoara,60px);background:repeating-linear-gradient(165deg,#b8955e 0 2px,#7a5a34 2px 4px);border-radius:2px;}
.eticheta-nod{position:relative;z-index:3;width:9px;height:7px;margin:-3px 0 -4px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#c9a46a,#6b4e2a);box-shadow:0 1px 2px rgba(0,0,0,0.35);}

/* Pendulul poartă SINGUR rotația de la hover, cu pivotul în mărgea. Pe învelișul de
   balans nu se poate pune: ar fi două `transform` pe același element și al doilea l-ar
   șterge pe primul. Filtrul de umbră stă tot aici, ca umbra să se încline cu eticheta. */
.eticheta-pendul{
    width:100%;
    transform-origin:50% 0;
    filter:drop-shadow(0 30px 26px rgba(59,31,43,0.3)) drop-shadow(0 2px 2px rgba(59,31,43,0.25));
    transition:transform 0.6s var(--easing);
}
.eticheta-zona:hover .eticheta-pendul{transform:rotate(-2.5deg);}

.eticheta{
    position:relative;width:100%;
    /* Forma de eticheta de cadou: colturile de sus taiate. */
    clip-path:polygon(24% 0, 76% 0, 100% 7%, 100% 100%, 0 100%, 0 7%);
    background-color:#f7efdc;
    background-image:repeating-linear-gradient(0deg, rgba(90,60,30,0.025) 0 1px, transparent 1px 3px);
    color:var(--text-pe-crema);
    padding:96px 36px 46px;min-height:580px;
    display:flex;flex-direction:column;
}
.eticheta.evidentiat{
    background-color:#3d1830;
    background-image:repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 3px);
    color:var(--text);
}
/* Eticheta evidentiata e o insula intunecata pe fundal crem, deci regulile de sectiune
   (`.section-crema p, .section-crema li { color: inchis }`) o lasau cu text invizibil
   pe propriul fundal. Le intoarcem explicit, nu prin mostenire. */
.eticheta.evidentiat .eticheta-durata,
.eticheta.evidentiat .eticheta-lista li{color:rgba(247,238,227,0.85);}
.eticheta.evidentiat .eticheta-lista li span{color:var(--main);}
.eticheta.evidentiat .eticheta-serie{color:rgba(247,238,227,0.6);}
/* Capsa metalica prin care trece sfoara, si gaura de sub ea. */
.eticheta-capsa{position:absolute;top:-22px;left:50%;margin-left:-9px;width:18px;height:58px;border-radius:50%;border:2.5px solid #9a7a4a;box-shadow:inset 0 0 0 1px rgba(60,40,20,0.25), 0 1px 1px rgba(0,0,0,0.2);z-index:2;}
.eticheta-gaura{position:absolute;top:21px;left:50%;margin-left:-13px;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle, #f4e8d6 0 5px, #5a4418 5.5px, #f6dfa3 7.5px, #c9a24a 9.5px, #8a6a2a 11.5px, #5a4418 12.5px, rgba(0,0,0,0) 13px);z-index:1;}
.eticheta-perforatie{position:absolute;left:0;right:0;top:70px;border-top:2px dotted currentColor;opacity:0.28;}
.eticheta-decupaj{position:absolute;top:63px;width:16px;height:16px;border-radius:50%;background:var(--crema);}
.eticheta-decupaj-s{left:-8px;}
.eticheta-decupaj-d{right:-8px;}
.eticheta-chenar{position:absolute;top:84px;left:14px;right:14px;bottom:14px;border:1px dashed currentColor;opacity:0.3;pointer-events:none;}

.eticheta-ales{
    display:flex;align-items:center;justify-content:center;gap:10px;
    font-style:italic;color:var(--main);font-size:16px;margin-bottom:6px;
}
.eticheta-ales:before,.eticheta-ales:after{content:'';width:24px;height:1px;background:var(--main);}
.eticheta-nume{font-family:var(--font-titlu);font-size:36px;text-align:center;line-height:1;margin:0;font-weight:400;}
.eticheta.evidentiat .eticheta-nume{color:var(--text);}
.eticheta-rigla{display:block;width:56%;margin:12px auto 0;height:5px;border-top:1px solid currentColor;border-bottom:1px solid currentColor;opacity:0.35;}
.eticheta-durata{text-align:center;margin:10px 0 18px;font-style:italic;opacity:0.75;font-size:17px;}
/* `.section-crema p` (o clasă + un element) bate `.eticheta-pret` (o clasă), așa că
   prețul ieșea maro-șters în loc de roșu de ceară. Ridicăm specificitatea. */
.section-crema .eticheta-pret,
.eticheta-pret{
    text-align:center;font-family:var(--font-titlu);font-size:68px;line-height:1;
    display:flex;align-items:baseline;justify-content:center;gap:6px;
    color:var(--rosu);margin:0;
}
.section-crema .eticheta-durata{color:inherit;opacity:0.75;}
.section-crema .eticheta-lista li{color:inherit;}
.eticheta.evidentiat .eticheta-pret{color:var(--main);}
.eticheta-pret span{font-family:var(--font-text);font-size:20px;opacity:0.75;color:inherit;}
.eticheta.evidentiat .eticheta-pret span{color:var(--text);}
.eticheta-linie{display:block;height:1px;background:currentColor;opacity:0.25;margin:24px 0;}
.eticheta-lista{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-direction:column;gap:12px;font-size:18px;flex:1;}
.eticheta-lista li{display:flex;gap:12px;align-items:baseline;}
.eticheta-lista li span{color:var(--accent-1);font-size:13px;}
.eticheta .btn{font-size:18px;padding:15px;}
.eticheta-serie{display:block;text-align:center;margin-top:14px;font-style:italic;font-size:15px;opacity:0.6;}
/* Butonul din eticheta nu are halou. Pe chemarile mari (erou, final) haloul e corect -
   acolo il are si comp-ul - dar aici lumina lui se revarsa peste hartie si eticheta
   parea aprinsa din interior, ca un semn de neon lipit pe un carton. */
.eticheta .btn-primary{box-shadow:inset 0 0 0 1px rgba(255,255,255,0.45);}

/* ====================================================
   PARERI
   ==================================================== */
.section-pareri{padding-left:0;padding-right:0;overflow:hidden;}
/* Cât ținem apăsat pe bandă, nimic din secțiune nu se selectează — nici titlul. */
.section-pareri.trage-acum,.section-pareri.trage-acum *{user-select:none;-webkit-user-select:none;}
/* Sectiunea isi scoate retragerile ca banda sa curga de la margine la margine, deci
   antetul si le pune singur - altfel titlul ar sta lipit de marginea ecranului. */
.pareri-antet{
    display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;
    gap:24px;margin-bottom:clamp(40px,5vw,64px);
    padding:0 clamp(20px,5vw,64px);
}
.pareri-antet h2{font-size:clamp(38px,4.6vw,66px);margin:0;max-width:560px;}
.pareri-antet p{margin:0;color:var(--muted-2);font-size:18px;font-style:italic;}

/* Banda se mișcă prin `transform`, nu prin derulare nativă: așa poate merge singură,
   poate fi trasă, și poate avea inerție — toate trei în același sistem de coordonate. */
.pareri-sir{
    display:flex;width:max-content;gap:28px;padding:20px 0;
    cursor:grab;user-select:none;-webkit-user-select:none;
    touch-action:pan-y;will-change:transform;
}
.pareri-sir.trage{cursor:grabbing;}
/* `pointer-events:none` pe carduri: altfel textul din ele ar începe o selecție la
   tragere. Titlul secțiunii e oricum în afara benzii. */
.carte-postala{
    width:540px;flex:none;pointer-events:none;
    transform:rotate(var(--rot,0deg));
    filter:drop-shadow(0 30px 30px rgba(0,0,0,0.5)) drop-shadow(0 2px 2px rgba(0,0,0,0.3));
    display:grid;grid-template-columns:1fr 1px 1fr;gap:22px;
    min-height:320px;padding:26px 28px;
    background-color:var(--crema-2);color:var(--text-pe-crema);
    background-image:
        radial-gradient(ellipse at 50% 45%, rgba(255,255,255,0) 55%, rgba(150,100,50,0.16) 100%),
        repeating-linear-gradient(0deg, rgba(90,60,30,0.025) 0 1px, transparent 1px 3px);
}
.postala-stanga{display:flex;flex-direction:column;}
.postala-stele{color:var(--accent-1);letter-spacing:4px;font-size:14px;margin-bottom:12px;}
.postala-stanga p{font-size:19px;line-height:1.5;margin:0 0 16px;flex:1;color:var(--text-pe-crema);}
.postala-semnatura{font-family:var(--font-caligrafic);font-size:32px;line-height:1;color:var(--rosu);}
.postala-mijloc{background:rgba(59,31,43,0.22);}
.postala-dreapta{position:relative;display:flex;flex-direction:column;justify-content:flex-end;}
.postala-tip{position:absolute;top:0;left:0;font-style:italic;font-size:15px;color:rgba(59,31,43,0.55);}
.postala-pentru{font-size:15px;font-style:italic;color:rgba(59,31,43,0.55);margin-bottom:2px;}
.postala-rand{font-size:17px;line-height:34px;border-bottom:1px solid rgba(59,31,43,0.3);font-style:italic;}
.postala-rand-mare{font-family:var(--font-caligrafic);font-size:28px;line-height:36px;font-style:normal;}
.postala-de-la{font-size:14px;line-height:30px;color:rgba(59,31,43,0.6);}

/* ====================================================
   CHEMAREA FINALA
   ==================================================== */
.section-final{
    background:var(--dark-3);
    padding:clamp(100px,12vw,180px) clamp(20px,5vw,64px);
    position:relative;overflow:hidden;text-align:center;
}
.section-final:before{
    content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:min(900px,120vw);aspect-ratio:2/1;
    background:radial-gradient(closest-side, rgba(232,184,90,0.14), transparent 70%);
    pointer-events:none;
}
.section-final > *{position:relative;}
.final-flourish{font-family:var(--font-caligrafic);font-size:clamp(44px,5vw,64px);line-height:1;color:var(--main);margin:0 0 10px;}
.section-final h2{font-size:clamp(38px,4.6vw,66px);margin:0 0 18px;}
.section-final p{color:var(--muted);max-width:540px;margin:0 auto 34px;font-size:20px;}

/* ====================================================
   LINKURI CATRE PAGINILE DEDICATE
   Fiecare sectiune a landing-ului are una; aici e scurtatura, acolo e detaliul.
   ==================================================== */
.section-link{margin-top:34px;font-size:18px;}
.section-link-centrat{text-align:center;}
/* 44px de atins (11.2026): blocul primeste umplutura pe verticala, deci sublinierea nu
   mai poate fi bordura de jos (ar fi coborat cu 10px sub text) - e `text-decoration`. */
.section-link a{
    display:inline-block;padding:10px 0;
    color:var(--main);
    text-decoration:underline;text-decoration-color:rgba(232,184,90,0.4);
    text-decoration-thickness:1px;text-underline-offset:5px;
}
.section-link a:hover{color:var(--light);text-decoration-color:var(--light);}
.section-crema .section-link a{color:var(--rosu);text-decoration-color:rgba(154,59,63,0.4);}
.section-crema .section-link a:hover{color:var(--rosu-2);}
.section-link{margin-top:24px;}

/* ====================================================
   RESPONSIV
   ==================================================== */
@media (max-width:1030px){
    .erou{min-height:auto;}
    /* Titlul si butonul vin INAINTEA videoului (11.2026). Cardul statea primul (`order:-1`)
       si umplea tot primul ecran: titlul era la 817px, butonul la 1040px. */
    .erou-grila{padding-top:104px;padding-bottom:64px;gap:36px;}
    .erou-card-zona{align-items:center;}
    /* 4:5 in loc de 9:16: tot chipul Mosului, cu ~40% mai putina inaltime. */
    .erou-card{width:min(100%,380px);aspect-ratio:4/5;}

    /* Trei pasi, unul sub altul, toti deschisi si fara cronometru (11.2026). Pana acum se
       schimbau singuri la 6 secunde, iar fiecare schimbare muta tot ce era dedesubt
       (CLS 1,64 masurat pe telefon). Acum inaltimea nu se mai schimba deloc. */
    .capitole{flex-direction:column;height:auto;}
    .capitol,.capitol.deschis{min-height:0;height:auto;cursor:default;box-shadow:0 0 0 1px rgba(232,184,90,0.3), 0 40px 60px -40px rgba(0,0,0,0.8);}
    .capitol img,.capitol.deschis img{transform:none;filter:saturate(1) brightness(0.6);transition:none;}
    .capitol-vertical,.capitol-bara{display:none;}
    .capitol-corp,.capitol.deschis .capitol-corp{position:relative;left:auto;right:auto;bottom:auto;padding:88px clamp(22px,4vw,34px) 28px;max-width:none;opacity:1;transform:none;transition:none;}
    .capitol-text{margin-bottom:0;}
    .carte-postala{width:min(86vw,460px);}
}
/* ---------- Telefon: butonul fix si recenziile care se gliseaza ---------- */
@media (max-width:760px){
    .cta-fix{
        display:block;position:fixed;left:0;right:0;bottom:0;z-index:90;
        padding:12px 16px calc(12px + env(safe-area-inset-bottom));
        background:linear-gradient(180deg, rgba(31,12,26,0) 0%, rgba(31,12,26,0.94) 38%);
        transform:translateY(110%);transition:transform 0.35s var(--easing);
        pointer-events:none;
    }
    .cta-fix.vizibil{transform:none;pointer-events:auto;}
    .cta-fix .btn{width:100%;}

    /* Recenziile: derulare nativa, un card intreg si marginea urmatorului, fara miscare
       automata (11.2026). Banda trasa cu inertie ramane pe ecranele mari. */
    .pareri-sir{
        width:auto;gap:16px;padding:16px clamp(20px,5vw,64px) 28px;
        overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 clamp(20px,5vw,64px);
        transform:none !important;cursor:auto;touch-action:auto;will-change:auto;
        scrollbar-width:none;overscroll-behavior-x:contain;
    }
    .pareri-sir::-webkit-scrollbar{display:none;}
    .pareri-sir .carte-postala[aria-hidden="true"]{display:none;}
    /* Cartea postala, doar cu ce se citeste: stelele, citatul, numele si orasul. */
    .carte-postala{grid-template-columns:1fr;width:82vw;max-width:400px;min-height:0;padding:22px 22px 18px;gap:6px;scroll-snap-align:start;filter:drop-shadow(0 16px 18px rgba(0,0,0,0.45));}
    .postala-mijloc,.postala-tip,.postala-dreapta .timbru,.postala-dreapta .stampila,
    .postala-pentru,.postala-rand{display:none;}
    .postala-dreapta{padding-top:0;}
    .postala-stanga p{margin-bottom:10px;}
    .postala-de-la{line-height:1.4;}
}
@media (max-width:600px){
    .erou-titlu{font-size:clamp(34px,9.5vw,48px);margin-bottom:22px;}
    .erou-lead{margin-bottom:26px;}
    .erou-actiuni{flex-direction:column;align-items:stretch;}
    /* „Cum funcționează" e in meniu; in primul ecran ramane un singur buton. */
    .erou-cum{display:none;}
    .poveste-vizual{padding:10px 0 40px;}
    .scrisoare-hartie{padding:32px 26px 50px 32px;}
    .scrisoare-hartie p{font-size:17px;line-height:30px;}
    .timbru{width:60px;height:74px;}
    .stampila{top:40px;right:46px;}
    .stampila-cerc{width:64px;height:64px;}
    .sigiliu{right:12px;bottom:-26px;transform:scale(0.78);transform-origin:bottom right;}
    .eticheta{padding:84px 24px 36px;min-height:0;}
}

/* ====================================================
   Mai putina miscare
   Ce ramane: tot continutul, asezat exact la fel. Ce pleaca: intrarile, balansul,
   stelele. Elementele care intra cu `opacity:0` trebuie facute vizibile
   explicit - altfel „fara animatie" ar insemna „pagina goala".
   ==================================================== */
@media (prefers-reduced-motion:reduce){
    .urca > span{transform:none;animation:none;}
    .erou-stele,.erou-card-play .inel{animation:none;}
    .erou-card{animation:none;opacity:1;}
    .erou-repere{animation:none;opacity:1;}
    .cta-fix{transition:none;}
    .eticheta-leagan{animation:none;}
    .eticheta-zona{opacity:1;transform:none;transition:none;}
    .scrisoare{opacity:1;transform:none;transition:none;}
    .erou-text .eyebrow,.erou-lead,.erou-actiuni{animation:none;opacity:1;}
    .capitol,.capitol img,.capitol-corp{transition:none;}
}

/* ====================================================
   CORTINA DE INTRO
   Un brad de lumina desenat de o scanteie, apoi marca, apoi cortina urca.
   Ruleaza o data pe sesiune (poarta e in acasa.js).
   ==================================================== */
/* Cortina nu mai blocheaza derularea (11.2026): pagina e desenata dedesubt din prima clipa,
   iar prima derulare, atingere sau tasta trimite cortina sus (acasa.js). */

.intro{
    position:fixed;inset:0;z-index:100;
    background:#0b0f1c;
    display:flex;align-items:center;justify-content:center;flex-direction:column;
    overflow:hidden;cursor:pointer;
    transform:translateY(0);
    transition:transform 1.1s cubic-bezier(.76,0,.24,1);
}
.intro.pleaca{transform:translateY(-101%);}
.intro-fundal{
    position:absolute;inset:0;
    background:radial-gradient(ellipse 70% 60% at 50% 46%, #1c2a44 0%, #121b31 45%, #0b1222 75%, #070b16 100%);
}
.intro-lumina{
    position:absolute;inset:0;
    background:
        radial-gradient(ellipse 55% 35% at 50% 100%, rgba(154,59,63,0.28), rgba(154,59,63,0) 70%),
        radial-gradient(ellipse 40% 30% at 50% 8%, rgba(232,184,90,0.10), rgba(232,184,90,0) 70%);
}
/* Scena pastreaza raportul 4:3 al desenului si lasa loc marcii dedesubt. */
.intro-scena{
    position:relative;
    width:min(92vw, calc((100vh - 150px) * 1.333), 860px);
    aspect-ratio:4/3;
}
.intro-marca{
    position:relative;margin-top:-2vh;
    display:flex;flex-direction:column;align-items:center;gap:6px;
    opacity:0;transform:translateY(16px);
    transition:opacity 1s var(--easing), transform 1s var(--easing);
}
.intro-marca.vizibil{opacity:1;transform:none;}
.intro-nume{
    font-family:var(--font-titlu);font-size:clamp(34px,5vw,60px);line-height:1;
    color:var(--text);text-shadow:0 4px 30px rgba(0,0,0,0.6);
}
.intro-nume b{color:var(--main);font-weight:400;}
.intro-logo{display:block;height:clamp(44px,7vw,84px);width:auto;filter:drop-shadow(0 4px 30px rgba(0,0,0,0.6));}
.intro-sub{font-style:italic;font-size:20px;color:rgba(247,238,227,0.85);}
.intro-sari{
    position:absolute;right:clamp(16px,4vw,48px);bottom:clamp(16px,4vw,48px);
    background:rgba(247,238,227,0.06);color:var(--text);
    border:1px solid rgba(247,238,227,0.25);
    border-radius:var(--radius-buton);
    padding:10px 20px;font-size:17px;cursor:pointer;
    transition:background 0.25s ease, border-color 0.25s ease;
}
.intro-sari:hover{background:rgba(247,238,227,0.12);border-color:rgba(247,238,227,0.5);}

@media (prefers-reduced-motion:reduce){
    /* Fara animatie, cortina nu mai are ce arata: intro.js cheama direct carligele,
       iar tranzitia de iesire se scurteaza la nimic. */
    .intro{transition:none;}
    .intro-marca{transition:none;opacity:1;transform:none;}
}

/* ====================================================
   FAQ (pagina de pornire)
   Doua coloane: antetul lipicios in stanga, intrebarile in dreapta.
   ==================================================== */
.faq-grila{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));
    gap:clamp(40px,6vw,96px);align-items:start;
}
.faq-antet{position:sticky;top:110px;}
.faq-antet h2{font-size:clamp(38px,4.6vw,66px);line-height:1.02;margin:0 0 20px;}
.faq-antet > p{margin:0;font-size:19px;color:rgba(59,31,43,0.75);}
.faq-antet .section-link{margin-top:22px;}

.section-crema .faq{max-width:none;margin:0;display:block;border-top:1px solid rgba(59,31,43,0.2);}
.section-crema .faq-item{border-bottom:1px solid rgba(59,31,43,0.2);}

.faq-intrebare{
    width:100%;text-align:left;background:none;border:0;cursor:pointer;
    padding:24px 0;
    display:flex;justify-content:space-between;align-items:center;gap:20px;
    font-family:var(--font-titlu);font-size:clamp(21px,1.8vw,26px);line-height:1.2;
    color:var(--text-pe-crema);
}
.faq-intrebare:hover{color:var(--rosu);}
/* Semnul `+` devine `×` prin rotatie, nu prin schimbarea caracterului: asa se poate
   anima, si ramane acelasi nod in DOM. */
.faq-semn{
    flex:none;width:34px;height:34px;border-radius:50%;
    border:1px solid rgba(59,31,43,0.3);
    display:flex;align-items:center;justify-content:center;
    font-size:22px;font-family:var(--font-text);line-height:1;
    transition:transform 0.4s ease;
}
.faq-item.deschis .faq-semn{transform:rotate(45deg);}

.section-crema .faq-raspuns{
    display:grid;grid-template-rows:0fr;
    transition:grid-template-rows 0.5s var(--easing);
    padding:0;
}
.faq-item.deschis .faq-raspuns{grid-template-rows:1fr;}
.section-crema .faq-raspuns > div{overflow:hidden;min-height:0;}
.section-crema .faq-raspuns p{
    margin:0 0 26px;font-size:19px;line-height:1.55;
    color:rgba(59,31,43,0.8);max-width:560px;
}

@media (max-width:1030px){
    .faq-antet{position:static;}
}
@media (prefers-reduced-motion:reduce){
    .section-crema .faq-raspuns,.faq-semn{transition:none;}
}