/* ============================================================
   iTech Media — Strat de mișcare 2026
   ------------------------------------------------------------
   ADITIV. Nu redefinește nicio culoare și nu atinge niciun text.
   Toate culorile vin din tokenii existenți (--rd-blue, --rd-cyan).

   REGULA CARE ȚINE TOT FIȘIERUL:
   mișcarea la scroll folosește proprietățile `translate` și `scale`,
   NU `transform`. Motivul: componentele existente (.rd-card, .rd-btn,
   .rd-statband .s, .rd-finder-card) au deja `transform` pe :hover.
   O animație care ar scrie tot în `transform` ar câștiga în cascadă
   și ar omorî ridicarea la survolare. `translate`/`scale` sunt
   proprietăți separate care se compun cu `transform`, deci cele două
   straturi de mișcare coexistă fără să se calce.

   Reveal-ul la derulare se face integral aici și în motion-2026.js
   (secțiunea 9 de mai jos). AOS a fost scos de pe site pe 2026-09-01.
   ============================================================ */

/* ------------------------------------------------------------
   1. BARA DE PROGRES LA SCROLL

   NU adăugăm o bară nouă: site-ul are deja `#scroll-progress`
   (header.php:349 pentru stil, :354 pentru element). O modernizăm.

   Cea existentă anima `width` dintr-un listener de scroll
   (footer.php), adică forța layout la fiecare cadru de derulare, pe
   toate cele 69 de pagini publice. Trecem pe `transform: scaleX()`,
   care rulează pe compositor, și lăsăm CSS-ul s-o conducă singur.
   Culoarea, înălțimea și z-index-ul rămân exact cele din header.php.
   ------------------------------------------------------------ */
/* `html` în față ridică specificitatea la 0-1-1. Regula originală
   (`#scroll-progress{width:0%;transition:width .1s}`) stă într-un bloc
   <style> din header.php:349, deci APOI de <link>-ul nostru din :238 și
   ar câștiga la specificitate egală. Nu folosim !important pentru asta. */
html #scroll-progress {
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: none;
    will-change: transform;
    pointer-events: none;
}
@supports (animation-timeline: scroll()) {
    html #scroll-progress {
        animation: itm-progress-grow linear both;
        animation-timeline: scroll(root block);
    }
    @keyframes itm-progress-grow {
        from { transform: scaleX(0); }
        to   { transform: scaleX(1); }
    }
}

/* ------------------------------------------------------------
   2. ADÂNCIME LA INTRAREA ÎN ECRAN
   Se aplică pe cardul INTERIOR, fiindcă părintele poartă [data-aos]
   și e deja animat de AOS. Așa cele două nu se ceartă.
   `translate` + `scale`, deci hover-ul (care e pe `transform`) rămâne intact.
   ------------------------------------------------------------ */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) and (min-width: 992px) {
        /* .rd-statband > .s e EXCLUS intenționat: are `transition: 0.3s`
           în formă scurtă, adică transition-property:all. Ar prinde și
           `translate`/`scale` scrise de animație, cadru cu cadru, cu 300ms
           de întârziere peste fiecare. Cifrele din bandă își au propriul
           reveal, mai jos la punctul 8. */
        .rd-bento-cat > .rd-cat-card,
        .rd-finder-grid > .rd-finder-card {
            animation: itm-rise linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 55%;
        }
        /* Deliberat FĂRĂ opacity. Dacă un card ajunge lângă finalul paginii
           și intervalul nu apucă să se încheie, cel mai rău caz e un card
           cu 22px mai jos și cu 2% mai mic. Cu opacity în joc, cel mai rău
           caz ar fi conținut permanent estompat. Apariția o face AOS. */
        @keyframes itm-rise {
            from { translate: 0 22px; scale: .98; }
            to   { translate: 0 0;    scale: 1; }
        }
    }
}

/* ------------------------------------------------------------
   3. PARALLAX AMBIENTAL
   `body::before` există deja (mesh-gradient decorativ, position:fixed).
   Îl legăm de scroll ca fundalul să se miște mai lent decât conținutul.
   Deplasare mică intenționat: peste ~15% creierul citește defect de
   randare, nu adâncime.
   ------------------------------------------------------------ */
@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) and (min-width: 992px) {
        body.page-index::before {
            animation: itm-ambient linear both;
            animation-timeline: scroll(root block);
        }
        @keyframes itm-ambient {
            from { translate: 0 -2.5%; scale: 1.05; }
            to   { translate: 0  2.5%; scale: 1.05; }
        }
    }
}

/* ------------------------------------------------------------
   4. LINIA CARE LEAGĂ PAȘII („Cum lucrăm împreună")
   Se desenează de la stânga la dreapta la intrarea în ecran.
   Clasa .itm-steps se pune pe rândul celor trei pași.
   ------------------------------------------------------------ */
.itm-steps { position: relative; }
.itm-steps::before {
    content: "";
    position: absolute;
    top: 0; left: var(--bs-gutter-x, 1.5rem); right: var(--bs-gutter-x, 1.5rem);
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(56, 189, 248, .45) 12%,
        rgba(37, 99, 235, .45) 88%,
        transparent);
    transform-origin: 0 50%;
    pointer-events: none;
}
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
        .itm-steps::before {
            animation: itm-draw linear both;
            animation-timeline: view();
            animation-range: entry 18% cover 34%;
        }
        @keyframes itm-draw {
            from { scale: 0 1; }
            to   { scale: 1 1; }
        }
    }
}
/* Fără suport pentru animation-timeline linia rămâne desenată complet:
   starea de bază e cea vizibilă, niciodată cea ascunsă. */
@media (max-width: 767.98px) {
    .itm-steps::before { display: none; }
}

/* ------------------------------------------------------------
   5. BUTOANE MAGNETICE
   JS scrie doar în `translate`. `transform` rămâne al hover-ului
   existent (.rd-btn-primary:hover { transform: translateY(-3px) }).
   ------------------------------------------------------------ */
/* Butoanele magnetice au fost SCOASE la cererea clientului (2026-08-04).
   Regula care rămâne valabilă din acea implementare, ca să nu se repete
   greșeala: `transition` e proprietate PRESCURTATĂ. O clasă utilitară
   care o declară ȘTERGE lista de transition-property a componentei pe
   care aterizează, în loc să adauge la ea. Vezi punctul 9 mai jos, unde
   fiecare componentă atinsă își reia lista proprie. */

/* ------------------------------------------------------------
   6. MARCHIZA DE LOGO-URI — pauză la survolare
   Banda există deja (.slide-track, animația scrollHome).
   Adăugăm doar controlul, ca omul să poată citi un logo.
   ------------------------------------------------------------ */
@media (hover: hover) {
    .slider-container:hover .slide-track,
    .slide-track:hover {
        animation-play-state: paused;
    }
}

/* ------------------------------------------------------------
   7. SUBLINIERE CARE CURGE PE LINKURILE DE SERVICIU
   .rd-cat-link are deja hover pe fundal și culoare; adăugăm
   o linie care intră dinspre stânga. Doar transform, fără layout.
   ------------------------------------------------------------ */
.rd-cat-link { position: relative; }
.rd-cat-link::after {
    content: "";
    position: absolute;
    left: 11px; right: 11px; bottom: 4px;
    height: 1px;
    background: var(--rd-cyan, #38bdf8);
    opacity: .55;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .32s cubic-bezier(.16, 1, .3, 1);
    pointer-events: none;
}
@media (hover: hover) {
    .rd-cat-link:hover::after { transform: scaleX(1); }
}
.rd-cat-link:focus-visible::after { transform: scaleX(1); }

/* ------------------------------------------------------------
   8. CIFRELE DIN BANDA DE STATISTICI
   Alunecă în poziție dintr-o mască, în loc să numere de la zero.
   Motivul e scris pe larg în motion-2026.js: o numărătoare ar afișa
   momentan „43% disponibilitate garantată", ceea ce pe un site de
   conformitate ISO e o declarație falsă prinsă într-o captură.
   Textul nu e atins de JavaScript, doar clasa.
   ------------------------------------------------------------ */
.rd-statband .s .n {
    font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: no-preference) {
    /* Fără clip-path aici: `.rd-statband .s` are deja `overflow: hidden`
       (redesign-2026.css:206), deci masca există. Deplasarea e oricum
       de o jumătate de em. */
    .itm-stat-n {
        transition: translate .7s cubic-bezier(.16, 1, .3, 1) var(--itm-delay, 0ms),
                    opacity .5s ease var(--itm-delay, 0ms);
    }
    /* Starea de plecare se aplică doar dacă JS a marcat elementul,
       deci fără JS cifra e de la bun început la locul ei. */
    .itm-stat-n:not(.itm-stat-in) {
        translate: 0 0.5em;
        opacity: 0;
    }
    .itm-stat-n.itm-stat-in {
        translate: 0 0;
        opacity: 1;
    }
}

/* ------------------------------------------------------------
   9. REVEAL LA SCROLL — ce ar fi trebuit să facă AOS

   AOS a fost pe site pana pe 2026-09-01, dar nu a functionat niciodata:
   `assets/vendor/aos.css` nu era legat din header.php, deci `aos.js` doar
   adauga clase pe care nu le stiliza nimic. Biblioteca a fost scoasa; reveal-ul
   il face stratul de aici.

   Nu se reintroduce aos.css: ar revendica `opacity`, `transform` si
   `transition-property` pe elementele purtatoare, la specificitate
   0-3-0, si s-ar bate cu hover-urile existente. Aici folosim `translate`
   (nu `transform`), ca hover-urile sa ramana intacte.

   Clasa .itm-rv o pune JS-ul. Fara JS nu apare nimic ascuns.
   NU ancoram pe [data-aos]: atributele acelea au ramas in pagini ca reziduu,
   nu sunt garantate si nu le mai intretine nimeni.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
    .itm-rv {
        transition: opacity .62s cubic-bezier(.16, 1, .3, 1) var(--itm-delay, 0ms),
                    translate .62s cubic-bezier(.16, 1, .3, 1) var(--itm-delay, 0ms);
    }
    .itm-rv:not(.itm-in) {
        opacity: 0;
        translate: 0 20px;
    }
    .itm-rv.itm-in {
        opacity: 1;
        translate: 0 0;
    }
    /* Aceeași capcană ca la butoanele magnetice: `.itm-rv` de mai sus
       declară `transition` prescurtat, deci pe orice componentă care avea
       deja o listă proprie, o șterge. Fiecare componentă atinsă își reia
       lista mai jos, cu opacity/translate anexate.

       .rd-finder-card: fără regula asta, cele patru carduri din „Spune-ne
       care e provocarea ta" săreau la survolare, în timp ce bara de accent
       de sus și săgeata continuau să curgă — inconsistent în același card. */
    .rd-finder-card.itm-rv {
        transition: opacity .62s cubic-bezier(.16, 1, .3, 1) var(--itm-delay, 0ms),
                    translate .62s cubic-bezier(.16, 1, .3, 1) var(--itm-delay, 0ms),
                    transform .35s var(--rd-ease),
                    border-color .35s,
                    box-shadow .35s;
    }
    .rd-card.itm-rv {
        transition: opacity .62s cubic-bezier(.16, 1, .3, 1) var(--itm-delay, 0ms),
                    translate .62s cubic-bezier(.16, 1, .3, 1) var(--itm-delay, 0ms),
                    transform .35s var(--rd-ease),
                    border-color .35s,
                    box-shadow .35s;
    }
    /* .spotlight-card are `transition: ... !important` cu listă fixă de
       proprietăți, care ar bloca tranziția noastră pe opacity/translate.
       Singurul loc din fișier unde folosim !important, și doar pe
       transition, niciodată pe culoare sau layout. */
    .spotlight-card.itm-rv {
        transition: opacity .62s cubic-bezier(.16, 1, .3, 1) var(--itm-delay, 0ms),
                    translate .62s cubic-bezier(.16, 1, .3, 1) var(--itm-delay, 0ms),
                    transform .35s cubic-bezier(.22, 1, .36, 1),
                    border-color .35s ease,
                    box-shadow .35s ease !important;
    }
}

/* ------------------------------------------------------------
   10. MEGA-MENIUL DE SERVICII

   Se deschide la survolare, iar „Servicii" rămâne link către pagina de
   servicii. Butonul cu săgeată de lângă el e comanda de deschidere
   pentru tastatură și pentru ecrane tactile, unde survolarea nu există.
   Comportamentul e în motion-2026.js, punctul 7.
   ------------------------------------------------------------ */
/* POZIȚIONAREA VERTICALĂ — obligatorie de când nu mai folosim Bootstrap.

   Bootstrap nu pune `top` pe `.dropdown-menu` direct, ci pe
   `.dropdown-menu[data-bs-popper]`, iar atributul îl adaugă Popper la
   deschidere. Fără Popper, panoul rămânea cu `top: auto`, adică pe poziția
   lui statică: se deschidea la 288px DEASUPRA ecranului, invizibil.
   Panoul e ancorat de `nav.fixed-top` (singurul strămoș poziționat), deci
   `top: 100%` înseamnă exact sub bara de meniu. */
.mega-menu {
    top: 100%;
}

.mega-nav-item {
    display: flex;
    align-items: center;
    gap: 1px;
}
.mega-nav-item > .mega-nav-link {
    padding-right: 4px;
}

.mega-disclosure {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 32px e sub minimul de 44px recomandat pentru atingere, dar butonul
       stă lipit de un link de 40px înălțime din aceeași grupă, iar zona
       lor combinată depășește pragul. Pe touch, oricum linkul e ținta
       principală, iar panoul se deschide din buton doar la nevoie. */
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    opacity: .75;
    cursor: pointer;
    transition: opacity .2s var(--ease, cubic-bezier(.16, 1, .3, 1)),
                background .2s var(--ease, cubic-bezier(.16, 1, .3, 1));
}
.mega-disclosure:hover,
.mega-disclosure:focus-visible {
    opacity: 1;
    background: rgba(255, 255, 255, .07);
}
.mega-disclosure:focus-visible {
    outline: 2px solid var(--rd-cyan, #38bdf8);
    outline-offset: 2px;
}
.mega-disclosure i {
    font-size: .62rem;
    transition: transform .25s var(--ease, cubic-bezier(.16, 1, .3, 1));
}
.mega-nav-item.show .mega-disclosure i {
    transform: rotate(180deg);
}

/* Sub 992px navbar-ul e colapsat: panoul curge în lista verticală,
   deci poziționarea absolută și săgeata nu mai au sens. */
@media (max-width: 991.98px) {
    .mega-nav-item { display: block; }
    .mega-disclosure { display: none; }
}

/* ------------------------------------------------------------
   10b-bis. GRILA CU TOATE CATEGORIILE (2026-09-09)
   Inlocuieste panoul pe trei zone. Motivul, masurat: bara cu 11
   pastile fixa panoul la 549px, dar nicio categorie n-are mai mult
   de 5 servicii, deci mijlocul ramanea gol pe ~70% din inaltime.
   Aici inaltimea vine din continut, deci golul e imposibil.
   Regulile .mega-split / .mega-rail / .mega-pane de mai jos raman
   pentru cazul in care se revine la varianta cu taburi; markup-ul
   nu le mai foloseste, iar JS-ul de taburi iese singur.
   ------------------------------------------------------------ */
.mega-cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px 24px;
    padding: 22px 26px 20px;
    align-items: start;
}
.mega-col-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--rd-border);
    font-size: .655rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--acc, var(--rd-cyan));
}
.mega-col-head .n {
    letter-spacing: 0;
    color: var(--rd-faint);
    font-variant-numeric: tabular-nums;
}
.mega-cols .mega-link { padding: 5px 8px; font-size: .8rem; }
.mega-cols .mega-link:hover,
.mega-cols .mega-link:focus-visible {
    background: color-mix(in srgb, var(--acc, var(--rd-blue)) 12%, transparent);
    border-color: color-mix(in srgb, var(--acc, var(--rd-cyan)) 25%, transparent);
    color: #fff;
}
.mega-cols .mega-link:hover i,
.mega-cols .mega-link:focus-visible i { color: var(--acc, var(--rd-cyan)); }

/* Ultima celula e panoul de ajutor: aceleasi stiluri, alt loc in grila. */
.mega-cols .mega-aside { border-left: 0; padding: 0; }

@media (max-width: 1399.98px) { .mega-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991.98px)  { .mega-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 14px 12px; } }
@media (max-width: 575.98px)  { .mega-cols { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------
   10b. PANOUL PE TREI ZONE
   Pastile de categorie la stânga, serviciile categoriei active la
   mijloc, panoul de ajutor la dreapta. Comportamentul e în
   motion-2026.js, punctul 7b.
   ------------------------------------------------------------ */
.mega-split {
    display: grid;
    /* 276px, nu 244: cel mai lat nume de categorie („Outsourcing IT și
       Rețelistică") măsoară 185px, iar la 244 avea loc doar 156px,
       deci se rupea pe două rânduri. Valoarea vine din măsurătoare,
       nu din ochi. */
    grid-template-columns: 288px minmax(0, 1fr) 252px;
    align-items: stretch;
}

/* --- zona 1: pastilele --- */
.mega-rail {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 16px 12px;
    border-right: 1px solid var(--rd-border);
}
.mega-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border-radius: 11px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--rd-dim);
    font: 700 .845rem/1.25 var(--rd-font-body);
    cursor: pointer;
    transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.mega-tab .pip {
    width: 7px; height: 7px;
    border-radius: 2px;
    background: var(--acc, var(--rd-cyan));
    opacity: .45;
    flex-shrink: 0;
    transition: opacity .18s var(--ease);
}
.mega-tab .lbl { min-width: 0; }
.mega-tab .cnt {
    margin-left: auto;
    flex-shrink: 0;
    font-size: .7rem;
    font-weight: 700;
    color: var(--rd-faint);
    font-variant-numeric: tabular-nums;
    transition: color .18s var(--ease);
}
.mega-tab:hover { background: rgba(255, 255, 255, .035); color: #fff; }
.mega-tab.sel {
    color: #fff;
    background: color-mix(in srgb, var(--acc, var(--rd-cyan)) 13%, transparent);
    border-color: color-mix(in srgb, var(--acc, var(--rd-cyan)) 26%, transparent);
}
.mega-tab.sel .pip { opacity: 1; }
.mega-tab.sel .cnt { color: var(--acc, var(--rd-cyan)); }
.mega-tab:focus-visible {
    outline: 2px solid var(--acc, var(--rd-cyan));
    outline-offset: -3px;
}

/* --- zona 2: serviciile --- */
.mega-body { padding: 16px 20px; min-width: 0; }
.mega-pane { display: none; }
.mega-pane.on { display: block; }
.mega-pane-head {
    padding-bottom: 9px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--rd-border);
}
.mega-pane-head b {
    color: var(--acc, var(--rd-cyan));
    font-size: .71rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.mega-pane-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 14px;
}
/* Linkurile preiau accentul categoriei curente. */
.mega-pane .mega-link:hover,
.mega-pane .mega-link:focus-visible {
    background: color-mix(in srgb, var(--acc, var(--rd-blue)) 12%, transparent);
    border-color: color-mix(in srgb, var(--acc, var(--rd-cyan)) 25%, transparent);
    color: #fff;
}
.mega-pane .mega-link:hover i,
.mega-pane .mega-link:focus-visible i { color: var(--acc, var(--rd-cyan)); }

/* --- zona 3: ajutorul --- */
.mega-aside {
    display: flex;
    flex-direction: column;
    padding: 16px 18px;
    border-left: 1px solid var(--rd-border);
}
.mega-aside-lbl {
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--rd-cyan);
    margin-bottom: 9px;
}
.mega-aside h3 {
    font-size: .93rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.35;
}
.mega-aside p {
    font-size: .78rem;
    color: var(--rd-dim);
    line-height: 1.55;
    margin: 0 0 12px;
}
.mega-hb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .76rem;
    color: var(--rd-dim);
    margin-bottom: 6px;
}
.mega-hb b { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.mega-hb i { color: var(--rd-cyan); font-size: .72rem; width: 14px; text-align: center; flex-shrink: 0; }
.mega-aside-cta {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rd-blue);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: .79rem;
    padding: 11px 14px;
    border-radius: 999px;
    box-shadow: 0 6px 18px -8px rgba(37, 99, 235, .34);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.mega-aside-cta:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -12px rgba(37, 99, 235, .42);
}
.mega-aside-note {
    font-size: .7rem;
    color: var(--rd-faint);
    text-align: center;
    margin: 8px 0 0;
    line-height: 1.5;
}

/* --- sub 1200px: ajutorul coboară sub servicii --- */
@media (max-width: 1199.98px) {
    .mega-split { grid-template-columns: 288px minmax(0, 1fr); }
    .mega-aside {
        grid-column: 1 / -1;
        border-left: 0;
        border-top: 1px solid var(--rd-border);
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 18px;
    }
    .mega-aside h3 { margin: 0; }
    .mega-aside p { margin: 0; max-width: 46ch; }
    .mega-aside-lbl { display: none; }
    .mega-aside-cta { margin: 0 0 0 auto; }
    .mega-aside-note { display: none; }
}

/* --- navbar colapsat: totul curge vertical --- */
@media (max-width: 991.98px) {
    .mega-split { display: block; }
    .mega-rail {
        flex-direction: row;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--rd-border);
        padding: 10px;
        scrollbar-width: none;
    }
    .mega-rail::-webkit-scrollbar { display: none; }
    .mega-tab { width: auto; white-space: nowrap; }
    .mega-pane-grid { grid-template-columns: 1fr; }
    .mega-aside { flex-direction: column; align-items: stretch; }
    .mega-aside-cta { margin: 10px 0 0; }
}

/* ------------------------------------------------------------
   11. CARDURILE DE SERVICIU — se aprind în culoarea diviziei

   Același efect ca la cardurile din „Spune-ne care e provocarea ta":
   fiecare divizie are culoarea ei, iar cardul se aprinde în acea
   culoare la survolare. `--accent` vine din `.rd-cat-group`
   (servicii.php) și coboară în toate cardurile grupei.

   În repaus cardurile rămân într-un singur registru, ca ochiul să
   poată scana lista. Culoarea apare doar sub cursor — altfel 27 de
   carduri în patru culori devin zgomot, nu ierarhie.
   ------------------------------------------------------------ */
.rd-svc-card {
    position: relative;
    overflow: hidden;
}

/* Bara de accent din marginea de sus, care se desenează de la stânga.
   E semnalul pe care îl are și cardul de finder. */
.rd-svc-card::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent, var(--rd-cyan)), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--ease, cubic-bezier(.16, 1, .3, 1));
    pointer-events: none;
}
@media (hover: hover) {
    .rd-svc-card:hover::after { transform: scaleX(1); }
}
.rd-svc-card:focus-visible::after { transform: scaleX(1); }

/* Bordura, medalionul, prețul și piciorul preiau culoarea diviziei. */
.rd-svc-card:hover {
    border-color: color-mix(in srgb, var(--accent, var(--rd-cyan)) 42%, transparent);
}
/* Tentă de culoare ÎN REPAUS, ca la cardurile de finder date ca model.
   Fundalul cardului capătă o urmă din culoarea diviziei, dinspre colțul
   din stânga sus. 4% e sub pragul la care ochiul citește „card colorat",
   dar suficient cât cele opt grupe să se distingă la derulare. */
.rd-svc-card {
    background-image: linear-gradient(155deg,
        color-mix(in srgb, var(--accent, var(--rd-cyan)) 7%, transparent),
        transparent 62%);
}
.rd-svc-card:hover {
    background-image: linear-gradient(155deg,
        color-mix(in srgb, var(--accent, var(--rd-cyan)) 13%, transparent),
        transparent 68%);
}

/* Medalionul e umplut cu accentul, exact ca `.rd-finder-ic`:
   `linear-gradient(135deg, var(--accent), rgba(15,23,42,.4))` plus umbra
   colorată. Ăsta e semnalul cromatic care se vede fără survolare. */
.rd-svc-card .rd-svc-ic {
    color: #fff;
    background: linear-gradient(135deg, var(--accent, var(--rd-cyan)), rgba(15, 23, 42, .4));
    box-shadow: 0 8px 22px -10px var(--accent, var(--rd-cyan));
    border: 1px solid color-mix(in srgb, var(--accent, var(--rd-cyan)) 30%, transparent);
    transition: background .3s var(--ease, cubic-bezier(.16, 1, .3, 1)),
                transform .3s var(--ease, cubic-bezier(.16, 1, .3, 1)),
                border-color .3s var(--ease, cubic-bezier(.16, 1, .3, 1));
}
.rd-svc-card:hover .rd-svc-ic {
    box-shadow: 0 10px 28px -8px var(--accent, var(--rd-cyan));
    border-color: color-mix(in srgb, var(--accent, var(--rd-cyan)) 52%, transparent);
}
.rd-svc-price {
    /* Pretul e text de 12px, deci pragul e 4,5 — nu 3:1 ca la iconuri si
       linii. Doua accente picau ca text (#a855f7 = 4,29, #3b82f6 = 4,61
       pe card): 22% alb le ridica pe toate opt peste 5,87, fara sa atinga
       harta de accente din config.php, care ramane corecta pentru decor. */
    color: color-mix(in srgb, var(--accent, var(--rd-cyan)), #fff 22%);
}
.rd-svc-card:hover .rd-svc-foot .more,
.rd-svc-card:hover .rd-svc-foot .arrow {
    color: var(--accent, var(--rd-cyan));
}

/* Capul de categorie: linia orizontală preia și ea culoarea diviziei,
   ca legătura dintre titlu și carduri să fie evidentă. */
.rd-cat-group-head .line {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--accent, var(--rd-cyan)) 45%, transparent),
        transparent);
}

/* ------------------------------------------------------------
   12. TRIMITEREA CĂTRE PAGINA NIS 2 (doar pe serviciul de cybersecurity)
   ------------------------------------------------------------ */
.rd-related-nis2 {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 0 0 34px;
    padding: 18px 20px;
    text-decoration: none;
    border: 1px solid color-mix(in srgb, var(--rd-amber, #f59e0b) 26%, transparent);
    border-radius: var(--rd-radius, 18px);
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--rd-amber, #f59e0b) 9%, transparent),
        transparent 62%);
    transition: border-color .28s var(--ease, cubic-bezier(.16, 1, .3, 1)),
                background .28s var(--ease, cubic-bezier(.16, 1, .3, 1));
}
@media (hover: hover) {
    .rd-related-nis2:hover {
        border-color: color-mix(in srgb, var(--rd-amber, #f59e0b) 48%, transparent);
        background: linear-gradient(160deg,
            color-mix(in srgb, var(--rd-amber, #f59e0b) 14%, transparent),
            transparent 62%);
    }
}
.rd-related-nis2:focus-visible {
    outline: 2px solid var(--rd-amber, #f59e0b);
    outline-offset: 3px;
}
/* Iconul stă în dreptul primului rând de text, conform regulii de casă. */
.rd-related-nis2 > .ico-align {
    --itm-line: calc(0.96rem * 1.45);
}
.rd-related-ic {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    font-size: .95rem;
    color: var(--rd-amber, #f59e0b);
    background: color-mix(in srgb, var(--rd-amber, #f59e0b) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--rd-amber, #f59e0b) 24%, transparent);
}
.rd-related-txt {
    font-size: .87rem;
    line-height: 1.6;
    color: var(--rd-dim);
    max-width: 68ch;
}
.rd-related-txt strong {
    display: block;
    font-size: .96rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 3px;
    line-height: 1.45;
}
.rd-related-go {
    margin-left: auto;
    align-self: center;
    flex-shrink: 0;
    color: var(--rd-amber, #f59e0b);
    font-weight: 700;
    transition: transform .28s var(--ease, cubic-bezier(.16, 1, .3, 1));
}
@media (hover: hover) {
    .rd-related-nis2:hover .rd-related-go { transform: translateX(4px); }
}
@media (max-width: 575.98px) {
    .rd-related-nis2 { gap: 12px; padding: 15px 16px; }
    .rd-related-go { display: none; }
}

/* ------------------------------------------------------------
   MIȘCARE REDUSĂ — totul dispare, informația rămâne
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    #scroll-progress { display: none; }
    .itm-steps::before { scale: 1 1; }
    .itm-magnetic { transition: none; translate: none !important; }
    .rd-bento-cat > .rd-cat-card,
    .rd-finder-grid > .rd-finder-card,
    body.page-index::before {
        animation: none !important;
        translate: none !important;
        scale: none !important;
        opacity: 1 !important;
    }
    .rd-cat-link::after { transition: none; }
    .mega-disclosure, .mega-disclosure i { transition: none; }
    .rd-svc-card::after { transition: none; }
    .rd-svc-card .rd-svc-ic { transition: none; }
    .itm-rv, .itm-rv:not(.itm-in) {
        opacity: 1 !important;
        translate: none !important;
        transition: none !important;
    }
    .itm-stat-n, .itm-stat-n:not(.itm-stat-in) {
        opacity: 1 !important;
        translate: none !important;
    }
}

/* ------------------------------------------------------------
   12. TITLURI CU MAI MULTE PROPOZIȚII

   Regula: ruptura cade ÎNTRE propoziții, niciodată în mijlocul
   uneia. `text-wrap: balance` nu garanteaza asta, iar <br> nu se
   adapteaza la latime — de-aceea fiecare propozitie primeste
   propriul element.

   .rd-h-fraza       → inline-block: propozitia ramane intreaga daca
                       incape; daca nu incape, se rupe normal, dar
                       nu impinge propozitia urmatoare langa ea.
   .rd-h-fraza-noua  → block: incepe garantat pe rand nou.
   ------------------------------------------------------------ */
.rd-h-fraza {
    display: inline-block;
}
.rd-h-fraza-noua {
    display: block;
}

/* ------------------------------------------------------------
   13. TITLURILE PAȘILOR NU INTRĂ PESTE CIFRA DECORATIVĂ

   Cardurile din „Cum lucrăm împreună" au un filigran mare în colț
   (.step-number, 48px, albastru la 15%, pozitionat absolut). Titlul
   e alb si sta deasupra, deci ramane lizibil chiar si suprapus —
   dar arata ca o scapare, nu ca o intentie.

   Masurat la 992px inainte de regula: cardul 1 era la -1px (adica
   lipit), iar cardul 3 intra 51px peste cifra. Rezervam latimea
   filigranului, ca titlul sa se rupa inainte sa-l atinga.

   `:has()` tine regula in CSS, fara sa depinda de JavaScript.
   ------------------------------------------------------------ */
.rd-card:has(> .step-number) h5 {
    padding-right: 76px;
}
@media (max-width: 575.98px) {
    /* Pe telefon cardul e ingust si titlul are nevoie de toata latimea;
       filigranul se micsoreaza oricum sub 40px. */
    .rd-card:has(> .step-number) h5 { padding-right: 56px; }
}

/* ------------------------------------------------------------
   14. MASURA TEXTULUI PE PAGINILE DE CONTINUT

   Masurat pe despre-noi.php: 6 din 13 paragrafe depaseau 80 de
   caractere pe rand. Tinta e 50-70; peste 80, ochiul pierde randul
   la revenirea din capatul dreapta si reciteste.

   `ch` se raporteaza la latimea cifrei „0" din fontul curent, deci
   limita ramane corecta si daca se schimba corpul de litera.
   Nu se aplica pe elemente de interfata (butoane, etichete, celule
   de tabel), doar pe text de citit.
   ------------------------------------------------------------ */
/* `.timeline-item p` NU mai e in lista (client, 2026-09-04): in cronologie,
   paragrafele stau intr-un card lat de ~1080px, iar plafonul de 54ch le oprea
   pe la jumatate. Titlul de deasupra mergea mai departe decat textul, iar
   blocul parea taiat, nu masurat. Acolo unde cutia e lata si vizibila, o
   coloana ingusta de text arata a greseala, nu a grija pentru lizibilitate.
   Regula generala de mai jos ramane pentru textul care curge in pagina. */
.stats-desc-sub,
.rd-lead,
.rd-section p:not([class]),
.about-copy p,
.text-white-50.fst-italic {
    /* 54ch, nu 68ch. `ch` masoara latimea cifrei „0", care e mai lata decat
       media literelor: masurat pe aceasta pagina, 68ch producea 86 de
       caractere reale pe rand. 54ch aterizeaza la ~68, adica in tinta. */
    max-width: 54ch;
}
/* Depaseste un `style="max-width:850px"` scris in marcaj, care la corpul
   de litera folosit dadea 87 de caractere pe rand. */
.rd-lead.mx-auto { max-width: 54ch !important; }
/* Textul centrat isi pastreaza centrarea dupa limitarea latimii. */
.text-center > .rd-lead,
.text-center > p {
    margin-left: auto;
    margin-right: auto;
}

/* ------------------------------------------------------------
   15. TITLURILE DIN FOOTER — CONTRAST

   Cele trei titluri de coloana („Meniu Rapid", „Transparenta &
   Suport", „Date Contact") foloseau `.text-primary` din Bootstrap,
   adica #0d6efd. Pe fundalul footerului (#0f172a) da 3.97:1, sub
   pragul AA de 4.5. Apar pe toate cele 69 de pagini publice.

   --rd-cyan (#38bdf8) da 8.33:1, masurat, si e deja token de brand:
   reparam contrastul fara sa introducem o culoare noua in paleta.
   ------------------------------------------------------------ */
footer h6.text-primary {
    color: var(--rd-cyan, #38bdf8) !important;
}

/* ------------------------------------------------------------
   16. COLOANA DE CONTRAST (pagina Viziune)
   Inlocuieste cercul decorativ cu doua iconuri: aceeasi suprafata,
   dar spune ceva verificabil. Rosu doar pentru starea nedorita,
   nu ca accent decorativ.
   ------------------------------------------------------------ */
.itm-contrast .rand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--rd-border, rgba(255,255,255,.08));
    font-size: .92rem;
}
.itm-contrast .rand:last-child { border-bottom: 0; }
.itm-contrast .rand i {
    width: 26px; height: 26px; border-radius: 8px;
    display: grid; place-items: center;
    font-size: .72rem; flex-shrink: 0;
}
.itm-contrast .rau i { background: rgba(248,113,113,.14); color: #f87171; }
.itm-contrast .bun i { background: rgba(56,189,248,.14); color: var(--rd-cyan, #38bdf8); }
.itm-contrast .rau span { color: var(--rd-dim, #a3b2c5); }
.itm-contrast .bun span { color: #e2e8f0; }

/* =====================================================================
   17. HERO — elemente noi (2026-08-05)
   Micro-textul de sub butoane si sugestiile de cautare clicabile.
   Butoanele au urcat deasupra casetei de cautare: masurat pe 1440x800,
   CTA-ul principal se termina la 718px, adica sub fold pe un laptop
   obisnuit, fiindca bara de cautare (129px) statea intre propunerea
   de valoare si actiune.
   ===================================================================== */
.rd-hero-micro {
    margin: .7rem 0 0;
    font-size: .82rem;
    color: var(--rd-dim, #a3b2c5);
}

/* Sugestie clicabila: pastreaza greutatea vizuala a vechiului <b>,
   dar arata si se comporta ca un buton. */
.rd-search-hint .rd-hint-btn {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: #e2e8f0;
    cursor: pointer;
    border-bottom: 1px dashed rgba(148, 163, 184, .45);
    transition: color .18s ease, border-color .18s ease;
}
.rd-search-hint .rd-hint-btn:hover,
.rd-search-hint .rd-hint-btn:focus-visible {
    color: var(--rd-cyan, #38bdf8);
    border-bottom-color: var(--rd-cyan, #38bdf8);
}
.rd-search-hint .rd-hint-btn:focus-visible {
    outline: 2px solid var(--rd-cyan, #38bdf8);
    outline-offset: 3px;
    border-radius: 3px;
}

/* Panoul din dreapta are acum cinci randuri in loc de trei plus un grafic;
   randurile se string putin ca sa nu creasca inaltimea hero-ului. */
.rd-hero-viz .rd-hv-main .rd-hv-row { padding-block: .48rem; }
.rd-hero-viz .rd-hv-main .rd-hv-row b { margin-left: auto; }

/* Capul fiecarui strat de servicii („Ce construim" / „Ce tine in picioare").
   Nu e un card: e o linie de separare cu eticheta, ca sa nu concureze
   vizual cu cardurile de categorie de sub ea. */
.rd-strat { margin: 2.4rem 0 1.1rem; }
.rd-bento + .rd-strat { margin-top: 3rem; }
.rd-strat-cap {
    display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
    padding-bottom: .7rem;
    border-bottom: 1px solid rgba(148, 163, 184, .16);
}
.rd-strat-cap h3 {
    margin: 0;
    font-family: var(--rd-font-title, 'Plus Jakarta Sans'), sans-serif;
    font-size: 1.08rem; font-weight: 700; color: #fff;
}
.rd-strat-cap span { font-size: .85rem; color: var(--rd-dim, #a3b2c5); }

/* Banda de o linie care trimite catre pricing.php */
.rd-inline-band {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.2rem; flex-wrap: wrap;
    padding: 1.25rem 1.5rem; border-radius: 14px;
    background: rgba(30, 41, 59, .5);
    border: 1px solid rgba(148, 163, 184, .16);
}
.rd-inline-band p { color: var(--rd-dim, #a3b2c5); font-size: .95rem; }

/* Carduri de lucrare pe homepage. Culoarea vine din 'color'-ul proiectului,
   ca fiecare studiu sa-si pastreze identitatea din pagina de portofoliu. */
.rd-lucrare { border-left: 3px solid var(--ac, #38bdf8); }
.rd-lucrare-ic {
    width: 44px; height: 44px; border-radius: 12px;
    display: grid; place-items: center; margin-bottom: 1rem;
    background: color-mix(in srgb, var(--ac, #38bdf8) 15%, transparent);
    color: var(--ac, #38bdf8); font-size: 1.05rem;
}
.rd-lucrare-client {
    font-size: .74rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; margin-bottom: .5rem;
    /* culoarea pura cade sub 4.5:1 pe fundalul cardului la text asa mic */
    color: color-mix(in srgb, var(--ac, #38bdf8) 66%, #ffffff);
}
.rd-lucrare-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-lucrare-tags span {
    font-size: .72rem; padding: 4px 9px; border-radius: 6px;
    background: rgba(148, 163, 184, .1);
    border: 1px solid rgba(148, 163, 184, .16);
    color: var(--rd-dim, #a3b2c5);
}
.rd-lucrare h3 { transition: color .2s ease; }
@media (hover: hover) {
    .rd-lucrare:hover h3, .rd-lucrare:focus-visible h3 { color: var(--ac, #38bdf8); }
}

/* =====================================================================
   18. TURNSTILE PE ECRANE INGUSTE (2026-08-05)
   Widgetul Cloudflare randeaza un iframe de latime FIXA (300px). Intr-o
   coloana de 163px, cat ramane pe un ecran de 320px dupa marginile
   containerului si ale cardului, iesea 73px de derulare laterala pe
   pagina de aplicare — masurat, nu estimat.
   Se rezolva pe doua cai deodata: cardul cedeaza din margini, iar
   widgetul se scaleaza. Invelisul preia inaltimea vizuala, altfel
   scalarea lasa un gol sub el (transform nu afecteaza fluxul).
   ===================================================================== */
.itm-turnstile { max-width: 100%; }
@media (max-width: 480px) {
    .application-card { padding-left: 1rem !important; padding-right: 1rem !important; }
}
@media (max-width: 420px) {
    .itm-turnstile { height: 52px; overflow: hidden; }
    .itm-turnstile .cf-turnstile { transform: scale(.78); transform-origin: left top; }
}