@font-face {
    font-family: "Yanone Kaffeesatz";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/yanone-kaffeesatz-700.woff") format("woff");
  }
  @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");
  }
  @font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/poppins-600.woff2") format("woff2");
  }
  @font-face {
    font-family: "Oswald";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("../fonts/oswald-400.woff2") format("woff2");
  }

  :root {
    --ink: #0A0A0A;
    --paper: #FFFFFF;
    --surface: #F4F1EC;
    --surface-2: #EAE5DC;
    --orange: #CC4420;
    --orange-dark: #9E3419;
    --orange-text: #B33E20;
    /* Portocaliul de text pe fundal INCHIS. --orange-text dă acolo doar
       3,42:1; acesta dă 4,71:1. Pe fundal deschis se folosește tot
       --orange-text, care dă 5,14:1 pe crem și 5,79:1 pe alb. */
    --orange-on-dark: #D3512A;
    --teal: #1ABC9C;
    --teal-text: #0D7A65;
    --text-soft: #6B6560;
    --line: #E2DCD1;
    --on-ink: #F4F1EC;
    --on-ink-soft: #A8A29A;
    --slant: 48px;
  }

  * { box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: "Poppins", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  }

  h1, h2, h3, h4 {
    font-family: "Yanone Kaffeesatz", Arial Narrow, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin: 0;
    text-wrap: balance;
    line-height: 1.08;
  }

  p { margin: 0; }

  a { color: inherit; text-decoration: none; }

  img { max-width: 100%; display: block; }
  /* <picture> is a transparent wrapper: it must not participate in layout,
     so absolute-positioned images keep resolving against their real parent. */
  picture { display: contents; }

  .eyebrow {
    font-family: "Poppins", Arial, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--orange-text);
  }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
    background: var(--orange);
    color: #fff;
    font-family: "Oswald", Arial Narrow, sans-serif;
    font-weight: 500;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 20px 30px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: background 160ms ease, transform 160ms ease;
  }
  .btn:hover { background: var(--orange-dark); transform: translateY(-1px); }
  .btn:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
  .btn svg { flex-shrink: 0; width: 20px; height: 20px; }

  /* Secondary/tertiary CTA: underlined text link (reference "LEARN MORE" pattern) */
  .link-underline {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: "Oswald", Arial Narrow, sans-serif;
    font-weight: 500;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: inherit;
    padding-bottom: 0.3em;
    border-bottom: 2px solid currentColor;
    transition: color 160ms ease, border-color 160ms ease, opacity 160ms ease;
  }
  .link-underline:hover { color: var(--orange-text); border-color: var(--orange-text); }
  .link-underline:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
  .link-underline.on-ink { color: #fff; }
  /* Pe fundal închis se folosește varianta deschisă a portocaliului:
     --orange-text ar da doar 3,42:1 aici. */
  .link-underline.on-ink:hover { color: var(--orange-on-dark); }

  .btn-outline {
    background: transparent;
    border: 1.5px solid currentColor;
    color: inherit;
  }
  .btn-outline:hover { background: rgba(204,68,32,0.12); }

  .wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
  }

  /* ---------- Header ---------- */

  header.site {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
  }

  .nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding-block: 0.6rem;
    flex-wrap: nowrap;
  }

  .logo { display: block; flex-shrink: 0; }
  .logo img {
    height: clamp(38px, 5vw, 48px);
    width: auto;
    display: block;
  }

  nav.links {
    display: flex;
    align-items: center;
    gap: clamp(0.85rem, 2vw, 1.8rem);
    flex-wrap: wrap;
    flex: 1;
    justify-content: center;
  }
  nav.links a {
    font-family: "Oswald", Arial Narrow, sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-soft);
    padding-block: 0.3rem;
    border-bottom: 2px solid transparent;
    transition: color 150ms ease, border-color 150ms ease;
    white-space: nowrap;
  }
  nav.links a:hover, nav.links a:focus-visible { color: var(--ink); border-color: var(--orange-text); }
  nav.links a[aria-current="page"] { color: var(--ink); border-color: var(--orange-text); }

  .nav-actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }

  .nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    flex-shrink: 0;
    cursor: pointer;
  }
  .nav-toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
  .nav-toggle .bar {
    display: block;
    width: 20px;
    height: 2.5px;
    background: var(--ink);
    color: transparent;
    position: relative;
    transition: transform 180ms ease, opacity 180ms ease;
  }
  .nav-toggle .bar::before, .nav-toggle .bar::after {
    content: "";
    position: absolute;
    left: 0;
    width: 20px;
    height: 2.5px;
    background: var(--ink);
    transition: transform 180ms ease, top 180ms ease, opacity 180ms ease;
  }
  .nav-toggle .bar::before { top: -6px; }
  .nav-toggle .bar::after { top: 6px; }
  .nav-toggle[aria-expanded="true"] .bar { background: transparent; }
  .nav-toggle[aria-expanded="true"] .bar::before { top: 0; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bar::after { top: 0; transform: rotate(-45deg); }

  @media (max-width: 780px) {
    .nav-toggle { display: inline-flex; }

    nav.links {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      background: var(--paper);
      border-bottom: 1px solid var(--line);
      box-shadow: 0 12px 24px rgba(0,0,0,0.08);
      padding: 0.5rem clamp(1.25rem, 4vw, 3rem) 1rem;
      max-height: 0;
      overflow: hidden;
      visibility: hidden;
      transition: max-height 220ms ease, visibility 220ms ease;
    }
    nav.links.is-open {
      max-height: 70vh;
      overflow-y: auto;
      visibility: visible;
    }
    nav.links a {
      padding-block: 0.9rem;
      border-bottom: 1px solid var(--line);
      white-space: normal;
    }
    nav.links a:last-child { border-bottom: none; }
  }

  /* ---------- Submeniu „Acasă" ----------
     Ancorele paginii de start stau aici, ca bara sa ramana scurta. Pe desktop
     se deschide la hover si la focus; pe telefon, unde hover-ul nu exista,
     butonul cu sageata il deschide la atingere. */
  .nav-item { position: relative; display: flex; align-items: center; gap: 0.15rem; }

  .sub-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-soft);
    cursor: pointer;
    transition: color 150ms ease, transform 150ms ease;
  }
  .sub-toggle:hover, .sub-toggle:focus-visible { color: var(--ink); }
  .sub-toggle[aria-expanded="true"] { transform: rotate(180deg); }

  .sub {
    position: absolute;
    top: 100%;
    left: -0.75rem;
    min-width: 12.5rem;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 0 12px 24px rgba(0,0,0,0.10);
    padding: 0.35rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
    z-index: 60;
  }
  .nav-item:hover .sub,
  .nav-item:focus-within .sub,
  .sub.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  nav.links .sub a {
    padding: 0.55rem 1.1rem;
    border-bottom: 0;
    white-space: nowrap;
  }
  nav.links .sub a:hover, nav.links .sub a:focus-visible {
    color: var(--ink);
    background: rgba(0,0,0,0.04);
    border-color: transparent;
  }

  @media (max-width: 780px) {
    /* In meniul vertical, submeniul devine o lista indentata: fara pozitionare
       absoluta, altfel ar acoperi restul optiunilor. */
    /* Randul „Acasă" ocupa toata latimea, ca oricare alt buton din meniu,
       iar sageata sta lipita de marginea din dreapta. Pozitionarea absoluta
       cu margin negativ scotea butonul din rand si il ascundea sub antet. */
    .nav-item {
      position: static;
      display: grid;
      /* Randul de sus: „Acasă" + sageata. Randul de jos: submeniul, pe toata
         latimea. Grid, nu flex: cu flex, .sub devenea al treilea element din
         acelasi rand si se lipea in dreapta in loc sa coboare dedesubt. */
      grid-template-columns: 1fr auto;
      width: 100%;
      gap: 0;
    }

    /* O SINGURA linie sub tot randul, pusa pe container, nu pe cele doua
       elemente. Cu cate un chenar pe link si pe sageata, liniile cadeau la
       inaltimi diferite (elementele au inaltimi diferite) si se vedea o
       treapta: parea ca sageata e un buton separat. */
    /* Linia de sub rand: acelasi chenar pe link SI pe sageata, ca sa arate ca
       o singura linie continua. Ambele elemente au aceeasi inaltime, deci
       chenarele cad la acelasi nivel si nu se vede nicio treapta.
       (Varianta cu chenar pe container cobora sub submeniu la deschidere;
       varianta cu pseudo-element ajungea deasupra randului.) */
    .nav-item > a,
    .sub-toggle {
      height: 44px;
      display: flex;
      align-items: center;
      padding-block: 0;
      border-bottom: 1px solid var(--line);
    }
    .nav-item > a { padding-right: 0.5rem; }
    .sub-toggle {
      width: 44px;
      flex-shrink: 0;
      justify-content: center;
    }
    /* Cand „Acasă" e pagina curenta, linia devine portocalie pe TOT randul,
       nu doar sub text. */
    .nav-item:has(> a[aria-current="page"]) > a,
    .nav-item:has(> a[aria-current="page"]) > .sub-toggle {
      border-bottom: 2px solid var(--orange-text);
    }
    .sub {
      grid-column: 1 / -1;
      /* Submeniul are linia lui deasupra primului element, ca sa nu se
         lipeasca de randul „Acasă" cand e deschis. */
      margin-top: 0;
    }
    .sub {
      position: static;
      min-width: 0;
      border: 0;
      box-shadow: none;
      padding: 0;
      opacity: 1;
      visibility: visible;
      transform: none;
      max-height: 0;
      overflow: hidden;
      transition: max-height 200ms ease;
      background: none;
    }
    .sub.is-open { max-height: 20rem; }
    nav.links .sub a {
      display: block;
      width: 100%;
      padding: 0.75rem 0 0.75rem 1.1rem;
      border-bottom: 1px solid var(--line);
      font-size: 0.78rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .sub, .sub-toggle { transition: none; }
  }


  @media (prefers-reduced-motion: reduce) {
    .nav-toggle .bar, .nav-toggle .bar::before, .nav-toggle .bar::after, nav.links {
      transition: none;
    }
  }

  /* ---------- Section scaffolding ---------- */

  section { position: relative; }
  .section-pad { padding-block: clamp(3.5rem, 8vw, 6.5rem); }

  .kicker-block { max-width: 62ch; margin-bottom: clamp(2rem, 5vw, 3.2rem); }
  .kicker-block h2 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-top: 0.5rem; }

  /* Two logo files (dark-ink + white). Only one is shown; the swap is pure CSS
     so there is no flash and no JS dependency. */
  .logo img.logo-dark { display: none; }


  nav.links {
    display: flex;
    align-items: center;
    gap: clamp(0.85rem, 2vw, 1.8rem);
    flex-wrap: wrap;
    flex: 1;
    justify-content: center;
  }
  nav.links a {
    font-family: "Oswald", Arial Narrow, sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-soft);
    padding-block: 0.3rem;
    border-bottom: 2px solid transparent;
    transition: color 150ms ease, border-color 150ms ease;
    white-space: nowrap;
  }
  nav.links a:hover, nav.links a:focus-visible { color: var(--ink); border-color: var(--orange-text); }
  nav.links a[aria-current="page"] { color: var(--ink); border-color: var(--orange-text); }

  .nav-actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }

  .nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    flex-shrink: 0;
    cursor: pointer;
  }
  .nav-toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
  .nav-toggle .bar {
    display: block;
    width: 20px;
    height: 2.5px;
    background: var(--ink);
    color: transparent;
    position: relative;
    transition: transform 180ms ease, opacity 180ms ease;
  }
  .nav-toggle .bar::before, .nav-toggle .bar::after {
    content: "";
    position: absolute;
    left: 0;
    width: 20px;
    height: 2.5px;
    background: var(--ink);
    transition: transform 180ms ease, top 180ms ease, opacity 180ms ease;
  }
  .nav-toggle .bar::before { top: -6px; }
  .nav-toggle .bar::after { top: 6px; }
  .nav-toggle[aria-expanded="true"] .bar { background: transparent; }
  .nav-toggle[aria-expanded="true"] .bar::before { top: 0; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bar::after { top: 0; transform: rotate(-45deg); }

  @media (max-width: 780px) {
    .nav-toggle { display: inline-flex; }

    nav.links {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      background: var(--paper);
      border-bottom: 1px solid var(--line);
      box-shadow: 0 12px 24px rgba(0,0,0,0.08);
      padding: 0.5rem clamp(1.25rem, 4vw, 3rem) 1rem;
      max-height: 0;
      overflow: hidden;
      visibility: hidden;
      transition: max-height 220ms ease, visibility 220ms ease;
    }
    nav.links.is-open {
      max-height: 70vh;
      overflow-y: auto;
      visibility: visible;
    }
    nav.links a {
      padding-block: 0.9rem;
      border-bottom: 1px solid var(--line);
      white-space: normal;
    }
    nav.links a:last-child { border-bottom: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .nav-toggle .bar, .nav-toggle .bar::before, .nav-toggle .bar::after, nav.links {
      transition: none;
    }
  }

  /* ---------- Hero (same pattern as homepage) ---------- */

  .hero {
    position: relative;
    overflow: hidden;
    background: var(--paper);
  }

  .hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
    padding-block: clamp(2.5rem, 6vw, 5rem);
  }

  @media (min-width: 960px) {
    .hero-grid { grid-template-columns: 1.5fr 1fr; gap: 2.5rem; }
  }
  @media (min-width: 1200px) {
    .hero-grid { grid-template-columns: 1.7fr 1fr; gap: 3rem; }
  }

  .hero-copy h1 {
    font-size: clamp(2.8rem, 7vw, 6.2rem);
    line-height: 1.08;
    letter-spacing: 0.008em;
  }
  .hero-copy .eyebrow { margin-bottom: 0.9rem; display: block; }
  .hero-copy p.lede {
    font-size: 1.05rem;
    color: var(--text-soft);
    max-width: 48ch;
    margin-block: 1.6rem 2.2rem;
  }
  .hero-actions { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }

  .hero-art {
    position: relative;
    aspect-ratio: 4/5;
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
  }
  .hero-art .shape {
    position: absolute;
    border-radius: 6px;
    filter: saturate(1.05);
  }
  .hero-art .shape.s1 { width: 62%; height: 46%; left: 0; top: 6%; background: var(--orange); transform: rotate(-9deg); }
  .hero-art .shape.s2 { width: 48%; height: 40%; right: 2%; top: 0; background: var(--teal); transform: rotate(11deg); }
  .hero-art .shape.s3 { width: 55%; height: 42%; left: 6%; bottom: 0; background: #4054B2; transform: rotate(6deg); }
  .hero-art .photo {
    position: absolute;
    inset: 8% 6%;
    width: 88%;
    height: 84%;
    object-fit: contain;
    filter: drop-shadow(0 18px 30px rgba(0,0,0,0.28));
  }
  .hero-art .float-img {
    position: absolute;
    height: auto;
    filter: drop-shadow(0 8px 14px rgba(0,0,0,0.25));
  }
  .hero-art .float-img.headphones { width: 92px; left: -8%; top: 30%; }
  .hero-art .float-img.vinyl { width: 74px; right: -6%; bottom: 8%; }

  /* Animație de intrare la scroll: fiecare element pornește translat și
     transparent, apoi se așază la poziția lui reală. reveal-in e adăugată
     de JS via IntersectionObserver, o singură dată, la prima vizibilitate. */
  .hero-art .photo,
  .hero-art .float-img {
    opacity: 0;
    transform: translateY(28px) scale(0.96);
    transition: opacity 500ms cubic-bezier(0,0,0.2,1), transform 500ms cubic-bezier(0,0,0.2,1);
  }
  .hero-art .float-img.headphones { transition-delay: 120ms; }
  .hero-art .float-img.vinyl { transition-delay: 220ms; }
  .hero-art.reveal-in .photo,
  .hero-art.reveal-in .float-img {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  /* Plutire continuă și discretă, doar după ce animația de intrare a
     terminat, ca să nu se însumeze cu translateY-ul de start. */
  .hero-art.reveal-in .float-img.headphones { animation: hero-float 5s ease-in-out 620ms infinite; }
  .hero-art.reveal-in .float-img.vinyl { animation: hero-float 5.6s ease-in-out 720ms infinite; }
  @keyframes hero-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
  }

  /* ---------- FAQ category quick-jump ---------- */

  .faq-jump {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 61px;
    z-index: 40;
  }
  .faq-jump-row {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-block: 0.9rem;
    scrollbar-width: thin;
  }
  .faq-jump-row a {
    flex-shrink: 0;
    font-family: "Oswald", Arial Narrow, sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-soft);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.5em 1.1em;
    white-space: nowrap;
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
  }
  .faq-jump-row a:hover, .faq-jump-row a:focus-visible {
    color: #fff;
    background: var(--orange);
    border-color: var(--orange-text);
  }

  /* ---------- FAQ categories / accordion ---------- */

  .faq-category { padding-block: clamp(2.6rem, 5vw, 3.6rem); border-top: 1px solid var(--line); scroll-margin-top: 130px; }
  .faq-category:first-of-type { border-top: none; }
  .faq-category-head {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    margin-bottom: 1.5rem;
  }
  .faq-category-head .cat-num {
    font-family: "Yanone Kaffeesatz", Arial Narrow, sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--teal-text);
    flex-shrink: 0;
  }
  .faq-category h2 {
    font-size: clamp(1.7rem, 3.4vw, 2.3rem);
    color: var(--ink);
  }

  .faq-item {
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    margin-bottom: 0.8rem;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04);
    transition: border-color 160ms ease, box-shadow 160ms ease;
  }
  .faq-item[open] { border-color: var(--orange-text); box-shadow: 0 10px 24px rgba(204,68,32,0.14), 0 2px 5px rgba(0,0,0,0.06); }

  .faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 1.15rem 1.3rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 600;
    font-size: 0.98rem;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }

  .faq-item summary .q-index {
    flex-shrink: 0;
    font-family: "Yanone Kaffeesatz", Arial Narrow, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--orange-text);
    width: 2ch;
  }
  .faq-item summary .q-text { flex: 1; }

  .faq-item summary .plus {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--orange);
    color: var(--orange-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    transition: transform 180ms ease, background 160ms ease, color 160ms ease;
  }
  .faq-item[open] summary .plus { transform: rotate(45deg); background: var(--orange); color: #fff; }

  .faq-item-body {
    padding: 0 1.3rem 1.3rem 3.3rem;
    color: var(--text-soft);
    font-size: 0.95rem;
    max-width: 68ch;
  }
  .faq-item-body ul { margin: 0.6rem 0 0; padding-left: 1.2rem; }
  .faq-item-body li { margin-bottom: 0.3rem; }
  .faq-item-body .unanswered { font-style: italic; color: var(--text-soft); opacity: 0.75; }

  /* ---------- FAQ CTA ---------- */

  .faq-cta {
    background: var(--ink);
    color: var(--on-ink);
    text-align: center;
    clip-path: polygon(0 var(--slant), 100% 0, 100% calc(100% - var(--slant)), 0 100%);
    margin-block: calc(var(--slant) * -1);
  }
  .faq-cta .wrap { padding-block: clamp(4.5rem, 9vw, 6.5rem); }
  .faq-cta h2 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.6rem); }
  .faq-cta p { color: var(--on-ink-soft); margin-top: 0.8rem; }
  .faq-cta .btn { margin-top: 1.6rem; }

  /* ---------- Contact form (above footer) ---------- */

  .contact-form-section {
    background: var(--surface-2);
    clip-path: polygon(0 var(--slant), 100% 0, 100% calc(100% - var(--slant)), 0 100%);
    margin-block: calc(var(--slant) * -1);
    scroll-margin-top: 80px;
  }
  .contact-form-section .wrap { padding-block: clamp(4.5rem, 9vw, 6.5rem); }
  .contact-form-section .kicker-block h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); }

  .contact-form {
    max-width: 640px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    background: var(--paper);
    border-radius: 4px;
    padding: clamp(1.6rem, 4vw, 2.6rem);
    box-shadow: 0 10px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  }
  .form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  @media (min-width: 620px) { .form-row { grid-template-columns: 1fr 1fr; } }

  .form-field { display: flex; flex-direction: column; gap: 0.4rem; }
  .form-field label {
    font-family: "Oswald", Arial Narrow, sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-soft);
  }
  .form-field input, .form-field textarea, .form-field select {
    font-family: "Poppins", Arial, sans-serif;
    font-size: 0.95rem;
    color: var(--ink);
    background: transparent;
    border: none;
    border-bottom: 1.5px solid var(--line);
    padding: 0.5em 0.1em;
    outline: none;
    transition: border-color 150ms ease;
    /* Grid/flex children default to min-width:auto, so a long option label
       would push the control wider than the column on narrow screens. */
    min-width: 0;
    max-width: 100%;
  }
  .form-field { min-width: 0; }
  .form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--orange-text); }
  .form-field textarea { resize: vertical; min-height: 100px; }
  .form-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5' stroke='%236B6560' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.2em center;
    background-size: 18px;
    padding-right: 1.6em;
  }
  .form-field select:invalid { color: var(--text-soft); }
  /* ---------- Validare formular în română ----------
     Formularele rulează cu novalidate, ca să nu apară bulele native ale
     browserului (care sunt în limba browserului, nu a paginii). Mesajele de
     mai jos sunt scrise de scriptul de la finalul paginii. */
  .field-error {
    display: none;
    margin-top: 0.35rem;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--orange-text);
  }
  .field-error.is-visible { display: block; }
  .form-field input[aria-invalid="true"],
  .form-field select[aria-invalid="true"],
  .form-field textarea[aria-invalid="true"] {
    border-bottom-color: var(--orange-text);
  }
  .form-error-summary {
    display: none;
    padding: 0.9rem 1.1rem;
    border-left: 3px solid var(--orange-text);
    background: var(--surface);
    color: var(--ink);
    font-size: 0.92rem;
  }
  .form-error-summary.is-visible { display: block; }

  /* ---------- Bifă de consimțământ GDPR în formulare ---------- */

  .form-consent {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.6rem;
    align-items: start;
    margin-block-start: 1rem;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--ink);
    cursor: pointer;
    min-width: 0;
  }

  .form-consent input[type="checkbox"] {
    inline-size: 20px;
    block-size: 20px;
    margin: 0.15rem 0 0 0;
    accent-color: var(--orange);
    cursor: pointer;
    flex: none;
  }

  .form-consent input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--orange-text);
    outline-offset: 2px;
  }

  .form-consent a {
    color: var(--orange-text);
    text-underline-offset: 2px;
  }

  .form-consent a:hover,
  .form-consent a:focus-visible { text-decoration-thickness: 2px; }

  .form-consent .field-error { grid-column: 2; }

  .form-consent-optional {
    color: var(--text-soft);
  }

  .consent-note {
    margin-block-start: 1.2rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-soft);
    max-width: 68ch;
  }

  .contact-form .btn { align-self: center; margin-top: 0.6rem; }

  /* ---------- Footer: light/minimal ---------- */

  footer.site {
    background: var(--paper);
    color: var(--text-soft);
    border-top: 1px solid var(--line);
  }
  .footer-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    padding-block: clamp(2.4rem, 5vw, 3.2rem);
    text-align: center;
  }
  @media (min-width: 780px) { .footer-grid { flex-direction: row; justify-content: space-between; text-align: left; } }
  .footer-logo { display: block; }
  .footer-logo img { height: clamp(42px, 5.5vw, 54px); width: auto; }
  .footer-logo img.logo-dark { width: clamp(96px, 12vw, 108px); height: auto; max-height: clamp(54px, 7vw, 66px); object-fit: contain; }
  .footer-brand { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
  @media (min-width: 780px) { .footer-brand { align-items: flex-start; } }
  .footer-social { display: flex; gap: 0.7rem; }
  .footer-social a {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-soft);
    transition: border-color 150ms ease, color 150ms ease;
  }
  .footer-social a:hover, .footer-social a:focus-visible { border-color: var(--orange-text); color: var(--orange-text); }
  .footer-social svg { width: 17px; height: 17px; }

  .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.4rem; }
  @media (min-width: 780px) { .footer-nav { justify-content: flex-end; } }
  .footer-nav a {
    font-family: "Oswald", Arial Narrow, sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-soft);
    transition: color 150ms ease;
  }
  .footer-nav a:hover, .footer-nav a:focus-visible { color: var(--orange-text); }

  .footer-bottom {
    border-top: 1px solid var(--line);
    padding-block: 1.2rem;
    font-size: 0.76rem;
    color: var(--text-soft);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    text-align: center;
  }

  .footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    justify-content: center;
    min-width: 0;
  }

  .footer-legal a { color: inherit; text-underline-offset: 2px; }
  .footer-legal a:hover,
  .footer-legal a:focus-visible { color: var(--orange-text); }


  .skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--orange);
    color: #fff;
    padding: 0.7em 1.2em;
    z-index: 100;
  }
  .skip-link:focus { left: 1rem; top: 1rem; }

  /* Dark mode LAST: same-specificity overrides must come after the base rules. */
  @media (prefers-color-scheme: dark) {
    header.site { background: var(--ink); border-bottom-color: rgba(255,255,255,0.14); }
    header.site nav.links a { color: #B8B2AA; }
    header.site nav.links a:hover,
    header.site nav.links a:focus-visible,
    header.site nav.links a[aria-current="page"] { color: #fff; }
    .sub { background: var(--ink); border-color: rgba(255,255,255,0.14); }
    header.site nav.links .sub a:hover,
    header.site nav.links .sub a:focus-visible { background: rgba(255,255,255,0.10); }
    .sub-toggle { color: #B8B2AA; }
    .sub-toggle:hover, .sub-toggle:focus-visible { color: #fff; }

    /* #3D3D3D, nu rgba(255,255,255,0.08): gate-ul de contrast ignoră alpha
       (citește doar r,g,b), deci un fundal semitransparent alb era văzut ca
       alb opac și pica fals contra textului deschis. Tonul e mai deschis
       decât varianta minimă care trecea gate-ul (#1E1E1E, 1,13:1 față de
       fundalul antetului): pe un telefon real, la luminozitate mică, acea
       diferență era prea slabă ca butonul să se distingă vizual de fundal,
       deși valoarea de contrast calculată era teoretic suficientă. */
    .nav-toggle { background: #3D3D3D; border-color: rgba(255,255,255,0.4); }
    .nav-toggle .bar, .nav-toggle .bar::before, .nav-toggle .bar::after { background: #fff; }
    .nav-toggle[aria-expanded="true"] .bar { background: transparent; }

    /* Logo-ul și butonul de meniu moștenesc culoarea de pe fundal deschis,
       ceea ce pe întuneric dădea contrast 1:1 la verificarea automată. */
    .logo { color: var(--on-ink); }
    .nav-toggle { color: var(--on-ink); }
    footer.site { background: var(--ink); border-top-color: rgba(255,255,255,0.14); }
    footer.site, .footer-nav a, .footer-bottom { color: #B8B2AA; }
    /* Portocaliul de text dă 3,42:1 pe fundal închis, sub pragul de 4,5:1.
       Pe întuneric trecem pe culoarea deschisă, care dă 17,57:1. */
    .footer-nav a:hover, .footer-nav a:focus-visible { color: var(--on-ink); }
    .footer-social a { border-color: rgba(255,255,255,0.24); color: #B8B2AA; }
    .footer-bottom { border-top-color: rgba(255,255,255,0.14); }
    /* Pe fundal închis, portocaliul de text dă 3,42:1. */
    .footer-legal a:hover, .footer-legal a:focus-visible { color: var(--on-ink); }


    /* Bifele de consimțământ NU primesc reguli pentru modul întunecat.
       Pe acest site doar antetul și subsolul comută pe fundal închis; corpul
       paginii, unde stau formularele, rămâne alb. Culorile deschise puse aici
       dădeau text aproape alb pe alb: 2,10:1 pentru notă și sub 1,2:1 pentru
       textul bifei. Măsurat cu emulare prefers-color-scheme, nu cu data-theme. */

    .logo img.logo-light { display: none; }
    .logo img.logo-dark { display: block; width: clamp(85px, 11vw, 96px); height: auto; max-height: clamp(48px, 6.2vw, 60px); object-fit: contain; }
  }

  @media (max-width: 780px) and (prefers-color-scheme: dark) {
    nav.links { background: var(--ink); border-bottom-color: rgba(255,255,255,0.14); }
    nav.links a { border-bottom-color: rgba(255,255,255,0.14); }
    .sub { background: none; }
    nav.links .sub a { border-bottom-color: rgba(255,255,255,0.14); }

  }

  /* ---------- Join-the-team CTA under the contact cards ---------- */
  .join-cta {
    margin-top: clamp(2rem, 5vw, 3rem);
    padding: clamp(1.6rem, 4vw, 2.4rem);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    text-align: center;
  }
  .join-cta h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
  .join-cta p { margin-top: 0.7rem; color: var(--text-soft); max-width: 52ch; margin-inline: auto; }
  .join-cta .btn { margin-top: 1.4rem; }

/* ==========================================================================
   Blog — stiluri proprii articolelor. Se adaugă peste CSS-ul comun al
   site-ului, ca aspectul să rămână identic fără să dublăm nimic.
   ========================================================================== */

.articol-hero {
  padding: clamp(96px, 14vw, 160px) 0 clamp(32px, 5vw, 56px);
  background: var(--surface);
}

.articol-hero .wrap {
  max-width: 760px;
}

.articol-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  font-family: "Oswald", system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.articol-meta .separator {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-soft);
}

.articol-hero h1 {
  margin: 0 0 20px;
  font-size: clamp(32px, 6vw, 52px);
  line-height: 1.15;
}

.articol-rezumat {
  margin: 0;
  font-size: clamp(17px, 2.2vw, 20px);
  line-height: 1.6;
  color: var(--text-soft);
}

.articol-imagine-principala {
  margin: 0;
  background: var(--surface);
}

.articol-imagine-principala img {
  display: block;
  width: 100%;
  max-width: 1100px;
  /* Plafonul de înălțime ține imaginea sub prima parte a textului: fără el,
     o fotografie lată ocupă tot ecranul și articolul începe abia sub ea. */
  max-height: min(56vh, 520px);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.articol-corp {
  padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 8vw, 96px);
}

.articol-corp .wrap {
  max-width: 720px;
}

.articol-corp p {
  margin: 0 0 24px;
  font-size: 17px;
  line-height: 1.75;
}

.articol-corp h2 {
  margin: clamp(40px, 6vw, 64px) 0 20px;
  font-size: clamp(24px, 3.6vw, 32px);
  line-height: 1.25;
}

.articol-corp h3 {
  margin: 36px 0 16px;
  font-size: clamp(19px, 2.6vw, 23px);
  line-height: 1.3;
}

.articol-corp ul,
.articol-corp ol {
  margin: 0 0 24px;
  padding-left: 24px;
}

.articol-corp li {
  margin-bottom: 10px;
  font-size: 17px;
  line-height: 1.7;
}

.articol-corp a {
  color: var(--orange-text);
  text-underline-offset: 3px;
}

.articol-corp a:hover {
  color: var(--orange-dark);
}

.articol-corp figure {
  margin: clamp(32px, 5vw, 48px) 0;
}

.articol-corp figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 4px;
}

.articol-corp figcaption {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-soft);
}

.articol-corp blockquote {
  margin: clamp(32px, 5vw, 44px) 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--orange);
  font-size: 19px;
  line-height: 1.6;
  font-style: italic;
}

/* Bannerul de final: aceeași invitație pe toate articolele. */
.articol-cta {
  padding: clamp(48px, 7vw, 80px) 0;
  background: var(--ink);
  color: var(--paper);
  text-align: center;
}

.articol-cta .wrap {
  max-width: 640px;
}

.articol-cta h2 {
  margin: 0 0 16px;
  font-size: clamp(26px, 4vw, 38px);
  color: var(--paper);
}

.articol-cta p {
  margin: 0 0 28px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--on-ink-soft);
}

/* --- Lista de articole (pagina /blog/) --------------------------------- */

.blog-hero {
  padding: clamp(96px, 14vw, 160px) 0 clamp(32px, 5vw, 48px);
  background: var(--surface);
  text-align: center;
}

.blog-hero h1 {
  margin: 0 0 16px;
  font-size: clamp(34px, 6.5vw, 56px);
  line-height: 1.12;
}

.blog-hero p {
  max-width: 560px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-soft);
}

.blog-lista {
  padding: clamp(48px, 7vw, 80px) 0 clamp(64px, 9vw, 104px);
}

.blog-grid {
  display: grid;
  /* `min()` lasă coloana să coboare sub 300px pe ecranele foarte înguste;
     fără el, grila păstrează 300px și împinge pagina în lateral. */
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: clamp(24px, 3.5vw, 40px);
}

.blog-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(10, 10, 10, .1);
}

.blog-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.blog-card-corp {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px;
}

.blog-card-meta {
  margin-bottom: 12px;
  font-family: "Oswald", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.blog-card h2 {
  margin: 0 0 12px;
  font-size: 21px;
  line-height: 1.3;
}

.blog-card h2 a {
  color: inherit;
  text-decoration: none;
}

.blog-card h2 a:hover {
  color: var(--orange-text);
}

.blog-card p {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-soft);
}

.blog-card .citeste {
  margin-top: auto;
  font-family: "Oswald", system-ui, sans-serif;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--orange-text);
  text-decoration: none;
}

.blog-card .citeste:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.blog-gol {
  padding: 48px 0;
  text-align: center;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-soft);
}

@media (prefers-reduced-motion: reduce) {
  .blog-card {
    transition: none;
  }
  .blog-card:hover {
    transform: none;
  }
}