/* EmblematicWP theme.css (auto din prototype/) */
/**
 * Calculix.ro — sistem de design tokens (iulie 2026)
 * Grid tipografic Geist, spatiere pe grid 8px, raze de colt, fara umbre.
 * Singura schimbare fata de sistemul sursa: accentul de brand e ALBASTRU
 * (#2563EB, identic cu --cx-blue din calculatoare), nu rosu.
 */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;900&display=swap');

:root{
  /* -- culori neutre -- */
  --near-black:        #141414;
  --pure-black:        #000000;
  --pure-white:        #ffffff;
  --deep-charcoal:      #0a0a0a;
  --dark-gray:          #292929;
  --mid-gray:           #757575;
  --light-gray:         #c4c4c4;
  --off-white-surface:  #f2f2f2;

  /* -- accent de brand: ALBASTRU Calculix (nu rosu) -- */
  --brand-blue:         #2563EB;  /* identic cu --cx-blue din calculatoare */
  --brand-blue-hover:   #1D4ED8;
  --brand-blue-soft:    #E4ECFC;

  /* -- succes/eroare: identic cu --cx-green/--cx-red din calculatoare (calculix.css),
     ca mesajele de status sa fie coerente vizual pe tot site-ul -- */
  --success:      #059669;
  --success-soft: #D1FAE5;
  --danger:       #DC2626;
  --danger-soft:  #FEE2E2;

  /* -- roluri semantice -- */
  --ink:          var(--near-black);
  --ink-soft:     var(--dark-gray);
  --ink-line:     rgba(255,255,255,.12);
  --ink-line-soft:rgba(255,255,255,.07);
  --paper:        var(--off-white-surface);
  --paper-alt:    #e8e8e8;
  --paper-line:   var(--light-gray);

  --text-on-dark:       var(--pure-white);
  --text-on-dark-muted: #A8A8A8;
  --text-on-light:      var(--pure-black);
  --text-on-light-mid:  #3d3d3d;
  --text-on-light-muted:var(--mid-gray);

  --accent-warm:       var(--brand-blue);
  --accent-warm-hover: var(--brand-blue-hover);
  --accent-warm-soft:  var(--brand-blue-soft);
  --accent-blue:       var(--brand-blue);
  --accent-blue-hover: var(--brand-blue-hover);
  --accent-blue-soft:  var(--brand-blue-soft);

  /* -- tipografie: Geist, spacing negativ, scala extrasa -- */
  --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-mono: 'Geist', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* -- spatiere: grid de 8px -- */
  --sp-xs:4px; --sp-sm:6px; --sp-md:8px; --sp-base:12px; --sp-lg:16px;
  --sp-xl:18px; --sp-2xl:20px; --sp-3xl:24px; --sp-4xl:32px; --sp-5xl:40px;
  --sp-6xl:56px; --sp-7xl:80px; --sp-8xl:100px; --sp-9xl:120px; --sp-10xl:160px;

  /* -- geometrie: raze extrase -- */
  --radius-sm:   5px;   /* Small */
  --radius-md:   10px;  /* Medium */
  --radius-lg:   16px;  /* Card */
  --radius-xl:   15px;  /* Large (folosit ca alternativa la Card pe suprafete mari) */
  --radius-pill: 999px;
  --radius-button: 26px;
  --radius-badge:  30px;
  --container: 1440px;
  --gutter: clamp(20px, 4vw, 56px);

  /* -- fara umbre: profunzimea vine din fundaluri dark + contrast imagine -- */
  --shadow-card: none;
  --shadow-card-hover: none;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-sans);
  background:var(--paper);
  color:var(--text-on-light);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:var(--container); margin:0 auto; padding-inline:var(--gutter); }

/* -- tipografie utilitara -- */
.eyebrow{
  font-family:var(--font-sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:normal;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{
  content:'';
  width:6px; height:6px; border-radius:50%;
  background:currentColor;
}
h1,h2,h3,h4{
  font-weight:600;
  letter-spacing:-0.05em;
  line-height:1.1;
  margin:0;
}
/* Hero Display: 88.29/600/-4.41px */
h1{ font-size:clamp(40px, 7vw, 88.29px); font-weight:600; letter-spacing:-0.05em; line-height:1.1; }
/* Display L / Heading L pentru H2 de sectiune */
h2{ font-size:clamp(30px, 4vw, 48px); font-weight:500; letter-spacing:-0.05em; }
/* Heading M pentru titluri de card */
h3{ font-size:24px; font-weight:500; letter-spacing:-0.04em; }
p{ margin:0; }
/* Body L: 18/500/-0.54px */
.lede{ font-size:clamp(16px, 1.4vw, 18px); font-weight:500; color:var(--text-on-light-mid); line-height:1.3; letter-spacing:-0.03em; }

/* -- numere/eyebrow tip revista -- */
.kicker{
  font-family:var(--font-sans); font-size:12px; font-weight:500;
  letter-spacing:normal; color:var(--text-on-light-muted);
}

/* -- butoane: outlined, border 2px, raza 26px (Button/Tag), sageata -- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-sans); font-weight:500; font-size:14px;
  padding:8px 16px; border-radius:var(--radius-button);
  border:2px solid transparent; cursor:pointer; transition:.18s ease;
  white-space:nowrap; letter-spacing:-0.02em;
}
.btn-primary{ background:var(--brand-blue); border-color:var(--brand-blue); color:#fff; }
.btn-primary:hover{ background:var(--brand-blue-hover); border-color:var(--brand-blue-hover); }
.btn-ghost-dark{ background:transparent; color:var(--text-on-dark); border-color:var(--pure-white); }
.btn-ghost-dark:hover{ background:rgba(255,255,255,.08); }
.btn-ghost-light{ background:transparent; color:var(--text-on-light); border-color:var(--near-black); }
.btn-ghost-light:hover{ background:rgba(0,0,0,.05); }

/* -- badge/pill: raza 999px, padding 4px 12px, 14px/500 -- */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-sans); font-size:14px; font-weight:500;
  letter-spacing:-0.02em;
  padding:4px 12px; border-radius:var(--radius-pill);
  background:var(--brand-blue-soft); color:var(--brand-blue-hover);
}
/* Calculix.ro — layout comun (header, hero, sectiuni, footer) */

/* ============ HEADER — transparent peste hero, opac dupa scroll ============ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .35s ease, border-color .35s ease, backdrop-filter .35s ease, transform .3s ease;
}
.site-header.is-hidden{ transform:translateY(-100%); }
.site-header.is-scrolled{
  background:rgba(15,42,74,.90);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--ink-line);
}

/* -- varianta pt. pagini cu hero deschis la culoare (tot site-ul, exceptand homepage) --
   text dark implicit, fara nevoie de text-shadow; devine identica cu varianta
   normala (text alb) automat dupa scroll, quando fundalul e oricum dark. */
.site-header.is-light:not(.is-scrolled) .main-nav a{ color:var(--text-on-light); text-shadow:none; }
.site-header.is-light:not(.is-scrolled) .main-nav a:hover,
.site-header.is-light:not(.is-scrolled) .main-nav a.is-active{ color:var(--brand-blue); }
.site-header.is-light:not(.is-scrolled) .header-cta{ color:var(--text-on-light); text-shadow:none; }
.site-header.is-light:not(.is-scrolled) .mobile-nav-toggle{ background:var(--paper-alt); }
.site-header.is-light:not(.is-scrolled) .mobile-nav-toggle span{ background:var(--text-on-light); }

/* ============ REVEAL — fade+slide la incarcare si la scroll ============ */
.reveal{
  opacity:0; transform:translateY(20px);
  transition:opacity .5s ease-out, transform .5s ease-out;
  transition-delay:var(--reveal-delay, 0s);
  will-change:transform, opacity;
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* -- hover: lift subtil pe elemente interactive, transform (nu box-shadow) -- */
.cat-card, .blog-card-img, .about-image, .services-visual{ will-change:transform; }
.blog-card-img, .about-image{ transition:transform .4s ease-out; }
.blog-card:hover .blog-card-img{ transform:scale(1.02); }
.site-header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:100px; padding-inline:var(--gutter);
}
.brand{ display:flex; align-items:center; background:#fff; padding:8px 14px; border-radius:var(--radius-pill); }
.brand img{ height:34px; width:auto; display:block; }
.header-menu{ display:flex; align-items:center; gap:40px; }
.main-nav{ display:flex; gap:40px; }
.main-nav a{
  font-family:var(--font-mono); font-size:12px; font-weight:600; color:#fff;
  text-transform:uppercase; letter-spacing:.05em;
  transition:.15s; text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.main-nav a:hover, .main-nav a.is-active{ color:#fff; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:2px; }
.header-cta{
  font-family:var(--font-mono); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  color:#fff; display:flex; align-items:center; gap:8px; text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.header-cta::after{ content:'→'; transition:transform .15s; }
.header-cta:hover::after{ transform:translateX(3px); }

/* -- meniu mobil: hamburger + panou dropdown -- */
.mobile-nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; background:rgba(255,255,255,.14); border:none; border-radius:10px;
  cursor:pointer; padding:0;
}
.mobile-nav-toggle span{ width:18px; height:2px; background:#fff; margin-inline:auto; transition:.25s; }
.site-header.is-nav-open .mobile-nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.site-header.is-nav-open .mobile-nav-toggle span:nth-child(2){ opacity:0; }
.site-header.is-nav-open .mobile-nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:860px){
  .mobile-nav-toggle{ display:flex; }
  .header-menu{
    position:fixed; top:88px; left:0; right:0; bottom:0;
    background:rgba(15,42,74,.97); backdrop-filter:blur(10px);
    flex-direction:column; align-items:flex-start; gap:0;
    padding:24px var(--gutter); overflow-y:auto;
    transform:translateY(-12px); opacity:0; visibility:hidden;
    transition:opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .site-header.is-nav-open .header-menu{ transform:translateY(0); opacity:1; visibility:visible; }
  .main-nav{ flex-direction:column; gap:4px; width:100%; }
  .main-nav a{ padding:16px 4px; width:100%; border-bottom:1px solid var(--ink-line); font-size:14px; }
  .header-cta{ margin-top:20px; }

  /* Panoul de meniu mobil (.header-menu) e MEREU pe fundal bleumarin inchis
     (rgba(15,42,74,.97), linia 79), indiferent de varianta header-ului. Dar
     regula ".is-light:not(.is-scrolled) .main-nav a" (linia 20) seteaza
     text-on-light (inchis la culoare) pe orice pagina cu header-light
     (toate paginile in afara de homepage) cat timp userul n-a scrolat inca —
     text inchis pe fundal inchis, ilizibil. Fix (13.07.2026): cand meniul e
     deschis, textul ramane mereu alb, indiferent de is-light/is-scrolled.
     Specificitate mai mare decat regula de la linia 20 (5 clase vs 4), ca sa
     castige indiferent de ordinea din fisier. */
  .site-header.is-light.is-nav-open:not(.is-scrolled) .main-nav a{ color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.5); }
  .site-header.is-light.is-nav-open:not(.is-scrolled) .main-nav a:hover,
  .site-header.is-light.is-nav-open:not(.is-scrolled) .main-nav a.is-active{ color:#fff; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:2px; }
  .site-header.is-light.is-nav-open:not(.is-scrolled) .header-cta{ color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.5); }
}

/* ============ HERO — ocupa tot ecranul, dar cu margine alba de jur imprejur ============ */
.hero-frame{
  background:var(--paper); box-sizing:border-box;
  height:100vh; height:100svh; padding:16px;
}
.hero-photo{
  margin-top:0; height:100%; width:100%;
  background-size:cover; background-position:center;
  position:relative; display:flex; flex-direction:column; justify-content:space-between;
  padding:104px 0 40px; color:#fff; overflow:hidden; border-radius:24px; box-sizing:border-box;
}
.hero-photo::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,0) 22%, rgba(10,10,10,0) 55%, rgba(10,10,10,.85) 100%);
}
.hero-photo > *{ position:relative; z-index:2; }
.hero-photo-badge{
  align-self:flex-start; margin-left:calc(var(--gutter) - 16px);
  font-family:var(--font-mono); font-size:12px; font-weight:600; color:#fff;
  background:rgba(255,255,255,.12); backdrop-filter:blur(6px);
  padding:9px 16px; border-radius:var(--radius-pill); border:1px solid rgba(255,255,255,.3);
}
.hero-photo-title{ padding-inline:calc(var(--gutter) - 16px); }
.hero-photo-title h1{ color:#fff; font-size:clamp(42px,6.5vw,88.29px); text-shadow:0 2px 12px rgba(0,0,0,.35); }
.hero-title-reg{ font-size:.35em; vertical-align:super; color:var(--accent-blue); }
.hero-title-sub{ display:block; font-size:clamp(16px,1.8vw,20px); font-weight:600; color:#fff; opacity:.85; margin-top:14px; letter-spacing:0; text-shadow:0 1px 6px rgba(0,0,0,.4); }
.hero-photo-lede{ color:rgba(255,255,255,.82) !important; max-width:560px; margin-top:20px; text-shadow:0 1px 6px rgba(0,0,0,.4); }

@media (max-width:760px){ .hero-photo{ padding-top:104px; } }

/* ============ HUB HERO — fundal alb, doua coloane, filtre tip pastila ============ */
.hub-hero{ background:var(--paper); padding-top:112px; }
.hub-crumb-row{ display:flex; align-items:center; gap:16px; padding-bottom:20px; }
.hub-crumb{ font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-on-light-muted); white-space:nowrap; }
.hub-crumb a{ color:var(--text-on-light-muted); }
.hub-crumb span{ color:var(--text-on-light); }
.hub-crumb-rule{ height:1px; background:var(--paper-line); flex:1; }

.hub-hero-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:center; padding-block:32px 40px; }
.hub-hero-grid h1{ font-size:clamp(48px,6vw,84px); color:var(--text-on-light); }
.hub-hero-grid .lede{ margin-top:20px; max-width:460px; }
.hub-hero-photo{
  aspect-ratio:4/3; border-radius:var(--radius-lg); background-size:cover; background-position:center;
}
@media (max-width:860px){
  .hub-hero-grid{ grid-template-columns:1fr; gap:24px; }
  .hub-hero-photo{ aspect-ratio:16/9; order:-1; }
}

.hub-hero-rule{ height:1px; background:var(--paper-line); }

.hub-filter-row{
  display:flex; gap:10px; padding-block:24px; overflow-x:auto;
  scrollbar-width:thin;
}
.hub-filter{
  flex-shrink:0; font-size:14px; font-weight:600; white-space:nowrap;
  padding:10px 20px; border-radius:var(--radius-pill); border:1px solid var(--paper-line);
  color:var(--text-on-light-mid); background:var(--paper-alt); transition:.15s;
}
.hub-filter:hover{ border-color:var(--brand-blue); color:var(--brand-blue); }
.hub-filter.is-active{ background:var(--brand-blue); border-color:var(--brand-blue); color:#fff; }

/* ============ DESPRE — statistici stanga, imagine dreapta ============ */
.about-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:32px; margin-top:22px; }
.about-stats{ display:flex; flex-direction:column; gap:22px; }
.about-stat{ display:flex; align-items:baseline; gap:14px; padding-bottom:18px; border-bottom:1px solid var(--paper-line); }
.about-stat .stat-num{
  font-family:var(--font-mono); font-weight:600; font-size:28px; color:var(--text-on-light); min-width:64px;
}
.about-stat .stat-plus{ color:var(--accent-blue); }
.about-stat .stat-label{ font-size:14px; color:var(--text-on-light-mid); }
.about-image{ border-radius:var(--radius-lg); background-size:cover; background-position:center; min-height:280px; }
.about-copy{ margin-top:48px; max-width:760px; }
@media (max-width:760px){ .about-grid{ grid-template-columns:1fr; } .about-image{ min-height:220px; } }

/* ============ DESPRE — declaratie mare, un singur bloc coerent ============ */
.about-section{ background:var(--paper); padding-block:96px 48px; }
.about-lines{
  margin-top:56px; padding-top:40px; border-top:1px solid var(--paper-line);
  max-width:920px; display:flex; flex-direction:column; gap:2px;
}
.about-line{
  position:relative; display:flex; align-items:baseline; gap:22px; width:fit-content; padding-bottom:10px;
  transition:opacity .5s ease-out, transform .5s ease-out;
  transition-delay:var(--reveal-delay, 0s);
}
.about-line-num{
  flex-shrink:0; font-size:15px; font-weight:700; color:var(--brand-blue);
  letter-spacing:.03em; font-variant-numeric:tabular-nums; padding-top:.55em;
}
.about-line-text{
  font-size:clamp(28px,4vw,50px); font-weight:500; letter-spacing:-0.04em; line-height:1.3;
  color:var(--text-on-light-muted);
  transition:color .7s ease-out; transition-delay:var(--reveal-delay, 0s);
}
.about-line.is-visible .about-line-text{ color:var(--text-on-light); }
.about-line::after{
  content:''; position:absolute; left:0; bottom:0; height:4px; width:100%;
  background:var(--brand-blue); border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .7s cubic-bezier(.65,0,.35,1);
  transition-delay:calc(var(--reveal-delay, 0s) + .2s);
}
.about-line.is-visible::after{ transform:scaleX(1); }
@media (max-width:640px){
  .about-line-text{ font-size:clamp(22px,7vw,32px); }
  .about-line{ gap:12px; }
  .about-line-num{ font-size:12px; padding-top:.4em; }
}

/* ============ SECTIONS ============ */
.section{ padding-block:72px; }
.section-dark{ background:var(--ink); color:var(--text-on-dark); }
.section-head{ max-width:640px; margin-bottom:56px; }
.section-head h2{ margin-top:16px; }
.section-head .lede{ margin-top:18px; }
.section-head-dark h2{ color:var(--text-on-dark); }
.section-head-row{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  flex-wrap:wrap;
}
@media (max-width:640px){ .section{ padding-block:52px; } }

/* ============ CATEGORY GRID — imagine mare, colturi rotunjite, spatiu real ============ */
/* 10 carduri pe 3 coloane: cardul 1 si 6 sunt duble-late, ca sa umple exact
   4 randuri (2+1, 1+1+1, 2+1, 1+1+1 = 10) fara nicio celula goala. */
.cat-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-3xl);
}
.cat-card{
  position:relative; background:var(--ink); color:var(--text-on-dark);
  aspect-ratio:4/5; overflow:hidden; display:flex; flex-direction:column;
  justify-content:flex-end; padding:26px; border-radius:var(--radius-lg);
}
.cat-card:nth-child(1), .cat-card:nth-child(6){ grid-column:span 2; aspect-ratio:8/5; }
.cat-card .cat-img{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transition:transform .5s ease; opacity:.9;
}
.cat-card:hover .cat-img{ transform:scale(1.05); }
.cat-card::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(10,10,10,0) 0%,
    rgba(10,10,10,.05) 25%,
    rgba(10,10,10,.45) 50%,
    rgba(10,10,10,.8) 75%,
    rgba(10,10,10,.8) 100%);
}
.cat-card > *{ position:relative; z-index:2; }
@media (max-width:900px){ .cat-card:nth-child(1), .cat-card:nth-child(6){ grid-column:span 2; aspect-ratio:4/5; } }
@media (max-width:560px){ .cat-grid{ gap:var(--sp-lg); } .cat-card:nth-child(1), .cat-card:nth-child(6){ grid-column:span 1; } }
.cat-num{ font-family:var(--font-mono); font-size:12px; font-weight:600; color:#fff; margin-bottom:auto; }
.cat-card h3{ font-size:21px; color:#fff; letter-spacing:-0.01em; }
.cat-card p{ font-size:13.5px; color:rgba(255,255,255,.82); line-height:1.5; margin-top:6px; }
.cat-count{
  margin-top:14px; font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:var(--accent-blue);
  display:inline-flex; align-items:center; gap:8px;
}
.cat-count::after{ content:'→'; transition:transform .15s; }
.cat-card:hover .cat-count::after{ transform:translateX(4px); }
@media (max-width:900px){ .cat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .cat-grid{ grid-template-columns:1fr; } }

/* ============ BLOG LISTING — spotlight + sectiuni pe categorie ============ */
.blog-hero{ background:var(--paper); padding-top:112px; padding-bottom:64px; }
.blog-spotlight{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:40px; align-items:center;
  margin-top:28px; background:var(--paper-alt); border-radius:var(--radius-lg); overflow:hidden;
}
.blog-spotlight-img{ aspect-ratio:4/3; background-size:cover; background-position:center; height:100%; }
.blog-spotlight-body{ padding:36px 40px 36px 0; }
.blog-spotlight-body h1{ font-size:clamp(24px,3vw,34px); margin-top:14px; color:var(--text-on-light); }
.blog-spotlight-body .lede{ margin-top:14px; font-size:15px; }
.blog-spotlight-links{ display:flex; flex-direction:column; gap:8px; margin-top:24px; padding-top:20px; border-top:1px solid var(--paper-line); }
.blog-spotlight-links span{ font-size:13.5px; font-weight:600; color:var(--text-on-light-mid); }
@media (max-width:860px){
  .blog-spotlight{ grid-template-columns:1fr; }
  .blog-spotlight-body{ padding:24px; }
}
.blog-cat-title{ font-size:24px; margin-bottom:28px; padding-bottom:16px; border-bottom:1px solid var(--paper-line); }

/* ============ FEATURE LIST (numbered, dark, tipografie mare) ============ */
.feature-list{ list-style:none; margin:0; padding:0; }
.feature-list li{
  display:grid; grid-template-columns:120px 1fr; gap:28px; padding-block:44px;
  border-top:1px solid var(--ink-line); align-items:baseline;
}
.feature-list li:last-child{ border-bottom:1px solid var(--ink-line); }
.feature-num{
  font-family:var(--font-mono); font-size:clamp(32px,4vw,52px); font-weight:500;
  color:var(--ink-line); flex-shrink:0; line-height:1;
  transition:color .2s;
}
.feature-list li:hover .feature-num{ color:var(--accent-warm); }
.feature-list h3{ color:var(--text-on-dark); font-size:clamp(20px,2.2vw,26px); }
.feature-list p{ color:var(--text-on-dark-muted); margin-top:10px; font-size:15.5px; line-height:1.65; max-width:620px; }
@media (max-width:640px){ .feature-list li{ grid-template-columns:1fr; gap:10px; } }

/* ============ SERVICII — lista stanga, descriere+vizual dreapta ============ */
.services-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; margin-top:22px; }
.services-left h2{ color:var(--text-on-dark); font-size:clamp(28px,3.4vw,40px); margin-bottom:28px; }
.feature-list-compact{ list-style:none; margin:0 0 32px; padding:0; display:flex; flex-direction:column; }
.feature-list-compact li{
  display:flex; align-items:center; gap:16px; padding-block:16px;
  border-top:1px solid var(--ink-line); color:var(--text-on-dark); font-size:15.5px; font-weight:600;
}
.feature-num-sm{ font-family:var(--font-mono); font-size:13px; color:var(--accent-blue); }
.services-right{ display:flex; flex-direction:column; gap:28px; }
.services-visual{
  border-radius:var(--radius-lg); background-size:cover; background-position:center;
  min-height:260px; border:1px solid var(--ink-line);
}
@media (max-width:860px){ .services-grid{ grid-template-columns:1fr; } }

/* ============ BLOG GRID / CARDS ============ */
.blog-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:26px; }

/* ============ BLOG CAROUSEL — slide automat, bucla continua ============ */
.blog-carousel{ overflow:hidden; margin-inline:calc(var(--gutter) * -1); }
.blog-track{
  display:flex; gap:26px; width:max-content;
  padding-inline:var(--gutter);
  animation:blog-scroll 30s linear infinite;
}
.blog-carousel:hover .blog-track{ animation-play-state:paused; }
@keyframes blog-scroll{ from{ transform:translateX(0); } to{ transform:translateX(calc(-50% - 13px)); } }
.blog-carousel .blog-card{ width:min(380px, 82vw); flex-shrink:0; }
@media (prefers-reduced-motion: reduce){ .blog-track{ animation:none; } }

.blog-card{ display:flex; flex-direction:column; gap:12px; }
.blog-card-img{
  aspect-ratio:16/10; border-radius:var(--radius-md); background-size:cover; background-position:center;
  background-color:var(--ink);
}
.blog-card .pill{ align-self:flex-start; margin-top:4px; }
.blog-card h3{ font-size:19px; line-height:1.3; margin-top:2px; }
.blog-card p{ font-size:14.5px; color:var(--text-on-light-mid); line-height:1.5; }

/* ============ CTA BAND (simplu, folosit pe pagini interioare) ============ */
.cta-band{ background:var(--brand-blue); color:#fff; padding-block:64px; }
.cta-band-inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cta-band h2{ color:#fff; font-size:clamp(26px,3vw,36px); }
.cta-band .btn-primary{ background:var(--near-black); border-color:var(--near-black); }
.cta-band .btn-primary:hover{ background:#000; border-color:#000; }

/* ============ PROCES ============ */
.process-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--paper-line); border-top:1px solid var(--paper-line); margin-top:48px;
}
.process-step{ background:var(--paper); padding:32px 24px; }
.process-step h3{ font-size:19px; margin-top:16px; }
.process-step p{ font-size:14px; color:var(--text-on-light-mid); margin-top:10px; line-height:1.6; }
@media (max-width:860px){ .process-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .process-grid{ grid-template-columns:1fr; } }

/* ============ BENEFICII ============ */
.benefits-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:48px; }
.benefit-img{ aspect-ratio:1/1; border-radius:var(--radius-lg); background-size:cover; background-position:center; margin-bottom:20px; }
.benefit-card h3{ color:var(--text-on-dark); font-size:20px; }
.benefit-card p{ color:var(--text-on-dark-muted); font-size:14.5px; margin-top:10px; line-height:1.6; }
@media (max-width:760px){ .benefits-grid{ grid-template-columns:1fr; } }

/* ============ CTA BAND CU FORMULAR ============ */
.cta-band-form{ background:var(--near-black); color:var(--text-on-dark); }
.cta-band-form-inner{
  display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:0;
  padding-block:0;
}
.cta-band-form-inner > div:first-child{ padding-block:80px; padding-right:48px; }
.cta-band-form h2{ color:var(--text-on-dark); margin-top:14px; font-size:clamp(28px,3.4vw,42px); }
.cta-form{ display:flex; flex-direction:column; gap:14px; margin-top:32px; max-width:420px; }
.cta-form-row{ display:flex; gap:10px; flex-wrap:wrap; }
.cta-form-row input{
  flex:1; min-width:200px; padding:12px 18px; border-radius:var(--radius-button);
  border:2px solid var(--ink-line); background:transparent; color:var(--text-on-dark);
  font-family:var(--font-sans); font-size:14px;
}
.cta-form-row input::placeholder{ color:var(--text-on-dark-muted); }
.cta-form-consent{ display:flex; align-items:flex-start; gap:10px; font-size:12.5px; color:var(--text-on-dark-muted); line-height:1.5; }
.cta-form-consent input{ margin-top:3px; flex-shrink:0; }
.cta-form-consent a{ color:var(--brand-blue); }
.cta-form-photo{ height:100%; min-height:360px; background-size:cover; background-position:center; }
@media (max-width:860px){
  .cta-band-form-inner{ grid-template-columns:1fr; }
  .cta-band-form-inner > div:first-child{ padding-block:56px 32px; padding-right:0; }
  .cta-form-photo{ min-height:260px; }
}

/* ============ FOOTER CREDIT ============ */
.footer-credit{
  margin-top:24px; padding-top:20px; border-top:1px solid var(--ink-line-soft);
  font-size:12.5px; color:var(--text-on-dark-muted); text-align:center;
}
.footer-credit a{ color:var(--text-on-dark-muted); text-decoration:underline; text-underline-offset:2px; }
.footer-credit a:hover{ color:var(--text-on-dark); }

/* ============ FOOTER ============ */
.site-footer{ background:var(--ink); color:var(--text-on-dark); padding-block:72px 32px; }
.footer-top{
  display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px;
  padding-bottom:56px; border-bottom:1px solid var(--ink-line);
}
.footer-brand .brand{ font-size:22px; }
.footer-brand-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.footer-slogan{ font-size:13px; font-weight:500; color:var(--text-on-dark-muted); letter-spacing:-0.01em; }
.footer-tagline{ color:var(--text-on-dark-muted); margin-top:14px; font-size:14.5px; max-width:280px; line-height:1.6; }
.footer-social{ display:flex; gap:12px; margin-top:24px; }
.footer-social a{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--ink-line);
  display:flex; align-items:center; justify-content:center; transition:.15s;
}
.footer-social a:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.24); }
.footer-social svg{ width:16px; height:16px; }
.footer-col h4{
  font-family:var(--font-mono); font-size:11.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-on-dark-muted); margin-bottom:16px;
}
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:14px; color:var(--text-on-dark); opacity:.82; transition:.15s; }
.footer-col a:hover{ opacity:1; color:var(--accent-blue); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding-top:28px; font-size:13px; color:var(--text-on-dark-muted);
}
.footer-bottom a{ color:var(--text-on-dark-muted); }
.footer-bottom a:hover{ color:var(--text-on-dark); }
@media (max-width:900px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-top{ grid-template-columns:1fr; } }

/* ============ BREADCRUMB ============ */
.breadcrumb{
  font-size:13px; color:var(--text-on-light-muted); display:flex; gap:8px; align-items:center;
  margin-bottom:20px;
}
.breadcrumb a{ color:var(--text-on-light-muted); }
.breadcrumb a:hover{ color:var(--accent-blue); }

/* ============ PAGE HERO (calculator/hub/blog pages) ============ */
.page-hero{ background:var(--ink); color:var(--text-on-dark); padding-block:140px 56px; }
.page-hero h1{ font-size:clamp(32px,4.2vw,50px); margin-top:16px; }
.page-hero .lede{ color:var(--text-on-dark-muted); margin-top:18px; max-width:680px; }

/* ============ FAQ ACCORDION (native <details>) ============ */
.faq-list{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--paper-line); }
.faq-item{ border-bottom:1px solid var(--paper-line); }
.faq-item summary{
  list-style:none; cursor:pointer; padding:22px 4px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-weight:700; font-size:16px; color:var(--text-on-light);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'+'; font-family:var(--font-mono); font-size:20px; color:var(--accent-blue);
  flex-shrink:0; transition:transform .2s;
}
.faq-item[open] summary::after{ content:'–'; }
.faq-item .faq-answer{ padding:0 4px 22px; color:var(--text-on-light-mid); font-size:15px; line-height:1.65; max-width:760px; }

/* ============ HUB PAGE — imagine mare stanga, lista scrollabila dreapta ============ */
.hub-jump{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.hub-jump a{
  font-size:13px; font-weight:600; padding:8px 16px; border-radius:var(--radius-pill);
  border:1px solid var(--ink-line); color:var(--text-on-dark-muted);
}
.hub-jump a:hover{ background:rgba(255,255,255,.06); color:var(--text-on-dark); }
.hub-list{ padding-block:64px; display:flex; flex-direction:column; gap:32px; }
.hub-category{ scroll-margin-top:96px; }

.hub-cat-grid{
  display:grid; grid-template-columns:1fr 1fr;
  border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--paper-line);
}
.hub-cat-visual{
  position:relative; min-height:460px; background-size:cover; background-position:center;
  display:flex; align-items:flex-end; padding:36px; color:#fff;
}
.hub-cat-visual::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,.15) 40%, rgba(10,10,10,.55) 68%, rgba(10,10,10,.85) 100%);
}
.hub-cat-visual-inner{ position:relative; z-index:2; }
.hub-cat-visual-inner h2{ color:#fff; font-size:clamp(24px,2.6vw,32px); }
.hub-cat-visual-inner p{ color:rgba(255,255,255,.82); margin-top:10px; font-size:14.5px; max-width:360px; line-height:1.55; }
.hub-cat-visual-inner .cat-count{ margin-top:16px; color:#fff; }
.hub-cat-visual-inner .cat-count::after{ display:none; }

.hub-cat-list{
  background:#fff; padding:28px 28px 28px 32px; max-height:460px; overflow-y:auto;
  display:flex; flex-direction:column;
}
.hub-cat-list a{
  font-size:15px; font-weight:600; letter-spacing:-0.02em; padding:16px 4px;
  border-bottom:1px solid var(--paper-line);
  transition:.18s ease; display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-inline:-16px; padding-inline:16px; border-radius:var(--radius-sm);
}
.hub-cat-list a span.hub-cat-arrow{
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper-alt); color:var(--text-on-light-muted);
  font-size:13px; transition:.18s ease;
}
.hub-cat-list a:last-child{ border-bottom:none; }
.hub-cat-list a:hover{ background:var(--brand-blue-soft); color:var(--brand-blue-hover); }
.hub-cat-list a:hover span.hub-cat-arrow{ background:var(--brand-blue); color:#fff; transform:translateX(2px); }

@media (max-width:900px){
  .hub-cat-grid{ grid-template-columns:1fr; }
  .hub-cat-visual{ min-height:260px; }
  .hub-cat-list{ max-height:340px; }
}

/* ============ CALCULATOR PAGE CONTENT ============
   Randeaza VERBATIM continutul "explainer" generat de pluginul Calculix
   (calculix_explainer_{slug}()), preluat neschimbat din pagina live la migrare.
   Clasele cx-expl-* sunt ale PLUGIN-ULUI (definite si in calculix.css cu shadow-uri
   si culori proprii) — regulile de mai jos le suprascriu ca sa se alinieze cu design
   system-ul noii teme (fara box-shadow, culorile/radius-urile brandului). Ordinea
   de incarcare conteaza: calculix.css TREBUIE sa fie inaintea lui shared.css in
   <head>, altfel shared.css nu mai castiga cascada. */
.calc-shell{ padding-block:56px; }
.cx-expl-section{ margin-top:44px; margin-bottom:0; }
.cx-expl-section:first-child{ margin-top:64px; }
.cx-expl-title{
  font-size:26px; font-weight:600; color:var(--text-on-light); letter-spacing:-0.02em;
  margin-bottom:16px; padding-left:0; border-left:none;
}
/* max-width doar pe TEXTUL de citit (paragrafe lungi tip "Ce s-a schimbat..."),
   nu pe sectiune/grid-ul de carduri intreg — linii prea lungi (fara limita,
   textul se intindea pe toata latimea .wrap, >1000px) sunt greu de citit.
   ~75-85 caractere/linie la 15.5px = confortabil. */
.cx-expl-body{ color:var(--text-on-light-mid); font-size:15.5px; line-height:1.7; max-width:760px; }
.cx-expl-card .cx-expl-body{ max-width:none; }
/* flex (nu grid) deliberat: cu grid, un rand incomplet (ex. 9 carduri pe 4
   coloane = ultimul rand cu 1 card) lasa coloanele goale langa el, fiindca
   grid-template-columns e fix pe TOATE randurile. Cu flex-wrap, cardurile
   ramase pe ultimul rand cresc (flex-grow) sa umple spatiul liber.
   align-items:flex-start OBLIGATORIU — implicit flex intinde (stretch)
   cardurile dintr-un rand la inaltimea celui mai inalt (ex. un card cu 2
   paragrafe langa carduri cu 1 paragraf), lasand spatiu gol vizibil in
   cardurile mai scurte. Acelasi bug ca la vechiul grid, fixat atunci cu
   align-items:start — s-a pierdut la conversia grid->flex, retrebuie pus
   explicit aici. */
.cx-expl-grid{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:10px; margin-top:12px; }
.cx-expl-card{
  background:var(--paper-alt); border:none; border-top:none; border-radius:var(--radius-md);
  padding:22px; box-shadow:none; transition:none;
  flex:1 1 240px;
}
.cx-expl-card:hover{ box-shadow:none; transform:none; }
.cx-expl-card-title{ font-size:15px; font-weight:600; color:var(--text-on-light); margin-bottom:8px; }
.cx-expl-card p{ font-size:14px; color:var(--text-on-light-mid); line-height:1.65; }
.cx-expl-list{ padding-left:20px; color:var(--text-on-light-mid); }
.cx-expl-list li{ font-size:15.5px; line-height:1.8; margin-bottom:8px; }
.cx-expl-list li::marker{ color:var(--brand-blue); }
.cx-expl-list a{ color:var(--brand-blue); text-decoration:none; border-bottom:1px solid var(--brand-blue-soft); }
.cx-expl-list a:hover{ border-bottom-color:var(--brand-blue); }

/* -- Linkuri in text (articole blog, explainer calculatoare, raspunsuri FAQ):
   subliniate implicit, nu doar la hover. Underline e semnalul recomandat
   pentru linkuri in text continuu (WCAG 1.4.1 / conventie UX), spre
   deosebire de bold, care in text de proza citeste ca accent/importanta,
   nu ca link. Culoarea ramane cea a textului (inherit) in starea normala,
   albastru doar la hover -- */
.article-body-inner a,
.cx-explainer a,
.faq-answer a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}
.article-body-inner a:hover,
.cx-explainer a:hover,
.faq-answer a:hover{ color:var(--brand-blue-hover); }

/* ============ CONTACT ============ */
.contact-hero{ background:var(--paper); padding-top:112px; padding-bottom:80px; }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; margin-top:32px; }
.contact-grid h1{ margin-top:18px; font-size:clamp(42px,5.5vw,68px); }
.contact-banner{ height:220px; background-size:cover; background-position:center; }
@media (max-width:760px){ .contact-banner{ height:140px; } }
.contact-social{ display:flex; gap:20px; margin-top:20px; padding-top:20px; border-top:1px solid var(--paper-line); }
.contact-social a{ font-size:14px; font-weight:600; color:var(--text-on-light-mid); }
.contact-social a:hover{ color:var(--brand-blue); }

.contact-form{ background:var(--paper-alt); border-radius:var(--radius-lg); padding:32px; display:flex; flex-direction:column; gap:18px; }
.contact-status{
  font-size:14px; font-weight:600; line-height:1.5;
  padding:14px 16px; border-radius:var(--radius-sm);
}
/* text mai inchis decat --success/--danger (nu culoarea de baza) pentru contrast
   mai bun pe fundalul "soft" — acelasi pattern ca .cx-msg-success/error din calculix.css */
.contact-status-success{ background:var(--success-soft); color:#065F46; }
.contact-status-error{ background:var(--danger-soft); color:#991B1B; }
.contact-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.contact-field{ display:flex; flex-direction:column; gap:8px; }
.contact-field label{ font-size:13px; font-weight:600; color:var(--text-on-light-mid); }
.contact-field input, .contact-field select, .contact-field textarea{
  font-family:var(--font-sans); font-size:15px; padding:13px 16px;
  border-radius:var(--radius-sm); border:1px solid var(--paper-line); background:#fff;
  color:var(--text-on-light); resize:vertical;
}
.contact-field input:focus, .contact-field select:focus, .contact-field textarea:focus{
  outline:none; border-color:var(--brand-blue);
}
.contact-checkbox{ display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--text-on-light-muted); line-height:1.5; }
.contact-checkbox input{ margin-top:3px; flex-shrink:0; }
.contact-checkbox a{ color:var(--brand-blue); }
@media (max-width:860px){
  .contact-grid{ grid-template-columns:1fr; gap:32px; }
  .contact-form-row{ grid-template-columns:1fr; }
}

.contact-reasons{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.contact-reason{ padding:28px; background:var(--paper-alt); border-radius:var(--radius-lg); }
.contact-reason h3{ font-size:19px; }
.contact-reason p{ margin-top:10px; font-size:14.5px; color:var(--text-on-light-mid); line-height:1.6; }
@media (max-width:760px){ .contact-reasons{ grid-template-columns:1fr; } }

/* ============ DESPRE (About) ============ */
.about-hero{ background:var(--paper); padding-top:112px; padding-bottom:56px; }
.about-hero-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center; margin-top:28px; }
.about-hero-grid h1{ margin-top:16px; font-size:clamp(34px,4.4vw,54px); color:var(--text-on-light); }
.about-hero-photo{ aspect-ratio:4/3; border-radius:var(--radius-lg); background-size:cover; background-position:center; overflow:hidden; }
/* Varianta WP: wp:post-featured-image randeaza <figure class="about-hero-photo"><img></figure> —
   clasa e pe figure, nu pe img, deci border-radius fara overflow:hidden pe container
   nu taia colturile imaginii (imaginea "iese" din chenarul rotunjit, colturi ascutite vizual). */
img.about-hero-photo, .about-hero-photo img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
@media (max-width:860px){ .about-hero-grid{ grid-template-columns:1fr; gap:24px; } .about-hero-photo{ order:-1; aspect-ratio:16/9; } }

.about-story-grid{ display:grid; grid-template-columns:0.7fr 1fr; gap:56px; }
@media (max-width:860px){ .about-story-grid{ grid-template-columns:1fr; gap:24px; } }

.despre-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--paper-line); border:1px solid var(--paper-line); margin-top:56px; }
.despre-stat-box{ background:#fff; padding:28px 20px; display:flex; flex-direction:column; gap:8px; }
.despre-stat-box .stat-num{ font-family:var(--font-mono); font-weight:600; font-size:32px; color:var(--text-on-light); }
.despre-stat-box .stat-plus{ color:var(--brand-blue); }
.despre-stat-box .stat-label{ font-size:13px; color:var(--text-on-light-muted); }
@media (max-width:640px){ .despre-stats{ grid-template-columns:1fr 1fr; } }

.about-values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--ink-line); border-top:1px solid var(--ink-line); margin-top:48px; }
.about-value{ background:var(--near-black); padding:32px 28px; }
.about-value h3{ color:var(--text-on-dark); font-size:22px; }
.about-value-sub{ color:var(--brand-blue); font-size:13px; font-weight:600; margin-top:6px; }
.about-value p:last-child{ color:var(--text-on-dark-muted); font-size:14.5px; margin-top:14px; line-height:1.65; }
@media (max-width:860px){ .about-values-grid{ grid-template-columns:1fr; } }

/* ============ ARTICLE (blog single) — sidebar cu populare + related ============ */
.article-layout{ display:grid; grid-template-columns:1fr 320px; gap:56px; align-items:start; padding-bottom:80px; }
.article-meta{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; font-size:13px; margin-top:16px; }
.article-meta-light{ color:var(--text-on-light-muted); }
/* Varianta WP: autor/data/timp-citire sunt blocuri native separate (fara "·" scrise manual) — separatorul e generat prin CSS */
.article-meta-dynamic > *{ margin:0; }
.article-meta-dynamic > *:not(:first-child){ display:flex; align-items:center; gap:14px; }
.article-meta-dynamic > *:not(:first-child)::before{ content:"·"; }
.article-cover{ margin-top:32px; aspect-ratio:16/9; background-size:cover; background-position:center; border-radius:var(--radius-lg); }

/* -- Bara de distribuire articol (calculix_article_header) — pusa intre
   meta si imaginea de copertina, ca sa fie vizibila imediat, fara sa
   concureze cu hero-ul mare de sub ea -- */
.article-share{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:18px; }
.article-share-label{ font-size:12.5px; font-weight:600; color:var(--text-on-light-muted); margin-right:2px; }
.article-share-btn{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--paper-line);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background:var(--pure-white); color:var(--text-on-light-mid); cursor:pointer;
  transition:background .15s, border-color .15s, color .15s, transform .15s;
}
.article-share-btn svg{ width:16px; height:16px; }
.article-share-btn:hover{
  background:var(--brand-blue-soft); border-color:var(--brand-blue); color:var(--brand-blue-hover);
  transform:translateY(-1px);
}
.article-share-btn.is-copied{ background:var(--success-soft); border-color:var(--success); color:var(--success); }
/* Pe mobil, distribuirea (in special WhatsApp) e mai degraba regula decat
   exceptia -- pastram tintele de atins la fel de mari, nu le micsoram. */
@media (max-width:640px){ .article-share-btn{ width:38px; height:38px; } .article-share{ gap:10px; } }

/* -- TOC colapsabil "Sari la o sectiune" (filtru the_content, vezi functions.php)
   -- accordion nativ <details>, fara JS, acelasi tipar ca .faq-item -- */
.article-toc{
  margin-top:28px; margin-bottom:8px;
  border:1px solid var(--paper-line); border-radius:var(--radius-lg);
  background:var(--off-white-surface); overflow:hidden;
}
.article-toc summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px;
  padding:14px 18px; font-family:var(--font-mono); font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:var(--text-on-light);
}
.article-toc summary::-webkit-details-marker{ display:none; }
.article-toc-icon{ display:inline-flex; color:var(--brand-blue); font-size:16px; transition:transform .2s; }
.article-toc[open] .article-toc-icon{ transform:rotate(90deg); }
.article-toc-label{ flex:1; }
.article-toc-count{
  display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px;
  padding:0 6px; border-radius:var(--radius-pill); background:var(--brand-blue-soft);
  color:var(--brand-blue-hover); font-size:11.5px; font-weight:700;
}
.article-toc-list{ list-style:none; margin:0; padding:2px 10px 14px; display:flex; flex-direction:column; gap:2px; }
.article-toc-list a{
  display:flex; align-items:center; gap:8px; padding:9px 8px; border-radius:var(--radius-md);
  font-size:14px; font-weight:500; color:var(--text-on-light-mid); text-decoration:none;
  transition:background .15s, color .15s;
}
.article-toc-list a::before{ content:"›"; color:var(--brand-blue); font-weight:700; flex-shrink:0; }
.article-toc-list a:hover{ background:var(--brand-blue-soft); color:var(--brand-blue-hover); }

.article-body-inner{ max-width:100%; margin-top:40px; display:flex; flex-direction:column; gap:20px; }
.article-body-inner p{ font-size:16.5px; line-height:1.75; color:var(--text-on-light-mid); }
.article-body-inner h2{ font-size:24px; margin-top:8px; color:var(--text-on-light); }

/* -- Tabele in continutul articolelor (.cxb-table-wrap > table): profesionale,
   avansate, responsive pe mobil prin scroll orizontal in container-ul propriu
   (nu se stricheaza continutul paginii), fara sa depinda de stilurile implicite
   ale browserului -- */
.article-body-inner .cxb-table-wrap{
  margin:4px 0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--paper-line);
  border-radius:var(--radius-md);
  background:var(--pure-white);
  box-shadow:0 1px 2px rgba(20,20,20,.04);
}
.article-body-inner .cxb-table-wrap table{
  width:100%;
  min-width:480px;
  border-collapse:collapse;
  font-family:var(--font-sans);
  font-size:15px;
}
.article-body-inner .cxb-table-wrap th{
  background:var(--near-black);
  color:var(--text-on-dark);
  text-align:left;
  font-weight:600;
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:.03em;
  padding:14px 18px;
}
.article-body-inner .cxb-table-wrap th:first-child{ border-top-left-radius:var(--radius-md); }
.article-body-inner .cxb-table-wrap th:last-child{ border-top-right-radius:var(--radius-md); }
.article-body-inner .cxb-table-wrap td{
  padding:14px 18px;
  color:var(--text-on-light-mid);
  border-bottom:1px solid var(--paper-line);
  line-height:1.55;
  vertical-align:top;
}
.article-body-inner .cxb-table-wrap td:first-child{ font-weight:600; color:var(--text-on-light); }
.article-body-inner .cxb-table-wrap tbody tr:last-child td{ border-bottom:none; }
.article-body-inner .cxb-table-wrap tbody tr:nth-child(even) td{ background:var(--off-white-surface); }
.article-body-inner .cxb-table-wrap tbody tr:hover td{ background:var(--brand-blue-soft); }
@media (max-width:640px){
  .article-body-inner .cxb-table-wrap table{ font-size:13.5px; min-width:420px; }
  .article-body-inner .cxb-table-wrap th, .article-body-inner .cxb-table-wrap td{ padding:11px 14px; }
}

.article-related{ margin-top:64px; padding-top:40px; border-top:1px solid var(--paper-line); }
.article-related .section-head-row{ margin-bottom:var(--sp-4xl); }

.article-sidebar{ position:sticky; top:112px; display:flex; flex-direction:column; gap:28px; }
.article-search{ display:flex; border:1px solid var(--paper-line); border-radius:var(--radius-sm); overflow:hidden; }
.article-search input{ flex:1; border:none; padding:12px 14px; font-family:var(--font-sans); font-size:14px; }
.article-search input:focus{ outline:none; }
.article-search button{ background:var(--near-black); color:#fff; border:none; padding:0 18px; cursor:pointer; }
.article-sidebar-title{ font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--text-on-light-muted); }
.article-sidebar-list{ display:flex; flex-direction:column; gap:16px; }
.article-sidebar-item{ display:flex; gap:14px; }
.article-sidebar-thumb{ width:76px; height:76px; flex-shrink:0; border-radius:var(--radius-sm); background-size:cover; background-position:center; }
.article-sidebar-item h5{ font-size:14px; font-weight:700; line-height:1.4; margin-top:2px; color:var(--text-on-light); }
.article-sidebar-item:hover h5{ color:var(--brand-blue); }
@media (max-width:960px){ .article-layout{ grid-template-columns:1fr; } .article-sidebar{ position:static; } }

/* ============ BLOG (pagina /blog/) — randat de shortcode-ul [calculix_blog_home]
   (tema, nu plugin), spotlight + sectiuni pe categorie sau grid+paginare per categorie ============ */
/* max-width+padding-inline explicit (13.07.2026, fix bug articole lipite de
   marginea ecranului pe mobil) — .cxb-wrap e randat direct de shortcode-ul
   [calculix_blog_home] in post_content, prin blocul nativ wp:post-content,
   FARA sa fie el insusi in interiorul unui .wrap (care da padding-inline pe
   restul site-ului). Layout-ul "constrained" din theme.json (contentSize
   1240px) doar centreaza cu margin:auto cand viewport-ul e mai lat decat
   1240px — sub acel prag (adica pe orice mobil, aproape intotdeauna),
   continutul umple 100% latime FARA padding, deci cardurile ating marginea
   ecranului. Fix: acelasi max-width/gutter ca .wrap, aplicat direct pe
   .cxb-wrap, independent de layout-ul FSE din jur. */
.cxb-wrap{ max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); padding-block:152px 80px; }
.cxb-hero{ max-width:720px; margin:0 auto; text-align:center; }
.cxb-crumb{ font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-on-light-muted); margin-bottom:16px; }
.cxb-crumb a{ color:var(--text-on-light-muted); }
.cxb-crumb span{ color:var(--text-on-light); }
.cxb-hero-title{ font-size:clamp(34px,4.4vw,54px); font-weight:600; letter-spacing:-0.04em; color:var(--text-on-light); }
.cxb-hero-sub{ margin-top:16px; font-size:16.5px; color:var(--text-on-light-mid); line-height:1.6; }

/* -- spotlight: cel mai recent articol, banner mare -- */
.cxb-spotlight{
  display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center;
  margin-top:64px; padding-bottom:56px; border-bottom:1px solid var(--paper-line);
}
.cxb-spotlight-img{ aspect-ratio:4/3; border-radius:var(--radius-lg); background-size:cover; background-position:center; background-color:var(--ink); }
.cxb-spotlight-body h2{ margin-top:14px; font-size:clamp(24px,2.8vw,34px); line-height:1.2; color:var(--text-on-light); }
.cxb-spotlight-body p{ margin-top:14px; font-size:15.5px; color:var(--text-on-light-mid); line-height:1.6; }
@media (max-width:860px){ .cxb-spotlight{ grid-template-columns:1fr; } }

/* -- sectiune per categorie -- */
.cxb-cat-section{ margin-top:64px; }
.cxb-cat-section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:24px; }
.cxb-cat-section-head h2{ font-size:24px; color:var(--text-on-light); }
.cxb-view-all{ font-size:13px; font-weight:600; color:var(--brand-blue); white-space:nowrap; }
.cxb-view-all:hover{ color:var(--brand-blue-hover); }

.cxb-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px 28px; margin-top:12px; }
.cxb-card{ display:flex; flex-direction:column; }
.cxb-card-img-link{ position:relative; display:block; }
.cxb-card-img{
  width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--radius-md);
  background-color:var(--ink); display:block;
}
.cxb-card-img-placeholder{ display:block; aspect-ratio:16/10; border-radius:var(--radius-md); background:var(--ink); }
.cxb-card-cat{
  position:absolute; left:14px; bottom:14px; display:inline-flex; align-items:center;
  font-family:var(--font-sans); font-size:13px; font-weight:500; letter-spacing:-0.02em;
  padding:4px 12px; border-radius:var(--radius-pill);
  background:var(--brand-blue-soft); color:var(--brand-blue-hover);
}
.cxb-card-body{ padding-top:16px; }
.cxb-card-title{ font-size:19px; line-height:1.3; font-weight:600; letter-spacing:-0.02em; }
.cxb-card-title a{ color:var(--text-on-light); }
.cxb-card-title a:hover{ color:var(--brand-blue); }
.cxb-card-excerpt{ margin-top:8px; font-size:14.5px; color:var(--text-on-light-mid); line-height:1.55; }
.cxb-card-meta{ display:flex; gap:10px; align-items:center; margin-top:12px; font-size:13px; color:var(--text-on-light-muted); }

/* -- paginare (doar pe pagina de categorie) -- */
.cxb-pagination{ display:flex; justify-content:center; gap:8px; margin-top:56px; }
.cxb-page-link{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding-inline:6px; border-radius:var(--radius-pill);
  border:1px solid var(--paper-line); font-size:14px; font-weight:600; color:var(--text-on-light-mid);
}
.cxb-page-link:hover{ border-color:var(--brand-blue); color:var(--brand-blue); }
.cxb-page-link.is-active{ background:var(--brand-blue); border-color:var(--brand-blue); color:#fff; }

@media (max-width:960px){ .cxb-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .cxb-grid{ grid-template-columns:1fr; } .cxb-hero-title{ font-size:32px; } }

/* ============ BANNER COOKIE-URI (12.07.2026) — fixed jos, ascuns pana la
   interactiune, z-index peste header (100) ca sa fie mereu deasupra ============ */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:var(--ink); box-shadow:0 -4px 24px rgba(0,0,0,.15);
  padding:20px var(--gutter);
  transform:translateY(100%); transition:transform .4s ease-out;
}
.cookie-banner.is-visible{ transform:translateY(0); }
.cookie-banner-inner{
  max-width:var(--container); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cookie-banner p{ font-size:14px; line-height:1.55; color:var(--text-on-dark-muted); margin:0; flex:1; min-width:240px; }
.cookie-banner a{ color:var(--pure-white); text-decoration:underline; text-underline-offset:2px; }
.cookie-banner .btn{ flex-shrink:0; }
/* Refuz si Accept la fel de vizibile (aceeasi clasa .btn = aceeasi
   dimensiune/padding), doar tratament de culoare diferit — cerinta GDPR ca
   refuzul sa fie la fel de usor de ales ca acceptul, nu un link mic/ascuns. */
.cookie-banner-actions{ display:flex; gap:12px; flex-shrink:0; }
@media (max-width:640px){
  .cookie-banner-inner{ flex-direction:column; align-items:stretch; }
  .cookie-banner-actions{ flex-direction:column; }
  .cookie-banner .btn{ width:100%; justify-content:center; }
}