/* =============================================================================
   Gulyás — téma-CSS. Kaszkád a fájlon belüli sorrendből (NINCS @layer):
   tokens → fonts → reset → base → layout → components → blocks → utilities.
   A WP global styles és a core blokk-CSS réteg nélküli; réteg nélküli szabály
   mindig legyőzi a rétegben lévőt, ezért a téma sem használ @layer-t.
   ========================================================================== */

/* --- tokens ---------------------------------------------------------------- */
:root {
	/* Csak a designból megerősített színek. A sötét chili-szekciók és további
	   színek az F3-ban kerülnek be, a designból kinyerve (nem becsülve).
	   A derivált értékek modern CSS-sel: color-mix() + relatív szín (rgb(from …)). */
	--c-white: #ffffff;
	--c-paper: #faf8f5;                    /* nav-sáv alap (design: rgb 250,248,245) */
	--c-paprika: #f05033;                  /* design accent / CTA */
	--c-paprika-deep: color-mix(in oklab, var(--c-paprika), #000 15%);  /* derivált hover */
	--c-ink: #171310;                      /* design fő szöveg / sötét felület */

	/* Ink alfa-lépcsők relatív színből (a design ink-et különböző áttetszőségen használ). */
	--ink-70: rgb(from var(--c-ink) r g b / 0.70);
	--ink-68: rgb(from var(--c-ink) r g b / 0.68);
	--ink-65: rgb(from var(--c-ink) r g b / 0.65);
	--ink-60: rgb(from var(--c-ink) r g b / 0.60);
	--ink-50: rgb(from var(--c-ink) r g b / 0.50);
	--ink-45: rgb(from var(--c-ink) r g b / 0.45);
	--ink-25: rgb(from var(--c-ink) r g b / 0.25);
	--ink-12: rgb(from var(--c-ink) r g b / 0.12);
	--ink-10: rgb(from var(--c-ink) r g b / 0.10);

	/* Visszafelé kompatibilis aliasok. */
	--c-ink-70: var(--ink-70);
	--c-ink-55: rgb(from var(--c-ink) r g b / 0.55);
	--c-stroke: var(--ink-12);              /* derivált határoló */

	--font-display: "brillante-vf", "Playfair Display", Georgia, "Times New Roman", serif;
	--font-eyebrow: "bebas-kai", "Bebas Neue", Impact, "Arial Narrow", sans-serif;
	--font-body: "Libre Baskerville", Georgia, "Times New Roman", serif;
	--font-logo: "Playfair Display", Georgia, "Times New Roman", serif;
	--font-mono: "Cousine", ui-monospace, "SFMono-Regular", "Courier New", monospace;

	--c-header-bg: rgba(250, 248, 245, 0.94);
	--c-header-border: rgba(23, 19, 16, 0.10);

	--r-sm: 4px;
	--r-md: 8px;
	--r-lg: 14px;
	--r-pill: 9999px;

	--sh-card: 0 2px 20px rgba(23, 19, 16, 0.08);
	--sh-soft: 0 12px 34px rgba(23, 19, 16, 0.12);
	--sh-deep: 0 26px 60px rgba(23, 19, 16, 0.28);

	--mo-fast: 150ms;
	--mo-base: 240ms;
	--mo-ease: cubic-bezier(0.16, 1, 0.30, 1);

	--shell-max: 1152px;
	--gutter: clamp(1rem, 4vw, 4rem);

	/* Papír-textúra: FIXED a viewporthoz, teljes képernyőt kitölti. Ugyanez kerül a
	   videó-konténerekre is (lokális backdrop a multiply-hoz) — mivel fixed, pixelre
	   illeszkedik a body-textúrához, így a fehér videórészeken „átüt" a minta. */
	--paper-tex: url("../images/texture-paper.webp") center / cover no-repeat fixed;
}

/* --- fonts (helyben tárolva; a display font az Adobe kitből) ---------------- */
@font-face {
	font-family: "Libre Baskerville";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/librebaskerville-400-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Libre Baskerville";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/librebaskerville-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Libre Baskerville";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/librebaskerville-700-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Libre Baskerville";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/librebaskerville-700-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Libre Baskerville";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/librebaskerville-italic-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Libre Baskerville";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/librebaskerville-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Bebas Neue — helyi eyebrow fallback, amíg az Adobe-hosztolt „bebas-kai" betölt
   (SIL OFL). A --font-eyebrow lánc a bebas-kai-t (Adobe kit) preferálja; ha az még
   nem töltött be, ide (Bebas Neue) esik vissza, nem Impactra. */
@font-face {
	font-family: "Bebas Neue";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/bebasneue-400-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Bebas Neue";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/bebasneue-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Playfair Display (variable, wght 400–900) — a logó wordmark (ExtraBold) és a lábléc
   márkacím; egyben a Brillante display serif fallbackje. Self-host, OFL. */
@font-face {
	font-family: "Playfair Display";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/playfairdisplay-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Playfair Display";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/playfairdisplay-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Playfair Display";
	font-style: italic;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/playfairdisplay-italic-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Playfair Display";
	font-style: italic;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/playfairdisplay-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Cousine";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/cousine-400-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Cousine";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/cousine-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- reset ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* A WP gyökérszintű blockGap margóját nullázzuk: a design szekciói rés nélkül
   érnek össze. A saját szekció-térközt a patternek padding-je adja. A gyökér-szintű
   (header/main/footer közti) blockGap-et is nullázni kell, különben a lábléc előtt
   rés marad (blueprint §4). */
/* A dekor-elemek (forgó tál, láng-videó) KIVÉTELE alól — ezeknek negatív margóval
   kell átfedniük a szomszéd szekciót (különben a null felülírná őket). */
.guly-page-sections > *:not(.guly-bowl):not(.guly-flames) { margin-block: 0 !important; }
:where(.wp-site-blocks) > * { margin-block: 0 !important; }

/* --- base ------------------------------------------------------------------ */
body {
	font-family: var(--font-body);
	font-size: 1.125rem;
	line-height: 1.68;
	color: var(--c-ink);
	/* A design papír-textúrája (a Figma body-fill forrásképe, WebP) fedi a teljes
	   világos hátteret; a sötét sávok cover-háttere eltakarja. */
	background: var(--c-paper) var(--paper-tex);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

:where(h1, h2, h3, h4) { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; }

:focus-visible { outline: 2px solid var(--c-paprika-deep); outline-offset: 2px; }

/* --- layout ---------------------------------------------------------------- */
.guly-shell {
	width: 100%;
	max-width: var(--shell-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* --- components: tipográfiai helperek -------------------------------------- */
.guly-eyebrow {
	font-family: var(--font-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 1rem;
	line-height: 1;
	color: var(--c-paprika);
	margin: 0;
}
.guly-h1 { font-family: var(--font-display); font-size: clamp(2.375rem, 1.3rem + 4.6vw, 3.75rem); text-transform: uppercase; margin: 0; }
.guly-h2 { font-family: var(--font-display); font-size: clamp(1.9rem, 1.2rem + 2.8vw, 2.75rem); margin: 0; }
.guly-h3 { font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); margin: 0; }
.guly-lead { font-size: 1.25rem; color: var(--c-ink-70); line-height: 1.6; }
.guly-body { font-size: 1.125rem; color: var(--c-ink-70); }
.guly-italic { font-style: italic; }

/* --- components: gombok ---------------------------------------------------- */
.guly-btn,
.wp-block-button__link,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-display);
	font-size: 0.875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.2;
	color: #fff;
	background: var(--c-paprika);
	border: 0;
	border-radius: 0;
	padding: 0.875rem 2rem;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--mo-base) var(--mo-ease);
}
.guly-btn:hover,
.wp-block-button__link:hover,
.wp-element-button:hover { background: var(--c-paprika-deep); }

.is-style-guly-outline .wp-block-button__link {
	background: transparent;
	color: var(--c-ink);
	box-shadow: inset 0 0 0 1.5px var(--c-ink);
}
.is-style-guly-outline .wp-block-button__link:hover { background: var(--c-ink); color: #fff; }

.is-style-guly-ghost .wp-block-button__link {
	background: transparent;
	color: var(--c-ink-55);
	padding: 0;
	text-transform: none;
	letter-spacing: 0;
	font-family: var(--font-body);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- components: fejléc ---------------------------------------------------- */
.guly-site-header { position: sticky; top: 0; z-index: 100; }
.hdr {
	background: var(--c-header-bg);
	backdrop-filter: saturate(1.2) blur(8px);
	border-bottom: 1px solid var(--c-header-border);
}
.hdr-row { min-height: 64px; }
.hdr-logo {
	font-family: var(--font-logo);
	font-weight: 800;
	font-size: 0.9rem;            /* 14.4px */
	letter-spacing: 0.01em;
	color: var(--c-ink);
	text-decoration: none;
	white-space: nowrap;
}
.hdr-nav { display: flex; }
.hdr-menu {
	display: flex;
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--font-display);
	font-size: 1rem;             /* 16px */
	text-transform: uppercase;
	letter-spacing: 0.075em;     /* ~1.2px */
}
.hdr-menu a, .guly-link-underline {
	color: var(--c-ink);
	text-decoration: none;
	position: relative;
	padding-bottom: 2px;
	transition: color var(--mo-base) var(--mo-ease);
}
.hdr-menu a::after, .guly-link-underline::after {
	content: "";
	position: absolute;
	left: 0; right: 100%; bottom: 0;
	height: 1.5px;
	background: var(--c-paprika);
	transition: right var(--mo-base) var(--mo-ease);
}
.hdr-menu a:hover, .hdr-menu a:focus-visible { color: var(--c-paprika-deep); }
.hdr-menu a:hover::after, .guly-link-underline:hover::after { right: 0; }
.hdr-right { display: flex; align-items: center; gap: 14px; }
.hdr-bograc {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--c-paprika);
	color: #fff;
	font-family: var(--font-display);
	font-size: 0.75rem;          /* 12px */
	text-transform: uppercase;
	letter-spacing: 0.1em;       /* ~1.2px */
	padding: 8px 18px;
	text-decoration: none;
	transition: background var(--mo-base) var(--mo-ease);
}
.hdr-bograc:hover { background: var(--c-paprika-deep); }
.hdr-bograc svg { display: block; }
.burger { display: none; background: none; border: 0; color: var(--c-ink); padding: 8px; cursor: pointer; }
.drawer { display: none; }
.drawer.is-open {
	display: block;
	background: var(--c-paper);
	border-bottom: 1px solid var(--c-header-border);
	padding: 8px 0 18px;
}
.drawer-menu {
	list-style: none; margin: 0;
	padding: 0 var(--gutter);
	display: flex; flex-direction: column;
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0.075em;
}
.drawer-menu a { display: block; padding: 12px 0; color: var(--c-ink); text-decoration: none; border-bottom: 1px solid var(--c-header-border); }
.drawer-cta { margin: 14px var(--gutter) 0; width: max-content; }

/* --- components: lábléc ---------------------------------------------------- */
.ftr { background: var(--c-ink); color: rgba(255, 255, 255, 0.3); padding: 64px 0 48px; }
.ftr-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.ftr-brand { grid-column: 1 / span 2; }
.ftr-title { font-family: var(--font-logo); font-weight: 800; font-size: 1rem; line-height: 1.5; color: #fff; margin: 0; }
.ftr-tagline { font-family: var(--font-body); font-size: 0.8rem; line-height: 1.75; color: rgba(255, 255, 255, 0.36); max-width: 320px; margin: 12px 0 0; }
.ftr-contact { display: flex; flex-direction: column; margin-top: 16px; }
.ftr-contact a { font-family: var(--font-body); font-size: 0.78rem; line-height: 1.8; color: rgba(255, 255, 255, 0.3); text-decoration: none; }
.ftr-contact a:hover { color: rgba(255, 255, 255, 0.7); }
.ftr-col h5 { font-family: var(--font-body); font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.6rem; color: rgba(255, 255, 255, 0.4); margin: 0 0 16px; }
.ftr-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ftr-col a { font-family: var(--font-body); font-size: 0.78rem; line-height: 1.5; color: rgba(255, 255, 255, 0.3); text-decoration: none; }
.ftr-col a:hover { color: rgba(255, 255, 255, 0.85); }
.ftr-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.07); font-family: var(--font-body); font-size: 0.7rem; color: rgba(255, 255, 255, 0.2); }

/* --- components: kezdőoldal — hero (Figma 3:42) ---------------------------- */
.guly-hero {
	container: guly-hero / inline-size;
	padding-block: clamp(2.25rem, 4vw, 3.5rem) clamp(3rem, 6vw, 6rem);

	& .guly-hero-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: clamp(2.5rem, 5cqi, 5rem);
		align-items: center;
	}

	& .guly-hero-copy { max-inline-size: 500px; }

	& .guly-hero-title {
		margin-block-start: 22px;
		font-family: var(--font-display);
		text-transform: uppercase;
		font-size: clamp(2.5rem, 1.1rem + 4.6cqi, 3.75rem);   /* → 60px */
		line-height: 1.12;
		letter-spacing: -0.025em;
		color: var(--c-ink);

		& .accent { color: var(--c-paprika); }
	}

	& .guly-hero-lead {
		margin-block-start: 26px;
		max-inline-size: 32em;
		font-family: var(--font-body);
		font-size: 1.125rem;
		line-height: 1.68;
		color: var(--ink-65);
	}

	& .guly-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-block-start: 30px; }

	& .guly-hero-link {
		font-family: var(--font-body);
		font-size: 0.875rem;
		color: var(--ink-50);
		text-decoration: underline;
		text-underline-offset: 3px;
		white-space: nowrap;

		&:hover { color: var(--c-paprika-deep); }
	}

	& .guly-hero-media { position: relative; }
	& .guly-hero-book { inline-size: 100%; block-size: auto; max-inline-size: 600px; margin-inline: auto; }
}
@container guly-hero (max-inline-size: 900px) {
	.guly-hero .guly-hero-grid { grid-template-columns: 1fr; }
	.guly-hero .guly-hero-copy { max-inline-size: none; }
	.guly-hero .guly-hero-book { max-inline-size: 460px; }
}

/* --- components: kezdőoldal — statisztika-sáv (Figma 3:79) ----------------- */
.guly-stats {
	container: guly-stats / inline-size;
	padding-block: clamp(3rem, 6vw, 5rem);

	& .guly-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
	& .guly-stat-num { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: 3.8rem; line-height: 1; color: var(--c-paprika); }
	& .guly-stat-label { margin-block-start: 4px; font-family: var(--font-logo); font-weight: 700; font-size: 1rem; line-height: 1.5; color: var(--c-ink); }
	& .guly-stat-sub { margin-block-start: 6px; font-family: var(--font-body); font-size: 0.875rem; line-height: 1.37; color: var(--ink-45); }
	& .guly-stat + .guly-stat { border-inline-start: 1px solid var(--ink-12); padding-inline-start: 33px; }
	& .guly-stat:nth-child(2) { --reveal-delay: 90ms; }
	& .guly-stat:nth-child(3) { --reveal-delay: 180ms; }
}
@container guly-stats (max-inline-size: 600px) {
	.guly-stats .guly-stats-grid { grid-template-columns: 1fr; gap: 0; }
	.guly-stats .guly-stat + .guly-stat { border-inline-start: 0; padding-inline-start: 0; border-block-start: 1px solid var(--ink-12); margin-block-start: 24px; padding-block-start: 24px; }
}

/* --- components: kezdőoldal — intro „Azt hitted…" (Figma 3:119) ------------ */
.guly-intro {
	container: guly-intro / inline-size;
	padding-block: clamp(3.5rem, 7vw, 6rem);

	& .guly-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6cqi, 6rem); align-items: start; }

	& .guly-intro-title {
		margin: 0;
		font-family: var(--font-display);
		font-weight: 900;
		text-transform: uppercase;
		font-size: clamp(2rem, 1.1rem + 3cqi, 3rem);      /* → 48px */
		line-height: 1.15;
		letter-spacing: -0.02em;
		color: var(--c-ink);
	}

	& .guly-intro-sub {
		margin-block-start: 8px;
		font-family: var(--font-display);
		font-weight: 800;
		font-size: clamp(1.25rem, 0.9rem + 1cqi, 1.5rem); /* → 24px */
		line-height: 1.35;
		color: var(--c-ink);
	}

	& .guly-intro-body { margin-block-start: 20px; font-size: 0.975rem; line-height: 1.9; color: var(--ink-68); }
	& .guly-intro-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
	& .guly-intro-photos img { display: block; inline-size: 100%; aspect-ratio: 1; object-fit: cover; background: var(--ink-10); }
}
@container guly-intro (max-inline-size: 900px) {
	.guly-intro .guly-intro-grid { grid-template-columns: 1fr; }
}

/* --- components: kezdőoldal — Egy kontinens a bográcsban (Figma 18:444) ----- */
/* Modern CSS: natív nesting, container query, logikai property-k, relatív szín. */
.guly-countries-sec {
	container: guly-countries / inline-size;
	padding-block: clamp(3.5rem, 7vw, 6rem);

	& .guly-countries-title {
		font-family: var(--font-logo);
		font-weight: 800;
		font-size: clamp(2rem, 1.1rem + 3cqi, 3rem);
		line-height: 1.25;
		letter-spacing: -0.02em;
		color: var(--c-ink);
		margin-block: 0.75rem 0;
	}

	& .guly-countries-intro {
		font-weight: 700;
		font-size: 1rem;
		line-height: 1.6;
		color: var(--c-ink);
		margin-block-start: 1.25rem;
		max-inline-size: 62ch;
	}
}

.guly-countries {
	margin-block-start: 3.5rem;
	border-block-start: 1px solid var(--ink-12);

	& .guly-country { border-block-end: 1px solid var(--ink-12); }

	& .guly-country-head {
		display: flex;
		align-items: center;
		gap: 24px;
		padding-block: 22px;
		list-style: none;
		cursor: pointer;

		&::-webkit-details-marker { display: none; }
	}

	& .guly-country-num {
		min-inline-size: 42px;
		font-family: var(--font-body);
		font-weight: 500;
		font-size: 2.4rem;
		line-height: 1;
		letter-spacing: 0.04em;
		color: var(--ink-10);
	}

	& .guly-country-name {
		flex: 1;
		font-family: var(--font-logo);
		font-weight: 700;
		font-size: clamp(1.4rem, 1rem + 1.4cqi, 1.75rem);
		letter-spacing: -0.008em;
		color: var(--c-ink);
	}

	& .guly-country-toggle {
		font-family: var(--font-body);
		font-weight: 300;
		font-size: 1.4rem;
		color: var(--ink-25);
		transition: transform var(--mo-base) var(--mo-ease), color var(--mo-base) var(--mo-ease);
	}

	& .guly-country[open] {
		& .guly-country-name { color: var(--c-paprika); }
		& .guly-country-toggle { color: var(--c-paprika); transform: rotate(45deg); }
	}

	& .guly-country-body {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 48px;
		padding-block: 0.25rem 2.5rem;
	}

	& .guly-country-sub {
		margin: 0;
		font-family: var(--font-logo);
		font-style: italic;
		font-size: 1rem;
		color: var(--c-paprika);
	}

	& .guly-country-p {
		margin-block-start: 1rem;
		font-size: 0.9rem;
		line-height: 1.9;
		color: var(--ink-65);
	}

	& .guly-country-media img {
		display: block;
		inline-size: 100%;
		block-size: 100%;
		aspect-ratio: 488 / 325;
		object-fit: cover;
	}
}

.guly-countries-cta {
	display: flex;
	justify-content: center;
	margin-block-start: 3rem;

	& .guly-outline-btn {
		padding-block: 13px;
		padding-inline: 28px;
		font-size: 0.68rem;
		text-transform: uppercase;
		letter-spacing: 0.16em;
		color: var(--c-ink);
		text-decoration: none;
		border: 1px solid var(--ink-60);
		transition: background var(--mo-base) var(--mo-ease), color var(--mo-base) var(--mo-ease);

		&:hover { background: var(--c-ink); color: #fff; }
	}
}

@container guly-countries (max-inline-size: 720px) {
	.guly-countries .guly-country-body { grid-template-columns: 1fr; }
	.guly-countries .guly-country-media { order: -1; }
}

/* --- components: kezdőoldal — Rendelés (Figma 3:574) ----------------------- */
.guly-order {
	container: guly-order / inline-size;
	padding-block: clamp(3rem, 5vw, 4rem) clamp(4rem, 8vw, 6rem);

	& .guly-order-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6cqi, 6rem); align-items: start; }

	& .guly-order-book { display: block; inline-size: 100%; block-size: auto; max-inline-size: 515px; }

	& .guly-spec { margin-block: 32px 0; border-block-start: 1px solid var(--ink-10); }
	& .guly-spec-row { display: flex; gap: 16px; padding-block: 10px; border-block-end: 1px solid rgb(from var(--c-ink) r g b / 0.08); }
	& .guly-spec dt { min-inline-size: 80px; margin: 0; font-family: var(--font-display); font-size: 1rem; color: var(--ink-70); }
	& .guly-spec dd { margin: 0; font-family: var(--font-body); font-size: 0.875rem; color: var(--ink-70); }

	& .guly-order-title {
		margin-block-start: 16px;
		font-family: var(--font-display);
		font-weight: 900;
		text-transform: uppercase;
		font-size: clamp(2.4rem, 1.4rem + 3.4cqi, 3.5rem);   /* → 56px */
		line-height: 1.05;
		letter-spacing: -0.02em;
		color: var(--c-ink);

		& .accent { color: var(--c-paprika); }
	}

	& .guly-order-sub {
		margin-block-start: 20px;
		max-inline-size: 380px;
		font-family: var(--font-body);
		font-size: 1rem;
		line-height: 1.8;
		color: var(--ink-60);
	}

	& .guly-buybox {
		margin-block-start: 28px;
		padding: clamp(1.5rem, 4cqi, 2.5rem);
		border: 1px solid rgb(from var(--c-ink) r g b / 0.14);
	}

	& .guly-field + .guly-field { margin-block-start: 28px; }
	& .guly-field-label {
		display: block;
		font-family: var(--font-display);
		font-size: 1rem;
		text-transform: uppercase;
		letter-spacing: 0.11em;
		color: var(--ink-70);
	}

	& .guly-binding { display: flex; gap: 8px; margin-block-start: 12px; }
	& .guly-binding-btn {
		padding: 9px 19px;
		font-family: var(--font-body);
		font-weight: 500;
		font-size: 0.78rem;
		color: var(--ink-60);
		background: transparent;
		border: 1px solid rgb(from var(--c-ink) r g b / 0.2);
		cursor: pointer;
		transition: background var(--mo-base) var(--mo-ease), color var(--mo-base) var(--mo-ease), border-color var(--mo-base) var(--mo-ease);

		&.is-active { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
	}

	& .guly-price { margin: 8px 0 0; font-family: var(--font-display); font-weight: 900; font-size: 2.8rem; line-height: 1; color: var(--c-ink); }
	& .guly-price-note { margin: 5px 0 0; font-family: var(--font-body); font-size: 0.875rem; color: var(--ink-70); }

	/* Előrendelés-mód: a vásárlódoboz helyett „Előrendelés hamarosan indul" állapot. */
	& .guly-preorder {
		margin-block-start: 28px;
		padding-block-start: 26px;
		border-block-start: 1px solid rgb(from var(--c-ink) r g b / 0.14);
	}
	& .guly-preorder-badge {
		display: inline-block;
		font-family: var(--font-eyebrow);
		font-size: 0.85rem;
		text-transform: uppercase;
		letter-spacing: 0.14em;
		color: var(--c-paprika);
		border: 1px solid rgb(from var(--c-paprika) r g b / 0.4);
		padding: 4px 14px;
		border-radius: 999px;
	}
	& .guly-preorder-title { margin: 16px 0 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(1.5rem, 4cqi, 2rem); line-height: 1.08; color: var(--c-ink); }
	& .guly-preorder-note { margin: 10px 0 0; font-family: var(--font-body); font-size: 0.95rem; line-height: 1.55; color: var(--ink-70); max-inline-size: 42ch; }

	& .guly-qty { display: inline-flex; margin-block-start: 12px; border: 1px solid rgb(from var(--c-ink) r g b / 0.2); }
	& .guly-qty-btn {
		inline-size: 44px; block-size: 44px;
		font-family: var(--font-body); font-size: 1.2rem; color: var(--ink-50);
		background: transparent; border: 0; cursor: pointer;
	}
	& .guly-qty-input {
		inline-size: 46px; block-size: 44px;
		text-align: center;
		font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; color: var(--c-ink);
		background: transparent;
		border: 0; border-inline: 1px solid rgb(from var(--c-ink) r g b / 0.15);
	}

	& .guly-order-cta { inline-size: 100%; justify-content: center; margin-block-start: 32px; padding-block: 16px; }

	& .guly-trust { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
	& .guly-trust li { font-family: var(--font-body); font-size: 0.875rem; color: var(--ink-70); }
	& .guly-trust li::before { content: "✓"; margin-inline-end: 8px; color: inherit; }
}
@container guly-order (max-inline-size: 900px) {
	.guly-order .guly-order-grid { grid-template-columns: 1fr; }
	.guly-order .guly-order-book { margin-inline: auto; }
	.guly-order .guly-order-sub { max-inline-size: none; }
}

/* --- components: kezdőoldal — Mit mondanak róla (Figma 3:525) -------------- */
.guly-reviews {
	container: guly-reviews / inline-size;
	padding-block: clamp(3.5rem, 7vw, 6rem);
	text-align: center;

	& .guly-reviews-title {
		margin-block-start: 12px;
		font-family: var(--font-display);
		font-weight: 900;
		text-transform: uppercase;
		font-size: clamp(2rem, 1.2rem + 2.6cqi, 2.8rem);   /* → 44.8px */
		line-height: 1.2;
		letter-spacing: -0.01em;
		color: var(--c-ink);
	}

	& .guly-reviews-grid {
		margin-block-start: 64px;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 24px;
		text-align: start;
	}

	& .guly-review {
		display: flex;
		flex-direction: column;
		min-block-size: 156px;
		padding: 24px;
		border: 1px solid var(--ink-10);
	}

	& .guly-review-q {
		margin: 0 0 26px;
		font-family: var(--font-logo);
		font-style: italic;
		font-size: 1rem;
		line-height: 1.57;
		color: var(--c-ink);
	}

	& .guly-review-by {
		margin-block-start: auto;
		font-family: var(--font-body);
		font-size: 0.65rem;                                /* 10.4px */
		text-transform: uppercase;
		letter-spacing: 0.14em;
		color: rgb(from var(--c-ink) r g b / 0.35);
	}

	& .guly-review:nth-child(2) { --reveal-delay: 70ms; }
	& .guly-review:nth-child(3) { --reveal-delay: 140ms; }
	& .guly-review:nth-child(4) { --reveal-delay: 210ms; }
}
@container guly-reviews (max-inline-size: 820px) {
	.guly-reviews .guly-reviews-grid { grid-template-columns: repeat(2, 1fr); }
}
@container guly-reviews (max-inline-size: 460px) {
	.guly-reviews .guly-reviews-grid { grid-template-columns: 1fr; }
}

/* --- components: kezdőoldal — A szerző (Figma 3:491) ----------------------- */
.guly-author {
	container: guly-author / inline-size;
	padding-block: clamp(3.5rem, 7vw, 6rem);

	& .guly-author-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6cqi, 6rem); align-items: start; }

	& .guly-author-media img { inline-size: 100%; block-size: auto; aspect-ratio: 464 / 630; object-fit: cover; display: block; }

	& .guly-author-name {
		margin-block-start: 16px;
		font-family: var(--font-display);
		font-weight: 900;
		text-transform: uppercase;
		font-size: clamp(2rem, 1.2rem + 2.6cqi, 2.8rem);   /* → 44.8px */
		line-height: 1.1;
		letter-spacing: -0.01em;
		color: var(--c-ink);
	}

	& .guly-author-sub {
		margin-block-start: 6px;
		font-family: var(--font-logo);
		font-style: italic;
		font-size: 1.05rem;
		color: var(--ink-50);
	}

	& .guly-author-p {
		margin-block-start: 16px;
		font-family: var(--font-body);
		font-size: 1rem;
		line-height: 1.85;
		color: var(--ink-65);
	}

	& .guly-author-p:first-of-type { margin-block-start: 24px; }

	& .guly-author-quote {
		margin: 28px 0 0;
		padding-inline-start: 22px;
		border-inline-start: 2px solid var(--c-paprika);
		font-family: var(--font-body);
		font-style: italic;
		font-size: 0.9375rem;
		line-height: 1.68;
		color: var(--c-ink-55);
	}
}
@container guly-author (max-inline-size: 860px) {
	.guly-author .guly-author-grid { grid-template-columns: 1fr; }
	.guly-author .guly-author-media img { aspect-ratio: 3 / 2; }
}

/* --- components: kezdőoldal — Kinek szól? (Figma 3:424) -------------------- */
.guly-audience {
	container: guly-audience / inline-size;
	padding-block: clamp(3.5rem, 7vw, 6rem);

	& .guly-audience-title {
		margin-block-start: 12px;
		max-inline-size: 620px;
		font-family: var(--font-display);
		font-weight: 900;
		text-transform: uppercase;
		font-size: clamp(2rem, 1.1rem + 3cqi, 3rem);   /* → 48px */
		line-height: 1.2;
		letter-spacing: -0.02em;
		color: var(--c-ink);
	}

	& .guly-audience-grid {
		margin-block-start: 64px;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 32px;
	}

	& .guly-aud-card {
		border-block-start: 2px solid var(--c-paprika);
		padding-block-start: 22px;
	}

	& .guly-aud-title {
		margin: 0;
		font-family: var(--font-display);
		font-weight: 700;
		text-transform: uppercase;
		font-size: 1.25rem;                            /* 20px */
		line-height: 1.2;
		color: var(--c-ink);
	}

	& .guly-aud-desc {
		margin-block-start: 10px;
		font-family: var(--font-body);
		font-size: 0.875rem;
		line-height: 1.7;
		color: var(--c-ink-55);
	}

	/* reveal-stagger a kártyáknál */
	& .guly-aud-card:nth-child(2) { --reveal-delay: 70ms; }
	& .guly-aud-card:nth-child(3) { --reveal-delay: 140ms; }
	& .guly-aud-card:nth-child(4) { --reveal-delay: 60ms; }
	& .guly-aud-card:nth-child(5) { --reveal-delay: 130ms; }
	& .guly-aud-card:nth-child(6) { --reveal-delay: 200ms; }
}
@container guly-audience (max-inline-size: 820px) {
	.guly-audience .guly-audience-grid { grid-template-columns: repeat(2, 1fr); }
}
@container guly-audience (max-inline-size: 520px) {
	.guly-audience .guly-audience-grid { grid-template-columns: 1fr; }
}

/* --- components: kezdőoldal — A könyvben többek között (Figma 3:340) -------- */
/* Full-bleed wrapper (position + overflow-clip a jobb szélen kilógó csili-dekorhoz),
   a tartalom a belső .guly-shell-ben. */
.guly-topics {
	container: guly-topics / inline-size;
	position: relative;
	overflow-x: clip;
	padding-block: clamp(3.5rem, 7vw, 6rem);
	/* A container-type miatt ez a szekció önálló stacking context → a benne lévő
	   videó/csili multiply-ja NEM érné el a body-textúrát. Ezért ide is a FIXED
	   textúra kerül lokális backdropként (pixelre illeszkedik a body-hoz). */
	background: var(--c-paper) var(--paper-tex);

	/* Csili-dekor (látványterv szerint): a jobb szélen, majdnem teljesen látható
	   (csak kicsit lóg ki), a szekció aljából ~felényit a „Kinek szól?" szekcióba
	   lógva. A forgatás a képben van (nem CSS). Multiply a papír-textúrához. */
	/* Pontos Figma-koordináták (node 64:26 a 1920-as topics-szekcióhoz viszonyítva):
	   x=1449 (jobb 25%-a a viewporton kívülre lóg → cut off), y=680, 627×627,
	   alul 487px-nyit a „Kinek szól?"-ba lóg. */
	& .guly-topics-chili {
		position: absolute;
		inset-block-end: clamp(-487px, -25.4vw, -150px);
		inset-inline-end: clamp(-156px, -8.1vw, -50px);
		inline-size: min(32.7vw, 627px);
		block-size: auto;
		mix-blend-mode: multiply;
		pointer-events: none;
	}

	& .guly-topics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6cqi, 6rem); align-items: start; }

	& .guly-topics-title {
		margin-block-start: 16px;
		font-family: var(--font-logo);
		font-weight: 800;
		font-size: clamp(2rem, 1.1rem + 3cqi, 3rem);   /* → 48px */
		line-height: 1.15;
		letter-spacing: -0.02em;
		color: var(--c-ink);
	}

	& .guly-topics-body {
		margin-block-start: 20px;
		font-size: 0.975rem;
		line-height: 1.85;
		color: rgb(from var(--c-ink) r g b / 0.62);
	}

	/* Bogrács + lobogó tűz VIDEÓ (bogracs-langok.mp4, 1040²). A videó a `guly-reveal`
	   szülőben ül, ami valós böngészőn (translate) önálló stacking context → a
	   multiply nem érné el a body-textúrát. Ezért a videó KÖZVETLEN konténere kapja
	   a FIXED textúrát lokális backdropként (fixed → illeszkedik a body-hoz), a
	   multiply ezen üt át (fehér → textúra).
	   FONTOS: a videó háttere ffmpeg-gel TISZTA fehérre (255,255,255) van kulcsolva
	   (min-channel > 215 → 255), mert a nyers klip szemcsés törtfehér háttere multiply
	   alatt megDUPLÁZta a textúrát. Tiszta fehér × textúra = EGY textúra. */
	& .guly-topics-illu {
		margin-block-start: 40px;
		inline-size: min(100%, 520px);
		background: var(--c-paper) var(--paper-tex);
	}
	& .guly-topics-illu :is(img, video) { inline-size: 100%; block-size: auto; display: block; mix-blend-mode: multiply; }

	& .guly-topic {
		display: flex;
		gap: 16px;
		align-items: baseline;
		padding-block: 16px;
		border-block-end: 1px solid var(--ink-10);
	}

	& .guly-topic-num {
		min-inline-size: 24px;
		font-family: var(--font-mono);
		font-size: 0.6rem;                             /* 9.6px */
		letter-spacing: 0.05em;
		color: rgb(from var(--c-paprika) r g b / 0.45);
	}

	& .guly-topic-q {
		margin: 0;
		font-family: var(--font-body);
		font-size: 0.875rem;
		line-height: 1.7;
		color: var(--ink-65);
	}

	& .guly-topics-cta { margin-block-start: 40px; }
}
@container guly-topics (max-inline-size: 900px) {
	.guly-topics .guly-topics-grid { grid-template-columns: 1fr; }
	.guly-topics .guly-topics-illu { text-align: center; }
	.guly-topics .guly-topics-illu img { margin-inline: auto; }
}

/* --- components: forgó gulyástál (átvezetés az „A kezdetek" sáv fölött) ----- */
/* A körkörös tál-fotó (WebP, alpha) középen ül a szekcióhatáron; az alsó felét a
   következő sötét sáv takarja (a sáv z-index 1-en van). Lassú forgás. */
.guly-bowl {
	/* Design-export szerint: a tál 1024px széles (1920-on: 53.3vw) és a FELSŐ
	   45.3%-a látszik — a maradékot a következő sötét sáv takarja. */
	--bowl-size: min(53.3vw, 1024px);
	display: flex;
	justify-content: center;
	margin-block-end: calc(var(--bowl-size) * -0.547);
	pointer-events: none;

	& img {
		inline-size: var(--bowl-size);
		block-size: auto;
		aspect-ratio: 1;
		animation: guly-spin 90s linear infinite;
	}
}
@keyframes guly-spin {
	to { rotate: 1turn; }
}

/* --- components: kezdőoldal — sötét sáv (Figma 3:322) ---------------------- */
/* Teljes szélességű, háttérkép (WebP asset) + ink-overlay, középre igazítva.
   position + z-index: a sáv a forgó tál alsó fele FÖLÉ kerül. */
.guly-band {
	--band-overlay: rgb(from var(--c-ink) r g b / 0.62);
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	min-block-size: clamp(34rem, 50vw, 50rem);
	padding-block: clamp(4rem, 9vw, 7rem);
	padding-inline: var(--gutter);
	text-align: center;
	color: #fff;
	background:
		linear-gradient(var(--band-overlay), var(--band-overlay)),
		var(--band-bg, none) center / cover no-repeat;

	& .guly-band-inner { max-inline-size: 768px; }

	& .guly-eyebrow { color: var(--c-paprika); }

	& .guly-band-title {
		margin-block-start: 16px;
		font-family: var(--font-display);
		font-weight: 900;
		text-transform: uppercase;
		font-size: clamp(2.25rem, 1.2rem + 3.5vw, 3.6rem);   /* → 57.6px */
		line-height: 1.1;
		letter-spacing: -0.01em;
		color: #fff;
	}

	& .guly-band-lead {
		margin-block-start: 24px;
		margin-inline: auto;
		max-inline-size: 540px;
		font-family: var(--font-body);
		font-size: 1.05rem;
		line-height: 1.85;
		color: rgb(from #fff r g b / 0.72);
	}
}

/* Chili-idézet sáv (Figma 3:153): teljes szélesség, chili-fotó + 68% fekete overlay,
   Playfair Italic fehér idézet + Brillante attribúció. */
.guly-band-quote {
	display: grid;
	place-items: center;
	padding-block: 80px;
	padding-inline: var(--gutter);
	text-align: center;
	color: #fff;
	background:
		linear-gradient(rgb(0 0 0 / 0.68), rgb(0 0 0 / 0.68)),
		var(--band-bg, none) center / cover no-repeat;

	& .guly-band-quote-inner { max-inline-size: 896px; }

	& .guly-bq-text {
		margin: 0;
		font-family: var(--font-logo);
		font-style: italic;
		font-size: clamp(1.5rem, 1rem + 1.7vw, 2.3rem);   /* → 36.8px */
		line-height: 1.65;
		color: #fff;
	}

	& .guly-bq-by {
		margin-block-start: 24px;
		font-family: var(--font-display);
		font-size: 0.9rem;                                 /* 14.4px */
		text-transform: uppercase;
		letter-spacing: 0.145em;
		color: rgb(from #fff r g b / 0.55);
	}
}

/* Láng-átvezetés (VALÓDI tűz-VIDEÓ, Figma 59:20 / footer-tuz.mp4): a rendelés
   és a záró CTA között. A fehér hátteret a multiply tünteti el a textúrán; a
   videó alja a záró sávba lóg, amit a sáv (z-index 1) takar — a lángok így a
   sötét sáv éléből „nőnek ki" (látványterv szerint). */
.guly-flames {
	/* NINCS z-index/position → nem lesz önálló stacking context, így a videó
	   multiply-ja eléri a body-textúrát (a fehér részeken átüt a minta). A záró
	   sáv (position:relative; z-index:1) így is a lángok ALJÁRA kerül. */
	display: flex;
	justify-content: center;
	align-items: flex-end;
	margin-block-start: clamp(-261px, -13.6vw, -80px);
	margin-block-end: clamp(-231px, -12vw, -80px);
	pointer-events: none;

	& video {
		inline-size: min(100%, 1914px);
		block-size: auto;
		display: block;
		mix-blend-mode: multiply;
	}
}

/* Záró CTA-variáns (Figma 3:694): halvány háttér, kisebb címsor, paprika CTA. */
.guly-band--closing {
	--band-overlay: rgb(from var(--c-ink) r g b / 0.88);
	min-block-size: clamp(24rem, 32vw, 34rem);
	background-color: var(--c-ink);

	& .guly-band-title { font-size: clamp(2rem, 1.2rem + 2.8vw, 3rem); }   /* → 48px */
	& .guly-band-lead { margin-block-start: 20px; color: rgb(from #fff r g b / 0.55); }
	& .guly-band-cta { margin-block-start: 28px; padding-block: 16px; padding-inline: 40px; letter-spacing: 0.144em; }
}

/* --- components: design-system oldal --------------------------------------- */
.guly-design-system .guly-ds-sec { margin-top: 56px; }
.guly-design-system .guly-ds-sec > h2 { margin: 0 0 20px; }
.guly-ds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.guly-sw { border: 1px solid var(--c-stroke); border-radius: var(--r-md); overflow: hidden; }
.guly-sw .chip { height: 74px; }
.guly-sw .meta { padding: 8px 10px; font-family: var(--font-body); }
.guly-sw b { display: block; font-size: 13px; color: var(--c-ink); }
.guly-sw span { font-size: 12px; color: var(--c-ink-55); }
.guly-ds-band { background: var(--c-ink); border-radius: var(--r-lg); padding: 28px; margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.guly-ds-pills { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* --- blocks ---------------------------------------------------------------- */
.is-style-guly-card {
	background: var(--c-white);
	border: 1px solid var(--c-stroke);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-card);
	padding: clamp(1.25rem, 2.5vw, 2rem);
}

/* --- responsive ------------------------------------------------------------ */
@media (max-width: 900px) {
	.ftr-cols { grid-template-columns: 1fr 1fr; }
	.ftr-brand { grid-column: 1 / -1; }
}
@media (max-width: 780px) {
	.hdr-nav { display: none; }
	.burger { display: inline-flex; }
}
@media (max-width: 560px) {
	.ftr-cols { grid-template-columns: 1fr; }
	.ftr-brand { grid-column: auto; }
}

/* --- animations: reveal ---------------------------------------------------- */
/* Decens megjelenés-animáció. A kezdeti rejtett állapot CSAK akkor él, ha van JS
   ÉS a felhasználó nem kért kevesebb mozgást — így JS nélkül és reduced-motionnál
   minden tartalom azonnal látszik. A `.is-in` osztályt a theme.js IntersectionObserver
   teszi rá. A `translate`/`scale` külön property-k (modern, nem transform-shorthand). */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
	.guly-reveal {
		opacity: 0;
		translate: 0 18px;
		transition: opacity 0.7s var(--mo-ease), translate 0.7s var(--mo-ease);
		transition-delay: var(--reveal-delay, 0ms);
	}
	.guly-reveal.is-in { opacity: 1; translate: 0 0; }
}

/* --- utilities ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}