/* =========================================================================
   Vianovia Typography System v1.0
   Globális tipográfiai skála — minden oldal (fő + termék + jogi + cikkek)
   Frissítés: minden méret/betűtípus itt módosítható egy helyen.
   -------------------------------------------------------------------------
   Alapskála: 16px root, 1.125× modular ratio
   Headings: fluid clamp() 320–1920px viewport között
   ========================================================================= */

:root {
  /* ---- FONT FAMILIES ---- */
  --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* ---- FONT SIZES ---- */
  --fs-eyebrow: 0.8125rem;   /* 13px — kickers, tagek, ISMERŐS?, section-tag */
  --fs-caption: 0.875rem;    /* 14px — kis labelek, meta, breadcrumb */
  --fs-body:    1rem;         /* 16px — default body */
  --fs-body-l:  1.125rem;    /* 18px — section intro, cta-note, hero-sub kisebb */
  --fs-lead:    1.25rem;     /* 20px — hero-sub nagyobb, quote */
  --fs-h4:      1.15rem;     /* 18.4px — kártyacímek (problem-card h3) */
  --fs-h3:      1.375rem;    /* 22px — subheadings */
  --fs-h2:      clamp(1.625rem, 3.2vw, 2.375rem);  /* 26-38px — szakaszcímek */
  --fs-h1:      clamp(1.75rem, 3.8vw, 2.75rem);    /* 28-44px — hero H1 */
  --fs-mega:    clamp(2.5rem, 5vw, 3.5rem);        /* 40-56px — mega hero variant */

  /* ---- LINE HEIGHTS ---- */
  --lh-tight:   1.15;   /* H1 */
  --lh-heading: 1.25;   /* H2, H3 */
  --lh-snug:    1.45;   /* subheadings, faq-q */
  --lh-body:    1.65;   /* default body */
  --lh-relaxed: 1.75;   /* long-form article prose */

  /* ---- LETTER SPACING ---- */
  --ls-eyebrow:        0.14em;   /* uppercase kickers */
  --ls-heading:       -0.02em;   /* H1 */
  --ls-heading-tight: -0.015em;  /* H2 */
  --ls-normal:         0;

  /* ---- FONT WEIGHTS ---- */
  --fw-body:     400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-heavy:    800;
}

/* =========================================================================
   GLOBAL BASE — minden oldalon érvényes
   ========================================================================= */

html body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
}

html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
}

html body h1,
html body .hero h1,
html body .page-hero h1,
html body .about-hero h1,
html body .hero-sec h1,
html body .landing-hero h1,
html body section.hero h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
}

html body h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading-tight);
}

html body h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
}

html body h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
}

html body p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* =========================================================================
   NAMED COMPONENTS — a design-rendszer visszatérő elemei
   ========================================================================= */

/* Eyebrow / kicker — kis nagybetűs szakaszjelző */
html body .eyebrow,
html body .section-tag,
html body .cta-tag-green,
html body .eyebrow-s,
html body .kicker {
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  line-height: var(--lh-body);
}

/* Section intro / body-l — H2 alatti bevezető */
html body .body-l,
html body .lead,
html body .clients-lead,
html body .cta-note,
html body p.body-l {
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
}

/* Hero-sub — a hero H1 alatti támogató mondat */
html body .hero-sub {
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
}

/* Problem-card cím */
html body .problem-card h3,
html body .feat-card h3,
html body .kap-item h3,
html body .kinek-col h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

/* Persona / kártya bekezdés */
html body .persona-item p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* FAQ */
html body .faq-q,
html body .faq-geo-q,
html body .cfaq-q {
  font-family: var(--font-heading);
  font-size: 1.0625rem;      /* 17px */
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}
html body .faq-a,
html body .faq-geo-a,
html body .faq-ai,
html body .cfaq-a {
  font-size: 0.9375rem;      /* 15px */
  line-height: var(--lh-relaxed);
}

/* Small text — meta, footer, disclaimers */
html body .caption,
html body .small,
html body .meta,
html body .risk-note,
html body .photo-badge-text span {
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
}

/* CTA-k */
html body .btn,
html body .btn-p,
html body .btn-s,
html body .btn-outline {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
}

/* =========================================================================
   ARTICLE (Tudástár cikkek) — .art-wrap konténer
   A cikk-tipográfia egy fokkal nagyobb az olvashatóság miatt
   ========================================================================= */

html body .art-wrap {
  font-size: 1.0625rem;      /* 17px — jobb olvashatóság hosszú prózához */
  line-height: var(--lh-relaxed);
}

html body .art-wrap h1 {
  font-size: clamp(1.875rem, 3.8vw, 2.75rem);   /* 30-44px */
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
}

html body .art-wrap h2 {
  font-size: 1.5rem;         /* 24px */
  line-height: var(--lh-heading);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

html body .art-wrap h3 {
  font-size: 1.1875rem;      /* 19px */
  line-height: var(--lh-snug);
  margin-top: 1.75rem;
  margin-bottom: 0.625rem;
}

html body .art-wrap p {
  font-size: 1.0625rem;      /* 17px */
  line-height: var(--lh-relaxed);
}

/* =========================================================================
   MOBIL FINOMHANGOLÁS
   ========================================================================= */

@media (max-width: 640px) {
  html body h1 {
    letter-spacing: -0.015em;
  }
  html body .art-wrap {
    font-size: 1rem;         /* mobilon 16px marad */
  }
  html body .art-wrap p {
    font-size: 1rem;
  }
}

/* =========================================================================
   RÁCSOS HÁTTÉR — DUPLA-GRID JAVÍTÁS
   A vianovia.css-ben egy szabály minden szekcióra rátesz egy grid pattern-t,
   ami a görgetéssel együtt mozog. Ez ütközik a .bg-grid (position:fixed)
   pattern-nel. Csak a fixed marad látható; minden szekció-szintű grid törölve.
   ========================================================================= */

/* Minden section és article: nincs grid pattern (fixed .bg-grid marad) */
html body section:not(.hero):not([class*="-hero"]):not(.vn-newsletter):not(.vn-footer):not(.no-grid-strip),
html body article,
html body .problem-sec,
html body .solution-sec,
html body .products-sec,
html body .cta-sec,
html body .audit-sec,
html body .faq-sec,
html body .funnel-sec,
html body .results-sec,
html body .quiz-sec,
html body .testimonial-sec,
html body .pricing-sec,
html body .features-sec,
html body .benefits-sec,
html body .process-sec,
html body .stats-sec,
html body .why-sec,
html body .howit-sec,
html body .case-sec,
html body .contact-sec,
html body .info-sec,
html body .page-content,
html body .legal-content,
html body .article-content {
  background-image: none !important;
}

/* about-section-alt kap egy finom gradient wash-t (a rolam ritmus miatt) — visszaállítva magas specificitással */
html body section.about-section-alt.about-section-alt {
  background-image: linear-gradient(135deg, rgba(0,231,255,.035), rgba(124,92,255,.035)) !important;
}

/* =========================================================================
   VÉGE
   Egy változás ehhez a fájlhoz = minden oldalra kihat, egy tölések után.
   ========================================================================= */