/* =========================================================================
   IT&C EXPERTS NETWORK — foaia de stil a site-ului
   Registru: linie fină, tipografie ușoară, spațiu generos.
   Fonturile sunt găzduite pe serverul vostru (assets/fonts), deci nu se
   încarcă nimic de la Google.
   ========================================================================= */

@font-face{
  font-family:"Poppins"; font-style:normal; font-weight:300; font-display:swap;
  src:url("../fonts/poppins-300.woff2") format("woff2");
}
@font-face{
  font-family:"Poppins"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/poppins-400.woff2") format("woff2");
}
@font-face{
  font-family:"Poppins"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/poppins-500.woff2") format("woff2");
}
/* Serif italic — aceeași literă din care e desenat ampersandul din marcă.
   Se folosește numai pentru cuvintele-accent din titluri. */
@font-face{
  font-family:"Pagella"; font-style:italic; font-weight:400; font-display:swap;
  src:url("../fonts/pagella-italic.woff2") format("woff2");
}

:root{
  --night:       #0E2240;
  --blue:        #17458A;
  --blue-700:    #123A75;
  --blue-800:    #0E2A54;
  --blue-900:    #0E2240;
  --blue-500:    #2A63BE;
  --blue-400:    #7FA8DE;
  --blue-100:    #DEE6F1;
  --blue-50:     #F2F5FA;

  --red:         #A8172A;
  --red-600:     #8C1223;
  --red-100:     #F6E7E9;

  --ink:         #101A28;
  --ink-2:       #45505F;
  --ink-3:       #8A8F8A;
  --line:        #E7E3DA;
  --line-strong: #D6D1C6;
  --bg:          #FBFAF7;
  --bg-soft:     #F6F4EF;
  --bg-card:     #FFFFFF;

  --ok:          #0B6B4D;
  --accent:      #A8172A;   /* cuvintele-accent din titluri */

  --font: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Pagella", "Iowan Old Style", "Palatino Linotype", Palatino,
          Georgia, "Times New Roman", serif;

  --fs-xs:  clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --fs-sm:  clamp(0.86rem, 0.83rem + 0.14vw, 0.93rem);
  --fs-base:clamp(0.98rem, 0.95rem + 0.18vw, 1.06rem);
  --fs-md:  clamp(1.08rem, 1.02rem + 0.30vw, 1.24rem);
  --fs-lg:  clamp(1.26rem, 1.12rem + 0.62vw, 1.64rem);
  --fs-xl:  clamp(1.52rem, 1.26rem + 1.15vw, 2.25rem);
  --fs-2xl: clamp(1.80rem, 1.36rem + 1.95vw, 2.95rem);
  --fs-3xl: clamp(2.15rem, 1.50rem + 2.85vw, 3.85rem);

  /* titlurile — corpuri proprii, mai mici decât scara generală */
  --fs-h1:  clamp(1.56rem, 1.14rem + 1.72vw, 2.42rem);
  --fs-h2:  clamp(1.32rem, 1.06rem + 1.06vw, 1.90rem);
  --fs-h3:  clamp(1.06rem, 0.99rem + 0.30vw, 1.22rem);

  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem; --sp-7:2.75rem; --sp-8:4rem;
  --sp-9:5.5rem; --sp-10:7rem;

  --r-sm:2px; --r:3px; --r-lg:4px; --r-xl:6px; --r-full:0px;

  --sh-1: none;
  --sh-2: 0 1px 2px rgba(16,26,40,.03);
  --sh-3: 0 2px 10px rgba(16,26,40,.05);
  --sh-blue: none;
  --sh-red: none;

  --wrap: 1180px;
  --wrap-narrow: 740px;
  --header-h: 82px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#EDEAE4; --ink-2:#AEB4BD; --ink-3:#7E838B; --accent:#E2707C;
    --line:#1E232C; --line-strong:#2C323D;
    --bg:#080A0E; --bg-soft:#0E1219; --bg-card:#0F1319;
    --blue-50:#101827; --blue-100:#192943;
    --blue-400:#8FB4E8; --blue-500:#4E86D6;
    --red-100:#33161C;
    --sh-2: 0 1px 2px rgba(0,0,0,.5);
    --sh-3: 0 2px 12px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --ink:#EDEAE4; --ink-2:#AEB4BD; --ink-3:#7E838B; --accent:#E2707C;
  --line:#1E232C; --line-strong:#2C323D;
  --bg:#080A0E; --bg-soft:#0E1219; --bg-card:#0F1319;
  --blue-50:#101827; --blue-100:#192943;
  --blue-400:#8FB4E8; --blue-500:#4E86D6;
  --red-100:#33161C;
  --sh-2: 0 1px 2px rgba(0,0,0,.5);
  --sh-3: 0 2px 12px rgba(0,0,0,.45);
}

/* =========================  BAZĂ  ======================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;
     scroll-padding-top:calc(var(--header-h) + 14px)}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-weight:400; font-size:var(--fs-base);
  line-height:1.75; letter-spacing:.004em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%; height:auto; display:block}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px}

h1,h2,h3,h4{margin:0 0 var(--sp-4); color:var(--ink); text-wrap:balance}
h1{font-size:var(--fs-h1); font-weight:200; line-height:1.20; letter-spacing:-.006em;
   max-width:26ch}
h2{font-size:var(--fs-h2); font-weight:300; line-height:1.28; letter-spacing:-.004em;
   max-width:30ch}
h3{font-size:var(--fs-h3); font-weight:400; line-height:1.34; letter-spacing:0}

/* Accentul stilizat din titluri: cuvintele puse între <i> trec în serif
   italic — aceeași literă din care e desenat ampersandul din marcă. */
h1 i, h2 i, h3 i, .cta-band h2 i, .accent, .accent-red{
  font-family:var(--font-serif); font-style:italic; font-weight:400;
  font-size:1.07em; letter-spacing:0;
}
h1 i, h2 i, h3 i, .accent-red{color:var(--accent)}
.accent{color:var(--blue)}
.dark h1 i, .dark h2 i, .dark h3 i, .cta-band h2 i{color:#E2707C}
h4{font-size:var(--fs-md);  font-weight:400; line-height:1.35; letter-spacing:-.004em}
p{margin:0 0 var(--sp-4)}
ul,ol{margin:0 0 var(--sp-4); padding-left:1.1rem}
li{margin-bottom:.45rem}
strong{font-weight:500; color:var(--ink)}
small{font-size:var(--fs-xs)}
hr{border:0; border-top:1px solid var(--line); margin:var(--sp-6) 0}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:16px}
@media(min-width:760px){ .wrap{padding-inline:40px} }
.narrow{max-width:var(--wrap-narrow); margin-inline:auto}
.section{padding-block:clamp(3.2rem,8vw,7rem)}
.section--tight{padding-block:clamp(2rem,4.5vw,3.4rem)}
.soft{background:var(--bg-soft)}
.center{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.lead{font-size:var(--fs-md); font-weight:300; color:var(--ink-2); line-height:1.65; max-width:62ch}
.muted{color:var(--ink-3)}
.skip{position:absolute; left:-9999px; top:0; background:var(--night); color:#fff;
      padding:.8rem 1.2rem; z-index:2000}
.skip:focus{left:0}

.eyebrow{
  display:flex; align-items:center; gap:.85rem; font-size:var(--fs-xs); font-weight:400;
  letter-spacing:.32em; text-transform:uppercase; color:var(--ink-3);
  margin-bottom:var(--sp-4);
}
.eyebrow::before{
  content:""; flex:none; width:26px; height:1px; background:var(--accent); opacity:.85;
}
.eyebrow--light{color:var(--blue-400)}
.eyebrow--light::before{background:#E2707C}

/* subtitlul de sub titlu — serif italic, corp mic, pentru ritm */
.sec-head .lede em, .hero-sub em{
  font-family:var(--font-serif); font-style:italic; font-weight:400; font-size:1.05em;
  color:var(--ink);
}

.sec-head .lede{font-size:var(--fs-base); line-height:1.78}
.sec-head{max-width:720px; margin-bottom:clamp(2rem,4.5vw,3.4rem)}
.sec-head.center{margin-inline:auto}
.sec-head h2{margin-bottom:var(--sp-4)}

/* =========================  BUTOANE  ==================================== */
.btn{
  --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--line-strong);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.82rem 1.5rem; border:1px solid var(--btn-bd); border-radius:var(--r-sm);
  background:var(--btn-bg); color:var(--btn-fg);
  font:inherit; font-weight:400; font-size:var(--fs-xs); letter-spacing:.16em;
  text-transform:uppercase; cursor:pointer; text-decoration:none; text-align:center;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn:hover{text-decoration:none}
.btn--primary{--btn-bg:var(--red); --btn-fg:#FBFAF7; --btn-bd:var(--red)}
.btn--primary:hover{--btn-bg:var(--red-600); --btn-bd:var(--red-600)}
.btn--blue{--btn-bg:var(--night); --btn-fg:#FBFAF7; --btn-bd:var(--night)}
.btn--blue:hover{--btn-bg:var(--blue-700); --btn-bd:var(--blue-700)}
.btn--ghost{--btn-bg:transparent; --btn-fg:var(--ink-2); --btn-bd:var(--line-strong)}
.btn--ghost:hover{--btn-bd:var(--ink); --btn-fg:var(--ink)}
.btn--onblue{--btn-bg:#FBFAF7; --btn-fg:var(--night); --btn-bd:#FBFAF7}
.btn--onblue-ghost{--btn-bg:transparent; --btn-fg:#EDEAE4; --btn-bd:rgba(255,255,255,.35)}
.btn--onblue-ghost:hover{--btn-bd:#fff; --btn-fg:#fff}
.btn--lg{padding:.94rem 1.9rem; font-size:var(--fs-xs); letter-spacing:.18em}
.btn--block{display:flex; width:100%}
.btn-row{display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center}
.btn-row--center{justify-content:center}
.btn svg{flex:none; stroke-width:1.5}

/* =========================  ANTET  ====================================== */
.header{
  position:sticky; top:0; z-index:900;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:saturate(1.2) blur(10px);
  -webkit-backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid transparent; transition:border-color .25s ease;
}
.header.is-stuck{border-bottom-color:var(--line)}
.topbar{background:var(--night); color:#9FB2CC; font-size:var(--fs-xs); letter-spacing:.06em}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4); min-height:40px; flex-wrap:wrap}
.topbar a{color:#DDE5F0; font-weight:400}
.topbar a:hover{color:#fff}
.topbar-items{display:flex; gap:var(--sp-6); align-items:center; flex-wrap:wrap}
@media (max-width:820px){ .topbar{display:none} }

.nav{display:flex; align-items:center; gap:var(--sp-5); min-height:var(--header-h)}
.brand{flex:none}
.nav-links{display:flex; align-items:center; gap:.1rem; margin-left:auto}
.nav-links a{
  color:var(--ink-2); font-weight:400; font-size:var(--fs-xs); letter-spacing:.14em;
  text-transform:uppercase; padding:.6rem .62rem; position:relative; white-space:nowrap;
  transition:color .2s ease;
}
.nav-links a:hover{color:var(--ink); text-decoration:none}
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]::after{
  content:""; position:absolute; left:.62rem; right:.62rem; bottom:.25rem; height:1px;
  background:var(--red);
}
.nav-cta{display:flex; align-items:center; gap:.6rem; margin-left:1rem}

.burger{
  display:none; margin-left:auto; width:46px; height:46px; border:1px solid var(--line-strong);
  background:none; cursor:pointer; align-items:center; justify-content:center; border-radius:var(--r-sm);
}
.burger span{display:block; width:20px; height:1px; background:var(--ink); position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:20px; height:1px; background:var(--ink)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.nav-cta .btn-tel{display:none}   /* telefonul e deja în bara de sus */
@media (max-width:1180px){ .nav-links,.nav-cta{display:none} .burger{display:flex} }

/* Sertarul de meniu stă în afara ecranului, la dreapta. „clip" (spre deosebire
   de „hidden") nu creează un container de derulare, deci antetul lipicios
   continuă să funcționeze. */
html,body{overflow-x:clip}

.drawer{
  position:fixed; inset:0; z-index:1000; background:var(--bg);
  transform:translateX(100%); transition:transform .3s ease; overflow-y:auto; padding-bottom:3rem;
}
.drawer[data-open="true"]{transform:translateX(0)}
.drawer-top{display:flex; align-items:center; justify-content:space-between;
  min-height:var(--header-h); padding-inline:16px; border-bottom:1px solid var(--line)}
@media(min-width:760px){ .drawer-top{padding-inline:40px} }
.drawer-close{width:46px;height:46px;border:1px solid var(--line-strong); background:none;
  font-size:1.3rem; line-height:1; cursor:pointer; color:var(--ink); border-radius:var(--r-sm)}
.drawer nav{padding:var(--sp-4) 16px}
@media(min-width:760px){ .drawer nav{padding-inline:40px} }
.drawer nav a{display:block; padding:1rem 0; border-bottom:1px solid var(--line); color:var(--ink);
  font-weight:300; font-size:var(--fs-md); letter-spacing:.01em}
.drawer nav a:hover{color:var(--blue); text-decoration:none}
.drawer nav .sub a{padding-left:1rem; font-size:var(--fs-sm); color:var(--ink-3)}
.drawer .btn-row{margin-top:var(--sp-6); flex-direction:column; align-items:stretch}

/* =========================  HERO  ======================================= */
.hero{position:relative; overflow:hidden; padding-block:clamp(3rem,7vw,6rem)}
.hero::before{
  content:""; position:absolute; inset:-20% -25% auto -25%; height:760px; z-index:0;
  pointer-events:none;
  background:radial-gradient(46% 42% at 20% 4%, rgba(23,69,138,.07), transparent 66%);
}
.hero .wrap{position:relative; z-index:1}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2.2rem,5vw,4.5rem); align-items:center}
/* Pe paginile de serviciu formularul e mult mai inalt decat coloana de text.
   Textul porneste de sus, imediat sub firimituri, iar reperele de dedesubt se
   distribuie pe inaltimea ramasa, inchizand coloana la baza cardului. */
.hero-grid--serviciu{align-items:stretch}
.hero-grid--serviciu > div:first-child{display:flex; flex-direction:column}
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr}
  .hero-grid--serviciu > div:first-child{display:block}
}

.hero-repere{margin-top:var(--sp-7); border-top:1px solid var(--line)}
.hero-grid--serviciu .hero-repere{
  margin-top:var(--sp-6); flex:1 1 auto;
  display:flex; flex-direction:column;
}
/* benzi egale, care inchid coloana exact la baza cardului de formular */
.hero-grid--serviciu .hero-repere > div{flex:1 1 0; align-content:center}
.repere-eticheta{
  flex:none; display:block; padding-top:var(--sp-4);
  font-size:var(--fs-xs); font-weight:400; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-3);
}
.hero-repere > div{
  display:grid; grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  gap:var(--sp-3); align-items:baseline;
  padding-block:var(--sp-4); border-bottom:1px solid var(--line);
}
.hero-repere > div:last-child{border-bottom:0}
.hero-repere b{font-size:var(--fs-sm); font-weight:400; color:var(--ink);
  letter-spacing:.005em; line-height:1.45}
.hero-repere span{font-size:var(--fs-sm); font-weight:300; color:var(--ink-3);
  line-height:1.62}
@media (max-width:1000px){
  .hero-grid--serviciu .hero-repere{display:block; margin-top:var(--sp-7)}
}
@media (max-width:560px){
  .hero-repere > div{grid-template-columns:1fr; gap:.15rem}
}

.pill{
  display:inline-flex; align-items:center; gap:.6rem; padding:.34rem 0 .8rem;
  font-size:var(--fs-xs); font-weight:400; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:var(--sp-5); border-bottom:1px solid var(--line);
}
.pill b{color:var(--ink-2); font-weight:400}
.pill .dot{width:5px;height:5px;border-radius:50%;background:var(--red)}

.hero h1 .accent{color:var(--blue)}
.hero h1 .accent-red{
  position:relative; white-space:normal;
  background-image:linear-gradient(var(--red),var(--red));
  background-repeat:no-repeat;
  background-size:100% 1px;
  background-position:0 calc(100% - .12em);
  padding-bottom:.06em;
}
.hero-sub{font-size:var(--fs-base); font-weight:300; color:var(--ink-2); max-width:52ch;
  line-height:1.78;
  margin-bottom:var(--sp-6)}
.hero-proof{display:flex; flex-wrap:wrap; gap:var(--sp-5); margin-top:var(--sp-7);
  padding-top:var(--sp-5); border-top:1px solid var(--line)}
.hero-proof div{flex:1 1 0}
.hero-proof b{white-space:nowrap}
.hero-proof b{display:block; font-size:var(--fs-lg); font-weight:300; color:var(--ink);
  letter-spacing:-.01em; line-height:1.25}
.hero-proof span{font-size:var(--fs-xs); color:var(--ink-3); letter-spacing:.06em}

.hero-panel{
  background:var(--night); padding:clamp(1.3rem,3vw,2rem); color:#C6D4E6;
  position:relative; overflow:hidden; border-radius:var(--r);
}
.panel-head{display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.3rem; padding-bottom:1rem; border-bottom:1px solid rgba(255,255,255,.10)}
.panel-head strong{color:#fff; font-size:var(--fs-xs); font-weight:400;
  letter-spacing:.24em; text-transform:uppercase}
.panel-head .live{display:inline-flex; align-items:center; gap:.5rem; font-size:var(--fs-xs);
  color:#8FA5C2; letter-spacing:.14em; text-transform:uppercase}
.panel-head .live i{width:5px;height:5px;border-radius:50%;background:#3FBF8A; display:inline-block;
  animation:pulse 2.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){ .panel-head .live i{animation:none} }

.panel-rows{display:grid; gap:0}
.prow{
  display:grid; grid-template-columns:auto 1fr auto; gap:.9rem; align-items:center;
  padding:.85rem 0; font-size:var(--fs-sm); border-bottom:1px solid rgba(255,255,255,.07);
}
.prow:last-child{border-bottom:0}
.prow .ico{width:28px;height:28px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.16); border-radius:50%}
.prow .ico svg{width:13px;height:13px;stroke:#9FB4CE; stroke-width:1.4}
.prow b{color:#fff; font-weight:400; display:block; letter-spacing:.01em}
.prow small{color:#8FA5C2; font-size:var(--fs-xs); font-weight:300}
.state{font-size:var(--fs-xs); font-weight:400; letter-spacing:.14em; text-transform:uppercase;
  white-space:nowrap}
.state--ok{color:#5FD3A3}
.state--alert{color:#E2707C}
.panel-foot{
  margin-top:1.2rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-size:var(--fs-xs); color:#8FA5C2; letter-spacing:.06em;
}
.panel-foot b{color:#fff; font-size:var(--fs-sm); font-weight:300; letter-spacing:.1em}

/* =========================  CARDURI  ==================================== */
.grid{display:grid; gap:var(--sp-6)}

/* varianta „tabel”: celule lipite, despărțite doar de o linie de un pixel.
   Se folosește numai când toate celulele sunt carduri de aceeași natură. */
.grid--linii{gap:1px; background:var(--line); border:1px solid var(--line); align-items:stretch}
.grid--linii > *{background:var(--bg-card)}
.grid--linii > *:not(.card):not(.stat):not(.plan):not(.step){padding:clamp(1.4rem,2.8vw,2.1rem)}

/* strat de fapte, fără chenare — doar linii verticale subțiri.
   Flex, ca rândul să rămână echilibrat și când o valoare lipsește
   din config.js și blocul ei e ascuns. */
.fapte{display:grid; grid-template-columns:repeat(4,auto); gap:0}
/* fără min-width:0 pe celule: coloanele „auto" trebuie să se lărgească după valoarea
   cea mai lungă („Oriunde în lume"), altfel textul nefrânt iese peste celula vecină */
.fapte > div{padding:var(--sp-2) var(--sp-5); border-left:1px solid var(--line)}
.fapte > div:first-child{border-left:0; padding-left:0}
.fapte b{display:block; font-size:clamp(1.52rem, 1.26rem + 1.05vw, 2.1rem); font-weight:200;
  letter-spacing:-.015em; color:var(--ink); line-height:1.15; margin-bottom:.5rem; white-space:nowrap}
.fapte b span{display:inline; font:inherit; color:inherit; letter-spacing:inherit}
.fapte > div > span{display:block; font-size:var(--fs-xs); font-weight:300;
  color:var(--ink-3); line-height:1.65; letter-spacing:.02em; max-width:32ch}
@media (max-width:1200px){
  .fapte{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:var(--sp-6)}
  .fapte > div:nth-child(odd){border-left:0; padding-left:0}
  .fapte > div:nth-child(even){padding-right:0}
}
@media (max-width:520px){
  .fapte{grid-template-columns:1fr; row-gap:0}
  .fapte > div{border-left:0; padding:var(--sp-4) 0; border-top:1px solid var(--line)}
  .fapte > div:first-child{border-top:0; padding-top:0}
}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){ .grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} }

.card{
  background:var(--bg-card); border:0; padding:clamp(1.4rem,2.8vw,2.1rem);
  display:flex; flex-direction:column; position:relative; transition:background .2s ease;
}
.card--link:hover{background:var(--bg-soft)}
.card h3{margin-bottom:.6rem; font-size:var(--fs-md); font-weight:400; letter-spacing:-.004em}
.card p{color:var(--ink-2); font-size:var(--fs-sm); font-weight:300; margin-bottom:var(--sp-3)}
.card .more{margin-top:auto; font-weight:400; font-size:var(--fs-xs); letter-spacing:.18em;
  text-transform:uppercase; color:var(--blue); display:inline-flex; align-items:center; gap:.45rem}
.card a.stretch::after{content:""; position:absolute; inset:0}
.more .sag{stroke-width:1.2; transition:transform .28s cubic-bezier(.2,.7,.3,1); flex:none}
.card--link:hover .more .sag,.card:hover .more .sag{transform:translateX(5px)}

.ico-box{
  width:38px; height:38px; display:grid; place-items:center; margin-bottom:var(--sp-5);
  border:1px solid var(--line-strong); border-radius:50%;
}
.ico-box svg{width:17px; height:17px; stroke:var(--blue); fill:none; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round}
.ico-box--red{border-color:var(--red)}
.ico-box--red svg{stroke:var(--red)}

.bento{display:grid; grid-template-columns:repeat(6,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line)}
.bento > *{grid-column:span 2}
.bento .b-wide{grid-column:span 3}
.bento .b-full{grid-column:span 6}
@media (max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento > *{grid-column:span 1}
  .bento .b-wide,.bento .b-full{grid-column:span 2}
}
@media (max-width:620px){
  .bento{grid-template-columns:1fr}
  .bento > *,.bento .b-wide,.bento .b-full{grid-column:span 1}
}

.stat{background:var(--bg-card); padding:1.5rem 1.4rem}
.grid:not(.grid--linii) > .stat{border:1px solid var(--line)}
.stat b{display:block; font-size:var(--fs-xl); font-weight:200; letter-spacing:-.018em;
  color:var(--ink); line-height:1.15}
.stat b.red{color:var(--red)}
.stat span{display:block; font-size:var(--fs-sm); font-weight:300; color:var(--ink-2); margin-top:.5rem}
.stat small{display:block; font-size:var(--fs-xs); color:var(--ink-3); margin-top:.5rem}

/* Listă cu linioară. Elementul de listă e un bloc obișnuit cu indent
   agățat, nu o grilă — așa rămâne întreg și când textul conține <strong>,
   <a> sau altă etichetă. */
.checks{list-style:none; padding:0; margin:0; display:grid; gap:.75rem}
.checks li{position:relative; padding-left:1.7rem; font-size:var(--fs-sm);
  font-weight:300; color:var(--ink-2); margin:0; line-height:1.65}
.checks li::before{content:""; position:absolute; left:0; top:.78em;
  width:12px; height:1px; background:var(--line-strong)}
.checks li strong{font-weight:400; color:var(--ink)}
.checks--red li::before{background:var(--red)}
.checks--light li{color:#C6D4E6}
.checks--light li strong{color:#fff}
.checks--light li::before{background:rgba(255,255,255,.45)}

/* =========================  SECȚIUNE ÎNCHISĂ  =========================== */
.dark{background:var(--night); color:#C6D4E6; position:relative; overflow:hidden}
.dark h2,.dark h3,.dark strong{color:#fff}
.dark .eyebrow{color:#8FA5C2}
.dark .eyebrow::before{background:#E2707C}
.dark p{color:#AFC1D8}
.dark .wrap{position:relative; z-index:1}
.dark .grid--linii,.dark .bento,.dark .steps{background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.10)}
.dark .card{background:var(--night); color:#C6D4E6}
.dark .card p{color:#AFC1D8}
.dark .ico-box{border-color:rgba(255,255,255,.22)}
.dark .ico-box svg{stroke:#9FB4CE}
.dark .stat{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12)}
.dark .stat b{color:#fff}
.dark .stat b.red{color:#E2707C}
.dark .stat span,.dark .stat small{color:#AFC1D8}
.dark .step{background:var(--night)}
.dark .step p{color:#AFC1D8}
.dark .step h3{color:#fff}
.dark .step::before{color:#7C90AC}
.dark a{color:#9FB4CE}
.dark .checks li{color:#AFC1D8}
.dark .table-wrap{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12)}
.dark th{background:rgba(255,255,255,.05); color:#fff}
.dark td{color:#C6D4E6; border-bottom-color:rgba(255,255,255,.10)}
.dark .quote{color:#C6D4E6}
.dark .note{background:rgba(255,255,255,.05); color:#C6D4E6}
.dark .note strong{color:#fff}

/* =========================  PACHETE  ==================================== */
.plans{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); align-items:stretch}
@media (max-width:900px){ .plans{grid-template-columns:1fr; max-width:520px; margin-inline:auto} }
.plan{background:var(--bg-card); padding:clamp(1.6rem,3vw,2.2rem); display:flex;
  flex-direction:column; height:100%}
.plan--featured{background:var(--bg-soft); position:relative}
.plan--featured::before{
  content:"Recomandat"; display:block; font-size:var(--fs-xs); font-weight:400;
  letter-spacing:.26em; text-transform:uppercase; color:var(--red); margin-bottom:.8rem;
}
.plan h3{font-size:var(--fs-lg); font-weight:300; margin-bottom:.4rem}
.plan .who{font-size:var(--fs-sm); font-weight:300; color:var(--ink-3); margin-bottom:1.4rem; min-height:3em}
.plan .price{font-size:var(--fs-xl); font-weight:200; letter-spacing:-.02em; color:var(--ink); line-height:1.15}
.plan .price small{display:block; font-size:var(--fs-xs); color:var(--ink-3); font-weight:300;
  margin-top:.5rem; letter-spacing:.04em}
.plan .divider{height:1px; background:var(--line); margin:1.5rem 0}
.plan .checks{margin-bottom:1.8rem}
.plan .btn{margin-top:auto}

.fill{
  background:var(--red-100); color:var(--red-600); font-weight:400;
  padding:.06em .45em; border:1px dashed var(--red); white-space:nowrap; font-size:.9em;
}

/* =========================  PAȘI  ====================================== */
.steps{counter-reset:s; display:grid; gap:1px; background:var(--line); border:1px solid var(--line)}
.steps--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){
  .steps--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps--3{grid-template-columns:1fr}
}
@media (max-width:560px){ .steps--4{grid-template-columns:1fr} }
.step{position:relative; padding:clamp(1.4rem,2.6vw,2rem); background:var(--bg-card)}
.step::before{
  counter-increment:s; content:counter(s,upper-roman);
  display:block; font-size:var(--fs-xs); letter-spacing:.3em; color:var(--ink-3); margin-bottom:1rem;
}
.step h3{font-size:var(--fs-md); font-weight:400; margin-bottom:.5rem}
.step p{font-size:var(--fs-sm); font-weight:300; color:var(--ink-2); margin:0}

/* =========================  ÎNTREBĂRI  ================================= */
.faq{display:grid; gap:0; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; list-style:none; padding:1.35rem 3rem 1.35rem 0;
  font-weight:300; font-size:var(--fs-md); position:relative; color:var(--ink);
  transition:color .2s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:.5rem; top:50%; width:9px; height:9px; margin-top:-6px;
  border-right:1px solid var(--ink-3); border-bottom:1px solid var(--ink-3);
  transform:rotate(45deg); transition:transform .25s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg); margin-top:-2px}
.faq summary:hover{color:var(--blue)}
.faq .answer{padding:0 2rem 1.6rem 0; color:var(--ink-2); font-size:var(--fs-sm); font-weight:300}
.faq .answer p:last-child{margin-bottom:0}

/* =========================  FORMULAR  =================================== */
.form-card{background:var(--bg-card); border:1px solid var(--line); padding:clamp(1.6rem,3vw,2.4rem)}
.form-card h3{font-size:var(--fs-lg); font-weight:300; margin-bottom:.5rem}
.form-card .form-intro{font-size:var(--fs-sm); font-weight:300; color:var(--ink-2); margin-bottom:1.8rem}
.field{margin-bottom:1.2rem}
.field label{display:block; font-weight:400; font-size:var(--fs-xs); letter-spacing:.16em;
  text-transform:uppercase; margin-bottom:.5rem; color:var(--ink-3)}
.field label .req{color:var(--red)}
.field input,.field textarea,.field select{
  width:100%; padding:.8rem 0; border:0; border-bottom:1px solid var(--line-strong);
  font:inherit; font-weight:300; font-size:var(--fs-base); background:transparent; color:var(--ink);
  border-radius:0; transition:border-color .2s ease;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-bottom-color:var(--blue)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3); opacity:.7}
.field textarea{min-height:90px; resize:vertical}
.field .hint{font-size:var(--fs-xs); color:var(--ink-3); margin-top:.45rem}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem}
@media (max-width:560px){ .field-row{grid-template-columns:1fr} }
.consent{display:grid; grid-template-columns:18px 1fr; gap:.8rem; align-items:start;
  font-size:var(--fs-xs); font-weight:300; color:var(--ink-3); margin:1.4rem 0}
.consent input{width:16px; height:16px; margin-top:.2rem; accent-color:var(--night)}
.form-foot{font-size:var(--fs-xs); color:var(--ink-3); margin-top:1.2rem; text-align:center; letter-spacing:.06em}
.hp{position:absolute; left:0; top:0; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); pointer-events:none}
.hp label,.hp input{position:absolute; left:0; top:0; width:1px; height:1px;
  min-width:0; padding:0; margin:0; border:0; font-size:1px}   /* capcană pentru roboți */

/* =========================  BANDĂ CTA  ================================= */
.cta-band{background:var(--night); padding:clamp(2.2rem,5vw,4rem); color:#fff; position:relative}
.cta-band h2{color:#fff; margin-bottom:.9rem; font-weight:200; max-width:34ch}
.cta-band p{color:#AFC1D8; max-width:58ch; font-weight:300}
.cta-inner{display:grid; grid-template-columns:minmax(0,1.5fr) auto; gap:clamp(1.6rem,4vw,3rem);
  align-items:center}
@media (max-width:900px){ .cta-inner{grid-template-columns:1fr} }

/* =========================  FIR ARIADNA  =============================== */
.crumbs{font-size:var(--fs-xs); color:var(--ink-3); padding-top:var(--sp-6); letter-spacing:.1em}
.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; padding:0; margin:0}
.crumbs li::after{content:"/"; margin-left:.5rem; color:var(--line-strong)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--ink)}

/* =========================  TABEL  ===================================== */
.table-wrap{overflow-x:auto; border:1px solid var(--line); background:var(--bg-card)}
table{width:100%; border-collapse:collapse; font-size:var(--fs-sm); font-weight:300; min-width:520px}
th,td{padding:1rem 1.2rem; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
th{background:var(--bg-soft); font-weight:400; color:var(--ink); font-size:var(--fs-xs);
  text-transform:uppercase; letter-spacing:.2em}
tr:last-child td{border-bottom:0}

/* =========================  CITAT  ===================================== */
.quote{
  background:transparent; border:0; border-left:1px solid var(--red); border-radius:0;
  padding:.4rem 0 .4rem 2rem; font-size:var(--fs-md); font-weight:300; color:var(--ink-2);
  line-height:1.7;
}
.quote footer{margin-top:1.2rem; font-size:var(--fs-xs); color:var(--ink-3);
  letter-spacing:.14em; text-transform:uppercase}

.note{
  background:var(--bg-soft); border:0; border-left:1px solid var(--blue);
  padding:1.3rem 1.6rem; font-size:var(--fs-sm); font-weight:300; color:var(--ink-2);
}
.note strong{color:var(--ink); font-weight:400}

/* =========================  SUBSOL  ==================================== */
.footer{background:var(--night); color:#9FB2CC; padding-block:var(--sp-9) var(--sp-6);
  font-size:var(--fs-sm); font-weight:300}
.footer a{color:#DDE5F0}
.footer a:hover{color:#fff}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:clamp(1.6rem,4vw,3rem); margin-bottom:var(--sp-8)}
@media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .footer-grid{grid-template-columns:1fr} }
.footer h4{color:#fff; font-size:var(--fs-xs); font-weight:400; text-transform:uppercase;
  letter-spacing:.28em; margin-bottom:var(--sp-5)}
.footer ul{list-style:none; padding:0; margin:0}
.footer li{margin-bottom:.7rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12); padding-top:var(--sp-5);
  display:flex; flex-wrap:wrap; gap:var(--sp-4); justify-content:space-between;
  font-size:var(--fs-xs); color:#7E93B2; letter-spacing:.04em}
.footer-bottom a{color:#7E93B2}
.social{display:flex; gap:.8rem; margin-top:var(--sp-5)}
.social a{width:38px; height:38px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.18); border-radius:50%; transition:border-color .2s ease}
.social a:hover{border-color:#fff}
.social svg{width:16px; height:16px; fill:#DDE5F0}

/* =========================  BARA MOBILĂ  =============================== */
.mobar{
  position:fixed; left:0; right:0; bottom:0; z-index:880; display:none;
  background:color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter:blur(10px);
  border-top:1px solid var(--line); padding:.6rem 12px;
  padding-bottom:calc(.6rem + env(safe-area-inset-bottom)); gap:.6rem;
}
.mobar .btn{flex:1; padding:.85rem .5rem; font-size:.66rem; letter-spacing:.12em}
@media (max-width:820px){ .mobar{display:flex} body{padding-bottom:74px} }

/* =========================  BANNER COOKIE  ============================= */
.cookie{
  position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:1200;
  width:min(660px, calc(100% - 24px)); background:var(--bg-card);
  border:1px solid var(--line-strong); box-shadow:var(--sh-3); padding:1.4rem 1.6rem; display:none;
}
.cookie[data-show="true"]{display:block}
@media (max-width:820px){ .cookie{bottom:82px} }
.cookie h4{font-size:var(--fs-xs); font-weight:400; letter-spacing:.2em; text-transform:uppercase;
  margin-bottom:.7rem}
.cookie p{font-size:var(--fs-xs); font-weight:300; color:var(--ink-2); margin-bottom:1.2rem}
.cookie .btn{padding:.7rem 1.2rem}

/* =========================  APARIȚIE LA DERULARE  ====================== */
.js .reveal{opacity:0; transform:translateY(12px); transition:opacity .7s ease, transform .7s ease}
.js .reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ .js .reveal{opacity:1; transform:none; transition:none} }
@media print{ .js .reveal{opacity:1 !important; transform:none !important} }

/* =========================  PAGINĂ DE TEXT  ============================ */
.prose{max-width:min(100%, 68ch)}
.prose p{font-size:var(--fs-base); font-weight:300; color:var(--ink-2); line-height:1.78}
.prose h2{font-size:var(--fs-h2); font-weight:300;
  margin-top:var(--sp-8); margin-bottom:var(--sp-4)}
.prose h3{font-size:var(--fs-h3); margin-top:var(--sp-6); font-weight:400}
.prose li{color:var(--ink-2); font-weight:300}
.prose table{min-width:auto}

/* Un supratitlu urmat de un titlu, în mijlocul unui text curent, se
   distanțează la fel de mult ca o secțiune nouă. */
.prose .eyebrow{margin-top:var(--sp-8)}
.prose .eyebrow + h2{margin-top:0}
.prose > :first-child{margin-top:0}

/* =========================  LOGO  ====================================== */
.brand{display:inline-flex; align-items:center; text-decoration:none}
.brand img{display:none; width:auto}
.footer .brand .logo-f{display:block; height:52px; margin-bottom:var(--sp-5)}
/* --- marca din antet -------------------------------------------------
   Peste 380 px: numele pe două rânduri, IT&C deasupra, EXPERTS NETWORK
   dedesubt, cu simbolul la stânga. Sub 380 px: doar simbolul.
   Fiecare are perechea ei pentru fundal închis (-md / -sd).            */
.brand img{display:none; width:auto}
.footer .brand .logo-f{display:block; height:52px; margin-bottom:var(--sp-5)}
.brand .logo-m,.brand .logo-md{height:44px}
.brand .logo-s,.brand .logo-sd{height:40px}

.header .brand .logo-m,.drawer .brand .logo-m{display:block}
@media (max-width:379px){
  .header .brand .logo-m{display:none !important}
  .header .brand .logo-s{display:block}
}

/* fundal închis — preferința sistemului */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .header .brand .logo-m,
  :root:not([data-theme="light"]) .drawer .brand .logo-m{display:none !important}
  :root:not([data-theme="light"]) .header .brand .logo-md,
  :root:not([data-theme="light"]) .drawer .brand .logo-md{display:block}
  @media (max-width:379px){
    :root:not([data-theme="light"]) .header .brand .logo-md{display:none !important}
    :root:not([data-theme="light"]) .header .brand .logo-s{display:none !important}
    :root:not([data-theme="light"]) .header .brand .logo-sd{display:block}
  }
}
/* fundal închis — ales manual din buton */
:root[data-theme="dark"] .header .brand .logo-m,
:root[data-theme="dark"] .drawer .brand .logo-m{display:none !important}
:root[data-theme="dark"] .header .brand .logo-md,
:root[data-theme="dark"] .drawer .brand .logo-md{display:block}
:root[data-theme="light"] .header .brand .logo-m,
:root[data-theme="light"] .drawer .brand .logo-m{display:block}
:root[data-theme="light"] .header .brand .logo-md,
:root[data-theme="light"] .drawer .brand .logo-md{display:none !important}
@media (max-width:379px){
  :root[data-theme="dark"] .header .brand .logo-md{display:none !important}
  :root[data-theme="dark"] .header .brand .logo-sd{display:block}
  :root[data-theme="light"] .header .brand .logo-sd{display:none !important}
  :root[data-theme="light"] .header .brand .logo-s{display:block}
}

/* =========================  UTILITARE  ================================= */
.flex{display:flex}
.gap-3{gap:var(--sp-3)}
.wrap-w{flex-wrap:wrap}
.items-center{align-items:center}
.hide-sm{display:initial}
@media (max-width:700px){ .hide-sm{display:none} }
.mt-5{margin-top:var(--sp-5)}
.mt-6{margin-top:var(--sp-6)}
.mb-5{margin-bottom:var(--sp-5)}
.print-only{display:none}
@media print{
  .header,.mobar,.cookie,.footer,.cta-band{display:none !important}
  body{padding:0}
}

/* =========================  RECOMANDĂRI (De ce noi)  ===================== */
.recomandare{margin:0; border:1px solid var(--line); display:flex; flex-direction:column; gap:var(--sp-4)}
.recomandare p{font-family:var(--font-serif); font-style:italic; font-size:var(--fs-lg); font-weight:400;
  line-height:1.5; color:var(--ink); margin:0}
.recomandare footer{margin-top:auto; font-size:var(--fs-xs); font-weight:400; letter-spacing:.06em;
  color:var(--ink-3)}

/* ===== Varianta curată: componente proprii ===== */
/* Lista compactă de servicii (prima pagină) */
.lista-servicii{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--line)}
.lista-servicii li{border-bottom:1px solid var(--line)}
.lista-servicii li:nth-child(odd){border-right:1px solid var(--line)}
.lista-servicii a{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto;
  column-gap:1rem; align-items:center; padding:clamp(1.1rem,2.2vw,1.5rem) clamp(1rem,2.4vw,1.8rem);
  color:inherit; text-decoration:none; height:100%}
.lista-servicii a:hover{background:var(--bg-soft)}
.lista-servicii b{font-weight:400; font-size:var(--fs-md); letter-spacing:-.01em; color:var(--ink)}
.lista-servicii span{grid-column:1; font-size:var(--fs-sm); font-weight:300; color:var(--ink-3); margin-top:.3rem}
.lista-servicii .sag{grid-column:2; grid-row:1 / span 2; stroke-width:1.2; color:var(--ink-3);
  transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.lista-servicii a:hover .sag{transform:translateX(5px)}
@media (max-width:760px){
  .lista-servicii{grid-template-columns:1fr}
  .lista-servicii li:nth-child(odd){border-right:0}
}
/* CTA scurt: o frază și un buton */
.cta-scurt{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 2rem;
  padding:clamp(1.4rem,3vw,2.2rem) clamp(1.2rem,3vw,2.4rem); border:1px solid var(--line); background:var(--bg-card)}
.cta-scurt p{margin:0; font-size:var(--fs-md); font-weight:300; color:var(--ink-2); max-width:60ch}
.dark .cta-scurt{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14)}
/* Ritm vertical mai strâns: paginile au mai puține secțiuni, deci spațiile
   dintre ele nu mai trebuie să „respire” cât în varianta completă. */
.section{padding-block:clamp(2.6rem,6vw,5rem)}
.hero{padding-block:clamp(2.8rem,6vw,5rem)}
.sec-head{margin-bottom:clamp(1.6rem,3.6vw,2.7rem)}
/* două secțiuni la rând pe același fundal: una singură „respirație” între ele */
.section:not(.soft):not(.dark) + .section:not(.soft):not(.dark),
.section.soft + .section.soft{padding-top:clamp(.6rem,1.6vw,1.3rem)}
/* trecerile către / dinspre fâșiile înguste (banda de cifre, fraza cu buton, antetele de pagină) */
.section--tight + .section,
.hero + .section{padding-top:clamp(1.8rem,4vw,3rem)}
.section + .section--tight{padding-top:.5rem}
/* liniuța roșie sub titlul serviciului, la trecerea cursorului (lista de pe prima pagină) */
.lista-servicii b{position:relative; display:inline-block; padding-bottom:.35rem}
.lista-servicii b::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--red); transition:width .32s cubic-bezier(.2,.7,.3,1)}
.lista-servicii a:hover b::after,.lista-servicii a:focus-visible b::after{width:2.4rem}
.lista-servicii span{margin-top:.1rem}
.cta-scurt p{flex:1 1 32ch}
.cta-scurt .btn{flex:none}
/* aceeași liniuță roșie sub titlul serviciului, pe cardurile din pagina „Servicii” */
.bento .card--link h3{position:relative; display:inline-block; padding-bottom:.4rem}
.bento .card--link h3::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--red); transition:width .32s cubic-bezier(.2,.7,.3,1)}
.bento .card--link:hover h3::after,.bento .card--link:focus-within h3::after{width:2.4rem}
/* Linia de sub serviciu: una singură, roșie, pe toată lățimea titlului, 1 px —
   ca linia de sub pagina activă din meniu, care dispare de tot. */
.nav-links a[aria-current="page"]::after{display:none}
.lista-servicii a:hover b::after,.lista-servicii a:focus-visible b::after,
.bento .card--link:hover h3::after,.bento .card--link:focus-within h3::after{width:100%}
.lista-servicii a:hover{background:transparent}
.lista-servicii a:hover .sag{transform:none}
.bento .card--link:hover{background:var(--bg-card)}
.bento .card--link:hover .more .sag,.bento .card--link:hover .more .sag{transform:none}
.lista-servicii b{justify-self:start; max-width:100%}
/* titlul cardului de serviciu nu se mai subliniază la trecerea cursorului — rămâne doar linia roșie */
.bento .card--link h3 a,.bento .card--link h3 a:hover,.bento .card--link:hover h3 a{text-decoration:none}
/* aceeași distanță între text și linia roșie pe ambele pagini */
.bento .card--link h3{padding-bottom:.35rem}

/* WhatsApp: pictograma verde (balon de mesaj) și linkul subliniat, ca să se vadă că se apasă */
:root{--wa:#1A9E4B}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--wa:#25D366} }
:root[data-theme="dark"]{--wa:#25D366}
.ico-wa{flex:none; color:var(--wa)}
.lnk-wa{display:inline-flex; align-items:center; gap:.42rem; text-decoration:none; vertical-align:bottom}
.lnk-wa span{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
.lnk-wa:hover{text-decoration:none}
.lnk-wa:hover span{text-decoration-thickness:2px}
.footer .ico-wa,.topbar .ico-wa,.cta-band .ico-wa{color:#25D366}
.btn--primary .ico-wa,.btn--onblue .ico-wa{color:currentColor}
/* când coloana din stânga este îngustă, cardurile Telefon și Email stau unul sub altul */
@media (min-width:621px) and (max-width:1199px){ .contact-date{grid-template-columns:1fr} }