/*
 * Prima pagina (index.html), refacuta dupa designul „CodeCare Homepage v2"
 * din Claude Design.
 *
 * Designul comun al site-ului: il incarca toate cele trei pagini (prima
 * pagina, pachete.html si proiecte.html), fiecare cu stilurile ei deasupra.
 * O regula `cc-` a carei clasa nu apare pe o pagina pur si simplu nu se aplica acolo.
 *
 * scripts.js e comun tuturor paginilor si cauta clase precise — .navbar,
 * .nav-menu, .nav-link, .hamburger, .language-switch, .contact-form,
 * .form-group, .custom-select-*, .form-confirm, .notification — asa ca ele
 * sunt stilizate tot aici, in limbajul vizual al designului.
 *
 * Trei clase pe <html>, puse de acasa.js:
 *   .cc-gata       JavaScript-ul ruleaza; abia atunci ascundem ce se anima.
 *                  Fara el, pagina e statica si intreaga.
 *   .cc-static     „miscare redusa" din sistem: fara animatii, fara hero lung.
 *   .cc-incarcare  incarcatorul de la prima vizita din sesiune.
 */

:root {
    --nav-height: 66px;

    --cc-fundal: #06060d;
    --cc-fundal-hero: #04040a;
    --cc-suprafata: rgba(255, 255, 255, .03);
    --cc-suprafata-grad: linear-gradient(160deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
    --cc-chenar: rgba(255, 255, 255, .09);
    --cc-chenar-hover: rgba(124, 233, 224, .45);

    --cc-text: #e8e8f2;
    --cc-text-2: #a8a8bd;
    --cc-text-estompat: #9d9db4;
    --cc-text-slab: #6f6f8a;

    --cc-turcoaz: #7ce9e0;
    --cc-violet: #a078ff;
    --cc-gradient: linear-gradient(96deg, #7ce9e0, #a078ff);
    --cc-gradient-nr: linear-gradient(160deg, #7ce9e0, #a078ff);
    --cc-alb-cald: #f4f4f0;

    --cc-ease: cubic-bezier(.16, 1, .3, 1);

    --cc-font-titlu: 'Space Grotesk', system-ui, sans-serif;
    --cc-font-text: 'IBM Plex Sans', system-ui, sans-serif;
    --cc-font-mono: 'JetBrains Mono', ui-monospace, monospace;

    --cc-latime: 1240px;
}

@media (max-width: 820px) {
    :root {
        --nav-height: 60px;
    }
}

/* ==================== baza ==================== */

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

html {
    scroll-behavior: smooth;
    /* `clip`, nu `hidden`: `hidden` pe radacina ar rupe position: sticky,
       de care depind hero-ul, procesul si proiectele. */
    overflow-x: clip;
    scroll-padding-top: calc(var(--nav-height) + 1rem);
}

body {
    margin: 0;
    background: var(--cc-fundal);
    color: var(--cc-text);
    font-family: var(--cc-font-text);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: var(--cc-turcoaz);
    text-decoration: none;
}

a:hover {
    color: #fff;
}

::selection {
    background: var(--cc-turcoaz);
    color: var(--cc-fundal);
}

:focus-visible {
    outline: 2px solid var(--cc-turcoaz);
    outline-offset: 3px;
    border-radius: 6px;
}

h1,
h2,
h3 {
    margin: 0;
    font-weight: 700;
}

@keyframes ccMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* ==================== incarcatorul ==================== */

.cc-loader {
    display: none;
}

html.cc-incarcare .cc-loader {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--cc-fundal);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    transition: opacity .8s ease, visibility .8s;
    /* Plasa de siguranta: daca scriptul se opreste la jumatate, incarcatorul
       dispare singur dupa 4 secunde, in loc sa acopere pagina pentru totdeauna. */
    animation: ccIncarcatorSigur 0s linear 4s forwards;
}

html.cc-incarcare .cc-loader.este-gata {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@keyframes ccIncarcatorSigur {
    to {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

/* In incarcator semnul se deseneaza mare, iar textul apare abia dupa ce
   inima a batut; in antet si in subsol textul sta pe loc tot timpul. */
.cc-marca--mare {
    gap: clamp(12px, 2.4vh, 20px);
}

.cc-marca--mare .cc-semn {
    width: clamp(150px, 36vw, 240px);
}

.cc-marca--mare .cc-logo-text {
    font-size: clamp(36px, 8vw, 58px);
    letter-spacing: -.01em;
    animation: ccLogoText .6s cubic-bezier(.2, .8, .2, 1) 1.15s both;
}

@keyframes ccLogoText {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ==================== fundalul ==================== */

.cc-progres {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0;
    z-index: 120;
    background: var(--cc-gradient);
    box-shadow: 0 0 14px rgba(124, 233, 224, .7);
    pointer-events: none;
}

.cc-pete,
.cc-vigneta,
.cc-stele {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
}

.cc-pete {
    width: 100%;
    height: 100%;
    filter: blur(54px) saturate(150%);
    opacity: .55;
}

.cc-vigneta {
    background: radial-gradient(120% 90% at 50% 0%, rgba(6, 6, 13, 0) 0%, rgba(6, 6, 13, .72) 60%, #06060d 100%);
}

/* Stelele din fundal (le deseneaza acasa.js), in locul grilei de patrate.
   Dupa vigneta in HTML, ca ea sa nu le stinga. */
.cc-stele {
    width: 100%;
    height: 100%;
}

.cc-lumina {
    position: fixed;
    top: 0;
    left: 0;
    width: 520px;
    height: 520px;
    margin: -260px 0 0 -260px;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 233, 224, .13) 0%, rgba(160, 120, 255, .07) 40%, transparent 70%);
    transform: translate3d(-700px, -700px, 0);
    transition: transform .18s cubic-bezier(.2, .8, .2, 1);
}

@media (max-width: 820px),
(hover: none) {
    .cc-lumina {
        display: none;
    }
}

/* ==================== antetul ==================== */

.navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(6, 6, 13, .62);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    transition: background .3s;
}

.navbar.scrolled {
    background: rgba(6, 6, 13, .78);
}

.nav-container {
    max-width: var(--cc-latime);
    height: var(--nav-height);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Semnul din assets/logo.png, redesenat ca SVG ca inima, slash-ul si
   parantezele sa se poata anima separat. Textul e text real, in Outfit —
   fontul cel mai apropiat de cel din PNG, cerut doar pentru literele din
   „CodeCare” (parametrul `text=`), deci cativa kilobytes. PNG-ul ramane
   pentru favicon si pentru previzualizari. */
.cc-marca {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    line-height: 1;
}

.cc-logo {
    flex: none;
    color: #fff;
}

.cc-logo:hover {
    color: #fff;
}

.cc-semn {
    display: block;
    width: 58px;
    height: auto;
    aspect-ratio: 244 / 123;
    overflow: visible;
}

.cc-logo-text {
    font-family: 'Outfit', var(--cc-font-titlu);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -.005em;
    color: #f2f2f2;
    white-space: nowrap;
}

.cc-logo-text span {
    background: linear-gradient(90deg, #3ba7ef, #7a5ee8 45%, #8c50d4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@media (max-width: 820px) {
    .navbar .cc-semn {
        width: 50px;
    }

    .navbar .cc-logo-text {
        font-size: 13px;
    }
}

/*
 * Animatia semnului, ~1,9 s: inima se traseaza, parantezele vin din lateral,
 * slash-ul cade in mijloc, apoi inima bate o data. `pathLength="1"` pe inima
 * face ca dash-ul sa mearga de la 1 la 0 indiferent de lungimea reala.
 * Fara clasa, semnul e desenat complet — asa ramane si fara JavaScript.
 * `--asteapta` il ascunde pana porneste animatia (subsolul, pana ajunge pe ecran).
 */
.cc-semn--asteapta .cc-semn-inima,
.cc-semn--anim .cc-semn-inima {
    stroke-dasharray: 1 1;
}

.cc-semn--asteapta .cc-semn-inima {
    stroke-dashoffset: 1;
}

.cc-semn--asteapta .cc-semn-inima,
.cc-semn--asteapta .cc-semn-st,
.cc-semn--asteapta .cc-semn-dr,
.cc-semn--asteapta .cc-semn-slash {
    opacity: 0;
}

.cc-semn-bataie {
    transform-box: fill-box;
    transform-origin: 50% 55%;
}

.cc-semn--anim .cc-semn-inima {
    animation: ccSemnDesen .9s cubic-bezier(.65, 0, .35, 1) both;
}

.cc-semn--anim .cc-semn-st {
    animation: ccSemnStanga .55s cubic-bezier(.2, .8, .2, 1) .45s both;
}

.cc-semn--anim .cc-semn-dr {
    animation: ccSemnDreapta .55s cubic-bezier(.2, .8, .2, 1) .45s both;
}

.cc-semn--anim .cc-semn-slash {
    animation: ccSemnSlash .45s cubic-bezier(.3, 1.5, .5, 1) .8s both;
}

.cc-semn--anim .cc-semn-bataie {
    animation: ccSemnBataie .65s ease-in-out 1.2s both;
}

@keyframes ccSemnDesen {
    0% {
        stroke-dashoffset: 1;
        opacity: 0;
    }

    6% {
        opacity: 1;
    }

    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

@keyframes ccSemnStanga {
    from {
        opacity: 0;
        transform: translateX(-34px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes ccSemnDreapta {
    from {
        opacity: 0;
        transform: translateX(34px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes ccSemnSlash {
    from {
        opacity: 0;
        transform: translateY(-38px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes ccSemnBataie {
    0%,
    100% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.13);
    }

    45% {
        transform: scale(.98);
    }

    65% {
        transform: scale(1.06);
    }
}

.nav-menu {
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 4px;
    font-size: 14px;
}

.nav-link {
    display: block;
    padding: 9px 14px;
    border-radius: 999px;
    color: #b9b9cc;
    white-space: nowrap;
    transition: background .3s, color .3s;
}

.nav-link:hover,
.nav-link.active {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

/* Comutatorul de limba: scripts.js il cauta dupa id, intr-un singur exemplar.
   Designul nu il avea; aici e o pastila RO | EN pe toate latimile, iar
   checkbox-ul ramane in pagina doar pentru scripts.js si cititoarele de ecran. */
.language-switch {
    flex: none;
}

.switch-container {
    display: flex;
    align-items: center;
    padding: 3px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .03);
    font-family: var(--cc-font-mono);
    font-size: 11px;
    letter-spacing: .12em;
}

.lang-label {
    padding: 6px 10px;
    border-radius: 999px;
    color: var(--cc-text-slab);
    cursor: pointer;
    user-select: none;
    transition: background .3s, color .3s;
}

.lang-label:hover {
    color: #fff;
}

.lang-label.active {
    background: rgba(124, 233, 224, .14);
    color: var(--cc-turcoaz);
}

.switch {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.hamburger {
    display: none;
    flex: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .12);
    cursor: pointer;
}

.hamburger .bar {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--cc-text);
    transition: transform .35s var(--cc-ease), opacity .25s;
}

.hamburger.active .bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger.active .bar:nth-child(2) {
    opacity: 0;
}

.hamburger.active .bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1040px) {
    .nav-container {
        gap: 14px;
    }

    .nav-link {
        padding: 8px 10px;
        font-size: 13px;
    }
}

@media (max-width: 820px) {
    .nav-container {
        gap: 10px;
        padding: 0 16px;
    }

    .cc-logo {
        margin-right: auto;
    }

    .hamburger {
        display: flex;
    }

    /* Cu meniul deschis, scripts.js fixeaza body-ul la `top: -scrollY` ca
       pagina sa nu se mai derulze. Un antet sticky pleaca odata cu body-ul,
       deci pe Safari antetul si meniul (pozitionat fata de el) ajungeau
       deasupra ecranului: atingeai hamburgerul si nu aparea nimic. Fixat pe
       ecran cat timp meniul e deschis, antetul ramane unde e. */
    .navbar:has(.nav-menu.active) {
        position: fixed;
        left: 0;
        right: 0;
    }

    /* Meniul de telefon. .navbar are backdrop-filter, deci e bloc continator
       pentru elementele fixed: `top` se masoara de la antet. */
    .nav-menu {
        position: fixed;
        top: var(--nav-height);
        left: 0;
        right: 0;
        height: calc(100vh - var(--nav-height));
        height: calc(100svh - var(--nav-height));
        margin: 0;
        padding: 24px 16px 32px;
        flex-direction: column;
        gap: 6px;
        overflow-y: auto;
        /* Opac: cu .97, titlul hero-ului se vedea limpede prin meniu. */
        background: var(--cc-fundal);
        font-family: var(--cc-font-titlu);
        font-size: 22px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity .35s var(--cc-ease), transform .35s var(--cc-ease), visibility .35s;
    }

    .nav-menu.active {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .nav-link {
        padding: 14px 16px;
        border-radius: 14px;
        font-size: 22px;
        color: var(--cc-text);
    }
}

/* ==================== aparitia la derulare ==================== */

/*
 * Animatie, nu tranzitie, si pe `translate`/`scale`, nu pe `transform`: cardurile
 * au propriul `transform` la hover, iar o regula de aparitie pe `transform` l-ar
 * fi anulat pentru totdeauna (valorile unei animatii `both` bat declaratiile
 * obisnuite).
 */
@keyframes ccApare {
    from {
        opacity: 0;
        translate: 0 34px;
        scale: .99;
        filter: blur(6px);
    }

    to {
        opacity: 1;
        translate: 0 0;
        scale: 1;
        filter: none;
    }
}

html.cc-gata:not(.cc-static) [data-reveal] {
    opacity: 0;
}

html.cc-gata:not(.cc-static) [data-reveal].este-vizibil {
    animation: ccApare .85s var(--cc-ease) both;
}

/* ==================== hero ==================== */

.cc-intro {
    position: relative;
    height: 100vh;
}

html.cc-gata .cc-intro {
    height: 620vh;
}

.cc-intro-scena {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--cc-fundal-hero);
}

.cc-intro-stage {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* Fundalul de la finalul hero-ului. Titlul aparea pe negru gol; acum iese
   dintr-o lumina turcoaz-violet, printre stele. Se aprinde
   odata cu deschiderea portalului — opacitatea o seteaza acasa.js — iar fara
   JavaScript sau cu miscare redusa sta aprins de la inceput. */
.cc-intro-fundal {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(55% 50% at 50% 55%, rgba(124, 233, 224, .16), transparent 70%),
        radial-gradient(42% 45% at 24% 32%, rgba(160, 120, 255, .22), transparent 72%),
        radial-gradient(38% 40% at 78% 70%, rgba(255, 158, 205, .10), transparent 70%),
        var(--cc-fundal);
}

.cc-intro-fundal::before {
    content: '';
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(30% 30% at 35% 40%, rgba(124, 233, 224, .14), transparent 70%),
        radial-gradient(28% 28% at 65% 62%, rgba(160, 120, 255, .16), transparent 70%);
    filter: blur(20px);
    animation: ccAurora 18s ease-in-out infinite alternate;
}

/* Stele statice, pentru cand hero-ul 3D nu ruleaza (fara WebGL, fara
   JavaScript, miscare redusa). Doua straturi, fiecare cu stelele imprastiate
   in aceeasi placa: cu o singura stea pe placa, ele se aliniau in randuri
   drepte. Placile au laturi diferite, ca repetitia sa nu se vada. In centru
   sunt mai stinse, sub titlu. Cu scena 3D pornita (`cc-hero-3d`) stelele
   reale le inlocuiesc. */
.cc-intro-fundal::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1.5px 1.5px at 23px 41px, rgba(255, 255, 255, .75), transparent),
        radial-gradient(1px 1px at 131px 17px, rgba(255, 255, 255, .5), transparent),
        radial-gradient(1.5px 1.5px at 277px 96px, rgba(124, 233, 224, .7), transparent),
        radial-gradient(1px 1px at 68px 188px, rgba(255, 255, 255, .45), transparent),
        radial-gradient(2px 2px at 204px 233px, rgba(255, 255, 255, .6), transparent),
        radial-gradient(1px 1px at 301px 279px, rgba(255, 255, 255, .5), transparent),
        radial-gradient(1px 1px at 157px 142px, rgba(255, 255, 255, .4), transparent),
        radial-gradient(1px 1px at 41px 29px, rgba(255, 255, 255, .45), transparent),
        radial-gradient(1.5px 1.5px at 188px 71px, rgba(170, 135, 255, .65), transparent),
        radial-gradient(1px 1px at 96px 163px, rgba(255, 255, 255, .5), transparent),
        radial-gradient(1.5px 1.5px at 239px 207px, rgba(255, 255, 255, .6), transparent),
        radial-gradient(1px 1px at 12px 241px, rgba(124, 233, 224, .5), transparent);
    background-size: 317px 317px, 317px 317px, 317px 317px, 317px 317px, 317px 317px, 317px 317px, 317px 317px,
        263px 263px, 263px 263px, 263px 263px, 263px 263px, 263px 263px;
    -webkit-mask-image: radial-gradient(40% 32% at 50% 50%, rgba(0, 0, 0, .25), #000 90%);
    mask-image: radial-gradient(40% 32% at 50% 50%, rgba(0, 0, 0, .25), #000 90%);
    transition: opacity .6s;
}

html.cc-hero-3d .cc-intro-fundal::after {
    opacity: 0;
}

@keyframes ccAurora {
    from {
        transform: translate3d(-4%, -3%, 0) scale(1);
    }

    to {
        transform: translate3d(4%, 3%, 0) scale(1.08);
    }
}

html:not(.cc-gata) .cc-intro-fundal,
html.cc-static .cc-intro-fundal {
    opacity: 1;
}

.cc-intro-rezerva {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    padding: 0 24px;
    transition: opacity .8s ease;
}

.cc-intro-rezerva pre {
    margin: 0;
    font-family: var(--cc-font-mono);
    font-size: clamp(13px, 2.1vw, 26px);
    line-height: 1.9;
    color: #edede8;
    letter-spacing: -.01em;
}

.cc-intro-continut {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--nav-height) 24px 0;
}

html.cc-gata .cc-intro-continut {
    opacity: 0;
    pointer-events: none;
}

.cc-intro-intra,
.cc-intro-indiciu {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 5;
    text-align: center;
    font-family: var(--cc-font-mono);
    letter-spacing: .26em;
    pointer-events: none;
}

.cc-intro-intra {
    bottom: 96px;
    font-size: 12px;
    color: #cfcfc9;
    opacity: 0;
}

.cc-intro-indiciu {
    bottom: 44px;
    font-size: 11px;
    color: #6f6f77;
}

/* Fara JavaScript nu exista nici animatie: ramane titlul, pe un singur ecran. */
html:not(.cc-gata) .cc-intro-rezerva,
html:not(.cc-gata) .cc-intro-intra,
html:not(.cc-gata) .cc-intro-indiciu {
    display: none;
}

html.cc-static .cc-intro {
    height: 100vh;
}

html.cc-static .cc-intro-stage,
html.cc-static .cc-intro-rezerva,
html.cc-static .cc-intro-intra,
html.cc-static .cc-intro-indiciu {
    display: none;
}

html.cc-static .cc-intro-continut {
    opacity: 1 !important;
    pointer-events: auto !important;
    filter: none !important;
    clip-path: none !important;
    transform: none !important;
}

.cc-hero-titlu {
    font-family: var(--cc-font-titlu);
    font-weight: 700;
    font-size: clamp(40px, 7.6vw, 108px);
    line-height: .95;
    letter-spacing: -.045em;
    color: var(--cc-alb-cald);
    text-wrap: balance;
}

.cc-hero-sub {
    max-width: 580px;
    margin: 22px auto 0;
    font-size: clamp(15px, 1.9vw, 19px);
    line-height: 1.55;
    color: #9c9ca6;
}

.cc-hero-butoane {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 34px;
}

.cc-btn {
    display: inline-block;
    padding: 16px 30px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 16px;
    transition: transform .3s, box-shadow .3s, background .3s;
}

.cc-btn--alb {
    background: var(--cc-alb-cald);
    color: var(--cc-fundal);
    font-weight: 700;
}

.cc-btn--alb:hover {
    color: var(--cc-fundal);
    transform: translateY(-3px);
    box-shadow: 0 18px 50px -14px rgba(244, 244, 240, .4);
}

.cc-btn--contur {
    border: 1px solid rgba(255, 255, 255, .22);
    color: var(--cc-text);
}

.cc-btn--contur:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    transform: translateY(-3px);
}

@media (max-width: 480px) {
    .cc-hero-butoane {
        width: 100%;
        flex-direction: column;
    }

    .cc-hero-butoane .cc-btn {
        text-align: center;
    }
}

/* ==================== benzile care curg ==================== */

.cc-banda {
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, .07);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    padding: 16px 0;
    background: rgba(255, 255, 255, .02);
}

.cc-banda-pista {
    display: flex;
    gap: 48px;
    width: max-content;
    white-space: nowrap;
    animation: ccMarquee 28s linear infinite;
    font-family: var(--cc-font-mono);
    font-size: 13px;
    color: var(--cc-text-slab);
    letter-spacing: .1em;
}

.cc-banda--mare {
    padding: 26px 0;
    background: none;
}

.cc-banda--mare .cc-banda-pista {
    gap: 40px;
    animation-duration: 22s;
    font-family: var(--cc-font-titlu);
    font-weight: 700;
    font-size: clamp(38px, 7vw, 84px);
    letter-spacing: -.04em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(124, 233, 224, .45);
}

/* ==================== sectiuni comune ==================== */

.cc-sectiune {
    max-width: var(--cc-latime);
    margin: 0 auto;
    padding: 110px 24px;
}

.cc-eticheta {
    font-family: var(--cc-font-mono);
    font-size: 12px;
    color: var(--cc-turcoaz);
    letter-spacing: .18em;
}

.cc-titlu {
    margin: 16px 0 0;
    font-family: var(--cc-font-titlu);
    font-size: clamp(32px, 5vw, 58px);
    line-height: 1.04;
    letter-spacing: -.035em;
    color: var(--cc-text);
    text-wrap: balance;
}

.cc-cap {
    max-width: 720px;
}

.cc-cap--lat {
    max-width: 760px;
}

.cc-cap-text {
    margin: 14px 0 0;
    color: var(--cc-text-2);
    font-size: 17px;
    line-height: 1.6;
}

.cc-link-mono {
    font-family: var(--cc-font-mono);
    font-size: 13px;
    border-bottom: 1px solid rgba(124, 233, 224, .4);
    padding-bottom: 4px;
    white-space: nowrap;
}

.cc-cap-rand {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

@media (max-width: 820px) {
    .cc-sectiune {
        padding: 80px 20px;
    }
}

/* ==================== 01 servicii ==================== */

/* Trei pe rand, fix: cu auto-fit, la 1240px intrau patru si ramaneau doua
   singure pe randul al doilea. */
.cc-servicii {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 48px;
}

@media (max-width: 980px) {
    .cc-servicii {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .cc-servicii {
        grid-template-columns: 1fr;
    }
}

.cc-serviciu {
    position: relative;
    padding: 28px;
    border-radius: 20px;
    border: 1px solid var(--cc-chenar);
    background: var(--cc-suprafata-grad);
    overflow: hidden;
    transition: transform .35s var(--cc-ease), border-color .35s, box-shadow .35s;
}

.cc-serviciu:hover {
    transform: translateY(-8px);
    border-color: var(--cc-chenar-hover);
    box-shadow: 0 30px 60px -30px rgba(124, 233, 224, .5);
}

.cc-serviciu-nr {
    font-family: var(--cc-font-mono);
    font-size: 12px;
    color: var(--cc-turcoaz);
}

.cc-serviciu h3 {
    margin: 14px 0 10px;
    font-family: var(--cc-font-titlu);
    font-size: 22px;
    letter-spacing: -.02em;
}

.cc-serviciu p {
    margin: 0 0 18px;
    color: var(--cc-text-estompat);
    font-size: 15px;
    line-height: 1.6;
}

.cc-puncte {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cc-puncte li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #c9c9dd;
}

.cc-puncte li::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cc-violet);
    flex: none;
}

/* ==================== 02 proces ==================== */

/* Derularea verticala muta pista cu doi pasi pe desktop si cu patru pe telefon;
   320vh da cam un ecran de derulare pentru fiecare pas, fara sa para blocat. */
.cc-proces {
    position: relative;
    height: 320vh;
}

.cc-proces-lipit {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Antetul e lipit si el sus, peste sectiune: fara spatiul lui, eticheta
       „02 / PROCES" ar sta sub bara de navigare. */
    padding: calc(var(--nav-height) + clamp(8px, 2vh, 24px)) 0 clamp(12px, 3vh, 40px);
}

.cc-proces-cap {
    flex: none;
    width: 100%;
    max-width: var(--cc-latime);
    margin: 0 auto;
    padding: 0 24px clamp(12px, 2.6vh, 26px);
}

.cc-proces-titlu {
    margin: clamp(6px, 1.4vh, 12px) 0 0;
    font-family: var(--cc-font-titlu);
    font-size: clamp(24px, 5.2vh, 52px);
    line-height: 1.05;
    letter-spacing: -.035em;
}

.cc-proces-fereastra {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow: hidden;
    /* Pista masoara in cqw, latimea ferestrei fara bara de derulare:
       cu 100vw totul ar fi fost deplasat spre dreapta cu latimea ei. */
    container-type: inline-size;
    display: flex;
    align-items: center;
}

/* Trei pasi umplu exact latimea continutului, aliniati cu titlul sectiunii,
   iar al patrulea si al cincilea intra la derulare. Padding-ul din dreapta e
   egal cu cel din stanga, deci ultimul pas se opreste tot la marginea
   continutului, nu lipit de ecran. */
.cc-proces-pista {
    --pas-gol: 24px;
    --pas-l: clamp(300px, calc((min(100cqw, var(--cc-latime)) - 48px - 2 * var(--pas-gol)) / 3), 400px);
    display: flex;
    align-items: center;
    gap: var(--pas-gol);
    padding: 0 max(24px, calc((100cqw - 3 * var(--pas-l) - 2 * var(--pas-gol)) / 2));
    width: max-content;
    height: 100%;
    will-change: transform;
}

/* Pe telefon un singur pas, centrat, cu marginile vecinilor la vedere. */
@media (max-width: 620px) {
    .cc-proces-pista {
        --pas-gol: 16px;
        --pas-l: min(340px, 84cqw);
        padding: 0 calc((100cqw - var(--pas-l)) / 2);
    }
}

/* Mai scund decat in design: la toata inaltimea ecranului, cardurile aveau
   jumatate de spatiu gol intre descriere si etichete. */
.cc-pas {
    flex: none;
    width: var(--pas-l);
    height: clamp(340px, 50vh, 400px);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: clamp(14px, 3vh, 28px);
    border-radius: 22px;
    border: 1px solid var(--cc-chenar);
    background: linear-gradient(165deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: border-color .35s, transform .35s var(--cc-ease);
}

.cc-pas:hover {
    border-color: rgba(160, 120, 255, .5);
    transform: translateY(-6px);
}

.cc-pas-cap {
    display: flex;
    align-items: baseline;
    gap: 14px;
}

.cc-pas-nr {
    font-family: var(--cc-font-titlu);
    font-size: clamp(34px, 6vh, 56px);
    font-weight: 700;
    letter-spacing: -.05em;
    background: var(--cc-gradient-nr);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cc-pas-tag {
    font-family: var(--cc-font-mono);
    font-size: clamp(10px, 1.8vh, 11px);
    color: var(--cc-text-slab);
    letter-spacing: .14em;
}

.cc-pas h3 {
    margin: clamp(8px, 1.6vh, 14px) 0 clamp(6px, 1.2vh, 10px);
    font-family: var(--cc-font-titlu);
    font-size: clamp(19px, 3.4vh, 24px);
    letter-spacing: -.02em;
}

/* Fara flex-shrink: 0, cardul de inaltime fixa strivea descrierea si o taia
   la jumatatea randului, inainte de cele patru randuri permise. */
.cc-pas p {
    flex-shrink: 0;
    margin: 0 0 clamp(10px, 2vh, 18px);
    color: var(--cc-text-estompat);
    font-size: clamp(13px, 2.2vh, 15px);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.cc-chips span {
    padding: 6px 11px;
    border-radius: 8px;
    background: rgba(124, 233, 224, .09);
    border: 1px solid rgba(124, 233, 224, .2);
    font-family: var(--cc-font-mono);
    font-size: 11px;
    color: var(--cc-turcoaz);
}

.cc-chips--gri span {
    background: rgba(255, 255, 255, .06);
    border-color: transparent;
    color: var(--cc-text-estompat);
}

.cc-proces-jos {
    flex: none;
    width: 100%;
    max-width: var(--cc-latime);
    margin: 0 auto;
    padding: clamp(14px, 3vh, 30px) 24px 0;
    display: flex;
    align-items: center;
    gap: 16px;
}

.cc-proces-bara {
    flex: 1;
    height: 2px;
    background: rgba(255, 255, 255, .1);
    overflow: hidden;
}

.cc-proces-bara>div {
    height: 100%;
    width: 0;
    background: var(--cc-gradient);
}

.cc-proces-jos span {
    font-family: var(--cc-font-mono);
    font-size: 11px;
    color: var(--cc-text-slab);
    letter-spacing: .14em;
}

/* Fara JavaScript sau cu miscare redusa: pasii stau unul sub altul, fara
   derularea pe orizontala (care ar cere JS ca sa se miste). */
html:not(.cc-gata) .cc-proces,
html.cc-static .cc-proces {
    height: auto;
}

html:not(.cc-gata) .cc-proces-lipit,
html.cc-static .cc-proces-lipit {
    position: static;
    height: auto;
    padding: 110px 0;
}

html:not(.cc-gata) .cc-proces-fereastra,
html.cc-static .cc-proces-fereastra {
    overflow: visible;
}

html:not(.cc-gata) .cc-proces-pista,
html.cc-static .cc-proces-pista {
    width: 100%;
    max-width: var(--cc-latime);
    height: auto;
    margin: 0 auto;
    padding: 0 24px;
    flex-direction: column;
    align-items: stretch;
    transform: none !important;
}

html:not(.cc-gata) .cc-pas,
html.cc-static .cc-pas {
    width: auto;
    height: auto;
    max-height: none;
}

html:not(.cc-gata) .cc-pas p,
html.cc-static .cc-pas p {
    -webkit-line-clamp: unset;
}

html:not(.cc-gata) .cc-proces-jos,
html.cc-static .cc-proces-jos {
    display: none;
}

/* ==================== 03 proiecte ==================== */

.cc-proiecte {
    padding-top: 30px;
    padding-bottom: 40px;
}

.cc-proiecte-lista {
    margin-top: 44px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.cc-proiect {
    position: sticky;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--cc-chenar);
    background: rgba(9, 9, 17, .92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .95);
}

.cc-proiect:nth-child(1) {
    top: 90px;
}

.cc-proiect:nth-child(2) {
    top: 116px;
}

.cc-proiect:nth-child(3) {
    top: 142px;
}

.cc-proiect-grila {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.cc-proiect-poza {
    position: relative;
    min-height: 260px;
    overflow: hidden;
    background: #0b0b16;
}

.cc-proiect-poza img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .88;
    transition: transform .7s var(--cc-ease), opacity .4s;
}

.cc-proiect:hover .cc-proiect-poza img {
    transform: scale(1.06);
    opacity: 1;
}

/* Capturile aplicatiilor sunt pe verticala, de telefon: `cover` le-ar taia
   intr-o fasie orizontala fara nimic de vazut. */
.cc-proiect-poza--app {
    background: radial-gradient(90% 90% at 50% 40%, rgba(160, 120, 255, .18), transparent 70%), #0b0b16;
}

.cc-proiect-poza--app img {
    object-fit: contain;
    padding: 18px 0;
}

.cc-insigna {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 1;
    padding: 6px 12px;
    border-radius: 999px;
    font-family: var(--cc-font-mono);
    font-size: 11px;
    background: rgba(6, 6, 13, .82);
    border: 1px solid rgba(255, 255, 255, .16);
    color: var(--cc-turcoaz);
}

.cc-proiect-text {
    padding: clamp(26px, 3.4vw, 44px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cc-proiect-nr {
    font-family: var(--cc-font-mono);
    font-size: 12px;
    color: var(--cc-text-slab);
}

.cc-proiect-text h3 {
    margin: 10px 0 12px;
    font-family: var(--cc-font-titlu);
    font-size: clamp(24px, 3vw, 34px);
    letter-spacing: -.025em;
}

.cc-proiect-text p {
    margin: 0 0 20px;
    color: var(--cc-text-estompat);
    font-size: 16px;
    line-height: 1.65;
}

.cc-proiect-text .cc-chips {
    margin-top: 0;
}

.cc-proiect-live {
    align-self: flex-start;
    margin-top: 22px;
}

/* Pe telefon cardurile nu se mai suprapun: ecranul e prea scund ca sa ramana
   ceva de citit din cardul de dedesubt. */
@media (max-width: 820px) {
    .cc-proiect {
        position: relative;
        top: auto !important;
    }

    .cc-proiect-poza {
        min-height: 220px;
    }
}

/* ==================== cifrele ==================== */

.cc-cifre {
    padding-top: 100px;
    padding-bottom: 100px;
}

.cc-cifre-grila {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 28px;
    text-align: center;
}

.cc-cifra-nr {
    font-family: var(--cc-font-titlu);
    font-size: clamp(38px, 6vw, 66px);
    font-weight: 700;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
    background: var(--cc-gradient-nr);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cc-cifra-eticheta {
    margin-top: 6px;
    font-family: var(--cc-font-mono);
    font-size: 11px;
    color: #8a8aa3;
    letter-spacing: .14em;
}

@media (max-width: 520px) {
    .cc-cifre-grila {
        grid-template-columns: 1fr 1fr;
        gap: 32px 12px;
    }
}

/* ==================== 04 pachete ==================== */

.cc-pachete {
    padding-top: 20px;
}

.cc-pachete-grila {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 18px;
    margin-top: 46px;
}

.cc-pachet {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px 26px;
    border-radius: 22px;
    border: 1px solid var(--cc-chenar);
    background: var(--cc-suprafata);
    transition: transform .35s var(--cc-ease);
}

.cc-pachet--evidentiat {
    border-color: rgba(124, 233, 224, .5);
    background: linear-gradient(170deg, rgba(124, 233, 224, .12), rgba(160, 120, 255, .06));
    box-shadow: 0 30px 70px -34px rgba(124, 233, 224, .55);
}

.cc-pachet-insigna {
    position: absolute;
    top: -12px;
    left: 24px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--cc-gradient);
    color: var(--cc-fundal);
    font-family: var(--cc-font-mono);
    font-size: 11px;
    font-weight: 600;
}

.cc-pachet-nr {
    font-family: var(--cc-font-mono);
    font-size: 11px;
    color: var(--cc-text-slab);
    letter-spacing: .14em;
}

.cc-pachet h3 {
    margin: 10px 0 8px;
    font-family: var(--cc-font-titlu);
    font-size: 24px;
    letter-spacing: -.02em;
}

.cc-pachet-pentru {
    margin: 0 0 6px;
    color: var(--cc-text-estompat);
    font-size: 14px;
    line-height: 1.6;
}

.cc-pachet-lista {
    list-style: none;
    padding: 0;
    margin: 20px 0 24px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    flex: 1;
}

.cc-pachet-lista li {
    display: flex;
    gap: 10px;
    font-size: 14px;
    line-height: 1.45;
    color: #c9c9dd;
}

.cc-pachet-lista li::before {
    content: '✦';
    color: var(--cc-turcoaz);
    flex: none;
}

.cc-pachet-termen {
    margin-bottom: 12px;
    font-family: var(--cc-font-mono);
    font-size: 11px;
    color: var(--cc-text-slab);
}

.cc-pachet-cta {
    text-align: center;
    padding: 14px;
    border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, .18);
    color: var(--cc-text);
    font-weight: 700;
    font-size: 15px;
    transition: transform .3s, box-shadow .3s, background .3s;
}

.cc-pachet-cta:hover {
    color: #fff;
    background: rgba(255, 255, 255, .06);
    transform: translateY(-2px);
}

.cc-pachet--evidentiat .cc-pachet-cta {
    border-color: transparent;
    background: var(--cc-gradient);
    color: var(--cc-fundal);
}

.cc-pachet--evidentiat .cc-pachet-cta:hover {
    color: var(--cc-fundal);
    box-shadow: 0 18px 44px -14px rgba(124, 233, 224, .6);
}

.cc-extra {
    margin-top: 26px;
    padding: 28px;
    border-radius: 20px;
    border: 1px dashed rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .02);
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
}

.cc-extra h3 {
    margin: 0 0 6px;
    font-family: var(--cc-font-titlu);
    font-size: 20px;
}

.cc-extra p {
    margin: 0;
    color: var(--cc-text-estompat);
    font-size: 15px;
}

.cc-extra-cta {
    padding: 14px 24px;
    border-radius: 12px;
    border: 1px solid rgba(124, 233, 224, .45);
    color: var(--cc-turcoaz);
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    transition: background .3s, transform .3s;
}

.cc-extra-cta:hover {
    color: var(--cc-turcoaz);
    background: rgba(124, 233, 224, .12);
    transform: translateY(-2px);
}

/* ==================== 05 intrebari ==================== */

.cc-intrebari {
    max-width: 900px;
    padding-top: 0;
}

.cc-intrebari .cc-titlu {
    margin-bottom: 40px;
}

.cc-faq-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cc-faq {
    border: 1px solid var(--cc-chenar);
    border-radius: 16px;
    background: var(--cc-suprafata);
    overflow: hidden;
    transition: border-color .3s;
}

.cc-faq:hover {
    border-color: rgba(124, 233, 224, .35);
}

.cc-faq-intrebare {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--cc-text);
    font-family: var(--cc-font-titlu);
    font-size: 17px;
    font-weight: 500;
}

.cc-faq-icon {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(124, 233, 224, .35);
    color: var(--cc-turcoaz);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: transform .4s var(--cc-ease), background .3s;
}

.cc-faq.este-deschis .cc-faq-icon {
    transform: rotate(135deg);
    background: rgba(124, 233, 224, .14);
}

.cc-faq-raspuns {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .45s var(--cc-ease), opacity .35s ease;
}

.cc-faq.este-deschis .cc-faq-raspuns,
html:not(.cc-gata) .cc-faq-raspuns {
    grid-template-rows: 1fr;
    opacity: 1;
}

.cc-faq-raspuns>div {
    overflow: hidden;
    min-height: 0;
}

.cc-faq-raspuns p {
    margin: 0;
    padding: 0 24px 24px;
    color: var(--cc-text-estompat);
    font-size: 15px;
    line-height: 1.7;
}

/* ==================== 06 contact ==================== */

.cc-contact {
    padding-top: 90px;
}

/* Fara overflow: hidden, spre deosebire de design: ar fi taiat lista derulanta
   a formularului cand se deschide spre marginea de jos a panoului. */
.cc-contact-panou {
    position: relative;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: linear-gradient(150deg, rgba(124, 233, 224, .09), rgba(160, 120, 255, .07) 50%, rgba(255, 255, 255, .02));
    padding: clamp(28px, 5vw, 64px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 48px;
}

.cc-contact-titlu {
    margin: 16px 0 14px;
    font-family: var(--cc-font-titlu);
    font-size: clamp(30px, 4.4vw, 50px);
    line-height: 1.05;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.cc-contact-sub {
    margin: 0 0 30px;
    color: var(--cc-text-2);
    font-size: 16px;
    line-height: 1.6;
}

.cc-contact-date {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: 16px;
    font-style: normal;
}

.cc-contact-rand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cc-contact-rand--text {
    color: var(--cc-text-2);
}

.cc-contact-ic {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(124, 233, 224, .12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--cc-turcoaz);
}

/* --- formularul: aceleasi clase ca inainte, de care depinde scripts.js --- */

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group {
    position: relative;
    padding-top: 1.35rem;
}

.form-group input,
.form-group textarea,
.custom-select-trigger {
    display: block;
    width: 100%;
    min-height: 54px;
    padding: 15px 18px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(6, 6, 13, .55);
    color: var(--cc-text);
    font-family: var(--cc-font-text);
    font-size: 15px;
    outline: none;
    transition: border-color .3s, background .3s;
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

.form-group input:hover,
.form-group textarea:hover,
.custom-select-trigger:hover {
    border-color: rgba(255, 255, 255, .22);
}

.form-group input:focus,
.form-group textarea:focus,
.custom-select.open .custom-select-trigger {
    border-color: var(--cc-turcoaz);
}

/* Eticheta sta in camp ca un placeholder si urca deasupra lui la focus sau
   cand exista valoare (.has-value, pusa din scripts.js). Nu `:valid`: un email
   pe jumatate scris e invalid si eticheta ar cadea peste text. */
.form-group label {
    position: absolute;
    left: 19px;
    top: calc(1.35rem + 16px);
    font-size: 15px;
    color: var(--cc-text-slab);
    pointer-events: none;
    transition: top .3s var(--cc-ease), left .3s var(--cc-ease), font-size .3s, color .3s, letter-spacing .3s;
}

.form-group input:focus+label,
.form-group input.has-value+label,
.form-group textarea:focus+label,
.form-group textarea.has-value+label,
.custom-select-wrapper.active label {
    top: 0;
    left: 4px;
    font-family: var(--cc-font-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cc-turcoaz);
}

.custom-select-wrapper {
    position: relative;
}

.custom-select {
    position: relative;
}

.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.selection-text {
    color: var(--cc-text);
}

.custom-select-trigger .arrow {
    flex: none;
    width: 9px;
    height: 9px;
    margin-left: 12px;
    border-right: 1.5px solid var(--cc-text-2);
    border-bottom: 1.5px solid var(--cc-text-2);
    transform: translateY(-2px) rotate(45deg);
    transition: transform .3s var(--cc-ease);
}

.custom-select.open .arrow {
    transform: translateY(2px) rotate(-135deg);
}

.custom-options {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + .5rem);
    z-index: 20;
    max-height: 290px;
    overflow-y: auto;
    padding: 6px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: #0d0d19;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .25s, transform .25s var(--cc-ease), visibility .25s;
}

.custom-select.open .custom-options {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.custom-option {
    display: block;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 14px;
    color: #c9c9dd;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.custom-option:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.custom-option.selected {
    background: var(--cc-gradient);
    color: var(--cc-fundal);
    font-weight: 600;
}

.cc-trimite {
    margin-top: 14px;
    padding: 16px;
    border: none;
    border-radius: 14px;
    background: var(--cc-gradient);
    color: var(--cc-fundal);
    font-family: var(--cc-font-titlu);
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: transform .3s, box-shadow .3s, opacity .3s;
}

.cc-trimite:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 44px -14px rgba(124, 233, 224, .6);
}

.cc-trimite:disabled {
    opacity: .6;
    cursor: wait;
    transform: none;
}

.form-confirm {
    margin: 10px 0 0;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(124, 233, 224, .3);
    background: rgba(124, 233, 224, .08);
    color: var(--cc-text-2);
    font-size: 14px;
    line-height: 1.6;
}

.form-confirm[hidden] {
    display: none;
}

.form-confirm strong {
    color: var(--cc-text);
}

/* Notificarile create de showNotification() din scripts.js */
.notification {
    position: fixed;
    top: calc(var(--nav-height) + 1rem);
    right: 1rem;
    z-index: 300;
    max-width: min(420px, calc(100vw - 2rem));
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: #0d0d19;
    color: var(--cc-text);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9);
    animation: ccNotificare .45s var(--cc-ease) both;
}

.notification-success {
    border-color: rgba(124, 233, 224, .55);
}

.notification-error {
    border-color: rgba(255, 120, 150, .6);
}

.notification-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.notification-message {
    white-space: pre-line;
    font-size: 14px;
    line-height: 1.55;
}

.notification-close {
    margin-left: auto;
    padding: 0 2px;
    background: none;
    border: none;
    color: var(--cc-text-2);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

@keyframes ccNotificare {
    from {
        opacity: 0;
        translate: 0 -8px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* ==================== subsolul ==================== */

/* Logo in stanga, linkuri in dreapta, copyright-ul dedesubt, dupa o linie.
   Linkurile nu mai stau pe mijloc: acolo pareau puse la intamplare, iar pe
   telefon, centrate pe o coloana, aratau ca o lista ratacita. */
.cc-subsol {
    border-top: 1px solid rgba(255, 255, 255, .07);
    padding: 44px 24px 36px;
}

.cc-subsol-interior {
    max-width: var(--cc-latime);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 26px 28px;
}

/* Acelasi logo ca in antet, putin mai mic. */
.cc-logo--mic {
    justify-self: start;
}

.cc-logo--mic .cc-semn {
    width: 46px;
}

.cc-logo--mic .cc-logo-text {
    font-size: 12px;
}

.cc-subsol-linkuri {
    justify-self: end;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
}

.cc-subsol-linkuri a {
    font-family: var(--cc-font-mono);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cc-text-2);
    transition: color .3s;
}

.cc-subsol-linkuri a:hover {
    color: var(--cc-turcoaz);
}

.footer-bottom {
    grid-column: 1 / -1;
    text-align: center;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.footer-bottom p {
    margin: 0;
    font-size: 13px;
    color: var(--cc-text-slab);
}

@media (max-width: 620px) {
    .cc-subsol {
        padding: 36px 20px 30px;
    }

    .cc-subsol-interior {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 22px;
    }

    .cc-logo--mic,
    .cc-subsol-linkuri {
        justify-self: center;
    }

    /* Regula de antet `.cc-logo { margin-right: auto }` (sub 820px) il
       impingea spre stanga si aici. */
    .cc-logo--mic {
        margin-right: 0;
    }

    .cc-subsol-linkuri {
        justify-content: center;
        gap: 10px 22px;
    }

    .footer-bottom {
        width: 100%;
    }
}

/* Datele firmei si linkurile legale, sub copyright. Mai stinse decat restul
   subsolului: trebuie sa fie acolo, nu sa atraga privirea. */
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 14px;
    margin-bottom: 10px !important;
}

.footer-legal-linkuri {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 20px;
    margin-bottom: 14px;
}

.footer-legal-linkuri a {
    font-size: 13px;
    color: var(--cc-text-2);
    transition: color .3s;
}

.footer-legal-linkuri a:hover {
    color: var(--cc-turcoaz);
}

/* ==================== bannerul de cookies ==================== */

/* Informativ, in coltul din stanga-jos: nu acopera continutul si nu cere o
   alegere, fiindca site-ul nu pune cookie-uri de urmarire. */
.cc-cookies {
    position: fixed;
    left: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 250;
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: min(560px, calc(100vw - 32px));
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid var(--cc-chenar);
    background: rgba(13, 13, 25, .96);
    backdrop-filter: blur(12px);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9);
    animation: ccNotificare .45s var(--cc-ease) both;
}

.cc-cookies-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--cc-text-2);
}

.cc-cookies-text a {
    color: var(--cc-turcoaz);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cc-cookies-buton {
    flex: none;
    padding: 10px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--cc-alb-cald);
    color: var(--cc-fundal);
    font: 700 14px var(--cc-font-text);
    cursor: pointer;
    transition: transform .3s;
}

.cc-cookies-buton:hover {
    transform: translateY(-2px);
}

.cc-cookies-buton:focus-visible,
.cc-cookies-text a:focus-visible {
    outline: 2px solid var(--cc-turcoaz);
    outline-offset: 3px;
}

@media (max-width: 620px) {
    .cc-cookies {
        left: 12px;
        right: 12px;
        max-width: none;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .cc-cookies-buton {
        padding: 12px 18px;
    }
}

@media print {
    .cc-cookies {
        display: none;
    }
}

/* ==================== miscare redusa ==================== */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .cc-banda-pista,
    .cc-intro-fundal::before {
        animation: none;
    }

    .cc-semn *,
    .cc-marca--mare .cc-logo-text {
        animation: none !important;
    }

    .cc-serviciu,
    .cc-pas,
    .cc-proiect-poza img,
    .cc-btn,
    .cc-pachet-cta {
        transition: none;
    }
}