:root {
  /* Sistem de culori cinematic-întunecat, dat de client (reper vizual generat).
     Un singur "temă" (dark) pe tot site-ul — alternanța se face între cele 3
     niveluri de negru, nu între întunecat și deschis. */
  --bg-primary: #0c1216;
  --bg-secondary: #151d22;
  --surface-elevated: #1b2429;

  --text-primary: #f1efe9;
  --text-secondary: #a5acaf;
  --text-faint: #8f989c;

  --cyan: #10a9c2;
  --cyan-hover: #22b9d1;
  /* Text pe fundal cyan plin (butoane) trebuie să fie închis, nu deschis —
     alb/crem pe #10a9c2 abia atinge 2.4:1 (eșuează WCAG AA 4.5:1); text închis
     pe același cyan dă 6.7:1. Verificat numeric, nu ghicit. */
  --on-cyan: #0c1216;
  --cyan-soft: rgba(16, 169, 194, 0.14);

  --stone: #85827a;
  --sand: #b7a487;
  --bronze: #806448;

  /* Variabile vechi păstrate ca alias-uri, ca restul foii de stil (și main.js,
     care nu referă direct culori) să rămână neschimbate structural. */
  --bg: var(--bg-secondary);
  --surface: var(--surface-elevated);
  --surface-soft: var(--surface-elevated);
  --anthracite: var(--bg-primary);
  --anthracite-2: var(--bg-secondary);
  --dark: var(--anthracite);
  --dark-2: var(--anthracite-2);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --line: rgba(241, 239, 233, 0.12);
  --cyan-dark: var(--on-cyan);
  --cyan-text: var(--cyan);
  --white: var(--text-primary);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  --radius: 8px;
  --max: 1180px;
  --font-body: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

* {
  box-sizing: border-box;
}

/* Mai multe elemente au atât atributul `hidden`, cât și o clasă care setează
   explicit `display` (ex: .form-grid{display:grid}). CSS-ul autorului câștigă
   întotdeauna în fața regulii implicite `[hidden]{display:none}` a browserului,
   indiferent de specificitate — deci acele clase anulau vizual `hidden`. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--text-primary);
  background: var(--bg-primary);
  font-family: var(--font-body);
  line-height: 1.5;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0;
}

img {
  display: block;
  max-width: 100%;
}

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

button,
input,
textarea {
  font: inherit;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--cyan);
  color: var(--on-cyan);
  padding: 12px 18px;
  border-radius: var(--radius);
  font-weight: 800;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 12px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus vizibil, doar la navigarea cu tastatura (:focus-visible), pentru linkuri,
   butoane, inputuri, carduri de alegere, summary și orice element focalizabil
   (h3-urile pașilor au tabindex="-1"). Contur cyan 2px, offset 2px. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: calc(var(--radius) - 2px);
}