/* ==========================================================================
   GRANDRECYCLING.RO — sistem de design
   Tokens, primitive de layout, componente. Scris pentru a fi portat 1:1
   in theme.json + style.css ale temei block WordPress.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Culori de brand */
  --g-50:#EAFBF1;  --g-100:#CDF4DF; --g-200:#9BE8BF; --g-300:#5FD696;
  --g-400:#2DC77A; --g-500:#12B76A; --g-600:#0E9256; --g-700:#0A6E43;
  --g-800:#074A2D; --g-900:#06301F;

  --b-50:#EAF2FE; --b-100:#D2E3FC; --b-400:#4B8BEB; --b-600:#1660D8;
  --b-700:#124CAB; --b-900:#08234A;

  --y-300:#FFD666; --y-400:#FFC531; --y-500:#F0A800;

  /* Neutre */
  --ink:#0B1512;
  --ink-2:#37453F;
  --ink-3:#66756E;
  --line:#E2E9E4;
  --line-2:#F0F4F1;
  --paper:#FFFFFF;
  --paper-2:#F4F7F3;
  --paper-3:#EBF1EC;

  /* Semantice */
  --focus:#1660D8;
  --danger:#C4321C;

  /* Tipografie */
  --font-display:"Sora","Segoe UI",system-ui,sans-serif;
  --font-body:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;

  --fs-eyebrow:clamp(.72rem,.68rem + .2vw,.8rem);
  --fs-small:clamp(.86rem,.83rem + .15vw,.92rem);
  --fs-body:clamp(1rem,.96rem + .2vw,1.075rem);
  --fs-lead:clamp(1.1rem,1rem + .55vw,1.35rem);
  --fs-h4:clamp(1.1rem,1.02rem + .4vw,1.3rem);
  --fs-h3:clamp(1.3rem,1.15rem + .7vw,1.7rem);
  --fs-h2:clamp(1.85rem,1.45rem + 1.9vw,3.1rem);
  --fs-h1:clamp(2.3rem,1.6rem + 3.2vw,4.4rem);

  /* Spatiu */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem; --sp-10:8rem;
  --section-y:clamp(3.5rem,2rem + 7vw,7.5rem);

  /* Forma */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:32px; --r-pill:999px;

  /* Umbre */
  --sh-1:0 1px 2px rgba(11,21,18,.05), 0 2px 8px rgba(11,21,18,.04);
  --sh-2:0 4px 12px rgba(11,21,18,.06), 0 12px 32px rgba(11,21,18,.07);
  --sh-3:0 8px 24px rgba(11,21,18,.08), 0 28px 64px rgba(11,21,18,.10);
  --sh-g:0 12px 32px rgba(18,183,106,.28);

  --wrap:1240px;
  --wrap-narrow:820px;
  --header-h:78px;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--ink-2);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:1.1;
  letter-spacing:-.025em;
  margin:0 0 var(--sp-4);
  font-weight:700;
}
h1,h2,h3{text-wrap:balance}
h1{font-size:var(--fs-h1);letter-spacing:-.035em}
h2{font-size:var(--fs-h2);letter-spacing:-.03em}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4)}
p{margin:0 0 var(--sp-4)}
p:last-child{margin-bottom:0}
a{color:var(--b-600);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--b-700)}
ul,ol{margin:0 0 var(--sp-4);padding-left:1.25em}
li{margin-bottom:.4em}
strong{color:var(--ink);font-weight:700}
hr{border:0;border-top:1px solid var(--line);margin:var(--sp-7) 0}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
::selection{background:var(--g-200);color:var(--g-900)}

/* ---------- 3. Layout ---------- */
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(100% - 2.5rem,var(--wrap-narrow));margin-inline:auto}
.section{padding-block:var(--section-y);position:relative}
.section--tight{padding-block:clamp(2.5rem,1.5rem + 4vw,4.5rem)}
.section--dark{background:var(--g-900);color:#C7D6CE}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
.section--soft{background:var(--paper-2)}
.section--navy{background:var(--b-900);color:#B9CBE0}
.section--navy h2,.section--navy h3{color:#fff}

.grid{display:grid;gap:var(--sp-5)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4.5rem);align-items:center}
.split--wide-left{grid-template-columns:1.15fr .85fr}
.split--wide-right{grid-template-columns:.85fr 1.15fr}
@media(max-width:900px){.split,.split--wide-left,.split--wide-right{grid-template-columns:1fr}}

.stack>*+*{margin-top:var(--sp-4)}
.center{text-align:center}
.mx-auto{margin-inline:auto}
.mt-4{margin-top:var(--sp-4)}
.mt-6{margin-top:var(--sp-6)}
.mt-7{margin-top:var(--sp-7)}

/* ---------- 4. Tipografie utilitara ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-display);
  font-size:var(--fs-eyebrow);
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--g-600);margin-bottom:var(--sp-4);
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--g-500);border-radius:2px}
.section--dark .eyebrow,.section--navy .eyebrow,.ctaband .eyebrow,.phero .eyebrow{color:var(--g-300)}
.section--dark .eyebrow::before,.section--navy .eyebrow::before,.ctaband .eyebrow::before,.phero .eyebrow::before{background:var(--g-400)}
.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--ink-2);text-wrap:pretty}
/* rupere controlata de rand, doar pe ecran lat */
.brk{display:none}
@media(min-width:860px){.brk{display:inline}}
.section--dark .lead,.section--navy .lead{color:#C7D6CE}
.small{font-size:var(--fs-small)}
.muted{color:var(--ink-3)}
.mark-y{background:linear-gradient(transparent 62%,var(--y-300) 62%);padding:0 .1em}
.txt-g{color:var(--g-500)}
.title-limit{max-width:22ch}
.text-limit{max-width:62ch}

/* ---------- 5. Butoane ---------- */
.btn{
  --btn-bg:var(--g-500);--btn-fg:#fff;--btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-display);font-weight:600;font-size:.98rem;
  line-height:1;padding:1.05rem 1.7rem;border-radius:var(--r-pill);
  background:var(--btn-bg);color:var(--btn-fg);border:1.5px solid var(--btn-bd);
  text-decoration:none;cursor:pointer;position:relative;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .25s,color .25s,border-color .25s;
  will-change:transform;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-g);color:var(--btn-fg)}
.btn:active{transform:translateY(0)}
.btn svg{width:1.05em;height:1.05em;flex:0 0 auto;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--line)}
.btn--ghost:hover{--btn-bg:var(--ink);--btn-fg:#fff;box-shadow:var(--sh-2)}
.btn--light{--btn-bg:#fff;--btn-fg:var(--g-900)}
.btn--light:hover{box-shadow:0 12px 32px rgba(0,0,0,.25)}
.btn--outline-light{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.35)}
.btn--outline-light:hover{--btn-bg:#fff;--btn-fg:var(--g-900);box-shadow:none}
.btn--yellow{--btn-bg:var(--y-400);--btn-fg:#2C1F00}
.btn--yellow:hover{box-shadow:0 12px 32px rgba(255,197,49,.4)}
.btn--lg{padding:1.2rem 2.1rem;font-size:1.05rem}
.btn--sm{padding:.75rem 1.25rem;font-size:.9rem}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-3)}

.link-arrow{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--font-display);font-weight:600;text-decoration:none;
  color:var(--g-600);
}
.link-arrow svg{width:1em;height:1em;transition:transform .3s var(--ease)}
.link-arrow:hover{color:var(--g-700)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ---------- 6. Header ---------- */
.hdr{
  position:fixed;inset:0 0 auto;z-index:900;
  height:var(--header-h);display:flex;align-items:center;
  transition:background .35s var(--ease),box-shadow .35s var(--ease),height .35s var(--ease);
}
.hdr::before{
  content:"";position:absolute;inset:0;background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  opacity:0;transition:opacity .35s var(--ease);
}
.hdr.is-stuck::before{opacity:1}
.hdr.is-stuck{height:66px}

/* Pagini cu hero inchis: pana la derulare, antetul scrie cu alb.
   Un voal subtire in partea de sus tine textul lizibil peste orice fotografie. */
.hdr--over-dark::after{
  content:"";position:absolute;inset:0 0 auto;height:150px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,26,17,.55),transparent);
  transition:opacity .35s var(--ease);
}
.hdr--over-dark.is-stuck::after{opacity:0}
.hdr--over-dark:not(.is-stuck) .brand__name{color:#fff}
.hdr--over-dark:not(.is-stuck) .brand__sub{color:rgba(255,255,255,.62)}
.hdr--over-dark:not(.is-stuck) .nav a{color:#fff}
.hdr--over-dark:not(.is-stuck) .nav a[aria-current="page"]{color:var(--g-300)}
.hdr--over-dark:not(.is-stuck) .nav a::after{background:var(--g-300)}
.hdr--over-dark:not(.is-stuck) .hdr__tel{color:#fff}
.hdr--over-dark:not(.is-stuck) .hdr__tel svg{color:var(--g-300)}
.hdr--over-dark:not(.is-stuck) .burger{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
.hdr--over-dark:not(.is-stuck) .burger span{background:#fff}
/* Paginile legale nu au hero inchis, deci antetul e opac de la inceput */
.hdr--solid::before{opacity:1}
.hdr__in{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto;display:flex;align-items:center;gap:var(--sp-5);position:relative}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;flex:0 0 auto}
.brand img{width:auto;height:52px;object-fit:contain;transition:height .35s var(--ease)}
.hdr.is-stuck .brand img{height:44px}
.brand__txt{display:flex;flex-direction:column;line-height:1.05}
.brand__name{font-family:var(--font-display);font-weight:800;font-size:1.12rem;color:var(--g-900);letter-spacing:-.02em;transition:color .3s}
.brand__sub{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:600;transition:color .3s}

.nav{margin-left:auto;display:flex;align-items:center;gap:.15rem}
.nav a{
  font-family:var(--font-display);font-weight:600;font-size:.94rem;
  color:var(--ink);text-decoration:none;padding:.6rem .85rem;border-radius:var(--r-pill);
  position:relative;transition:color .25s,background .25s;
}
.nav a::after{
  content:"";position:absolute;left:.85rem;right:.85rem;bottom:.35rem;height:2px;
  background:var(--g-500);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--g-700)}
.hdr__cta{margin-left:var(--sp-4);display:flex;gap:.75rem;align-items:center}
.hdr__tel{
  display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-display);
  font-weight:700;color:var(--g-900);text-decoration:none;font-size:.95rem;white-space:nowrap;
}
.hdr__tel svg{width:1.05em;height:1.05em;color:var(--g-500)}
.hdr__tel:hover{color:var(--g-700)}

.burger{
  display:none;margin-left:auto;width:46px;height:46px;border:1.5px solid var(--line);
  background:rgba(255,255,255,.75);border-radius:var(--r-md);cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0;
}
.burger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:1080px){
  .nav,.hdr__cta{display:none}
  .burger{display:flex}
}

.mobilenav{
  position:fixed;inset:0;z-index:890;background:var(--g-900);
  padding:calc(var(--header-h) + 2rem) 1.25rem 2rem;
  display:flex;flex-direction:column;gap:.25rem;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
  overflow-y:auto;
}
.mobilenav.is-open{opacity:1;visibility:visible;transform:none}
.mobilenav a{
  font-family:var(--font-display);font-weight:700;font-size:1.5rem;color:#fff;
  text-decoration:none;padding:.85rem .5rem;border-bottom:1px solid rgba(255,255,255,.1);
}
.mobilenav a[aria-current="page"]{color:var(--g-300)}
.mobilenav .btn{margin-top:var(--sp-5)}
.mobilenav__foot{margin-top:auto;padding-top:var(--sp-6);color:#8FA89A;font-size:.9rem}
.mobilenav__foot a{font-size:1.05rem;color:var(--g-300);border:0;padding:.2rem 0}

/* ---------- 7. Hero ---------- */
.hero{position:relative;padding-top:calc(var(--header-h) + clamp(2.5rem,5vw,5rem));padding-bottom:clamp(3rem,6vw,6rem);overflow:hidden;background:var(--g-900)}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.6}
.hero__mesh{
  position:absolute;inset:-30%;z-index:1;pointer-events:none;
  background:
    radial-gradient(42% 42% at 18% 22%,rgba(18,183,106,.4) 0%,transparent 62%),
    radial-gradient(38% 38% at 82% 18%,rgba(22,96,216,.3) 0%,transparent 60%),
    radial-gradient(45% 45% at 62% 88%,rgba(255,197,49,.15) 0%,transparent 62%);
  filter:blur(28px);
  will-change:transform;
}
.hero__veil{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(5,38,24,.62) 0%,rgba(6,44,28,.76) 55%,rgba(6,48,31,.93) 100%);
}
@media(min-width:981px){
  /* pe ecran lat textul sta doar in stanga, deci acolo pastram intunericul,
     iar spre dreapta lasam fotografia sa respire */
  .hero__veil{
    background:
      linear-gradient(96deg,rgba(4,30,19,.94) 0%,rgba(5,36,23,.84) 40%,rgba(6,44,28,.52) 72%,rgba(6,46,30,.46) 100%),
      linear-gradient(180deg,transparent 58%,rgba(6,48,31,.8) 100%);
  }
}
.hero__in{position:relative;z-index:3}
.hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4.5rem);align-items:center}
@media(max-width:980px){.hero__grid{grid-template-columns:1fr}}
.hero h1{color:#fff;font-size:clamp(2.15rem,1.45rem + 2.9vw,3.5rem);letter-spacing:-.03em}
.hero .lead{color:#C9DCD2;max-width:54ch}
.hero__badge{
  display:inline-flex;align-items:center;gap:.55rem;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  color:#D7EBE0;padding:.5rem 1rem;border-radius:var(--r-pill);
  font-size:.83rem;font-weight:600;font-family:var(--font-display);
  margin-bottom:var(--sp-5);backdrop-filter:blur(8px);
}
.hero__badge .dot{width:8px;height:8px;border-radius:50%;background:var(--g-400);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(45,199,122,.55)}70%{box-shadow:0 0 0 12px rgba(45,199,122,0)}100%{box-shadow:0 0 0 0 rgba(45,199,122,0)}}
/* banda de argumente din coloana dreapta a hero-ului */
.hero__facts{
  display:grid;grid-template-columns:repeat(3,1fr);
  /* aceleasi valori ca .pathcard: cele trei randuri arata identic */
  border:1px solid rgba(255,255,255,.2);border-radius:var(--r-lg);
  background:rgba(255,255,255,.09);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  overflow:hidden;
}
.hero__fact{padding:1.35rem 1.1rem;text-align:center;position:relative}
.hero__fact + .hero__fact::before{
  content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;background:rgba(255,255,255,.14);
}
.hero__fact b{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:1.35rem;color:#fff;letter-spacing:-.03em;line-height:1.1;margin-bottom:.25rem;
}
.hero__fact span{display:block;font-size:.78rem;line-height:1.35;color:#BCD2C5;text-wrap:balance}
@media(max-width:420px){
  .hero__facts{grid-template-columns:1fr}
  .hero__fact + .hero__fact::before{left:14%;right:14%;top:0;bottom:auto;width:auto;height:1px}
}

/* card dublu PF / PJ din hero */
.pathcards{display:grid;gap:1.75rem}
/* cele trei randuri din coloana dreapta au aceeasi distanta intre ele,
   inclusiv inaintea benzii cu argumente; nimic nu primeste tratament special */
.pathcards > * {margin:0}
.pathcard{
  display:flex;gap:1.1rem;align-items:flex-start;text-decoration:none;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-lg);padding:1.8rem 1.7rem;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .35s var(--ease),background .3s,border-color .3s;
}
.pathcard:hover{transform:translateY(-4px);background:rgba(255,255,255,.12);border-color:rgba(45,199,122,.55)}
.pathcard__ico{
  flex:0 0 auto;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--g-500),var(--g-700));color:#fff;
}
.pathcard__ico svg{width:24px;height:24px}
.pathcard--blue .pathcard__ico{background:linear-gradient(135deg,var(--b-400),var(--b-700))}
.pathcard h3{color:#fff;font-size:1.12rem;margin:0 0 .3rem}
.pathcard p{color:#C3D8CB;font-size:.92rem;margin:0}
.pathcard__go{margin-left:auto;align-self:center;color:var(--g-300);flex:0 0 auto}
.pathcard__go svg{width:22px;height:22px;transition:transform .3s var(--ease)}
.pathcard:hover .pathcard__go svg{transform:translateX(4px)}

/* ---------- 8. Marquee ---------- */
.marquee{background:var(--g-500);color:#fff;padding:.9rem 0;overflow:hidden;position:relative}
.marquee__track{display:flex;width:max-content;will-change:transform}
.marquee__grp{display:flex;align-items:center;gap:2.5rem;padding-right:2.5rem}
.marquee__grp span{
  font-family:var(--font-display);font-weight:700;font-size:.95rem;
  letter-spacing:.02em;white-space:nowrap;display:inline-flex;align-items:center;gap:.75rem;
}
.marquee__grp span::after{content:"";width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55)}

/* ---------- 9. Carduri ---------- */
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.4rem,2.4vw,2rem);position:relative;overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:var(--g-200)}
.card__ico{
  width:54px;height:54px;border-radius:16px;display:grid;place-items:center;margin-bottom:var(--sp-4);
  background:var(--g-50);color:var(--g-600);transition:background .3s,color .3s,transform .4s var(--ease);
}
.card__ico svg{width:27px;height:27px}
.card:hover .card__ico{background:var(--g-500);color:#fff;transform:rotate(-6deg) scale(1.05)}
.card h3{font-size:1.2rem;margin-bottom:.6rem}
.card p{font-size:.97rem;margin-bottom:var(--sp-4)}
.card__list{list-style:none;padding:0;margin:0 0 var(--sp-4);font-size:.93rem}
.card__list li{display:flex;gap:.55rem;align-items:flex-start;margin-bottom:.5rem;color:var(--ink-2)}
.card__list li::before{
  content:"";flex:0 0 auto;width:18px;height:18px;margin-top:.18em;border-radius:50%;
  background:var(--g-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A6E43' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
.card--flat:hover{transform:none;box-shadow:var(--sh-1)}
.card--dark{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.card--dark:hover{border-color:rgba(45,199,122,.4)}
.card--dark h3{color:#fff}
.card--dark p,.card--dark .card__list li{color:#B4CBBE}
/* Lista de bife isi fixeaza singura culoarea, deci nu mostenea tonul deschis
   al sectiunilor inchise si ramanea text inchis pe fundal inchis. */
.section--dark .card__list li,
.section--navy .card__list li{color:#B4CBBE}
.section--dark .card__list li strong,
.section--navy .card__list li strong{color:#fff}
.card--dark .card__ico{background:rgba(255,255,255,.1);color:var(--g-300)}
.card--dark .card__list li::before{background-color:rgba(45,199,122,.25)}

/* ---------- 9b. Banda de optiuni care insotesc o colectare ---------- */
/* Nu sunt servicii de sine statatoare, deci nu primesc carduri egale cu
   categoriile de deseuri. Stau intr-un bloc separat, marcat ca atare. */
.optband{
  border:1px solid var(--line);border-radius:var(--r-xl);
  background:var(--paper);padding:clamp(1.5rem,3vw,2.25rem);
}
.optband__head{margin-bottom:var(--sp-5)}
.optband__head .eyebrow{margin-bottom:.5rem}
.optband__head p{margin:0}
.optband__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
@media(max-width:900px){.optband__grid{grid-template-columns:1fr}}
.optcard{
  display:flex;gap:.95rem;align-items:flex-start;text-decoration:none;
  border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:1.1rem 1.2rem;background:var(--paper-2);
  transition:transform .35s var(--ease),border-color .3s,background .3s;
}
.optcard:hover{transform:translateY(-3px);border-color:var(--g-200);background:var(--g-50)}
.optcard__ico{
  flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--paper);border:1px solid var(--line);color:var(--g-600);
  transition:background .3s,color .3s;
}
.optcard:hover .optcard__ico{background:var(--g-500);border-color:var(--g-500);color:#fff}
.optcard__ico svg{width:20px;height:20px}
.optcard__txt strong{
  display:block;font-family:var(--font-display);font-size:1rem;
  color:var(--ink);margin-bottom:.3rem;letter-spacing:-.01em;
}
.optcard__txt span{display:block;font-size:.9rem;color:var(--ink-2);line-height:1.5}

/* card cu imagine */
.icard{
  display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.icard:hover{transform:translateY(-6px);box-shadow:var(--sh-3)}
.icard__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-3)}
.icard__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.icard:hover .icard__media img{transform:scale(1.06)}
.icard__tag{
  position:absolute;left:1rem;top:1rem;z-index:2;
  background:rgba(255,255,255,.94);color:var(--g-800);
  font-family:var(--font-display);font-weight:700;font-size:.75rem;letter-spacing:.06em;
  text-transform:uppercase;padding:.4rem .8rem;border-radius:var(--r-pill);
}
.icard__body{padding:clamp(1.3rem,2.2vw,1.8rem);display:flex;flex-direction:column;flex:1}
.icard__body h3{font-size:1.22rem;margin-bottom:.55rem}
.icard__body p.small{margin-bottom:var(--sp-3)}
.icard__body p{font-size:.96rem}
.icard__body .link-arrow{margin-top:auto;padding-top:var(--sp-3)}

/* ---------- 10. Statistici ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5)}
@media(max-width:860px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{position:relative;padding-left:1.25rem}
.stat::before{content:"";position:absolute;left:0;top:.35rem;bottom:.35rem;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--g-400),var(--g-700))}
.stat__num{
  font-family:var(--font-display);font-weight:800;font-size:clamp(2.1rem,1.4rem + 2.4vw,3.2rem);
  line-height:1;color:var(--ink);letter-spacing:-.04em;display:flex;align-items:baseline;gap:.05em;
}
.section--dark .stat__num,.section--navy .stat__num{color:#fff}
.stat__suf{font-size:.5em;color:var(--g-500)}
.stat__lbl{font-size:.92rem;color:var(--ink-3);margin-top:.5rem;line-height:1.4}
.section--dark .stat__lbl,.section--navy .stat__lbl{color:#9BB4A5}

/* ---------- 11. Proces (timeline) ---------- */
.proc{position:relative}
.proc__line{position:absolute;left:31px;top:12px;bottom:12px;width:2px;background:var(--line);border-radius:2px}
.proc__line i{position:absolute;inset:0 0 auto;height:0;background:linear-gradient(180deg,var(--g-400),var(--g-700));border-radius:2px;display:block}
.proc__step{display:grid;grid-template-columns:64px 1fr;gap:var(--sp-5);padding-bottom:var(--sp-7);position:relative}
.proc__step:last-child{padding-bottom:0}
.proc__num{
  width:64px;height:64px;border-radius:20px;display:grid;place-items:center;
  background:var(--paper);border:2px solid var(--line);
  font-family:var(--font-display);font-weight:800;font-size:1.3rem;color:var(--ink-3);
  position:relative;z-index:2;transition:all .45s var(--ease);
}
.proc__step.is-on .proc__num{background:var(--g-500);border-color:var(--g-500);color:#fff;box-shadow:var(--sh-g)}
.proc__body h3{font-size:1.22rem;margin-bottom:.5rem;padding-top:.7rem}
.proc__body p{font-size:.98rem}
.proc__out{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:.5rem;
  background:var(--g-50);color:var(--g-800);border-radius:var(--r-sm);
  padding:.5rem .85rem;font-size:.87rem;font-weight:600;
}
.proc__out svg{width:1em;height:1em;flex:0 0 auto}
@media(max-width:620px){
  .proc__step{grid-template-columns:48px 1fr;gap:var(--sp-4)}
  .proc__num{width:48px;height:48px;border-radius:15px;font-size:1.05rem}
  .proc__line{left:23px}
  .proc__body h3{padding-top:.35rem}
}

/* ---------- 12. Accordion / FAQ ---------- */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{
  width:100%;background:none;border:0;text-align:left;cursor:pointer;
  display:flex;align-items:flex-start;gap:1rem;padding:1.35rem 0;
  font-family:var(--font-display);font-weight:700;font-size:clamp(1rem,.95rem + .3vw,1.15rem);
  color:var(--ink);line-height:1.35;transition:color .25s;
}
.acc__btn:hover{color:var(--g-600)}
.acc__btn .ic{
  margin-left:auto;flex:0 0 auto;width:32px;height:32px;border-radius:50%;
  border:1.5px solid var(--line);display:grid;place-items:center;
  transition:transform .35s var(--ease),background .25s,border-color .25s,color .25s;color:var(--ink-3);
}
.acc__btn .ic svg{width:15px;height:15px}
.acc__btn[aria-expanded="true"] .ic{transform:rotate(45deg);background:var(--g-500);border-color:var(--g-500);color:#fff}
.acc__panel{overflow:hidden;height:0}
.acc__panel>div{padding:0 0 1.5rem;max-width:72ch;color:var(--ink-2)}
.section--dark .acc,.section--dark .acc__item{border-color:rgba(255,255,255,.14)}
.section--dark .acc__btn{color:#fff}
.section--dark .acc__btn .ic{border-color:rgba(255,255,255,.2);color:#B4CBBE}
.section--dark .acc__panel>div{color:#B4CBBE}

/* ---------- 13. Categorii DEEE ---------- */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
@media(max-width:980px){.cats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.cats{grid-template-columns:1fr}}
.cat{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem;background:var(--paper);
  position:relative;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}
.cat::after{
  content:"";position:absolute;inset:auto -30% -60% auto;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(18,183,106,.14),transparent 70%);
  opacity:0;transition:opacity .45s var(--ease);
}
.cat:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:var(--g-200)}
.cat:hover::after{opacity:1}
.cat__n{
  font-family:var(--font-display);font-weight:800;font-size:.8rem;letter-spacing:.1em;
  color:var(--g-500);margin-bottom:.75rem;display:block;position:relative;z-index:1;
}
.cat h3{font-size:1.1rem;margin-bottom:.5rem;position:relative;z-index:1}
.cat p{font-size:.93rem;color:var(--ink-3);margin:0;position:relative;z-index:1}
.cat__ex{font-size:.87rem;color:var(--ink-2);margin-top:.75rem;position:relative;z-index:1}

/* ---------- 14. Casete de atentionare ---------- */
.callout{
  --c-accent:var(--g-500);
  --c-tint:rgba(18,183,106,.10);
  --c-line:rgba(18,183,106,.26);
  position:relative;isolation:isolate;
  display:grid;grid-template-columns:54px 1fr;gap:1.15rem;align-items:start;
  padding:1.7rem 1.8rem 1.6rem;
  border-radius:22px;
  border:1px solid var(--c-line);
  background:
    radial-gradient(120% 150% at 0% 0%,var(--c-tint),transparent 60%),
    var(--paper);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,var(--sh-1);
  overflow:hidden; /* haloul decorativ depaseste caseta si crea derulare orizontala */
}
/* fir de lumina pe muchia de sus */
.callout::before{
  content:"";position:absolute;inset:0 0 auto;height:2px;border-radius:22px 22px 0 0;
  background:linear-gradient(90deg,transparent 4%,var(--c-accent) 38%,var(--c-accent) 62%,transparent 96%);
  opacity:.9;
}
/* halou difuz in coltul din dreapta sus */
.callout::after{
  content:"";position:absolute;right:-60px;top:-60px;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle,var(--c-tint),transparent 68%);z-index:-1;
}
.callout__ico{
  width:54px;height:54px;border-radius:17px;display:grid;place-items:center;
  background:var(--paper);border:1px solid var(--c-line);color:var(--c-accent);
  box-shadow:0 8px 18px rgba(11,21,18,.07);
  transform:rotate(-4deg);transition:transform .4s var(--ease);
}
.callout:hover .callout__ico{transform:rotate(0) scale(1.04)}
.callout__ico svg{width:25px;height:25px}
.callout__lbl{
  display:block;font-family:var(--font-display);font-size:.69rem;font-weight:800;
  letter-spacing:.17em;text-transform:uppercase;color:var(--c-accent);margin-bottom:.4rem;
}
.callout h4{margin:0 0 .5rem;font-size:1.1rem;letter-spacing:-.02em}
.callout p{margin:0;font-size:.96rem;color:var(--ink-2)}
.callout p + p{margin-top:.6rem}
.callout--warn{--c-accent:#D08A00;--c-tint:rgba(240,168,0,.14);--c-line:rgba(214,150,0,.32)}
.callout--blue{--c-accent:var(--b-600);--c-tint:rgba(22,96,216,.11);--c-line:rgba(22,96,216,.26)}
.callout--dark{
  --c-tint:rgba(45,199,122,.14);--c-line:rgba(255,255,255,.16);
  background:radial-gradient(120% 150% at 0% 0%,var(--c-tint),transparent 60%),rgba(255,255,255,.05);
  box-shadow:none;
}
.callout--dark .callout__ico{background:rgba(255,255,255,.07);color:var(--g-300)}
.callout--dark .callout__lbl{color:var(--g-300)}
.callout--dark h4{color:#fff}
.callout--dark p{color:#B4CBBE}
@media(max-width:560px){
  .callout{grid-template-columns:1fr;gap:.9rem;padding:1.4rem 1.4rem 1.35rem}
  .callout__ico{width:46px;height:46px;border-radius:15px}
}

/* ---------- 15. CTA banda ---------- */
.ctaband{position:relative;overflow:hidden;background:var(--g-900);isolation:isolate;color:#B7CFC2}
.ctaband__bg{position:absolute;inset:0;z-index:-2}
.ctaband__bg img{width:100%;height:100%;object-fit:cover;opacity:.32}
.ctaband::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(6,48,31,.95) 0%,rgba(6,48,31,.82) 45%,rgba(8,35,74,.78) 100%);
}
.ctaband h2{color:#fff}
.ctaband p{color:#B7CFC2}

/* ---------- 16. Formular ---------- */
.form{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(1.5rem,3.5vw,2.75rem);box-shadow:var(--sh-2)}
.form__head{margin-bottom:var(--sp-6)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--sp-4)}
@media(max-width:640px){.fgrid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.45rem;margin-bottom:var(--sp-4)}
.field--full{grid-column:1/-1}
.field label{font-family:var(--font-display);font-weight:600;font-size:.92rem;color:var(--ink)}
.field .hint{font-size:.82rem;color:var(--ink-3)}
.req{color:var(--danger)}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number],select,textarea{
  font-family:var(--font-body);font-size:1rem;color:var(--ink);
  background:var(--paper-2);border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:.9rem 1rem;width:100%;transition:border-color .25s,background .25s,box-shadow .25s;
}
textarea{min-height:130px;resize:vertical}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--g-500);background:#fff;box-shadow:0 0 0 4px rgba(18,183,106,.13);
}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 4px rgba(196,50,28,.1)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366756E' stroke-width='2.4' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:18px;padding-right:2.8rem}
.err{font-size:.84rem;color:var(--danger);font-weight:600;display:none}
.err.is-on{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* switch PF / PJ */
.switcher{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;background:var(--paper-2);border:1.5px solid var(--line);border-radius:var(--r-pill);padding:.35rem;margin-bottom:var(--sp-6);position:relative}
.switcher input{position:absolute;opacity:0;width:0;height:0}
.switcher label{
  display:flex;align-items:center;justify-content:center;gap:.5rem;cursor:pointer;
  padding:.85rem 1rem;border-radius:var(--r-pill);font-family:var(--font-display);font-weight:700;
  font-size:.96rem;color:var(--ink-3);transition:all .3s var(--ease);text-align:center;
}
.switcher label svg{width:1.15em;height:1.15em}
.switcher input:checked + label{background:var(--g-500);color:#fff;box-shadow:var(--sh-g)}
.switcher input:focus-visible + label{outline:3px solid var(--focus);outline-offset:2px}

/* bifat categorii */
.checks{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
@media(max-width:640px){.checks{grid-template-columns:1fr}}
.check{
  display:flex;align-items:flex-start;gap:.7rem;cursor:pointer;
  border:1.5px solid var(--line);border-radius:var(--r-md);padding:.85rem 1rem;
  background:var(--paper-2);transition:all .25s var(--ease);font-size:.94rem;
}
.check:hover{border-color:var(--g-300);background:var(--g-50)}
.check input{flex:0 0 auto;width:20px;height:20px;margin:.1rem 0 0;accent-color:var(--g-500);cursor:pointer}
.check:has(input:checked){border-color:var(--g-500);background:var(--g-50)}
.check span small{display:block;color:var(--ink-3);font-size:.83rem;margin-top:.15rem}

.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.9rem;color:var(--ink-2);margin-bottom:var(--sp-5)}
.consent input{flex:0 0 auto;width:20px;height:20px;margin:.15rem 0 0;accent-color:var(--g-500)}
.consent a{color:var(--g-700)}

.formstatus{margin-top:var(--sp-4);padding:1rem 1.2rem;border-radius:var(--r-md);font-size:.94rem;display:none}
.formstatus.is-on{display:block}
.formstatus--ok{background:var(--g-50);color:var(--g-800);border-left:4px solid var(--g-500)}
.formstatus--err{background:#FDECEA;color:#7A2010;border-left:4px solid var(--danger)}

/* Coloana laterala ramane vizibila cat timp derulezi formularul.
   `bottom` nu ajuta aici: sticky pe bottom se desprinde exact cand cobori,
   deci ancorarea se face pe `top`, sub antetul fix. */
@media(min-width:901px){
  .sticky-side{
    position:sticky;
    top:calc(var(--header-h) + 1.25rem);
    align-self:start;
  }
}
/* Doar pe ecrane scunde coloana are nevoie de derulare proprie.
   Bara de derulare ramane ascunsa, ca sa nu apara o banda verticala. */
@media(min-width:901px) and (max-height:820px){
  .sticky-side{
    max-height:calc(100vh - var(--header-h) - 2.5rem);
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .sticky-side::-webkit-scrollbar{width:0;height:0}
}

/* harta pe toata latimea, sub cele doua coloane */
.mapwrap.mapwrap--full{aspect-ratio:21/8;margin-top:var(--sp-7)}
@media(max-width:760px){.mapwrap.mapwrap--full{aspect-ratio:4/3}}

/* adresa de e-mail reconstruita in browser */
.mailx a{color:inherit;text-decoration:none;word-break:break-word}
.mailx a:hover{text-decoration:underline}
.cinfo .mailx a{color:var(--ink-2)}
.cinfo .mailx a:hover{color:var(--g-700)}
.ftr .mailx a{color:#C9D9E8}
.ftr .mailx a:hover{color:#fff}
.legal .mailx a{color:var(--b-600)}

/* ---------- 17. Contact ---------- */
.cinfo{display:grid;gap:var(--sp-4)}
.cinfo__row{display:flex;gap:1rem;align-items:flex-start}
.cinfo__ico{flex:0 0 auto;width:46px;height:46px;border-radius:14px;background:var(--g-50);color:var(--g-600);display:grid;place-items:center}
.cinfo__ico svg{width:22px;height:22px}
.cinfo__row h4{margin:0 0 .2rem;font-size:1rem}
.cinfo__row p,.cinfo__row a{margin:0;font-size:.97rem;color:var(--ink-2);text-decoration:none;display:block}
.cinfo__row a:hover{color:var(--g-700);text-decoration:underline}
.mapwrap{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);aspect-ratio:16/10;background:var(--paper-3)}
.mapwrap iframe{width:100%;height:100%;border:0;display:block}

/* ---------- 18. Footer ---------- */
/* Subsol compact, pe doua niveluri: un rand de linkuri, apoi brandul si
   contactul. Fundalul e verdele inchis al hero-ului, nu bleumarin, ca pagina
   sa se inchida cu aceeasi culoare cu care incepe. */
.ftr{background:var(--g-900);color:#A9C4B6}
.ftr a{color:#D8E6DD;text-decoration:none}
.ftr a:hover{color:#fff;text-decoration:underline}

.ftr__nav{
  display:flex;flex-wrap:wrap;gap:.35rem 1.75rem;align-items:center;
  padding:1.4rem 0;border-bottom:1px solid rgba(255,255,255,.12);
  font-family:var(--font-display);font-weight:600;font-size:.95rem;
}
.ftr__nav a{padding:.35rem 0}

.ftr__mid{
  display:grid;grid-template-columns:1fr auto;
  gap:var(--sp-6) clamp(2rem,5vw,5rem);
  padding:clamp(2rem,3.5vw,3rem) 0;align-items:start;
}
.ftr__brand{display:flex;align-items:center;gap:.7rem;margin-bottom:var(--sp-4)}
.ftr__brand img{width:auto;height:46px}
.ftr__brand b{
  display:block;font-family:var(--font-display);font-weight:800;
  color:#fff;font-size:1.05rem;letter-spacing:-.02em;
}
.ftr__brand span{
  display:block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:#7E9A8B;font-weight:600;
}
.ftr__desc{font-size:.95rem;max-width:44ch;margin:0}

.ftr__contact{display:flex;flex-wrap:wrap;gap:var(--sp-5) clamp(1.5rem,3vw,2.75rem)}
.ftr__contact h4{
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:#7E9A8B;font-weight:600;margin:0 0 .25rem;
}
.ftr__contact strong{
  font-family:var(--font-display);font-weight:600;font-size:1rem;color:#fff;display:block;
}
.ftr__contact strong a{color:#fff}
.ftr__contact p{margin:0;font-size:.94rem;line-height:1.5}

.ftr__bottom{
  border-top:1px solid rgba(255,255,255,.12);padding:1.1rem 0;
  display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-5);
  justify-content:space-between;align-items:center;font-size:.87rem;color:#8FA89A;
}
.ftr__legal{display:flex;flex-wrap:wrap;gap:1.1rem;align-items:center}
.ftr__anpc{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.ftr__anpc a{
  font-size:.78rem;border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-sm);padding:.3rem .65rem;color:#A9C4B6;
}
/* butonul de cookies trebuie sa arate exact ca link-urile de langa el */
.ftr__ck{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:inherit;font-size:inherit;line-height:inherit;
  color:#8FA89A;text-decoration:underline;
}
.ftr__ck:hover{color:#fff}
@media(max-width:820px){.ftr__mid{grid-template-columns:1fr}}

/* ---------- 19. Bara mobila de actiune ---------- */
.mobilebar{
  position:fixed;left:0;right:0;bottom:0;z-index:850;display:none;
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);padding:.6rem .75rem;
  gap:.5rem;box-shadow:0 -6px 24px rgba(11,21,18,.08);
}
.mobilebar .btn{flex:1;padding:.95rem .5rem;font-size:.92rem}
@media(max-width:760px){
  .mobilebar{display:flex}
  body{padding-bottom:74px}
}

/* ---------- 20. Cookie consent ---------- */
.ckb{
  position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:1000;max-width:640px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-3);padding:1.6rem 1.7rem;
  transform:translateY(160%);transition:transform .5s var(--ease);
}
.ckb.is-on{transform:none}
@media(min-width:760px){.ckb{left:1.5rem;right:auto;bottom:1.5rem}}
/* pe mobil bannerul si bara de actiune ar sta unul peste altul */
@media(max-width:760px){body.has-ckb .mobilebar{display:none}body.has-ckb{padding-bottom:0}}
.ckb h3{font-size:1.12rem;margin-bottom:.5rem}
.ckb p{font-size:.9rem;margin-bottom:1.1rem;color:var(--ink-2)}
.ckb__btns{display:flex;flex-wrap:wrap;gap:.55rem}
.ckb__btns .btn{flex:1 1 auto;min-width:130px;padding:.85rem 1.1rem;font-size:.92rem}
.ckb__link{background:none;border:0;color:var(--ink-3);font-size:.85rem;text-decoration:underline;cursor:pointer;padding:.6rem 0 0;font-family:var(--font-body)}

.ckm{position:fixed;inset:0;z-index:1010;display:none;align-items:center;justify-content:center;padding:1rem}
.ckm.is-on{display:flex}
.ckm__ov{position:absolute;inset:0;background:rgba(6,21,15,.55);backdrop-filter:blur(4px)}
.ckm__box{
  position:relative;background:var(--paper);border-radius:var(--r-xl);max-width:660px;width:100%;
  max-height:88vh;overflow-y:auto;padding:clamp(1.5rem,3vw,2.25rem);box-shadow:var(--sh-3);
}
.ckm__box h3{margin-bottom:.5rem}
.ckcat{border:1px solid var(--line);border-radius:var(--r-md);padding:1.1rem 1.2rem;margin-bottom:.75rem}
.ckcat__top{display:flex;align-items:center;gap:1rem;justify-content:space-between}
.ckcat h4{margin:0;font-size:1rem}
.ckcat p{font-size:.88rem;margin:.5rem 0 0;color:var(--ink-3)}
.toggle{position:relative;flex:0 0 auto;width:50px;height:28px}
.toggle input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2}
.toggle i{position:absolute;inset:0;background:var(--line);border-radius:var(--r-pill);transition:background .25s;pointer-events:none}
.toggle i::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:var(--sh-1);transition:transform .25s var(--ease)}
.toggle input:checked + i{background:var(--g-500)}
.toggle input:checked + i::after{transform:translateX(22px)}
.toggle input:disabled + i{background:var(--g-300);opacity:.75;cursor:not-allowed}
.toggle input:focus-visible + i{outline:3px solid var(--focus);outline-offset:2px}
.ckm__btns{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:var(--sp-5)}
.ckm__btns .btn{flex:1 1 auto;min-width:140px}

/* ---------- 21. Pagini legale ---------- */
.legal{padding-top:calc(var(--header-h) + 3rem);padding-bottom:var(--section-y)}
.legal h1{margin-bottom:var(--sp-3)}
.legal__meta{font-size:.9rem;color:var(--ink-3);margin-bottom:var(--sp-7);padding-bottom:var(--sp-5);border-bottom:1px solid var(--line)}
.legal h2{font-size:clamp(1.35rem,1.15rem + .8vw,1.75rem);margin-top:var(--sp-7)}
.legal h3{font-size:1.15rem;margin-top:var(--sp-5)}
.legal table{width:100%;border-collapse:collapse;margin:var(--sp-4) 0;font-size:.93rem}
.legal th,.legal td{border:1px solid var(--line);padding:.7rem .85rem;text-align:left;vertical-align:top}
.legal th{background:var(--paper-2);font-family:var(--font-display);font-weight:700;color:var(--ink)}
.tablewrap{overflow-x:auto}
.toc{background:var(--paper-2);border-radius:var(--r-lg);padding:1.5rem 1.7rem;margin-bottom:var(--sp-7)}
.toc h2{margin:0 0 .75rem;font-size:1rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.toc ol{margin:0;padding-left:1.2em;font-size:.95rem}

/* ---------- 22. Hero simplu de pagina ---------- */
.phero{
  background:var(--g-900);color:#C7D6CE;position:relative;overflow:hidden;
  padding-top:calc(var(--header-h) + clamp(2.5rem,4vw,4rem));
  padding-bottom:clamp(2.5rem,4vw,4.5rem);
}
.phero__mesh{
  position:absolute;inset:-40%;pointer-events:none;
  background:
    radial-gradient(40% 40% at 15% 30%,rgba(18,183,106,.42),transparent 62%),
    radial-gradient(35% 35% at 85% 25%,rgba(22,96,216,.35),transparent 60%);
  filter:blur(30px);will-change:transform;
}
.phero__in{position:relative;z-index:2}
.phero h1{color:#fff;max-width:20ch}
.phero .lead{color:#B7CFC2;max-width:60ch}
.crumbs{font-size:.85rem;color:#8FA89A;margin-bottom:var(--sp-4)}
.crumbs a{color:#B7CFC2;text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs span{margin:0 .45rem;opacity:.5}

/* ---------- 24. Noutati: arhiva ---------- */
.postmeta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.65rem;
  font-family:var(--font-display);font-size:.78rem;font-weight:600;
  color:var(--ink-3);margin-bottom:.85rem;
}
.postmeta time,.postmeta span:not(.postmeta__cat){position:relative;padding-left:.9rem}
.postmeta time::before,.postmeta span:not(.postmeta__cat)::before{
  content:"";position:absolute;left:0;top:50%;width:4px;height:4px;margin-top:-2px;
  border-radius:50%;background:var(--line);
}
.postmeta__cat{
  display:inline-flex;align-items:center;padding:.32rem .7rem;border-radius:var(--r-pill);
  background:var(--g-50);color:var(--g-700);letter-spacing:.06em;text-transform:uppercase;
  font-size:.7rem;font-weight:800;
}

/* articolul evidentiat */
.postfeat{
  display:grid;grid-template-columns:1.15fr .85fr;gap:0;
  border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:var(--paper);
  transition:box-shadow .4s var(--ease),border-color .3s;
}
.postfeat:hover{box-shadow:var(--sh-3);border-color:var(--g-200)}
.postfeat__media{display:block;position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--paper-3)}
.postfeat__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.postfeat:hover .postfeat__media img{transform:scale(1.05)}
.postfeat__body{padding:clamp(1.6rem,3vw,2.6rem);display:flex;flex-direction:column;justify-content:center}
.postfeat__body h2{font-size:clamp(1.4rem,1.1rem + 1.2vw,2.05rem);margin-bottom:.7rem}
.postfeat__body h2 a{color:inherit;text-decoration:none}
.postfeat__body h2 a:hover{color:var(--g-700)}
.postfeat__body p{color:var(--ink-2);margin-bottom:var(--sp-5)}
@media(max-width:900px){
  .postfeat{grid-template-columns:1fr}
  .postfeat__media{aspect-ratio:16/9}
}

/* grila de articole */
.postgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-5)}
@media(max-width:820px){.postgrid{grid-template-columns:1fr}}
.postcard{
  display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}
.postcard:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:var(--g-200)}
.postcard__media{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--paper-3)}
.postcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.postcard:hover .postcard__media img{transform:scale(1.05)}
.postcard__body{padding:clamp(1.3rem,2.2vw,1.8rem);display:flex;flex-direction:column;flex:1}
.postcard__body h3{font-size:1.18rem;margin-bottom:.5rem;line-height:1.25}
.postcard__body h3 a{color:inherit;text-decoration:none}
.postcard__body h3 a:hover{color:var(--g-700)}
.postcard__body p{font-size:.95rem;margin-bottom:var(--sp-4)}
.postcard__body .link-arrow{margin-top:auto}

/* ---------- 25. Noutati: pagina de articol ---------- */
.phero--post{padding-bottom:clamp(3.5rem,7vw,6.5rem)}
.post__cat{
  display:inline-flex;align-items:center;padding:.4rem .9rem;border-radius:var(--r-pill);
  background:rgba(45,199,122,.18);border:1px solid rgba(45,199,122,.35);color:var(--g-300);
  font-family:var(--font-display);font-size:.72rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--sp-4);
}
.phero--post h1{max-width:24ch;font-size:clamp(1.9rem,1.35rem + 2.3vw,3rem)}
.post__meta{
  display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:var(--sp-5);
  font-size:.88rem;color:#9BB4A5;
}
.post__meta span{display:inline-flex;align-items:center;gap:.5rem}
.post__meta svg{width:1.05em;height:1.05em;color:var(--g-400);flex:0 0 auto}

/* imaginea urca peste hero-ul inchis */
.post__hero{margin:0;position:relative;z-index:3;margin-top:clamp(-4.5rem,-6vw,-2.5rem)}
.post__hero picture{display:block;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3)}
.post__hero img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}

/* tipografia textului */
.article{
  padding-top:clamp(2.5rem,5vw,4rem);
  font-size:1.075rem;line-height:1.78;color:var(--ink-2);
}
.article > p:first-child{font-size:1.2rem;line-height:1.65;color:var(--ink)}
.article h2{
  font-size:clamp(1.4rem,1.2rem + .9vw,1.9rem);
  margin-top:clamp(2.4rem,4vw,3.2rem);margin-bottom:.9rem;scroll-margin-top:6rem;
}
.article h3{font-size:1.18rem;margin-top:2rem;margin-bottom:.6rem}
.article p{margin-bottom:1.15rem}
.article ul,.article ol{margin:0 0 1.4rem;padding-left:1.35em}
.article li{margin-bottom:.6em;padding-left:.15em}
.article li::marker{color:var(--g-500);font-weight:700}
.article a{color:var(--g-700);text-decoration:underline;text-decoration-color:var(--g-200);text-underline-offset:4px}
.article a:hover{text-decoration-color:var(--g-500)}
.article .callout{margin:2rem 0}
.article strong{color:var(--ink)}

/* citat, fara ghilimele decorative uriase */
.pull{
  position:relative;margin:2.4rem 0;padding:.35rem 0 .35rem 1.8rem;
}
.pull::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px;
  background:linear-gradient(180deg,var(--g-400),var(--g-700));
}
.pull p{
  margin:0;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.15rem,1rem + .7vw,1.45rem);line-height:1.45;
  color:var(--ink);letter-spacing:-.015em;
}

/* subsolul articolului */
.post__foot{
  display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;justify-content:space-between;
  margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:1px solid var(--line);
}
.post__share{display:flex;align-items:center;gap:.6rem}
.post__sharebtn{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--ink-3);background:var(--paper);
  transition:all .28s var(--ease);
}
.post__sharebtn svg{width:16px;height:16px}
.post__sharebtn:hover{background:var(--g-500);border-color:var(--g-500);color:#fff;transform:translateY(-2px)}
.post__back svg{transition:transform .3s var(--ease)}
.post__back:hover svg{transform:translateX(-4px)}

/* ---------- 23. Animatii ---------- */
.rv{opacity:0;transform:translateY(28px)}
.no-js .rv{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .rv{opacity:1 !important;transform:none !important}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip,
.skip-link.screen-reader-text{
  position:absolute;left:1rem;top:-100px;z-index:1100;background:var(--g-700);color:#fff;
  padding:.75rem 1.25rem;border-radius:var(--r-sm);text-decoration:none;font-weight:600;
  font-family:var(--font-body);font-size:.95rem;line-height:1;
  transition:top .25s;
}
/* La focus trebuie sa anulam tot ce ascunde elementul, nu doar pozitia:
   `screen-reader-text` il face de 1x1 px, taiat si cu margine negativa. */
.skip:focus,
.skip-link.screen-reader-text:focus{
  top:1rem;left:1rem;color:#fff;
  clip-path:none;clip:auto;
  width:auto;height:auto;margin:0;overflow:visible;
  white-space:nowrap;
}

/* WordPress isi adauga singur linkul de sarire peste continut, cu clasa
   `screen-reader-text`. Stilul acelei clase venea din tema parinte, pe care
   o dezactivam, deci linkul ramanea vizibil si impingea pagina in jos. */
.screen-reader-text{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------- 24. Cariere ---------- */
.job{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(1.5rem,3.2vw,2.6rem);box-shadow:var(--sh-1);margin-top:var(--sp-6);
  scroll-margin-top:calc(var(--header-h) + 1.5rem);
}
.job__head{display:flex;gap:var(--sp-5);align-items:flex-start;justify-content:space-between}
.job__head .btn{flex:0 0 auto}
.job__badge{
  display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-display);
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--g-700);background:var(--g-50);border:1px solid var(--g-200);
  border-radius:var(--r-pill);padding:.3rem .75rem;margin-bottom:.7rem;
}
.job__head h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);margin-bottom:.5rem}
.job__sub{color:var(--ink-2);margin:0;max-width:52ch}
.job__tags{
  list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;padding:0;
  margin:var(--sp-5) 0 0;border-top:1px solid var(--line);padding-top:var(--sp-5);
}
.job__tags li{
  font-size:.88rem;color:var(--ink-2);background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:.45rem .95rem;
}
.job__tags strong{font-family:var(--font-display);color:var(--ink);font-weight:600}
.job__cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5) clamp(2rem,4vw,3.5rem);margin-top:var(--sp-6)}
.job__cols h4{font-size:1.02rem;margin:0 0 var(--sp-3)}
.job__cols .card__list{margin-bottom:0;font-size:.95rem}
@media(max-width:820px){
  .job__head{flex-direction:column}
  .job__head .btn{width:100%;justify-content:center}
  .job__cols{grid-template-columns:1fr}
}

/* Campul de fisier: butonul propriu al browserului nu se poate stiliza, dar
   ramificatia `file-selector-button` da un buton coerent cu restul formularului. */
input[type=file]{
  width:100%;font:inherit;font-size:.95rem;color:var(--ink-2);
  background:var(--paper-2);border:1.5px dashed var(--line);border-radius:var(--r-md);
  padding:.85rem 1rem;cursor:pointer;transition:border-color .25s,background .25s;
}
input[type=file]:hover{border-color:var(--g-300);background:var(--g-50)}
input[type=file]:focus{outline:3px solid var(--focus);outline-offset:2px}
input[type=file][aria-invalid="true"]{border-color:var(--danger);border-style:solid}
input[type=file]::file-selector-button{
  font:inherit;font-family:var(--font-display);font-weight:600;font-size:.88rem;
  margin-right:.9rem;padding:.55rem 1.05rem;cursor:pointer;color:#fff;
  background:var(--g-600);border:0;border-radius:var(--r-pill);transition:background .25s;
}
input[type=file]:hover::file-selector-button{background:var(--g-700)}