/* ============================================================
   Base — reset, tipografie, layout, utilitare, motion
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
  /* `clip`, nu `hidden`: taie ce iese lateral (ilustrații care depășesc puțin,
     benzi decorative) fără să creeze un container de derulare, deci antetul
     lipicios continuă să funcționeze. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  font-feature-settings: 'ss01' 1, 'cv01' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--track-tight);
  line-height: var(--lh-snug);
  text-wrap: balance;
}
h1 { font-size: var(--t-2xl); line-height: var(--lh-tight); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }

p { margin: 0 0 var(--s-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

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

.link {
  color: var(--ink-900);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: var(--sun-400);
  transition: text-decoration-color var(--d-fast) var(--ease-smooth), color var(--d-fast);
}
.link:hover { text-decoration-color: var(--red-500); color: var(--red-600); }

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

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

/* `fieldset` are o lățime minimă intrinsecă impusă de browser, care îl împiedică
   să se strângă sub conținut și scoate formularele din ecran pe telefon. */
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; }

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

strong, b { font-weight: 700; }

table { border-collapse: collapse; width: 100%; }

::selection { background: var(--sun-300); color: var(--ink-900); }

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--sky-500);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* Scrollbar discret, pe tonul brandului */
* { scrollbar-width: thin; scrollbar-color: var(--ink-200) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--ink-200);
  border: 3px solid var(--bg);
  border-radius: var(--r-pill);
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }

/* ── Layout ──────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--maxw-narrow); }
.wrap--wide { max-width: 1560px; }

.section { padding-block: var(--section-y); position: relative; }
.section--paper { background: var(--paper); }
.section--tight { padding-block: clamp(2.25rem, 5vw, 4rem); }

.stack > * + * { margin-top: var(--flow, var(--s-4)); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--gap, var(--s-3)); align-items: center; }
.grid { display: grid; gap: var(--gap, var(--s-5)); }

/* ── Eyebrow / titluri de sectiune ───────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-500);
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--accent, var(--sun-400));
}

.section-head { max-width: 62ch; margin-bottom: var(--s-7); }
.section-head__title { margin-top: var(--s-3); }
.section-head__sub { margin-top: var(--s-4); color: var(--text-soft); font-size: var(--t-md); }

/* Cuvânt evidențiat cu marker tras de mână.
   E o bandă SVG neregulată pusă ca fundal, nu un pseudo-element absolut:
   așa se rupe corect când textul trece pe rândul următor (`box-decoration-break`),
   stă mereu pe linia de bază și nu arată niciodată a text tăiat. */
.mark {
  display: inline;
  padding-inline: 0.14em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M0.6 6.2Q18 1.6 47 4.1T99.4 2.9L99 9.4Q62 12.2 33 10.4T1.2 11.5Z' fill='%23ffdb6e'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 94%;
  background-size: 100% 0.4em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.mark--red {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M0.6 6.2Q18 1.6 47 4.1T99.4 2.9L99 9.4Q62 12.2 33 10.4T1.2 11.5Z' fill='%23ff9188'/%3E%3C/svg%3E");
}
.mark--mint {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M0.6 6.2Q18 1.6 47 4.1T99.4 2.9L99 9.4Q62 12.2 33 10.4T1.2 11.5Z' fill='%23a8ecc7'/%3E%3C/svg%3E");
}

/* Text taiat, pentru preturi vechi */
.strike { color: var(--text-mute); text-decoration: line-through; text-decoration-color: var(--red-500); }

/* ── Iconite (sprite) ────────────────────────────────── */
.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--sm { width: 1em; height: 1em; }
.icon--lg { width: 1.75em; height: 1.75em; stroke-width: 1.6; }
.icon--xl { width: 2.5em; height: 2.5em; stroke-width: 1.4; }
.icon--fill { fill: currentColor; stroke: none; }

/* `hidden` trebuie să ascundă, punct.
   Browserul îl aplică printr-o regulă slabă (`[hidden] { display: none }`), pe
   care orice clasă cu `display: flex/grid` o bate. Așa ajungeau pe ecran bara
   de anulare din coș și caseta de eroare, goale, fără ca nimeni să le ceară. */
[hidden] { display: none !important; }

/* ── Utilitare ───────────────────────────────────────── */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--s-4);
  z-index: var(--z-toast);
  padding: var(--s-3) var(--s-5);
  background: var(--ink-900);
  color: var(--sun-400);
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-weight: 700;
}
.skip-link:focus-visible { top: 0; }

.text-center { text-align: center; }
.text-soft { color: var(--text-soft); }
.text-mute { color: var(--text-mute); }
.text-sm { font-size: var(--t-sm); }
.text-xs { font-size: var(--t-xs); }
.no-wrap { white-space: nowrap; }
.hide { display: none !important; }
@media (max-width: 719px) { .hide-mobile { display: none !important; } }
@media (min-width: 720px) { .hide-desktop { display: none !important; } }

.tabnum { font-variant-numeric: tabular-nums; }

/* ── Motion la scroll (folosit prin data-reveal) ───────
   Ascunderea se aplică DOAR când JavaScript e pornit (clasa `has-js` e pusă
   în <head>). Fără JS conținutul se vede normal, fără animație. */
.has-js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity var(--d-lazy) var(--ease-smooth),
    transform var(--d-lazy) var(--ease-smooth);
  transition-delay: calc(var(--reveal-delay, 0) * 70ms);
  will-change: opacity, transform;
}
.has-js [data-reveal='left']  { transform: translate3d(-28px, 0, 0); }
.has-js [data-reveal='right'] { transform: translate3d(28px, 0, 0); }
.has-js [data-reveal='zoom']  { transform: scale(0.94); }
.has-js [data-reveal='tilt']  { transform: translate3d(0, 26px, 0) rotate(-1.4deg); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* Parallax discret: --py e setat din motion.js */
[data-parallax] { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

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

@media print {
  .site-header, .site-footer, .wa-float, .cookie-bar { display: none !important; }
  body { color: #000; }
}