/* ==========================================================================
   devcos.ro — Paletă cromatică B2B și sistemul global de acțiuni
   --------------------------------------------------------------------------
   Acest site e un EXPORT static Next.js — nu există aici tema din codul sursă.
   Prin urmare paleta e centralizată aici: remapează tokenurile :root ale
   export-ului + suprascrie regulile cu culori hardcodate din chunk-ul Next.
   Încărcat DUPĂ /_next/static/chunks/02h7uw6g2.a9-.css, deci câștigă în cascadă.
   Include și geometria comună a butoanelor; structura și textele rămân separate.
   ========================================================================== */

:root {
  /* suprafețe */
  --bg: #F8FAFC;
  --bg-alt: #F1F5F9;
  --bg-muted: #F1F5F9;
  --bg-card: #FFFFFF;

  /* text */
  --text: #17202A;
  --text-muted: #475569;
  --text-subtle: #64748B;
  --text-light: #FFFFFF;

  /* accent GENERAL = verde petrol (linkuri, iconuri, focus, accente tehnice) */
  --highlight: #0F766E;
  --highlight-deep: #0B5F59;

  /* borduri */
  --line: #D9E2EC;
  --line-dark: #D9E2EC;

  /* tokenuri semantice — sursă unică de adevăr */
  --color-primary: #16324F;
  --color-primary-hover: #0F263C;
  --color-primary-dark: #0F1F30;
  --color-secondary: #0F766E;
  --color-secondary-hover: #0B5F59;
  --color-cta: #C2410C;
  --color-cta-hover: #9A3412;
  --color-background: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F1F5F9;
  --color-text: #17202A;
  --color-text-secondary: #475569;
  --color-text-muted: #64748B;
  --color-text-on-dark: #FFFFFF;
  --color-border: #D9E2EC;
  --color-border-subtle: #E2E8F0;
  --color-success: #15803D;
  --color-error: #B91C1C;
  --color-warning: #A16207;
  --color-focus: #0F766E;
  --shadow-color: rgba(15, 31, 48, .08);
  --shadow-color-strong: rgba(15, 31, 48, .14);
}

/* — identitate & titluri → bleumarin — */
.hero h1,
.section-head h2,
.cta h2,
.card h3,
.feature h4,
.trust-grid strong { color: #16324F; }

.gradient-text { color: #0F766E; }
/* eyebrow petrol — specificitate peste .section-head p / .companion-copy p din gazdă */
.section-head .eyebrow,
.companion-copy .eyebrow,
.eyebrow { color: #0F766E; }

/* — focus vizibil & selecție → verde petrol — */
:focus-visible { outline: 3px solid #0F766E; outline-offset: 3px; }
::selection { background: #0F766E; color: #FFFFFF; }

/* — CTA principal → portocaliu (distinct de accentul general) — */
.btn {
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.btn--lg {
  height: 56px;
  padding-inline: 28px;
}

.btn--primary {
  justify-content: space-between;
  gap: clamp(16px, 2vw, 28px);
  background: #C2410C;
  border-color: #C2410C;
  color: #FFFFFF;
}
.btn--primary:hover { background: #9A3412; border-color: #9A3412; }
.btn--primary:not([target="_blank"])::after {
  content: "→";
  flex: none;
  font-size: 1.4em;
  font-weight: 400;
  line-height: 1;
  transition: transform .2s ease;
}
.btn--primary:not([target="_blank"]):hover::after { transform: translateX(4px); }

/* — buton secundar / ghost → contur bleumarin, umplere la hover — */
.btn--ghost { border-color: #16324F; border-radius: 12px; color: #16324F; }
.btn--ghost:hover { background: #16324F; border-color: #16324F; color: #FFFFFF; }

/* Acțiunea telefonică: icon discret și linie inferioară, ca în referință. */
.btn--ghost[href^="tel:"] {
  gap: 12px;
  padding-inline: 4px;
  border: 0;
  border-bottom: 3px solid #C2410C;
  border-radius: 0;
  background: transparent;
  color: #16324F;
}
.btn--ghost[href^="tel:"]::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  background: #C2410C;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.69 2.8a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.33 1.85.56 2.81.69A2 2 0 0 1 22 16.92z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.69 2.8a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.33 1.85.56 2.81.69A2 2 0 0 1 22 16.92z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.btn--ghost[href^="tel:"]:hover {
  background: transparent;
  border-bottom-color: #9A3412;
  color: #16324F;
}

.site-header .btn--ghost[href^="tel:"] { min-width: 190px; }
.site-header .btn { height: 50px; }
.site-header .btn--primary { min-width: 200px; }

/* — header + bara „Nou” — */
.site-header { background: #F8FAFCe6; border-bottom-color: #D9E2EC; }
.site-header .brand img { height: 40px; }
.announce { background: #16324F; color: #CBD5E1; }
.announce b { color: #FFFFFF; }
.announce a { color: #5EEAD4; }
.announce a:hover { color: #FFFFFF; }

/* — accente & divizoare — */
.rule { background: #0F766E; }
.nav a:after,
.panel-bar i { background: #0F766E; }
.step { border-top-color: #D9E2EC; }
.step b { color: #0F766E; }
.faq-list { border-top-color: #D9E2EC; }
.card:hover,
.feature:hover { border-color: #0F766E; }
.card:hover { box-shadow: 0 18px 40px rgba(15, 31, 48, .14); }
.cta-meta a:hover,
.faq-list summary:hover,
.faq-list summary:after { color: #0F766E; }

/* FAQ — compact, clar și în aceeași familie vizuală cu restul site-ului */
#intrebari .faq-list {
  display: grid;
  gap: 10px;
  max-width: 1040px;
  margin-top: 32px;
  border-top: 0;
}

#intrebari .faq-list details {
  position: relative;
  overflow: hidden;
  border: 1px solid #D9E2EC;
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: 0 7px 22px rgba(15, 31, 48, .035);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

#intrebari .faq-list details:hover {
  border-color: rgba(15, 118, 110, .34);
  box-shadow: 0 10px 26px rgba(15, 31, 48, .065);
}

#intrebari .faq-list details[open] {
  border-color: rgba(15, 118, 110, .42);
  background: linear-gradient(135deg, rgba(15, 118, 110, .045), transparent 58%), #FFFFFF;
  box-shadow: 0 14px 34px rgba(15, 31, 48, .08);
}

#intrebari .faq-list details[open]::before {
  position: absolute;
  inset: 12px auto 12px 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: #0F766E;
  content: "";
}

#intrebari .faq-list summary {
  min-height: 0;
  padding: 18px 20px;
  color: #16324F;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.35;
  transition: color .2s ease, padding .2s ease;
}

#intrebari .faq-list summary::after {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(15, 118, 110, .2);
  border-radius: 50%;
  background: rgba(15, 118, 110, .08);
  color: #0F766E;
  font-size: 21px;
  font-weight: 400;
  transition: transform .25s ease, background-color .2s ease, color .2s ease;
}

#intrebari .faq-list details[open] summary {
  padding-bottom: 11px;
  color: #0F766E;
}

#intrebari .faq-list details[open] summary::after {
  background: #0F766E;
  color: #FFFFFF;
  transform: rotate(45deg);
}

#intrebari .faq-list p {
  max-width: 900px;
  padding: 0 64px 19px 20px;
  color: #475569;
  font-size: 15.5px;
  line-height: 1.62;
}

@media (max-width: 620px) {
  #intrebari .faq-list {
    gap: 8px;
    margin-top: 26px;
  }

  #intrebari .faq-list summary {
    padding: 15px 16px;
    font-size: 16px;
  }

  #intrebari .faq-list summary::after {
    width: 29px;
    height: 29px;
    flex-basis: 29px;
    font-size: 19px;
  }

  #intrebari .faq-list details[open] summary {
    padding-bottom: 9px;
  }

  #intrebari .faq-list p {
    padding: 0 16px 16px;
    font-size: 14.5px;
    line-height: 1.58;
  }
}

/* — Etichetele de status ale cardurilor —
   Erau pastile colorate: umplere la 8% peste bordură la 28%, adică două
   contururi în aceeași nuanță, cu aceeași greutate vizuală ca pastilele de
   funcții de mai jos. Rezultatul concura cu titlul și arăta decorativ.
   Acum sunt marcaje de status: culoarea rămâne doar în bulină, textul trece
   în bleumarinul identității, iar cutia dispare. */
.card-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

.card-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #C2410C;
  box-shadow: 0 0 0 3px rgba(194, 65, 12, .15);
}

/* Produs disponibil: verde de disponibilitate, singura culoare din etichetă. */
.card-tag.card-tag--live::before {
  background: #15803D;
  box-shadow: 0 0 0 3px rgba(21, 128, 61, .15);
}

/* — status „Activă” din mockup-ul devERP → succes — */
.panel-row .ok { color: #15803D; }

/* — secțiunea devERP → bandă bleumarin cu text alb — */
#deverp { background: #16324F; }
#deverp .eyebrow { color: #5EEAD4; }
#deverp .companion-copy h2 { color: #FFFFFF; }
#deverp .companion-copy p { color: #CBD5E1; }
#deverp .rule { background: #5EEAD4; }
#deverp .btn--ghost { border-color: #FFFFFF; color: #FFFFFF; }
#deverp .btn--ghost:hover { background: #FFFFFF; border-color: #FFFFFF; color: #16324F; }
#deverp .panel { background: #FFFFFF; border-color: rgba(255, 255, 255, .18); }
#deverp .panel-bar { color: #475569; border-bottom-color: #E2E8F0; }

/* — footer bleumarin închis; DOAR sigla din antetul brand-ului e gri/crem — */
.site-footer { background: #0F1F30; color: #CBD5E1; }
.footer-col a,
.footer-legal { color: #CBD5E1; }
.footer-col a:hover { color: #5EEAD4; }
.footer-col h4 { color: #FFFFFF; }
.footer-legal { border-top-color: rgba(255, 255, 255, .16); }

/* antetul din footer = panou pe fundalul footer-ului (bleumarin) */
.footer-brand {
  align-self: start;
  background: #0F1F30;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 14px;
  padding: 15px 22px 17px;
}
/* variantă bicoloră dedicată footer-ului; logo-ul identic din header rămâne neschimbat */
.footer-brand .brand {
  background: url("/assets/devcos-logo-footer.svg?v=2") center / contain no-repeat;
}
.footer-brand .brand img {
  filter: none;
  opacity: 0;
}
.footer-brand p { color: #CBD5E1; margin-top: 11px; }

/* — footer bottom: identificare + documente legale la stânga, acces SAL la dreapta — */
.footer-legal { align-items: center; gap: 14px 22px; }
.footer-legal__meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 8px;
  color: #CBD5E1;
  font-size: 13px;
}
.footer-legal__cui { color: #94A3B8; }
.footer-legal__links {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 12px;
}
.footer-legal__links a {
  color: #CBD5E1;
  font-size: 12px;
  text-decoration: underline;
  text-decoration-color: rgba(203, 213, 225, .35);
  text-underline-offset: 3px;
}
.footer-legal__links a:hover { color: #5EEAD4; text-decoration-color: currentColor; }
.footer-anpc__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #CBD5E1;
  font-size: 13px;
}
.footer-anpc__tag svg { width: 15px; height: 15px; }
.footer-anpc__badges { display: flex; gap: 10px; flex-wrap: wrap; }

/* desktop: forțează un singur rând — badge-urile rămân în dreapta */
@media (min-width: 901px) {
  .footer-legal { flex-wrap: nowrap; }
  .footer-legal__meta { min-width: 0; flex: 1 1 auto; }
  .footer-anpc__badges { flex: 0 0 auto; }
}

.anpc-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  background: #FFFFFF;
  border: 1px solid #D9E2EC;
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}
.anpc-badge:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .3); transform: translateY(-1px); }
.anpc-badge:focus-visible { outline: 3px solid #5EEAD4; outline-offset: 3px; }
.anpc-badge__mark { display: inline-flex; align-items: center; gap: 6px; }
.anpc-flag {
  width: 17px; height: 12px; flex: none; border-radius: 2px;
  background: linear-gradient(90deg, #0033A0 0 33.34%, #FCD116 33.34% 66.67%, #CE1126 66.67%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.anpc-badge__mark b { color: #CE1126; font-size: 12px; font-weight: 800; letter-spacing: .01em; }
.anpc-badge__text {
  max-width: 116px;
  color: #16324F;
  font-size: 9px; font-weight: 700; line-height: 1.18;
  text-transform: uppercase; letter-spacing: .02em;
}
.anpc-badge__text--wide { max-width: 130px; }
.anpc-badge__btn {
  padding: 3px 9px; border-radius: 6px;
  background: #16324F; color: #FFFFFF;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}

@media (max-width: 900px) {
  .footer-legal { justify-content: center; text-align: center; }
  .footer-legal__meta,
  .footer-anpc__badges,
  .footer-legal__links { justify-content: center; width: 100%; }
}