/* ── HERO SZEKCIÓ ─────────────────────────────────
   VILÁGOS („windowsos") stílus – csak az index.html használja.
   Színek: a html.theme-light tokenjeiből (css/base.css). */

.hero {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 48px 20px 30px;
}

/* Díszcsík a márkanév fölött (korábban zászló-motívum) */
.hero__flag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
}

.hero__flag-bar {
  display: flex;
  height: 3px;
  width: 44px;
  border-radius: 2px;
  overflow: hidden;
}

.hero__flag-bar span { flex: 1; background: var(--border-strong); }
.hero__flag-bar span:nth-child(2) { background: var(--accent); }

.hero__eyebrow {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hero__title {
  font-family: var(--font-title);
  font-size: clamp(40px, 9vw, 66px);
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1;
  margin-bottom: 10px;
}

.hero__title em {
  color: var(--accent);
  font-style: normal;
}

.hero__sub {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 22px;
}

/* ── FŐ ÜZENET (egyszerű nyelven) ─────────────── */
.hero__lead {
  max-width: 620px;
  margin: 0 auto;
  font-size: clamp(17px, 2.4vw, 21px);
  line-height: 1.6;
  color: var(--text-soft);
}

.hero__lead strong {
  color: var(--accent);
  font-weight: 700;
}

.hero__note {
  margin-top: 14px;
  font-size: 12px;
  color: var(--gold);
  letter-spacing: 1px;
}