/* ═════════════════════════════════════════════════════════
   informs - Fundatie: tokeni, reset, primitive, butoane, utilitare.
   Se incarca prima, pe toate paginile.
   ═════════════════════════════════════════════════════════ */

:root {
  /* culori */
  --navy-900: #0C0032;
  --navy-800: #150046;
  --navy-700: #1C0A55;
  --navy-600: #251072;
  --purple:   #5D16B3;
  --purple-lt:#7B32D6;
  --blue:     #065AF7;
  --blue-deep:#043799;
  --blue-hover:#0A4FD6;
  /* albastru pentru text mic pe navy: --blue are doar 3,1-3,6:1 acolo */
  --blue-text:#6E9BFF;
  --yellow:   #FFD400;

  --ink:      #212121;
  --white:    #FFFFFF;
  --muted:    #D2CCE6;
  --muted-2:  #BEB6D9;
  --muted-3:  rgba(210, 204, 230, .5);
  --line:     rgba(210, 204, 230, .18);
  --line-str: rgba(210, 204, 230, .32);

  /* tipografie */
  /* serif doar pentru titlurile mari (h1, h2): tonul unui text juridic
     tipărit; h3 și interfața rămân pe Poppins și DM Sans */
  --f-display: "Newsreader", Georgia, "Times New Roman", serif;
  --f-head: "Poppins", system-ui, sans-serif;
  --f-body: "DM Sans", system-ui, sans-serif;

  --fs-h1: 76px;   --lh-h1: 80px;  --ls-h1: -1.4px;
  --fs-h2: 64px;   --lh-h2: 70px;  --ls-h2: -1.2px;
  --fs-h3: 20px;   --lh-h3: 24px;
  --fs-body: 16px; --lh-body: 1.333;
  --fs-lead: 18px; --lh-lead: 27px;

  /* layout */
  --container: 1400px;
  --gutter: 40px;
  --sect-lg: 96px;
  --sect-md: 70px;
  --sect-sm: 40px;

  /* componente */
  --btn-h: 56px;
  --btn-r: 28px;
  --card-r: 20px;

  --hdr-h: 84px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Cu Lenis activ (js/smooth-scroll.js), animația o face el: derularea
   lină a browserului ar anima fiecare pas al lui încă o dată. */
html.lenis { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--muted);
  background: var(--navy-900);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--f-head);
  font-weight: 400;
  color: var(--white);
  margin: 0;
}

h1, h2 { font-family: var(--f-display); }

h1, h2, h3, h4 { text-wrap: balance; }

p { margin: 0; text-wrap: pretty; }

ul, ol { margin: 0; padding: 0; list-style: none; }

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

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--white); color: var(--ink);
  padding: 12px 20px; border-radius: 0 0 12px 0; font-weight: 600;
}

.skip-link:focus { left: 0; }

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

.sect { padding-block: var(--sect-md); position: relative; }

.h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}

/* Eticheta de secțiune: text normal, cu linia albastră din imaginea
   de share în față. Înlocuiește majusculele spațiate, care apăreau
   deasupra fiecărei secțiuni și se citeau ca șablon. */
.kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--muted-2);
  margin-bottom: 16px;
}

.kicker::before {
  content: "";
  flex: none;
  width: 24px;
  height: 2px;
  background: var(--blue);
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--muted);
}

.ico-arrow { width: 16px; height: 16px; flex: none; transition: transform .25s var(--ease); }

.ico-caret { width: 10px; height: 6px; flex: none; transition: transform .25s var(--ease); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--btn-h);
  padding-inline: 24px;
  border-radius: var(--btn-r);
  font-family: var(--f-body);
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .22s var(--ease);
}

.btn:hover { transform: translateY(-1px); }

.btn:active { transform: translateY(0); }

/* Același buton sub două nume: --primary în chrome (header, drawer,
   inclusiv în aplicația React), --blue în conținutul paginilor. */
.btn--primary, .btn--blue { background: var(--blue); color: var(--white); border-color: var(--blue); }

.btn--primary:hover, .btn--blue:hover { background: var(--blue-hover); border-color: var(--blue-hover); }

.btn--light { background: var(--white); color: #000; }

.btn--light:hover { background: var(--muted); }

.btn--ghost { background: transparent; color: var(--white); border-color: var(--white); }

.btn--ghost:hover { background: var(--white); color: #000; }

.btn--outline { background: transparent; color: var(--white); border-color: var(--line-str); }

.btn--outline:hover { border-color: var(--white); background: rgba(255,255,255,.06); }

.btn--sm { height: 40px; font-size: 15px; padding-inline: 20px; border-radius: 20px; }

.lnk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color .22s var(--ease), color .22s var(--ease);
}

.lnk:hover { border-color: currentColor; }

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

/* „html” ridică specificitatea peste tranzițiile proprii ale cardurilor
   (.cap, .fcard...), care altfel anulau apariția: cardul sărea direct
   la opacitate 1. După apariție, scriptul scoate atributul, iar cardul
   își recapătă tranzițiile de hover. */
html [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}

html [data-reveal].is-in { opacity: 1; transform: none; }

/* Intrarea din primul ecran (hero acasă și antetul paginilor
   interioare): titlul, apoi textul, apoi butoanele, la 120 ms unul
   după altul. Animație CSS, deci pornește fără să aștepte scriptul. */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.hero__main > *,
.phero__main > *,
.phero__facts {
  animation: riseIn .8s var(--ease-out) both;
}

.hero__main > :nth-child(2), .phero__main > :nth-child(2) { animation-delay: .12s; }
.hero__main > :nth-child(3), .phero__main > :nth-child(3) { animation-delay: .24s; }
.hero__main > :nth-child(4), .phero__main > :nth-child(4) { animation-delay: .36s; }
.hero__main > :nth-child(n+5), .phero__main > :nth-child(n+5) { animation-delay: .48s; }
.phero__facts { animation-delay: .36s; }

@media (max-width: 1200px) {
  :root { --fs-h1: 64px; --lh-h1: 68px; --fs-h2: 52px; --lh-h2: 58px; --ls-h2: -1px; }
}

@media (max-width: 1023px) {
  :root { --gutter: 24px; --sect-md: 56px; --sect-lg: 72px; --fs-h1: 54px; --lh-h1: 58px; --fs-h2: 42px; --lh-h2: 48px; }
}

@media (max-width: 640px) {
  :root { --gutter: 20px; --fs-h1: 44px; --lh-h1: 48px; --ls-h1: -.8px; --fs-h2: 34px; --lh-h2: 40px; --ls-h2: -.6px; --btn-h: 50px; --btn-r: 25px; --fs-lead: 16px; --lh-lead: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
  html [data-reveal] { opacity: 1; transform: none; }
  .hero__main > *, .phero__main > *, .phero__facts { animation: none; }
}

/* ── Pagini interioare (mutat din service.css) ── */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}