/* Grai – grai-app.com
   Culori și fonturi din Brand Book v1.1 (paleta Confetti), plus culorile de cod din pitch
   (lavandă pentru buze, prun pentru fuziune, verde pentru voce, salvie pentru date).
   Tema deschisă e implicită; tema închisă se activează din buton sau din setarea sistemului. */

@font-face { font-family: "Nunito"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/nunito-700.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 800; font-style: normal; font-display: swap; src: url("/assets/fonts/nunito-800.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/inter-600.woff2") format("woff2"); }

/* ---------- culori ---------- */
:root {
  color-scheme: light;
  --fundal: #fffcf6;          /* Hârtie */
  --fundal-2: #f6f2e9;        /* Nisip */
  --suprafata: #fffcf6;
  --chip: #efe9de;
  --text: #28303d;            /* Ardezie */
  --text-2: #3b4350;
  --text-3: #5f5a54;
  --linie: #e3dccf;
  /* culori vii: doar pentru grafică, niciodată pentru text mic */
  --coral: #ff6b57; --galben: #ffc93c; --turcoaz: #2fb3a4;
  --lavanda: #a0bae6; --prun: #a64d79; --verde: #6aa84f; --salvie: #a0b9a0; --gri: #7d8696;
  /* variante pentru text (contrast AA pe Hârtie și Nisip) */
  --coral-text: #c53d2a; --galben-text: #806500; --turcoaz-text: #1e756b;
  --lavanda-text: #3f5f9e; --prun-text: #94406b; --verde-text: #3b7228; --salvie-text: #4c6b4c;
  --link: #1e756b; --link-hover: #28303d;
  --telefon: #28303d;
  --focus: #1e756b;
  --umbra: 0 1.5rem 3rem -1.75rem rgba(40, 48, 61, 0.35);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fundal: #28303d; --fundal-2: #2d3644; --suprafata: #323b4a; --chip: #3a4454;
  --text: #fffcf6; --text-2: #d5d9e0; --text-3: #b3bac6; --linie: #4a5466;
  --coral-text: #ff8b7a; --galben-text: #ffc93c; --turcoaz-text: #4fd1c1;
  --lavanda-text: #a0bae6; --prun-text: #d2a6bc; --verde-text: #8ebd79; --salvie-text: #a0b9a0;
  --link: #ffc93c; --link-hover: #fffcf6; --telefon: #11161f; --focus: #ffc93c;
  --umbra: 0 1.5rem 3rem -1.75rem rgba(0, 0, 0, 0.6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fundal: #28303d; --fundal-2: #2d3644; --suprafata: #323b4a; --chip: #3a4454;
    --text: #fffcf6; --text-2: #d5d9e0; --text-3: #b3bac6; --linie: #4a5466;
    --coral-text: #ff8b7a; --galben-text: #ffc93c; --turcoaz-text: #4fd1c1;
    --lavanda-text: #a0bae6; --prun-text: #d2a6bc; --verde-text: #8ebd79; --salvie-text: #a0b9a0;
    --link: #ffc93c; --link-hover: #fffcf6; --telefon: #11161f; --focus: #ffc93c;
    --umbra: 0 1.5rem 3rem -1.75rem rgba(0, 0, 0, 0.6);
  }
}

/* ---------- baza ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundal); color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.125rem; line-height: 1.6; text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3 { font-family: "Nunito", system-ui, sans-serif; font-weight: 800; line-height: 1.1; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem); letter-spacing: -0.01em; }
h3 { font-size: 1.375rem; }
p { margin: 0; }
strong { font-weight: 600; color: var(--text); }
a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ascuns { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sari { position: absolute; left: 1rem; top: -4rem; z-index: 20; padding: 0.75rem 1rem; background: var(--text); color: var(--fundal); border-radius: 0.75rem; font-weight: 600; }
.sari:focus { top: 1rem; color: var(--fundal); }

.cadru { width: min(100% - 2 * clamp(1rem, 4vw, 2.5rem), 72rem); margin-inline: auto; }
.sectiune { padding-block: clamp(4rem, 3rem + 5vw, 7rem); }
.sectiune-nisip { background: var(--fundal-2); }
.intro { margin-top: 1rem; max-width: 42rem; color: var(--text-2); font-size: 1.1875rem; text-wrap: pretty; }


/* cercurile colorate cu iconiță, ca în pitch */
.cerc { display: inline-grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; }
.cerc svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: #fffcf6; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cerc-mic { width: 2rem; height: 2rem; }
.cerc-mic svg { width: 1.0625rem; height: 1.0625rem; }
.cerc-mare { width: 4.5rem; height: 4.5rem; }
.cerc-mare svg { width: 2.125rem; height: 2.125rem; }
.cerc-coral { background: #e8533f; }
.cerc-prun { background: var(--prun); }
.cerc-verde { background: var(--verde); }
.cerc-turcoaz { background: var(--turcoaz); }
.cerc-galben { background: var(--galben); }
.cerc-lavanda { background: var(--lavanda); }
.cerc-salvie { background: var(--salvie); }
.cerc-galben svg, .cerc-lavanda svg, .cerc-salvie svg, .cerc-turcoaz svg { stroke: #28303d; }

/* ---------- antet ---------- */
.antet { position: sticky; top: 0; z-index: 10; background: var(--fundal); border-bottom: 1px solid var(--linie); }
.antet-cadru { display: flex; align-items: center; gap: 1.5rem; min-height: 4.25rem; }
.antet-logo { color: var(--text); flex: none; }
.antet-logo .logo { width: 6rem; height: auto; }
.meniu { display: flex; gap: 1.25rem; margin-left: auto; font-size: 0.9875rem; font-weight: 500; }
.meniu a { color: var(--text-2); text-decoration: none; padding-block: 0.5rem; white-space: nowrap; }
.meniu a:hover { color: var(--text); text-decoration: underline; }
.comutator-tema {
  display: inline-flex; align-items: center; gap: 0.5rem; flex: none;
  margin-left: 0.25rem; padding: 0.5rem 0.875rem; min-height: 2.75rem;
  border: 1px solid var(--linie); border-radius: 999px; background: var(--suprafata);
  color: var(--text); font: 600 0.9375rem/1 "Inter", system-ui, sans-serif; cursor: pointer;
}
.comutator-tema:hover { border-color: var(--text-3); }
.comutator-tema svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-soare { display: none; }
:root[data-theme="dark"] .icon-soare { display: block; }
:root[data-theme="dark"] .icon-luna { display: none; }
/* butonul arată modul în care treci: „Mod închis” pe tema deschisă, „Mod deschis” pe tema închisă */
.eticheta-spre-deschis { display: none; }
:root[data-theme="dark"] .eticheta-spre-deschis { display: inline; }
:root[data-theme="dark"] .eticheta-spre-inchis { display: none; }
/* fără JavaScript butonul nu poate funcționa, deci nu îl arătăm */
:root:not([data-theme]) .comutator-tema { display: none; }

.logo { color: inherit; }
.logo-arc { fill: none; }

/* ---------- butoane ---------- */
.buton { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 3.25rem; padding: 0.75rem 1.5rem; border-radius: 999px; font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-size: 1.1875rem; text-decoration: none; }
/* butonul principal e turcoaz (albastrul din logo), cu text Ardezie: contrast 5,1:1 */
.buton-principal { background: var(--turcoaz); color: #28303d; }
.buton-principal:hover { color: #28303d; background: #4fd1c1; }
.buton-principal .icon { width: 1.125em; height: 1.125em; stroke-width: 2.5; }
.buton-secundar { border: 2px solid var(--text); color: var(--text); }
.buton-secundar:hover { background: var(--text); color: var(--fundal); }

/* ---------- erou ---------- */
.erou { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(4rem, 3rem + 5vw, 7rem); overflow: hidden; }
.erou-cadru { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.erou h1 { font-size: clamp(3rem, 1.6rem + 5.6vw, 5.75rem); letter-spacing: -0.025em; line-height: 1.0; }
.erou-lead { margin-top: 1.5rem; font-family: "Nunito", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); line-height: 1.3; max-width: 32rem; text-wrap: pretty; }
.erou-descriere { margin-top: 1.25rem; max-width: 33rem; color: var(--text-2); text-wrap: pretty; }
.erou-roluri { list-style: none; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin: 1.75rem 0 0; padding: 0; font-weight: 600; }
.erou-roluri li { display: flex; align-items: center; gap: 0.625rem; }
.erou-roluri .cerc { width: 2.5rem; height: 2.5rem; }
.erou-roluri .cerc svg { width: 1.25rem; height: 1.25rem; }
.erou-actiuni { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.nota-stand { display: flex; gap: 0.75rem; align-items: flex-start; margin-top: 2rem; max-width: 33rem; padding: 1rem 1.25rem; border-radius: 1.25rem; background: var(--fundal-2); color: var(--text-2); font-size: 1rem; }
.nota-stand .icon { margin-top: 0.15rem; color: var(--coral-text); }
.nota-stand[hidden] { display: none; }

/* reclama */
.erou-vizual { position: relative; margin: 0; justify-self: center; width: 100%; }
.reclama { position: relative; overflow: hidden; border-radius: 1.75rem; background: #11161f; box-shadow: var(--umbra); }
.reclama video { width: 100%; height: auto; }
.reclama-nota { margin-top: 0.875rem; font-size: 0.9375rem; color: var(--text-3); }

/* telefonul cu captura și bula „Ce aude cel din fața ta” */
.telefon { position: relative; border: 0.75rem solid var(--telefon); border-radius: 3rem; background: var(--telefon); overflow: hidden; box-shadow: var(--umbra); }
.telefon img { width: 100%; height: auto; border-radius: 2.25rem; }
.bula {
  position: absolute; left: -2.5rem; bottom: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 0.75rem; align-items: center;
  padding: 1rem 1.5rem 1.125rem 1.125rem; border-radius: 1.75rem 1.75rem 1.75rem 0.5rem;
  background: var(--suprafata); border: 2px solid var(--linie); color: var(--text); box-shadow: var(--umbra);
}
.bula-unde { grid-row: span 2; width: 3.25rem; height: 3.25rem; }
.unda-punct { fill: var(--coral); }
.unda { fill: none; stroke-width: 5; stroke-linecap: round; }
.unda-1 { stroke: var(--galben); }
.unda-2 { stroke: var(--turcoaz); }
.bula-eticheta { font-size: 0.875rem; font-weight: 600; color: var(--text-3); }
.bula-text { font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); line-height: 1.15; }

/* ---------- problema ---------- */
.problema-cadru { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.card-foto { position: relative; margin: 0; border: 3px solid var(--coral); border-radius: 2rem; overflow: hidden; box-shadow: var(--umbra); }
.card-foto img { width: 100%; height: auto; }
.card-foto figcaption {
  position: absolute; inset: auto 0 0 0; display: grid; padding: 3.5rem 1.5rem 1.25rem; color: #fffcf6; font-size: 1rem;
  background: linear-gradient(180deg, rgba(17, 22, 31, 0), rgba(17, 22, 31, 0.85));
}
.card-foto-nume { font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-size: 1.75rem; line-height: 1.1; }
.problema-text h2 { margin-bottom: 1.5rem; }
.problema-text h2 .accent-coral { display: block; }
.problema-text > p { max-width: 40rem; color: var(--text-2); text-wrap: pretty; }
.problema-text > p + p { margin-top: 1rem; }
.cauze { margin-top: 2rem; padding-top: 1.75rem; border-top: 2px solid var(--coral); max-width: 40rem; }
.cauze h3 { font-size: 1.125rem; }
.cauze ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.625rem; margin: 1rem 0 0; padding: 0; }
.cauze li { padding: 0.4rem 1rem; border-radius: 999px; background: var(--chip); font-size: 1rem; font-weight: 500; }

.impact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem clamp(2rem, 5vw, 5rem); align-items: center; margin-top: clamp(4rem, 3rem + 4vw, 6rem); }
.impact-titlu { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.cifra-mare, .cifra-medie { display: grid; gap: 0.5rem; margin-top: 2rem; }
.cifra-mare .cifra-valoare { font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-size: clamp(3.5rem, 2rem + 6vw, 6rem); line-height: 0.95; letter-spacing: -0.02em; }
.cifra-medie { padding-top: 2rem; border-top: 1px solid var(--linie); }
.cifra-medie .cifra-valoare { font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); line-height: 1; }
.cifra-text { max-width: 26rem; color: var(--text-2); font-weight: 500; }
.cercuri { margin: 0; justify-self: center; width: min(100%, 28rem); }
.cercuri ul { position: relative; list-style: none; margin: 0; padding: 0; aspect-ratio: 1; }
.cercuri li { position: absolute; left: 50%; bottom: 0; display: grid; justify-items: center; align-content: start; border-radius: 50%; text-align: center; transform: translateX(-50%); }
.cerc-3 { width: 100%; height: 100%; padding-top: 7%; background: rgba(47, 179, 164, 0.12); border: 2px solid rgba(47, 179, 164, 0.35); }
.cerc-2 { width: 71%; height: 71%; padding-top: 8%; background: rgba(47, 179, 164, 0.2); border: 2px solid rgba(47, 179, 164, 0.5); }
.cercuri .cerc-1 { width: 40%; height: 40%; align-content: center; background: var(--turcoaz); color: #28303d; }
.cerc-valoare { font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); line-height: 1.1; }
.cerc-eticheta { font-size: 0.875rem; font-weight: 500; color: var(--text-2); max-width: 11rem; line-height: 1.3; margin-top: 0.25rem; }
.cerc-1 .cerc-eticheta { color: #28303d; font-weight: 600; }
.cercuri figcaption { margin-top: 1rem; text-align: center; font-size: 0.9375rem; color: var(--text-3); }
.sursa { grid-column: 1 / -1; font-size: 0.875rem; color: var(--text-3); max-width: 46rem; }

/* ---------- cum funcționează ---------- */
.pasi { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem; margin: 3rem 0 0; padding: 0; }
.pas { position: relative; padding: 1.5rem; border: 2px solid var(--linie); border-radius: 1.5rem; background: var(--suprafata); }
.pas-coral { border-color: var(--coral); }
.pas-lavanda { border-color: var(--lavanda); }
.pas-prun { border-color: var(--prun); }
.pas-verde { border-color: var(--verde); }
.pas-cap { display: flex; align-items: center; justify-content: space-between; }
.pas-nr { font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-size: 2rem; line-height: 1; }
.pas-coral .pas-nr { color: var(--coral-text); }
.pas-lavanda .pas-nr { color: var(--lavanda-text); }
.pas-prun .pas-nr { color: var(--prun-text); }
.pas-verde .pas-nr { color: var(--verde-text); }
.pas h3 { margin-top: 1.25rem; font-size: 1.5rem; }
.pas p { margin-top: 0.5rem; color: var(--text-2); font-size: 1rem; line-height: 1.55; }
/* săgeata dintre pași */
.pas:not(:last-child)::after {
  content: ""; position: absolute; top: 2.75rem; right: -1.3rem; width: 0.625rem; height: 0.625rem;
  border-top: 2px solid var(--text-3); border-right: 2px solid var(--text-3); transform: rotate(45deg);
}

.cum-jos { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; margin-top: clamp(3.5rem, 3rem + 3vw, 5.5rem); }
/* două telefoane suprapuse: ecranul principal în spate, conversația în față */
.cum-telefoane { position: relative; display: grid; margin: 0 0 0 1.5rem; padding-bottom: 3rem; justify-self: center; width: min(100% - 1.5rem, 30rem); }
.cum-telefoane .telefon { grid-area: 1 / 1; width: 58%; }
.telefon-acasa { justify-self: start; align-self: start; transform: rotate(-3deg); transform-origin: 50% 100%; }
.telefon-conversatie { justify-self: end; margin-top: 3.5rem; z-index: 1; }
.cum-telefoane .bula { left: -1.5rem; z-index: 2; }
.timp { display: flex; gap: 1.25rem; align-items: flex-start; padding: 1.5rem; border: 2px solid var(--galben); border-radius: 1.5rem; }
.timp p { color: var(--text-2); }
.timp-valoare { display: block; margin-bottom: 0.25rem; font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); line-height: 1.05; color: var(--galben-text); }
.garantii { list-style: none; display: grid; gap: 1.25rem; margin: 2rem 0 0; padding: 0; }
.garantii li { display: flex; gap: 1rem; align-items: flex-start; color: var(--text-2); }
.garantii .icon { width: 1.5rem; height: 1.5rem; margin-top: 0.1rem; color: var(--turcoaz-text); }
.garantii strong { display: block; }

/* ---------- tehnologia din spate: mereu pe fundal închis, ca slide-ul din pitch ---------- */
.sectiune-ardezie {
  --fundal: #28303d; --fundal-2: #2d3644; --suprafata: #323b4a; --chip: #3a4454;
  --text: #fffcf6; --text-2: #d5d9e0; --text-3: #b3bac6; --linie: #4a5466;
  --coral-text: #ff8b7a; --galben-text: #ffc93c; --turcoaz-text: #4fd1c1;
  --lavanda-text: #a0bae6; --prun-text: #d2a6bc; --verde-text: #8ebd79; --salvie-text: #a0b9a0;
  --link: #ffc93c; --link-hover: #fffcf6; --focus: #ffc93c;
  color-scheme: dark; background: var(--fundal); color: var(--text);
}
:root[data-theme="dark"] .sectiune-ardezie { --fundal: #1f2530; --suprafata: #2a3240; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sectiune-ardezie { --fundal: #1f2530; --suprafata: #2a3240; } }
.tehnologia-cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.insigna { display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.625rem 1.25rem; border: 2px solid var(--galben); border-radius: 999px; font-weight: 600; }
.insigna svg { width: 1.375rem; height: 1.375rem; fill: var(--galben); }

.arh {
  position: relative; display: grid; margin: 3rem 0 0; padding-right: 1.25rem;
  grid-template-columns: minmax(0, 1fr) 3.5rem minmax(0, 1.2fr) 3.5rem minmax(0, 1fr) 3rem minmax(0, 1fr);
  grid-template-rows: 3.75rem 1fr 1fr auto; row-gap: 1.125rem;
}
.arh-server {
  grid-column: 2 / 8; grid-row: 1 / 4; margin: 0 -1.25rem -1.25rem 1.75rem; padding: 1rem 1.25rem;
  border: 2px dashed var(--linie); border-radius: 1.25rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem;
}
.arh-server-titlu { font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-size: 1.1875rem; }
.arh-server-nota { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--text-3); font-size: 0.9375rem; }
.arh-server-nota .icon { width: 1rem; height: 1rem; }
.arh-nod {
  position: relative; z-index: 2; display: grid; align-content: center; gap: 0.125rem; padding: 1rem 1.125rem;
  border: 2px solid var(--linie); border-radius: 1rem; background: var(--suprafata); font-size: 0.9375rem; color: var(--text-3); line-height: 1.4;
}
.arh-nod strong { font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-size: 1.1875rem; line-height: 1.2; color: var(--text); }
.arh-tip { font-weight: 600; font-size: 0.875rem; }
.arh-app { grid-column: 1; grid-row: 2 / 4; align-self: center; border-color: var(--galben); }
.arh-app .arh-tip { color: var(--galben-text); }
.arh-date { grid-column: 1; grid-row: 4; border-color: var(--salvie); }
.arh-date .arh-tip { color: var(--salvie-text); }
.arh-audio { grid-column: 3; grid-row: 2; border-color: var(--coral); }
.arh-audio .arh-tip { color: var(--coral-text); }
.arh-video { grid-column: 3; grid-row: 3; border-color: var(--turcoaz); }
.arh-video .arh-tip { color: var(--turcoaz-text); }
.arh-fuziune { grid-column: 5; grid-row: 2 / 4; align-self: center; border-color: var(--prun); }
.arh-fuziune .arh-tip { color: var(--prun-text); }
.arh-voce { grid-column: 7; grid-row: 2 / 4; align-self: center; border-color: var(--verde); }
.arh-voce .arh-tip { color: var(--verde-text); }
/* vârfurile săgeților */
.arh-audio::before, .arh-video::before, .arh-fuziune::before, .arh-voce::before {
  content: ""; position: absolute; left: -0.7rem; top: 50%; transform: translateY(-50%);
  border-left: 0.6rem solid var(--c); border-block: 0.42rem solid transparent;
}
.arh-audio { --c: var(--coral); }
.arh-video { --c: var(--turcoaz); }
.arh-fuziune { --c: var(--prun); }
.arh-voce { --c: var(--verde); }
/* legătura aplicație – date: linia pornește din spatele aplicației și intră sub cutia „Date” */
.arh-leg-date { grid-column: 1; grid-row: 2 / 4; position: relative; z-index: 1; }
.arh-leg-date::after { content: ""; position: absolute; left: 50%; top: 50%; bottom: -1.75rem; width: 2px; margin-left: -1px; background: var(--salvie); }
.arh-leg { width: 100%; height: 100%; overflow: visible; }
.arh-leg path { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.arh-leg-1 { grid-column: 2; grid-row: 2 / 4; }
.arh-leg-2 { grid-column: 4; grid-row: 2 / 4; }
.arh-leg-3 { grid-column: 6; grid-row: 2 / 4; }
.leg-coral { stroke: var(--coral); }
.leg-turcoaz { stroke: var(--turcoaz); }
.leg-prun { stroke: var(--prun); }

.decizii { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem clamp(2rem, 5vw, 4rem); margin-top: clamp(3.5rem, 3rem + 3vw, 5rem); }
.decizii > div { padding-top: 1.25rem; border-top: 2px solid var(--linie); }
.decizii > div:nth-child(1) { border-top-color: var(--prun); }
.decizii > div:nth-child(2) { border-top-color: var(--coral); }
.decizii > div:nth-child(3) { border-top-color: var(--lavanda); }
.decizii > div:nth-child(4) { border-top-color: var(--galben); }
.decizii h3 { font-size: 1.3125rem; }
.decizii p { margin-top: 0.625rem; color: var(--text-2); font-size: 1.0625rem; max-width: 34rem; }

/* ---------- rezultate ---------- */
.rezultate-cadru { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; margin-top: 3rem; }
.grafic { margin: 0; padding: clamp(1.25rem, 3vw, 2rem); border-radius: 1.75rem; background: var(--fundal-2); }
.grafic figcaption { display: flex; align-items: center; gap: 0.75rem; font-weight: 600; }
.coloane {
  --h: 14rem;
  list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.75rem, 2vw, 1.5rem);
  margin: 1.5rem 0 0; padding: 0;
}
.coloane li { display: grid; grid-template-rows: calc(var(--h) + 2.5rem) auto; }
.col-bara, .col-valoare { grid-row: 1; grid-column: 1; align-self: end; }
.col-bara { height: calc(var(--h) * var(--p)); border-radius: 0.75rem 0.75rem 0.25rem 0.25rem; background: var(--c); transform-origin: bottom; }
.col-valoare { margin-bottom: calc(var(--h) * var(--p) + 0.5rem); text-align: center; font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-size: clamp(1.125rem, 0.9rem + 1vw, 1.5rem); line-height: 1; color: var(--ct); }
.col-eticheta { grid-row: 2; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 2px solid var(--linie); text-align: center; font-size: 0.9375rem; line-height: 1.35; color: var(--text-2); }
.col-1 { --p: 0.2605; --c: var(--gri); --ct: var(--text-3); }
.col-2 { --p: 0.856; --c: var(--galben); --ct: var(--galben-text); }
.col-3 { --p: 0.9233; --c: var(--turcoaz); --ct: var(--turcoaz-text); }
.col-4 { --p: 0.9372; --c: var(--verde); --ct: var(--verde-text); }
.grafic-nota { margin-top: 1.5rem; font-size: 0.9375rem; color: var(--text-2); }
.rezultate-laturi { display: grid; gap: 2rem; }
.stat { display: flex; gap: 1.25rem; align-items: flex-start; }
.stat p { color: var(--text-2); }
.stat-valoare { display: block; margin-bottom: 0.25rem; font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); line-height: 1.05; }
.citat { display: flex; gap: 1.25rem; align-items: flex-start; margin: 0; padding: 1.5rem; border: 2px solid var(--coral); border-radius: 1.5rem; }
.citat img { flex: none; width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; object-position: 50% 30%; }
.citat p { font-family: "Nunito", system-ui, sans-serif; font-weight: 700; font-size: 1.25rem; line-height: 1.35; text-wrap: pretty; }
.citat footer { margin-top: 0.75rem; font-weight: 600; color: var(--coral-text); }
.onest { margin-top: 2.5rem; padding: 1rem 1.25rem; border-left: 4px solid var(--galben); background: var(--fundal-2); border-radius: 0 1rem 1rem 0; color: var(--text-2); max-width: 46rem; }

/* ---------- drumul ---------- */
.drum-subtitlu { margin-top: 3rem; font-size: 1.5rem; }
.cronologie { position: relative; list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem; margin: 2rem 0 0; padding: 0; }
.cronologie::before { content: ""; position: absolute; left: 8.33%; right: 8.33%; top: 3.85rem; border-top: 2px solid var(--linie); }
.cronologie li { position: relative; display: grid; justify-items: center; align-content: start; gap: 0.5rem; text-align: center; }
.cronologie .cerc { width: 3.5rem; height: 3.5rem; margin-block: 0.25rem 0.5rem; box-shadow: 0 0 0 6px var(--fundal-2); }
.cronologie .cerc svg { width: 1.625rem; height: 1.625rem; }
.cronologie-final .cerc { width: 4.25rem; height: 4.25rem; margin-top: -0.125rem; margin-bottom: 0.125rem; box-shadow: 0 0 0 6px var(--fundal-2), 0 0 0 9px var(--verde); }
.cronologie-final .cerc svg { width: 2.125rem; height: 2.125rem; stroke-width: 2.5; }
.cand { font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-size: 1.25rem; color: var(--text-3); }
.cronologie strong { font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-size: 1.1875rem; line-height: 1.2; }
.cronologie .ce { font-size: 0.9375rem; line-height: 1.45; color: var(--text-2); }

.scara { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; align-items: start; margin: 2rem 0 0; padding: 0; }
.treapta { position: relative; display: grid; align-content: start; gap: 0.375rem; min-height: 15rem; padding: 1.25rem 1.125rem; border: 2px solid var(--linie); border-radius: 1.25rem; background: var(--suprafata); }
.treapta:nth-child(1) { margin-top: 8.75rem; min-height: 9rem; }
.treapta:nth-child(2) { margin-top: 7rem; }
.treapta:nth-child(3) { margin-top: 5.25rem; }
.treapta:nth-child(4) { margin-top: 3.5rem; }
.treapta:nth-child(5) { margin-top: 1.75rem; }
.treapta-nr { font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-size: 2rem; line-height: 1; color: var(--turcoaz-text); margin-bottom: 0.5rem; }
.treapta strong { font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-size: 1.1875rem; line-height: 1.2; }
.treapta-cand { font-weight: 600; font-size: 0.9375rem; color: var(--galben-text); }
.treapta .ce { margin-top: 0.375rem; font-size: 0.9375rem; line-height: 1.45; color: var(--text-2); }
.treapta-urmator { border-color: var(--coral); background: color-mix(in srgb, var(--coral) 8%, var(--suprafata)); }
.treapta-urmator .treapta-nr { color: var(--coral-text); }
.treapta-urmator .treapta-cand { color: var(--coral-text); }
.treapta-viziune { border: 2px dashed var(--galben); }
.insigna-mica { position: absolute; top: 1.25rem; right: 1rem; padding: 0.125rem 0.625rem; border-radius: 999px; background: var(--galben); color: #28303d; font-size: 0.8125rem; font-weight: 600; }

/* ---------- echipa ---------- */
.echipa { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 3rem 0 0; padding: 0; }
.echipa li { display: flex; align-items: center; gap: 1.125rem; padding: 1.125rem; border-radius: 1.25rem; background: var(--fundal-2); }
.echipa img { flex: none; width: 5rem; height: 5rem; border-radius: 50%; object-fit: cover; background: var(--chip); box-shadow: 0 0 0 3px var(--fundal-2), 0 0 0 5px var(--turcoaz); }
.echipa li > span { display: grid; gap: 0.25rem; }
.nume { font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-size: 1.25rem; line-height: 1.2; }
.rol { color: var(--turcoaz-text); font-size: 0.9375rem; font-weight: 600; line-height: 1.35; }
.multumiri-titlu { margin-top: 4rem; font-size: 1.75rem; }
.multumiri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.multumire { display: flex; gap: 1.25rem; align-items: flex-start; padding: 1.5rem; border: 2px solid var(--linie); border-radius: 1.5rem; }
.multumire:first-child { border-color: var(--coral); }
.multumire:last-child { border-color: var(--turcoaz); }
.multumire img { flex: none; width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; object-position: 50% 30%; }
.multumire-nume { font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-size: 1.375rem; line-height: 1.2; margin-bottom: 0.5rem; }
.multumire p:not(.multumire-nume) { color: var(--text-2); }

/* ---------- contact ---------- */
.contacte { list-style: none; display: grid; gap: 1.25rem; margin: 2rem 0 0; padding: 0; }
.contacte a { display: inline-flex; align-items: center; gap: 1rem; font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-size: clamp(1rem, 4.1vw, 1.75rem); overflow-wrap: anywhere; }

/* ---------- subsol cu credite ---------- */
.subsol { padding-block: 3.5rem 2.5rem; background: var(--fundal); border-top: 1px solid var(--linie); color: var(--text-2); font-size: 0.9375rem; }
.subsol-sus { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 2rem; }
.subsol-logo { color: var(--text); }
.subsol-logo .logo { width: 5.5rem; height: auto; }
.subsol-marca p { margin-top: 0.75rem; font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-size: 1.125rem; color: var(--text); }
.subsol-coloana h2 { font-size: 1rem; letter-spacing: 0; margin-bottom: 0.75rem; color: var(--text); }
.subsol-coloana ul { list-style: none; display: grid; gap: 0.5rem; margin: 0; padding: 0; line-height: 1.45; }
.subsol-jos { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); color: var(--text-3); }

/* ---------- culori de accent pentru text (la final, ca să aibă prioritate) ---------- */
.accent-coral { color: var(--coral-text); }
.accent-galben { color: var(--galben-text); }
.accent-lavanda { color: var(--lavanda-text); }
.accent-prun { color: var(--prun-text); }
.accent-verde { color: var(--verde-text); }
.accent-salvie { color: var(--salvie-text); }
.accent-turcoaz { color: var(--turcoaz-text); }

/* ---------- animații: puține și cu rost, doar dacă JavaScript rulează și utilizatorul nu a cerut mișcare redusă ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* undele din bulă „vorbesc” o dată */
  .unda-punct { animation: apare 0.4s ease-out both 0.3s; }
  .unda-1 { animation: apare 0.4s ease-out both 0.55s; }
  .unda-2 { animation: apare 0.4s ease-out both 0.8s; }
  @keyframes apare { from { opacity: 0; transform: scale(0.6); transform-origin: 20% 50%; } to { opacity: 1; transform: none; } }

  /* pașii se aprind pe rând, în ordinea în care lucrează aplicația */
  .js .pasi .pas { transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
  .js .pasi .cerc { transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
  .js .pasi:not(.e-vizibil) .pas { opacity: 0.25; transform: translateY(0.5rem); }
  .js .pasi:not(.e-vizibil) .cerc { transform: scale(0.5); }
  .js .pasi .pas:nth-child(2), .js .pasi .pas:nth-child(2) .cerc { transition-delay: 0.3s; }
  .js .pasi .pas:nth-child(3), .js .pasi .pas:nth-child(3) .cerc { transition-delay: 0.6s; }
  .js .pasi .pas:nth-child(4), .js .pasi .pas:nth-child(4) .cerc { transition-delay: 0.9s; }

  /* barele cresc până la valoarea lor */
  .js .coloane .col-bara { transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
  .js .coloane .col-valoare { transition: opacity 0.4s ease-out; }
  .js .coloane:not(.e-vizibil) .col-bara { transform: scaleY(0); }
  .js .coloane:not(.e-vizibil) .col-valoare { opacity: 0; }
  .js .coloane li:nth-child(2) .col-bara { transition-delay: 0.15s; }
  .js .coloane li:nth-child(3) .col-bara { transition-delay: 0.3s; }
  .js .coloane li:nth-child(4) .col-bara { transition-delay: 0.45s; }
  .js .coloane .col-valoare { transition-delay: 0.9s; }

  /* legăturile din schemă se desenează în sensul în care circulă datele */
  .js .arh-leg path { stroke-dasharray: 100; transition: stroke-dashoffset 0.7s ease-out; }
  .js .arh:not(.e-vizibil) .arh-leg path { stroke-dashoffset: 100; }
  .js .arh-leg-2 path { transition-delay: 0.6s; }
  .js .arh-leg-3 path { transition-delay: 1.2s; }
}

/* ---------- ecrane medii ---------- */
@media (max-width: 75rem) {
  .meniu { gap: 1rem; font-size: 0.9375rem; }
  .subsol-sus { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .subsol-marca { grid-column: 1 / -1; }
}
@media (max-width: 64rem) {
  .meniu { display: none; }
  .comutator-tema { margin-left: auto; }
  .erou-cadru { grid-template-columns: minmax(0, 1fr); }
  .erou-vizual { max-width: 40rem; justify-self: start; }
  .pasi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pas:nth-child(2)::after { display: none; }
  .rezultate-cadru, .impact { grid-template-columns: minmax(0, 1fr); }
  .cronologie { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cronologie::before { left: 1.75rem; right: auto; top: 1rem; bottom: 1rem; border-top: 0; border-left: 2px solid var(--linie); }
  .cronologie li { grid-template-columns: 3.5rem minmax(0, 1fr); justify-items: start; column-gap: 1.25rem; row-gap: 0.125rem; padding-bottom: 1.75rem; text-align: left; }
  .cronologie li > .cerc { grid-row: 1 / span 3; grid-column: 1; margin: 0; justify-self: center; }
  .cronologie li > .cand, .cronologie li > strong, .cronologie li > .ce { grid-column: 2; }
  .cronologie .cand { font-size: 1.0625rem; }
  .cronologie-final .cerc { width: 3.5rem; height: 3.5rem; margin: 0; }
  .cronologie-final .cerc svg { width: 1.75rem; height: 1.75rem; }
  .scara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .treapta { min-height: 0; margin-top: 0 !important; }
  .echipa { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* schema devine verticală */
  .arh { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto auto auto; column-gap: 1rem; row-gap: 2rem; padding-right: 0; }
  .arh-leg { display: none; }
  .arh-app { grid-column: 1; grid-row: 1; align-self: stretch; }
  .arh-date { grid-column: 2; grid-row: 1; }
  .arh-leg-date { display: none; }
  .arh-date::after { content: ""; position: absolute; right: 100%; top: 50%; width: 1rem; height: 2px; margin-right: 2px; background: var(--salvie); }
  .arh-server { grid-column: 1 / -1; grid-row: 2 / 6; margin: 0 -0.875rem -0.875rem; padding: 0.875rem; align-self: stretch; }
  .arh-audio { grid-column: 1; grid-row: 3; margin-top: -0.75rem; }
  .arh-video { grid-column: 2; grid-row: 3; margin-top: -0.75rem; }
  .arh-fuziune { grid-column: 1 / -1; grid-row: 4; }
  .arh-voce { grid-column: 1 / -1; grid-row: 5; }
  .arh-audio::before, .arh-video::before, .arh-fuziune::before, .arh-voce::before {
    left: 50%; top: -0.75rem; transform: translateX(-50%);
    border-left: 0.42rem solid transparent; border-right: 0.42rem solid transparent; border-top: 0.6rem solid var(--c); border-bottom: 0;
  }
  .arh-server-titlu { padding-top: 0.25rem; }
}
@media (max-width: 48rem) {
  body { font-size: 1.0625rem; }
  .problema-cadru, .cum-jos, .decizii, .multumiri { grid-template-columns: minmax(0, 1fr); }
  .card-foto { max-width: 22rem; }
  .pasi { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .pas::after { display: none; }
  .cum-telefoane { width: min(100% - 1rem, 24rem); margin-left: 1rem; }
  .cum-telefoane .bula { left: -1rem; }
  .coloane { --h: 11rem; }
  .col-eticheta { font-size: 0.8125rem; }
  .scara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .echipa { grid-template-columns: minmax(0, 1fr); }
  .subsol-sus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* pe telefon rămâne doar iconița; textul e ascuns vizual, dar cititoarele de ecran îl citesc */
  .eticheta-tema { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .comutator-tema { padding-inline: 0.75rem; }
}
@media (max-width: 30rem) {
  .arh-nod { padding: 0.875rem; }
  .arh-nod strong { font-size: 1.0625rem; }
  .scara { grid-template-columns: minmax(0, 1fr); }
  .subsol-sus { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- pagina 404 ---------- */
.pagina-404 { display: grid; gap: 1.5rem; justify-items: start; }
.pagina-404 .logo { width: 7rem; height: auto; }
.pagina-404 h1 { font-size: clamp(2.5rem, 1.5rem + 4vw, 4rem); }