/*
Theme Name: BlokkMűhely
Theme URI: https://blokkmuhely.hu
Author: BlokkMűhely
Author URI: https://blokkmuhely.hu
Description: A blokkmuhely.hu eladó oldal FSE témája — natív WordPress block editor esztétika, rács-alapú, technikai pozicionálással.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blokkmuhely
*/

/* Shared foundation. Gutenberg remains the source of colors and type. */
:root {
 --bm-line: var(--wp--preset--color--border);
 --bm-ink: var(--wp--preset--color--contrast);
 --bm-paper: var(--wp--preset--color--surface);
 --bm-accent: var(--wp--preset--color--accent);
 --bm-ease: cubic-bezier(.22, 1, .36, 1);
 --bm-section: clamp(64px, 8vw, 112px);
 /* Type scale: the sizes live in theme.json so the editor offers the same steps. */
 --bm-fs-xs: var(--wp--preset--font-size--xs);
 --bm-fs-sm: var(--wp--preset--font-size--small);
 --bm-fs-ui: var(--wp--preset--font-size--ui);
 --bm-fs-base: var(--wp--preset--font-size--base);
 --bm-fs-prose: var(--wp--preset--font-size--prose);
 --bm-fs-lead: var(--wp--preset--font-size--medium);
 --bm-fs-h4: var(--wp--preset--font-size--heading-4);
 --bm-fs-h3: var(--wp--preset--font-size--heading-3);
 --bm-fs-h2: var(--wp--preset--font-size--large);
 --bm-fs-h1: var(--wp--preset--font-size--x-large);
 --bm-fs-display: var(--wp--preset--font-size--display);
 --bm-lh-tight: 1;
 --bm-lh-heading: 1.1;
 --bm-lh-snug: 1.25;
 --bm-lh-ui: 1.4;
 --bm-lh-body: 1.6;
 --bm-lh-relaxed: 1.75;
 --bm-track-tight: -.04em;
 --bm-track-heading: -.03em;
 --bm-track-snug: -.02em;
 --bm-track-label: .08em;
}
strong, b { font-weight: 600; }
:where(.wp-block-site-title) { font-size: var(--bm-fs-h4); }
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 32px; }
body { -webkit-font-smoothing: antialiased; }
::selection { background: var(--bm-accent); color: #fff; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--bm-accent); outline-offset: 5px; }
:where(h1, h2, h3) { text-wrap: balance; overflow-wrap: break-word; }
:where(p) { text-wrap: pretty; }
:where(img, video) { max-width: 100%; height: auto; }
.wp-site-blocks > main, .wp-site-blocks > footer, .bm-home > * { margin-block-start: 0; }
.wp-block-column { min-width: 0; }
:where(.bm-home) > :where(.wp-block-group) { padding-block: var(--bm-section) !important; }
.bm-home > .wp-block-group > :first-child { margin-block-start: 0; }
.bm-home h2 { max-width: 720px; }
.bm-eyebrow {
 color: var(--bm-accent);
 font-size: var(--bm-fs-xs) !important;
 line-height: var(--bm-lh-body);
 letter-spacing: var(--bm-track-label);
 text-transform: uppercase;
 margin-block: 0 24px;
}
.bm-eyebrow + h2 { margin-top: 0; }
/* Every section header starts on the same left edge. The block editor centres any
   child narrower than contentSize with margin:auto !important, which pulled eyebrows
   to 380px and headings to 360px while their own card grids began at 120px. */
.bm-home > .wp-block-group > .bm-eyebrow,
.bm-home > .wp-block-group > h2,
.bm-home > .wp-block-group > p:not(.bm-eyebrow) { margin-left: 0 !important; margin-right: 0 !important; }

/* Masthead: a small signature and generous breathing room. */
header.wp-block-template-part { position: sticky; top: 0; z-index: 100; }
.bm-header { position: relative; background: #fff; }
.bm-header::before { content: ""; position: absolute; inset: 0 auto auto max(var(--wp--style--root--padding-left), calc((100% - 1200px) / 2)); width: 48px; height: 3px; background: var(--bm-accent); }
.bm-header .wp-block-site-title { font-size: var(--bm-fs-h4); letter-spacing: var(--bm-track-tight); white-space: nowrap; }
.bm-header .wp-block-site-title a { color: var(--bm-ink); text-decoration: none; }
.bm-header .wp-block-navigation { font-weight: 500; }
.bm-header .wp-block-navigation .wp-block-navigation__container { gap: clamp(24px, 3.2vw, 40px); }
.bm-header .wp-block-navigation-item__content { position: relative; padding-block: 10px; }
.bm-header .wp-block-navigation-item__content::before { content: ""; position: absolute; left: -14px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; background: var(--wp--preset--color--contrast-secondary); opacity: 0; transform: translateY(6px); transition: opacity 220ms var(--bm-ease), transform 220ms var(--bm-ease); }
.bm-header .wp-block-navigation-item__content:hover::before,
.bm-header .current-menu-item > .wp-block-navigation-item__content::before { opacity: 1; transform: none; }
.bm-header .current-menu-item > .wp-block-navigation-item__content { color: var(--bm-ink); }
.bm-header .current-menu-item > .wp-block-navigation-item__content::before { background: var(--bm-accent); }
body:not(.logged-in) .bm-doksi-fejlec-link { display: none !important; }
.wp-block-woocommerce-mini-cart { display: flex; align-items: center; flex-shrink: 0; }
.bm-header .wp-block-woocommerce-mini-cart { border-left: 1px solid var(--bm-line); padding-left: 16px; }

/* Hero: an editorial headline beside a layered, lightweight site illustration. */
.bm-home > .bm-hero { padding-block: clamp(56px, 7vw, 96px) 0 !important; }
.bm-hero > .wp-block-columns { gap: clamp(32px, 4vw, 56px); margin-bottom: 0; }
.bm-hero h1 { font-size: var(--bm-fs-display); line-height: var(--bm-lh-heading); letter-spacing: var(--bm-track-tight); margin-top: 20px; }
.bm-hero-accent { color: var(--bm-accent); }
.bm-hero .wp-block-column > .has-mono-font-family { font-size: var(--bm-fs-xs); line-height: var(--bm-lh-relaxed); letter-spacing: var(--bm-track-label); text-transform: uppercase; }
.bm-hero .wp-block-column > .has-mono-font-family::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 10px 1px 0; background: var(--bm-accent); }
.bm-hero .wp-block-column > .has-medium-font-size { max-width: 470px; line-height: var(--bm-lh-relaxed); }
.bm-hero .wp-block-buttons { gap: 12px; flex-wrap: wrap; }
.bm-hero .wp-block-button:first-child .wp-block-button__link::after { content: "↗"; margin-left: 18px; font-size: var(--bm-fs-h4); line-height: var(--bm-lh-tight); }
.bm-blueprint { width: 100%; max-width: 560px; margin-inline: auto; border: 1px solid #e4e4ed; background: #f8f8fc; border-radius: 8px; box-shadow: 0 20px 60px -40px #27276655; }
.bm-blueprint svg { display: block; width: 100%; height: auto; }
.bm-blueprint-caption, .bm-blueprint-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; font: var(--bm-fs-xs)/var(--bm-lh-body) var(--wp--preset--font-family--mono); letter-spacing: var(--bm-track-label); color: #676779; }
.bm-blueprint-caption { border-bottom: 1px solid #e4e4ed; }
.bm-blueprint-caption > :last-child { color: var(--bm-accent); font-size: 17px; }
.bm-blueprint-foot { border-top: 1px solid #e4e4ed; flex-wrap: wrap; }
.bm-module { transform-box: fill-box; transform-origin: center; }
.bm-hero .bm-hero-facts { margin-top: clamp(40px, 6vw, 80px); padding-block: 24px; border-top: 1px solid var(--bm-line); gap: 16px 40px; }
.bm-hero-facts p { margin: 0; font-size: var(--bm-fs-sm); color: var(--wp--preset--color--contrast-secondary); display: flex; align-items: center; gap: 10px; }
.bm-hero-facts p::before { content: ""; width: 5px; height: 5px; flex-shrink: 0; background: var(--bm-accent); }

/* Secondary page heads: the hero voice at a lower rank, so niche pages stay dominant. */
.bm-pagehead h1 { line-height: var(--bm-lh-heading); letter-spacing: var(--bm-track-heading); margin-top: 0; }
.bm-pagehead > .has-medium-font-size { max-width: 620px; line-height: var(--bm-lh-relaxed); }
.bm-pagehead .wp-block-buttons { gap: 12px; flex-wrap: wrap; }

/* Controls allow long Hungarian labels to wrap without breaking their columns. */
.wp-element-button, .wp-block-button__link, .wc-block-components-button { transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease; text-decoration: none; }
.wp-block-button { max-width: 100%; }
.wp-block-button__link { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; line-height: var(--bm-lh-ui); gap: 4px; white-space: normal; }
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background-color: var(--bm-ink); color: #fff; }
.wp-block-button.is-style-outline .wp-block-button__link { border: 1px solid var(--bm-line); color: var(--bm-ink); background: transparent; }
.wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: var(--bm-ink); background: var(--bm-paper); }
.wp-element-button:active { transform: translateY(1px); }

/* Product shelf. Real product images and data remain managed by WooCommerce. */
.blokkmuhely-termekracs > p, .bm-pricing > p { max-width: 680px; margin-left: 0; }
.blokkmuhely-termekracs > p:not(.bm-eyebrow), .bm-pricing > p:not(.bm-eyebrow) { font-size: var(--bm-fs-base); line-height: var(--bm-lh-relaxed); }
/* WooCommerce sizes the columns as calc(33.33% - .83333em), which assumes a 1.25em gap; anything wider drops a column. */
.blokkmuhely-termekracs .wc-block-product-template { gap: 1.25em; }
.blokkmuhely-termekracs .wc-block-product { display: flex; flex-direction: column; gap: 0; min-width: 0; padding: 12px 12px 24px; border: 1px solid var(--bm-line); border-radius: 8px; background: #fff; transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms var(--bm-ease); }
.blokkmuhely-termekracs .wc-block-product:hover { border-color: #b9b9d4; box-shadow: 0 18px 38px -24px #20204040; }
.blokkmuhely-termekracs .wc-block-components-product-image { background: var(--bm-paper); margin-bottom: 24px; overflow: hidden; border-radius: 4px; }
.blokkmuhely-termekracs .wc-block-components-product-image img { aspect-ratio: 4 / 3 !important; width: 100%; height: auto; object-fit: cover; transition: transform 650ms var(--bm-ease); }
.blokkmuhely-termekracs .wp-block-post-title { margin: 0 12px 10px; font-size: var(--bm-fs-h3); }
.blokkmuhely-termekracs .wp-block-post-title a { color: var(--bm-ink); text-decoration: none; }
.blokkmuhely-termekracs .wp-block-woocommerce-product-price { margin-inline: 12px; color: var(--wp--preset--color--contrast-secondary); }
.blokkmuhely-termekracs .wp-block-woocommerce-product-button { margin: auto 12px 0; padding-top: 20px; }
.blokkmuhely-termekracs .bm-demo-link { margin: 0 12px; font-size: var(--bm-fs-xs); }
.blokkmuhely-termekracs .bm-demo-link a { color: var(--bm-ink); text-decoration: none; }
.blokkmuhely-termekracs .bm-demo-link a::before { content: "↗"; color: var(--bm-accent); margin-right: 8px; }
.blokkmuhely-termekracs .bm-demo-link span { color: var(--wp--preset--color--contrast-secondary); }
.blokkmuhely-termekracs .wc-block-components-product-button__button { border: 1px solid var(--bm-line); background: transparent; color: var(--bm-ink); border-radius: 4px; min-height: 46px; }
.blokkmuhely-termekracs .wc-block-components-product-button__button:hover { border-color: var(--bm-accent); color: var(--bm-accent); }
.blokkmuhely-termekracs .wp-block-woocommerce-product-collection-no-results { padding: clamp(28px, 5vw, 64px); border: 1px dashed #c6c6d8; border-radius: 8px; background: linear-gradient(125deg, #f8f8fc, var(--bm-paper)); }

/* Distinct section rhythms: audience cards, a dark manifesto, then a timeline. */
.bm-principles > .wp-block-columns { gap: clamp(32px, 6vw, 80px); margin-bottom: 0; }
.bm-principles .wp-block-column:first-child > p:not(.bm-eyebrow) { max-width: 400px; font-size: var(--bm-fs-base); line-height: var(--bm-lh-relaxed); }
.bm-principles:not(.bm-audience) .wp-block-column:last-child > .wp-block-group { padding-block: 28px !important; }
.bm-principles .wp-block-column:last-child h3 { font-size: var(--bm-fs-h3); line-height: var(--bm-lh-snug); }
.bm-principles .wp-block-column:last-child p:not(.has-mono-font-family) { font-size: var(--bm-fs-base); line-height: var(--bm-lh-relaxed); color: var(--wp--preset--color--contrast-secondary); }
.bm-principles:not(.bm-audience) .wp-block-column:last-child > .wp-block-group:first-child { border-top: 0; padding-top: 0 !important; }
.bm-principles:not(.bm-audience) .wp-block-column:last-child > .wp-block-group:last-child { border-bottom: 0; padding-bottom: 0 !important; }
.bm-audience > .wp-block-columns { display: grid; grid-template-columns: 1fr; gap: 36px; }
.bm-audience .wp-block-column:first-child { display: grid; grid-template-columns: 1.3fr 1fr; column-gap: 64px; align-items: start; }
.bm-audience .wp-block-column:first-child > .bm-eyebrow { grid-column: 1 / -1; }
.bm-audience .wp-block-column:first-child > p:not(.bm-eyebrow) { margin-top: 0; max-width: none; }
.bm-audience .wp-block-column:last-child { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: audience; }
.bm-audience--two .wp-block-column:last-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bm-audience .wp-block-column:last-child > .wp-block-group { margin: 0; padding: 32px !important; border: 1px solid var(--bm-line); border-radius: 6px; background: var(--bm-paper); counter-increment: audience; }
.bm-audience .wp-block-column:last-child > .wp-block-group::before { content: "0" counter(audience); display: block; font: var(--bm-fs-xs)/var(--bm-lh-tight) var(--wp--preset--font-family--mono); color: var(--bm-accent); margin-bottom: 36px; }
.bm-audience .wp-block-column:last-child > .wp-block-group:first-child, .bm-audience .wp-block-column:last-child > .wp-block-group:last-child { border: 1px solid var(--bm-line); }
.bm-audience .wp-block-column:last-child h3 { margin-top: 0; }
.bm-home > .bm-native { position: relative; isolation: isolate; color: #fff; border-top: 0; padding-block: var(--bm-section) !important; }
.bm-native::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(-1 * var(--wp--style--root--padding-right)) 0 calc(-1 * var(--wp--style--root--padding-left)); background: #171728; border-radius: 8px; }
.bm-native .bm-eyebrow, .bm-native .has-accent-color { color: #aaaaff !important; }
.bm-native .has-contrast-secondary-color, .bm-native .wp-block-column:last-child p:not(.has-mono-font-family) { color: #bdbdce !important; }
.bm-native .wp-block-column:last-child > .wp-block-group { border-color: #383849 !important; }
.bm-native .has-mono-font-family:not(.bm-eyebrow) { display: flex; align-items: center; gap: 12px; font-size: var(--bm-fs-xs); }
.bm-native .has-mono-font-family:not(.bm-eyebrow)::before { content: ""; flex: 0 0 7px; height: 7px; border: 1px solid currentColor; }
.bm-native a { color: #c2c2ff; }
.bm-native :focus-visible { outline-color: #c2c2ff; }
.bm-home > .bm-video { position: relative; isolation: isolate; color: #fff; padding-block: var(--bm-section); }
.bm-video::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(-1 * var(--wp--style--root--padding-right)) 0 calc(-1 * var(--wp--style--root--padding-left)); background: radial-gradient(120% 90% at 85% 50%, #26265a 0%, #171728 60%); border-radius: 8px; }
.bm-video .bm-eyebrow { color: #aaaaff !important; }
.bm-video h2 { margin-block: 0 20px; color: #fff; }
.bm-video .bm-video-lead { margin: 0; max-width: 420px; font-size: var(--bm-fs-base); line-height: var(--bm-lh-relaxed); color: #bdbdce; }
.bm-video-facts { margin: 32px 0 0; padding: 24px 0 0; list-style: none; border-top: 1px solid #383849; display: grid; gap: 12px; }
.bm-video-facts li { display: flex; align-items: center; gap: 12px; font: var(--bm-fs-xs)/var(--bm-lh-body) var(--wp--preset--font-family--mono); letter-spacing: var(--bm-track-label); text-transform: uppercase; color: #d6d6e4; }
.bm-video-facts li::before { content: ""; flex: 0 0 7px; height: 7px; border: 1px solid #aaaaff; }
.bm-video-frame { margin: 0; border: 1px solid #3a3a58; border-radius: 8px; background: #0f0f1d; overflow: hidden; box-shadow: 0 40px 90px -40px #000000cc, 0 0 0 8px #ffffff08; }
.bm-video-caption { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 14px 20px; border-bottom: 1px solid #2c2c44; font-size: var(--bm-fs-xs); letter-spacing: var(--bm-track-label); color: #9a9ab3; }
.bm-video-caption > :last-child { color: #aaaaff; }
.bm-video-frame .wp-block-embed { margin: 0; }
.bm-video-frame iframe { display: block; }
.bm-video :focus-visible { outline-color: #c2c2ff; }
.bm-steps .wp-block-column:last-child { counter-reset: steps; }
.bm-steps .wp-block-column:last-child > .wp-block-group { position: relative; padding-left: 66px; counter-increment: steps; }
.bm-steps .wp-block-column:last-child > .wp-block-group::before { content: "0" counter(steps); position: absolute; left: 0; top: 28px; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #d9d9f1; border-radius: 50%; font: var(--bm-fs-xs)/var(--bm-lh-tight) var(--wp--preset--font-family--mono); color: var(--bm-accent); background: #f7f7ff; }
.bm-steps .wp-block-column:last-child > .wp-block-group:first-child::before { top: 0; }
.bm-steps h3 { margin-top: 0; }

/* A „border” palettaszín .has-border-color szövegszín-osztálya ütközik a keretszín blokk-osztályával; szövegszínt csak has-text-color mellett adjon. */
.has-border-color:not(.has-text-color) { color: inherit !important; }

/* Pricing uses genuine gaps: no negative margins or overlapping borders. */
.bm-pricing > .wp-block-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; margin-block: 40px 0; }
.blokkmuhely-csomag { position: relative; display: flex; flex-direction: column; margin: 0; border-style: solid; border-radius: 8px; background: #fff; padding: clamp(24px, 2.5vw, 36px) !important; }
.blokkmuhely-csomag > :first-child { margin-top: 0; }
.blokkmuhely-csomag h3 { font-size: var(--bm-fs-h3); margin-top: 28px; }
.blokkmuhely-csomag > .has-large-font-size { letter-spacing: var(--bm-track-tight); margin-top: 24px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.blokkmuhely-csomag > .has-small-font-size { min-height: 64px; line-height: var(--bm-lh-relaxed); }
.blokkmuhely-csomag > .wp-block-buttons { margin-top: auto; padding-top: 32px; }
.blokkmuhely-csomag .wp-block-button__link { width: 100%; padding-inline: 16px; font-size: var(--bm-fs-ui); min-height: 56px; }
.blokkmuhely-csomag ul { list-style: none; padding: 24px 0 0; margin-block: 8px 0; border-top: 1px solid var(--bm-line); }
.blokkmuhely-csomag ul li { position: relative; padding: 8px 0 8px 22px; line-height: var(--bm-lh-body); }
.blokkmuhely-csomag ul li::before { content: ""; position: absolute; top: 15px; left: 1px; width: 9px; height: 5px; border-bottom: 1.5px solid var(--bm-accent); border-left: 1.5px solid var(--bm-accent); transform: rotate(-45deg); }
.blokkmuhely-csomag:nth-child(2) { background: #f4f4ff; box-shadow: 0 16px 48px -28px #2f2fd94d; }
/* Standing alone, the mark is the logo motif and keeps the brand accent. */
.bm-jel rect { fill: var(--bm-line); }
.bm-jel rect.is-on { fill: var(--bm-accent); }
/* On a pricing card it is a quantity instead: filled squares say how far up the
   tiers this card sits, so it reads as a measure rather than as branding. */
.blokkmuhely-csomag .bm-jel rect.is-on { fill: var(--bm-ink); }
.bm-pricing > p:last-child { max-width: 920px; font-size: var(--bm-fs-sm); line-height: var(--bm-lh-relaxed); }
/* The kit chooser is the primary decision on the site, so it takes the full grid.
   CARE is a secondary add-on and stays deliberately narrower, still left-aligned. */
.bm-niche-select > .wp-block-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bm-care > .wp-block-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 790px; margin-left: 0 !important; }
.blokkmuhely-csomag .bm-price-period { font-size: var(--bm-fs-sm); letter-spacing: normal; color: var(--wp--preset--color--contrast-secondary); }
/* Both kits are live, so neither card is "recommended": which one is yours is
   decided by your trade, not by us. CARE / CARE PRO are equal too. The
   pricing grid's positional second-card tint is switched off; on a kit page the
   highlight is given by name instead (.is-recommended, below). */
.bm-niche-select .blokkmuhely-csomag:nth-child(2),
.bm-decision .blokkmuhely-csomag:nth-child(2),
.bm-care .blokkmuhely-csomag:nth-child(2) { background: #fff; box-shadow: none; }
/* Kit tiers: SETUP is the one we steer towards. The label says it is our
   recommendation, not "most popular" — that would claim sales data we do not
   have yet (CLAUDE.md 12). START stays complete but steps back: no card fill,
   an outline button, so the only solid button in the row is SETUP's. */
.bm-decision .blokkmuhely-csomag.is-recommended { background: #f4f4ff; box-shadow: 0 16px 48px -28px #2f2fd94d; }
.bm-csomag-cimke { position: absolute; top: 0; left: clamp(24px, 2.5vw, 36px); margin: 0 !important; transform: translateY(-50%); padding: 5px 12px; border-radius: 4px; background: var(--bm-accent); color: #fff; font-size: var(--bm-fs-sm); font-weight: 500; line-height: var(--bm-lh-snug); }
.bm-decision .blokkmuhely-csomag.is-quiet { background: transparent; box-shadow: none; }
.bm-decision .blokkmuhely-csomag.is-quiet .has-large-font-size { color: var(--wp--preset--color--contrast-secondary); }

/* Hub: the section library without screenshots. The hub must not pick a niche
   for the visitor, so the proof is typographic — one mark per section, which
   makes the headline number countable rather than merely claimed. The rows
   double as a bar chart of how much choice each stage of a page offers.
   A tinted full-bleed band because the hub otherwise runs four white sections
   in a row before its dark one, and the eye has nowhere to rest. */
.bm-home > .bm-system { position: relative; isolation: isolate; border-top: 0; }
.bm-system::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(-1 * var(--wp--style--root--padding-right)) 0 calc(-1 * var(--wp--style--root--padding-left)); background: var(--bm-paper); border-radius: 8px; }
.bm-system-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; margin-top: 8px; }
.bm-system-intro > p { max-width: 420px; margin: 0; font-size: var(--bm-fs-base); line-height: var(--bm-lh-relaxed); color: var(--wp--preset--color--contrast-secondary); }
.bm-system-stats { display: flex; flex-wrap: wrap; gap: 16px 44px; margin: 36px 0 0; }
.bm-system-stats dt { font: var(--bm-fs-xs)/var(--bm-lh-body) var(--wp--preset--font-family--mono); letter-spacing: var(--bm-track-label); text-transform: uppercase; color: var(--wp--preset--color--contrast-secondary); }
.bm-system-stats dd { margin: 4px 0 0; font-family: var(--wp--preset--font-family--display); font-size: var(--bm-fs-h2); font-weight: 500; line-height: var(--bm-lh-tight); letter-spacing: var(--bm-track-tight); font-variant-numeric: tabular-nums; color: var(--bm-accent); }
.bm-system-more { margin: 40px 0 0; font-size: var(--bm-fs-sm); }
.bm-system-more a { color: var(--bm-ink); text-decoration: none; border-bottom: 1px solid var(--bm-accent); padding-bottom: 3px; }
.bm-system-more a::after { content: "→"; margin-left: 10px; color: var(--bm-accent); }
.bm-system-more a:hover { color: var(--bm-accent); }

/* One <i> per section. Counting them gives the same 28 the heading claims, and
   the varying run lengths make the row a bar chart of how much choice each
   stage offers — the widest row is the one with the most options. */
.bm-stack { list-style: none; margin: 0; padding: 0; }
.bm-stack li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 16px; row-gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--bm-line); }
.bm-stack li:first-child { border-top: 1px solid var(--bm-line); }
.bm-stack-num { grid-area: 1 / 1; font: var(--bm-fs-xs)/var(--bm-lh-ui) var(--wp--preset--font-family--mono); letter-spacing: var(--bm-track-label); color: var(--bm-accent); }
.bm-stack-name { grid-area: 1 / 2; font-family: var(--wp--preset--font-family--display); font-size: var(--bm-fs-h4); font-weight: 500; line-height: var(--bm-lh-snug); }
.bm-stack-count { grid-area: 1 / 3; white-space: nowrap; font: var(--bm-fs-xs)/var(--bm-lh-body) var(--wp--preset--font-family--mono); letter-spacing: var(--bm-track-label); color: var(--wp--preset--color--contrast-secondary); }
.bm-stack-marks { grid-area: 2 / 2 / 3 / 4; display: flex; gap: 5px; width: var(--bm-share); }
.bm-stack-marks i { flex: 1; height: 11px; border-radius: 2px; background: var(--bm-accent); }

/* The decision zone. Choosing a level is the one thing this page exists for, so
   the pricing and the comparison share a tinted full-bleed band that lifts them
   out of the run of white sections around them. Together they read as one step,
   not two, because a visitor is answering a single question across both. */
.bm-home > .bm-decision, .bm-home > .bm-compare { position: relative; isolation: isolate; border-top: 0 !important; }
.bm-home > .bm-decision::before, .bm-home > .bm-compare::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(-1 * var(--wp--style--root--padding-right)) 0 calc(-1 * var(--wp--style--root--padding-left)); background: var(--bm-paper); }
.bm-home > .bm-decision::before { border-radius: 8px 8px 0 0; }
.bm-home > .bm-compare::before { border-radius: 0 0 8px 8px; }
.bm-home > .bm-decision { margin-top: clamp(56px, 8vw, 104px); }

/* Level comparison. The levels differ in exactly one way — how many setup jobs
   move from the buyer to us — so that count is the headline, drawn as a filled
   meter. The table below is the proof, and is styled to stay quieter than it. */
.bm-compare { padding-top: 0 !important; }
.bm-compare > .bm-eyebrow { margin-top: 0; }
.bm-compare-same { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; max-width: 900px; margin: 0; padding: 16px 20px; border: 1px solid var(--bm-line); border-radius: 6px; background: var(--bm-paper); font-size: var(--bm-fs-sm); line-height: var(--bm-lh-body); color: var(--wp--preset--color--contrast-secondary); }
.bm-compare-same span { font: var(--bm-fs-xs)/var(--bm-lh-body) var(--wp--preset--font-family--mono); letter-spacing: var(--bm-track-label); text-transform: uppercase; color: var(--bm-accent); }

.bm-meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.bm-meter { padding: clamp(22px, 2.4vw, 30px); border: 1px solid var(--bm-line); border-radius: 8px; background: #fff; }
.bm-meter.is-full { border-color: var(--bm-accent); }
.bm-meter-name { margin: 0 0 18px; font: var(--bm-fs-xs)/var(--bm-lh-body) var(--wp--preset--font-family--mono); letter-spacing: var(--bm-track-label); color: var(--bm-ink); }
.bm-meter-count { display: flex; align-items: baseline; gap: 10px; margin: 0 0 16px; }
.bm-meter-count strong { font-family: var(--wp--preset--font-family--display); font-size: var(--bm-fs-h1); font-weight: 500; line-height: var(--bm-lh-tight); letter-spacing: var(--bm-track-tight); font-variant-numeric: tabular-nums; color: var(--bm-accent); }
.bm-meter-count span { font-size: var(--bm-fs-sm); line-height: var(--bm-lh-ui); color: var(--wp--preset--color--contrast-secondary); }
/* Seven segments, one per setup job, so the bar is countable and not decorative. */
.bm-meter-bar { display: flex; gap: 4px; }
.bm-meter-bar i { flex: 1; height: 8px; border-radius: 2px; background: var(--bm-line); }
.bm-meter-bar i.is-on { background: var(--bm-accent); }
.bm-meter-note { margin: 14px 0 0; font-size: var(--bm-fs-sm); line-height: var(--bm-lh-body); color: var(--bm-ink); }

.bm-compare-scroll { margin-top: 36px; overflow-x: auto; }
.bm-compare-table { width: 100%; border-collapse: collapse; font-size: var(--bm-fs-base); }
.bm-compare-table caption.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bm-compare-table th, .bm-compare-table td { text-align: left; padding: 13px 20px 13px 0; border-bottom: 1px solid var(--bm-line); vertical-align: baseline; }
.bm-compare-table thead th { padding-top: 0; font: var(--bm-fs-xs)/var(--bm-lh-body) var(--wp--preset--font-family--mono); letter-spacing: var(--bm-track-label); color: var(--wp--preset--color--contrast-secondary); border-bottom-color: var(--bm-ink); }
.bm-compare-table thead th:not(:first-child) { color: var(--bm-ink); }
.bm-compare-table tbody th { width: 46%; font-weight: 400; line-height: var(--bm-lh-body); }
.bm-compare-table td { width: 18%; color: var(--wp--preset--color--contrast-secondary); }
/* "Mi" is what the higher levels actually buy, so it is the only marked state. */
.bm-who { display: inline-block; min-width: 40px; padding: 4px 11px; border-radius: 100px; font-size: var(--bm-fs-sm); text-align: center; color: var(--wp--preset--color--contrast-secondary); }
.bm-who.is-ours { background: var(--bm-accent); color: #fff; font-weight: 500; }
.bm-compare-support th, .bm-compare-support td { border-bottom: 0; font-size: var(--bm-fs-sm); }

/* Spec sheet: quiet, factual, and deliberately below the FAQ. The changelog states
   its own emptiness rather than inventing version history before the first release. */
.bm-spec-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(32px, 5vw, 72px); margin-top: 40px; align-items: start; }
.bm-spec-list { margin: 0; }
.bm-spec-list > div { display: grid; grid-template-columns: 170px 1fr; gap: 8px 24px; padding: 14px 0; border-bottom: 1px solid var(--bm-line); }
.bm-spec-list > div:first-child { padding-top: 0; }
.bm-spec-list > div:last-child { border-bottom: 0; }
.bm-spec-list dt { font: var(--bm-fs-xs)/var(--bm-lh-body) var(--wp--preset--font-family--mono); letter-spacing: var(--bm-track-label); text-transform: uppercase; color: var(--wp--preset--color--contrast-secondary); }
.bm-spec-list dd { margin: 0; font-size: var(--bm-fs-base); line-height: var(--bm-lh-body); }
.bm-changelog { padding: clamp(24px, 3vw, 36px); border: 1px solid var(--bm-line); border-radius: 8px; background: var(--bm-paper); }
.bm-changelog h3 { margin-top: 0; font-size: var(--bm-fs-h4); }
.bm-changelog p { font-size: var(--bm-fs-sm); line-height: var(--bm-lh-relaxed); color: var(--wp--preset--color--contrast-secondary); }
.bm-changelog-state { display: block; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--bm-line); color: var(--bm-ink) !important; }
.bm-changelog-state::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; background: var(--bm-accent); }

/* Showcase band. The page needs one loud beat after the hero, and "does this
   look good" is the question that decides the sale — so the screenshots get a
   dark full-bleed band, and one of them is large enough to actually land on. */
.bm-home > .bm-showcase { position: relative; isolation: isolate; color: #fff; border-top: 0; margin-top: clamp(56px, 8vw, 104px); padding-block: var(--bm-section) !important; }
.bm-showcase::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(-1 * var(--wp--style--root--padding-right)) 0 calc(-1 * var(--wp--style--root--padding-left)); background: #171728; border-radius: 8px; }
.bm-showcase .bm-eyebrow { color: #aaaaff !important; }
.bm-showcase > p:not(.bm-eyebrow) { max-width: 620px; font-size: var(--bm-fs-base); line-height: var(--bm-lh-relaxed); color: #bdbdce; }
.bm-showcase-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.bm-showcase-shot { margin: 0; }
.bm-showcase-shot.is-lead { grid-column: 1 / -1; }
.bm-showcase-shot img { display: block; width: 100%; height: auto; border: 1px solid #32324a; border-radius: 6px; background: #0f0f1c; }
.bm-showcase-shot.is-lead img { box-shadow: 0 40px 90px -50px #000; }
.bm-showcase-shot figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-top: 14px; }
.bm-showcase-shot figcaption strong { font-family: var(--wp--preset--font-family--display); font-size: var(--bm-fs-base); font-weight: 500; }
.bm-showcase-shot figcaption span { font-size: var(--bm-fs-sm); line-height: var(--bm-lh-body); color: #9a9ab4; }
.bm-showcase-shot.is-lead figcaption strong { font-size: var(--bm-fs-h4); }
.bm-showcase-video { display: flex; align-items: center; gap: 16px; margin-top: 28px; padding: 18px 22px; border: 1px dashed #43435e; border-radius: 6px; }
.bm-showcase-video small { display: block; margin-bottom: 5px; font: var(--bm-fs-xs)/var(--bm-lh-ui) var(--wp--preset--font-family--mono); letter-spacing: var(--bm-track-label); text-transform: uppercase; color: #aaaaff; }
.bm-showcase-video strong { font-family: var(--wp--preset--font-family--display); font-size: var(--bm-fs-base); font-weight: 400; color: #e4e4f2; }

/* Section library, read as the vertical anatomy of a finished page. The groups
   really are a sequence — top to bottom as a visitor scrolls — so they carry
   numbers, and alternating sides give the eye a path down instead of a wall of
   identical cards. */
.bm-anatomy { margin-top: 48px; }
.bm-stage { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding-block: clamp(32px, 4vw, 56px); border-top: 1px solid var(--bm-line); }
.bm-stage:first-child { border-top: 0; padding-top: 0; }
.bm-stage:nth-child(even) .bm-stage-shot { order: 2; }
.bm-stage-shot { margin: 0; }
.bm-stage-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--bm-line); border-radius: 6px; }
.bm-stage-step { display: flex; align-items: baseline; gap: 14px; margin: 0 0 14px; font: var(--bm-fs-h2)/var(--bm-lh-tight) var(--wp--preset--font-family--display); font-weight: 500; letter-spacing: var(--bm-track-tight); color: var(--bm-accent); }
.bm-stage-step span { font: var(--bm-fs-xs)/var(--bm-lh-body) var(--wp--preset--font-family--mono); letter-spacing: var(--bm-track-label); text-transform: uppercase; color: var(--wp--preset--color--contrast-secondary); }
.bm-stage h3 { margin: 0 0 8px; font-size: var(--bm-fs-h3); line-height: var(--bm-lh-snug); }
.bm-stage-lead { margin: 0 0 22px; max-width: 420px; font-size: var(--bm-fs-base); line-height: var(--bm-lh-relaxed); color: var(--wp--preset--color--contrast-secondary); }
.bm-stage ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bm-line); }
.bm-stage li { position: relative; padding: 12px 0 12px 20px; border-bottom: 1px solid var(--bm-line); }
.bm-stage li::before { content: ""; position: absolute; top: 19px; left: 0; width: 7px; height: 1px; background: var(--bm-accent); }
.bm-stage li strong { display: block; font-family: var(--wp--preset--font-family--display); font-size: var(--bm-fs-base); font-weight: 500; line-height: var(--bm-lh-ui); }
.bm-stage li span { display: block; margin-top: 2px; font-size: var(--bm-fs-sm); line-height: var(--bm-lh-body); color: var(--wp--preset--color--contrast-secondary); }

/* Developer view of the same library: the slug is the payload, so it gets a
   monospace column of its own rather than being buried in prose. */
/* Developer view of the same library: the slug is the payload, so it gets a
   monospace column of its own rather than being buried in prose. */
.bm-patternlist-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 32px; font-size: var(--bm-fs-sm); color: var(--wp--preset--color--contrast-secondary); }
.bm-patternlist-legend > span:not(.bm-tag) { margin-right: 18px; }
.bm-tag { display: inline-block; padding: 3px 9px; border-radius: 100px; font: var(--bm-fs-xs)/var(--bm-lh-body) var(--wp--preset--font-family--mono); letter-spacing: var(--bm-track-label); }
.bm-tag--free { border: 1px solid var(--bm-line); background: var(--bm-paper); color: var(--wp--preset--color--contrast-secondary); }
.bm-tag--pro { border: 1px solid var(--bm-accent); background: #f0f0ff; color: var(--bm-accent); }
.bm-patternlist-scroll { margin-top: 20px; }
.bm-patternlist-table { width: 100%; border-collapse: collapse; }
.bm-patternlist-table thead th { padding: 0 20px 12px 0; text-align: left; border-bottom: 1px solid var(--bm-ink); font: var(--bm-fs-xs)/var(--bm-lh-body) var(--wp--preset--font-family--mono); letter-spacing: var(--bm-track-label); text-transform: uppercase; color: var(--wp--preset--color--contrast-secondary); }
.bm-patternlist-head th { padding: 30px 0 10px; text-align: left; border-bottom: 1px solid var(--bm-line); font-family: var(--wp--preset--font-family--mono); font-size: var(--bm-fs-xs); font-weight: 400; letter-spacing: var(--bm-track-label); text-transform: uppercase; color: var(--bm-accent); }
.bm-patternlist-table tbody td, .bm-patternlist-table tbody tr:not(.bm-patternlist-head) th { padding: 14px 20px 14px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--bm-line); font-weight: 400; }
.bm-patternlist-table tbody tr:not(.bm-patternlist-head) th { width: 46%; font-size: var(--bm-fs-base); line-height: var(--bm-lh-ui); }
.bm-patternlist-table tbody th small { display: block; margin-top: 3px; font-size: var(--bm-fs-sm); line-height: var(--bm-lh-body); color: var(--wp--preset--color--contrast-secondary); }
.bm-patternlist-table td code { font-size: var(--bm-fs-xs); color: var(--bm-ink); background: var(--bm-paper); padding: 3px 7px; border-radius: 3px; white-space: nowrap; }
.bm-patternlist-table td:last-child { width: 90px; }
.bm-patternlist caption.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Commerce: cart, checkout and account.
   WooCommerce Blocks ship a complete visual language of their own — rounded
   panels, their own greys, their own type scale. These rules do not restyle
   every part of it; they replace the parts a buyer looks straight at, so the
   pages read as the same site rather than as a plugin bolted onto it. */
/* Same left edge as the rest of the site. The constrained layout centres any
   child narrower than contentSize, which pushed the title and the intro into
   the middle of the page while the cart grid started at the gutter. */
.bm-commerce-head > * { margin-left: 0 !important; margin-right: 0 !important; }
.bm-commerce-head > .wp-block-post-title { max-width: none; }
.bm-commerce > .wp-block-post-content { max-width: 1200px; margin-inline: auto; }
.bm-commerce .bm-eyebrow { margin-bottom: 18px; }
.bm-commerce > .wp-block-post-title { line-height: var(--bm-lh-heading); letter-spacing: var(--bm-track-heading); margin: 0 0 18px; }
.bm-commerce > p { max-width: 620px; font-size: var(--bm-fs-base); line-height: var(--bm-lh-relaxed); }

/* Shared field treatment, so a checkout input looks like a contact-form input. */
.bm-commerce .wc-block-components-text-input input,
.bm-commerce .wc-block-components-select select,
.bm-commerce .wc-block-components-combobox input {
	border: 1px solid var(--bm-line) !important; border-radius: 5px !important; background: var(--bm-paper) !important;
	font-family: inherit !important; font-size: var(--bm-fs-base) !important; color: var(--bm-ink) !important; box-shadow: none !important;
}
.bm-commerce .wc-block-components-text-input input:focus,
.bm-commerce .wc-block-components-select select:focus,
.bm-commerce .wc-block-components-combobox input:focus { border-color: var(--bm-accent) !important; background: #fff !important; }
.bm-commerce .wc-block-components-text-input label,
.bm-commerce .wc-block-components-select label { font-family: inherit; color: var(--wp--preset--color--contrast-secondary); }

/* Primary actions borrow the theme button, not the plugin's. */
.bm-commerce .wc-block-components-button:not(.wc-block-components-panel__button):not(.wc-block-components-notice-banner__dismiss) {
	border-radius: 4px; background: var(--bm-accent); color: #fff; font-family: inherit; font-size: var(--bm-fs-ui); font-weight: 500; min-height: 54px; padding-inline: 26px; border: 0;
}
.bm-commerce .wc-block-components-button:not(.wc-block-components-panel__button):hover { background: #2424b0; }
.bm-commerce .wc-block-components-button__text { font-family: inherit; }

/* Cart: the line items are the page, the totals are the decision. */
.bm-cart .wc-block-cart { margin-top: 40px; }
.bm-cart .wc-block-cart-items__header { font: var(--bm-fs-xs)/var(--bm-lh-body) var(--wp--preset--font-family--mono); letter-spacing: var(--bm-track-label); text-transform: uppercase; color: var(--wp--preset--color--contrast-secondary); border-bottom-color: var(--bm-ink); }
.bm-cart .wc-block-cart-items__row { border-bottom: 1px solid var(--bm-line); }
.bm-cart .wc-block-components-product-name { font-family: var(--wp--preset--font-family--display); font-size: var(--bm-fs-h4); font-weight: 500; color: var(--bm-ink); text-decoration: none; }
.bm-cart .wc-block-cart-item__image img { border: 1px solid var(--bm-line); border-radius: 5px; background: var(--bm-paper); }
.bm-cart .wc-block-cart__sidebar .wc-block-components-sidebar { border: 1px solid var(--bm-line); border-radius: 8px; background: var(--bm-paper); padding: clamp(22px, 2.4vw, 30px); }
.bm-cart .wc-block-cart__totals-title { font: var(--bm-fs-xs)/var(--bm-lh-body) var(--wp--preset--font-family--mono) !important; letter-spacing: var(--bm-track-label); text-transform: uppercase; color: var(--wp--preset--color--contrast-secondary); }
.bm-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-family: var(--wp--preset--font-family--display); font-size: var(--bm-fs-h3); letter-spacing: var(--bm-track-tight); }
.bm-cart .wc-block-cart__submit-button { width: 100%; }
.bm-cart .wc-block-cart__empty-cart__title { font-family: var(--wp--preset--font-family--display); font-weight: 500; }

/* Checkout: one column of decisions, a quiet summary beside it. The step
   numbers WooCommerce draws are kept — here they really are a sequence. */
.bm-checkout .wc-block-checkout { margin-top: 36px; }
.bm-checkout .wc-block-components-checkout-step { border: 0; padding-bottom: 8px; }
.bm-checkout .wc-block-components-checkout-step__title { font-family: var(--wp--preset--font-family--display); font-size: var(--bm-fs-h4); font-weight: 500; letter-spacing: var(--bm-track-snug); }
.bm-checkout .wc-block-components-checkout-step__heading { margin-bottom: 6px; }
.bm-checkout .wc-block-components-checkout-step__description { font-size: var(--bm-fs-sm); line-height: var(--bm-lh-body); color: var(--wp--preset--color--contrast-secondary); }
.bm-checkout .wc-block-components-checkout-step__content { padding-bottom: 32px; }
.bm-checkout .wc-block-checkout__sidebar .wc-block-components-sidebar { border: 1px solid var(--bm-line); border-radius: 8px; background: var(--bm-paper); padding: clamp(22px, 2.4vw, 30px); }
.bm-checkout .wc-block-components-order-summary__title, .bm-checkout .wc-block-components-panel__button { font-family: inherit; font-size: var(--bm-fs-sm); }
.bm-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-family: var(--wp--preset--font-family--display); font-size: var(--bm-fs-h3); letter-spacing: var(--bm-track-tight); }
.bm-checkout .wc-block-checkout__actions_row { padding-top: 8px; }
.bm-checkout .wc-block-checkout__terms { font-size: var(--bm-fs-sm); line-height: var(--bm-lh-body); color: var(--wp--preset--color--contrast-secondary); }
.bm-checkout .wc-block-checkout__guest-checkout-notice, .bm-checkout .wc-block-checkout__login-prompt { font-size: var(--bm-fs-sm); }

/* A fiókfelület (belépés + bejelentkezett oldalak) saját stíluslapon él:
   assets/css/account.css, amit csak a /fiokom/ oldalakon töltünk be. */

/* Contact form. FluentForms ships its own blue-tinted defaults; these override them
   to the theme's own grid, type and accent so the form does not read as bolted on. */
/* Width comes from .blokkmuhely-proza's 760px measure, so the form sits in the same
   column as the text around it rather than announcing itself as a separate widget. */
.bm-form { margin: 36px 0 0 !important; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--bm-line); border-radius: 8px; background: #fff; }
.bm-form .ff-el-group { margin-bottom: 22px; }
.bm-form .ff-el-input--label label { font-size: var(--bm-fs-sm); font-weight: 500; color: var(--bm-ink); margin-bottom: 8px; }
.bm-form .ff-el-is-required.asterisk-right label::after { color: var(--bm-accent); }
.bm-form input[type="text"], .bm-form input[type="email"], .bm-form select, .bm-form textarea {
	width: 100%; padding: 13px 15px; border: 1px solid var(--bm-line); border-radius: 5px; background: var(--bm-paper);
	font-family: inherit; font-size: var(--bm-fs-base); line-height: var(--bm-lh-body); color: var(--bm-ink); box-shadow: none; transition: border-color 180ms ease, background 180ms ease;
}
.bm-form input[type="text"]:focus, .bm-form input[type="email"]:focus, .bm-form select:focus, .bm-form textarea:focus {
	border-color: var(--bm-accent); background: #fff; outline: 2px solid transparent; outline-offset: 2px;
}
.bm-form textarea { min-height: 140px; resize: vertical; }
.bm-form ::placeholder { color: #9797ad; }
.bm-form .ff-el-form-check { display: flex; align-items: flex-start; gap: 10px; }
.bm-form .ff-el-form-check-label { font-size: var(--bm-fs-sm); line-height: var(--bm-lh-body); color: var(--wp--preset--color--contrast-secondary); }
.bm-form .ff-el-form-check input[type="checkbox"] { margin-top: 3px; accent-color: var(--bm-accent); width: 16px; height: 16px; }
.bm-form .ff-btn-submit { min-height: 54px; padding-inline: 28px; border: 0; border-radius: 4px; background: var(--bm-accent); color: #fff; font-family: inherit; font-size: var(--bm-fs-ui); font-weight: 500; cursor: pointer; transition: background 180ms ease; }
.bm-form .ff-btn-submit:hover { background: #2424b0; }
.bm-form .error-text, .bm-form .text-danger { color: #b3261e; font-size: var(--bm-fs-sm); margin-top: 6px; }
.bm-form .ff-message-success { padding: 24px; border: 1px solid var(--bm-accent); border-radius: 6px; background: #f5f5ff; }
.bm-form .ff-message-success p { margin: 0 0 8px; }
.bm-form .ff-message-success p:last-child { margin-bottom: 0; font-size: var(--bm-fs-base); color: var(--wp--preset--color--contrast-secondary); }
.bm-form-fallback { max-width: 620px; padding: 20px; border: 1px dashed #c6c6d8; border-radius: 6px; background: var(--bm-paper); font-size: var(--bm-fs-base); }

/* Temporary conversion surfaces, ready for real demos and product-specific media. */
.bm-license-selection { display: flex; align-items: baseline; gap: 12px 20px; flex-wrap: wrap; max-width: 720px; margin: 8px 0 0; padding: 16px 20px; border: 1px solid #c9c9eb; border-radius: 6px; background: #f5f5ff; }
.bm-license-selection span { font: var(--bm-fs-xs)/var(--bm-lh-ui) var(--wp--preset--font-family--mono); color: var(--bm-accent); letter-spacing: var(--bm-track-label); text-transform: uppercase; }
.bm-license-selection strong { font-family: var(--wp--preset--font-family--display); font-size: var(--bm-fs-h4); }
.bm-license-selection p { width: 100%; margin: 0; color: var(--wp--preset--color--contrast-secondary); font-size: var(--bm-fs-sm); }
.bm-card-shot { margin: 0 0 4px; }
.bm-card-shot img { display: block; width: 100%; height: auto; aspect-ratio: 750 / 400; object-fit: cover; border: 1px solid var(--bm-line); border-radius: 5px; }
.bm-product-preview { margin-top: clamp(56px, 8vw, 112px); padding: clamp(28px, 5vw, 56px); border: 1px solid var(--bm-line); border-radius: 8px; background: #f7f7fb; }
.bm-product-preview .wp-block-columns { gap: clamp(32px, 5vw, 72px); margin-bottom: 0; }
.bm-product-preview .has-contrast-secondary-color { font-size: var(--bm-fs-base); line-height: var(--bm-lh-relaxed); }
.bm-video-placeholder { display: flex; align-items: center; gap: 16px; min-height: 124px; margin-top: 32px; padding: 20px; border: 1px dashed #bcbcdc; border-radius: 6px; background: #fff; }
.bm-video-placeholder small { display: block; margin-bottom: 8px; font: var(--bm-fs-xs)/var(--bm-lh-ui) var(--wp--preset--font-family--mono); color: var(--bm-accent); letter-spacing: var(--bm-track-label); }
.bm-video-placeholder strong { display: block; font-family: var(--wp--preset--font-family--display); font-size: var(--bm-fs-h4); line-height: var(--bm-lh-snug); }
.bm-video-play { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; padding-left: 3px; border-radius: 50%; background: var(--bm-accent); color: #fff; }
.bm-package-placeholder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bm-package-card { min-height: 145px; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; border: 1px solid #dcdce7; border-radius: 5px; background: #fff; }
.bm-package-card span { margin-bottom: auto; font: var(--bm-fs-xs)/var(--bm-lh-tight) var(--wp--preset--font-family--mono); color: var(--bm-accent); }
.bm-package-card strong { font-family: var(--wp--preset--font-family--display); font-size: var(--bm-fs-h4); }
.bm-package-card small { margin-top: 8px; color: var(--wp--preset--color--contrast-secondary); font-size: var(--bm-fs-xs); line-height: var(--bm-lh-ui); }
.bm-package-demo { background: #19192a; border-color: #19192a; }
.bm-package-demo strong, .bm-package-demo small { color: #fff; }
.bm-package-demo small { color: #bbbbed; }

/* Native details: a generous, keyboard-accessible accordion without script. */
.bm-faq > p:not(.bm-eyebrow) { max-width: 620px; font-size: var(--bm-fs-base); color: var(--wp--preset--color--contrast-secondary); margin-bottom: 36px; }
.bm-faq .wp-block-details { margin-block-start: 0; padding-block: 0 !important; }
.bm-faq .wp-block-details:first-of-type { border-top: 1px solid var(--bm-line); }
.bm-faq summary { position: relative; list-style: none; padding: 25px 64px 25px 0; font-size: var(--bm-fs-h4); font-weight: 500; line-height: var(--bm-lh-ui); cursor: pointer; }
.bm-faq summary::-webkit-details-marker { display: none; }
.bm-faq summary::after { content: "+"; position: absolute; right: 4px; top: 22px; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--bm-line); border-radius: 50%; font-weight: 400; color: var(--bm-accent); transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 220ms var(--bm-ease); }
.bm-faq summary:hover { color: var(--bm-accent); }
.bm-faq details[open] summary::after { content: "−"; background: var(--bm-accent); border-color: var(--bm-accent); color: #fff; transform: rotate(180deg); }
.bm-faq details[open] { padding-bottom: 28px !important; }
.bm-faq details > :not(summary) { max-width: 800px; margin: 0 64px 0 0; color: var(--wp--preset--color--contrast-secondary); font-size: var(--bm-fs-base); line-height: var(--bm-lh-relaxed); }

/* A confident closing panel and a quieter, structured footer. */
.bm-contact > .wp-block-group { position: relative; isolation: isolate; border: 1px solid var(--bm-accent); border-radius: 8px; background: var(--bm-accent) !important; color: #fff; padding: clamp(32px, 5vw, 64px) !important; overflow: hidden; }
.bm-contact > .wp-block-group::before { content: ""; position: absolute; z-index: -1; width: 260px; height: 260px; top: -110px; right: -70px; border: 40px solid #ffffff0c; transform: rotate(25deg); }
.bm-contact h2 { max-width: 600px; }
.bm-contact p { font-size: var(--bm-fs-base); line-height: var(--bm-lh-relaxed); max-width: 570px; color: #e0e0ff !important; margin-top: 20px; }
.bm-contact .wp-block-columns { margin-bottom: 0; gap: 40px; }
.bm-contact .wp-block-button__link { background: #fff; color: var(--bm-accent); padding-inline: 24px; }
.bm-contact .wp-block-button.is-style-outline .wp-block-button__link { border-color: #ffffff80; background: transparent; color: #fff; }
.bm-contact .wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: #fff; background: #fff; color: var(--bm-accent); }
.bm-contact :focus-visible { outline-color: #fff; }
.bm-footer { background: var(--bm-paper); }
.bm-footer .bm-footer-signature {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(40px, 5vw, 64px);
	font-weight: 500;
	line-height: var(--bm-lh-tight);
	letter-spacing: var(--bm-track-tight);
	color: var(--bm-ink);
	margin-block: 0 48px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--bm-line);
}
.bm-footer .bm-footer-signature .has-accent-color { color: var(--bm-accent) !important; }
.bm-footer .wp-block-columns { gap: 48px; }
.bm-footer .wp-block-column:first-child p { max-width: 310px; line-height: var(--bm-lh-relaxed); }
.bm-footer .wp-block-column > .has-mono-font-family { text-transform: uppercase; font-size: var(--bm-fs-xs); letter-spacing: var(--bm-track-label); margin-bottom: 24px; }
.bm-footer .wp-block-navigation a { text-decoration: none; }
.bm-footer .wp-block-navigation a:hover { color: var(--bm-accent); text-decoration: underline; text-underline-offset: 5px; }
.bm-footer > .wp-block-group:last-child p { font-size: var(--bm-fs-xs); }

/* The same system carries through articles, the catalog and purchase pages. */
.blokkmuhely-proza { max-width: 1200px; }
.blokkmuhely-proza > *, .blokkmuhely-proza .wp-block-post-content > * { max-width: 760px; margin-left: 0 !important; }
.blokkmuhely-proza > .wp-block-post-title { max-width: 960px; margin-bottom: 40px; }
.blokkmuhely-proza .wp-block-post-content > p:first-child { font-size: var(--bm-fs-lead); line-height: var(--bm-lh-body); }
.blokkmuhely-proza .wp-block-post-content > h2 { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--bm-line); }
.blokkmuhely-proza .wp-block-post-content > :is(p, ul, ol) { font-size: var(--bm-fs-prose); line-height: var(--bm-lh-relaxed); }
.blokkmuhely-proza .wp-block-buttons { margin-top: 36px; }
/* A dokumentációs cikkek hosszú, lépésről lépésre írt anyagok. Egyes
   böngésző/cache állapotokban a WordPress navigációs overlay-e örökölhet
   görgetési tiltást, ezért ezt a csak cikkoldalra vonatkozó szabállyal
   feloldjuk. */
body.single-dokumentacio { overflow-y: auto; }
.bm-commerce { padding-block: clamp(32px, 5vw, 64px) var(--bm-section); }
.bm-commerce > .wp-block-columns { gap: clamp(32px, 5vw, 72px); margin-block: 40px 64px; }
.bm-commerce .wp-block-woocommerce-product-meta .wp-block-group { flex-wrap: wrap; font-size: var(--bm-fs-xs); gap: 12px 24px; }
.bm-commerce .wp-block-post-excerpt { font-size: var(--bm-fs-base); color: var(--wp--preset--color--contrast-secondary); }
.woocommerce-ordering select { max-width: 100%; padding: 12px 16px; border: 1px solid var(--bm-line); border-radius: 4px; background: #fff; color: var(--bm-ink); font: inherit; font-size: var(--bm-fs-base); }
.wc-block-components-text-input input, .wc-block-components-combobox .wc-block-components-combobox-control input { border-radius: 4px !important; }

/* Responsive reflow happens before columns become too narrow. */
@media (min-width: 782px) and (max-width: 1100px) {
 .bm-hero > .wp-block-columns > .wp-block-column { flex-basis: calc(50% - 20px) !important; }
 .bm-audience .wp-block-column:last-child > .wp-block-group { padding: 24px !important; }
 .bm-pricing > .wp-block-columns { gap: 14px; }
 .blokkmuhely-csomag { padding: 24px !important; }
 .blokkmuhely-csomag > .has-small-font-size { min-height: 94px; }
 .bm-contact .wp-block-columns { display: grid; grid-template-columns: 1fr; gap: 28px; }
 .bm-contact .wp-block-buttons { justify-content: flex-start; }
}
@media (max-width: 900px) {
 .bm-audience .wp-block-column:last-child { grid-template-columns: 1fr; }
 .bm-audience .wp-block-column:last-child > .wp-block-group { position: relative; padding: 28px 28px 28px 84px !important; }
 .bm-audience .wp-block-column:last-child > .wp-block-group::before { position: absolute; left: 28px; top: 34px; }
 .bm-audience .wp-block-column:last-child h3 { font-size: var(--bm-fs-h3); }
}
@media (max-width: 781px) {
 /* Off-canvas menu. The backdrop stays mounted so both directions can finish
    their transition; visibility and pointer-events keep it out of the focus
    order while closed. */
 .bm-header .wp-block-navigation__responsive-container {
  display: block !important; position: fixed; inset: 0; z-index: 120;
  background: #17172870; opacity: 0; visibility: hidden; pointer-events: none;
  overflow: hidden !important; transition: opacity 240ms ease, visibility 0s linear 340ms;
  padding: 0 !important;
 }
 /* Core paints the open overlay white and lays the items out in a row; both
    have to be overridden for a side panel with a dimmed page behind it. */
 .bm-header .wp-block-navigation__responsive-container,
 .bm-header .wp-block-navigation__responsive-container.is-menu-open { background-color: #17172866 !important; }
 .bm-header .wp-block-navigation__responsive-container.is-menu-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  animation: none !important; transition: opacity 240ms ease;
 }
 .bm-header .wp-block-navigation__responsive-container-open { display: flex; }
 .bm-header .wp-block-navigation__responsive-close { display: flex; justify-content: flex-end; width: 100%; height: 100%; max-width: none; margin: 0; }
 .bm-header .wp-block-navigation__responsive-dialog {
  position: relative; width: min(360px, 88vw); height: 100%; overflow-y: auto;
  padding: 92px 28px 36px; background: #fff; border-left: 3px solid var(--bm-ink);
  box-shadow: -18px 0 48px #1717281a; transform: translate3d(105%, 0, 0);
  will-change: transform; transition: transform 340ms var(--bm-ease);
 }
 .bm-header .is-menu-open .wp-block-navigation__responsive-dialog {
  transform: translate3d(0, 0, 0);
  animation: bm-mobile-menu-in 380ms var(--bm-ease) both;
 }
 .bm-header .wp-block-navigation__responsive-container-close { position: absolute; top: 26px; right: 22px; padding: 8px; }
 .bm-header .is-menu-open .wp-block-navigation__container { display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: 0; }
 .bm-header .is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid var(--bm-line); }
 .bm-header .is-menu-open .wp-block-navigation-item:first-child { border-top: 1px solid var(--bm-line); }
 .bm-header .is-menu-open .wp-block-navigation-item__content {
  display: block; width: 100%; padding: 17px 0;
  font-family: var(--wp--preset--font-family--display); font-size: var(--bm-fs-h3) !important; font-weight: 500; letter-spacing: var(--bm-track-snug);
 }
 .bm-header .is-menu-open .wp-block-navigation-item__content::before { left: auto; right: 0; }
 .bm-hero > .wp-block-columns { gap: 40px; }
 .bm-hero h1 { max-width: 620px; }
 .bm-hero .wp-block-column > .has-medium-font-size { max-width: 560px; }
 .bm-blueprint { max-width: 500px; }
 /* The illustration's fine print renders at 7-9px once the drawing scales down:
    illegible detail that reads as dirt rather than as information. */
 .bm-blueprint .bm-micro { display: none; }
 .bm-hero .bm-hero-facts { margin-top: 40px; gap: 16px 28px; }
 .bm-principles > .wp-block-columns { gap: 36px; }
 .bm-principles .wp-block-column:first-child > p:not(.bm-eyebrow) { max-width: 600px; }
 .bm-audience .wp-block-column:first-child { grid-template-columns: 1fr; }
 .bm-audience .wp-block-column:first-child > p:not(.bm-eyebrow) { margin-top: 20px; }
 .bm-pricing > .wp-block-columns { grid-template-columns: 1fr; gap: 20px; }
 .bm-spec-grid { grid-template-columns: 1fr; gap: 40px; }
 /* The zigzag has nothing to alternate against on one column, so it becomes a
    plain stack — image first, because that is what earns the read. */
 .bm-stage { grid-template-columns: 1fr; gap: 24px; }
 .bm-stage:nth-child(even) .bm-stage-shot { order: 0; }
 .bm-showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .bm-system-grid { grid-template-columns: 1fr; gap: 40px; }
 .bm-system-intro > p { max-width: none; }
 .blokkmuhely-csomag { padding: 32px !important; }
 .blokkmuhely-csomag > .has-small-font-size { min-height: 0; }
 .bm-native::before { border-radius: 0; }
 .bm-contact .wp-block-columns { gap: 28px; }
 .wp-block-columns:not(.is-not-stacked-on-mobile) .wp-block-buttons.is-content-justification-right { justify-content: flex-start; }
 .bm-footer .wp-block-columns { gap: 32px; }
 /* Navigation links are tap targets, not running text: give them a finger. */
 .bm-footer .wp-block-navigation a { display: block; padding-block: 9px; }
 .bm-footer .wp-block-navigation .wp-block-navigation__container { gap: 0 !important; }
 .bm-header .wp-block-site-title a { display: inline-block; padding-block: 10px; }
 .bm-commerce > .wp-block-columns { margin-bottom: 40px; }
}
@keyframes bm-mobile-menu-in {
 from { transform: translate3d(105%, 0, 0); }
 to { transform: translate3d(0, 0, 0); }
}
@media (max-width: 600px) {
 .bm-header > .wp-block-group, .bm-header > .wp-block-group > .wp-block-group { gap: 14px; }
 .bm-header .wp-block-woocommerce-mini-cart { padding-left: 10px; }
 /* The mini-cart drawer ships a fixed 480px width, which is wider than a
    small phone; cap it so it cannot sit off-screen. */
 .wc-block-mini-cart__drawer .wc-block-components-drawer, .wc-block-mini-cart__template-part { max-width: min(480px, 92vw) !important; }
 .wc-block-components-quantity-selector__button { min-width: 38px; min-height: 38px; }
 .bm-hero .wp-block-button, .bm-hero .wp-block-button__link { width: 100%; }
 .bm-hero-facts { flex-direction: column; align-items: flex-start; }
 /* 8px is below the point where these meta strips are readable on a phone. */
 .bm-blueprint-caption { padding: 12px 14px; }
 .bm-blueprint-foot { display: none; }
 .blokkmuhely-termekracs .wc-block-product-template { grid-template-columns: minmax(0, 1fr); }
 .bm-audience .wp-block-column:last-child > .wp-block-group { padding: 24px !important; }
 .bm-audience .wp-block-column:last-child > .wp-block-group::before { position: static; margin-bottom: 24px; }
 .bm-steps .wp-block-column:last-child > .wp-block-group { padding-left: 54px; }
 /* Three value columns will not fit a phone, and a side-scrolling table hides half
    the answer. Each row becomes its own small block, labelled by data-label. */
 .bm-compare-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
 .bm-compare-table tbody tr { display: block; padding: 18px 0; border-bottom: 1px solid var(--bm-line); }
 .bm-compare-table tbody tr:last-child { border-bottom: 0; }
 .bm-compare-table tbody th { display: block; width: auto; padding: 0 0 12px; border: 0; font-weight: 500; }
 .bm-compare-table tbody td { display: inline-flex; align-items: baseline; gap: 7px; width: auto; padding: 0 16px 0 0; border: 0; font-size: var(--bm-fs-sm); }
 .bm-compare-table tbody td::before { content: attr(data-label); font: var(--bm-fs-xs)/var(--bm-lh-body) var(--wp--preset--font-family--mono); letter-spacing: var(--bm-track-label); color: var(--wp--preset--color--contrast-secondary); }
 .bm-compare-support td { display: block !important; padding: 2px 0 0 !important; }
 .bm-spec-list > div { grid-template-columns: 1fr; gap: 4px; }
 /* The slug is the reason this table exists, so it keeps its own line rather
    than being squeezed into a column narrow enough to wrap mid-identifier. */
 .bm-patternlist-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
 .bm-patternlist-table tbody tr:not(.bm-patternlist-head) { display: block; padding: 16px 0; border-bottom: 1px solid var(--bm-line); }
 .bm-patternlist-table tbody tr:not(.bm-patternlist-head) th,
 .bm-patternlist-table tbody td { display: block; width: auto !important; padding: 0; border: 0; }
 .bm-patternlist-table tbody td { margin-top: 8px; }
 .bm-patternlist-head th { padding-top: 24px; }
 .bm-showcase-grid { grid-template-columns: 1fr; }
 .bm-meters { grid-template-columns: 1fr; }
 .bm-faq summary { padding-right: 48px; }
 .bm-faq details[open] { padding-bottom: 24px !important; }
 .bm-faq details > :not(summary) { margin-right: 0; }
 .bm-contact > .wp-block-group { padding: 28px !important; }
 .bm-footer > .wp-block-group:last-child { gap: 12px; }
}
@media (max-width: 380px) {
 .bm-header > .wp-block-group, .bm-header > .wp-block-group > .wp-block-group { gap: 8px; }
 .bm-header .wp-block-woocommerce-mini-cart { padding-left: 6px; }
 .bm-header .wp-block-woocommerce-mini-cart__button { padding: 6px; }
 .bm-blueprint-foot { gap: 8px; }
}

/* Brief assembly and progressive reveals; all content is visible without JS. */
@media (prefers-reduced-motion: no-preference) {
 /* Page-load motion, hero only. */
 .bm-hero .wp-block-column:first-child > :not(h1) { animation: bm-arrive 850ms var(--bm-ease) both; }
 .bm-blueprint-grid { animation: bm-grid-in 1200ms ease both; }
 .bm-module-back { animation: bm-grid-in 1400ms ease both; }
 .bm-module-one { animation: bm-assemble-one 1200ms 100ms var(--bm-ease) both; }
 .bm-module-two { animation: bm-assemble-two 1200ms 250ms var(--bm-ease) both; }
 .bm-module-three { animation: bm-arrive 900ms 450ms var(--bm-ease) both; }

 /* Scroll motion. The distance is small on purpose: a long slide reads as a
    template effect, a short one reads as the page settling. --bm-i carries the
    item's position so a stagger works for three cards or twenty-eight marks. */
 .bm-reveal { opacity: 0; transform: translateY(14px); transition: opacity 520ms var(--bm-ease), transform 520ms var(--bm-ease); transition-delay: calc(var(--bm-i, 0) * 65ms); }
 .bm-reveal.bm-entered { opacity: 1; transform: none; }

 /* A headline arrives word by word, but only where a visitor stops: the hero
    and the showcase band. On every heading this would be the tell, not a touch. */
 .bm-words .bm-word { display: inline-block; opacity: 0; transform: translateY(0.36em); transition: opacity 460ms var(--bm-ease), transform 560ms var(--bm-ease); transition-delay: calc(var(--bm-i, 0) * 52ms); }
 .bm-words.bm-entered .bm-word { opacity: 1; transform: none; }

 /* Motion that draws the number instead of decorating the box: the filled
    segments grow from the left, in order, so you watch 3-of-7 being counted. */
 .bm-meter-bar.bm-reveal, .bm-stack-marks.bm-reveal { opacity: 1; transform: none; }
 .bm-meter-bar.bm-reveal i.is-on, .bm-stack-marks.bm-reveal i { transform: scaleX(0); transform-origin: left center; transition: transform 420ms var(--bm-ease); }
 .bm-meter-bar.bm-entered i.is-on, .bm-stack-marks.bm-entered i { transform: none; }
 .bm-meter-bar i.is-on:nth-child(1) { transition-delay: 60ms; }
 .bm-meter-bar i.is-on:nth-child(2) { transition-delay: 120ms; }
 .bm-meter-bar i.is-on:nth-child(3) { transition-delay: 180ms; }
 .bm-meter-bar i.is-on:nth-child(4) { transition-delay: 240ms; }
 .bm-meter-bar i.is-on:nth-child(5) { transition-delay: 300ms; }
 .bm-meter-bar i.is-on:nth-child(6) { transition-delay: 360ms; }
 .bm-meter-bar i.is-on:nth-child(7) { transition-delay: 420ms; }
 .bm-stack-marks i:nth-child(1) { transition-delay: 40ms; }
 .bm-stack-marks i:nth-child(2) { transition-delay: 80ms; }
 .bm-stack-marks i:nth-child(3) { transition-delay: 120ms; }
 .bm-stack-marks i:nth-child(4) { transition-delay: 160ms; }
 .bm-stack-marks i:nth-child(5) { transition-delay: 200ms; }
 .bm-stack-marks i:nth-child(6) { transition-delay: 240ms; }
 .bm-stack-marks i:nth-child(7) { transition-delay: 280ms; }
 .bm-stack-marks i:nth-child(8) { transition-delay: 320ms; }
}
@keyframes bm-arrive { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes bm-grid-in { from { opacity: 0; } }
@keyframes bm-assemble-one { from { opacity: 0; transform: translate(-10px, -20px); } to { opacity: 1; transform: none; } }
@keyframes bm-assemble-two { from { opacity: 0; transform: translate(10px, 20px); } to { opacity: 1; transform: none; } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
 .wp-block-button__link:hover, .wp-element-button:hover, .wc-block-components-button:hover { transform: translateY(-1px); }
 .blokkmuhely-csomag, .bm-audience .wp-block-column:last-child > .wp-block-group, .bm-package-card, .bm-blog-card { transition: transform 220ms var(--bm-ease), box-shadow 220ms ease, border-color 220ms ease; }
 .blokkmuhely-csomag:hover, .bm-audience .wp-block-column:last-child > .wp-block-group:hover, .bm-package-card:hover { transform: translateY(-3px); border-color: #c7c7e0; box-shadow: 0 18px 36px -28px #20204050; }
 .bm-blog-card:hover .wp-block-post-featured-image img { transform: scale(1.018); }
 .bm-blog-card .wp-block-post-featured-image img { transition: transform 500ms var(--bm-ease); }
 .bm-jel svg { transition: transform 180ms var(--bm-ease); }
 a:hover .bm-jel svg, .bm-jel:hover svg { transform: scale(1.08); }
 .blokkmuhely-termekracs .wc-block-product:hover img { transform: scale(1.025); }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 /* The script bails out before hiding anything, but if a preference changes
    mid-session these make sure nothing is left mid-reveal. */
 .bm-reveal, .bm-words .bm-word { opacity: 1 !important; transform: none !important; transition: none !important; }
 .bm-header .wp-block-navigation__responsive-container,
 .bm-header .wp-block-navigation__responsive-dialog { animation: none !important; transition: none !important; }
 .wp-element-button, .wp-block-button__link, .wc-block-components-button, .blokkmuhely-termekracs .wc-block-product, .blokkmuhely-termekracs img, .bm-header .wp-block-navigation-item__content::before, .bm-blog-filter a::before, .bm-faq summary::after { transition: none; }
}
@media print {
 .bm-reveal { opacity: 1 !important; transform: none !important; }
 .bm-native { color: #000; }
 .bm-native::before { display: none; }
 .bm-native .has-contrast-secondary-color, .bm-native .wp-block-column:last-child p:not(.has-mono-font-family) { color: #333 !important; }
 .bm-contact > .wp-block-group { background: #fff !important; color: #000; }
 .bm-contact p { color: #333 !important; }
}
/* Blog */
.bm-blog-filter { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: var(--wp--preset--spacing--40) 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--bm-line); }
.bm-blog-filter li { margin: 0; }
.bm-blog-filter a { position: relative; display: inline-block; padding-block: 14px; color: var(--wp--preset--color--contrast-secondary); font-size: var(--bm-fs-ui); font-weight: 500; text-decoration: none; }
.bm-blog-filter a::before { content: ""; position: absolute; left: -15px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; background: var(--wp--preset--color--contrast-secondary); opacity: 0; transform: translateY(6px); transition: opacity 220ms var(--bm-ease), transform 220ms var(--bm-ease); }
.bm-blog-filter a:hover { color: var(--bm-ink); }
.bm-blog-filter a:hover::before { opacity: 1; transform: none; }
.bm-blog-filter .current-cat > a { color: var(--bm-ink); box-shadow: inset 0 -2px 0 var(--bm-accent); }
.bm-blog-filter .current-cat > a::before { background: var(--bm-accent); opacity: 1; transform: none; }
.bm-blog-featured, .bm-blog-grid { margin-top: var(--wp--preset--spacing--40); }
.bm-blog-featured .wp-block-post-template { margin: 0; padding: 0 0 var(--wp--preset--spacing--40); list-style: none; border-bottom: 1px solid var(--bm-line); }
.bm-blog-card.bm-blog-card--featured { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 48px; }
.bm-blog-card--featured .wp-block-post-featured-image { margin: 0; }
.bm-blog-card-body { display: flex; flex-direction: column; gap: 12px; }
.bm-blog-card-body > * { margin: 0; }
.bm-blog-card.bm-blog-card--featured h2 { font-size: var(--bm-fs-h3); line-height: var(--bm-lh-heading); letter-spacing: var(--bm-track-snug); }
.bm-blog-card.bm-blog-card--featured .wp-block-post-excerpt { font-size: var(--bm-fs-base); }
.bm-blog-card-more { align-self: flex-start; margin-top: 8px !important; color: var(--bm-accent); font-weight: 500; text-decoration: none; }
.bm-blog-card-more::after { content: " →"; }
.bm-blog-card-more:hover { text-decoration: underline; text-underline-offset: 5px; }
.bm-blog-grid .wp-block-post-template { display: grid; gap: 48px 40px; }
.bm-blog-card { display: flex; flex-direction: column; gap: 10px; }
.bm-blog-card > * { margin: 0; }
.bm-blog-card .wp-block-post-featured-image { margin: 0 0 4px; border-radius: 6px; overflow: hidden; }
.bm-blog-card .wp-block-post-featured-image img { display: block; width: 100%; height: auto; object-fit: cover; }
.bm-blog-card-cat { display: inline-block; color: var(--bm-accent); font-family: var(--wp--preset--font-family--mono); font-size: var(--bm-fs-xs); letter-spacing: var(--bm-track-label); text-transform: uppercase; margin: 0; }
.bm-blog-card-cat a { color: inherit; text-decoration: none; }
.bm-blog-card h2 { font-size: var(--bm-fs-h4); line-height: var(--bm-lh-snug); margin: 0; }
.bm-blog-card h2 a { color: var(--bm-ink); text-decoration: none; }
.bm-blog-card .wp-block-post-excerpt { color: var(--wp--preset--color--contrast-secondary); font-size: var(--bm-fs-sm); line-height: var(--bm-lh-body); margin: 0; }
.bm-blog-card-meta, .bm-blog-meta { gap: 8px; color: var(--wp--preset--color--contrast-secondary); font-size: var(--bm-fs-sm); }
.bm-blog-card-meta p, .bm-blog-meta p { margin: 0; }
.bm-blog-card-meta .wp-block-post-date::after, .bm-blog-meta .wp-block-post-date::after { content: "·"; margin-left: 8px; }
.bm-blog-card .bm-blog-card-meta { margin-top: -4px; }
.bm-related { border-top: 1px solid var(--bm-line); }
.bm-related-posts .wp-block-post-template { display: grid; gap: 40px; }
.bm-related-posts h3 { font-size: var(--bm-fs-h4); line-height: var(--bm-lh-snug); margin: 0; }
.bm-related-posts h3 a { color: var(--bm-ink); text-decoration: none; }
.bm-related:not(:has(.wp-block-post)) { display: none; }

@media (max-width: 782px) {
	.bm-blog-grid .wp-block-post-template,
	.bm-related-posts .wp-block-post-template { grid-template-columns: 1fr !important; }
	.bm-blog-card.bm-blog-card--featured { grid-template-columns: 1fr; gap: 20px; }
	.bm-blog-filter { flex-wrap: nowrap; gap: 0 26px; overflow-x: auto; scrollbar-width: none; margin-left: -15px !important; padding-left: 15px; }
	.bm-blog-filter li { flex-shrink: 0; }
}

/* Page covers: the real demo site instead of a generic illustration. The first
   screen has to answer "does this look like my trade?", so the kit pages show
   their own demo, and the hub shows both demos in one window at equal width. */
.bm-cover { position: relative; margin: 0; }
.bm-cover-screen { overflow: hidden; border: 1px solid var(--bm-line); border-radius: 8px; background: #fff; box-shadow: 0 30px 70px -48px #14141270; }
.bm-cover-bar { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--bm-line); background: #fafaf8; }
.bm-cover-bar i { width: 7px; height: 7px; border-radius: 50%; background: #d6d5cf; }
.bm-cover-screen > img { display: block; width: 100%; aspect-ratio: 12 / 7; object-fit: cover; object-position: top; }
/* The phone overlaps the lower right corner of the screen and hangs just below
   it; the stage reserves that overhang, so the caption underneath never
   collides with it at any width. */
.bm-cover-stage { position: relative; padding-bottom: 8%; }
.bm-cover-phone { position: absolute; right: -2%; bottom: 0; width: 24%; padding: 5px; border-radius: 24px; background: var(--bm-ink); box-shadow: 0 24px 50px -22px #14141288; }
.bm-cover-phone img { display: block; width: 100%; aspect-ratio: 390 / 760; object-fit: cover; object-position: top; border-radius: 19px; }
.bm-cover figcaption { max-width: 72%; margin-top: 14px; font-size: var(--bm-fs-sm); line-height: var(--bm-lh-body); color: var(--wp--preset--color--contrast-secondary); }
/* Hub: each half is the left side of its demo, where logo and headline sit.
   The image is nudged left by 8%: the headlines sit at 12-53% of the demo width, so both clear the seam and the left edge. */
.bm-cover-halves { display: grid; grid-template-columns: 1fr 1fr; }
.bm-cover-half { position: relative; display: block; overflow: hidden; color: var(--bm-ink); text-decoration: none; }
.bm-cover-half + .bm-cover-half { border-left: 3px solid #fff; }
.bm-cover-half img { display: block; width: 200%; max-width: none; aspect-ratio: 12 / 7; object-fit: cover; object-position: top left; transform: translateX(-8%); }
.bm-cover-tag { position: absolute; left: 12px; bottom: 12px; padding: 7px 11px; border-radius: 4px; background: #fff; font-family: var(--wp--preset--font-family--display); font-size: var(--bm-fs-ui); font-weight: 500; line-height: var(--bm-lh-snug); box-shadow: 0 8px 20px -12px #14141266; }
.bm-cover-tag small { margin-left: 4px; font-family: var(--wp--preset--font-family--body); font-size: var(--bm-fs-xs); font-weight: 400; color: var(--wp--preset--color--contrast-secondary); }
.bm-cover-half:hover .bm-cover-tag { color: var(--wp--preset--color--accent); }
.bm-cover-half:focus-visible { outline-offset: -4px; }
.bm-cover--split figcaption { max-width: none; }
/* An in-page jump points down, not out. */
.bm-hero .wp-block-button:first-child a[href^="#"]::after { content: "↓"; }

/* Section labels in the body face and sentence case. The tracked-out mono caps
   read as template chrome once every section has one; numbers were dropped
   from them because the sections are not a sequence. */
.bm-eyebrow.has-mono-font-family,
.bm-hero .wp-block-column > .has-mono-font-family { font-family: var(--wp--preset--font-family--body) !important; font-size: var(--bm-fs-sm) !important; font-weight: 500; letter-spacing: 0; text-transform: none; }
.bm-eyebrow { margin-block: 0 14px; }
/* The problem and audience cards are parallel points, not steps. */
.bm-audience .wp-block-column:last-child > .wp-block-group::before { content: none; }

@media (max-width: 900px) {
 .bm-audience .wp-block-column:last-child > .wp-block-group { padding-left: 28px !important; }
}
@media (max-width: 600px) {
 .bm-cover-tag { left: 8px; bottom: 8px; padding: 5px 8px; font-size: var(--bm-fs-sm); }
 .bm-cover-tag small { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
 .bm-cover-phone { animation: bm-arrive 900ms 250ms var(--bm-ease) both; }
}

/* Rólunk: a person first, then who he has worked for. The portrait keeps a
   fixed crop so the layout does not jump while it loads. */
.bm-rolunk-portre img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; }
.bm-rolunk-portre figcaption { margin-top: 12px; font-size: var(--bm-fs-sm); color: var(--wp--preset--color--contrast-secondary); text-align: left; }

/* Logo wall. Client brand colours clash with each other and with ours, so the
   logos rest in greyscale and show their own colour on hover or focus. The
   hairline grid draws only inner lines, so it closes cleanly on any row. */
.bm-logofal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1px; background: var(--bm-line); border: 1px solid var(--bm-line); }
.bm-logofal li { background: #fff; }
.bm-logofal a { display: flex; align-items: center; justify-content: center; gap: 12px; height: 128px; padding: 24px; color: var(--bm-ink); text-decoration: none; font-weight: 500; }
.bm-logofal img { width: auto; max-width: 100%; max-height: 44px; filter: grayscale(1); opacity: .72; transition: filter 220ms var(--bm-ease), opacity 220ms var(--bm-ease); }
.bm-logofal .is-kompakt img { max-height: 72px; }
.bm-logofal a:hover img, .bm-logofal a:focus-visible img { filter: none; opacity: 1; }
@media (max-width: 600px) {
 .bm-logofal { grid-template-columns: repeat(2, 1fr); }
 .bm-logofal a { height: 104px; padding: 16px; }
 .bm-logofal img { max-height: 36px; }
 .bm-logofal .is-kompakt img { max-height: 56px; }
 .bm-logofal .has-felirat a { flex-direction: column; gap: 6px; font-size: var(--bm-fs-sm); }
 .bm-logofal .has-felirat img { max-height: 40px; }
}