/* ============================================================
   NEW LINE SOLUTIONS — stiluri comune tuturor paginilor
   (variabile, reset, fundal, header, footer, CTA)

   TEMĂ LIGHT — fundal turcoaz de brand #cbe8e9.
   Regula paletei: turcoazul e fundalul, ardezia #293a40 e cerneala,
   albastrul #2f7fb8 e accentul rece, coralul #ff3e55 accentul cald.
   Cifrele din comentarii = raport de contrast pe fundalul turcoaz.
   ============================================================ */
:root{
  /* ---- FUNDAL (turcoazul de brand) ---- */
  --turq:#cbe8e9;        /* fundalul principal — culoarea de brand */
  --turq-soft:#dcf1f2;   /* variantă deschisă — carduri, câmpuri */
  --turq-deep:#b3dde0;   /* variantă adâncă — footer, zone separate */
  --deeper:#cbe8e9;      /* baza paginii (compat. cu numele vechi) */
  --dim:#8ec4c8;         /* linii, chenare pe turcoaz */

  /* ---- FOOTER (zonă inversată) ----
     Singura suprafață închisă din site. Pe ea cerneala #293a40 dă doar 2.7:1,
     deci tot textul din footer e alb. Vezi blocul FOOTER de mai jos. */
  --deep:#2f7fb8;        /* fundal footer — albastrul de brand */

  /* ---- CERNEALĂ (ardezie — se acordă cu turcoazul) ---- */
  --navy:#293a40;        /* titluri                   —  9.2:1 */
  --ink-2:#293a40;       /* text curent, paragrafe    —  9.2:1 */
  --steel:#47606a;       /* etichete mono, secundar   —  5.2:1 */

  /* ---- ACCENT RECE ---- */
  --ice:#2f7fb8;         /* albastru mediu            —  3.4:1
                            OK pentru chenare, iconițe, text mare.
                            NU pentru text mic — sub pragul de 4.5:1. */
  --teal:#31a9ad;        /* accente, subtitluri, bullet-uri  — 2.6:1 → doar grafică */
  --sky:#4bb0e6;         /* numere mari, linkuri             — 2.1:1 → doar grafică */
  --mute:#6d8087;        /* text secundar din documente      — 3.2:1 pe turcoaz,
                            4.1:1 chiar și pe alb. Sub pragul AA oriunde:
                            de folosit doar la corp de literă mare. */

  /* ---- SUPRAFEȚE DE DOCUMENT (aceleași ca în oferte) ---- */
  --panel:#f4fafb;       /* panou deschis */
  --panel-line:#dcebee;  /* borduri, linii de separare */

  /* ---- ACCENT CALD (păstrat exact) ---- */
  --coral:#ff3e55;       /* accentul de brand — nuanță NEMODIFICATĂ */
  --coral-soft:#ff7088;
  --coral-ink:#1a2529;   /* text așezat PESTE coral   —  4.5:1 */

  /* ---- PORTOCALIUL DIN SLOGAN ----
     „IT" din Make IT possible se scrie portocaliu, ca sintagma să spună
     din prima ce fel de firmă suntem. Două nuanțe, fiindcă sloganul apare
     pe două fundaluri opuse, iar un singur portocaliu ar pica pe unul: */
  --it:#a83f0a;          /* pe turcoazul paginii      —  4.8:1, trece AA */
  --it-deep:#ffb066;     /* pe albastrul footerului   —  2.4:1 */
  /* A doua stă sub prag și e o decizie asumată, ca sigla corală din footer:
     pe #2f7fb8 nici albul nu urcă peste 4.3:1, deci un portocaliu care să
     treacă pragul ca text mic nu există acolo. Sunt două litere dintr-o
     sintagmă cunoscută, accent de brand — nu informație care se pierde. */

  /* ---- STARE ---- */
  --ok:#106430;          /* confirmare — 5.6:1 */
  --err:#b3122a;         /* eroare     — 5.4:1 */

  /* ---- SUPRAFEȚE ---- */
  --glass:linear-gradient(160deg, rgba(255,255,255,0.94), rgba(255,255,255,0.82) 40%, rgba(214,238,239,0.78));
  --glass-solid:rgba(255,255,255,0.96);
  --glass-line:rgba(41,58,64,0.14);
  --glass-shadow:0 18px 44px rgba(41,58,64,0.12), inset 0 1px 0 rgba(255,255,255,0.9);
  --glass-shadow-hi:0 26px 60px rgba(41,58,64,0.18), inset 0 1px 0 rgba(255,255,255,0.95);

  /* ---- GLASS SUBȚIRE (doar peste fundaluri care merită eșantionate: elicea ADN, neuronii) ----
     Pe fundal ÎNCHIS sticla se citea prin luminozitate: panoul era mai deschis decât fundalul.
     Pe fundal DESCHIS separarea aia nu există — alb pe deschis nu se vede. Aici sticla se
     citește prin MUCHIE și SATURAȚIE: umplere slabă, saturate mare care amplifică puţina
     culoare din spate, muchie albă tăioasă și o umbră reală care desprinde cardul de pagină. */
  --glass-thin:linear-gradient(160deg, rgba(255,255,255,0.52), rgba(255,255,255,0.34) 45%, rgba(214,238,239,0.30));
  --glass-thin-filter:blur(13px) saturate(210%) brightness(1.04);
  --glass-thin-line:rgba(255,255,255,0.85);
  --glass-thin-shadow:0 20px 50px rgba(41,58,64,0.20), inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(255,255,255,0.45);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;background:var(--turq);}
body{background:transparent;overflow-x:hidden;font-family:'Exo 2',sans-serif;color:var(--ink-2);}
#bgspace{position:fixed; inset:0; z-index:-1; display:block; pointer-events:none;}

/* ---------- HEADER ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 30px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid var(--glass-line);
  transform:translateY(-100%); transition:transform .38s ease;
}
.site-header::before{content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(130% 80% at 20% -4%, rgba(255,255,255,0.45), transparent 55%); z-index:-1;}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){ .site-header{background:var(--glass-solid);} }
.site-header::after{content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; pointer-events:none;
  background:linear-gradient(to right, transparent 8%, rgba(255,62,85,0.75) 30%, rgba(47,127,184,0.6) 70%, transparent 92%);
  opacity:0; transition:opacity .5s ease;}
.site-header.show::after{opacity:1;}
.site-header.show{transform:translateY(0); box-shadow:0 10px 30px rgba(41,58,64,0.10), inset 0 1px 0 rgba(255,255,255,0.9);}
.site-header .brand{display:flex; align-items:center; gap:11px; font-weight:600; letter-spacing:0.16em; font-size:16.8px; color:var(--navy); text-decoration:none;}
.brand-mark{width:41px;height:41px;flex:none;}
.nav{display:flex; gap:28px; align-items:center;}
.nav a{color:var(--navy); text-decoration:none; font-size:13px; letter-spacing:0.08em; transition:color .2s; position:relative;}
.nav a:hover{color:var(--err);}
.nav a.active{color:var(--navy);}
.nav a.active::after{content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:2px;
  background:linear-gradient(to right, var(--coral), var(--coral-soft));}
/* CTA din meniu: coralul rămâne #ff3e55, dar ca UMPLERE cu text închis (5.6:1),
   nu ca text colorat — pe fundal deschis coralul-text ar da doar 2.7:1. */
.nav-cta{background:var(--coral); border:1px solid var(--coral); color:var(--coral-ink)!important; padding:8px 18px; font-family:'Share Tech Mono',monospace; font-size:12px; letter-spacing:0.14em; border-radius:3px;}
.nav-cta:hover{background:var(--err); border-color:var(--err); color:#fff!important;}
.nav-cta.active::after{display:none;}
/* hamburger desenat din CSS (trei linii care umplu caseta exact) — nu depinde de glifa ☰,
   care pe iOS cade pe font de sistem cu spațiu lateral inegal */
.burger{display:none; width:24px; height:16px; padding:0; border:none; cursor:pointer; font-size:0; background:transparent;
  background-image:linear-gradient(var(--navy),var(--navy)),linear-gradient(var(--navy),var(--navy)),linear-gradient(var(--navy),var(--navy));
  background-size:100% 2px; background-repeat:no-repeat; background-position:left top,left center,left bottom;}
@media (max-width:820px){
  .nav{position:fixed; top:86px; left:0; right:0; flex-direction:column; gap:0; background:rgba(255,255,255,0.97); padding:0; max-height:0; overflow:hidden; transition:max-height .3s ease; align-items:stretch;}
  .nav.open{max-height:420px;}
  .nav a{padding:15px 30px; border-bottom:1px solid rgba(41,58,64,0.10);}
  .nav a.active::after{display:none;}
  .nav a.active{text-decoration:underline; text-decoration-color:var(--coral); text-decoration-thickness:2px; text-underline-offset:7px;}
  .nav .nav-cta{margin:14px 24px 22px; padding:13px 18px; text-align:center;}
  .burger{display:block;}
}

/* ---------- PROGRESS BAR SCROLL (marginea de jos a headerului) ---------- */
.scroll-progress{position:absolute; left:0; bottom:-1px; height:2px; width:0; z-index:2; pointer-events:none;
  background:linear-gradient(to right, var(--coral), var(--coral-soft) 55%, var(--ice));}

/* ---------- BACK TO TOP ---------- */
.back-top{position:fixed; right:22px; bottom:22px; z-index:70; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--coral); color:var(--coral-ink); background:var(--coral);
  font-family:'Share Tech Mono',monospace; font-size:18px; line-height:1; cursor:pointer;
  box-shadow:0 6px 18px rgba(41,58,64,0.18);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s, background .2s, color .2s, box-shadow .2s;}
.back-top.vis{opacity:1; visibility:visible; transform:translateY(0);}
.back-top:hover{background:var(--err); border-color:var(--err); color:#fff; box-shadow:0 8px 24px rgba(41,58,64,0.28);}

/* ---------- CTA ---------- */
.cta{display:inline-block; margin-top:20px; padding:12px 30px; border:1px solid var(--coral); border-radius:3px;
  font-family:'Share Tech Mono',monospace; font-size:12px; letter-spacing:0.2em; color:var(--coral-ink);
  text-decoration:none; text-transform:uppercase; transition:all .25s ease; background:var(--coral); cursor:pointer;}
.cta:hover{background:var(--err); border-color:var(--err); color:#fff; box-shadow:0 10px 28px rgba(41,58,64,0.22);}

/* ---------- ANTET DE PAGINĂ (subpagini) ---------- */
.page-head{position:relative; z-index:10; padding:150px 30px 30px; text-align:center;}
.page-head .crumb{font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:0.34em; color:var(--steel); margin-bottom:16px;}
.page-head .crumb::after{content:''; display:block; width:44px; height:2px; margin:14px auto 0; background:var(--coral);}
.page-head h1{font-family:'Playfair Display',serif; font-size:clamp(2.4rem,6vw,4.2rem); color:var(--navy);}
.page-head .sub{font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:0.3em; color:var(--steel); margin-top:16px;}
/* „IT"-ul din slogan. Îngroșat pe lângă culoare: la 11px cu literele
   răsfirate, culoarea singură se pierde. */
.slogan-it{color:var(--it); font-weight:700;}

/* ---------- PAGINI LEGALE ---------- */
.legal-sec{position:relative; z-index:10; padding:50px 30px 110px;}
.legal-panel{max-width:820px; margin:0 auto; position:relative; overflow:hidden; border-radius:22px; padding:46px 48px; text-align:left;
  background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%);
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-shadow);}
.legal-panel::before{content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(130% 80% at 20% -4%, rgba(255,255,255,0.45), transparent 55%); z-index:-1;}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){ .legal-panel{background:var(--glass-solid);} }
.legal-panel h2{font-family:'Playfair Display',serif; font-size:1.35rem; color:var(--navy); margin:34px 0 12px;}
.legal-panel h2:first-child{margin-top:0;}
.legal-panel p{font-size:15px; line-height:1.8; color:var(--ink-2); margin-bottom:14px;}
.legal-panel ul{margin:0 0 14px 22px;}
.legal-panel li{font-size:15px; line-height:1.8; color:var(--ink-2); margin-bottom:6px;}
.legal-panel strong{color:var(--navy);}
/* link: text în cerneală (12.3:1), coralul rămâne vizibil ca subliniere */
.legal-panel a{color:var(--navy); text-decoration:none; border-bottom:2px solid var(--coral);}
.legal-panel a:hover{color:var(--err); border-color:var(--err);}
.legal-updated{max-width:820px; margin:22px auto 0; text-align:center; font-family:'Share Tech Mono',monospace; font-size:10.5px; letter-spacing:0.26em; color:var(--steel);}
@media (max-width:640px){ .legal-sec{padding:36px 18px 90px;} .legal-panel{padding:30px 24px;} }

/* ---------- FOOTER ----------
   Zonă INVERSATĂ: fundal albastru de brand #2f7fb8, tot textul alb (4.3:1).
   Atenție la două lucruri dacă se umblă aici:
   1. Cerneala #293a40 NU se folosește pe acest fundal — dă 2.7:1.
   2. Coralul #ff3e55 are practic aceeași luminanță ca albastrul (1.25:1),
      deci e invizibil pe el. De asta accentele din footer sunt albe,
      nu corale ca în restul paginii. */
.site-footer{position:relative; z-index:10; background:var(--deep); border-top:1px solid rgba(255,255,255,0.22); padding:52px 30px 26px;}
.site-footer::before{content:''; position:absolute; left:0; right:0; top:-1px; height:2px;
  background:linear-gradient(to right, transparent 5%, rgba(255,62,85,0.9) 35%, rgba(255,255,255,0.75) 65%, transparent 95%);}
.foot-grid{max-width:1150px; margin:0 auto; display:grid; grid-template-columns:auto 1.4fr 1fr 1fr; gap:38px; text-align:left;}
.foot-logo a{display:inline-block;}
.foot-logo svg{display:block; width:96px; height:96px;}
/* logo pe coralul de brand #ff3e55 (culoarea din atributele SVG, nesuprascrisă).
   Contrast pe albastrul footerului: 1.25:1 — decizie asumată de brand, nu scăpare. */
.foot-brand .brand{display:inline-block; font-weight:600; letter-spacing:0.22em; font-size:13px; color:#fff; text-decoration:none;}
.foot-tag{font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:0.3em; color:#fff; margin-top:12px; text-transform:uppercase;}
.foot-tag::before{content:''; display:inline-block; width:18px; height:2px; margin-right:9px; vertical-align:middle; background:#fff;}
/* pe albastrul footerului portocaliul închis ar dispărea (1.4:1), deci aici
   se inversează: nuanța deschisă, singura care se desprinde de fundal */
.site-footer .slogan-it{color:var(--coral);}
.foot-desc{font-size:13.5px; line-height:1.7; color:#fff; margin-top:14px; max-width:300px;}
.foot-col .foot-h{font-family:'Share Tech Mono',monospace; font-size:10.5px; letter-spacing:0.3em; color:#fff; margin-bottom:16px;}
.foot-col a{display:block; color:#fff; text-decoration:none; font-size:13.5px; padding:5px 0; transition:transform .2s;}
/* hover: textul rămâne alb (4.3:1), linia e coralul de brand. Coralul pe albastru dă 1.25:1,
   deci linia se citește ca diferență de nuanță, nu de luminozitate — de aceea e îngroșată
   la 2px, iar deplasarea laterală rămâne ca al doilea indiciu de hover. */
.foot-col a:hover{text-decoration:underline; text-decoration-color:var(--coral);
  text-decoration-thickness:2px; text-underline-offset:4px; transform:translateX(3px);}
.foot-links{display:grid; grid-template-columns:repeat(2,auto); grid-template-rows:repeat(3,auto); grid-auto-flow:column; column-gap:56px; justify-content:start;}
.site-footer .copy{max-width:1150px; margin:38px auto 0; padding-top:20px; border-top:1px solid rgba(255,255,255,0.25);
  font-size:11px; color:#fff; font-family:'Share Tech Mono',monospace; letter-spacing:0.12em; text-align:center;}
@media (max-width:900px){
  .foot-grid{grid-template-columns:1fr 1fr;}
  .foot-logo{grid-column:1/-1;}
  .foot-brand{grid-column:1/-1;}
  .foot-logo svg{width:80px; height:80px;}
  .foot-links{display:block;}
}
@media (max-width:540px){ .foot-grid{gap:28px;} .site-footer{padding:40px 22px 22px;} }

/* ---------- LIGHTBOX (mărirea imaginilor la click) ----------
   Folosit în studiile de caz. Marcajul din pagină rămâne o imagine simplă;
   `data-zoom` o face zoomabilă, iar site.js îi adaugă rolul de buton la
   încărcare. Fără JS, imaginile rămân imagini — nimic nu se rupe.
   Suprafața e ÎNCHISĂ, singura din site în afară de footer: pe turcoaz
   deschis o imagine mărită nu s-ar desprinde de pagină. De aceea textul
   din lightbox e alb, nu cerneala #293a40. */
.zoomable{cursor:zoom-in;}
.zoomable:focus-visible{outline:2px solid var(--coral); outline-offset:3px;}
.lb{position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center;
  padding:28px; background:rgba(20,32,36,0.88);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s;}
/* `display:flex` de mai sus bate regula [hidden]{display:none} din stilul
   browserului, deci atributul `hidden` pus din JS n-ar avea niciun efect.
   Regula asta i-l redă — altfel lightbox-ul închis rămâne un strat fix
   peste toată pagina, scos din calea clicurilor doar de visibility. */
.lb[hidden]{display:none;}
.lb.open{opacity:1; visibility:visible;}
.lb figure{margin:0; display:flex; flex-direction:column; align-items:center; gap:15px; max-width:1200px; max-height:100%;}
.lb img{display:block; width:auto; height:auto; max-width:100%; max-height:calc(100vh - 140px);
  border-radius:10px; box-shadow:0 30px 70px rgba(0,0,0,0.55);
  transform:scale(.96); transition:transform .25s ease;}
.lb.open img{transform:scale(1);}
.lb figcaption{font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:0.14em;
  color:#fff; text-align:center; line-height:1.8; max-width:760px;}
.lb-close{position:absolute; top:18px; right:18px; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--coral); background:var(--coral); color:var(--coral-ink);
  font-family:'Share Tech Mono',monospace; font-size:19px; line-height:1; cursor:pointer;
  transition:background .2s, border-color .2s, color .2s;}
.lb-close:hover{background:var(--err); border-color:var(--err); color:#fff;}
body.lb-lock{overflow:hidden;}
@media (max-width:640px){
  .lb{padding:14px;}
  .lb img{max-height:calc(100vh - 150px);}
  .lb-close{top:10px; right:10px; width:40px; height:40px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .lb, .lb img{transition:none;}
}