/*
 * _global.css — Deviz Zugrav v4.4.0
 * Stiluri comune tuturor paginilor: nav, offcanvas, footer, share bar, STT, utilitare
 * NU conține stiluri specifice unei pagini — acelea merg în fișierul paginii.
 */

/* ============================================================
   RESET & BAZĂ
   ============================================================ */
:root {
  --b9: #0A2E5C; --b8: #0D4F8B; --b7: #1A7FD4;
  --b5: #2196F3; --b4: #64B5F6; --b2: #BBDEFB; --b1: #E3F2FD;
  --o6: #E8752C; --o5: #F59E4B; --o1: #FEF0E2;
  --gr6: #16A34A; --gr5: #22C55E; --gr1: #DCFCE7;
  --pu6: #7C3AED; --pu1: #F3E8FF;
  --dk: #111827; --dk2: #1F2937;
  --g7: #374151; --g5: #6B7280; --g3: #D1D5DB;
  --g2: #E5E7EB; --g1: #F3F4F6; --g0: #F8F9FB; --w: #fff;
  --f: 'Plus Jakarta Sans', sans-serif;
  --nh: 68px;
  --mw: 1440px;
  --r: 8px;
}
@media (max-width: 1600px) { :root { --mw: 1280px; } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f);
  color: var(--g7);
  background: var(--w);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: var(--b4); border-radius: 3px; }

/* ============================================================
   UTILITARE GLOBALE
   ============================================================ */
.wrap { max-width: var(--mw); margin: 0 auto; padding: 0 28px; }
.tc  { text-align: center; }
.mx  { margin-left: auto; margin-right: auto; }

/* Badges — radius 6px (non-pill, conform deciziei design) */
.sl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--o6);
  background: var(--o1);
  padding: 5px 12px;
  border-radius: 6px;
  margin-bottom: 18px;
}
.sl.blue   { color: var(--b7);  background: var(--b1);  }
.sl.green  { color: var(--gr6); background: var(--gr1); }
.sl.purple { color: var(--pu6); background: var(--pu1); }

/* Titlu secțiune standard */
.st {
  font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 800;
  color: var(--dk);
  line-height: 1.18;
  letter-spacing: -.025em;
  margin-bottom: 12px;
}
.ss {
  font-size: 16px;
  color: var(--g5);
  line-height: 1.72;
  max-width: 600px;
}

/* Butoane globale */
.bp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--o6);
  color: #fff;
  padding: 13px 26px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background .22s, transform .22s, box-shadow .22s;
  text-decoration: none;
  font-family: var(--f);
}
.bp:hover {
  background: #cf6420;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(232, 117, 44, .3);
}
.bs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.07);
  color: #fff;
  padding: 13px 24px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  border: 1px solid rgba(255,255,255,.18);
  cursor: pointer;
  transition: background .22s, border-color .22s;
  text-decoration: none;
  font-family: var(--f);
}
.bs:hover {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.3);
}

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1);
}
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: .09s; }
.d2 { transition-delay: .18s; }
.d3 { transition-delay: .27s; }
.d4 { transition-delay: .36s; }

/* Fundaluri secțiuni (sistem F1-F7) */
.sec-f1 { background: var(--w);   padding: 88px 0; }
.sec-f2 { background: var(--g0);  padding: 88px 0; }
.sec-f3 { background: var(--b9);  padding: 88px 0; }
.sec-f4 { background: var(--dk);  padding: 88px 0; }
.sec-f5 { background: var(--o1);  padding: 88px 0; }
.sec-f6 { background: var(--b7);  padding: 88px 0; }
.sec-f7 { background: linear-gradient(135deg, var(--dk) 0%, var(--b9) 100%); padding: 88px 0; }

/* ============================================================
   BANNER GLOBAL
   ============================================================ */
#bannerGlobal {
  background: var(--b7);
  color: #fff;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 20px;
  transition: all .3s;
}
#bannerGlobal a { color: #fff; text-decoration: underline; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nh);
  z-index: 200;
  background: rgba(10, 46, 92, .96);
  backdrop-filter: blur(14px);
  box-shadow: 0 2px 24px rgba(0,0,0,.18);
  transition: top .3s;
}
.ni {
  display: flex;
  align-items: center;
  height: var(--nh);
  max-width: var(--mw);
  margin: 0 auto;
  padding: 0 28px;
  gap: 16px;
}
/* Logo */
.nl {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  flex-shrink: 0;
}
.nl .logo-img    { width: 34px; height: 34px; object-fit: contain; border-radius: 8px; }
.nl .logo-fallback {
  width: 34px; height: 34px;
  background: var(--b5);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}
.nl span { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -.02em; }
/* Linkuri desktop */
.nls { display: flex; align-items: center; gap: 20px; }
.nls a {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.62);
  transition: color .2s;
  position: relative;
  white-space: nowrap;
}
.nls a:hover,
.nls a.nav-active { color: #fff; }
.nls a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1.5px;
  background: var(--o5);
  transition: width .25s;
}
.nls a:hover::after,
.nls a.nav-active::after { width: 100%; }
/* CTA nav */
.ncta {
  background: var(--o6) !important;
  color: #fff !important;
  padding: 8px 18px;
  border-radius: 6px;
  font-weight: 600;
  transition: background .2s, transform .2s !important;
  white-space: nowrap;
  flex-shrink: 0;
}
.ncta::after { display: none !important; }
.ncta:hover  { background: #cf6420 !important; transform: translateY(-1px) !important; }
/* Burger — mereu vizibil, dreapta CTA */
.nbg {
  display: flex;
  flex-shrink: 0;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 6px;
  cursor: pointer;
  padding: 8px 10px;
  flex-direction: column;
  gap: 4px;
  transition: background .2s;
}
.nbg:hover { background: rgba(255,255,255,.18); }
.nbg span  { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; }

/* ============================================================
   OFF-CANVAS
   ============================================================ */
.oc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 299;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
  backdrop-filter: blur(4px);
}
.oc-overlay.open { opacity: 1; visibility: visible; }

.oc {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(340px, 90vw);
  background: var(--dk);
  z-index: 300;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.oc.open { transform: none; }

.oc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.oc-close {
  background: rgba(255,255,255,.08);
  border: none;
  color: #fff;
  cursor: pointer;
  border-radius: 6px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.oc-close:hover { background: rgba(255,255,255,.16); }

.oc-nav { flex: 1; padding: 12px 0; }

.oc-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.28);
  padding: 12px 24px 6px;
}
.oc-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.72);
  transition: all .18s;
  border-left: 3px solid transparent;
}
.oc-nav a:hover,
.oc-nav a[aria-current="page"] {
  color: #fff;
  background: rgba(255,255,255,.05);
  border-left-color: var(--o5);
}
.oc-sep {
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 8px 24px;
}
.oc-footer {
  padding: 20px 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.oc-cta {
  display: block;
  background: var(--o6);
  color: #fff;
  text-align: center;
  padding: 13px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  transition: background .2s;
}
.oc-cta:hover { background: #cf6420; }
.oc-note {
  font-size: 11px;
  color: rgba(255,255,255,.28);
  text-align: center;
  margin-top: 8px;
}

/* ============================================================
   SHARE BAR
   ============================================================ */
.share-bar {
  background: var(--g0);
  border-top: 1px solid var(--g2);
  padding: 16px 0;
  text-align: center;
}
.share-bar .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 13px;
  color: var(--g5);
  flex-wrap: wrap;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--w);
  border: 1px solid var(--g2);
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--g7);
  cursor: pointer;
  transition: all .2s;
  font-family: var(--f);
}
.share-btn:hover {
  border-color: var(--b4);
  color: var(--b7);
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot { background: var(--dk); padding: 64px 0 32px; }
.footg {
  display: grid;
  grid-template-columns: 2.5fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
  align-items: start;
}
.fbrand p {
  font-size: 14px;
  color: rgba(255,255,255,.38);
  line-height: 1.75;
  margin-top: 14px;
  max-width: 300px;
}
.logo-wrap  { display: flex; align-items: center; gap: 10px; }
.logo-fallback {
  width: 36px; height: 36px;
  background: var(--b5);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}
.brand-name { font-size: 16px; font-weight: 700; color: #fff; }
.foot h5 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.32);
  margin-bottom: 14px;
}
.foot ul { list-style: none; }
.foot ul li { margin-bottom: 8px; }
.foot ul li a {
  font-size: 13px;
  color: rgba(255,255,255,.42);
  transition: color .2s;
}
.foot ul li a:hover { color: #fff; }

/* Bottom bar */
.footbot {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.footbot span { font-size: 12px; color: rgba(255,255,255,.26); }
.footbot a { color: rgba(255,255,255,.34); transition: color .2s; }
.footbot a:hover { color: #fff; }

/* ============================================================
   CTA FINAL (comun pe toate paginile)
   ============================================================ */
.ctaf {
  padding: 96px 0;
  background: var(--b9);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ctaf::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(33,150,243,.15), transparent 55%);
}
.ctaf h2 {
  font-size: clamp(26px, 4vw, 46px);
  font-weight: 800;
  color: #fff;
  margin-bottom: 14px;
  position: relative;
  letter-spacing: -.025em;
  line-height: 1.2;
}
.ctaf h2 em { font-style: normal; color: var(--o5); }
.ctaf p {
  font-size: 16px;
  color: rgba(255,255,255,.52);
  margin-bottom: 32px;
  position: relative;
}
.ctaf .bp { font-size: 17px; padding: 16px 40px; position: relative; }
.ctanote {
  font-size: 13px;
  color: rgba(255,255,255,.32);
  margin-top: 16px;
  position: relative;
}

/* ============================================================
   STT — Scroll to top
   ============================================================ */
.stt {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--o6);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: all .3s;
  box-shadow: 0 4px 16px rgba(232,117,44,.4);
}
.stt.vis { opacity: 1; visibility: visible; }
.stt:hover { background: #cf6420; transform: translateY(-3px); }

/* ============================================================
   RESPONSIVE GLOBAL
   ============================================================ */
@media (max-width: 1024px) {
  .footg { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 959px) {
  .nls { display: none; }
  .sec-f1, .sec-f2, .sec-f3,
  .sec-f4, .sec-f5, .sec-f6, .sec-f7 { padding: 64px 0; }
}
@media (max-width: 767px) {
  :root { --nh: 60px; }
  .wrap { padding: 0 16px; }
  .ni   { padding: 0 16px; gap: 10px; }
  .nl span { display: none; }
  .footg { grid-template-columns: 1fr; gap: 28px; }
  .footbot { flex-direction: column; text-align: center; gap: 10px; }
  .share-bar .wrap { gap: 8px; }
  .ctaf { padding: 64px 0; }
  .ctaf .bp { font-size: 15px; padding: 14px 28px; }
  .sec-f1, .sec-f2, .sec-f3,
  .sec-f4, .sec-f5, .sec-f6, .sec-f7 { padding: 52px 0; }
  .stt { bottom: 16px; right: 16px; }
}
@media (max-width: 480px) {
  .nl span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .str, .hd, .cbar, .rfg { transition: none; }
  .stt { transition: none; }
}

/* Tabel comparatii — X rosu global */
.tno { color: #dc2626; font-weight: 700; }