/* A leíró oldalak (render.mjs) a főoldal világában: arany szerkezet, rózsaszín hover, lila csak a hívó doboz címe.
   Szín csak tokenből (site.test.mjs). JS nélkül is teljes, az élő eget a page-sky.js rajzolja. < 20 KB, CRLF-fel is. */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; background: var(--surface); }
body.content-page {
  --col: min(720px, 100% - 40px); --wide: min(1120px, 100% - 40px); --band: clamp(560px, 80vh, 720px); --start: 0%;
  --ease: cubic-bezier(.2,.7,.2,1);
  position: relative; isolation: isolate; min-height: 100vh; margin: 0; color: var(--text-soft);
  font: 400 17px/1.7 'Brand Manrope', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-wrap: break-word;
}
[dir="rtl"] body.content-page { --start: 100%; }
.page-header, .page-footer, .page-cta { width: var(--wide); margin-inline: auto; }
.breadcrumb, .page-main { width: var(--col); margin-inline: auto; }

/* Tájkép: ég, távoli dombok, a közeli dombok és az akácia a felület színében. */
body.content-page::before, body.content-page::after, .page-main::before {
  content: ''; position: absolute; inset: 0 0 auto; height: var(--band); pointer-events: none; mask-repeat: no-repeat;
}
body.content-page::before { z-index: -3;
  background: var(--sun, none), radial-gradient(ellipse 46% 40% at 82% 74%, color-mix(in srgb, var(--gold) 30%, transparent), transparent 70%),
    linear-gradient(color-mix(in srgb, var(--sky-glow) 6%, var(--surface)), color-mix(in srgb, var(--gold) 16%, color-mix(in srgb, var(--sky-glow) 12%, var(--surface))) 78%, var(--surface)); }
body.content-page::after { z-index: -2; background: var(--page-far, color-mix(in srgb, var(--sky-glow) 13%, var(--surface))); mask-size: 100% 32%; mask-position: bottom;
  mask-image: url(/site/page-hills-far.svg);
  animation: page-in 1.4s var(--ease) .1s both; }
.page-main::before { z-index: -1; background: var(--surface); mask-size: auto 46%, 100% 24%; mask-position: right 5vw bottom 8%, bottom;
  mask-image: url(/site/page-tree.webp), url(/site/page-hills-near.svg);
  animation: page-in 1.4s var(--ease) both; }
[dir="rtl"] body.content-page::before, [dir="rtl"] body.content-page::after, [dir="rtl"] .page-main::before { scale: -1 1; }
/* A nap csak széles lapon kel fel: keskenyen a címsor mögé kerülne. */
@media (min-width: 1100px) {
  body.content-page { --sun: radial-gradient(circle at 81% 50%, var(--sky-glow-core) 0 30px, color-mix(in srgb, var(--sky-glow-core) 35%, transparent) 32px,
    color-mix(in srgb, var(--sky-glow) 8%, transparent) 90px, transparent 220px); }
}

a { color: var(--gold); text-decoration: underline 1px color-mix(in srgb, var(--gold) 45%, transparent); text-underline-offset: .22em; transition: color .18s, text-decoration-color .18s; }
a:hover { color: var(--pink); text-decoration-color: var(--pink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
/* Az e-mail és a telefonszám nem törik (a tulajdonos kérése, 2026-10-18); a ~20 em széles cím keskenyen kisebb. */
a[href^="mailto:"], a[href^="tel:"] { white-space: nowrap; }
.page-body a[href^="mailto:"] { font-size: min(1em, (100vw - 72px) / 20); }

.skip-link { position: absolute; z-index: 20; inset-inline-start: 12px; top: -80px; padding: 10px 14px; border-radius: 8px;
  background: var(--gold); color: var(--surface); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }
.skip-link:hover { color: var(--surface); }

/* Fejléc: a főoldal márkajele, a sor végén a nyelvválasztó és a menü. */
.page-header { position: relative; display: flex; align-items: center; gap: 16px; padding-block: 26px; }
.page-brand { display: inline-flex; align-items: center; gap: 16px; margin-inline-end: auto; color: var(--logo); text-decoration: none; }
.page-brand img { flex: 0 0 auto; display: block; width: 40px; height: 40px; }
.page-brand span { width: min-content; padding-inline-start: 16px; border-inline-start: 1px solid var(--line);
  font-size: 11px; font-weight: 600; line-height: 1.35; letter-spacing: .1em; text-transform: uppercase; }
.page-brand:hover { color: var(--pink); }
.page-header summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 45%, transparent); color: var(--paper); font-size: 14px; line-height: 1.3;
  list-style: none; cursor: pointer; user-select: none; transition: color .18s, border-color .18s; }
.page-header summary::-webkit-details-marker { display: none; }
.page-menu > summary::after { content: ''; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
  rotate: 45deg; translate: 0 -2px; transition: rotate .2s, translate .2s; }
.page-header details[open] > summary { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.page-menu[open] > summary::after { rotate: -135deg; translate: 0 2px; }
.page-header details > summary:hover { color: var(--pink); border-color: var(--pink); }
/* A lenyílók fedő háttérrel, belül görgetnek (2026-10-16). */
.page-header details > nav { position: absolute; z-index: 10; inset-inline-end: 0; top: calc(100% - 10px); width: min(560px, 100%); margin: 0;
  max-height: min(75dvh, 640px); overflow-y: auto; overscroll-behavior: contain; padding: 20px 22px;
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); border-radius: 14px; background: var(--surface);
  box-shadow: 0 24px 80px color-mix(in srgb, var(--shadow) 60%, transparent); font-size: 15px; line-height: 1.5;
  animation: page-drop .2s cubic-bezier(.22,1,.36,1) both; }
/* Nyelvválasztó, mint a főoldalon: földgömb, zászlók; széles lapon kinyíló sor, keskenyen 7 × 2-es rács. */
.page-header .page-lang > summary { width: 44px; padding: 0; justify-content: center; border: 0; background: none; }
.page-lang > summary::before { content: ''; width: 20px; height: 20px; background: currentColor; mask: url(/site/page-globe.svg) center / contain no-repeat; }
.page-header .page-lang > nav { display: grid; grid-template-columns: repeat(7, 36px); width: auto; padding: 10px; }
.page-lang nav a { display: grid; place-items: center; height: 36px; }
.page-lang img { width: 22px; height: 15px; border-radius: 2px; opacity: .58; box-shadow: 0 0 0 1px color-mix(in srgb, var(--paper) 20%, transparent); transition: opacity .18s, box-shadow .18s; }
.page-lang a:hover img { opacity: 1; box-shadow: 0 0 0 1.5px var(--pink); }
.page-lang a[aria-current] img { opacity: 1; box-shadow: 0 0 0 1.5px var(--gold); }
@media (min-width: 1000px) {
  .page-lang { position: relative; }
  .page-header .page-lang > nav { grid-template-columns: repeat(14, 36px); inset-inline-end: 100%; top: 4px; padding: 0; overflow: visible;
    border: 0; background: none; box-shadow: none; animation-name: page-reveal; }
}

.site-menu-groups { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px 32px; }
.site-menu-label { margin: 0 0 8px; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
/* A csoportcímke-link érintési célja ≥ 24 px (WCAG 2.5.8); aláhúzás nélkül, a hover jelzi (a tulajdonos kérése, 2026-10-18). */
.site-menu-label a { display: inline-block; margin-block: -5px; padding-block: 5px; color: inherit; text-decoration: none; }
.site-menu-group ul { margin: 0; padding: 0; list-style: none; }
.site-menu-group li a { display: block; padding: 4px 0; color: var(--paper); text-decoration: none; }
.site-menu-label a:hover, .site-menu-group li a:hover { color: var(--pink); }

/* Morzsa: a jel az előző tétel végén áll, megtört sor nem kezdődik „›”-lel. */
.breadcrumb { margin-top: clamp(28px, 6vh, 64px); font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; padding: 0; list-style: none; }
.breadcrumb ol::before { content: ''; width: 25px; height: 1px; margin-inline-end: 4px; background: var(--gold); }
.breadcrumb li:not(:last-child)::after { content: '›'; margin-inline-start: 10px; color: var(--muted); }
[dir="rtl"] .breadcrumb li:not(:last-child)::after { content: '‹'; }
.breadcrumb a { color: var(--gold); text-decoration: none; }
.breadcrumb a:hover { color: var(--pink); }
.breadcrumb [aria-current] { color: var(--paper); }

.page-main { padding-block: 18px 8px; }
.page-main h1 { margin: 0 0 24px; font-size: clamp(34px, 3.6vw, 50px); font-weight: 430; line-height: 1.1; letter-spacing: -.04em;
  color: var(--paper); text-wrap: balance; text-shadow: 0 3px 30px color-mix(in srgb, var(--surface) 40%, transparent); }
.page-body > p:first-child { margin-bottom: 1.6em; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.65;
  color: color-mix(in srgb, var(--paper) 90%, transparent); text-shadow: 0 1px 4px var(--surface); }
.breadcrumb, .page-main h1, .page-body > p:first-child { animation: page-in .8s var(--ease) both; }
.page-main h1 { animation-delay: .08s; }
.page-body > p:first-child { animation-delay: .16s; }

/* Számozott fejezetek. */
.page-body { counter-reset: page-section; }
.page-body p, .page-body ul, .page-body ol { margin: 0 0 1.1em; }
.page-body p { text-wrap: pretty; }
.page-body strong { font-weight: 650; color: var(--paper); }
.page-body h2 { display: flex; align-items: baseline; gap: 14px; margin: 64px 0 18px; padding-top: 24px; border-top: 1px solid var(--line);
  font-size: clamp(24px, 2.2vw, 30px); font-weight: 500; line-height: 1.25; letter-spacing: -.025em; color: var(--paper); }
.page-body h2::before { counter-increment: page-section; content: counter(page-section, decimal-leading-zero); flex: 0 0 auto; translate: 0 -.4em;
  font: 500 12px/1 ui-monospace, monospace; letter-spacing: .06em; color: var(--gold); }
.page-body h3 { margin: 36px 0 10px; font-size: 20px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; color: var(--paper); }
.page-body h2 + h3 { margin-top: 26px; }

.page-body ul, .page-body ol { padding: 0; list-style: none; }
.page-body li { position: relative; padding-inline-start: 26px; }
.page-body li + li, .page-body li > :is(ul, ol) { margin-top: .5em; }
.page-body li > :is(ul, ol) { margin-bottom: 0; }
.page-body ul > li::before { content: ''; position: absolute; inset-inline-start: 4px; top: .7em; width: 6px; height: 6px; rotate: 45deg; background: var(--gold); }
.page-body ol { counter-reset: page-step; }
.page-body ol > li { counter-increment: page-step; padding-inline-start: 42px; }
.page-body ol > li::before { content: counter(page-step); position: absolute; inset-inline-start: 0; top: 1px; display: grid; place-items: center;
  width: 27px; height: 27px; border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); border-radius: 50%;
  font-size: 12px; font-weight: 600; line-height: 1; color: var(--gold); }

/* A táblázat széles lapon kilép a hasábból (960 px). */
.page-body table { --out: min(0px, 50% - min(480px, 50vw - 20px)); width: calc(100% - 2 * var(--out)); margin: 28px var(--out) 32px;
  border: 1px solid var(--line); border-radius: 14px; border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: 15px; line-height: 1.55; }
.page-body :is(th, td) { padding: 12px 16px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--line-faint); }
.page-body th { border-bottom-color: color-mix(in srgb, var(--gold) 25%, transparent); background: color-mix(in srgb, var(--gold) 8%, transparent);
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.page-body tbody tr:nth-child(even) { background: color-mix(in srgb, var(--paper) 2%, transparent); }
.page-body tbody tr:last-child td { border-bottom: 0; }
.page-body td:first-child { font-weight: 600; color: var(--paper); }

/* A „Lényeg” doboz: izzó kártya arany kerettel, oldalsáv nélkül (idézetnek hatott, 2026-10-18). */
.page-body blockquote { position: relative; margin: 34px 0; padding: 22px 26px; border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent); border-radius: 16px;
  color: var(--paper); box-shadow: 0 20px 60px color-mix(in srgb, var(--shadow) 35%, transparent);
  background: radial-gradient(120% 160% at var(--start) 0, color-mix(in srgb, var(--gold) 12%, transparent), transparent 60%), color-mix(in srgb, var(--paper) 2%, transparent); }
.page-body blockquote strong:first-child { color: var(--gold); }
.page-body blockquote > :last-child { margin-bottom: 0; }

/* A gyűjtőoldal kártyái (render.mjs): négy kártya 2 × 2; az első link a kártyát fedi. */
.page-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; margin: 26px min(0px, 50% - min(560px, 50vw - 20px)) 40px; }
.page-cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.page-card { position: relative; padding: 22px 24px 24px; border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(color-mix(in srgb, var(--paper) 4%, transparent), color-mix(in srgb, var(--paper) 1%, transparent));
  transition: border-color .2s, translate .2s, box-shadow .2s; }
.page-card:hover { border-color: color-mix(in srgb, var(--gold) 55%, transparent); translate: 0 -3px; box-shadow: 0 18px 50px color-mix(in srgb, var(--shadow) 45%, transparent); }
.page-body .page-card h3 { margin: 0 0 10px; font-size: 19px; }
.page-body .page-card p { margin: 0; font-size: 15px; line-height: 1.6; }
.page-card a:first-of-type::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.page-card a:not(:first-of-type) { position: relative; z-index: 1; }

/* A hívó doboz: arany keret, izzó horizont, dőlt lila cím. */
.page-cta { position: relative; margin-block: 96px 0; padding: clamp(28px, 5vw, 60px); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); border-radius: 22px;
  background: radial-gradient(ellipse 70% 90% at calc(100% - var(--start)) 115%, color-mix(in srgb, var(--gold) 26%, transparent), transparent 70%),
    radial-gradient(ellipse 55% 80% at var(--start) -20%, color-mix(in srgb, var(--sky-glow) 9%, transparent), transparent 70%), color-mix(in srgb, var(--paper) 3%, var(--surface));
  box-shadow: 0 30px 90px color-mix(in srgb, var(--shadow) 55%, transparent); }
.page-cta h2 { max-width: 15em; margin: 0 0 14px; font: italic 400 clamp(32px, 4.2vw, 54px)/1.08 Georgia, 'Times New Roman', serif;
  letter-spacing: -.035em; color: var(--violet-light); text-wrap: balance; }
.page-cta h2:is(:lang(zh), :lang(ja), :lang(ko), :lang(hi), :lang(ar)) { font-style: normal; letter-spacing: 0; }
.page-cta > p { max-width: 36em; margin: 0 0 22px; font-size: 18px; color: var(--paper); }
/* Az e-mail, a telefon és az AI-asszisztens gombja egy sorban (a tulajdonos kérése, 2026-10-18); keskenyen tördel. */
.page-contact { --pad: 20px; --icon: 18px; display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; container-type: inline-size; }
.page-contact li { max-width: 100%; }
.page-contact a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px var(--pad); border: 1px solid var(--line); border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 55%, transparent); color: var(--paper); text-decoration: none; transition: color .18s, border-color .18s;
  font-size: min(17px, (100cqi - 2 * var(--pad) - var(--icon) - 12px) / 20); }
.page-contact a::before { content: ''; flex: 0 0 auto; width: var(--icon); height: var(--icon); background: var(--gold); mask: url(/site/page-mail.svg) center / contain no-repeat; }
.page-contact a[href^="tel:"]::before { mask-image: url(/site/page-phone.svg); }
.page-contact a:hover { color: var(--pink); border-color: var(--pink); }
.page-contact a:hover::before { background: var(--pink); }
.page-contact .page-cta-button { border-color: var(--gold); background: var(--gold); color: var(--surface); font-weight: 600; transition: background-color .18s, border-color .18s, translate .18s; }
.page-contact .page-cta-button::before { content: none; }
.page-cta-button::after { content: ''; flex: 0 0 auto; width: 18px; height: 18px; background: currentColor; mask: url(/site/page-arrow.svg) center / contain no-repeat; }
[dir="rtl"] .page-cta-button::after { scale: -1 1; }
.page-contact .page-cta-button:hover { background: var(--pink); border-color: var(--pink); color: var(--surface); translate: 0 -1px; }

.page-footer { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 36px 64px; margin-top: 72px; padding-block: 44px 40px;
  border-top: 1px solid var(--line); font-size: 14px; }
.page-company { display: grid; gap: 18px; margin: 0; container-type: inline-size; }
.page-company dt { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.page-company dd { margin: 0; color: var(--paper); }
.page-company a { color: var(--paper); text-decoration: none; font-size: min(1em, 100cqi / 20); }
.page-company a:hover { color: var(--pink); }
.page-rights { grid-column: 1 / -1; margin: 0; padding-top: 22px; border-top: 1px solid var(--line-faint); font-size: 13px; color: var(--muted); }

/* A ritkítás széttöri az arab és a dévanágari betűt. */
:is(.breadcrumb, .site-menu-label, .page-brand span, .page-body th, .page-company dt):is(:lang(ar), :lang(hi)) { letter-spacing: 0; }

@keyframes page-in { from { opacity: 0; translate: 0 14px; } }
@keyframes page-drop { from { opacity: 0; translate: 0 -6px; } }
@keyframes page-reveal { from { clip-path: inset(0 var(--start) 0 calc(100% - var(--start))); } }

@media (max-width: 799.98px) { .page-footer { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639.98px) {
  body.content-page { --band: 540px; font-size: 16px; }
  /* Mobilon a gombokon nincs nyíl: a fejléc 320 px-ig minden nyelven egy sor (a tulajdonos kérése, 2026-10-18). */
  .page-header { flex-wrap: wrap; justify-content: flex-end; gap: 10px 8px; padding-block: 18px; }
  .page-brand { gap: 10px; }
  .page-brand span { padding-inline-start: 10px; font-size: 10px; letter-spacing: .06em; }
  .page-header summary { padding-inline: 14px; }
  .page-menu > summary::after { display: none; }
  .page-main h1 { font-size: clamp(30px, 8.4vw, 36px); }
  .page-body > p:first-child { font-size: 17px; }
  .page-body h2 { margin-top: 52px; font-size: 22px; }
  .page-main::before { mask-size: auto 32%, 100% 20%; }
  .site-menu-groups { grid-template-columns: minmax(0, 1fr); }
  .page-body table { display: block; overflow-x: auto; }
  /* Szinte a lap széléig: így fér el az e-mail-cím. */
  .page-cta { width: calc(100% - 20px); padding: 30px 16px; border-radius: 18px; }
  .page-cta > p { font-size: 16px; }
  .page-contact { --pad: 14px; --icon: 16px; }
}
@media (max-width: 359.98px) {
  .page-header { column-gap: 6px; }
  .page-brand span { font-size: 9px; }
  .page-menu > summary { padding-inline: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  body.content-page { color: CanvasText; }
  body.content-page::before, body.content-page::after, .page-main::before, .skip-link, .page-header details, .page-footer nav { display: none; }
  .page-cta { border-color: currentColor; background: none; box-shadow: none; }
}