/* =========================================================
   Cabinet de Avocat Fattah Tano Salar
   Paletă: negru-cerneală + alb pur + un singur accent bordo.
   Fără auriu-bej, fără gradienturi decorative.
   ========================================================= */

:root{
  /* suprafețe */
  --ink:        #0A0B0D;
  --ink-2:      #101216;
  --ink-3:      #171A1F;
  --paper:      #FFFFFF;
  --paper-2:    #F3F4F5;

  /* text */
  --on-light:   #14161A;
  --on-light-2: #5A616A;
  --on-dark:    #F2F3F4;
  --on-dark-2:  #9AA1AA;

  /* accent */
  --accent:     #A0202F;
  --accent-hi:  #C02A3C;
  --wa:         #25D366;
  --wa-hi:      #1DB157;
  --star:       #E8B33C;

  /* linii */
  --line-d:     rgba(255,255,255,.11);
  --line-l:     rgba(10,11,13,.12);

  /* ritm */
  --wrap:       1260px;
  --gut:        clamp(20px, 4vw, 40px);
  --sec-y:      clamp(72px, 9vw, 132px);
  --r:          2px;

  /* tipografie */
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --t-fast: 160ms cubic-bezier(.4,0,.2,1);
  --t-med:  320ms cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--on-light);
  font-family:var(--sans);
  font-size:clamp(15.5px, .35vw + 15px, 17px);
  line-height:1.65;
  font-feature-settings:"kern","liga";
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:#fff; padding:12px 18px; font-weight:600;
}
.skip:focus{ left:12px; top:12px; }

:where(a,button,summary,details):focus-visible{
  outline:2px solid var(--accent-hi); outline-offset:3px; border-radius:var(--r);
}

/* ---------- tipografie comună ---------- */

h1,h2,h3{
  font-family:var(--serif); font-weight:600; margin:0; letter-spacing:-.015em;
  overflow-wrap:break-word;
}

/* Copiii de grila au implicit min-width:auto, asa ca un rand lung dintr-un
   titlu poate largi coloana peste latimea ecranului. */
.hero__in > *, .grid2 > *, .online > *, .contact > *{ min-width:0; }

h1{
  font-size:clamp(2.3rem, 5.2vw, 4.15rem);
  line-height:1.06;
  font-weight:600;
  letter-spacing:-.028em;
}
h1 em{ font-style:italic; font-weight:400; color:#fff; }

.h2{
  font-size:clamp(1.75rem, 3.1vw, 2.85rem);
  line-height:1.12;
  letter-spacing:-.022em;
  text-wrap:balance;
}

.eyebrow{
  font-family:var(--sans);
  font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-dark-2);
  margin:0 0 18px;
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before{
  content:""; width:26px; height:2px; background:var(--accent-hi); flex:none;
}
.eyebrow--dark{ color:var(--on-light-2); }
.eyebrow--dark::before{ background:var(--accent); }

.lede{
  font-size:clamp(1.02rem, .5vw + .95rem, 1.19rem);
  line-height:1.62;
  color:var(--on-dark-2);
  max-width:56ch;
  margin:22px 0 0;
}
.sec--light .lede{ color:var(--on-light-2); }

.muted{ color:var(--on-dark-2); }

/* Cuvintele cu cratima nu se rup pe randuri diferite ("i-am", "sus-numitul"). */
.nb{ white-space:nowrap; }

.link{
  color:inherit; text-decoration:none;
  border-bottom:1px solid var(--accent-hi); padding-bottom:2px;
  transition:color var(--t-fast), border-color var(--t-fast);
}
.link:hover{ color:var(--accent-hi); }

/* ---------- butoane ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-size:.93rem; font-weight:600; letter-spacing:.005em;
  padding:12px 20px; border-radius:var(--r);
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn--lg{ padding:16px 28px; font-size:1rem; }
.btn--block{ width:100%; }

.btn--wa{ background:var(--wa); color:#04220F; }
.btn--wa:hover{ background:var(--wa-hi); color:#02170A; }

.btn--outline{ border-color:rgba(255,255,255,.28); color:var(--on-dark); background:transparent; }
.btn--outline:hover{ border-color:#fff; background:rgba(255,255,255,.06); }

.btn--ghost{ border-color:var(--line-d); color:var(--on-dark); background:rgba(255,255,255,.04); }
.btn--ghost:hover{ background:rgba(255,255,255,.1); }

/* Definitia de simboluri SVG: prezenta in DOM, scoasa din flux si invizibila.
   In CSS, nu in atribut style=, ca sa treaca de Content-Security-Policy. */
.sprite{ position:absolute; }

/* ---------- topbar ---------- */

.topbar{
  background:#060708; color:var(--on-dark-2);
  font-size:.8rem; border-bottom:1px solid rgba(255,255,255,.07);
  position:relative; z-index:60;
}
.topbar__in{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  min-height:38px;
}
.topbar__bar{
  font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:.68rem;
  color:var(--on-dark-2);
}
.topbar__contact{ display:flex; gap:22px; }
.topbar__contact a{ text-decoration:none; transition:color var(--t-fast); }
.topbar__contact a:hover{ color:#fff; }

/* ---------- nav ---------- */

.nav{
  position:sticky; top:0; z-index:80;
  background:var(--ink);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.nav.is-stuck{
  border-bottom-color:var(--line-d);
  box-shadow:0 12px 34px rgba(0,0,0,.45);
}

.nav__in{
  display:flex; align-items:center; gap:28px;
  min-height:72px;
}

.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto; }

/* Sigla este desenata pe negru curat (colturi ~#050505). `screen` face negrul
   sa dispara, iar masca topeste ultimele procente de fum, ca sa nu se mai vada
   conturul dreptunghiular al imaginii peste fundalul paginii.
   Asa nu e nevoie de o versiune cu fundal transparent. */
.sigla{
  mix-blend-mode:screen;
  --fade:
    linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to right,  transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-image:var(--fade);
  mask-image:var(--fade);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}

.brand__mark{ width:54px; height:54px; flex:none; }
.brand__txt{ display:flex; flex-direction:column; line-height:1.2; }
.brand__txt strong{
  font-family:var(--serif); font-size:1.02rem; font-weight:600;
  color:var(--on-dark); letter-spacing:-.01em;
}
.brand__txt span{ font-size:.72rem; color:var(--on-dark-2); letter-spacing:.05em; }

.nav__links{ display:flex; gap:26px; }
.nav__links a{
  text-decoration:none; font-size:.89rem; font-weight:500;
  color:var(--on-dark-2); padding:6px 0; position:relative;
  transition:color var(--t-fast);
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--accent-hi);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-med);
}
.nav__links a:hover{ color:var(--on-dark); }
.nav__links a:hover::after{ transform:scaleX(1); }

.burger{
  display:none; width:44px; height:44px; background:none;
  border:1px solid var(--line-d); border-radius:var(--r);
  cursor:pointer; padding:0; place-items:center; gap:5px;
}
.burger span{ display:block; width:18px; height:1.5px; background:var(--on-dark); transition:transform var(--t-med), opacity var(--t-fast); }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

.mobilemenu{
  position:sticky; top:72px; z-index:70;
  background:#0A0B0D; border-bottom:1px solid var(--line-d);
  padding:8px var(--gut) 26px;
}
.mobilemenu[hidden]{ display:none; }
.mobilemenu nav{ display:flex; flex-direction:column; }
.mobilemenu nav a{
  text-decoration:none; color:var(--on-dark); font-size:1.05rem;
  padding:15px 0; border-bottom:1px solid var(--line-d);
}
.mobilemenu__cta{ display:grid; gap:10px; margin-top:22px; }

/* ---------- hero ---------- */

.hero{
  position:relative; background:var(--ink); color:var(--on-dark);
  overflow:hidden;
  padding-block:clamp(56px, 8vw, 104px) clamp(64px, 9vw, 120px);
}
.hero__bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(160,32,47,.20), transparent 58%),
    radial-gradient(90% 70% at 100% 100%, rgba(255,255,255,.05), transparent 60%);
}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--line-d) 1px, transparent 1px);
  background-size:100% 128px;
  opacity:.16;
  mask-image:linear-gradient(to bottom, #000, transparent 72%);
  -webkit-mask-image:linear-gradient(to bottom, #000, transparent 72%);
}

.hero__in{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1.32fr) minmax(0,.85fr);
  gap:clamp(36px, 6vw, 76px); align-items:center;
}

.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.hero__note{
  margin:20px 0 0; font-size:.86rem; color:var(--on-dark-2);
  display:flex; align-items:center; gap:9px;
}
.hero__note::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--wa); flex:none;
}

.seal{ margin:0; text-align:center; }
.seal img{ width:100%; max-width:460px; height:auto; margin-inline:auto; }
.seal figcaption{
  margin-top:6px; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--on-dark-2);
  display:inline-flex; align-items:center; gap:12px;
}
.seal figcaption::before,
.seal figcaption::after{ content:""; width:26px; height:1px; background:var(--accent); }

/* Varianta cu fotografie: se scoate clasa .seal si ramane incadrarea clasica. */
.portrait{ margin:0; }
.portrait img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r); }
.portrait figcaption{
  margin-top:14px; font-size:.8rem; color:var(--on-dark-2);
  padding-left:14px; border-left:2px solid var(--accent);
}

/* ---------- banda de încredere ---------- */

.strip{ background:var(--ink-2); color:var(--on-dark); border-block:1px solid var(--line-d); }
.strip__in{
  display:grid; grid-template-columns:repeat(4,1fr);
  padding-block:clamp(40px,5vw,60px); gap:0;
}
.strip__item{ padding:4px clamp(20px,2.4vw,34px); border-left:1px solid var(--line-d); }
.strip__item:first-child{ border-left:0; padding-left:0; }
.strip__item h3{
  font-size:1.06rem; font-weight:600; margin-bottom:9px; color:#fff;
}
.strip__item p{ margin:0; font-size:.88rem; line-height:1.6; color:var(--on-dark-2); }

/* ---------- secțiuni ---------- */

.sec{ padding-block:var(--sec-y); }
.sec--light{ background:var(--paper); color:var(--on-light); }
.sec--dark{ background:var(--ink); color:var(--on-dark); }
.sec--accent{ background:var(--ink-3); color:var(--on-dark); }
.sec--contact{ background:var(--ink); color:var(--on-dark); border-top:1px solid var(--line-d); }

.sechead{ max-width:34ch; margin-bottom:clamp(38px,4.5vw,60px); }
.sechead--dark .h2{ color:var(--on-light); }

.grid2{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(32px,5vw,80px);
}
.grid2__side{ position:sticky; top:110px; align-self:start; }
.side-note{ margin-top:22px; font-size:.9rem; color:var(--on-light-2); max-width:32ch; }

.prose p{ margin:0 0 20px; max-width:62ch; }
.prose p:first-child{
  font-size:1.1rem; color:var(--on-light);
}
.prose p{ color:var(--on-light-2); }
.prose p:first-child{ color:var(--on-light); }

.ticks{ list-style:none; padding:0; margin:34px 0 0; display:grid; gap:1px; background:var(--line-l); border-block:1px solid var(--line-l); }
.ticks li{
  background:var(--paper); padding:15px 0 15px 34px; position:relative;
  font-size:.94rem; color:var(--on-light);
}
.ticks li::before{
  content:""; position:absolute; left:6px; top:22px;
  width:12px; height:2px; background:var(--accent);
}

/* ---------- carduri arii de practică ---------- */

.cards{
  /* 6 carduri, 3 coloane: doua randuri pline, fara celule goale in grila. */
  display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:1px; background:var(--line-d);
  border:1px solid var(--line-d);
}
.card{
  background:var(--ink); padding:clamp(28px,3vw,40px);
  transition:background var(--t-med);
  position:relative;
}
.card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--accent); transform:scaleY(0); transform-origin:top;
  transition:transform var(--t-med);
}
.card:hover{ background:var(--ink-3); }
.card:hover::before{ transform:scaleY(1); }
.card h3{ font-size:1.28rem; margin-bottom:12px; color:#fff; }
.card h3 a{
  text-decoration:none; display:inline-block;
  border-bottom:1px solid transparent; padding-bottom:2px;
  transition:border-color var(--t-fast);
}
.card:hover h3 a{ border-bottom-color:var(--accent-hi); }
.card p{ margin:0; font-size:.92rem; line-height:1.66; color:var(--on-dark-2); }

.cards__foot{
  margin:34px 0 0; font-size:.95rem; color:var(--on-dark-2); max-width:58ch;
}

/* ---------- pași ---------- */

.steps{
  list-style:none; counter-reset:s; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(24px,3vw,40px);
}
.steps li{ counter-increment:s; padding-top:26px; border-top:1px solid var(--line-l); position:relative; }
.steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute; top:-1px; left:0;
  font-family:var(--serif); font-size:.78rem; font-weight:700; letter-spacing:.1em;
  color:var(--accent);
  background:var(--paper); padding-right:12px; transform:translateY(-50%);
}
.steps h3{ font-size:1.18rem; margin-bottom:10px; }
.steps p{ margin:0; font-size:.92rem; line-height:1.65; color:var(--on-light-2); }

/* ---------- consultanță online ---------- */

.online{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(36px,5vw,72px); align-items:center;
}
.online__copy .btn{ margin-top:30px; }
.online__steps{
  list-style:none; counter-reset:o; padding:0; margin:0;
  border:1px solid var(--line-d); background:rgba(0,0,0,.28);
}
.online__steps li{
  counter-increment:o; padding:20px 24px 20px 62px; position:relative;
  border-bottom:1px solid var(--line-d);
  display:flex; flex-direction:column; gap:4px;
}
.online__steps li:last-child{ border-bottom:0; }
.online__steps li::before{
  content:counter(o); position:absolute; left:22px; top:21px;
  font-family:var(--serif); font-weight:700; font-size:.95rem; color:var(--accent-hi);
}
.online__steps strong{ font-size:.98rem; font-weight:600; color:#fff; }
.online__steps span{ font-size:.87rem; color:var(--on-dark-2); }

/* ---------- recenzii ---------- */

.quotes{
  /* 1 recenzie pe doua coloane + 4 simple = exact doua randuri de trei. */
  display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:1px; background:var(--line-d); border:1px solid var(--line-d);
}
.quote{
  margin:0; background:var(--ink); padding:clamp(26px,2.8vw,36px);
  display:flex; flex-direction:column; gap:16px;
}
.quote--lead{ grid-column:span 2; background:var(--ink-3); }
.quote blockquote{ margin:0; }
.quote blockquote p{
  margin:0; font-family:var(--serif); font-size:1.06rem; line-height:1.58; color:#fff;
}
.quote--lead blockquote p{ font-size:clamp(1.15rem,1.6vw,1.42rem); line-height:1.5; }
.quote figcaption{
  margin-top:auto; font-size:.88rem; font-weight:600; color:var(--on-dark);
  display:flex; flex-direction:column; gap:2px;
}
.quote figcaption span{ font-weight:400; font-size:.8rem; color:var(--on-dark-2); }

.stars{ display:flex; gap:3px; }
.stars span{
  width:15px; height:15px; background:var(--star);
  -webkit-mask:var(--star-mask) center/contain no-repeat;
  mask:var(--star-mask) center/contain no-repeat;
}
:root{
  --star-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.26 6.85.72-5.1 4.6 1.44 6.72L12 16.9l-6.09 3.4 1.44-6.72-5.1-4.6 6.85-.72z'/%3E%3C/svg%3E");
}

.quotes__foot{ margin:30px 0 0; font-size:.93rem; }

/* Starea in care inca nu exista recenzii reale. Ocupa locul grilei de citate
   si se inlocuieste cu ea cand vin recenziile. */
.reviews-empty{
  border:1px solid var(--line-d); background:var(--ink-3);
  padding:clamp(34px,4.4vw,56px);
  display:flex; align-items:center; gap:clamp(28px,4vw,64px);
}
.reviews-empty__txt{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.reviews-empty .stars{ opacity:.42; }
.reviews-empty h3{
  font-size:clamp(1.3rem,2.1vw,1.85rem); line-height:1.16;
  color:#fff; letter-spacing:-.018em; max-width:24ch;
}
.reviews-empty p{ margin:0; color:var(--on-dark-2); max-width:52ch; font-size:.97rem; line-height:1.62; }
.reviews-empty .btn{ flex:none; margin-left:auto; white-space:normal; text-align:center; }

/* ---------- întrebări frecvente ---------- */

.faq details{
  border-bottom:1px solid var(--line-l);
}
.faq details:first-child{ border-top:1px solid var(--line-l); }
.faq summary{
  list-style:none; cursor:pointer;
  padding:22px 46px 22px 0; position:relative;
  font-family:var(--serif); font-size:1.1rem; font-weight:600; letter-spacing:-.01em;
  transition:color var(--t-fast);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--accent); }
.faq summary::after,
.faq summary::before{
  content:""; position:absolute; right:8px; top:50%; background:var(--accent);
  transition:transform var(--t-med), opacity var(--t-fast);
}
.faq summary::before{ width:14px; height:1.5px; margin-top:-.75px; }
.faq summary::after{ width:1.5px; height:14px; margin-top:-7px; right:14.25px; }
.faq details[open] summary::after{ transform:rotate(90deg); opacity:0; }
.faq details > div{ padding:0 8% 26px 0; }
.faq details > div p{ margin:0; color:var(--on-light-2); font-size:.95rem; line-height:1.68; }

/* ---------- contact ---------- */

.contact{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.75fr);
  gap:clamp(36px,5vw,80px);
}
.contact__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.contact__details{ margin:0; display:grid; gap:1px; background:var(--line-d); border:1px solid var(--line-d); align-self:start; }
.contact__details > div{ background:var(--ink-2); padding:20px 24px; }
.contact__details dt{
  font-size:.68rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--on-dark-2); font-weight:600; margin-bottom:7px;
}
.contact__details dd{ margin:0; font-size:.98rem; line-height:1.5; color:#fff; }
.contact__details dd a{ text-decoration:none; border-bottom:1px solid var(--accent-hi); }
.contact__details dd a:hover{ color:var(--accent-hi); }
.contact__details .muted{ font-size:.85rem; }

/* ---------- footer ---------- */

.foot{ background:#060708; color:var(--on-dark-2); padding-block:clamp(48px,5vw,72px); border-top:1px solid var(--line-d); }
.foot__in{ display:grid; gap:32px; }
.foot__brand{ display:flex; align-items:center; gap:14px; }
.foot__seal{ width:66px; height:66px; flex:none; }
.foot__brand strong{ display:block; font-family:var(--serif); font-size:1.05rem; color:var(--on-dark); font-weight:600; }
.foot__brand span{ font-size:.82rem; }
.foot__links{ display:flex; flex-wrap:wrap; gap:8px 26px; padding-block:24px; border-block:1px solid var(--line-d); }
.foot__links a{ text-decoration:none; font-size:.88rem; transition:color var(--t-fast); }
.foot__links a:hover{ color:var(--on-dark); }
.foot__legal{ margin:0; font-size:.79rem; line-height:1.7; max-width:78ch; }
.foot__legal span{ color:rgba(255,255,255,.4); }

/* ---------- pagini de specializare (penal, civil) ---------- */

.pagehero{
  position:relative; background:var(--ink); color:var(--on-dark); overflow:hidden;
  padding-block:clamp(44px,6vw,84px) clamp(52px,7vw,92px);
}
.pagehero__in{ position:relative; max-width:900px; }
.pagehero h1{
  font-size:clamp(2.05rem, 4.6vw, 3.5rem); line-height:1.08; letter-spacing:-.026em;
  margin-bottom:6px;
}
.pagehero .lede{ max-width:64ch; }
.pagehero .hero__actions{ margin-top:30px; }

.crumbs{
  font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--on-dark-2); margin-bottom:22px;
  display:flex; gap:9px; align-items:center;
}
.crumbs a{ text-decoration:none; border-bottom:1px solid var(--accent-hi); padding-bottom:2px; }
.crumbs a:hover{ color:#fff; }

.article{ max-width:880px; }
.article > .h2{ margin-top:66px; padding-top:26px; border-top:1px solid var(--line-l); }
.article > .h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.article h3{
  font-size:clamp(1.14rem,1.6vw,1.32rem); margin:34px 0 10px; color:var(--on-light);
}
.article > p{ margin:0 0 18px; color:var(--on-light-2); max-width:70ch; }
.article .h2 + p{ margin-top:18px; }

.cardgrid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1px; background:var(--line-l); border:1px solid var(--line-l);
  margin:32px 0 8px;
}
.minicard{ background:var(--paper); padding:26px 24px; }
.minicard h3{ margin:0 0 9px; font-size:1.08rem; }
.minicard p{ margin:0; font-size:.92rem; line-height:1.6; color:var(--on-light-2); }

.numlist{ counter-reset:n; list-style:none; padding:0; margin:28px 0 8px; }
.numlist li{
  counter-increment:n; position:relative; padding:0 0 20px 46px;
  color:var(--on-light-2); max-width:70ch;
}
.numlist li::before{
  content:counter(n); position:absolute; left:0; top:-2px;
  font-family:var(--serif); font-weight:700; font-size:1.05rem; color:var(--accent);
  width:30px; height:30px; display:grid; place-items:center;
  border:1px solid var(--line-l); border-radius:50%;
}
.numlist strong{ color:var(--on-light); font-weight:600; }

.article .faq{ margin-top:26px; }

.crosslink{
  margin-top:56px; padding:24px 26px; border:1px solid var(--line-l);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
}
.crosslink p{ margin:0; color:var(--on-light-2); }

.cta{ max-width:760px; }
.cta .hero__actions{ margin-top:32px; }

/* ---------- pagina de informare juridica ---------- */

.legal{ padding-block:clamp(56px,7vw,96px); }
.legal .wrap{ max-width:820px; }
.legal__h1{
  font-size:clamp(2rem,4vw,3.1rem); line-height:1.1; letter-spacing:-.025em;
  margin-bottom:10px;
}
.legal__meta{ margin:0 0 46px; font-size:.87rem; color:var(--on-light-2); }
.legal h2{
  font-size:clamp(1.2rem,1.8vw,1.42rem); margin:44px 0 14px;
  padding-top:22px; border-top:1px solid var(--line-l);
}
.legal p{ margin:0 0 18px; color:var(--on-light-2); }
.legal ul{ margin:0 0 18px; padding-left:22px; color:var(--on-light-2); }
.legal li{ margin-bottom:9px; }
.legal a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.legal a:hover{ color:var(--accent-hi); }
.legal__back{ margin-top:52px; padding-top:26px; border-top:1px solid var(--line-l); }
.legal__back a{ color:var(--on-light); text-decoration:none; }

/* ---------- FAB WhatsApp ---------- */

.fab{
  position:fixed; right:18px; bottom:18px; z-index:90;
  display:inline-flex; align-items:center; gap:0;
  background:var(--wa); color:#04220F;
  height:58px; width:58px; border-radius:999px;
  text-decoration:none; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  transition:width var(--t-med), background var(--t-fast), transform var(--t-fast);
  padding-left:16px;
}
.fab svg{ flex:none; }
.fab__label{
  font-size:.92rem; font-weight:600; white-space:nowrap;
  opacity:0; margin-left:10px; transition:opacity var(--t-fast);
}
.fab:hover{ width:212px; background:var(--wa-hi); }
.fab:hover .fab__label{ opacity:1; }
.fab:active{ transform:scale(.96); }

/* ---------- reveal ---------- */

/* Regula de aur: continutul este vizibil implicit.
   Se ascunde DOAR cat timp <html> are clasa .anim, pe care scriptul o pune
   la incarcare si o scoate obligatoriu dupa 2,5 secunde. Daca animatia nu
   porneste din orice motiv, pagina se vede oricum. */
.anim .reveal{
  opacity:0; transform:translateY(16px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
.anim .reveal.in{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:1080px){
  .strip__in{ grid-template-columns:repeat(2,1fr); row-gap:34px; }
  .strip__item:nth-child(3){ border-left:0; padding-left:0; }
  .quote--lead{ grid-column:span 1; }
}

@media (max-width:900px){
  .nav__links, .nav__cta{ display:none; }
  .burger{ display:grid; }
  .hero__in{ grid-template-columns:1fr; }
  /* Pe ecran ingust conteaza mesajul: textul ramane primul, sigla dedesubt. */
  .portrait{ max-width:340px; margin:8px auto 0; }
  .seal{ margin-top:14px; }
  .seal img{ max-width:320px; }
  .grid2, .online, .contact{ grid-template-columns:1fr; }
  .grid2__side{ position:static; }
  .online__copy .btn{ width:100%; }
}

@media (max-width:760px){
  /* Randurile fixate din titlu sunt o decizie tipografica pentru ecran lat.
     Sub 760px titlul se aseaza singur, altfel iese din pagina. */
  h1 br{ display:none; }
}

@media (max-width:640px){
  html{ scroll-padding-top:80px; }
  .topbar__contact a:last-child{ display:none; }
  .strip__in{ grid-template-columns:1fr; }
  .strip__item{ border-left:0; padding-left:0; padding-block:0; }
  .hero__actions .btn, .contact__actions .btn{ width:100%; }
  .fab{ height:54px; width:54px; right:14px; bottom:14px; padding-left:14px; }
  .fab:hover{ width:54px; }
  .fab__label{ display:none; }
  .quote--lead blockquote p{ font-size:1.12rem; }
  .faq details > div{ padding-right:0; }
  .reviews-empty{ flex-direction:column; align-items:stretch; }
  .reviews-empty .btn{ width:100%; }
}

/* =========================================================
   PREFERINȚE UTILIZATOR
   ========================================================= */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  .anim .reveal{ opacity:1; transform:none; }
  .fab{ width:auto; padding-right:20px; }
  .fab__label{ opacity:1; }
}

@media print{
  .nav,.topbar,.mobilemenu,.fab,.hero__bg{ display:none !important; }
  body{ background:#fff; color:#000; }
  .sec--dark,.sec--accent,.sec--contact,.hero,.strip{ background:#fff !important; color:#000 !important; }
}

/* ---------- banda de machetă (doar pagina /macheta-recenzii) ---------- */
.macheta{ background:var(--accent); color:#fff; }
.macheta__in{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px;
  padding-block:13px; font-size:.88rem; line-height:1.5;
}
.macheta strong{ font-family:var(--sans); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.74rem; }
.macheta span{ color:rgba(255,255,255,.92); }
.macheta a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

/* Adresa cabinetului este link catre Google Maps. Sublinierea o poarta doar
   ultimul rand, ca sa se citeasca drept adresa, nu drept buton. */
.maplink{ color:inherit; text-decoration:none; display:inline-block; }
.maplink:hover{ color:var(--accent-hi); }
.maplink::after{
  content:"Deschide în Google Maps"; display:block; margin-top:6px;
  font-size:.78rem; color:var(--on-dark-2); border-bottom:1px solid var(--accent-hi);
  width:max-content; padding-bottom:1px; transition:color var(--t-fast);
}
.maplink:hover::after{ color:var(--accent-hi); }