/* CatEconomisesc.ro — stilurile paginilor.
   Tokenii și clasele de sistem vin din styles.css (Broadsheet), încărcat înainte.
   Mobile-first, fără media queries: coloanele se fac cu auto-fit + flex-wrap.
   Singurele @media sunt cele de preferință (prefers-reduced-motion). */

:root {
  /* Cerneala la procente — aceleași color-mix-uri ca în prototip. */
  --ink-25: color-mix(in srgb, var(--color-text) 25%, transparent);
  --ink-30: color-mix(in srgb, var(--color-text) 30%, transparent);
  --ink-45: color-mix(in srgb, var(--color-text) 45%, transparent);
  --ink-55: color-mix(in srgb, var(--color-text) 55%, transparent);
  --ink-60: color-mix(in srgb, var(--color-text) 60%, transparent);
  --ink-65: color-mix(in srgb, var(--color-text) 65%, transparent);
  --ink-70: color-mix(in srgb, var(--color-text) 70%, transparent);
  --ink-72: color-mix(in srgb, var(--color-text) 72%, transparent);
  --ink-78: color-mix(in srgb, var(--color-text) 78%, transparent);
  --ink-80: color-mix(in srgb, var(--color-text) 80%, transparent);
  --dot: color-mix(in srgb, var(--color-text) 45%, transparent);
  --dot-accent: color-mix(in srgb, var(--color-accent) 45%, transparent);
}

/* ── bază ───────────────────────────────────────────────────────────────── */

html { scroll-behavior: smooth; }

body {
  --font-heading: "Young Serif", Georgia, serif;
  --font-heading-weight: 400;
  --font-body: "Spectral", Georgia, serif;
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  text-wrap: pretty;
}

.page { min-height: 100%; background: var(--color-bg); }

a:not(.btn) { color: var(--color-accent-700); text-underline-offset: 3px; }
a:not(.btn):hover { color: var(--color-accent); }
a.btn-primary, a.btn-primary:hover { color: var(--color-bg); }

.input, summary, a {
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}

.btn-primary { transition: background .16s ease, translate .16s ease, box-shadow .16s ease; }
.btn-primary:hover { translate: 0 -1px; box-shadow: var(--shadow-sm); }
.btn-lg { font-size: 16px; padding: 12px 22px; }
.btn-lg .ic { font-size: 20px; }

/* ── reveal la scroll (atributul e pus de site.js; fără JS totul e vizibil) ─ */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .65s cubic-bezier(.2, .7, .2, 1), transform .65s cubic-bezier(.2, .7, .2, 1);
}
[data-reveal][data-in] { opacity: 1; transform: none; }

/* ── iconite (SVG inline din sprite) ────────────────────────────────────── */

.ic {
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex: none;
  vertical-align: -0.125em;
}

/* ── header ─────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px clamp(20px, 5vw, 64px);
}
.brand {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(17px, 2.4vw, 19px);
  margin-right: auto;
  letter-spacing: -0.01em;
}
.brand .tld { color: var(--color-accent); }
a.brand { text-decoration: none; color: var(--color-text); }
a.brand:hover { color: var(--color-text); }

/* ── layout ─────────────────────────────────────────────────────────────── */

.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 72px);
}
.section { padding: 0 0 clamp(40px, 6vw, 80px); }

.kicker {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-70);
}
.kicker-block { display: block; margin-bottom: clamp(18px, 3vw, 28px); }
.kicker-block.is-tight { margin-bottom: clamp(16px, 2.5vw, 24px); }

.num { font-feature-settings: 'tnum' 1; }

/* ── hero ───────────────────────────────────────────────────────────────── */

.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding: clamp(32px, 7vw, 80px) 0 clamp(36px, 6vw, 72px);
}
.hero-title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(30px, 4.6vw, 58px);
  line-height: 1.1;
  margin: 0;
  max-width: none;
  text-wrap: balance;
}
.hero-title .line { display: block; }
.hero-sub {
  font-size: clamp(17px, 2.2vw, 21px);
  line-height: 1.55;
  max-width: 42ch;
  margin: clamp(20px, 3vw, 32px) 0 0;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: clamp(22px, 3vw, 32px);
}
.hero-eta { font-size: 14px; color: var(--ink-65); }
.hero-caveat {
  font-size: 15px;
  line-height: 1.6;
  max-width: 52ch;
  margin: clamp(24px, 3vw, 36px) 0 0;
  color: var(--ink-72);
}

/* ── mockup de factură ──────────────────────────────────────────────────── */

.receipt {
  max-width: 520px;
  background: #fffdfb;
  padding: calc(clamp(18px, 3vw, 26px) + 16px) clamp(18px, 3vw, 26px);
  rotate: -2.2deg;
  /* conturul: o umbră de 0.7px ține linia hârtiei, a doua o ridică de pe fundal */
  filter:
    drop-shadow(0 0 0.7px color-mix(in srgb, var(--color-text) 70%, transparent))
    drop-shadow(0 4px 12px color-mix(in srgb, #2d2b2b 18%, transparent));
  /* zig-zagul de sus și de jos, tăiat din două conic-gradient de 22×13px */
  mask:
    conic-gradient(from -45deg at bottom, #0000 25%, #000 0) 0 0 / 22px 13px repeat-x,
    conic-gradient(from 135deg at top, #0000 25%, #000 0) 0 100% / 22px 13px repeat-x,
    linear-gradient(#000 0 0) 0 13px / 100% calc(100% - 26px) no-repeat;
  transition: rotate .45s cubic-bezier(.2, .7, .2, 1), filter .45s ease;
}
.receipt:hover {
  rotate: 0deg;
  filter:
    drop-shadow(0 0 0.7px color-mix(in srgb, var(--color-text) 70%, transparent))
    drop-shadow(0 12px 26px color-mix(in srgb, #2d2b2b 24%, transparent));
}
.receipt-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.receipt-kicker {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.receipt-no {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-60);
  font-feature-settings: 'tnum' 1;
}
.rule-thick { height: 2px; background: var(--color-text); margin: 10px 0 2px; }
.rule-thin { height: 1px; background: var(--color-text); margin: 0 0 14px; }
.rule-soft { height: 1px; background: var(--ink-30); margin: 16px 0 12px; }
.receipt-rows { display: grid; gap: 9px; }

/* rând cu dot-leaders (factură + email) */
.row-leader {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 15px;
}
.row-leader .leader {
  flex: 1;
  min-width: 20px;
  align-self: flex-end;
  margin-bottom: 0.34em;
  border-bottom: 1px dotted var(--dot);
}
.row-leader.is-muted { color: var(--ink-70); }
.row-leader.is-highlight {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  color: var(--color-accent-700);
}
.row-leader.is-highlight .leader { border-bottom-color: var(--dot-accent); }

.receipt-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.receipt-total .label {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 17px;
}
.receipt-total .amount {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 22px;
}
.receipt-note { font-size: 13px; margin: 14px 0 0; color: var(--ink-55); }

/* ── cum funcționează ───────────────────────────────────────────────────── */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(26px, 4vw, 52px);
}
.step-head { display: flex; align-items: center; gap: 16px; }
.step-num {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 52px;
}
.step-head .ic { font-size: 34px; color: var(--color-accent); }
.step h2 { font-size: clamp(20px, 2.4vw, 24px); line-height: 1.2; margin: 18px 0 0; }
.step p { font-size: 16px; line-height: 1.6; margin: 10px 0 0; color: var(--ink-78); }

/* ── beneficii ──────────────────────────────────────────────────────────── */

.benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(20px, 3vw, 40px);
}
.benefit { display: flex; flex-direction: column; gap: 6px; }
.benefit-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 19px;
  color: var(--color-accent-700);
}
.benefit-title .ic { font-size: 26px; color: var(--color-accent); }
.benefit-sub { font-size: 15px; line-height: 1.6; color: var(--ink-72); }

/* ── ce nu facem ────────────────────────────────────────────────────────── */

.nots { display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: center; }
.not { display: flex; align-items: center; gap: 9px; font-size: 16px; }
.not .ic { font-size: 22px; color: var(--color-accent-2); }

/* ── coloanele de jos ───────────────────────────────────────────────────── */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.h-free { font-size: clamp(24px, 3.4vw, 32px); line-height: 1.15; margin: 0; max-width: 24ch; }
.p-free {
  font-size: 17px;
  line-height: 1.65;
  max-width: 56ch;
  margin: 18px 0 0;
  color: var(--ink-80);
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */

.faq { display: grid; gap: 2px; max-width: 64ch; }
.faq details { padding: 14px 0; border-top: 1px solid var(--color-divider); }
.faq details:last-child { border-bottom: 1px solid var(--color-divider); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 17px;
  cursor: pointer;
  list-style: none;
}
summary::-webkit-details-marker { display: none; }
.faq summary .chev { flex: none; font-size: 20px; color: var(--color-accent); }
.faq p { font-size: 16px; line-height: 1.6; margin: 10px 0 0; color: var(--ink-78); }

.chev { transition: rotate .16s ease; }
details[open] .chev { rotate: 180deg; }
details > p { animation: faq-in .24s cubic-bezier(.2, .7, .2, 1); }
@keyframes faq-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ── formular ───────────────────────────────────────────────────────────── */

#formular { scroll-margin-top: 76px; }
.h-form { font-size: clamp(26px, 3.8vw, 36px); line-height: 1.15; margin: 0; max-width: 22ch; }
.form-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.6;
  max-width: 56ch;
  margin: 0 0 clamp(20px, 3vw, 28px);
  color: var(--ink-78);
}
.form-note .ic, .after-row .ic {
  font-size: 22px;
  color: var(--color-accent);
  flex: none;
  margin-top: 2px;
}
.tally-wrap { width: 100%; }
.tally-wrap iframe { border: 0; display: block; }
.consent {
  font-size: 14px;
  line-height: 1.6;
  max-width: none;
  margin: clamp(20px, 3vw, 28px) 0 0;
  color: var(--ink-78);
}
.after {
  display: grid;
  gap: 12px;
  max-width: 56ch;
  margin: clamp(28px, 4vw, 40px) 0 0;
}
.after-row { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.6; }

/* ── aside: exemplu de email ────────────────────────────────────────────── */

.aside-sticky { position: sticky; top: 88px; padding: 0 0 clamp(40px, 6vw, 80px); }
.email-card {
  border: 1px solid var(--color-divider);
  background: var(--color-neutral-100);
  box-shadow: var(--shadow-sm);
  padding: clamp(18px, 3vw, 26px);
}
.email-meta { display: grid; gap: 4px; font-size: 13px; color: var(--ink-65); }
.email-rule { height: 1px; background: var(--ink-25); margin: 14px 0 16px; }
.email-body { font-size: 16px; line-height: 1.65; margin: 0 0 14px; }
.email-rows { display: grid; gap: 9px; margin: 0 0 14px; }
.email-outro { font-size: 16px; line-height: 1.65; margin: 0; }
.email-disclaimer { font-size: 13px; line-height: 1.5; margin: 16px 0 0; color: var(--ink-55); }

/* ── footer ─────────────────────────────────────────────────────────────── */

.site-footer {
  padding: clamp(28px, 4vw, 48px) 0 clamp(32px, 5vw, 56px);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-70);
}
.footer-row { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: baseline; }
.footer-brand {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 16px;
  color: var(--color-text);
}
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.site-footer p { margin: 14px 0 0; max-width: 60ch; }

/* ── pagini legale ──────────────────────────────────────────────────────── */

.legal-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px clamp(20px, 5vw, 64px);
}
.legal-back { font-size: 14px; }
.legal-main {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 56px) clamp(20px, 5vw, 64px) clamp(40px, 6vw, 80px);
}
.legal-title { font-size: clamp(28px, 5vw, 44px); line-height: 1.1; margin: 0; max-width: 24ch; }
.legal-updated {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 18px 0 0;
  color: var(--ink-70);
}
.legal-intro { font-size: 17px; line-height: 1.7; margin: clamp(24px, 3vw, 36px) 0 0; max-width: 60ch; }
.legal-section { margin-top: clamp(28px, 4vw, 44px); }
.legal-section h2 { font-size: clamp(20px, 2.6vw, 25px); line-height: 1.2; margin: 0; }
.legal-section p { font-size: 17px; line-height: 1.7; margin: 12px 0 0; max-width: 60ch; }
.legal-section ul {
  font-size: 17px;
  line-height: 1.7;
  margin: 12px 0 0;
  padding-left: 22px;
  max-width: 60ch;
  display: grid;
  gap: 6px;
}
.legal-footer {
  margin-top: clamp(40px, 6vw, 72px);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-70);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: baseline;
}
.legal-footer .footer-brand { margin-right: 12px; }

/* ── mișcare redusă ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  details > p { animation: none; }
  .btn-primary:hover { translate: none; }
  .receipt { transition: none; }
}