/* =============================================================================
   82 DESIGN - system.css
   Sursa UNICA de adevar pentru design system: tokenii de culoare, scara tipografica,
   limbajul de miscare si stratul care sterge decoratiunile vechi.
   Se incarca ULTIMUL pe fiecare pagina, deci tokenii de aici ii inlocuiesc pe cei
   din CSS-ul inline al fiecarei pagini (aceeasi specificitate, ordinea decide).
   ============================================================================= */

/* =============================================================================
   82 DESIGN — "NOCTURN"
   Sistem de design, revizia 2, 2026-08-14
   -----------------------------------------------------------------------------
   Prima revizie folosea un accent rosu-caramiziu cald pe fond aproape negru, cu
   serif editorial. Corect ca structura, dar exact paleta pe care o folosesc deja
   uneltele de AI — deci schimbam lumea, pastrand disciplina.

   Principiul ramane acelasi si e singurul care conteaza: O SINGURA CULOARE DE
   ACCENT. Varianta originala a site-ului avea cinci, topite intr-un gradient
   folosit de 24 de ori. Cand cinci culori impart aceeasi importanta, niciuna nu
   mai inseamna nimic.

   Ce se schimba: fundalul devine albastru-petrol adanc, iar accentul devine aqua
   luminos. Aqua pe petrol nu e o combinatie decorativa - e o relatie de LUMINA:
   accentul pare ca emite, nu ca e pictat. De aici vine si stratul de mai jos.

   --gradient-main si --gradient-cta raman definite, dar sunt culoare plata, ca
   toate cele 42 de utilizari din restul foilor de stil sa se corecteze dintr-un
   singur loc.
   ============================================================================= */
:root {
            /* ---- NOAPTE (tema implicita) ---- */
            --tint: 232, 244, 242;
            --bg-dark: #0B1013;
            --bg-rgb: 11, 16, 19;
            --bg-card: rgba(232, 244, 242, 0.028);
            --bg-deeper: #0C1A20;
            --bg-darker-mid: #0B171C;
            --bg-section-alt: #0E1F26;
            --bg-darkest: #071013;
            --browser-bg-1: #10202A;
            --browser-bg-2: #0C1A20;
            --browser-header-1: #162A34;
            --browser-header-2: #10202A;
            --cta-card-1: #10202A;
            --cta-card-2: #0C1A20;
            --toast-bg-1: 16, 32, 42;
            --toast-bg-2: 22, 42, 52;

            /* Textul nu e alb pur: are o urma rece, verzuie, ca sa apartina
               aceleiasi lumini ca accentul. */
            --white: #E8F4F2;
            --white-dim: rgba(232, 244, 242, 0.72);
            /* 0.44 dadea 4.02:1 pe fundalul inchis - sub pragul AA de 4.5.
               Textul secundar de pe tot site-ul foloseste acest token, deci o
               singura cifra rezolva ~80 de elemente. 0.48 da 4.57:1. */
            --white-muted: rgba(232, 244, 242, 0.48);
            --rule: rgba(232, 244, 242, 0.11);

            /* ACCENTUL VINE DIN LOGO.
               Am extras nuantele din sigla si le-am numarat: o treime din ea e
               CALDA - piersica #FA9C8C, portocaliu #FB9F6D, chihlimbar #FEC355 -
               iar restul curge spre magenta si cyan. Site-ul era aqua, adica exact
               partea din logo care are ponderea cea mai mica. De aici senzatia ca
               nu se potrivesc.

               Acum baza e calda, iar celelalte nuante din logo raman ca o urma:
               vezi --accent-glow si tenta particulelor de mai jos. Trecerea trebuie
               sa fie sub pragul la care o observi ca "gradient". */
            --accent: #FBA88F;          /* piersica din "82" */
            --accent-1: #FBA88F;
            --accent-2: #FEC355;        /* chihlimbarul, pentru accente secundare */
            --accent-3: #F58FA8;        /* trandafiriul, capatul cald dinspre magenta */
            /* Neutrele reci iau locul fostelor accent-4 si accent-5. Un al doilea
               accent ar reporni exact problema pe care o rezolvam. */
            --accent-4: #6B8A92;
            --accent-5: #6B8A92;
            /* Aqua e o culoare DESCHISA, deci textul de deasupra ei e fundalul. */
            --on-accent: #1A0F0C;   /* text pe accent cald */

            --gradient-main: var(--accent);
            --gradient-cta: var(--accent);

            /* ---- LUMINA ----
               Tokenii care fac diferenta dintre "plat" si "adancime". Suprafetele
               primesc o muchie luminata sus, ca si cum lumina ar veni de deasupra;
               accentul primeste un halou, ca sa para ca emite. */
            --glow-accent: 0 0 32px rgba(251, 168, 143, 0.30);
            --glow-accent-strong: 0 0 60px rgba(251, 168, 143, 0.38);
            --lit-edge: inset 0 1px 0 rgba(232, 244, 242, 0.07);
            /* Lumina ambientala poarta tranzitia: cald intr-o parte, o urma rece in
               cealalta. La aceste opacitati nu se citeste ca doua culori, ci ca o
               singura lumina care are temperatura. */
            --ambient-1: rgba(251, 168, 143, 0.13);
            --ambient-2: rgba(150, 110, 190, 0.11);
            --ambient-opacity: 1;
            --grain-opacity: 0;   /* vezi nota de la body::after */

            --noise-opacity: 0;
            --shadow-strong: 0 32px 80px -40px rgba(0, 0, 0, 0.85);
            --shadow-card: 0 20px 50px -30px rgba(0, 0, 0, 0.7);
            --shadow-pricing: 0 26px 60px -34px rgba(0, 0, 0, 0.75);
            --cursor-color: #E8F4F2;
            --mesh-opacity: 0;
            --particle-color: transparent;

            /* ---- MISCARE: un singur limbaj ----
               180ms, ease-out, opacitate + 6px. Peste linistea asta stau doua
               exceptii deliberate: lumina ambientala, care se misca in zeci de
               secunde, si legatura cu scroll-ul. */
            --t: 180ms;
            --ease: cubic-bezier(0.2, 0, 0.2, 1);

            /* ---- SCARA TIPOGRAFICA: raport 1.25 ---- */
            --fs-xs: 0.75rem;
            --fs-sm: 0.875rem;
            --fs-base: 1rem;
            --fs-md: 1.25rem;
            --fs-lg: 1.563rem;
            --fs-xl: 1.953rem;
            --fs-2xl: 2.441rem;
            --fs-3xl: 3.052rem;

            /* ---- CULORI SEMANTICE ----
               Separate de accent, deliberat: "a mers"/"n-a mers" trebuie sa se
               citeasca instant, iar accentul e rezervat pentru actiuni. */
            --ok: #4ADE9B;
            --err: #FF6B6B;
        }

        /* ---- ZI (tema deschisa) ----
           Nu o inversare naiva: aqua luminos pe hartie deschisa ar fi ilizibil, deci
           accentul coboara pana trece pragul de contrast, iar hartia pastreaza
           temperatura rece a noptii, ca sa fie evident ca sunt aceeasi marca. */
        [data-theme="light"] {
            /* ---- ZI ----
               Logo-ul are doua capete: unul cald (piersica, chihlimbar) si unul rece
               (albastru, mov, magenta). Noaptea il ia pe cel cald. Ziua il ia pe cel
               RECE - si asta nu e o inconsecventa, e cum functioneaza sigla: aceleasi
               culori, alt capat al drumului.

               Caramiziul incercat inainte era gresit din doua motive: pe hartie
               deschisa se murdareste, si oricum nu exista in logo - era doar
               piersica intunecata cu forta. Aici nu intunecam nimic: luam nuantele
               inchise care chiar sunt in sigla. */
            --tint: 27, 23, 48;
            --bg-dark: #F7F6FB;
            --bg-rgb: 247, 246, 251;
            --bg-card: rgba(27, 23, 48, 0.035);
            --bg-deeper: #EFEDF7;
            --bg-darker-mid: #F3F1FA;
            --bg-section-alt: #F1EFF9;
            --bg-darkest: #E7E4F2;
            --browser-bg-1: #211C38;
            --browser-bg-2: #17132A;
            --browser-header-1: #2C2547;
            --browser-header-2: #211C38;
            --cta-card-1: #EFEDF7;
            --cta-card-2: #F7F6FB;
            --toast-bg-1: 252, 251, 255;
            --toast-bg-2: 243, 241, 250;

            /* Cerneala: indigo foarte inchis, din familia movului. Nu negru. */
            --white: #1B1730;
            --white-dim: rgba(27, 23, 48, 0.76);
            /* La fel pe tema deschisa: 0.5 dadea 3.29:1. 0.61 da 4.61:1. */
            --white-muted: rgba(27, 23, 48, 0.65);
            --rule: rgba(27, 23, 48, 0.13);

            /* Accentul: movul-indigo din "Design", coborat cat sa treaca pragul de
               contrast pe hartie. Secundarele sunt vecinii lui din sigla. */
            --accent: #5B3FC4;
            --accent-1: #5B3FC4;
            --accent-2: #2F55B8;        /* albastrul */
            --accent-3: #8A3DB8;        /* spre magenta */
            --accent-4: #635E7A;
            --accent-5: #635E7A;
            --on-accent: #F7F6FB;

            --gradient-main: var(--accent);
            --gradient-cta: var(--accent);

            --glow-accent: 0 6px 20px -8px rgba(91, 63, 196, 0.35);
            --glow-accent-strong: 0 10px 30px -10px rgba(91, 63, 196, 0.42);
            --lit-edge: inset 0 1px 0 rgba(255, 255, 255, 0.95);
            --ambient-1: rgba(91, 63, 196, 0.06);
            --ambient-2: rgba(251, 168, 143, 0.05);   /* o urma din capatul cald */
            --ambient-opacity: 1;
            --grain-opacity: 0;

            --noise-opacity: 0;
            --shadow-strong: 0 30px 70px -40px rgba(30, 24, 60, 0.32);
            --shadow-card: 0 18px 44px -28px rgba(30, 24, 60, 0.22);
            --shadow-pricing: 0 24px 56px -32px rgba(30, 24, 60, 0.24);
            --cursor-color: #1B1730;
            --mesh-opacity: 0;
            --particle-color: transparent;
            --ok: #1F7350;
            --err: #B3271B;
        }

/* =============================================================================
   STRATUL DE SISTEM — se aplica peste tot ce e mai sus.
   -----------------------------------------------------------------------------
   Regulile de layout de mai sus (grila bento, submeniul, meniul mobil) sunt bune
   si raman neatinse. Ce se schimba aici e stratul decorativ care se adaugase
   peste ele: ecran de incarcare, cursor personalizat, zgomot, particule, pete de
   gradient, paralaxa. Fiecare a fost, la vremea lui, un efect impresionant.
   Impreuna comunicau "stim sa facem efecte", nu "avem gust".
   ============================================================================= */

/* ---- 1. CURSORUL SISTEMULUI SE INTOARCE -------------------------------------
   `cursor: none` pe <body> inlocuia peste tot cursorul cu un punct de 6px.
   Pentru cineva cu vedere slaba sau cu tremor, cursorul devenea imposibil de
   urmarit - si a fost si motivul pentru care a trebuit adaugat un hack separat
   care punea `cursor: pointer` inapoi pe cardurile din portofoliu. */
body { cursor: auto; }
.cursor-dot, .cursor-ring { display: none !important; }

/* ---- 2. STRATURILE DECORATIVE DISPAR ---------------------------------------- */
.noise,
.particles,
.hero-mesh,
.mesh-gradient,
.bento-blob,
.cta-orb,
.specialized-card-blob,
.floating-shapes,
.hero-scroll,
.loader { display: none !important; }

/* .cta-orb inca folosea rgba(226, 81, 59) si rgba(226, 81, 59) - indigo si roz din
   paleta veche, difuzate cu blur(120px). Erau ultimele doua pete de curcubeu din
   pagina si se vedeau ca doua aureole colorate in spatele sectiunii finale.
   .hero-scroll dispare fiindca `writing-mode: vertical-lr` il facea sa se suprapuna
   peste subtitlu pe ecrane scunde, iar un indicator "scroll" nu spune nimic ce nu
   spune deja pagina. */

/* ---- 3. UN SINGUR LIMBAJ DE MISCARE -----------------------------------------
   Toate tranzitiile devin identice. Diferentele de viteza intre elemente erau
   accidentale, nu intentionate, si se citeau ca lipsa de control. */
a, button, input, select, textarea,
.bento-card, .portfolio-card, .pricing-card, .faq-item, .faq-question,
.nav-links a, .nav-cta, .btn-magnetic, .btn-outline-glow, .theme-toggle,
.spec-card, .tech-item, .process-step, .dropdown-menu, .dropdown-menu a {
    transition-duration: var(--t) !important;
    transition-timing-function: var(--ease) !important;
}

/* Animatiile ambientale, cele care rulau la nesfarsit fara sa spuna nimic. */
.logo-num,
.hero-badge .badge-dot,
.scroll-line,
.marquee-item { animation: none !important; }

/* Dezvaluirea la scroll: aceeasi distanta, aceeasi durata, peste tot.
   Era `translateY(60px)` si `1s` - suficient cat sa se simta ca pagina "sare". */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 320ms var(--ease), transform 320ms var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
.portfolio-card { transition: opacity 320ms var(--ease), transform 320ms var(--ease); }

/* ---- 4. TIPOGRAFIA PREIA MUNCA PE CARE O FACEAU EFECTELE --------------------
   Instrument Serif capata vocea editoriala: erou, titluri de sectiune, manifest.
   Space Grotesk ramane strict pentru interfata. */
.hero h1,
.hero-copy h1,
.section-title,
.specialized-title,
.manifesto-title,
.cta h2,
.contact-info h2 {
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    letter-spacing: -0.022em;
    line-height: 1.04;
    text-wrap: balance;
}
.hero h1, .hero-copy h1 { font-size: clamp(2.8rem, 8vw, 6rem); }
.section-title, .cta h2, .contact-info h2 { font-size: clamp(2rem, 4.6vw, var(--fs-3xl)); }

/* Cursivul e accentul tipografic, nu ornament: il folosim o data per titlu. */
.section-title em, .cta h2 em, .contact-info h2 em, .hero .rotator, .hero-copy .rotator {
    font-style: italic;
    color: var(--accent);
}

/* Eticheta de sectiune: al treilea rol tipografic, monospatiat -
   vocabularul vizual al cuiva care chiar scrie cod. */
.section-tag, .hero-badge, .marquee-item, .nav-cta, .footer-credit {
    font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, monospace;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.section-tag { font-size: var(--fs-xs); color: var(--accent); }

/* Corpul de text respira si se opreste la ~62 de caractere. */
.hero-subtitle, .section-header p, .contact-info > p { max-width: 62ch; }

/* ---- 5. GEOMETRIE: coltrurile se strang ---------------------------------------
   Rotunjimile de 20-50px erau mostenite din aceleasi sabloane ca gradientul.
   O raza mica se citeste ca precizie; una mare, ca prietenie generica. */
.bento-card, .spec-card, .pricing-card, .portfolio-card, .contact-form,
.faq-item, .tech-item, .notification-toast, .chat-window, .dropdown-menu {
    border-radius: 4px;
}
.btn-magnetic, .btn-outline-glow, .nav-cta, .chat-send, .chat-btn,
.contact-form button, .cookie-banner button { border-radius: 2px; }

/* Chenarele devin linii de un pixel, nu suprafete cu blur. */
.bento-card, .spec-card, .pricing-card, .portfolio-card, .faq-item, .tech-item {
    border: 1px solid var(--rule);
    backdrop-filter: none;
}
.bento-card:hover, .spec-card:hover, .portfolio-card:hover, .tech-item:hover {
    border-color: var(--accent);
    transform: none;
}

/* ---- 6. ACCENTUL SE FOLOSESTE RAR -------------------------------------------
   Butonul principal e singurul element plin cu accent din pagina. Tot ce era
   "secundar dar colorat" devine linie neutra, ca ierarhia sa existe. */
.btn-magnetic, .contact-form button[type="submit"], .nav-cta {
    background: var(--accent);
    color: var(--on-accent);
    border: 1px solid var(--accent);
}
.btn-magnetic:hover, .contact-form button[type="submit"]:hover, .nav-cta:hover {
    background: transparent;
    color: var(--accent);
}
.btn-outline-glow {
    background: transparent;
    color: var(--white);
    border: 1px solid var(--rule);
    box-shadow: none;
}
.btn-outline-glow:hover { border-color: var(--accent); color: var(--accent); }

/* Textul cu gradient decupat nu mai are ce decupa - il facem culoare simpla,
   ca sa nu ramana dependent de -webkit-background-clip. */
.logo-num, .hero-word em, .stat-number, .price-value {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--accent);
}

/* ---- SEMNATURA TIPOGRAFICA DIN MENIU ----
   Inlocuieste imaginea. `82` in accent, `Design` in hartie, la aceeasi greutate. */
.logo-mark {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1.9rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--white);
    white-space: nowrap;
}
.logo-mark .logo-num { color: var(--accent); }
nav.scrolled .logo-mark { font-size: 1.55rem; }
@media (max-width: 968px) { .logo-mark { font-size: 1.6rem; } }

/* ---- 7. ACCESIBILITATE -------------------------------------------------------
   Focusul se vede. Inainte nu exista nicio stare vizibila la tastatura. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    background: var(--accent);
    color: var(--on-accent);
    padding: 12px 20px;
    font-size: var(--fs-sm);
    text-decoration: none;
}
.skip-link:focus { left: 0; }

/* Butonul "Setari cookies" din subsol: e un buton, nu un link (nu navigheaza
   nicaieri), dar trebuie sa arate ca vecinii lui din lista. */
.link-btn {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
}
.link-btn:hover { color: var(--accent); }

/* Campurile capcana pentru boti: invizibile pentru oameni, prezente in DOM.
   `display:none` nu e suficient - unii boti il detecteaza si sar peste camp. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* Acordul GDPR de sub formular. */
.form-consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: var(--fs-sm);
    color: var(--white-dim);
    margin: 0.4rem 0 1.2rem;
    line-height: 1.5;
}
.form-consent input[type="checkbox"] {
    width: 17px; height: 17px;
    margin-top: 2px;
    flex: 0 0 auto;
    accent-color: var(--accent);
    cursor: pointer;
}
.form-consent a { color: var(--accent); }
.form-consent.error { color: var(--err); }

/* Pictogramele de contact: SVG cu linie de 1.5px, in locul emoji-urilor.
   Emoji-urile se randau diferit pe fiecare sistem de operare, nu respectau nicio
   regula din pagina, iar un cititor de ecran le rostea "pioneza rotunda". */
.contact-icon svg { width: 18px; height: 18px; stroke: var(--accent); fill: none; stroke-width: 1.5; }
.contact-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border: 1px solid var(--rule); border-radius: 2px;
    flex: 0 0 auto;
}

/* ---- 8. MISCARE REDUSA -------------------------------------------------------
   Nu exista niciun bloc de acest fel in tot site-ul, desi rulau 27 de animatii.
   Pentru cineva cu tulburari vestibulare, pagina provoca ameteala. WCAG 2.3.3. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
    .reveal, .portfolio-card { opacity: 1 !important; transform: none !important; }
    .marquee-track { animation: none !important; }
}

/* ---- 9. PLASA DE SIGURANTA FARA JAVASCRIPT -----------------------------------
   `.reveal { opacity: 0 }` era starea implicita a majoritatii sectiunilor, iar
   vizibilitatea venea exclusiv dintr-un ascultator de scroll. Daca JS-ul esua -
   extensie de blocare, retea proasta, o eroare mai devreme in fisier - pagina
   ramanea goala. Acum lipsa JS-ului lasa continutul vizibil. */
.no-js .reveal, .no-js .portfolio-card { opacity: 1 !important; transform: none !important; }
.no-js .chat-widget { display: none; }

/* ---- SETUL DE PICTOGRAME ----
   Au inlocuit 93 de emoji folosite ca pictograme. Mostenesc culoarea contextului,
   deci se coloreaza cu accentul acolo unde trebuie si raman neutre in rest. */
.icon { width: 1em; height: 1em; display: block; }
.feature-icon, .why-card-icon, .highlight-icon, .hero-icon-wrapper {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--accent);
}
.feature-icon .icon, .why-card-icon .icon { width: 26px; height: 26px; }
.highlight-icon .icon { width: 22px; height: 22px; }
.hero-icon-wrapper .icon { width: 40px; height: 40px; }
.info-box-icon { color: var(--accent); display: inline-flex; }
.info-box-icon .icon { width: 20px; height: 20px; }
.lock .icon { width: 12px; height: 12px; opacity: .6; }

/* Textul de ajutor de sub campuri: propozitie normala, nu eticheta.
   Era monospatiat si cu majuscule, ceea ce il facea sa strige mai tare decat campul. */
.form-help {
    font-family: inherit;
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--fs-sm);
    color: var(--white-muted);
    display: block;
    margin-top: 0.5rem;
}

/* =============================================================================
   STRATUL IMMERSIVE
   -----------------------------------------------------------------------------
   Prima revizie a taiat 27 de animatii si a lasat pagina austera. Corectia nu e
   sa le punem inapoi - e sa construim UN sistem de adancime, in loc de douazeci
   si sapte de efecte care nu stiau unele de altele.

   Trei mecanisme, atat:
     1. LUMINA AMBIENTALA  - doua surse care se misca in zeci de secunde, fixe in
                             spatele intregii pagini. Nu se observa direct; se
                             observa cand lipseste.
     2. ADANCIME PE STRATURI - suprafetele au o muchie luminata sus si o umbra
                             jos, deci se citesc ca obiecte asezate in spatiu,
                             nu ca dreptunghiuri desenate.
     3. LEGATURA CU SCROLL-UL - lumina se deplaseaza cu derularea, printr-o
                             singura variabila CSS actualizata in requestAnimationFrame.

   Toate trei se opresc complet la `prefers-reduced-motion`.
   ============================================================================= */

/* ---- 1. LUMINA AMBIENTALA ---------------------------------------------------
   Un singur element fix, in spatele a tot. Animam DOAR `transform`, care ruleaza
   pe GPU si nu declanseaza recalcularea layoutului - spre deosebire de vechile
   .mesh-gradient, care isi schimbau pozitia la fiecare `mousemove`. */
body::before {
    content: "";
    position: fixed;
    inset: -25%;
    z-index: -2;
    pointer-events: none;
    opacity: var(--ambient-opacity);
    background:
        radial-gradient(closest-side circle at 28% 32%, var(--ambient-1), transparent 100%),
        radial-gradient(closest-side circle at 74% 68%, var(--ambient-2), transparent 100%);
    background-size: 62% 62%, 70% 70%;
    background-repeat: no-repeat;
    background-position: 18% 12%, 82% 78%;
    /* Fara `filter: blur()`. Un blur pe un element fix, cat tot ecranul, se
       recalculeaza la fiecare cadru si e una dintre cele mai scumpe operatii din
       browser. Gradientele radiale sunt deja difuze prin natura lor - blur-ul
       adauga cost, nu aspect. */
    /* FARA ANIMATIE PERPETUA.
       Era o miscare de 44 de secunde pe un element cat un ecran si jumatate. Fiind
       permanenta, compozitorul recompunea suprafata aia la fiecare cadru, tot
       timpul, si pe toata pagina - inclusiv cand nimeni nu se uita la ea. Masurat:
       3 cadre pe secunda din 7, adica jumatate din tot bugetul, pentru o deplasare
       pe care ochiul n-o observa oricum.
       Lumina se misca in continuare - dar cu DERULAREA, adica atunci cand se si
       intampla ceva pe ecran. */
    transform: translate3d(0, calc(var(--scroll, 0) * -70px), 0);
}

/* Grain fin peste tot: rupe benzile de culoare din gradientele mari si da
   suprafetei o textura. La 0.028 opacitate nu se vede ca zgomot, se simte ca
   material. (Vechiul `.noise` era la 0.035 SI peste un fundal deja aglomerat.) */
/* GRAIN-UL A FOST OPRIT.
   Un strat fix, cat tot ecranul, compozitat peste toata pagina. Il vedea nimeni
   constient - dar costa 3 cadre pe secunda din 15. Tokenul ramane, deci se poate
   reaprinde dintr-o singura valoare daca vreodata avem buget de cadre. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: var(--grain-opacity);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Fundalul propriu-zis trebuie sa ramana transparent pe sectiuni, altfel lumina
   de dedesubt e acoperita si tot stratul devine invizibil. */
body { background-color: var(--bg-dark); }
.hero, .services, .tech-stack, .specialized, .manifesto, .portfolio,
.process, .pricing, .faq, .cta, .contact { background-color: transparent; }

/* ---- 2. ADANCIME PE STRATURI ------------------------------------------------
   Muchie luminata sus + umbra jos. E toata diferenta dintre un card desenat si
   un card asezat. */
/* Suprafetele sunt LUMINATE, nu transparente.
   Prima incercare le-a facut `rgba(var(--bg-rgb), 0.55)` — adica fundalul insusi,
   cu opacitate. Pe un fond deja intunecat, rezultatul e un panou care dispare:
   cardurile din FAQ si din preturi devenisera invizibile. Corect e invers - o
   suprafata asezata mai sus prinde mai multa lumina decat fundalul, deci primeste
   un strat ADITIV de lumina, nu unul de umbra. */
/* FARA STICLA PE CARDURI.
   `backdrop-filter` cere browserului sa ia tot ce e in spatele elementului, sa il
   blureze si sa il recompoziteze - la fiecare cadru in care elementul e pe ecran.
   Pe un card arata bine. Pe DOUASPREZECE deodata, cat sunt in sectiunea de
   servicii, pagina cadea la 4 cadre pe secunda. Masurat: scoaterea lui singura
   urca la 14. Nu exista efect care sa merite atat.

   Suprafata ridicata se obtine oricum din stratul aditiv de lumina si din muchia
   luminata de sus - blurul nu adauga nimic ce se vede, doar cost. */
.bento-card, .spec-card, .pricing-card, .portfolio-card, .contact-form,
.faq-item, .tech-item, .dropdown-menu, .notification-toast {
    background-color: rgba(var(--tint), 0.05);
    border: 1px solid rgba(var(--tint), 0.12);
    box-shadow: var(--lit-edge), var(--shadow-card);
}
/* .chat-window a iesit din grupul de mai sus.

   Grupul e pentru carduri: suprafete asezate PE fundalul paginii, unde 5% tint
   se citeste ca un plan ridicat. Fereastra de chat nu e card - e un panou care
   pluteste peste continut oarecare. site.css ii daduse `background: var(--bg-dark)`,
   adica opac; regula de grup, incarcandu-se dupa, il inlocuia cu 5% si se vedea
   pagina prin mesaje.

   Pastreaza chenarul si umbra grupului - arata tot a suprafata ridicata - dar pe
   fond opac. Tokenul se intoarce singur pe tema deschisa. */
.chat-window {
    background-color: var(--bg-dark);
    border: 1px solid rgba(var(--tint), 0.12);
    box-shadow: var(--lit-edge), var(--shadow-card);
}
.bento-card:hover, .spec-card:hover, .portfolio-card:hover, .tech-item:hover {
    border-color: rgba(251, 168, 143, 0.42);
    box-shadow: var(--lit-edge), var(--shadow-card), 0 0 0 1px rgba(251, 168, 143, 0.12);
    transform: none;
}

/* Navigatia se aseaza peste continut, nu langa el. */
nav.scrolled {
    background: rgba(var(--bg-rgb), 0.72);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    box-shadow: var(--lit-edge), 0 1px 0 var(--rule);
}

/* ---- 3. ACCENTUL EMITE LUMINA -----------------------------------------------
   Diferenta dintre "aqua" si "aqua luminos" e ca a doua isi imprastie culoarea
   in jur. Un singur cuvant din erou o primeste - daca ar primi tot, n-ar mai fi
   lumina, ar fi fundal. */
.hero .rotator, .hero .rot-word, .hero-copy .rotator, .hero-copy .rot-word {
    color: var(--accent);
    text-shadow: 0 0 42px rgba(251, 168, 143, 0.32);
}
.btn-magnetic, .contact-form button[type="submit"], .nav-cta {
    background: var(--accent);
    color: var(--on-accent);
    border: 1px solid var(--accent);
    box-shadow: var(--glow-accent);
}
.btn-magnetic:hover, .contact-form button[type="submit"]:hover, .nav-cta:hover {
    background: transparent;
    color: var(--accent);
    box-shadow: var(--glow-accent-strong);
}
.section-tag { text-shadow: 0 0 24px rgba(251, 168, 143, 0.22); }
.hero-badge {
    background: rgba(var(--bg-rgb), 0.5);
    border: 1px solid var(--rule);
    box-shadow: var(--lit-edge);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.hero-badge .badge-dot {
    background: var(--accent);
    box-shadow: 0 0 12px rgba(251, 168, 143, 0.8);
    animation: badgePulse 3.2s ease-in-out infinite !important;
}
@keyframes badgePulse {
    0%, 100% { opacity: 1;   box-shadow: 0 0 12px rgba(251, 168, 143, 0.8); }
    50%      { opacity: .55; box-shadow: 0 0 4px  rgba(251, 168, 143, 0.4); }
}

/* Linia de sub linkurile din meniu se aprinde, nu doar apare. */
.nav-links a::after { background: var(--accent); box-shadow: 0 0 10px rgba(251, 168, 143, 0.6); }

/* ---- 4. DEZVALUIRE CU ADANCIME ----------------------------------------------
   Elementele nu doar apar: vin usor din spate. 8px si o urma de scale - sub
   pragul la care se observa ca animatie, peste pragul la care se simte spatiu. */
.reveal {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.995);
    transition: opacity 460ms var(--ease), transform 460ms var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }

/* ---- 5. MISCARE REDUSA ------------------------------------------------------
   Tot stratul de mai sus se opreste. Lumina ramane, dar nemiscata: ea e
   atmosfera, nu animatie. */
@media (prefers-reduced-motion: reduce) {
    body::before { animation: none !important; transform: none !important; }
    .hero-badge .badge-dot { animation: none !important; }
    .reveal, .portfolio-card { opacity: 1 !important; transform: none !important; }
}

/* Pe ecrane mici, blur-ul pe multe suprafete deodata costa cadre. Pastram
   lumina si muchia, renuntam la sticla. */
@media (max-width: 768px) {
    .bento-card, .spec-card, .pricing-card, .portfolio-card, .contact-form,
    .faq-item, .tech-item {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background-color: rgba(var(--tint), 0.055);
    }

}

/* Cardurile de pret si intrebarile: putin mai ridicate decat restul, fiindca sunt
   suprafetele pe care ochiul le cauta. */
.pricing-card, .faq-item { background-color: rgba(var(--tint), 0.055); }
.pricing-card.featured, .pricing-card.popular {
    background-color: rgba(var(--tint), 0.075);
    border-color: rgba(251, 168, 143, 0.35);
    box-shadow: var(--lit-edge), var(--shadow-pricing), 0 0 0 1px rgba(251, 168, 143, 0.14);
}
.faq-item + .faq-item { margin-top: 10px; }

/* Sectiunile alternative isi pierdusera fundalul cand le-am facut transparente ca
   sa se vada lumina. Le dam un strat propriu, foarte subtil, ca ritmul paginii sa
   ramana citibil. */
.tech-stack, .manifesto, .pricing { background-color: rgba(var(--tint), 0.018); }

/* ---- PANZA EROULUI (js/hero-particles.js) -----------------------------------
   Sta INTRE fundal si continut: peste grila si peste lumina ambientala, sub text.
   `pointer-events: none` e obligatoriu - altfel panza ar acoperi butoanele din
   erou si nu s-ar mai putea da clic pe ele. */
.hero-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    display: block;
}
/* Continutul eroului ramane deasupra si primeste toate clicurile.
   Padding-ul de sus e ce da cifrei 82 spatiul ei: fara el, titlul cadea fix peste
   sculptura de particule si nu se mai citea niciunul dintre ele. */
.hero-content { position: relative; z-index: 10; padding-top: clamp(118px, 21vh, 230px); }
@media (max-width: 700px) { .hero-content { padding-top: clamp(96px, 17vh, 160px); } }

/* Titlul sta peste particule, deci are nevoie de o baza care sa il tina lizibil
   indiferent cate puncte trec prin spatele lui. O umbra difuza, in culoarea
   fundalului, e suficienta si nu se vede ca dreptunghi. */
.hero h1, .hero-subtitle {
    text-shadow: 0 2px 26px rgba(var(--bg-rgb), 0.85), 0 0 60px rgba(var(--bg-rgb), 0.6);
}

/* ---- ECHILIBRUL EROULUI DUPA ADAUGAREA SCULPTURII ---------------------------
   Cu cifra 82 deasupra, titlul nu mai poate ocupa 7.5rem: eroul crestea la 1188px
   pe un ecran de 900 si butoanele ieseau sub linia de plutire. Titlul coboara ca
   dimensiune - are acum un partener vizual deasupra, deci nu mai trebuie sa duca
   singur toata greutatea. */
.hero { padding: 5rem 5% 3rem; }
.hero h1 { font-size: clamp(2.1rem, 5.4vw, 4.4rem); margin-bottom: 1.5rem; }
.hero-subtitle { font-size: clamp(0.95rem, 1.4vw, 1.1rem); margin-bottom: 2rem; }
.hero-badge { margin-bottom: 1.6rem; }

@media (max-height: 780px) {
    .hero h1 { font-size: clamp(1.9rem, 4.4vw, 3.2rem); }
    .hero-content { padding-top: clamp(96px, 17vh, 170px); }
}

/* =============================================================================
   SCENA (heroul) SI TEXTUL (al doilea moment)
   -----------------------------------------------------------------------------
   Pana acum, sculptura de particule si titlul se imparteau acelasi ecran: cifra
   nu avea loc sa fie mare, iar titlul era impins in jos de ea. Acum sunt doua
   momente separate - scena ocupa tot ecranul, textul vine dupa.
   ============================================================================= */
.hero.stage {
    min-height: 100vh;
    min-height: 100svh;      /* pe telefoane, bara de adresa nu mai taie scena */
    padding: 0;
    display: block;
    position: relative;
}
.hero.stage .hero-canvas { position: absolute; inset: 0; z-index: 1; }

/* Indicatorul de derulare: singurul element de interfata peste scena. */
.stage-cue {
    position: absolute;
    left: 50%;
    bottom: 3.2rem;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, monospace;
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--white-muted);
    pointer-events: none;
}
.stage-cue-line {
    width: 1px;
    height: 46px;
    background: linear-gradient(to bottom, var(--accent), transparent);
    opacity: 0.75;
}

/* Textul, ca al doilea moment. Aceleasi dimensiuni generoase pe care titlul nu si
   le putea permite cand impartea ecranul cu sculptura. */
.hero-copy {
    min-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 5%;
    text-align: center;
    position: relative;
}
.hero-copy .hero-content { padding-top: 0; max-width: 1100px; }
.hero-copy .hero h1, .hero-copy h1 { font-size: clamp(2.6rem, 7vw, 6rem); margin-bottom: 1.8rem; }
.hero-copy .hero-subtitle { font-size: clamp(1rem, 1.6vw, 1.22rem); margin-bottom: 2.4rem; }

@media (max-width: 700px) {
    .hero-copy { min-height: auto; padding: 4rem 6%; }
    .stage-cue { bottom: 2rem; }
}

/* ---- TITLUL, ACUM CA AL DOILEA MOMENT ---------------------------------------
   Selectorii vechi erau scrisi ca `.hero h1`. Dupa ce titlul s-a mutat din scena
   in sectiunea lui, niciunul nu mai gasea nimic - si h1 pierdea in tacere si
   fontul serif, si culoarea cursivului. Duplicam pe .hero-copy in loc sa
   rescriem, ca structura veche sa ramana valida daca cineva o refoloseste. */
.hero-copy h1 {
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    letter-spacing: -0.022em;
    line-height: 1.04;
    text-wrap: balance;
}
.hero-copy h1 em, .hero-copy .rotator {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    color: var(--accent);
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: 0 0 42px rgba(251, 168, 143, 0.30);
}
/* Umbra de lizibilitate nu mai are rost: aici nu mai trec particule prin spatele
   textului. O scoatem, ca literele sa fie curate. */
.hero-copy h1, .hero-copy .hero-subtitle { text-shadow: none; }
.hero-copy .hero-subtitle { text-shadow: none; }

/* =============================================================================
   INTEGRAREA: restul paginii vorbeste aceeasi limba ca scena
   -----------------------------------------------------------------------------
   Diagnostic, dupa ce am privit pagina intreaga dintr-o bucata:
   heroul e o sculptura, iar dupa el urmeaza TREISPREZECE sectiuni identice -
   eticheta centrata, titlu centrat, grila de carduri intunecate. Totul centrat,
   acelasi ritm, aceeasi distanta, nicio surpriza. Nimic din materialul heroului
   (structura de fire, lumina, adancime) nu continua mai jos, deci pagina se rupe
   in doua: un moment spectaculos si o brosura.

   Corectia nu e "mai multe efecte". Sunt patru mutari, toate din acelasi vocabular:

     1. O COLOANA VERTEBRALA in marginea stanga - firul din hero, continuat pe
        toata pagina, cu cate un nod la fiecare sectiune. Devine si indicator de
        progres, deci nu e decor: iti arata unde esti.
     2. CAPETE DE SECTIUNE ALINIATE LA STANGA, cu numar monospatiat si linie
        subtire. Sparge monotonia centrarii si introduce ritm editorial.
     3. COLTARE TEHNICE pe carduri - patru semne de unghi, ca pe un desen de
        executie. Ieftin, distinctiv, si spune "hand-coded" fara sa scrie.
     4. LUMINA URMEAZA CITITORUL - fundalul se deplaseaza cu derularea, deci
        pagina nu e o suprafata moarta sub continut.
   ============================================================================= */

/* ---- 1. COLOANA VERTEBRALA --------------------------------------------------
   Firul din sculptura, continuat pe toata pagina. Nodurile se pun din JS, la
   pozitia fiecarei sectiuni. */
.spine {
    position: fixed;
    left: 34px;
    top: 0;
    bottom: 0;
    width: 1px;
    z-index: 40;
    pointer-events: none;
    background: linear-gradient(to bottom,
        transparent 0,
        var(--rule) 12vh,
        var(--rule) 88vh,
        transparent 100%);
    opacity: 0;
    transition: opacity 400ms var(--ease);
}
.spine.on { opacity: 1; }

/* Portiunea parcursa, in accent: linia se aprinde in urma ta. */
.spine-fill {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--accent));
    box-shadow: 0 0 10px rgba(251, 168, 143, 0.5);
    height: 0;
}

/* Nodurile: cate unul per sectiune. Cel din dreptul sectiunii curente se aprinde. */
.spine-node {
    position: absolute;
    left: 50%;
    width: 5px; height: 5px;
    margin-left: -2.5px; margin-top: -2.5px;
    border-radius: 50%;
    background: var(--bg-dark);
    border: 1px solid var(--rule);
    transition: all 260ms var(--ease);
}
.spine-node.active {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 12px rgba(251, 168, 143, 0.8);
    transform: scale(1.5);
}

@media (max-width: 1100px) { .spine { display: none; } }

/* ---- 2. CAPETE DE SECTIUNE: ritm editorial, nu centrare la infinit ----------
   Numarul vine dintr-un contor CSS, deci nu trebuie atins niciun fisier HTML si
   nu se poate desincroniza daca se adauga sau se scoate o sectiune. */
main { counter-reset: sec; }
main > section { counter-increment: sec; }

.section-header {
    position: relative;
    max-width: 1200px;
    margin: 0 auto 4rem;
    text-align: left;
    padding-left: clamp(0px, 4vw, 68px);
}
.section-header.center { text-align: left; }

/* Numarul sectiunii, in marginea din stanga. */
.section-header::before {
    content: counter(sec, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0.15em;
    font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: var(--accent);
    opacity: 0.85;
}

/* Linia de deasupra fiecarui cap de sectiune, cu un nod la capat: acelasi semn
   grafic ca firele dintre particule. */
.section-header::after {
    content: "";
    position: absolute;
    left: 0;
    top: -2.2rem;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, var(--accent), var(--rule) 18%, transparent 92%);
    opacity: 0.55;
}

.section-header .section-tag { display: block; margin-bottom: 0.9rem; }
.section-header .section-title { max-width: 20ch; }
.section-header p { margin-left: 0; }

@media (max-width: 700px) {
    .section-header { padding-left: 0; margin-bottom: 2.6rem; }
    .section-header::before { position: static; display: block; margin-bottom: 0.6rem; }
    .section-header::after { top: -1.4rem; }
}

/* Manifestul si eroul raman centrate: sunt momente, nu capitole. Un ritm are
   nevoie si de exceptii, altfel devine tot monotonie, doar alta. */
.manifesto .section-header, .cta .section-header,
.manifesto-content, .cta > * { text-align: center; }
.manifesto .section-header::before, .manifesto .section-header::after,
.cta .section-header::before, .cta .section-header::after { content: none; }

/* ---- 3. CARDURILE: CURATE, NU INCARCATE ------------------------------------
   Aici erau "coltarele tehnice" - patru semne de unghi in colturile fiecarui card,
   care apareau la hover. Ideea era buna pe hartie. In pagina, peste ele veneau si
   inclinarea, si reflexia care urmareste cursorul, si chenarul care isi schimba
   culoarea: patru lucruri deodata pe acelasi obiect, la aceeasi atingere. Cardurile
   aratau ciufulite.

   Mai rau, era si un conflict tehnic: coltarele foloseau ::before si ::after, iar
   reflexia de la inclinare folosea tot ::after - deci se calcau una pe alta.

   A ramas un singur raspuns la hover: chenarul se aprinde in accent si suprafata se
   ridica putin. Un gest, clar. */
.bento-card, .spec-card, .pricing-card, .portfolio-card, .tech-item {
    position: relative;
}
.bento-card:hover, .spec-card:hover, .portfolio-card:hover,
.pricing-card:hover, .tech-item:hover {
    border-color: rgba(251, 168, 143, 0.45);
    background-color: rgba(var(--tint), 0.075);
}

/* ---- 4. DEZVALUIRE ESALONATA ------------------------------------------------
   Copiii unei grile intra unul dupa altul, nu toti odata. Diferenta dintre
   "sectiunea a aparut" si "sectiunea se construieste". */
.services-bento > .reveal:nth-child(1), .specialized-grid > .reveal:nth-child(1) { transition-delay: 0ms; }
.services-bento > .reveal:nth-child(2), .specialized-grid > .reveal:nth-child(2) { transition-delay: 70ms; }
.services-bento > .reveal:nth-child(3), .specialized-grid > .reveal:nth-child(3) { transition-delay: 140ms; }
.services-bento > .reveal:nth-child(4) { transition-delay: 210ms; }
.services-bento > .reveal:nth-child(5) { transition-delay: 280ms; }
.portfolio-card:nth-child(2) { transition-delay: 90ms; }
.portfolio-card:nth-child(3) { transition-delay: 180ms; }

/* ---- 5. RITM VERTICAL -------------------------------------------------------
   Toate sectiunile aveau exact 112px sus si jos. Un ritm identic la infinit se
   citeste ca lipsa de intentie: alternam, ca pagina sa respire diferit. */
main > section { padding-top: clamp(4.5rem, 9vh, 7rem); padding-bottom: clamp(4.5rem, 9vh, 7rem); }
main > section:nth-of-type(even) { padding-top: clamp(6rem, 13vh, 10rem); padding-bottom: clamp(6rem, 13vh, 10rem); }
.manifesto, .cta { padding-top: clamp(7rem, 16vh, 12rem); padding-bottom: clamp(7rem, 16vh, 12rem); }

@media (prefers-reduced-motion: reduce) {
    .spine-fill, .spine-node { transition: none !important; }
    [class*="reveal"] { transition-delay: 0ms !important; }
}

/* Ultimul slot de pictograma ramas cu emoji: cardurile de servicii specializate.
   Se randau colorate, in mijlocul unei palete cu un singur accent. */
.specialized-card-icon { color: var(--accent); display: inline-flex; }
.specialized-card-icon .icon { width: 26px; height: 26px; }

/* ---- CAPETELE CARE SCAPASERA DIN SISTEM ------------------------------------
   Doua sectiuni isi au propriile clase de cap (`.tech-stack-header`,
   `.specialized-header`) si ramasesera centrate in mijlocul unei pagini care
   trecuse pe ritm editorial aliniat la stanga. Un sistem cu doua exceptii
   nemotivate nu mai e sistem - le aducem la aceeasi regula. */
.tech-stack-header, .specialized-header {
    position: relative;
    max-width: 1200px;
    margin: 0 auto 3.2rem;
    text-align: left;
    padding-left: clamp(0px, 4vw, 68px);
}
.tech-stack-header::before, .specialized-header::before {
    content: counter(sec, decimal-leading-zero);
    position: absolute;
    left: 0; top: 0.15em;
    font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, monospace;
    font-size: 0.72rem; letter-spacing: 0.12em;
    color: var(--accent); opacity: 0.85;
}
.tech-stack-header::after, .specialized-header::after {
    content: "";
    position: absolute;
    left: 0; top: -2.2rem;
    width: 100%; height: 1px;
    background: linear-gradient(to right, var(--accent), var(--rule) 18%, transparent 92%);
    opacity: 0.55;
}
.tech-stack-label, .specialized-label, .specialized-tag {
    display: block;
    margin-bottom: 0.9rem;
}
.tech-stack-title, .specialized-title { max-width: 22ch; }
.specialized-header p, .tech-stack-header p { margin-left: 0; max-width: 62ch; }

@media (max-width: 700px) {
    .tech-stack-header, .specialized-header { padding-left: 0; }
    .tech-stack-header::before, .specialized-header::before { position: static; display: block; margin-bottom: 0.6rem; }
    .tech-stack-header::after, .specialized-header::after { top: -1.4rem; }
}

/* =============================================================================
   MATERIA: partea de CSS a lui immersive.js si field.js
   ============================================================================= */

/* ---- 1. LUMINA CARE URMEAZA CURSORUL ----------------------------------------
   Un halou fin, centrat pe cursor, peste toata pagina. Efectul nu e "sa se vada
   un cerc" - e ca suprafata sa para luminata din locul in care te uiti. De aceea
   e mare, foarte transparent, si fara margine vizibila.

   `mix-blend-mode: screen` face ca lumina sa se ADUNE peste ce e dedesubt in loc
   sa il acopere - un vopsit peste ar fi facut textul cenusiu. */
/* LUMINA DE CURSOR A FOST OPRITA.
   Ideea era buna - suprafata sa para luminata de acolo unde te uiti - dar costa
   inca 3 cadre din 15, iar efectul e sub pragul la care cineva l-ar observa daca
   dispare. Cand pagina va rula pe hardware cu accelerare, se poate reaprinde
   scotand `display: none`. */
.cursor-glow {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 620px; height: 620px;
    margin: -310px 0 0 -310px;
    transform: translate3d(var(--mx, -9999px), var(--my, -9999px), 0);
    background: radial-gradient(circle closest-side,
        rgba(251, 168, 143, 0.085), rgba(251, 168, 143, 0.032) 45%, transparent 72%);
    pointer-events: none;
    z-index: 3;
    will-change: transform;
    /* `contain` spune browserului ca nimic din interior nu influenteaza restul
       paginii, deci nu trebuie sa recalculeze nimic in jur cand se muta. */
    contain: strict;
}
/* FARA mix-blend-mode.
   Prima versiune folosea `screen` ca lumina sa se adune peste continut in loc sa
   il acopere. Corect ca intentie, scump ca executie: un element de 620px cu
   amestec de straturi obliga compozitorul sa reamestece o suprafata mare la
   FIECARE cadru in care se misca mouse-ul. Masurat: 8 cadre pe secunda din 32,
   adica un sfert din buget pentru un efect pe care nici nu-l vezi direct.
   Pe fond intunecat, un radial deschis cu alfa mica arata practic identic. */
[data-theme="light"] .cursor-glow {
    background: radial-gradient(circle closest-side,
        rgba(8, 128, 108, 0.055), rgba(8, 128, 108, 0.022) 45%, transparent 72%);
}

/* ---- 2. CARDURILE CU GROSIME ------------------------------------------------
   `transform-style: preserve-3d` si o tranzitie mai lunga la iesire decat la
   intrare: cardul raspunde prompt cand il atingi si se aseaza incet cand pleci,
   ceea ce se citeste ca greutate. */
.bento-card, .spec-card, .pricing-card, .portfolio-card {
    transform-style: preserve-3d;
    transition: transform 520ms var(--ease), border-color var(--t) var(--ease),
                box-shadow var(--t) var(--ease);
    will-change: auto;
}
.bento-card.tilting, .spec-card.tilting, .pricing-card.tilting, .portfolio-card.tilting {
    transition: transform 90ms linear, border-color var(--t) var(--ease),
                box-shadow var(--t) var(--ease);
    will-change: transform;
    z-index: 2;
}

/* Reflexia care se muta odata cu inclinarea. Fara ea, cardul se misca dar lumina
   de pe el ramane fixa - si creierul vede imediat ca e un truc. */
.bento-card.tilting::after, .spec-card.tilting::after,
.pricing-card.tilting::after, .portfolio-card.tilting::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 0;
    width: auto; height: auto;
    opacity: 1;
    background: radial-gradient(circle 320px at var(--gx, 50%) var(--gy, 50%),
        rgba(var(--tint), 0.04), transparent 72%);
    pointer-events: none;
    border-radius: inherit;
}

/* ---- 3. TITLURILE CARE SE DEZVALUIE -----------------------------------------
   clip-path se anima pe compositor, deci nu costa recalculari de layout - spre
   deosebire de o animatie pe inaltime, care le-ar cere la fiecare cadru. */
.wipe {
    clip-path: inset(0 0 108% 0);
    transform: translateY(0.18em);
    transition: clip-path 900ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.wipe.wiped {
    clip-path: inset(-25% -25% -25% -25%);
    transform: none;
}

/* ---- 5. CAMPUL DIN FINAL ----------------------------------------------------
   Sub continut, deasupra fundalului. Butonul ramane elementul cel mai luminos din
   sectiune - campul e material, nu concurenta. */
.cta { position: relative; overflow: hidden; }
.field-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    display: block;
}
.cta > *:not(.field-canvas) { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
    .cursor-glow { display: none; }
    .wipe { clip-path: none !important; transform: none !important; transition: none !important; }
    .bento-card, .spec-card, .pricing-card, .portfolio-card { transition: none !important; }
}

/* =============================================================================
   MENIUL MOBIL — reasezat
   -----------------------------------------------------------------------------
   PROBLEMA, reprodusa pe un ecran de 375x667 (iPhone SE, inca foarte folosit):
   lista de linkuri ocupa 500 de pixeli, iar comutatoarele de limba si de tema
   cadeau la 540 si 610 - adica butonul de tema era TAIAT de marginea de jos, iar
   peste amandoua venea si butonul de chat. Pe 844px se vedeau, deci bug-ul era
   invizibil daca testai doar pe un telefon mare.

   Cauza de fond nu e inaltimea, e IERARHIA: limba si tema erau tratate ca ultimele
   doua intrari dintr-o lista de navigatie, desi nu sunt destinatii - sunt setari.
   Ele urca intr-o bara proprie, sus, langa butonul de inchidere, unde raman
   vizibile indiferent cate linkuri are meniul. Lista devine zona care se deruleaza.
   ============================================================================= */
@media (max-width: 968px) {

    .nav-links.active {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        /* Loc pentru bara de setari de sus si pentru butonul de actiune de jos. */
        padding: 74px 0 96px !important;
        gap: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* ---- bara de setari, fixata sus ---- */
    .nav-links.active .lang-switch,
    .nav-links.active .theme-toggle-wrap {
        position: fixed;
        top: 18px;
        z-index: 3;
        margin: 0;
        padding: 0;
        border: 0 !important;
        background: transparent !important;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .nav-links.active .lang-switch { left: 20px; }
        /* Comutatorul de limba e mai lat decat pare (doua pastile + fundal), deci
       tema il calca la 118px. Masurat: se termina pe la 150. */
    .nav-links.active .theme-toggle-wrap { left: 168px; }
    .nav-links.active .lang-switch::after,
    .nav-links.active .theme-toggle-wrap::after { content: none !important; }

    /* ---- intrarile din lista: mai compacte ---- */
    .nav-links.active > li:not(.lang-switch):not(.theme-toggle-wrap):not(.menu-hint) {
        flex: 0 0 auto;
    }
    .nav-links.active > li > a {
        padding-top: 0.85rem !important;
        padding-bottom: 0.85rem !important;
        font-size: 1.32rem !important;
    }

    /* Indiciul era scris in engleza pe o pagina romaneasca, repeta ceva evident
       ("apasa un link ca sa navighezi") si mai si intra peste comutatoare. */
    .nav-links.active .menu-hint { display: none !important; }

    /* ---- butonul de actiune, fixat jos ----
       Era in afara panoului, deci la deschiderea meniului avea inaltime 0 si
       disparea complet - exact butonul pentru care exista tot site-ul. */
    body.menu-open .nav-cta {
        position: fixed !important;
        left: 20px;
        right: 20px;
        bottom: 22px;
        z-index: 1002;
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 1rem 1.5rem;
        font-size: 0.95rem;
        opacity: 1;
        visibility: visible;
    }
    body.menu-open .nav-cta .nav-cta-short { display: none; }
    body.menu-open .nav-cta .nav-cta-long { display: inline; }

    /* Chat-ul acopera exact coltul in care stau butonul de actiune si tema. */
    body.menu-open .chat-widget { display: none !important; }

    /* Fundalul paginii nu se mai deruleaza sub meniu. */
    body.menu-open { overflow: hidden; }
}

/* Ecrane foarte scunde (SE in landscape, telefoane vechi): si mai strans. */
@media (max-width: 968px) and (max-height: 700px) {
    .nav-links.active { padding-top: 66px !important; padding-bottom: 88px !important; }
    .nav-links.active > li > a {
        padding-top: 0.6rem !important;
        padding-bottom: 0.6rem !important;
        font-size: 1.15rem !important;
    }
}

/* =============================================================================
   NODURILE PROIECTELOR DIN SCENA
   Elemente reale, asezate peste panza. Vizibile doar in starea de retea, dar
   prezente in DOM tot timpul - pentru cititoare de ecran, tastatura si Google.
   ============================================================================= */
.stage-nodes {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}
.stage-node {
    position: absolute;
    top: 0; left: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 13px 7px 9px;
    margin: -18px 0 0 -14px;
    border: 1px solid transparent;
    border-radius: 3px;
    text-decoration: none;
    color: var(--white);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 420ms var(--ease), border-color 180ms var(--ease),
                background-color 180ms var(--ease);
}
.stage-nodes.on .stage-node { pointer-events: auto; }
.stage-nodes:not(.on) .stage-node { pointer-events: none !important; opacity: 0 !important; }

.stage-node-dot {
    width: 9px; height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 14px rgba(251, 168, 143, 0.9);
}
/* Proiectele in lucru: cerc gol, nu plin. Un semn de stare trebuie sa se vada
   si fara culoare - altfel nu il distinge cine nu percepe nuantele. */
.stage-node.wip .stage-node-dot {
    background: transparent;
    border: 1.5px solid var(--white-muted);
    box-shadow: none;
    animation: wipPulse 2.4s ease-in-out infinite;
}
@keyframes wipPulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }

.stage-node-info { display: flex; flex-direction: column; gap: 1px; }
.stage-node-name {
    font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, monospace;
    font-size: 0.74rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--white);
}
.stage-node-kind {
    font-size: 0.66rem;
    color: var(--white-muted);
    /* Subtitlul apare doar la hover: in repaus, sapte descrieri deodata ar fi un
       perete de text peste sculptura. */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 220ms var(--ease), opacity 220ms var(--ease);
}
.stage-node:hover, .stage-node:focus-visible {
    background: rgba(var(--bg-rgb), 0.82);
    border-color: var(--accent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.stage-node:hover .stage-node-kind,
.stage-node:focus-visible .stage-node-kind { max-height: 1.4em; opacity: 1; }
.stage-node:hover .stage-node-name { color: var(--accent); }

@media (max-width: 700px) {
    .stage-node { padding: 5px 9px 5px 7px; }
    .stage-node-name { font-size: 0.6rem; letter-spacing: 0.04em; }
    .stage-node-kind { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .stage-node.wip .stage-node-dot { animation: none; opacity: .7; }
}

/* Nodurile din jumatatea dreapta isi scriu numele spre STANGA, ca sa nu iasa din
   ecran. Punctul ramane pe pozitia lui reala; doar eticheta isi schimba sensul. */
.stage-node.flip {
    flex-direction: row-reverse;
    margin-left: 0;
}
.stage-node.flip .stage-node-info { align-items: flex-end; text-align: right; }
.stage-node.flip { justify-content: flex-start; }

/* =============================================================================
   PROIECTE ÎN LUCRU
   Un site neterminat aratat ca lucrare terminata se vede imediat si strica exact
   increderea pentru care exista portofoliul. In locul unei capturi premature,
   cardul primeste un wireframe desenat - din acelasi vocabular ca scena - si o
   stare declarata pe fata. Arata intentionat, nu neterminat.
   ============================================================================= */
.wip-canvas {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    background:
        /* nodurile */
        radial-gradient(circle 3px at 18% 30%, var(--accent), transparent 100%),
        radial-gradient(circle 3px at 46% 20%, var(--accent), transparent 100%),
        radial-gradient(circle 3px at 74% 34%, var(--accent), transparent 100%),
        radial-gradient(circle 3px at 30% 68%, var(--accent), transparent 100%),
        radial-gradient(circle 3px at 62% 76%, var(--accent), transparent 100%),
        radial-gradient(circle 3px at 88% 62%, var(--accent), transparent 100%),
        /* plasa */
        repeating-linear-gradient(58deg, rgba(var(--tint), 0.055) 0 1px, transparent 1px 46px),
        repeating-linear-gradient(-58deg, rgba(var(--tint), 0.055) 0 1px, transparent 1px 46px),
        rgba(var(--tint), 0.02);
}
.wip-stamp {
    font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, monospace;
    font-size: 0.62rem;
    letter-spacing: 0.24em;
    color: var(--white-muted);
    border: 1px solid var(--rule);
    padding: 8px 16px;
    background: rgba(var(--bg-rgb), 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Starea, cu cerc GOL, nu plin: se distinge si fara culoare. */
.status-badge.wip { color: var(--white-muted); border-color: var(--rule); }
.status-badge.wip .status-dot {
    background: transparent;
    border: 1.5px solid currentColor;
    box-shadow: none;
    animation: wipPulse 2.4s ease-in-out infinite;
}
/* Cardul in lucru nu se ridica la hover ca unul livrat: nu e inca o lucrare. */
.wip-card:hover { border-color: var(--rule); }
@media (prefers-reduced-motion: reduce) {
    .status-badge.wip .status-dot { animation: none; }
}

/* =============================================================================
   SCENA RAMANE, FOAIA URCA
   -----------------------------------------------------------------------------
   Scena devine `sticky` si ramane lipita sub continut pe toata inaltimea paginii.
   Tot restul intra intr-o foaie care aluneca peste ea - cu un colt rotunjit sus si
   o umbra deasupra, ca sa se citeasca clar ca un plan care se ridica, nu ca o
   sectiune care urmeaza.

   De ce foaia e OPACA: dedesubt ramane sculptura, care se misca. Un fundal
   translucid ar lasa particulele sa treaca prin spatele textului si nimic nu s-ar
   mai citi. Atmosfera e a scenei; foaia e pentru citit.
   ============================================================================= */
.hero.stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    /* FARA z-index. Cu `z-index: 0`, scena isi facea propriul context de stivuire
       SI era promovata pe un strat de compozitor (fiind sticky) - iar stratul ei
       ajungea peste foaie. Fara z-index, foaia (pozitionata si mai tarziu in
       document) se aseaza deasupra in mod natural, si nu mai trebuie promovata si
       ea ca sa se apere. */
}

.page-sheet {
    position: relative;
    z-index: 1;
    background: var(--bg-dark);
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -34px 70px -20px rgba(0, 0, 0, 0.72),
                inset 0 1px 0 rgba(var(--tint), 0.07);
    /* Muchia de sus prinde lumina, ca marginea unei placi reale. */
    border-top: 1px solid rgba(var(--tint), 0.09);
    /* FARA `overflow: hidden`.
       Il pusesem ca sa taie continutul in coltul rotunjit. Dar pe un element de
       14.000 de pixeli inaltime, overflow-ul obliga browserul sa mentina o zona de
       decupare uriasa: 9 cadre pe secunda cu el, 39 fara. Coltul arata la fel si
       fara - nimic din interior nu are fundal propriu chiar in varf. */

    /* NOTA ISTORICA: aici era `transform: translateZ(0)`, ca sa repare o problema
       de compozitare (indicatorul scenei se vedea prin foaia opaca). Dar promovarea
       insemna un strat de compozitor de 1440x14000 pixeli - o textura uriasa, care
       costa singura 4 cadre pe secunda. Reparatia corecta e mai jos: scoatem
       `z-index` de pe scena, ca sa nu mai fie ea cea promovata peste foaie.

       PROMOVARE PE STRAT PROPRIU — nu e optimizare, e o reparatie.
       Scena e `position: sticky`, iar browserul o promoveaza pe un strat de
       compozitor propriu ca sa o poata tine lipita fara sa redeseneze. Foaia,
       ramasa nepromovata, se desena in continut normal - si desi ordinea de
       stivuire o pune DEASUPRA (z-index 1 fata de 0), compozitorul aseza stratul
       scenei peste ea. Rezultatul: indicatorul "Derulează" si nodurile scenei se
       vedeau prin foaia opaca.

       Diagnostic: cu `background: red !important` aplicat DUPA incarcare (deci cu
       o reasezare fortata a straturilor) foaia acoperea corect; la randare normala,
       nu. Diferenta dintre cele doua cazuri e exact promovarea.

       `translateZ(0)` pune si foaia pe stratul ei, si atunci ordinea de stivuire
       redevine cea din specificatie. */
    /* transform: translateZ(0);  <- scos, vezi nota de mai sus */
}
[data-theme="light"] .page-sheet {
    box-shadow: 0 -30px 60px -24px rgba(10, 40, 50, 0.28),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Subsolul continua foaia, ca sa nu apara o cusatura intre ele. */
footer { position: relative; z-index: 1; background: var(--bg-darkest); }

/* Sectiunile din foaie nu mai sunt transparente: lumina ambientala ramane a
   scenei, iar foaia isi are propriul fundal. */
.page-sheet .hero, .page-sheet .services, .page-sheet .tech-stack,
.page-sheet .specialized, .page-sheet .manifesto, .page-sheet .portfolio,
.page-sheet .process, .page-sheet .pricing, .page-sheet .faq,
.page-sheet .cta, .page-sheet .contact { background-color: transparent; }

@media (max-width: 700px) {
    .page-sheet { border-radius: 18px 18px 0 0; }
}

/* Indicatorul de derulare dispare pe masura ce foaia urca: si-a facut treaba in
   clipa in care ai inceput sa derulezi. */
.stage-cue { transition: opacity 300ms var(--ease); }
body.sheet-up .stage-cue { opacity: 0; }

/* =============================================================================
   OPRIREA ANIMATIILOR CARE NU MAI DESENEAZA NIMIC
   -----------------------------------------------------------------------------
   `gradientShift` plimba `background-position` pe text decupat din gradient
   (`-webkit-background-clip: text`). Avea sens cat timp gradientul avea cinci
   culori: se vedea cum curge lumina prin litere.

   De cand paleta are un singur accent, --gradient-main e CULOARE PLATA - iar a
   plimba pozitia unui fundal plat nu produce absolut nicio schimbare vizibila.
   Numai ca browserul nu stie asta: repicta in continuare, la fiecare cadru,
   fiecare element care o avea. Erau 32 pe pagina - preturi, numere de intrebari,
   butoane, cuvantul rotativ, contoare.

   Masurat in sectiunea de portofoliu: 9 cadre pe secunda cu ele, 61 fara.
   Asta era, in cea mai mare parte, "merge greu".
   ============================================================================= */
.logo-num, .hero-word em, .stat-number, .price-value, .pricing-price,
.faq-num, .btn-magnetic, .rot-word, .pillar-num, .section-title em,
[class*="gradient"], .hero h1 em, .hero-copy h1 em {
    animation-name: none !important;
}


/* ---- ANIMATIILE CARE RULEAZA CAND NIMENI NU LE VEDE -------------------------
   `chatPulse` pulsa la infinit pe butonul de chat, care e `fixed` - deci era
   permanent pe ecran si repicta o umbra colorata la fiecare cadru, pe toata
   pagina. Un buton care clipeste non-stop e si o rugaminte insistenta, nu o
   invitatie: acum reactioneaza cand te apropii de el.

   `marqueeMove` continua sa deruleze banda si dupa ce iesise din ecran cu zece
   sectiuni mai sus. O oprim cand nu e vizibila (vezi js/immersive.js).

   Impreuna: 32 -> 41 cadre pe secunda in sectiunea de portofoliu. */
.chat-btn { animation: none !important; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.chat-btn:hover { transform: translateY(-2px); box-shadow: var(--glow-accent-strong); }

.marquee-track { animation-play-state: paused; }
.marquee.in-view .marquee-track { animation-play-state: running; }

/* ---- DEPASIREA PE ORIZONTALA ------------------------------------------------
   Cand am scos `overflow: hidden` de pe folie (costa 30 de cadre pe secunda), a
   iesit la iveala o depasire reala pe care o masca: banda rulanta are continutul
   de 1078px lat intr-un ecran de 390. Se repara la sursa - banda e prin definitie
   un element care isi taie continutul - nu ascunzand-o de pe tot documentul.

   Pe folie punem `overflow-x: clip`, nu `hidden`: `clip` doar taie, fara sa creeze
   o zona derulabila si fara sa forteze cealalta axa pe `auto`. E si mult mai
   ieftin - exact problema pe care o aveam. */
.marquee { overflow: hidden; }
/* Pe folie NU punem nimic: si `clip` costa la fel de mult ca `hidden` pe un
   element de 14.000 de pixeli (portofoliu 41 -> 26 cadre, final 59 -> 18).
   Reparata la sursa, depasirea nici nu mai exista. */

/* ---- GRILA DE PORTOFOLIU PE ECRANE MICI -------------------------------------
   Cardul iesea 16px in afara ecranului: coloana minima a grilei era mai lata decat
   spatiul ramas dupa marginile sectiunii, iar `1fr` nu poate cobori sub `min-content`
   decat daca i se spune explicit. `minmax(0, 1fr)` e exact acea permisiune.

   Depasirea era mascata pana acum de `overflow: hidden` de pe folie. Cand am scos
   overflow-ul (costa 30 de cadre pe secunda), a iesit la iveala - un exemplu bun de
   ce ascunderea unei probleme nu e acelasi lucru cu rezolvarea ei. */
@media (max-width: 900px) {
    .portfolio-grid, .services-bento, .specialized-grid, .pricing-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .portfolio-card, .bento-card, .spec-card, .pricing-card { min-width: 0; max-width: 100%; }
    .browser-mockup, .browser-content, .wip-canvas { max-width: 100%; }
}

/* ---- GOLUL DIN MIJLOCUL MENIULUI -------------------------------------------
   Lista era lipita de bara de sus, iar sub ultima intrare ramanea un sfert de ecran
   gol pana la butonul de actiune. Acum lista se centreaza pe verticala in spatiul
   dintre bara de setari si buton: pe ecrane inalte respira, pe cele scunde se
   comporta la fel ca inainte (derulabila), fiindca `justify-content: center` cedeaza
   automat cand continutul nu incape. */
@media (max-width: 968px) {
    .nav-links.active { justify-content: center; }
    /* Cand lista e mai lunga decat ecranul, centrarea ar taia primele intrari intr-un
       container derulabil. `safe center` cade inapoi pe aliniere la inceput. */
    @supports (justify-content: safe center) {
        .nav-links.active { justify-content: safe center; }
    }
}

}

/* O SINGURA STARE "IN LUCRU".
   Cardul Editurii folosea `.status-badge.progress` (din varianta originala a
   site-ului), iar cardurile adaugate ulterior `.status-badge.wip` - doua insigne
   care spun acelasi lucru dar arata diferit, pe aceeasi pagina. Marcajul a fost
   unificat pe `.wip`; regula de mai jos ramane ca plasa, daca reapare undeva
   clasa veche. */
.status-badge.progress { color: var(--white-muted); border-color: var(--rule); background: transparent; }
.status-badge.progress .status-dot {
    background: transparent;
    border: 1.5px solid currentColor;
    box-shadow: none;
    animation: wipPulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .status-badge.progress .status-dot { animation: none; } }

/* ---- STAREA "LIVE" ISI RECAPATA CULOAREA ------------------------------------
   `.status-badge.live` folosea `--accent-4`. Pe paleta veche, accent-4 era turcoaz
   - o culoare de "merge". Cand am unificat paleta pe un singur accent, accent-4 a
   devenit NEUTRUL rece: adica "Live" se afisa in gri mort, in timp ce cardul de
   invitatie de la final ramasese pe accent. Exact pe dos fata de ce trebuia sa
   comunice fiecare.

   Starea unui proiect e informatie SEMANTICA, nu decor - deci primeste culoarea
   semantica, nu accentul. Accentul ramane pentru actiuni. */
.status-badge.live {
    color: var(--ok);
    background: rgba(62, 156, 114, 0.10);
    border-color: rgba(62, 156, 114, 0.34);
}
[data-theme="light"] .status-badge.live {
    background: rgba(31, 115, 80, 0.10);
    border-color: rgba(31, 115, 80, 0.32);
}

/* =============================================================================
   FLASHBACK-UL DIN SIGLA (js/logo-flashback.js)
   -----------------------------------------------------------------------------
   Clar in mijloc, dizolvat pe margini. Masca radiala e piesa care face efectul:
   fara ea, cadrul ar fi un dreptunghi cu contur lipit sub bara - adica un carusel.
   Cu ea, imaginea se topeste in fundal si arata ca o amintire, nu ca o galerie.
   ============================================================================= */
.logo-hit {
    cursor: pointer;
    transition: color var(--t) var(--ease), text-shadow var(--t) var(--ease);
}
.logo-hit:hover { color: var(--accent); text-shadow: 0 0 26px rgba(251, 168, 143, 0.45); }

.logo-flash {
    position: absolute;
    top: calc(100% - 4px);
    left: 2.2rem;
    width: min(460px, 42vw);
    pointer-events: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 260ms var(--ease), transform 260ms var(--ease);
    z-index: 1001;
}
.logo-flash.on { opacity: 1; transform: none; }

.logo-flash-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    /* Marginile se dizolva in transparenta - de aici senzatia de flashback.
       Trecerea are TREI opriri, nu doua: cu doua, marginea mastii cadea peste
       zonele deschise ale capturii si se vedea un arc dur, ca un decupaj. Cu o
       treapta intermediara, dizolvarea e lunga si nu mai are muchie. */
    -webkit-mask-image: radial-gradient(ellipse 74% 68% at 50% 44%,
        #000 18%, rgba(0,0,0,0.72) 52%, rgba(0,0,0,0.22) 76%, transparent 93%);
            mask-image: radial-gradient(ellipse 74% 68% at 50% 44%,
        #000 18%, rgba(0,0,0,0.72) 52%, rgba(0,0,0,0.22) 76%, transparent 93%);
}

/* Un voal foarte fin in culoarea fundalului, peste captura: o aseaza in pagina in
   loc sa pluteasca deasupra ei ca o fereastra straina. */
.logo-flash-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 64% at 50% 44%,
        transparent 30%, rgba(var(--bg-rgb), 0.55) 78%, rgba(var(--bg-rgb), 0.9) 100%);
    pointer-events: none;
}

.logo-flash-img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: top center;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 620ms var(--ease), transform 1600ms var(--ease);
}
/* Cadrele se suprapun in tranzitie: unul iese in timp ce altul intra. */
.logo-flash-img.on { opacity: 1; transform: scale(1); }

.logo-flash-cap {
    display: block;
    margin-top: -0.4rem;
    text-align: center;
    font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, monospace;
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
}

@media (max-width: 1100px) { .logo-flash { display: none; } }

/* =============================================================================
   PROIECTELE CA PUNCTE DE REPER PE SCULPTURA (js/stage-projects.js)
   ============================================================================= */
.stage-pins {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
}

/* Punctul sta EXACT pe particula lui; eticheta creste in dreapta, deci marginile
   negative il centreaza pe coordonata primita din sculptura. */
.stage-pin {
    position: absolute;
    top: 0; left: 0;
    margin: -7px 0 0 -7px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 3px 9px 3px 3px;
    border: 1px solid transparent;
    border-radius: 20px;
    text-decoration: none;
    white-space: nowrap;
    pointer-events: auto;
    transition: background-color 200ms var(--ease), border-color 200ms var(--ease);
}
/* Zona de atingere e mai mare decat punctul: un tinta de 9px pe un obiect care
   se misca e prea greu de nimerit, mai ales cu trackpad. */
.stage-pin::before {
    content: "";
    position: absolute;
    left: -15px; top: -15px;
    width: 42px; height: 42px;
    border-radius: 50%;
}
.stage-pin-dot {
    width: 9px; height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px rgba(251, 168, 143, 0.16), 0 0 16px rgba(251, 168, 143, 0.85);
    animation: pinBeat 3.4s ease-in-out infinite;
}
.stage-pin:nth-child(2n) .stage-pin-dot { animation-delay: -1.1s; }
.stage-pin:nth-child(3n) .stage-pin-dot { animation-delay: -2.2s; }
@keyframes pinBeat {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 0 3px rgba(251, 168, 143,0.16), 0 0 16px rgba(251, 168, 143,0.85); }
    50%      { transform: scale(0.72); box-shadow: 0 0 0 2px rgba(251, 168, 143,0.08), 0 0 6px  rgba(251, 168, 143,0.4); }
}
/* Proiectele fara site: cerc gol, ca starea sa se distinga si fara culoare.

   Cercul chiar era gol: fond transparent, contur de 1.5px in --white-muted (0.48
   alpha) si niciun halou. Peste o sculptura de particule piersica, la 11px cat are
   punctul pe telefon, pur si simplu nu se mai vedea - se citea ca al saselea punct
   lipseste, nu ca proiectul n-are inca site.

   Ramane gol - asta e ce distinge starea de celelalte sase, care sunt pline si
   luminate - dar primeste cu ce sa se decupeze din ce trece pe dedesubt: un fond
   de culoarea scenei, un contur mai apasat si un inel intunecat in jur. Toate trei
   din tokeni, deci se intorc corect si pe tema deschisa, unde "alb-stins" e de
   fapt indigo. */
.stage-pin.no-reel .stage-pin-dot {
    background: rgba(var(--bg-rgb), 0.55);
    border: 2px solid var(--white-dim);
    box-shadow: 0 0 0 3px rgba(var(--bg-rgb), 0.5);
}

/* Numele apare doar la hover: sapte etichete deodata peste litere ar fi un perete
   de text, si n-ai mai vedea sculptura. */
.stage-pin-label {
    font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, monospace;
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--white);
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width 300ms var(--ease), opacity 220ms var(--ease);
}
.stage-pin-label em { font-style: normal; color: var(--white-muted); text-transform: lowercase; }
.stage-pin:hover, .stage-pin:focus-visible {
    background: rgba(var(--bg-rgb), 0.86);
    border-color: rgba(251, 168, 143, 0.4);
}
.stage-pin:hover .stage-pin-label,
.stage-pin:focus-visible .stage-pin-label { max-width: 16rem; opacity: 1; }
.stage-pin:hover .stage-pin-dot { animation: none; transform: scale(1.15); }

/* ---- AMINTIREA (caruselul 3D) --------------------------------------------
   Nu o fereastra cu rama in mijlocul paginii, ci o amintire care se destrama.
   Referinta e felul in care Desmond vede flashback-uri inainte sa intre in
   Animus: imaginea nu are contur, se pierde in aer pe margini, si pare ca
   sangereaza din realitatea din jur.

   Doua lucruri fac diferenta:
     · NICIO RAMA. Prima versiune avea chenar albastru si umbra dreptunghiulara -
       adica exact ce transforma o amintire intr-o poza pusa pe perete.
     · MARGINI CARE SE DIZOLVA, nu se taie. Masca radiala coboara in transparenta
       pe o distanta lunga, iar peste ea vine o ceata in culoarea scenei. De aproape
       imaginea e clara; spre margini nu mai stii unde se termina.
   ------------------------------------------------------------------------- */
.stage-reel {
    position: absolute;
    left: 50%;
    top: 47%;
    /* Mai mare decat fereastra de dinainte, dar fara contur - deci nu acopera
       sculptura, se suprapune peste ea. */
    width: min(620px, 44vw);
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.82);
    transition: opacity 620ms var(--ease), transform 900ms var(--ease);
}
.hero.stage.reel-on .stage-reel { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.stage-carousel {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    perspective: 1500px;
    transform-style: preserve-3d;
}

.stage-slide {
    position: absolute;
    inset: 0;
    transition: transform 1100ms var(--ease), opacity 1100ms var(--ease), filter 1100ms var(--ease);
    /* AICI se destrama imaginea. Masca merge pana la transparenta totala pe o
       distanta lunga, deci nu exista nicio muchie - nici macar una estompata. */
    -webkit-mask-image: radial-gradient(ellipse 68% 64% at 50% 46%,
        #000 8%, rgba(0,0,0,0.82) 38%, rgba(0,0,0,0.4) 62%, rgba(0,0,0,0.12) 80%, transparent 96%);
            mask-image: radial-gradient(ellipse 68% 64% at 50% 46%,
        #000 8%, rgba(0,0,0,0.82) 38%, rgba(0,0,0,0.4) 62%, rgba(0,0,0,0.12) 80%, transparent 96%);
}
.stage-slide img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* Ceata: un strat in culoarea scenei, care se ingroasa spre margini. Impreuna cu
   masca, imaginea pare ca iese din intuneric si se intoarce in el. */
.stage-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 62% 58% at 50% 46%,
            transparent 40%, rgba(var(--bg-rgb), 0.55) 76%, rgba(var(--bg-rgb), 0.95) 100%),
        radial-gradient(ellipse 90% 84% at 50% 46%,
            transparent 55%, rgba(251, 168, 143, 0.10) 85%, transparent 100%);
    pointer-events: none;
}

.stage-slide.d0 { transform: translate3d(0,0,0) scale(1);           opacity: 1;    filter: none; }
.stage-slide.d1 { transform: translate3d(5%, -4%, -190px) scale(1); opacity: 0.42; filter: blur(2px); }
.stage-slide.d2 { transform: translate3d(9%, -7%, -350px) scale(1); opacity: 0.16; filter: blur(4px); }
.stage-slide.d3 { transform: translate3d(12%, -9%, -500px) scale(1);opacity: 0;    filter: blur(6px); }
.stage-slide.out {
    transform: translate3d(-7%, 5%, 260px) scale(1);
    opacity: 0;
    filter: blur(6px);
}

.hero.stage .hero-canvas { transition: opacity 620ms var(--ease); }
.hero.stage.reel-on .hero-canvas { opacity: 0.55; }
.hero.stage.reel-on .stage-cue { opacity: 0; }

.stage-pin { transition: transform 900ms var(--ease), background-color 200ms var(--ease), border-color 200ms var(--ease); }

@media (prefers-reduced-motion: reduce) {
    .stage-slide { transition: none; }
    .stage-pin { transition: none; }
}

@media (max-width: 900px) {
    /* Pe telefon numele NU se ascunde: e singurul mod de a sti ce atingi. Se arata
       insa doar la punctul deschis, ca sa nu fie sapte etichete peste litere. */
    .stage-pin-label { display: none; }
    .stage-pin.open .stage-pin-label { display: inline; max-width: 14rem; opacity: 1; }
    .stage-pin.open { background: rgba(var(--bg-rgb), 0.9); border-color: rgba(251, 168, 143,0.5); }
    /* Tinta de atingere, dupa recomandarea minima pentru degete. */
    .stage-pin::before { left: -20px; top: -20px; width: 52px; height: 52px; }
    .stage-reel { width: 86vw; }
}

/* ---- SCENA PE TELEFON ----
   Caruselul ocupa aproape toata latimea, sculptura se retrage mai mult (pe ecran
   mic imaginea si punctele se calca altfel), iar punctele se vad mai bine. */
@media (max-width: 700px) {
    .stage-reel { width: 92vw; top: 45%; }
    .stage-carousel { perspective: 900px; }
    .stage-slide.d1 { transform: translate3d(4%, -3%, -120px) scale(1); }
    .stage-slide.d2 { transform: translate3d(7%, -5%, -230px) scale(1); }
    .hero.stage.reel-on .hero-canvas { opacity: 0.45; }
    .stage-pin-dot { width: 11px; height: 11px; }
}

/* =============================================================================
   INTRAREA IN SITE
   -----------------------------------------------------------------------------
   Animatiile originale erau `translateY(20px)` cu `ease` - adica lucruri care
   ALUNECA de jos. E gestul cel mai comun de pe web si, tocmai de aceea, cel mai
   putin memorabil: se citeste ca "a inceput sa se incarce".

   Ce face diferenta in interfetele Apple nu e distanta parcursa, sunt trei lucruri
   pe care le facem si aici:

     1. FOCALIZARE, nu deplasare. Continutul intra usor neclar si se limpezeste.
        Creierul citeste asta ca pe ceva care "vine spre tine", nu ca pe un obiect
        impins de jos. E si motivul pentru care se simte scump, nu incarcat.
     2. ARC, nu liniar. Curba porneste repede si se aseaza lung, fara sa treaca
        de tinta. Miscarea pare condusa, nu programata.
     3. SCARA MINUSCULA. 0.985 -> 1. Sub pragul la care observi ca ceva s-a marit,
        peste pragul la care simti ca s-a asezat.

   Distantele sunt mici (10px, nu 20) fiindca elementul nu trebuie sa CALATOREASCA
   pana la locul lui - trebuie sa AJUNGA in el.
   ============================================================================= */
@media (prefers-reduced-motion: no-preference) {

    /* TOATE regulile de mai jos sunt legate de clasa `.intro`, pusa pe <html> la
       incarcare si SCOASA dupa ce intrarea s-a terminat (vezi js/app.js).

       De ce conteaza: `animation: ... both` lasa elementul sub o animatie incheiata
       pentru totdeauna, iar browserul ii pastreaza stratul de compozitor cu tot cu
       conducta de filtre. Pe `nav` - fix, cat tot ecranul - si pe panza, asta costa
       cadre pe TOATA durata vizitei, nu doar la inceput.
       Masurat: cu animatiile lasate permanent, sectiunile cadeau la 9-23 de cadre. */

    /* Arcul: rapid la plecare, lung la asezare, fara depasire. */
    :root { --enter: cubic-bezier(0.16, 1, 0.3, 1); }

    @keyframes enterSoft {
        from { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.985); filter: blur(8px); }
        60%  { opacity: 1; }
        /* `filter: none`, NU `blur(0)`.
           Sunt lucruri diferite pentru browser: `blur(0)` lasa elementul in
           conducta de filtre, cu tot ce inseamna ea - strat de compozitor propriu
           si procesare la fiecare cadru. `none` o opreste complet.
           Masurat cu `blur(0)`: sectiunile au cazut de la 61 la 20 de cadre. */
        to   { opacity: 1; transform: none; filter: none; }
    }

    /* Inlocuim animatiile vechi, pastrand ordinea in care apar lucrurile. */
    .intro .hero-badge,
    .intro .hero-copy h1 .hero-line,
    .intro .hero-subtitle,
    .intro .hero-cta {
        animation: enterSoft 1100ms var(--enter) both !important;
    }
    .intro .hero-badge { animation-delay: 120ms !important; }
    .intro .hero-copy h1 .hero-line:nth-child(1) { animation-delay: 220ms !important; }
    .intro .hero-copy h1 .hero-line:nth-child(2) { animation-delay: 320ms !important; }
    .intro .hero-copy h1 .hero-line:nth-child(3) { animation-delay: 420ms !important; }
    .intro .hero-subtitle { animation-delay: 540ms !important; }
    .intro .hero-cta { animation-delay: 640ms !important; }

    /* Bara de sus si scena vin primele, si mai discret: ele sunt cadrul, nu
       subiectul. */
    .intro nav { animation: enterSoft 900ms var(--enter) both; animation-delay: 60ms; }
    .intro .hero-canvas { animation: enterSoft 1400ms var(--enter) both; animation-delay: 200ms; }
    .intro .stage-cue { animation: enterSoft 900ms var(--enter) both; animation-delay: 900ms; }

    /* SECTIUNILE DE LA DERULARE NU PRIMESC BLUR.
       Am incercat sa le dau acelasi tratament ca intrarii - limpezire din neclar -
       si a fost o greseala clara, prinsa la masuratoare: paginile au cazut de la
       61 la 22 de cadre pe secunda.

       Motivul nu e blur-ul in sine, ci CATE elemente il au deodata. La intrare sunt
       noua. Aici ar fi treizeci si patru, si aproape toate stau nedezvaluite sub
       linia de plutire - adica browserul tine treizeci si patru de straturi
       compozitate cu filtru activ, pentru ceva ce nu se vede inca.

       Deci: arcul si scara raman (ele nu costa nimic), blur-ul ramane doar acolo
       unde e putin si unde chiar se vede - la intrarea in site. */
    .reveal {
        transform: translate3d(0, 12px, 0) scale(0.992);
        transition: opacity 760ms var(--enter), transform 760ms var(--enter);
    }
    .reveal.visible { transform: none; }
}

/* ---- LOGOUL DIN HEADER -------------------------------------------------------
   Inapoi la sigla reala, nu la semnul tipografic. Motivul pentru care o scosesem
   la inceput - un PNG de 2,19 MB cu un curcubeu care contrazicea paleta - a
   disparut: fisierul are acum 3 KB (decupat la continut, servit ca WebP), iar
   paleta site-ului vine chiar din el.
   Se afiseaza la jumatate din rezolutia lui, deci ramane clar pe ecrane retina. */
.logo { display: inline-flex; align-items: center; gap: 0.6rem; }
/* Mai mare decat prima incercare (44/34): la 34px sigla devenea o pata colorata
   in care nu se mai distingea nimic. */
.logo-img { height: 76px; width: auto; display: block; }
nav.scrolled .logo-img { height: 56px; }
@media (max-width: 968px) { .logo-img { height: 42px; } }

/* Semnul tipografic ramane definit, ca rezerva daca imaginea nu se incarca. */
.logo-mark { display: none; }

/* =============================================================================
   LIZIBILITATE PE TELEFON
   -----------------------------------------------------------------------------
   Etichetele micro (majuscule, spatiate) arata bine pe monitor la 0.7rem, dar pe
   telefon coborau sub 12px - sub pragul de la care un text chiar se citeste, si
   erau doisprezece pe pagina de portofoliu, adica cifrele care conteaza.
   Nu schimbam desenul, doar ridicam pragul acolo unde ecranul e mic.
   Pragul e la 1024px, nu la 700: pe tableta etichetele erau exact la fel de mici.
   ============================================================================= */
@media (max-width: 1024px) {
    .project-stat-label,
    .tech-category-name { font-size: 0.75rem; letter-spacing: 1.2px; }
    .specialized-card-tag { font-size: 0.75rem; }
    .logo-tagline, .specialized-badge { font-size: 0.75rem; }

    /* Butonul din bara de sus era inalt de 26px cu degetul pe el. Recomandarea
       minima e 44px; il aducem acolo fara sa-l ingrosam vizual, prin zona de
       atingere, nu prin chenar. */
    .nav-cta {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        font-size: 0.78rem;
    }
    .bento-link { min-height: 44px; display: inline-flex; align-items: center; }

    /* Linkurile din subsol erau inalte de 18px: textul in sine. Intre ele erau
       13px de aer, deci degetul nimerea usor vecinul. Le dam inaltimea zonei de
       atingere din padding - randul se vede la fel, dar nu se mai rateaza. */
    .footer-links a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: 2px 0;
    }
    .footer-links li { margin-bottom: 0; }
}

/* Butonul de inchidere al ferestrei de chat era 13x27px - sub orice prag, si e
   singurul fel in care inchizi fereastra pe telefon. */
.chat-close {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: 50%;
}
.chat-close:hover { background: rgba(var(--tint), 0.10); }

/* =============================================================================
   CONTRAST — ULTIMELE EXCEPTII
   -----------------------------------------------------------------------------
   Cateva reguli isi scriau propria transparenta in loc sa foloseasca tokenul de
   text secundar, deci au ramas sub prag dupa ce am corectat tokenul. Le legam la
   el, ca sa nu mai iasa din rand data viitoare cand se schimba paleta.
   ============================================================================= */
.cta-card-subtitle { color: var(--white-muted); }
.logo-showcase-tag { color: var(--white-dim); }

/* =============================================================================
   BARA DE SUS PE TELEFON — STAREA DE LA PRIMA INTRARE
   -----------------------------------------------------------------------------
   CE ERA GRESIT
   Regulile care fac bara sa incapa pe telefon - ascunderea sloganului si
   scurtarea butonului - erau legate de `nav.scrolled`, deci se aplicau abia DUPA
   ce derulai. La prima incarcare, cand omul se uita prima data la site, in 390px
   se inghesuiau trei lucruri: logoul cu slogan (284px), butonul cu textul lung
   ("Incepe un proiect", 146px intr-un buton de 66px) si hamburgerul, care ieseau
   unul peste altul si pe langa marginea din dreapta.
   Ascunderea completa exista, dar la `max-width: 380px` - un iPhone de 390px o
   rata cu zece pixeli.

   CE FACEM
   Pe telefon bara are trei locuri, nu patru: logo, buton scurt, hamburger.
   Sloganul nu incape langa un buton, iar logoul il spune oricum - e chiar
   imaginea marcii. Si nu mai depinde de derulare: bara arata la fel din prima
   secunda pana la sfarsit, ceea ce e si mai linistit.
   ============================================================================= */
@media (max-width: 767px) {
    .logo-divider,
    .logo-tagline { display: none !important; }

    /* Butonul de actiune nu mai apare deloc pe telefon - vezi nota de la finalul
       fisierului. */

    /* Hamburgerul iesea 11px in afara ecranului fiindca randul se revarsa.
       Cu sloganul scos incape, dar ii fixam si un loc al lui, ca sa nu mai
       depinda de cat de lat e textul de langa. */
    nav {
        gap: 10px;
    }
    .mobile-btn {
        flex: 0 0 auto;
        margin-left: 2px;
    }
    .logo { flex: 0 1 auto; min-width: 0; }
}

/* =============================================================================
   MENIUL DESCHIS DUPA DERULARE — BUTONUL SAREA IN CAPUL LISTEI
   -----------------------------------------------------------------------------
   SIMPTOMUL
   Daca derulai si abia apoi deschideai meniul, butonul "Incepe un proiect" nu mai
   statea jos, ci se lipea sus, lat cat ecranul, peste comutatorul RO/EN, peste
   butonul de tema si peste X-ul de inchidere. Inainte de derulare era corect.

   CAUZA
   `nav.scrolled` capata `backdrop-filter: blur(18px)`. Un element cu
   `backdrop-filter` devine BLOC DE REFERINTA pentru urmasii lui `position: fixed`
   - la fel ca `transform`. Deci, o data derulat, `bottom: 22px` nu se mai masoara
   de la baza ferestrei, ci de la baza barei de sus, inalta de vreo 90px: adica
   fix in varful ecranului. Comutatoarele erau la locul lor; butonul se asezase
   peste ele.

   REPARATIA
   Cat timp meniul e deschis, bara nu mai are ce estompa - panoul din fata ei e
   opac. Ii scoatem filtrul, si o data cu el si blocul de referinta: `fixed`
   redevine raportat la fereastra, iar butonul se intoarce jos.
   ============================================================================= */
body.menu-open nav.scrolled,
body.menu-open nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Comutatoarele stau deasupra oricui in meniul deschis. */
@media (max-width: 900px) {
    body.menu-open .nav-links.active .lang-switch,
    body.menu-open .nav-links.active .theme-toggle-wrap {
        z-index: 1003 !important;
    }
}

/* =============================================================================
   BUTONUL DE ACTIUNE NU APARE PE TELEFON
   -----------------------------------------------------------------------------
   Pe un ecran de 390px bara de sus are loc pentru trei lucruri, si al treilea era
   mereu in plus: logoul, butonul si hamburgerul se calcau in picioare, iar in
   meniul deschis butonul se aseza peste comutatoarele de limba si de tema.

   Il scoatem, nu il mai imblanzim. Nu se pierde nimic: meniul are "Contact",
   pagina are butoane de actiune la finalul fiecarei sectiuni, iar in subsol e
   adresa de mail. Un singur indemn in plus, inghesuit intr-o bara de 390px, nu
   aducea o conversatie in plus - doar o bara aglomerata.

   Pe desktop ramane exact cum era: acolo chiar e loc pentru el.
   ============================================================================= */
@media (max-width: 900px) {
    .nav-cta,
    body.menu-open .nav-cta,
    nav.scrolled .nav-cta {
        display: none !important;
    }
}

/* =============================================================================
   RO / EN IN MENIUL DE TELEFON — COMUTATOR, NU DOUA BUTOANE
   -----------------------------------------------------------------------------
   Inainte: limba activa era o pastila piersica plina, lata de 1.5rem de o parte
   si de alta a textului, iar cealalta statea alaturi ca text simplu. Doua obiecte
   de marimi diferite, dintre care unul striga. Pe un ecran de telefon, langa un
   logo discret si un X subtire, arata ca un buton scapat din alta pagina.

   Acum: un singur chenar fin cu doua jumatati. Cea activa se umple discret, in
   tenta accentului, nu in accent plin. Se citeste ca un comutator - adica exact
   ce este - si nu mai concureaza cu nimic.
   ============================================================================= */
@media (max-width: 900px) {
    .nav-links.active .lang-switch {
        display: inline-flex !important;
        align-items: center;
        gap: 0;
        padding: 2px !important;
        border: 1px solid rgba(var(--tint), 0.16) !important;
        border-radius: 100px !important;
        background: rgba(var(--tint), 0.04) !important;
        border-left-width: 1px !important;
    }

    .nav-links.active .lang-btn {
        padding: 0.32rem 0.78rem;
        border-radius: 100px;
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.09em;
        line-height: 1.5;
        border: 0;
        background: transparent;
        /* Zona de atingere ramane de 40px, dar din spatiu invizibil in jur:
           butonul se vede mic, degetul are unde sa cada. */
        position: relative;
    }
    .nav-links.active .lang-btn::before {
        content: "";
        position: absolute;
        inset: -9px -4px;
    }

    .nav-links.active .lang-btn.active {
        /* Din accentul temei, nu dintr-o valoare fixa: pe tema deschisa
           accentul e violet, si o rezerva piersica ar fi fost gresita. */
        background: color-mix(in srgb, var(--accent) 18%, transparent) !important;
        color: var(--accent) !important;
    }
    .nav-links.active .lang-btn:not(.active) {
        background: transparent !important;
        color: var(--white-muted) !important;
    }

    /* Butonul de tema se aliniaza ca marime cu comutatorul de langa el. */
    .nav-links.active .theme-toggle {
        width: 32px;
        height: 32px;
        border-color: rgba(var(--tint), 0.16);
    }
    .nav-links.active .theme-toggle svg { width: 15px; height: 15px; }
}

/* Comutatorul de limba s-a ingustat de la 130px la 87px, iar butonul de tema era
   fixat la 168px pentru latimea veche - ramanea o gaura de 60px intre ele. Il
   aducem langa, cu un spatiu normal. */
@media (max-width: 900px) {
    .nav-links.active .theme-toggle-wrap { left: 120px !important; }
}