/* ============================================================
   LAYOUT — container, header, hero, footer, secțiuni
   ============================================================ */

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

.section { padding-block: var(--sp-7); }

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--c-bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--c-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  height: 64px;
}
.brand { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--c-text); }
.brand:hover { text-decoration: none; }
.brand__mark {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  background: var(--c-accent);
  color: #fff;
  font-family: var(--font-serif);
  font-weight: 700;
  border-radius: 10px;
  letter-spacing: .5px;
}
.brand__name { font-family: var(--font-serif); font-weight: 600; font-size: 1.05rem; }
.site-nav { display: flex; gap: var(--sp-4); font-size: var(--fs-sm); }
.site-nav a { color: var(--c-text-soft); }
.site-nav a.is-active, .site-nav a:hover { color: var(--c-accent-strong); text-decoration: none; }

/* ---- Hero ---- */
.hero {
  background:
    radial-gradient(1200px 400px at 70% -10%, var(--c-accent-soft), transparent 60%),
    linear-gradient(180deg, var(--c-bg-alt), var(--c-bg));
  border-bottom: 1px solid var(--c-border);
}
.hero__inner { padding-block: var(--sp-8) var(--sp-7); max-width: 880px; }
.hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-accent);
  margin-bottom: var(--sp-3);
}
.hero__title { margin-bottom: var(--sp-4); }
.hero__lead { font-size: var(--fs-md); color: var(--c-text-soft); max-width: 60ch; }
.hero__hint { font-size: var(--fs-sm); color: var(--c-text-faint); margin-top: var(--sp-5); }

/* ---- Intro minimalist (landing) ---- */
.intro {
  text-align: center;
  padding-block: var(--sp-8) var(--sp-6);
  background: linear-gradient(180deg, var(--c-bg-alt), var(--c-bg));
  border-bottom: 1px solid var(--c-border);
}
.intro__title { margin-bottom: var(--sp-2); }
.intro__sub { margin: 0; color: var(--c-text-soft); font-size: var(--fs-md); }

/* ---- Footer ---- */
.site-footer {
  margin-top: var(--sp-8);
  background: var(--c-bg-alt);
  border-top: 1px solid var(--c-border);
}
.site-footer__inner { padding-block: var(--sp-6); font-size: var(--fs-sm); color: var(--c-text-soft); }
.site-footer__meta { color: var(--c-text-faint); margin-bottom: 0; }

/* ---- Coloană de lectură ---- */
.reading { max-width: var(--maxw-read); padding-block: var(--sp-6) var(--sp-7); }

/* ---- Responsive ---- */
@media (max-width: 640px) {
  :root { --fs-2xl: 2.1rem; --fs-xl: 1.6rem; }
  .container { padding-inline: var(--sp-4); }
  .brand__name { display: none; }
  .hero__inner { padding-block: var(--sp-7) var(--sp-6); }
}