/* --- iTech Media Master Stylesheet --- */

/* 1. ROOT & COLOR PALETTE */
:root {
    /* Tokeni forțați (!important) — bat redefinirile divergente per-pagină (ex. cyan teal #06b6d4) dintr-o singură sursă */
    --neon-blue: #2563eb !important;
    --neon-cyan: #38bdf8 !important;
    --dark-bg: #0b1120 !important;
    --card-bg: rgba(30, 41, 59, 0.45) !important;
    --text-primary: #f1f5f9 !important;
	--text-secondary: #94a3b8 !important;
    --text-menu: #66baf6;
    --border-color: #374151;
    --text-dim: #a3b2c5;
}

/* 1b. TAIEREA PE ORIZONTALA — cu `clip`, nu cu `hidden`
   ------------------------------------------------------------------
   Pagina chiar are nevoie de taiere: banda de logouri partenere (.slide-track)
   e lata de 2812 px la 375 px ecran, plus inca vreo 37 de elemente care ies in
   lateral. Fara nimic aici, apare bara orizontala.

   Dar `overflow-x: hidden` NU e felul in care se face asta. Specificatia spune
   ca atunci cand o axa e non-visible si cealalta e `visible`, cea `visible` se
   calculeaza ca `auto`. Deci `overflow-x: hidden` inseamna, in fapt,
   `overflow-y: auto` — iar elementul devine CONTAINER DE DERULARE. Masurat pe
   site: cu `hidden`, si html si body raportau `overflow-y: auto`; cu `clip`,
   amandoua raman `visible`. Taierea pe orizontala e identica in ambele cazuri.

   Conteaza pentru ca un `body` transformat in container de derulare e cauza
   documentata a spatiului gol de sub footer pe telefon: iOS calculeaza atunci
   inaltimea documentului separat de cea a body-ului, iar diferenta — cam cat
   bara de adresa — ramane derulabila, goala. In emulare pe desktop nu se vede,
   fiindcă acolo `100vh` e exact cat viewportul, iar cele doua inaltimi coincid.

   `hidden` ramane ca rezerva pentru Safari sub 16, singurul motor ramas care
   nu cunoaste `clip`; acolo comportamentul e cel dinainte, nu mai rau.

   `max-width: 100vw` a fost scos dinadins — 100vw include latimea barei de
   derulare verticale, deci pe desktop chiar EL producea o bara orizontala de
   cativa pixeli, adica fix problema pe care incerca s-o previna. */
html,
body {
    overflow-x: hidden;
}

@supports (overflow-x: clip) {
    html,
    body {
        overflow-x: clip;
    }
}

/* 2. GENERAL & BODY STYLES */
body {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: var(--dark-bg) !important;
    background-image: linear-gradient(rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.98)), url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z' fill='%232563eb' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E") !important;
    color: var(--text-primary) !important;
    padding-top: 100px !important;
}

/* GLOBAL TEXT OVERRIDE */
.text-secondary {
    color: var(--text-secondary) !important;
}
/* .text-dim — folosită masiv pe pagini dar nedefinită global până acum */
.text-dim {
    color: var(--text-dim) !important;
}

/* PREMIUM TYPOGRAPHY — uniform site-wide (headings = Plus Jakarta Sans) */
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.navbar-brand, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
    letter-spacing: -0.02em;
}

/* PREMIUM BUTTONS — uniform micro-interactions site-wide */
.btn {
    transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease, background .3s ease, border-color .3s ease, color .3s ease;
}
.btn-primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    border-color: transparent !important;
    box-shadow: 0 10px 26px -12px rgba(37, 99, 235, .65);
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -12px rgba(37, 99, 235, .85);
}
.btn-danger:hover, .btn-success:hover, .btn-warning:hover { transform: translateY(-2px); }
.btn-outline-light:hover, .btn-outline-primary:hover {
    transform: translateY(-2px);
    border-color: var(--neon-cyan) !important;
}
/* fundalul devine alb (Bootstrap) → textul trebuie închis, nu alb (altfel invizibil) */
.btn-outline-light:hover { color: #3247cb !important; }
.btn-outline-primary:hover { background: rgba(56, 189, 248, .1) !important; color: #fff !important; }

/* PREMIUM GRADIENT pe accentele din titluri — uniform cu hero-ul de home (alb → cyan → albastru) */
h1 > span.text-primary, h2 > span.text-primary,
.display-1 > span.text-primary, .display-2 > span.text-primary, .display-3 > span.text-primary,
.display-4 > span.text-primary, .display-5 > span.text-primary, .display-6 > span.text-primary {
    /* capetele identice (#fff → #fff) fac bucla de 200% perfect lină; keyframes în redesign-2026.css */
    background: linear-gradient(120deg, #ffffff 0%, var(--neon-cyan) 30%, var(--neon-blue) 50%, var(--neon-cyan) 70%, #ffffff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent !important;
    text-shadow: none !important;
    animation: rd-gradient-sweep 6s linear infinite;
}

/* 3. NAVIGATION */
.navbar {
    background: rgba(17, 24, 39, 0.85) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color) !important;
}
.navbar .nav-link {
    color: var(--text-menu) !important;
    font-weight: 600;
}
.navbar .nav-link:hover, .navbar .nav-link.active {
    color: var(--accent-blue) !important;
}
/* Mobile: meniul extins peste conținut — fundal aproape opac ca textul paginii să nu transpară */
@media (max-width: 991px) {
    .navbar { background: rgba(11, 17, 32, 0.985) !important; }
    .navbar-collapse {
        padding: 6px 4px 14px;
        margin-top: 6px;
        border-top: 1px solid var(--border-color);
    }
    .navbar-collapse .nav-link { padding-top: 10px; padding-bottom: 10px; }
}

/* 4. HERO SECTIONS */
.page-hero-public {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* --- TECH CARD (SNAKE BORDER) --- */
.tech-card {
    position: relative;
    background: var(--card-bg);
    padding: 25px;
    color: white;
    overflow: hidden;
    transition: 0.4s;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.tech-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
    border-color: rgba(56, 189, 248, 0.3);
}

.tech-card span {
    position: absolute;
    display: block;
}

.tech-card span:nth-child(1) {
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--neon-cyan));
}

.tech-card:hover span:nth-child(1) {
    left: 100%;
    transition: 1s;
}

.tech-card span:nth-child(2) {
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, var(--neon-cyan));
}

.tech-card:hover span:nth-child(2) {
    top: 100%;
    transition: 1s;
    transition-delay: 0.25s;
}

.tech-card span:nth-child(3) {
    bottom: 0;
    right: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg, transparent, var(--neon-cyan));
}

.tech-card:hover span:nth-child(3) {
    right: 100%;
    transition: 1s;
    transition-delay: 0.5s;
}

.tech-card span:nth-child(4) {
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg, transparent, var(--neon-cyan));
}

.tech-card:hover span:nth-child(4) {
    bottom: 100%;
    transition: 1s;
    transition-delay: 0.75s;
}

.tech-card h4, .tech-card h5 {
    transition: 0.3s;
    color: white;
}

.tech-card:hover h4, .tech-card:hover h5 {
    color: var(--neon-cyan);
    text-shadow: 0 0 10px rgba(56,189,248,0.5);
}

.icon-glow {
    color: var(--neon-cyan);
    text-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    transition: 0.3s;
}

.tech-card:hover .icon-glow {
    transform: scale(1.1);
    color: white;
    text-shadow: 0 0 25px var(--neon-blue);
}

/* --- STILURI PAGINA LOGIN & FORGOT PASSWORD --- */
.page-clienti .tech-card, .page-forgot_password .tech-card {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255,255,255,0.05);
    backdrop-filter: blur(12px);
    padding: 40px 30px;
    box-shadow: 0 10px 30px -5px rgba(0,0,0,0.5);
}

.page-clienti .icon-glow, .page-forgot_password .icon-glow {
    font-size: 2.5rem;
    color: var(--neon-cyan);
    text-shadow: 0 0 20px rgba(56,189,248,0.4);
    margin-bottom: 20px;
}
.page-clienti .text-label, .page-forgot_password .text-label {
    color: var(--neon-cyan);
    letter-spacing: 1px;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: bold;
}
.page-clienti .form-control-cyber, .page-forgot_password .form-control-cyber {
    background-color: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255,255,255,0.1);
    color: white;
}
.page-clienti .form-control-cyber:focus, .page-forgot_password .form-control-cyber:focus {
    background-color: rgba(15, 23, 42, 1);
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}
.page-clienti .btn-primary, .page-forgot_password .btn-primary {
    box-shadow: 0 0 15px rgba(37,99,235,0.4);
}
.page-clienti a, .page-forgot_password a {
    color: var(--neon-cyan);
}
.page-clienti a:hover, .page-forgot_password a:hover {
    color: var(--accent-blue);
}
.page-clienti .cyber-hero, .page-forgot_password .cyber-hero {
    padding-bottom: 120px;
}
.page-clienti section, .page-forgot_password section {
    margin-top: -100px;
}

/* --- GLOBAL HEADING SCALE (enterprise / compact) ---
   Micșorează titlurile mari (Bootstrap .display-*) pe tot site-ul pentru un
   aspect mai sobru, profesional. Dimensiune fluidă (clamp) = echilibrat pe
   mobil și desktop. Pentru a reveni la mărimile inițiale: șterge acest bloc. */
.display-1 { font-size: clamp(2rem, 3vw + 0.8rem, 2.75rem); }
.display-2 { font-size: clamp(1.9rem, 2.7vw + 0.75rem, 2.5rem); }
.display-3 { font-size: clamp(1.75rem, 2.4vw + 0.7rem, 2.25rem); }
.display-4 { font-size: clamp(1.6rem, 2vw + 0.65rem, 2rem); }
.display-5 { font-size: clamp(1.4rem, 1.6vw + 0.6rem, 1.75rem); }
.display-6 { font-size: clamp(1.25rem, 1.2vw + 0.55rem, 1.5rem); }

.display-1, .display-2, .display-3,
.display-4, .display-5, .display-6 {
    line-height: 1.15;
    letter-spacing: -0.02em;
}

/* #2 — Mesh-gradient ambient background (overlay global, modern, înlocuiește percepția de „puncte") */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(55% 45% at 12% 0%, rgba(37, 99, 235, 0.10), transparent 60%),
        radial-gradient(50% 45% at 88% 6%, rgba(56, 189, 248, 0.07), transparent 55%),
        radial-gradient(45% 40% at 50% 100%, rgba(56, 189, 248, 0.045), transparent 60%);
}

/* #3 — Hover premium unificat pe carduri (spotlight-card pe toate paginile) */
.spotlight-card {
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), border-color .35s ease, box-shadow .35s ease !important;
}
.spotlight-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
    box-shadow: 0 24px 55px -22px rgba(0, 0, 0, 0.65) !important;
}

/* ── Linkurile din text: albastrul Bootstrap nu se citeste pe fundal inchis ──
   `.text-primary` = #0d6efd da 4,18 pe pagina si 3,77 pe card, sub pragul AA
   de 4,5. Albastrul de brand (#2563eb) e si mai jos, 3,64 / 3,28 — deci nu el
   e solutia. Cyanul e deja culoarea de accent a site-ului si da 8,79 / 7,92.
   Regula atinge DOAR ancorele (20 pe tot site-ul, majoritatea in paginile
   legale, adica exact unde linkul trebuie citit). Cele ~80 de utilizari
   decorative ale clasei raman neatinse: sunt iconuri si text mare, unde
   pragul e 3:1 si trecut. */
a.text-primary,
a.text-primary:hover,
a.text-primary:focus-visible {
  color: var(--neon-cyan) !important;
}

/* ── Accesibilitate: focus vizibil la navigarea cu tastatura (doar :focus-visible, nu la click) ── */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Mobil: gutter-ele g-5 (3rem) depășesc padding-ul containerului → conținut tăiat la margine ── */
@media (max-width: 768px){
  .row.g-5{ --bs-gutter-x: 1.5rem; }
}

/* ============================================================
   UN SINGUR LIMBAJ DE BUTOANE (rd-btn) — restilizăm clasele
   Bootstrap folosite în site, ca totul să arate identic cu
   sistemul rd-btn din hero, fără să edităm fiecare pagină.
   ============================================================ */
.btn{
  font-weight:700;
  border-radius:999px;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1), background .3s, border-color .3s;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn-primary{
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  border-color:transparent;
  box-shadow:0 10px 30px -8px rgba(37,99,235,.6);
}
.btn-primary:hover,.btn-primary:focus{
  background:linear-gradient(135deg,#2f6ff0,#1d4ed8);
  border-color:transparent;
  box-shadow:0 18px 44px -10px rgba(37,99,235,.8);
}

.btn-outline-light,.btn-outline-secondary{
  background:rgba(255,255,255,.04);
  color:#fff;
  border-color:rgba(148,163,184,.35);
  backdrop-filter:blur(8px);
}
.btn-outline-light:hover,.btn-outline-secondary:hover{
  background:rgba(56,189,248,.08);
  color:#fff;
  border-color:#38bdf8;
}

.btn-danger{
  background:linear-gradient(135deg,#ef4444,#dc2626);
  border-color:transparent;
  box-shadow:0 10px 26px -10px rgba(239,68,68,.55);
}
.btn-danger:hover{ box-shadow:0 16px 38px -10px rgba(239,68,68,.75); }

.btn-light:hover{ box-shadow:0 10px 26px -12px rgba(255,255,255,.35); }