/* ═════════════════════════════════════════════════════════
   informs - Doar pagina principala: hero cu imagine, intro, piloni,
   lista de probleme, contoare, grila de instrumente.
   ═════════════════════════════════════════════════════════ */

/* Hero: imaginea cu foi de hârtie acoperă toată secțiunea. E trecută
   în alb-negru și pusă peste navy (luminosity), deci iese în tonurile
   brandului indiferent de culorile originale; peste ea, un strat
   violet-navy mai dens în stânga, unde e textul. */
.hero {
  position: relative;
  isolation: isolate;
  margin-top: calc(var(--hdr-h) * -1);
  padding-top: calc(var(--hdr-h) + 112px);
  min-height: min(92vh, 860px);
  display: flex;
  align-items: center;
  background: var(--navy-800);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.hero__bg,
.hero::after {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: luminosity;
  opacity: .9;
}

.hero::after {
  content: "";
  background:
    linear-gradient(90deg, rgba(12, 0, 50, .92) 0%, rgba(12, 0, 50, .72) 42%, rgba(21, 0, 70, .12) 100%),
    rgba(93, 22, 179, .16);
}

.hero__grid { display: block; width: 100%; }

.hero__main { max-width: 820px; padding-bottom: 112px; }

.hero__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  max-width: none;
}

.hero__lead {
  margin-top: 24px;
  max-width: 46ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: #E4DFF2;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

.hero__cta .btn:hover .ico-arrow { transform: translateX(4px); }

.sect--intro { padding-top: 80px; }

.intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 64px;
  align-items: start;
}

.intro__title {
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -1.2px;
  font-weight: 400;
  color: var(--white);
  max-width: 22ch;
}

.intro__lead { margin-top: 22px; max-width: 56ch; }

.intro__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.intro__right { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.pcard {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--navy-700);
}

.pcard__art { position: absolute; inset: 0; }

.pcard figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 12px 12px;
  background: linear-gradient(0deg, rgba(0,0,0,.72), rgba(0,0,0,0));
  display: flex; flex-direction: column;
  font-size: 12px; color: var(--white);
}

.pcard figcaption strong { font-weight: 600; font-size: 13px; }

.pcard figcaption span { color: var(--muted-2); }

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 88px;
}

/* Fără cutie: o linie deasupra ține coloanele împreună. */
.pillar {
  display: flex;
  flex-direction: column;
  padding-top: 26px;
  border-top: 1px solid var(--line-str);
}

.pillar .lnk { margin-top: auto; align-self: flex-start; }

.pillar h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 500;
  margin-bottom: 12px;
}

.pillar p { margin-bottom: 20px; color: var(--muted); }

.stats__title { max-width: 18ch; }

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 64px;
}

.stat {
  padding-top: 28px;
  border-top: 1px solid var(--line-str);
}

.stat__num {
  display: block;
  font-family: var(--f-head);
  font-size: 80px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -1.6px;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  display: block;
  margin-top: 14px;
  font-size: 16px;
  color: var(--muted-2);
}

/* „Unde se pierd procedurile”: listă editorială, nu grilă de carduri.
   Titlul în stânga, explicația în dreapta, rânduri despărțite de linii. */
.issues { border-bottom: 1px solid var(--line-str); }

.issue {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  padding-block: 32px;
  border-top: 1px solid var(--line-str);
}

.issue__title {
  font-size: 26px;
  line-height: 34px;
  letter-spacing: -.4px;
}

.issue__text {
  max-width: 60ch;
  font-size: 17px;
  line-height: 27px;
  color: var(--muted);
}

.work__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 56px;
}

.work__head .h2 { max-width: 20ch; }

/* ── Carusel de carduri înalte ────────────────────────────────
   Derulare nativă cu scroll-snap: merge cu degetul, cu trackpadul
   și cu tastatura (pista are tabindex). JS doar sincronizează
   punctele și săgețile. Pe desktop se vede marginea cardului
   următor, ca să fie clar că rândul continuă. */
.car__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * 24px) / 3.25);
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.car__track::-webkit-scrollbar { display: none; }

.car__track:focus-visible { outline-offset: 6px; }

.car__slide { scroll-snap-align: start; }

.fcard {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 4 / 5;
  border-radius: var(--card-r);
  overflow: hidden;
  isolation: isolate;
  background: var(--navy-800);
}

/* imaginea umple cardul: acum ilustrație CSS, apoi <img> cu randarea.
   Două clase, pentru că art.css (încărcat după) pune `.art` pe relative. */
.fcard .fcard__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-out);
}

/* treimea de jos întunecată, ca titlul să se citească pe orice imagine */
.fcard::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(12, 0, 50, .92), rgba(12, 0, 50, 0));
}

.fcard:hover .fcard__media { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .fcard:hover .fcard__media { transform: none; }
}

.fcard__body { padding: 28px 28px 30px; }

.fcard__tag { margin-bottom: 10px; font-size: 14px; font-weight: 500; color: var(--muted-2); }

.fcard__title {
  font-family: var(--f-head);
  font-size: 24px;
  line-height: 31px;
  font-weight: 500;
  color: var(--white);
}

.fcard__chev {
  display: inline-block;
  margin-left: 4px;
  color: #8FB6FF;
  transition: transform .25s var(--ease);
}

.fcard:hover .fcard__chev { transform: translateX(4px); }

.car__ctrl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 28px;
}

.car__dots { display: flex; gap: 0; }

/* zona de apăsat are 24px (minimul WCAG); punctul vizibil rămâne
   de 10px, desenat doar în content-box */
.car__dot {
  width: 24px; height: 24px;
  padding: 7px;
  border-radius: 12px;
  background-clip: content-box;
  background: rgba(255, 255, 255, .3) content-box;
  transition: width .25s var(--ease), background-color .25s var(--ease);
}

.car__dot:hover { background: rgba(255, 255, 255, .6) content-box; }

.car__dot[aria-current="true"] { width: 42px; background: var(--white) content-box; }

.car__arrows { display: flex; gap: 10px; }

.car__arrow {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-str);
  color: var(--white);
  transition: border-color .2s var(--ease), opacity .2s var(--ease);
}

.car__arrow:hover { border-color: var(--white); }

.car__arrow:disabled { opacity: .3; cursor: default; border-color: var(--line-str); }

.car__arrow svg { width: 20px; height: 20px; }

/* când toate cardurile încap, controalele nu au ce face */
.car.is-static .car__ctrl { display: none; }

@media (max-width: 1200px) {
  .intro { grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; }
  .intro__title { font-size: 40px; line-height: 48px; }
  .issue { gap: 40px; }
}

@media (max-width: 1023px) {
  .hero { padding-top: calc(var(--hdr-h) + 64px); min-height: 0; }
  .hero__main { padding-bottom: 72px; }
  .hero::after { background: rgba(12, 0, 50, .72); }
  .intro { grid-template-columns: 1fr; gap: 40px; }
  .intro__right { max-width: 420px; }
  .pillars { grid-template-columns: 1fr; gap: 36px; margin-top: 56px; }
  .stat__num { font-size: 56px; }
  .issue { grid-template-columns: 1fr; gap: 10px; padding-block: 26px; }
  .issue__title { font-size: 22px; line-height: 30px; }
  .work__head { flex-direction: column; align-items: flex-start; }
  .car__track { grid-auto-columns: calc((100% - 20px) / 2.2); gap: 20px; }
}

@media (max-width: 640px) {
  .hero { padding-top: calc(var(--hdr-h) + 36px); }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .intro__title { font-size: 30px; line-height: 37px; letter-spacing: -.6px; }
  .intro__cta { flex-direction: column; align-items: stretch; }
  .intro__right { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .stats { grid-template-columns: 1fr; gap: 26px; }
  .stat { padding-top: 22px; }
  .stat__num { font-size: 48px; }
  .issue__text { font-size: 16px; line-height: 25px; }
  /* pe telefon: un card și marginea următorului; cardurile ies până la
     marginea ecranului, ca la derularea cu degetul */
  .car__track {
    grid-auto-columns: 82%;
    gap: 14px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .car__arrows { display: none; }
  .car__ctrl { justify-content: center; }
  .fcard__body { padding: 22px 22px 24px; }
  .fcard__title { font-size: 21px; line-height: 28px; }
}