/* ============================================================
     univrs — micro data center
     O singură variantă vizuală, deschisă: fișa produsului pe hârtie.
     Accentul este spectrul din logo: roz → violet → albastru,
     folosit ca linie fină și semn, niciodată ca fundal.
     ============================================================ */
  :root {
    color-scheme: light;

    --ground:      #F6F6FA;
    --ground-2:    #FFFFFF;
    --ground-3:    #EFEFF5;
    --ink:         #13131E;
    --ink-2:       #43435A;
    --muted:       #75758E;
    --line:        rgba(19, 19, 30, 0.13);
    --line-2:      rgba(19, 19, 30, 0.26);
    --accent:      #3B4FD4;
    --accent-2:    #7A4BA6;
    --accent-3:    #C05C9E;
    --accent-soft: rgba(59, 79, 212, 0.09);
    --pos:         #3B4FD4;
    --neg:         #9A9AB0;
    --shadow:      0 1px 2px rgba(19,19,30,.05), 0 12px 32px -12px rgba(19,19,30,.16);

    /* Fonturile alese din Settings → Design se injectează de Ghost ca
       --gh-font-heading / --gh-font-body. Dacă nu sunt setate, rămâne stiva
       de sistem, gândită pentru acest design. */
    --f-sans: var(--gh-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    --f-display: var(--gh-font-heading, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    --f-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, "Cascadia Mono", "Roboto Mono", Consolas, monospace;

    --step--1: 0.815rem;
    --step-0:  1.0625rem;
    --step-1:  1.1875rem;
    --step-2:  clamp(1.35rem, 1.1rem + 0.9vw, 1.7rem);
    --step-3:  clamp(1.85rem, 1.4rem + 2.1vw, 2.9rem);
    --step-4:  clamp(2.35rem, 1.4rem + 4vw, 4rem);

    --gut: clamp(1.25rem, 4vw, 3rem);
    --bay: clamp(4.5rem, 9vw, 8rem);
    --wrap: 1160px;
    --nav-h: 66px;
    --radius: .5rem;
  }




  /* ---------- base ---------- */
  * { box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  /* bara de sus fiind fixă, ancorele se opresc sub ea, nu în spatele ei */
  [id] { scroll-margin-top: calc(var(--nav-h) + 1.75rem); }

  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--f-sans);
    font-size: var(--step-0);
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

  h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--f-display);
    text-wrap: balance;
    letter-spacing: -0.028em;
    line-height: 1.06;
    font-weight: 640;
  }

  p { margin: 0; }
  a { color: inherit; }

  ::selection { background: var(--accent); color: var(--ground-2); }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
  }

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

  /* linia spectrală — semnul recurent, luat din logo */
  .spectrum {
    height: 1px;
    border: 0;
    margin: 0;
    background: linear-gradient(90deg, var(--accent-3), var(--accent-2) 45%, var(--accent));
    opacity: .85;
  }
  .spectrum--fade {
    background: linear-gradient(90deg, transparent, var(--accent-3) 12%, var(--accent-2) 50%, var(--accent) 82%, transparent);
  }

  .label {
    font-family: var(--f-mono);
    font-size: 0.70rem;
    letter-spacing: 0.19em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
  }

  .lede {
    font-size: var(--step-1);
    line-height: 1.58;
    color: var(--ink-2);
    max-width: 60ch;
  }

  /* ---------- nav ---------- */
  .nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--ground) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--line);
  }
  .nav-in {
    display: flex;
    align-items: center;
    gap: 2rem;
    height: var(--nav-h);
  }
  .brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    margin-right: auto;
    flex-shrink: 0;
  }
  .brand svg { width: 24px; height: 24px; display: block; flex-shrink: 0; }
  .brand-text { display: flex; align-items: baseline; }
  .brand b {
    font-size: 0.98rem;
    font-weight: 620;
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .nav-links { display: flex; gap: 1.9rem; }
  .nav-links a {
    font-family: var(--f-mono);
    font-size: 0.72rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-2);
    text-decoration: none;
    padding: .25rem 0;
    border-bottom: 1px solid transparent;
    transition: color .18s ease, border-color .18s ease;
  }
  .nav-links a:hover { color: var(--ink); border-bottom-color: var(--accent); }
  /* Meniul are etichete lungi în română; se strânge înainte să împingă
     butonul afară din bară. */
  @media (max-width: 1200px) {
    .nav-in { gap: 1.2rem; }
    .nav-links { min-width: 0; }
  }
  @media (max-width: 1080px) { .nav-links { display: none; } }

  /* ---------- butoane ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--f-mono);
    font-size: 0.74rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    text-decoration: none;
    padding: .82rem 1.35rem;
    border: 1px solid var(--ink);
    border-radius: var(--radius);
    background: var(--ink);
    color: var(--ground);
    transition: transform .16s ease, opacity .16s ease, border-color .16s ease, color .16s ease;
    white-space: nowrap;
  }
  .btn:hover { transform: translateY(-1px); opacity: .9; }
  .btn--ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--line-2);
  }
  .btn--ghost:hover { border-color: var(--accent); color: var(--accent); opacity: 1; }
  .btn .arw { transition: transform .16s ease; }
  .btn:hover .arw { transform: translateX(3px); }
  .btn-row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
  /* legătura dintre cele două acțiuni: nici buton, nici text de corp */
  .btn-or {
    font-family: var(--f-mono);
    font-size: .72rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--muted);
  }

  /* ---------- hero ---------- */
  .hero {
    position: relative;
    padding-block: clamp(3.5rem, 7vw, 6.5rem) 0;
    overflow: hidden;
  }
  .hero-in { position: relative; }

  /* Text în stânga, fotografia serverului în dreapta. Fără legendă sub ea:
     ce trebuie știut stă în plăcuța de date. */
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
  }
  .hero-grid .lede { max-width: 54ch; }

  .hero-shot {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--ground-2);
    box-shadow: var(--shadow);
  }
  .hero-shot img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* sub această lățime coloana de text devine prea îngustă pentru titlu,
     așa că fotografia trece dedesubt */
  @media (max-width: 1040px) {
    .hero-grid {
      grid-template-columns: 1fr;
      gap: clamp(2rem, 6vw, 3rem);
    }
    .hero-grid h1 { max-width: 17ch; }
    .hero-shot { max-width: 520px; }
  }

  .hero h1 {
    font-size: var(--step-4);
    margin-top: 1.4rem;
    letter-spacing: -0.042em;
  }
  .hero h1 .thin { display: block; font-weight: 300; color: var(--ink-2); }
  .hero h1 .heavy { display: block; font-weight: 680; }

  /* cifra din titlu, scrisă cu fontul tehnic și cu zeroul tăiat, ca să nu
     poată fi citită drept litera O */
  .hero h1 .nil {
    font-family: var(--f-mono);
    font-variant-numeric: slashed-zero;
    font-feature-settings: "zero" 1;
    font-weight: 700;
    font-size: inherit;
    color: var(--ink);
    letter-spacing: 0;
    margin-right: -.06em;
  }

  .hero-line { width: 96px; margin: 1.6rem 0; }
  .hero .lede { margin-bottom: 2rem; }

  /* plăcuța de date, ca pe un echipament */
  .plate {
    margin-top: clamp(3rem, 6vw, 4.5rem);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }
  .plate div {
    padding: 1.15rem 1.15rem 1.25rem;
    border-left: 1px solid var(--line);
  }
  .plate div:first-child { border-left: 0; padding-left: 0; }
  .plate dt {
    font-family: var(--f-mono);
    font-size: .64rem;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .45rem;
    display: flex;
    align-items: center;
    gap: .45rem;
  }
  /* Semnele sunt notație tehnică, nu ilustrație: un singur set, linie
     subțire, culoarea moștenită din context. Vezi și .ico mai jos. */
  .plate dd {
    margin: 0;
    font-size: .96rem;
    font-weight: 560;
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
  }
  @media (max-width: 900px) {
    .plate { grid-template-columns: repeat(2, 1fr); }
    .plate div { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
    .plate div:nth-child(-n+2) { border-top: 0; }
    .plate div:nth-child(even) { padding-left: 1.15rem; border-left: 1px solid var(--line); }
  }

  /* ---------- semne ---------- */
  /* O singură bază pentru toate pictogramele: contur, fără umplere, cu
     grosimea liniei constantă indiferent de mărime. Culoarea vine din
     context (currentColor), ca semnul să nu iasă niciodată din tonul
     textului lângă care stă. */
  .ico {
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .ico--xs { width: 14px; height: 14px; stroke-width: 1.6; }
  .ico--md { width: 19px; height: 19px; stroke-width: 1.5; }
  .ico--lg { width: 21px; height: 21px; stroke-width: 1.45; }

  /* Accentul din logo apare aici ca semn, nu ca fundal. */
  .who-cell > .ico,
  .cap-card > .ico {
    color: var(--accent);
    margin-bottom: .15rem;
  }

  /* În tabel semnul dublează culoarea, ca răspunsul să se citească
     și fără ea. */
  .yes, .no {
    display: inline-flex;
    align-items: flex-start;
    gap: .4rem;
  }
  .yes .ico, .no .ico { margin-top: .18em; }
  .no .ico { opacity: .75; }

  /* ---------- secțiune ---------- */
  .bay { padding-block: var(--bay); }
  .bay--tight { padding-top: 0; }
  .bay-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
  .bay-head .label { display: block; margin-bottom: 1.1rem; }
  .bay-head h2 { font-size: var(--step-3); max-width: 19ch; }
  .bay-head p { margin-top: 1.1rem; }

  /* ---------- de ce ---------- */
  .why {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--line);
  }
  @media (max-width: 820px) { .why { grid-template-columns: 1fr; } }
  .why > article {
    padding: 2.2rem 1.8rem 2.4rem;
    border-left: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    position: relative;
  }
  .why > article:first-child { border-left: 0; padding-left: 0; }
  @media (max-width: 820px) {
    .why > article { border-left: 0; padding-inline: 0; }
  }
  .why > article::before {
    content: "";
    position: absolute;
    top: -1px; left: 0;
    width: 44px; height: 1px;
    background: linear-gradient(90deg, var(--accent-3), var(--accent));
  }
  .why h3 { font-size: var(--step-2); margin-bottom: .85rem; }
  .why p { color: var(--ink-2); font-size: .98rem; }

  /* ---------- ce primești ---------- */
  .gets {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
  }
  @media (max-width: 780px) { .gets { grid-template-columns: 1fr; } }
  .gets article {
    background: var(--ground);
    padding: clamp(1.7rem, 3vw, 2.3rem);
    display: flex;
    flex-direction: column;
    gap: .75rem;
  }
  .gets h3 { font-size: var(--step-2); }
  .gets p { color: var(--ink-2); font-size: .97rem; }
  .gets .label { margin-bottom: .2rem; }

  /* linia timpului pentru copiile de siguranță */
  .retention { margin-top: 1rem; }
  .ret-track {
    position: relative;
    height: 46px;
    border-bottom: 1px solid var(--line-2);
  }
  .ret-track i {
    position: absolute;
    bottom: 0;
    width: 1px;
    background: var(--accent);
    opacity: .55;
  }
  .ret-legend { display: flex; justify-content: space-between; margin-top: .5rem; }
  .ret-legend span {
    font-family: var(--f-mono);
    font-size: .63rem;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--muted);
  }

  /* ---------- pași ---------- */
  .steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
  }
  @media (max-width: 880px) { .steps { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
  .step {
    background: var(--ground);
    padding: 1.7rem 1.5rem 1.9rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
  }
  .step .num {
    font-family: var(--f-mono);
    font-size: .7rem;
    letter-spacing: .16em;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
  }
  .step h3 { font-size: 1.12rem; font-weight: 620; }
  .step p { color: var(--ink-2); font-size: .92rem; line-height: 1.58; }

  /* ---------- ce poate face ---------- */
  .caps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
  }
  @media (max-width: 900px) { .caps { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px) { .caps { grid-template-columns: 1fr; } }

  /* Ultimul card se întinde peste coloanele rămase, ca să nu apară goluri
     în care s-ar vedea fundalul grilei — indiferent câte carduri sunt. */
  @media (min-width: 901px) {
    .caps article:last-child:nth-child(3n - 2) { grid-column: span 3; }
    .caps article:last-child:nth-child(3n - 1) { grid-column: span 2; }
  }
  @media (min-width: 601px) and (max-width: 900px) {
    .caps article:last-child:nth-child(2n - 1) { grid-column: span 2; }
  }
  .cap-card {
    background: var(--ground);
    padding: 1.6rem 1.6rem 1.8rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    transition: background .18s ease;
  }
  .cap-card:hover { background: var(--ground-3); }
  .cap-card b { font-size: 1.04rem; font-weight: 620; letter-spacing: -0.02em; }
  .cap-card p { font-size: .93rem; color: var(--ink-2); line-height: 1.56; }
  .caps-note { margin-top: 1.3rem; font-size: .92rem; color: var(--muted); max-width: 62ch; }

  /* ---------- comparație ---------- */
  .cmp-scroll { overflow-x: auto; border: 1px solid var(--line); }
  table.cmp {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: .93rem;
  }
  table.cmp th, table.cmp td {
    text-align: left;
    padding: .95rem 1.1rem;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
  }
  table.cmp thead th {
    font-family: var(--f-mono);
    font-size: .66rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
    background: var(--ground-3);
    border-bottom: 1px solid var(--line-2);
  }
  table.cmp thead th.is-us { color: var(--ink); }
  table.cmp tbody th { font-weight: 500; color: var(--ink-2); width: 30%; }
  table.cmp td.is-us {
    background: var(--accent-soft);
    font-weight: 560;
    color: var(--ink);
  }
  table.cmp tbody tr:last-child th, table.cmp tbody tr:last-child td { border-bottom: 0; }
  .yes { color: var(--pos); font-weight: 600; }
  .no  { color: var(--neg); }
  .cost-main { display: block; font-variant-numeric: tabular-nums; }
  .cost-sub {
    display: block;
    font-family: var(--f-mono);
    font-size: .68rem;
    letter-spacing: .06em;
    color: var(--muted);
    margin-top: .2rem;
    font-weight: 400;
  }
  .cmp-note { margin-top: 1rem; font-size: .82rem; color: var(--muted); max-width: 70ch; }

  /* ---------- calculul de pe trei ani ---------- */
  .calc {
    margin-top: clamp(2rem, 4vw, 3rem);
    border: 1px solid var(--line);
    background: var(--ground-2);
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    box-shadow: var(--shadow);
  }
  @media (max-width: 820px) { .calc { grid-template-columns: 1fr; } }
  .calc-side { padding: clamp(1.7rem, 3vw, 2.4rem); }
  .calc-side + .calc-side { border-left: 1px solid var(--line); }
  @media (max-width: 820px) {
    .calc-side + .calc-side { border-left: 0; border-top: 1px solid var(--line); }
  }
  .calc h3 { font-size: var(--step-2); margin: .9rem 0 1.2rem; }
  .calc-rows { display: flex; flex-direction: column; }
  .calc-rows div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding: .62rem 0;
    border-bottom: 1px solid var(--line);
    font-size: .93rem;
    color: var(--ink-2);
  }
  .calc-rows div span:last-child { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 540; white-space: nowrap; }
  /* sub-linie de precizare, în aceeași notă cu detaliile din tabelul de comparație */
  .calc-rows em {
    display: block;
    font-style: normal;
    font-family: var(--f-mono);
    font-size: .68rem;
    letter-spacing: .06em;
    color: var(--muted);
    margin-top: .25rem;
  }
  .calc-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.5rem;
    margin-top: 1.2rem;
  }
  .calc-total b {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 300;
    letter-spacing: -0.045em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .calc-total .who { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
  .calc-kick { margin-top: 1.1rem; font-size: .93rem; color: var(--ink-2); }
  .calc-kick strong { color: var(--ink); font-weight: 620; }

  /* ---------- pentru cine ---------- */
  /* Șase domenii, trei coloane: două rânduri pline. Cu patru coloane rămâneau
     două celule goale, în care se vedea fundalul grilei. */
  .who-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
  }
  @media (max-width: 860px) { .who-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .who-grid { grid-template-columns: 1fr; } }
  .who-cell {
    background: var(--ground);
    padding: 1.3rem 1.4rem 1.45rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
  }
  .who-cell b { font-size: .99rem; font-weight: 600; letter-spacing: -0.018em; }
  .who-cell p { font-size: .88rem; color: var(--ink-2); line-height: 1.55; }
  .who-only {
    margin-top: 1.4rem;
    padding: 1.1rem 1.3rem;
    border: 1px solid var(--line-2);
    background: var(--accent-soft);
    font-size: .93rem;
    color: var(--ink-2);
    max-width: 72ch;
  }
  .who-only strong { color: var(--ink); font-weight: 620; }

  /* ---------- configurații ---------- */
  .cfgs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
  }
  @media (max-width: 780px) { .cfgs { grid-template-columns: 1fr; } }
  .cfg {
    background: var(--ground);
    padding: 1.9rem 1.6rem 2rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
  }
  .cfg .size {
    font-size: 2.5rem;
    font-weight: 300;
    letter-spacing: -0.045em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .cfg .size em {
    font-style: normal;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--muted);
    margin-left: .2rem;
    letter-spacing: 0;
  }
  .cfg dl { margin: 1.3rem 0 0; display: flex; flex-direction: column; gap: .7rem; }
  .cfg .row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid var(--line);
    padding-top: .7rem;
  }
  .cfg dt {
    font-family: var(--f-mono);
    font-size: .66rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .cfg dd { margin: 0; font-size: .92rem; font-weight: 540; text-align: right; font-variant-numeric: tabular-nums; }

  .cfg-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 1.3rem 1.5rem;
    border: 1px solid var(--line);
    border-top: 0;
    background: var(--ground-3);
  }
  .cfg-foot p { font-size: .92rem; color: var(--ink-2); max-width: 54ch; }

  /* ---------- întrebări ---------- */
  .faq { border-top: 1px solid var(--line); }
  .faq details { border-bottom: 1px solid var(--line); }
  .faq summary {
    cursor: pointer;
    list-style: none;
    padding: 1.35rem 2.5rem 1.35rem 0;
    font-size: var(--step-1);
    font-weight: 560;
    letter-spacing: -0.02em;
    position: relative;
    transition: color .15s ease;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary:hover { color: var(--accent); }
  .faq summary::after {
    content: "+";
    position: absolute;
    right: .2rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--f-mono);
    font-size: 1.15rem;
    color: var(--muted);
  }
  .faq details[open] summary::after { content: "−"; }
  .faq .ans { padding: 0 3rem 1.6rem 0; color: var(--ink-2); font-size: .98rem; max-width: 68ch; }
  .faq .ans p + p { margin-top: .9rem; }

  /* ---------- final ---------- */
  .close {
    border: 1px solid var(--line);
    background: var(--ground-2);
    padding: clamp(2.5rem, 6vw, 4.5rem);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    box-shadow: var(--shadow);
  }
  .close h2 { font-size: var(--step-3); max-width: 20ch; }
  .close p { color: var(--ink-2); max-width: 52ch; }

  /* numărul de telefon: cifrele în font monospațiat, ca restul datelor din pagină */
  .call {
    margin-top: 1.1rem;
    font-family: var(--f-mono);
    font-size: .8rem;
    letter-spacing: .08em;
    color: var(--muted);
  }
  .call a {
    color: var(--accent);
    text-decoration: none;
    font-size: 1.05rem;
    letter-spacing: .04em;
    font-weight: 500;
    white-space: nowrap;
    border-bottom: 1px solid transparent;
    transition: border-color .18s ease;
  }
  .call a:hover { border-bottom-color: var(--accent); }
  .who-cell .call { margin-top: .2rem; }

  .foot-phone { font-variant-numeric: tabular-nums; }

  /* ---------- subsol ---------- */
  .foot { border-top: 1px solid var(--line); margin-top: var(--bay); }
  .foot-in {
    padding-block: 2.5rem 3.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    justify-content: space-between;
  }
  .foot small {
    font-family: var(--f-mono);
    font-size: .7rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--muted);
  }

  /* ---------- mișcare ---------- */
  .rise {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  }
  .rise.in { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
    .rise { opacity: 1; transform: none; }
  }


/* ============================================================
   Componente la nivel de site: navigație, listă de articole,
   conținut de articol (carduri Koenig), paginare, erori.
   Tokenii și componentele paginii de produs sunt în partea de sus
   a fișierului, în _base.
   ============================================================ */

/* ---------- accesibilitate ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .8rem 1.2rem;
  background: var(--ink);
  color: var(--ground);
  font-family: var(--f-mono);
  font-size: .74rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- navigație: listă din setările Ghost ---------- */
.nav-list {
  display: flex;
  gap: 1.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-item a {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  padding: .25rem 0;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.nav-item a:hover { color: var(--ink); border-bottom-color: var(--accent); }

/* Pagina curentă (linkuri către alte pagini) și secțiunea citită acum
   (linkuri către ancore, marcate din JS). Ghost consideră „pagină curentă”
   orice link către „/”, deci ancorele sunt curățate în main.js. */
.nav-item.nav-current a,
.nav-item a.is-active { color: var(--ink); border-bottom-color: var(--accent); }

/* ---------- meniu pe mobil ---------- */
.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.nav-toggle span {
  position: absolute;
  left: 11px;
  width: 16px;
  height: 1px;
  background: var(--ink);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span:first-child { top: 16px; }
.nav-toggle span:last-child { top: 22px; }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

.nav-mobile {
  border-top: 1px solid var(--line);
  background: var(--ground);
  padding-block: 1.4rem 1.8rem;
}
.nav-mobile[hidden] { display: none; }
.nav-mobile .nav-list {
  flex-direction: column;
  gap: 1.1rem;
  margin-bottom: 1.5rem;
}
.nav-mobile .nav-item a { font-size: .8rem; }

@media (max-width: 1200px) {
  .nav-list { gap: 1.35rem; }
}
@media (max-width: 1080px) {
  .nav-cta { display: none; }
  .nav-toggle { display: block; }
}
@media (min-width: 1081px) {
  .nav-mobile { display: none; }
}

/* ---------- introducere de pagină (acasă, etichetă, autor, eroare) ---------- */
.page-intro {
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(2.5rem, 5vw, 4rem);
}
.page-intro .label { display: block; margin-bottom: 1.1rem; }
.page-intro h1 {
  font-size: var(--step-3);
  max-width: 22ch;
  letter-spacing: -0.035em;
}
.page-intro .spectrum { margin: 1.6rem 0; }
.page-intro .lede { margin-top: 1.2rem; }
.page-intro--error { min-height: 50vh; }

/* ---------- listă de articole ---------- */
.post-feed {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.post-card {
  background: var(--ground);
  display: flex;
  flex-direction: column;
  transition: background .18s ease;
}
.post-card:hover { background: var(--ground-3); }
.post-card-image {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.post-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.post-card-body {
  padding: 1.5rem 1.6rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  flex: 1;
}
.post-card-title {
  font-size: 1.18rem;
  font-weight: 620;
  letter-spacing: -0.025em;
  line-height: 1.24;
}
.post-card-title a { text-decoration: none; }
.post-card-title a:hover { color: var(--accent); }
.post-card-excerpt {
  font-size: .93rem;
  color: var(--ink-2);
  line-height: 1.58;
  flex: 1;
}
.post-card-more {
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.post-card:hover .post-card-more { color: var(--accent); }
.post-card:hover .post-card-more .arw { display: inline-block; transform: translateX(3px); }
.post-card-more .arw { transition: transform .16s ease; }

/* ---------- paginare ---------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.pagination a, .page-number {
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.pagination a:hover { color: var(--ink); }

/* ---------- articol ---------- */
.wrap--reading { max-width: 760px; }

.post-head { padding-block: clamp(3rem, 7vw, 5.5rem) 0; }
.post-head .label { display: block; margin-bottom: 1.2rem; }
.post-head .label a { text-decoration: none; color: var(--accent); }
.post-head h1 {
  font-size: var(--step-3);
  letter-spacing: -0.038em;
}
.post-head .lede { margin-top: 1.3rem; }
.post-head .spectrum { margin-top: 2rem; }

.post-image {
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
}
.post-image img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line);
}
.post-image figcaption,
.post-content figcaption {
  margin-top: .7rem;
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--muted);
  text-align: center;
}

.post-content {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  font-size: 1.09rem;
  line-height: 1.72;
  color: var(--ink-2);
}
.post-content > * + * { margin-top: 1.5rem; }
.post-content h2, .post-content h3, .post-content h4 {
  color: var(--ink);
  margin-top: 2.8rem;
}
.post-content h2 { font-size: var(--step-2); }
.post-content h3 { font-size: 1.28rem; }
.post-content a { color: var(--accent); text-underline-offset: 3px; }
.post-content strong { color: var(--ink); font-weight: 620; }
.post-content ul, .post-content ol { padding-left: 1.3rem; }
.post-content li + li { margin-top: .5rem; }
.post-content img { max-width: 100%; height: auto; display: block; }
.post-content hr {
  border: 0;
  height: 1px;
  background: var(--line);
  margin-block: 2.5rem;
}
.post-content blockquote {
  margin-inline: 0;
  padding-left: 1.4rem;
  border-left: 2px solid var(--accent);
  font-size: 1.15rem;
  color: var(--ink);
}
.post-content code {
  font-family: var(--f-mono);
  font-size: .86em;
  background: var(--ground-3);
  padding: .15em .4em;
  border: 1px solid var(--line);
}
.post-content pre {
  background: var(--ground-3);
  border: 1px solid var(--line);
  padding: 1.2rem 1.4rem;
  overflow-x: auto;
  font-size: .88rem;
  line-height: 1.6;
}
.post-content pre code { background: none; border: 0; padding: 0; }
.post-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}
.post-content th, .post-content td {
  text-align: left;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--line);
}

/* carduri Koenig pe lățimi mari */
.post-content .kg-card { margin-block: 2.2rem; }
.post-content .kg-width-wide {
  width: min(1000px, 92vw);
  margin-inline: calc(50% - min(500px, 46vw));
}
.post-content .kg-width-full {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
.post-content .kg-embed-card,
.post-content .kg-gallery-container { display: block; }
.post-content .kg-embed-card iframe { max-width: 100%; }

/* tabelul de conținut / etichete la final */
.post-foot { padding-bottom: var(--bay); }
.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.chip {
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  padding: .4rem .8rem;
  border: 1px solid var(--line-2);
}
.chip:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- subsol ---------- */
.foot-right { display: flex; gap: 1.4rem; }
.foot-right a {
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.foot-right a:hover { color: var(--ink); }