/* ═══════════════════════════════════════════════════════════════════════════
   FIRMA-TIERS.CSS — Design premium modern pentru mini-site-urile BaecoSupply
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Reset & root ─────────────────────────────────────────────────────────── */
:root {
  --bg:    #09090b;
  --bg2:   #0f1015;
  --bg3:   #16181f;
  --bg4:   #1c1f28;
  --card:  #111318;
  --border: rgba(255,255,255,.07);
  --border2: rgba(255,255,255,.12);
  --o:     #f05a1a;
  --ol:    #ff7043;
  --o10:   rgba(240,90,26,.10);
  --o20:   rgba(240,90,26,.20);
  --o30:   rgba(240,90,26,.30);
  --w:     #fff;
  --w90:   rgba(255,255,255,.9);
  --w70:   rgba(255,255,255,.7);
  --w50:   rgba(255,255,255,.5);
  --w30:   rgba(255,255,255,.3);
  --w10:   rgba(255,255,255,.08);
  --green: #22c55e;
  --blue:  #3b82f6;
  --r4:    4px; --r8: 8px; --r12: 12px; --r16: 16px; --r20: 20px;
  --shadow: 0 4px 24px rgba(0,0,0,.4);
  --shadow-card: 0 1px 3px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.2);
}

*,*::before,*::after { box-sizing: border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--w);
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--o); border-radius: 4px; }
@keyframes fadeUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.5;} }

/* ── HEADER ───────────────────────────────────────────────────────────────── */
.f-nav {
  position: sticky; top:0; z-index:200;
  background: rgba(9,9,11,.88);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.f-nav-inner {
  max-width: 1100px; margin: 0 auto;
  padding: 0 1.5rem;
  height: 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.f-logo { font-family:'Bebas Neue',sans-serif; font-size:1.3rem; letter-spacing:.08em; }
.f-logo span { color: var(--o); }
.f-bc { display:flex; align-items:center; gap:.3rem; font-size:.7rem; color:var(--w50); flex:1; overflow:hidden; }
.f-bc a { color:var(--w50); transition:color .2s; white-space:nowrap; } .f-bc a:hover { color:var(--o); }
.f-bc-sep { color:var(--border2); }
.f-bc-cur { color:var(--w70); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.f-nav-cta {
  background:var(--o); color:#fff; padding:.38rem .9rem;
  border-radius:var(--r8); font-size:.72rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; flex-shrink:0;
  transition: background .2s, transform .15s;
}
.f-nav-cta:hover { background:var(--ol); transform:translateY(-1px); }

/* ── HERO ─────────────────────────────────────────────────────────────────── */
.f-hero {
  background: linear-gradient(160deg, rgba(15,16,21,.98) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
  padding: 2.5rem 1.5rem 0;
  position: relative; overflow: hidden;
}
.f-hero::before {
  content:'';
  position:absolute; top:-20%; right:-5%;
  width: 500px; height:500px;
  background: radial-gradient(circle, rgba(240,90,26,.055) 0%, transparent 65%);
  pointer-events:none;
}
.f-hero-inner { max-width:1100px; margin:0 auto; position:relative; z-index:2; }

/* Firm identity */
.f-ident { display:flex; gap:1.25rem; align-items:flex-start; margin-bottom:1.5rem; }
.f-avatar {
  width: 72px; height:72px; flex-shrink:0;
  background: linear-gradient(135deg, var(--o20), var(--o10));
  border: 1px solid var(--o30);
  border-radius: var(--r16);
  display:flex; align-items:center; justify-content:center;
  font-family:'Bebas Neue',sans-serif;
  font-size: 1.6rem; letter-spacing:.04em; color:var(--o);
  box-shadow: 0 0 24px rgba(240,90,26,.1);
}
.f-ident-body { flex:1; min-width:0; }
.f-badges { display:flex; gap:.35rem; flex-wrap:wrap; margin-bottom:.55rem; }
.f-badge {
  display:inline-flex; align-items:center; gap:.28rem;
  font-size:.58rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:.2rem .55rem; border-radius:20px;
}
.f-badge-ver { background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.25); color:var(--green); }
.f-badge-cui { background:rgba(59,130,246,.1); border:1px solid rgba(59,130,246,.25); color:var(--blue); }
.f-badge-web { background:var(--o10); border:1px solid var(--o30); color:var(--o); }
.f-name {
  font-family:'Bebas Neue',sans-serif;
  font-size: clamp(1.7rem, 5.5vw, 2.8rem);
  letter-spacing:.03em; line-height:.95;
  margin-bottom:.4rem;
}
.f-cat { font-size:.8rem; color:var(--o); font-weight:600; margin-bottom:.28rem; }
.f-loc { font-size:.76rem; color:var(--w50); display:flex; align-items:center; gap:.3rem; }

/* Action buttons */
.f-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.6rem; }
.f-btn {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.6rem 1.15rem; border-radius:var(--r8);
  font-size:.8rem; font-weight:700; letter-spacing:.02em;
  border:none; transition:all .2s; cursor:pointer;
}
.f-btn-call  { background:var(--o); color:#fff; }
.f-btn-call:hover  { background:var(--ol); transform:translateY(-2px); box-shadow:0 6px 20px rgba(240,90,26,.35); }
.f-btn-wa    { background:#25d366; color:#fff; }
.f-btn-wa:hover    { background:#1ebe5c; transform:translateY(-2px); box-shadow:0 6px 20px rgba(37,211,102,.3); }
.f-btn-web   { background:var(--bg3); border:1px solid var(--border2); color:var(--w70); }
.f-btn-web:hover   { border-color:var(--o); color:var(--o); transform:translateY(-1px); }
.f-btn-maps  { background:var(--bg3); border:1px solid var(--border2); color:var(--w70); }
.f-btn-maps:hover  { border-color:var(--blue); color:var(--blue); transform:translateY(-1px); }
.f-btn-fb    { background:#1877f2; color:#fff; }
.f-btn-fb:hover    { background:#166fe5; transform:translateY(-1px); }
.f-btn-ig    { background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#bc1888); color:#fff; }
.f-btn-ig:hover    { opacity:.88; transform:translateY(-1px); }

/* Tab nav */
.f-tabs {
  display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border-top:1px solid var(--border);
  scrollbar-width:none;
}
.f-tabs::-webkit-scrollbar { display:none; }
.f-tab {
  padding:.8rem 1rem; font-size:.72rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--w50);
  border:none; background:transparent;
  border-bottom:2px solid transparent;
  cursor:pointer; transition:all .2s; white-space:nowrap; flex-shrink:0;
}
.f-tab.on   { color:var(--o); border-bottom-color:var(--o); }
.f-tab:hover:not(.on) { color:var(--w70); }

/* ── BODY LAYOUT ──────────────────────────────────────────────────────────── */
.f-body {
  max-width:1100px; margin:0 auto;
  padding:2rem 1.5rem;
  display:grid;
  grid-template-columns: 1fr 320px;
  gap: 1.5rem;
  align-items: start;
}
.f-main { min-width:0; }
.f-aside { position:sticky; top:72px; display:flex; flex-direction:column; gap:1rem; }

/* ── CARDS ────────────────────────────────────────────────────────────────── */
.f-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r16);
  overflow: hidden;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-card);
  animation: fadeUp .3s both;
}
.f-card:last-child { margin-bottom:0; }
.f-card-head {
  padding:.9rem 1.25rem;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.f-card-title {
  font-size:.65rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--w50);
  display:flex; align-items:center; gap:.45rem;
}
.f-card-title-icon { color:var(--o); font-style:normal; }
.f-card-link { font-size:.7rem; font-weight:700; color:var(--o); letter-spacing:.04em; transition:opacity .2s; }
.f-card-link:hover { opacity:.72; }
.f-card-body { padding:1.25rem; }

/* ── ABOUT section ────────────────────────────────────────────────────────── */
.f-about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
}
.f-desc { font-size:.88rem; color:var(--w70); line-height:1.85; }
.f-desc strong { color:var(--w); font-weight:600; }
.f-services-title {
  font-size:.6rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--w50); margin-bottom:.75rem;
}
.f-services-list { display:flex; flex-direction:column; gap:.42rem; }
.f-service-item {
  display:flex; align-items:center; gap:.6rem;
  font-size:.82rem; color:var(--w70);
}
.f-service-check {
  width:18px; height:18px; flex-shrink:0;
  background:var(--o10); border:1px solid var(--o30);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:.55rem; color:var(--o); font-weight:700;
}

/* ── GALLERY ──────────────────────────────────────────────────────────────── */
.f-gallery {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.6rem;
}
.f-gallery img {
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--r8); border:1px solid var(--border);
  display:block; transition:transform .25s, border-color .25s;
}
.f-gallery img:hover { transform:scale(1.02); border-color:var(--o30); }

/* ── FIRM DATA ────────────────────────────────────────────────────────────── */
.f-data-rows { display:flex; flex-direction:column; }
.f-data-row {
  display:flex; align-items:center; gap:1rem;
  padding:.72rem 0; border-bottom:1px solid var(--border);
}
.f-data-row:last-child { border-bottom:none; }
.f-data-icon {
  width:32px; height:32px; flex-shrink:0;
  background:var(--w10); border:1px solid var(--border);
  border-radius:var(--r8);
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem;
}
.f-data-label { font-size:.62rem; color:var(--w50); text-transform:uppercase; letter-spacing:.08em; margin-bottom:.06rem; }
.f-data-val { font-size:.84rem; color:var(--w90); }
.f-data-val a { color:var(--o); transition:opacity .2s; } .f-data-val a:hover { opacity:.75; }

/* ── MAP ──────────────────────────────────────────────────────────────────── */
.f-map-wrap {
  border-radius:var(--r8); overflow:hidden;
  border:1px solid var(--border); margin-bottom:.75rem;
}
.f-map-wrap iframe { width:100%; height:240px; border:none; display:block; }
.f-map-link {
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.76rem; font-weight:700; color:var(--blue); letter-spacing:.03em;
  transition:opacity .2s;
}
.f-map-link:hover { opacity:.72; }

/* ── CONTACT SIDEBAR ──────────────────────────────────────────────────────── */
.f-contact-card {
  background: var(--card);
  border:1px solid var(--border);
  border-radius:var(--r16);
  overflow:hidden;
  box-shadow: var(--shadow-card);
}
.f-contact-head {
  padding:1rem 1.25rem;
  background:linear-gradient(135deg, var(--o10), transparent);
  border-bottom:1px solid var(--border);
}
.f-contact-label { font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--w50); margin-bottom:.22rem; }
.f-contact-name  { font-family:'Bebas Neue',sans-serif; font-size:1.1rem; letter-spacing:.04em; color:var(--w); line-height:1.1; }
.f-contact-rows  { padding:.25rem 0; }
.f-contact-row   { display:flex; align-items:center; gap:.75rem; padding:.6rem 1.25rem; border-bottom:1px solid var(--border); transition:background .18s; }
.f-contact-row:last-child { border-bottom:none; }
.f-contact-row:hover { background:var(--w10); }
.f-contact-ico   { width:28px; height:28px; flex-shrink:0; background:var(--bg3); border:1px solid var(--border); border-radius:var(--r8); display:flex; align-items:center; justify-content:center; font-size:.8rem; }
.f-contact-info  { flex:1; min-width:0; }
.f-contact-info-label { font-size:.58rem; color:var(--w50); text-transform:uppercase; letter-spacing:.07em; }
.f-contact-info-val   { font-size:.8rem; color:var(--w90); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.f-contact-info-val a { color:var(--o); }
.f-contact-btns  { padding:1rem 1.25rem; display:flex; flex-direction:column; gap:.45rem; }
.f-cta-btn {
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.7rem; border-radius:var(--r8);
  font-weight:700; font-size:.82rem; border:none;
  transition:all .2s; cursor:pointer; min-height:44px;
}
.f-cta-call { background:var(--o); color:#fff; }
.f-cta-call:hover { background:var(--ol); transform:translateY(-1px); box-shadow:0 4px 16px rgba(240,90,26,.3); }
.f-cta-wa   { background:#25d366; color:#fff; }
.f-cta-wa:hover { background:#1ebe5c; transform:translateY(-1px); }
.f-cta-web  { background:var(--bg3); border:1px solid var(--border2); color:var(--w70); }
.f-cta-web:hover { border-color:var(--o); color:var(--o); }
.f-cta-maps { background:var(--bg3); border:1px solid var(--border2); color:var(--w50); }
.f-cta-maps:hover { border-color:var(--blue); color:var(--blue); }
.f-cta-fb   { background:#1877f2; color:#fff; }
.f-cta-fb:hover { background:#166fe5; }
.f-cta-ig   { background:linear-gradient(135deg,#f09433,#dc2743,#bc1888); color:#fff; }

/* ── CLAIM CARD ───────────────────────────────────────────────────────────── */
.f-claim-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r16);
  overflow:hidden; position:relative;
  box-shadow:var(--shadow-card);
}
.f-claim-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--o), transparent);
}
.f-claim-inner { padding:1.25rem; }
.f-claim-tag { font-size:.58rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--o); margin-bottom:.55rem; display:flex; align-items:center; gap:.3rem; }
.f-claim-title { font-size:.92rem; font-weight:700; margin-bottom:.35rem; }
.f-claim-features { display:flex; flex-direction:column; gap:.3rem; margin-bottom:.9rem; }
.f-claim-feat { font-size:.74rem; color:var(--w70); display:flex; align-items:center; gap:.4rem; }
.f-claim-feat::before { content:'✓'; color:var(--green); font-weight:700; flex-shrink:0; }
.f-claim-btn {
  display:flex; align-items:center; justify-content:center; gap:.4rem;
  width:100%; padding:.65rem; border-radius:var(--r8);
  background:var(--o10); border:1px solid var(--o30); color:var(--o);
  font-size:.78rem; font-weight:700; letter-spacing:.04em;
  cursor:pointer; transition:all .2s;
}
.f-claim-btn:hover { background:var(--o20); transform:translateY(-1px); }

/* ── BAECODIGITAL — card compact (firme fără website) ────────────────────── */
.f-bd-card {
  background: var(--g2, #13141a);
  border: 1px solid rgba(240,90,26,.4);
  border-radius: var(--r12, 12px);
  padding: 1.1rem 1.25rem;
  margin-top: 1.25rem;
  max-height: 220px;
  box-sizing: border-box;
  display: flex; flex-direction: column; gap: .55rem;
}
.f-bd-kicker {
  font-size: .58rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--o);
}
.f-bd-tagline {
  font-size: .82rem; font-weight: 600;
  color: rgba(255,255,255,.88); line-height: 1.45;
}
.f-bd-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--o); color: #fff;
  padding: .52rem 1rem; border-radius: 6px;
  font-weight: 800; font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; border: none; cursor: pointer;
  transition: background .2s, transform .15s;
  align-self: flex-start; white-space: nowrap;
}
.f-bd-btn:hover {
  background: var(--ol, #ff6d2e);
  transform: translateY(-1px);
}

/* ── BAECODIGITAL — DISCRET în footer (firme cu website) ─────────────────── */
.f-footer-bd {
  font-size:.65rem; color:rgba(255,255,255,.22);
  margin-top:.4rem; line-height:1.6;
}
.f-footer-bd a {
  color:rgba(196,160,80,.45);
  transition:color .2s;
}
.f-footer-bd a:hover { color:#c4a050; }

/* ── MODAL ────────────────────────────────────────────────────────────────── */
.f-modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.85); z-index:1000;
  align-items:center; justify-content:center; padding:1.5rem;
}
.f-modal-overlay.open { display:flex; }
.f-modal {
  background:var(--bg2); border:1px solid var(--border2);
  border-radius:var(--r16); width:100%; max-width:460px;
  box-shadow:0 24px 80px rgba(0,0,0,.6);
  animation:fadeUp .24s both;
  overflow:hidden; max-height:90vh; overflow-y:auto;
}
.f-modal-head {
  padding:1.1rem 1.4rem; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; background:var(--bg2); z-index:2;
}
.f-modal-title { font-family:'Bebas Neue',sans-serif; font-size:1.3rem; letter-spacing:.04em; }
.f-modal-close { background:none; border:none; color:var(--w50); cursor:pointer; padding:.3rem; border-radius:var(--r8); transition:color .2s; } .f-modal-close:hover { color:var(--w); }
.f-modal-body { padding:1.4rem; }
.f-modal-desc { font-size:.82rem; color:var(--w70); margin-bottom:1.2rem; line-height:1.7; }
.f-form-group { margin-bottom:.85rem; }
.f-form-label { display:block; font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--w50); margin-bottom:.3rem; }
.f-form-input, .f-form-select {
  width:100%; background:var(--bg3); border:1px solid var(--border2);
  border-radius:var(--r8); padding:.62rem .9rem;
  color:var(--w); font-size:.86rem; outline:none; transition:border .2s;
  font-family:inherit;
}
.f-form-input:focus, .f-form-select:focus { border-color:var(--o30); box-shadow:0 0 0 3px rgba(240,90,26,.08); }
.f-form-input::placeholder { color:var(--w30); }
.f-form-row { display:grid; grid-template-columns:1fr 1fr; gap:.65rem; }
.f-form-submit {
  width:100%; background:var(--o); color:#fff; border:none;
  border-radius:var(--r8); padding:.78rem;
  font-size:.88rem; font-weight:700; letter-spacing:.03em;
  cursor:pointer; transition:all .2s; margin-top:.4rem;
}
.f-form-submit:hover { background:var(--ol); transform:translateY(-1px); }
.f-form-note { font-size:.65rem; color:var(--w30); text-align:center; margin-top:.6rem; line-height:1.6; }

/* ── FOOTER ───────────────────────────────────────────────────────────────── */
.f-footer {
  background:var(--bg2); border-top:1px solid var(--border);
  padding:2rem 1.5rem 2.5rem;
}
.f-footer-inner { max-width:1100px; margin:0 auto; }
.f-footer-links { display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; margin-bottom:1rem; padding-bottom:1rem; border-bottom:1px solid var(--border); }
.f-footer-links a { font-size:.72rem; color:var(--w50); transition:color .2s; } .f-footer-links a:hover { color:var(--o); }
.f-footer-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem; }
.f-footer-copy { font-size:.7rem; color:var(--w30); }
.f-footer-copy b { color:var(--o); }
.f-footer-copy a { color:var(--w50); transition:color .2s; } .f-footer-copy a:hover { color:var(--w); }
.f-footer-bd { font-size:.62rem; color:rgba(255,255,255,.15); }
.f-footer-bd a { color:rgba(240,90,26,.35); transition:color .2s; } .f-footer-bd a:hover { color:var(--o); }

/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width:720px) {
  .f-body { grid-template-columns:1fr !important; padding:1.25rem 1rem; gap:1rem; }
  .f-aside { position:static; }
  .f-about-grid { grid-template-columns:1fr !important; gap:1rem; }
  .f-bd-features { grid-template-columns:1fr !important; }
  .f-form-row { grid-template-columns:1fr !important; }
  .f-hero { padding:2rem 1rem 0; }
  .f-nav-inner { padding:0 1rem; }
  .f-avatar { width:60px; height:60px; font-size:1.35rem; }
  .f-name { font-size:1.65rem; }
  .f-gallery { grid-template-columns:1fr 1fr; }
  .f-footer { padding:1.5rem 1rem 2rem; }
  .f-footer-bottom { flex-direction:column; align-items:flex-start; gap:.4rem; }
  .f-actions { gap:.4rem; }
  .f-btn { padding:.55rem .9rem; font-size:.76rem; }
  .f-bd-body { flex-direction:column; align-items:flex-start; gap:.6rem; }
  .f-bd-right { display:none; }
}
@media (max-width:380px) {
  .f-ident { gap:.85rem; }
  .f-avatar { width:52px; height:52px; font-size:1.2rem; }
  .f-name { font-size:1.45rem; }
  .f-gallery { grid-template-columns:1fr; }
}

/* ── TAB CONTENT VISIBILITY ───────────────────────────────────────────────── */
.f-tab-panel { display:none; }
.f-tab-panel.active { display:block; }