/* A Live Caption Pro termékweboldalának stíluslapja (a 4. lépés arculata).
   Világos alap egy sötét sávval, egy betűcsalád (Geist, a számokhoz és címkékhez Geist Mono, OFL, saját
   fájlból), szinte színtelen paletta EGYETLEN akcentussal: a feliratsárga. A sárga a világos felületen CSAK
   HÁTTÉR sötét szöveg mögött (13,1:1); sárga szöveg és sárga jel csak a sötét sávon áll – fehéren 1,44:1
   volna. Kártyák helyett 1 px-es vonal; árnyék csak a képernyőkép keretén; nincs bal csíkos doboz, nincs
   középre zárt szövegtömb. Inline stílus nincs (CSP style-src 'self').

   Az 5. lépés óta: a fejléc rögzített (sticky), és görgetésre kap fedő hátteret; a mesterikon négy színe
   (--glow-*) KIEGÉSZÍTŐ, díszítő szín – a fényudvarok (halo), a számsor vonalai és a szolgáltatás-oszlopok
   felső vonala –, nem akcentus. Színátmenet (gradient) CSAK a fényudvar-szabályokban (a hős szekció, a sötét
   sáv és a halvány záró felhívás ::before eleme, a feliratsáv-tábla körüli fény) és – a 3. hibajavítás óta – a
   sötét sáv előtti és utáni, szöveg nélküli átúszó sávokban (.ink-fade--in, .ink-fade--out) állhat, máshol tilos – őrzi: StyleSheetTests.

   A kezdőlap szekcióinak osztályai (a D munkacsomag markupja ezeket használja):
     .eyebrow                       mono címke a címek fölött (12 px, nagybetűs)
     .hero, .hero__inner/__copy/__lead/__actions/__facts/__demo/__rendition, .hero h1 mark
     .stats, .stats__grid, .stats__item (a), .stats__value, .stats__label, .stats__note   a számsor
     .section__head, .section__head--split, .section__intro                              szekciófej
     .section__more, .section--flush-top                                                  „tovább” hivatkozás, folytatott szekció
     .uses, .uses__item, .uses__number                                                    a három használat
     .panel, .shot, .shot--on-ink                                                         a halvány képtábla és a képkeret
     .services, .services__item, .services__exe, .services__name, .services__role          a négy szolgáltatás
     .section--ink, .ink-split, .ink-points, .button--accent                               a sötét sáv
     .split, .split--start                                                                 kéthasábos elrendezés
     .faq-list, .faq-list__item (details), .faq-list__answer                                a GYIK-sorok
     .section--subtle, .cta, .cta__inner, .cta__actions, .cta__more                         a záró felhívás
   A Telepítés lap macOS-jegyzete: .platform-note, .platform-note__label. */

/* ── Betűk ─────────────────────────────────────────────────────────────── */
/* A Fontsource @fontsource-variable/geist és geist-mono 5.3.0 csomagjából: változtatható vastagságú
   (variable) woff2, a unicode-range a csomag index.css-éből SZÓ SZERINT. Az ő és az ű (U+0150–0151,
   U+0170–0171) CSAK a latin-ext szeletben van – a szelet hiánya csendes hiba volna (teszt őrzi). */
@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/geist-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: "Geist";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/geist-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: "Geist Mono";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/geist-mono-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: "Geist Mono";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/geist-mono-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;
}

/* ── Tokenek ───────────────────────────────────────────────────────────── */
/* A színek hexe a BrandFacts.Colors tükre (BrandFactsTests); a stíluslapok minden var(--…) hivatkozása
   itt definiált (StyleSheetTests). */
:root {
    color-scheme: light;

    --bg: #FFFFFF;
    --bg-subtle: #F5F5F2;
    --bg-inverse: #0C0C0B;
    --text: #111110;
    --text-2: #52524C;
    --text-3: #6B6B64;
    --line: #E5E4DF;
    --line-strong: #CFCEC7;
    --line-inverse: #3A3A36;
    --field-line: #8A8A82;
    --on-inverse: #EDEDEA;
    --on-inverse-2: #A3A39C;
    --caption: #FFD23F;
    --translation: #B9D7F2;
    --ok: #1A7F4B;
    --danger: #B42318;
    /* A kiegészítő színek a mesterikon (basic-256.png) képpontjaiból: díszítő színek, szöveg színe NEM lehet
       (a fényudvar átlátszatlansága a kontrasztból jön – StyleSheetTests, HaloTests). */
    --glow-blue: #0080F0;
    --glow-violet: #814DAE;
    --glow-orange: #FBA476;
    --glow-teal: #00B0D0;
    /* A sötét sáv átúszásának világos lilája (a gladia.io #947AFC-jéhez hasonló árnyalat): a mesterikon lilája egy
       csepp kékkel, fehérrel világosítva – ~#8375C7. Ma közvetlenül sehol sem áll: az átúszó sáv megállóinak lila
       árnyalata ebből számolt (product-web-bugfix-4), és a StyleSheetTests ehhez méri a megállók színezetét. */
    --glow-lilac: color-mix(in srgb, color-mix(in srgb, var(--glow-violet) 80%, var(--glow-blue)) 82%, var(--bg));

    --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "Geist Mono", ui-monospace, "SF Mono", Consolas, monospace;

    --fs-label: 0.75rem;
    --fs-small: 0.875rem;
    --fs-body: 1.0625rem;
    --fs-lead: 1.25rem;
    --fs-h3: 1.375rem;
    --fs-h2: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
    --fs-display: clamp(2.5rem, 1.6rem + 2.8vw, 3.75rem);

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --space-10: 112px;
    /* A szekció függőleges belső margója (telefonon kisebb, lent). */
    --section-pad: var(--space-10);
    /* Az átúszó sáv magassága (telefonon kisebb, lent): magas sáv, hogy a váltás lassú és nyugodt legyen. */
    --ink-fade-height: 320px;
    /* Az átúszó sáv alaprétegének megállói a világostól a sötétig (product-web-bugfix-4): 26 megálló 4%-onként, a
       világosság (CIE L*) smoothstep görbén (3t² − 2t³) csökken a --bg-től a --bg-inverse-ig – a két szélén vízszintes
       érintővel, tehát törés nélkül simul a fehér szekcióhoz és a sötét sávhoz –, a lila tónus (a --glow-lilac
       árnyalata, OKLab chroma legfeljebb 0,075) sin² alakban nő és fogy a sáv 8–75%-a között, a csúcsa a középső
       harmadban. A színek a kiszámított sRGB hexek (a böngésző két megálló között egyenesen keveri őket; a sok megálló
       miatt a meredekség megállónként legfeljebb ~1 L*-gal vált). A sötét vég semleges szürke: a lila ott a régi paletta
       tiltott sötétkékjéhez (navy, StyleSheetTests.RetiredHexes) kerülne 40-nél közelebb. Számítás: product-web-bugfix-4-sima-szinatmenet.md.
       A befelé úszó sáv lefelé, a kifelé úszó fölfelé futtatja – egy helyen, hogy ne térjenek el. – őrzi: StyleSheetTests,
       HaloTests */
    --ink-fade-stops: var(--bg) 0%, #FEFEFE 4%, #FAFAFA 8%, #F4F4F6 12%, #ECEBF3 16%, #E3E0F0 20%, #D9D4ED 24%, #CDC6E9 28%, #C1B7E3 32%, #B3A8D9 36%, #A599CC 40%, #968BBC 44%, #877CA9 48%, #776F94 52%, #68627E 56%, #5A5569 60%, #4C4A55 64%, #3F3F43 68%, #343435 72%, #2B2B2B 76%, #222222 80%, #1B1B1B 84%, #161616 88%, #111111 92%, #0D0D0D 96%, var(--bg-inverse) 100%;

    --radius-field: 6px;
    --radius-button: 8px;
    --radius-frame: 12px;
    --radius-panel: 16px;
    --measure: 68ch;
    --content-width: 1200px;
    --gutter: 16px;
    /* A fejléc egy sorának legkisebb magassága (a belső doboz min-height-ja). */
    --header-row: 64px;
    /* A rögzített fejléc MÉRT teljes magassága töréspontonként (a vonallal együtt): ebből jön a horgonyok rése
       (scroll-padding-top) és a kézikönyv-oldalsáv helye. MÉRVE (2026-10-18, Chromium, betöltött Geisttel, 1 px-es
       lépéssel a határokon, aktuális menüponttal is – az aria-current félkövére szélesebb): 900 px alatt egy sor, 65 px;
       900 px-től a menü maga is tördelődik – magyarul 900–1024 px három sor (146, ill. 143,6 px; a Képernyőképek lapon
       még 1024-en is), 1025–1208 px két sor (105 px), 1209 px-től egy sor; angolul 900–944 px három sor (143,6 px),
       948–1128 px két sor, 1130 px-től egy sor (ott 4, ill. 2 px-es lépéssel). A sávok a NAGYOBB nyelvhez igazodnak (a másiknál csak nagyobb a rés),
       TARTALÉKKAL: a 3→2 soros határ 1045 px, a 2→1 soros 1240 px (a betöltetlen betűnek, az új menüpontnak). A sávok
       CSAK min-width feltételűek, egymásra épülve: törtszélességen (böngészőnagyítás, pl. 1024,5 px) sincs rés két
       sáv között. – őrzi: StickyHeaderTests, StyleSheetTests */
    --header-height: 65px;
    --shadow-shot: 0 1px 2px rgb(0 0 0 / 0.06), 0 16px 40px -16px rgb(0 0 0 / 0.35);
    --motion: 160ms ease-out;
}

@media not all and (min-width: 720px) {
    :root { --section-pad: var(--space-8); --ink-fade-height: 200px; }
}
@media (min-width: 720px) {
    :root { --gutter: 24px; }
}
@media (min-width: 900px) {
    :root { --header-height: 146px; }
}
@media (min-width: 1045px) {
    :root { --header-height: 105px; }
}
@media (min-width: 1240px) {
    :root { --header-height: 65px; }
}

/* ── Alapok ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* A horgonyra ugró cím a rögzített fejléc ALÁ kerül: a rés a fejléc mért magassága + 8 px (a címsorok saját
   scroll-margin-top-ja ezért 0). */
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 8px);
}

/* A vízszintes kilógást NEM a body overflow-x: hidden takarja el (a böngészős teszt a dokumentum
   scrollWidth-jét méri minden lapon): a hosszú szó tördelődik, a tábla és a kód a saját dobozában görget. */
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.6;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    font-family: var(--font-sans);
    font-weight: 500;
    color: var(--text);
    margin: 0 0 var(--space-4);
    text-wrap: balance;
    overflow-wrap: anywhere;
}
h1 { font-size: var(--fs-display); line-height: 1.04; letter-spacing: -0.035em; }
h2 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.03em; margin-top: var(--space-8); }
h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -0.015em; margin-top: var(--space-6); }
h4 { font-size: var(--fs-body); font-weight: 600; margin-top: var(--space-5); }

p, li { max-width: var(--measure); }
p { margin: 0 0 var(--space-4); }
strong { font-weight: 600; }

a { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--motion); }
a:hover { color: var(--text-2); }

/* A fókuszjel: 2 px-es --text keret 2 px-es eltolással (a sötét sávon --caption). Valódi outline, nem
   árnyék: nagy kontrasztú (forced-colors) módban is kirajzolódik. */
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.section--ink :focus-visible, .band :focus-visible { outline-color: var(--caption); }

code, pre, kbd { font-family: var(--font-mono); font-size: 0.9em; }
pre {
    background: var(--bg-inverse);
    color: var(--on-inverse);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-frame);
    overflow-x: auto;
    max-width: 100%;
    line-height: 1.55;
}
pre code { font-size: var(--fs-small); color: inherit; }
:not(pre) > code { background: var(--bg-subtle); color: var(--text); border: 1px solid var(--line); padding: 0.05em 0.35em; border-radius: 4px; overflow-wrap: anywhere; }

table { border-collapse: collapse; width: 100%; max-width: 100%; margin: 0 0 var(--space-5); font-size: var(--fs-small); }
th, td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: 1px solid var(--line); }
th { color: var(--text); font-weight: 500; }
.table-wrap { overflow-x: auto; margin: 0 0 var(--space-5); }

img, svg { max-width: 100%; height: auto; }

mark { background: var(--caption); color: var(--text); padding: 0 0.12em; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.container {
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.eyebrow {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
    margin: 0 0 var(--space-4);
}

/* ── Gombok ────────────────────────────────────────────────────────────── */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.55em 22px;
    border-radius: var(--radius-button);
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.25;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--motion), color var(--motion), border-color var(--motion);
}
.button--primary { background: var(--text); color: var(--bg); }
.button--primary:hover { background: var(--text-2); color: var(--bg); }
.button--quiet { background: transparent; color: var(--text); border-color: var(--line-strong); }
.button--quiet:hover { border-color: var(--text); color: var(--text); }
/* A sötét sávon: sárga háttér, fekete szöveg (13,1:1) – a sárga itt az egyetlen kiemelés. */
.button--accent { background: var(--caption); color: var(--text); }
.button--accent:hover { background: var(--on-inverse); color: var(--text); }
.button[disabled], .button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* ── Átugró hivatkozás ─────────────────────────────────────────────────── */
.skip-link {
    position: absolute;
    left: var(--space-4);
    top: -100px;
    background: var(--text);
    color: var(--bg);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-button);
    z-index: 100;
}
.skip-link:focus { top: var(--space-4); color: var(--bg); }

/* ── Fejléc ────────────────────────────────────────────────────────────── */
/* Rögzített fejléc. Rétegsorrend: átugró hivatkozás (100) > fejléc (50) > tartalom; a hibasáv (1000) legfelül.
   Ez a FELTÉTEL NÉLKÜLI szabály a végállapot: fedő háttér (a régi böngészőnek var(--bg), utána 92%-os keverék)
   és alsó vonal – görgetéshez kötött animáció és backdrop-filter nélkül (Firefox) is ez látszik.
   – őrzi: StyleSheetTests, StickyHeaderTests */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    border-bottom: 1px solid var(--line);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header {
        -webkit-backdrop-filter: saturate(1.5) blur(14px);
        backdrop-filter: saturate(1.5) blur(14px);
    }
}
/* Elmosás nélkül a 92% áttetszősége zavaró volna: ott szinte teljesen fedő. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header { background: color-mix(in srgb, var(--bg) 97%, transparent); }
}
/* Görgetésre kap hátteret (mint a gladia.io fejléce): a lap tetején áttetsző, vonal nélkül, 0–120 px között a
   fedő végállapotba ér. Az animation-timeline a rövidítés UTÁN áll – a rövidítés auto-ra állítaná, és az
   animáció azonnal a végén volna. Csökkentett mozgásnál animation: none (lent): a végállapot. Az animáció CSAK
   backdrop-filter mellett fut: a végpontja a 92%-os, elmosott háttér, ami elmosás nélkül felülírná a 97%-os
   tartalékot (fent) – ott a fejléc statikusan fedő. – őrzi: StyleSheetTests */
@supports (animation-timeline: scroll()) and ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header {
        animation: header-fill linear both;
        animation-timeline: scroll(root);
        animation-range: 0 120px;
    }
}
@keyframes header-fill {
    from { background-color: color-mix(in srgb, var(--bg) 0%, transparent); border-bottom-color: transparent; }
    to { background-color: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom-color: var(--line); }
}
/* A fejléc szélesebb a tartalomoszlopnál, feltétel nélkül: a márka, a hét menüpont, a gomb és a nyelvváltó
   magyarul ~1205 px-et kér, az 1200 px-es oszlopban 1359 px-es nézetig két sorba tördelődött. MÉRVE
   (2026-10-18): így magyarul ~1210 px-es nézettől egy sor, angolul 1200-tól; keskenyebben a lenti
   tördelés a tartalék. – őrzi: HeaderLayoutTests */
.site-header__inner {
    max-width: 1360px;
    min-height: var(--header-row);
    margin: 0 auto;
    padding: var(--space-3) var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
    flex-wrap: wrap;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
}
.brand:hover { color: var(--text); }
.brand__mark { display: block; width: 28px; height: 28px; }
.brand__name { font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; }

.site-nav { position: relative; }
.site-nav__menu { display: contents; }
.site-nav__toggle {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-button);
    font-weight: 500;
    font-size: 0.9375rem;
    color: var(--text);
}
.site-nav__toggle::-webkit-details-marker { display: none; }
/* Telefonon a lista csak a nyitott kapcsoló mellett látszik (a details nyitottságát a :has() olvassa). */
.site-nav__links {
    display: none;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) 0 0;
    font-size: 0.9375rem;
}
.site-nav:has(.site-nav__menu[open]) .site-nav__links { display: flex; }
/* A nyitott telefonos menü a rögzített fejlécben nem lehet magasabb a látótérnél (fekvő telefonon a nyelvváltó
   különben elérhetetlen volna): a GÖRGETHETŐ elem maga a lista (a details display: contents). A 100vh a tartalék,
   a 100dvh a mobil böngészősávot is levonja. – őrzi: StickyHeaderTests */
@media not all and (min-width: 900px) {
    /* A nyitott menü a fejlécet a látótér magasságáig nyújtja: a márka a tetején marad (a kapcsoló 40 px-es sorában),
       nem a nyújtott fejléc közepén. */
    .site-header__inner { align-items: flex-start; }
    .brand { min-height: 40px; }
    .site-nav__links {
        max-height: calc(100vh - var(--header-height) - var(--space-4));
        max-height: calc(100dvh - var(--header-height) - var(--space-4));
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}
/* Csak a MENÜPONTOK: a gomb és a nyelvváltó a saját színét és belső margóját tartja meg (MÉRVE:
   a közös szabály erősebb volt, és a gombon rossz színű lett a szöveg). */
.site-nav__links a:not(.button):not(.language-switcher) { color: var(--text-2); text-decoration: none; padding: 0.3em 0; }
.site-nav__links a:not(.button):not(.language-switcher):hover { color: var(--text); }
.site-nav__links a:not(.button):not(.language-switcher)[aria-current="page"] { color: var(--text); font-weight: 500; text-decoration: underline; text-underline-offset: 6px; }
.site-nav__links .button { align-self: flex-start; min-height: 40px; padding: 0.4em 18px; font-size: 0.9375rem; }

@media (min-width: 900px) {
    .site-nav__toggle { display: none; }
    /* A hét menüpont, a gomb és a nyelvváltó 900 px-en nem fér el egy sorban: a sor tördelődik, nem lóg
       ki a lapból – a böngészős teszt 900 px-en méri. */
    .site-nav__links {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        gap: var(--space-2) var(--space-5);
        padding: 0;
    }
    .site-nav__links .button { align-self: auto; }
}

.language-switcher {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-decoration: none;
    color: var(--text-2);
    padding: 0.3em 0.55em;
    border: 1px solid var(--line);
    border-radius: var(--radius-field);
}
.language-switcher:hover { color: var(--text); border-color: var(--line-strong); }

/* ── Tartalom ──────────────────────────────────────────────────────────── */
main { display: block; }
main:focus { outline: none; }
/* A navigáció után a Blazor a főcímre teszi a fókuszt (a felolvasónak); a keret a látónak zavaró. */
h1:focus { outline: none; }

.section { padding: var(--section-pad) 0; }
.section--tight { padding: var(--space-8) 0; }
.section__inner { max-width: var(--content-width); margin: 0 auto; padding: 0 var(--gutter); }
.section > .section__inner > h2:first-child { margin-top: 0; }
.section--subtle { background: var(--bg-subtle); border-top: 1px solid var(--line); }
.section--ink { background: var(--bg-inverse); color: var(--on-inverse); }
.section--ink h2, .section--ink h3 { color: var(--bg); }
.section--ink p { color: var(--on-inverse-2); }
.section--ink a:not(.button) { color: var(--on-inverse); }
.section--ink a:not(.button):hover { color: var(--bg); }
.section--ink .eyebrow { color: var(--on-inverse-2); }
.section--ink .button--primary { background: var(--caption); color: var(--text); }
.section--ink .button--primary:hover { background: var(--on-inverse); color: var(--text); }
.section--ink .button--quiet { color: var(--on-inverse); border-color: var(--line-inverse); }
.section--ink .button--quiet:hover { color: var(--bg); border-color: var(--on-inverse-2); }

@media not all and (min-width: 720px) {
    .section--tight { padding: var(--space-7) 0; }
}

.section__head { display: flex; flex-direction: column; gap: var(--space-4); max-width: 720px; margin: 0 0 var(--space-7); }
.section__head h2 { margin: 0; }
.section__head > .eyebrow { margin: 0; }
/* A kéthasábos fejben a bal oldali cím maga is szekciófej, de a külső fej adja a térközt alatta. */
.section__head .section__head { margin: 0; }
.section__head--split { display: grid; gap: var(--space-5) var(--space-9); grid-template-columns: minmax(0, 1fr); max-width: none; align-items: end; }
@media (min-width: 900px) { .section__head--split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.section__intro { font-size: 1.125rem; color: var(--text-2); margin: 0; }
/* A szekció alatti „tovább” hivatkozás (a lap részletes oldalára). */
.section__more { margin: var(--space-6) 0 0; }
/* Az előző szekció folytatása: felül nincs újabb térköz (két egymás utáni fehér szekció). */
.section--flush-top { padding-top: 0; }

.split { display: grid; gap: var(--space-7); grid-template-columns: minmax(0, 1fr); align-items: center; }
.split--start { align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; } }
.split > * > h2:first-child, .split > h2:first-child { margin-top: 0; }

.page { padding: var(--space-8) 0 var(--space-9); }
.page__inner { max-width: var(--content-width); margin: 0 auto; padding: 0 var(--gutter); }
.page__inner > h1 { max-width: 20ch; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-2); max-width: 46ch; margin-bottom: var(--space-6); }

/* ── Hős szekció ───────────────────────────────────────────────────────── */
.hero { background: var(--bg); padding: var(--space-8) 0 var(--space-8); }
.hero__inner {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: grid;
    gap: var(--space-7);
    align-items: center;
}
@media (min-width: 900px) {
    .hero { padding: var(--space-9) 0 88px; }
    .hero__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
}
.hero__copy { display: flex; flex-direction: column; gap: var(--space-5); }
.hero__copy > * { margin: 0; }
.hero h1 { margin: 0; }
.hero__lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-2); max-width: 34ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-2); }
.hero__facts { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-3); }
.hero__demo {
    position: relative;
    margin: 0;
    background: var(--bg-subtle);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    padding: 40px 32px;
}
/* A feliratsáv-tábla árnyéka a sor hátterét sötétíti: a --text-3 ott 4,06–4,14:1 volt, a --text-2 bőven 4,5:1 fölött.
   – őrzi: HaloTests */
.hero__rendition { font-size: 0.8125rem; color: var(--text-2); margin: 14px 0 0; }
@media not all and (min-width: 720px) { .hero__demo { padding: var(--space-5) var(--space-4); } }

/* ── A számsor ─────────────────────────────────────────────────────────── */
.stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats__grid {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) { .stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stats__item { display: block; padding: var(--space-6) var(--space-5) var(--space-6) 0; text-decoration: none; color: var(--text); }
.stats__item:hover { color: var(--text); }
.stats__item:hover .stats__label { color: var(--text); text-decoration: underline; }
@media (min-width: 900px) {
    .stats__item + .stats__item { padding-left: var(--space-5); border-left: 1px solid var(--line); }
}
@media not all and (min-width: 900px) {
    .stats__item:nth-child(even) { padding-left: var(--space-5); border-left: 1px solid var(--line); }
    .stats__item:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
.stats__value { display: block; font-family: var(--font-mono); font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.25rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stats__label { display: block; font-size: var(--fs-small); color: var(--text-2); margin-top: 6px; }
.stats__note { max-width: var(--content-width); margin: 0 auto; padding: 0 var(--gutter) 20px; font-family: var(--font-mono); font-size: var(--fs-label); color: var(--text-3); }

/* ── Szakaszok: használatok, lépések, listák ───────────────────────────── */
.uses { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); margin: 0 0 var(--space-6); }
@media (min-width: 720px) { .uses { grid-template-columns: repeat(3, minmax(0, 1fr)); } .uses--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.uses__item { border-top: 1px solid var(--text); padding-top: 20px; display: flex; flex-direction: column; gap: var(--space-3); }
.uses__number { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-3); }
.uses__item h3 { margin: 0; font-size: var(--fs-h3); }
.uses__item p { margin: 0; font-size: 1rem; color: var(--text-2); }

.steps { list-style: none; counter-reset: step; padding: 0; margin: var(--space-5) 0 0; max-width: var(--measure); }
.steps li { counter-increment: step; position: relative; padding: 0 0 var(--space-6) 3.25rem; }
.steps li::before {
    content: counter(step, decimal-leading-zero);
    position: absolute; left: 0; top: 0.1em;
    width: 2.25rem; height: 2.25rem; border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid var(--text);
    background: var(--bg); color: var(--text);
    font-family: var(--font-mono); font-weight: 500; font-size: 0.8125rem;
}
.steps li + li::after {
    content: ""; position: absolute; left: calc(1.125rem - 0.5px); top: calc(-1 * var(--space-6) + 0.1em); height: calc(var(--space-6) - 0.1em);
    border-left: 1px solid var(--line-strong);
}
.steps h3 { margin: 0 0 var(--space-2); font-size: var(--fs-h3); }
.steps p { margin: 0; color: var(--text-2); }
.steps p + p { margin-top: var(--space-3); }

.who { padding-left: 1.2em; max-width: var(--measure); margin: 0 0 var(--space-5); }
.who li { margin-bottom: var(--space-3); }

/* ── A halvány képtábla és a képkeret ──────────────────────────────────── */
.panel { background: var(--bg-subtle); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 40px; }
@media not all and (min-width: 720px) { .panel { padding: var(--space-4); } }
.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-frame); box-shadow: var(--shadow-shot); background: var(--bg); }
.shot figcaption { font-size: 0.8125rem; color: var(--text-3); margin-top: 14px; }
.shot--on-ink img { border-color: var(--line-inverse); }
.shot--on-ink figcaption { color: var(--on-inverse-2); }

/* ── A négy szolgáltatás ───────────────────────────────────────────────── */
.services { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--radius-frame); overflow: hidden; }
@media (min-width: 720px) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .services { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.services__item { padding: 28px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); max-width: none; }
.services__item:first-child { border-top: 0; }
@media (min-width: 720px) {
    .services__item { border-top: 0; }
    .services__item:nth-child(n + 3) { border-top: 1px solid var(--line); }
    .services__item:nth-child(even) { border-left: 1px solid var(--line); }
}
@media (min-width: 1000px) {
    .services__item:nth-child(n + 3) { border-top: 0; }
    .services__item + .services__item { border-left: 1px solid var(--line); }
}
.services__exe { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--text-3); }
.services__name { font-size: 1.125rem; font-weight: 500; }
.services__role { font-size: var(--fs-small); line-height: 1.5; color: var(--text-2); }

/* ── A sötét sáv ───────────────────────────────────────────────────────── */
.ink-split { display: grid; gap: var(--space-7); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) { .ink-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; } }
.ink-split h2 { margin-top: 0; }
.ink-points { list-style: none; margin: var(--space-2) 0 var(--space-5); padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.ink-points li { display: flex; gap: var(--space-3); align-items: baseline; color: var(--on-inverse); }
/* A sárga jel a sötét sávon (13,6:1). */
.ink-points li::before { content: "—"; font-family: var(--font-mono); color: var(--caption); flex: none; }

/* ── A GYIK-sorok ──────────────────────────────────────────────────────── */
.faq-list { margin: 0; padding: 0; }
.faq-list__item { border-top: 1px solid var(--line); padding: 20px 0; }
.faq-list__item:last-child { border-bottom: 1px solid var(--line); }
.faq-list__item > summary { cursor: pointer; font-size: 1.125rem; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); }
.faq-list__item > summary::-webkit-details-marker { display: none; }
.faq-list__item > summary::after { content: "+"; font-family: var(--font-mono); color: var(--text-3); flex: none; }
.faq-list__item[open] > summary::after { content: "−"; }
.faq-list__answer { margin: var(--space-3) 0 0; color: var(--text-2); }

/* ── A feliratsáv (a hős szekció bemutatója) ───────────────────────────── */
/* A valódi feliratablak mintájára: fekete panel, fehér eredeti, kék fordítás; az éppen elhangzó szó
   sárga hátteret kap (a .wN késleltetéssel), a mondat végén az utolsó szó kiemelve marad. A band--settled
   (előrenderelt, JS nélkül) és a csökkentett mozgás mellett nincs animáció: a végállapot áll. */
.band {
    position: relative;
    background: var(--bg-inverse);
    color: var(--bg);
    border-radius: var(--radius-frame);
    padding: var(--space-6) 28px 20px;
    box-shadow: var(--shadow-shot);
    animation: band-in 200ms ease-out both;
}
.band__line { margin: 0 auto; font-family: var(--font-sans); line-height: 1.35; max-width: none; text-align: center; }
.band__line--original { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.5rem); font-weight: 500; color: var(--bg); }
.band__line--translation { font-size: clamp(1.0625rem, 0.9rem + 0.6vw, 1.25rem); color: var(--translation); margin-top: 14px; }
.band__word { display: inline-block; margin: 0 0.04em; padding: 0 0.1em; border-radius: 3px; opacity: 0; animation: word-in 120ms ease-out both; }
.band__line--original .band__word { animation: word-in 120ms ease-out both, word-speak 360ms linear both; }
.band__line--original .band__word:last-child { animation: word-in 120ms ease-out both, word-hold 360ms linear both; }
.band__line--original .w1 { animation-delay: 200ms; }
.band__line--original .w2 { animation-delay: 380ms; }
.band__line--original .w3 { animation-delay: 560ms; }
.band__line--original .w4 { animation-delay: 740ms; }
.band__line--original .w5 { animation-delay: 920ms; }
.band__line--original .w6 { animation-delay: 1100ms; }
.band__line--original .w7 { animation-delay: 1280ms; }
.band__line--original .w8 { animation-delay: 1460ms; }
.band__line--original .w9 { animation-delay: 1640ms; }
.band__line--original .w10 { animation-delay: 1820ms; }
.band__line--original .w11 { animation-delay: 2000ms; }
.band__line--original .w12 { animation-delay: 2180ms; }
.band__line--translation .w1 { animation-delay: 2470ms; }
.band__line--translation .w2 { animation-delay: 2530ms; }
.band__line--translation .w3 { animation-delay: 2590ms; }
.band__line--translation .w4 { animation-delay: 2650ms; }
.band__line--translation .w5 { animation-delay: 2710ms; }
.band__line--translation .w6 { animation-delay: 2770ms; }
.band__line--translation .w7 { animation-delay: 2830ms; }
.band__line--translation .w8 { animation-delay: 2890ms; }
.band__line--translation .w9 { animation-delay: 2950ms; }
.band__line--translation .w10 { animation-delay: 3010ms; }
.band__line--translation .w11 { animation-delay: 3070ms; }
.band__line--translation .w12 { animation-delay: 3130ms; }
.band__status { display: flex; align-items: center; gap: var(--space-3); margin-top: 28px; padding-top: var(--space-3); border-top: 1px solid var(--line-inverse); }
.band__wave { display: block; }
.band__bar { fill: var(--on-inverse-2); transform-origin: center; transform-box: fill-box; animation: bar 600ms ease-in-out 4 alternate; }
.band__bar.b1 { animation-delay: 0ms; }
.band__bar.b2 { animation-delay: 80ms; }
.band__bar.b3 { animation-delay: 160ms; }
.band__bar.b4 { animation-delay: 240ms; }
.band__bar.b5 { animation-delay: 320ms; }
.band__bar.b6 { animation-delay: 400ms; }
.band__bar.b7 { animation-delay: 480ms; }
/* Az élő pötty: sárga jel, a sötét panelen. */
.band__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--caption);
    margin-left: auto;
    opacity: 0;
    animation: dot-in 200ms ease-out 2200ms both;
}
.band__state { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-inverse-2); opacity: 0; animation: word-in 200ms ease-out 2200ms both; }

@keyframes band-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes word-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
@keyframes word-speak { from { background-color: var(--caption); color: var(--text); } 60% { background-color: var(--caption); color: var(--text); } to { background-color: transparent; color: var(--bg); } }
@keyframes word-hold { from { background-color: var(--caption); color: var(--text); } to { background-color: var(--caption); color: var(--text); } }
@keyframes bar { from { transform: scaleY(0.4); } to { transform: scaleY(1.6); } }
@keyframes dot-in { from { opacity: 0; } to { opacity: 1; } }

/* A végállapot: az előrenderelt HTML-ben (JS nélkül) és minden nem élő sávon nincs animáció. */
.band--settled, .band--settled * { animation: none !important; }
.band--settled .band__word, .band--settled .band__dot, .band--settled .band__state { opacity: 1; }
.band--settled .band__line--original .band__word:last-child { background: var(--caption); color: var(--text); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0ms !important; animation-delay: 0ms !important; transition-duration: 0ms !important; }
    html { scroll-behavior: auto; }
    .band, .band__word, .band__dot, .band__state, .band__bar,
    .band__line--original .band__word, .band__line--original .band__word:last-child { animation: none; }
    .band__word, .band__dot, .band__state { opacity: 1; }
    .band__line--original .band__word:last-child { background: var(--caption); color: var(--text); }
}

/* ── Lábléc ────────────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--line); background: var(--bg); }
.site-footer__inner { max-width: var(--content-width); margin: 0 auto; padding: 56px var(--gutter) 40px; display: flex; flex-direction: column; gap: 40px; }
.site-footer__columns { display: grid; gap: var(--space-6) var(--space-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .site-footer__columns { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); } }
.site-footer__brand { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-small); }
@media (min-width: 900px) { .site-footer__brand { grid-column: auto; } }
.site-footer__brand .brand__name { font-size: var(--fs-small); }
.site-footer__tagline { color: var(--text-2); margin: 0; }
.site-footer section { display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-small); }
.site-footer h2 { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin: 0; }
.site-footer section a { color: var(--text-2); text-decoration: none; }
.site-footer section a:hover { color: var(--text); text-decoration: underline; }
.site-footer__bottom { border-top: 1px solid var(--line); padding-top: 20px; display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--fs-label); color: var(--text-3); }
.site-footer__bottom p { margin: 0; max-width: none; }
.site-footer__legal { font-family: var(--font-mono); }
.site-footer__note { color: var(--text-3); }
.site-footer__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); font-family: var(--font-mono); }

/* ── 404 ───────────────────────────────────────────────────────────────── */
.not-found { max-width: var(--content-width); margin: 0 auto; padding: var(--space-8) var(--gutter); }
.not-found [lang="en"] { margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--line); }

/* ── Az ábra ───────────────────────────────────────────────────────────── */
.pipeline { margin: var(--space-6) 0; }
.pipeline__svg { display: none; width: 100%; height: auto; }
@media (min-width: 720px) { .pipeline__svg { display: block; } }
.pipeline__app { fill: var(--text); }
.pipeline__service { fill: var(--bg); stroke: var(--line-strong); stroke-width: 1; }
.pipeline__label { font-family: var(--font-sans); font-weight: 500; font-size: 17px; fill: var(--text); }
.pipeline__label--app { fill: var(--bg); }
.pipeline__sub { font-family: var(--font-sans); font-size: 13px; fill: var(--text-3); }
.pipeline__app + .pipeline__label--app + .pipeline__sub { fill: var(--on-inverse-2); }
/* A kapcsolatot jelző vonal és nyílhegy nem díszítő elem: a fehérhez mérve legalább 3:1 kell (a --text-3
   ~5,3:1; a --line-strong csak 1,58:1 volt). A szolgáltatás kerete díszítő, az maradhat halvány. */
.pipeline__link { stroke: var(--text-3); stroke-width: 1.5; }
.pipeline__arrowhead { fill: var(--text-3); }
.pipeline__list { padding-left: 1.2em; max-width: var(--measure); margin: var(--space-4) 0 0; }
.pipeline__list li { margin-bottom: var(--space-2); }

/* ── A mérési tábla ────────────────────────────────────────────────────── */
/* Vonalas tábla: sorok fölött 1 px-es vonal, a szám mono, a feltétel halkabb. */
table.measured { width: 100%; border-collapse: collapse; font-size: 1rem; }
.measured th, .measured td { text-align: left; vertical-align: baseline; padding: var(--space-4) var(--space-5) var(--space-4) 0; border-bottom: 0; border-top: 1px solid var(--line); }
.measured tbody tr:last-child th, .measured tbody tr:last-child td { border-bottom: 1px solid var(--line); }
.measured thead th { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); border-top: 0; padding-top: 0; padding-bottom: var(--space-3); }
.measured tbody th { font-weight: 500; width: 34%; }
.measured__value { font-family: var(--font-mono); font-weight: 500; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.measured td:last-child { color: var(--text-2); font-size: var(--fs-small); }
.measured td:last-child:last-child { padding-right: 0; }
.measured__note { font-size: var(--fs-small); color: var(--text-3); max-width: var(--measure); margin: var(--space-3) 0 var(--space-5); }

/* ── Kiemelés és ablakkeret ────────────────────────────────────────────── */
/* Keretes doboz, nem bal csíkos: 1 px-es vonal, halvány háttér. */
.callout { border: 1px solid var(--line-strong); border-radius: var(--radius-frame); background: var(--bg-subtle); padding: var(--space-5); margin: var(--space-6) 0; max-width: var(--measure); }
.callout__title { font-size: var(--fs-h3); margin: 0 0 var(--space-3); }
.callout__body > :last-child { margin-bottom: 0; }
.callout__body ul { padding-left: 1.2em; margin: 0; }
.callout__body li { margin-bottom: var(--space-2); color: var(--text-2); }
.callout__body p { color: var(--text-2); }

/* A képernyőkép semleges keretben: 1 px-es vonal, az egyetlen árnyék a lapon, szürke fejlécpöttyök. */
.frame { margin: var(--space-6) 0; border: 1px solid var(--line); border-radius: var(--radius-frame); background: var(--bg); box-shadow: var(--shadow-shot); overflow: hidden; }
.frame__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--bg-subtle); border-bottom: 1px solid var(--line); }
.frame__bar > span:not(.frame__title) { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.frame__title { margin-left: var(--space-2); font-family: var(--font-mono); font-size: var(--fs-label); color: var(--text-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frame__link { display: block; }
.frame__image { display: block; max-width: 100%; height: auto; margin-inline: auto; }
.frame__caption { padding: var(--space-3) var(--space-4); font-size: var(--fs-small); color: var(--text-2); border-top: 1px solid var(--line); }

/* ── A záró felhívás ───────────────────────────────────────────────────── */
.cta h2 { margin: 0 0 var(--space-4); }
.cta__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-6); }
.cta__inner h2 { margin: 0; max-width: 16ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-4); }
.cta__inner .cta__actions { margin: 0; }
.cta__more { margin: var(--space-3) 0 0; font-size: var(--fs-small); }

/* ── Fényudvarok (halo) ────────────────────────────────────────────────── */
/* Nagy, halvány, elmosódó színfolt a szekció hátterében, a tartalom MÖGÖTT – a lap egyetlen színátmenete. Három
   helyen: a hős szekció JOBB hasábja (a feliratsáv-tábla) mögött kék–lila, a sötét sávban lila–kék, a halvány záró
   felhívásban narancs, a gombok mögé tolva. A bal hasáb kis szürke szövege (--text-3) mögé NEM kerül.
   - A szekció isolation: isolate (a z-index: -1 a szekció háttere fölé, a tartalom alá kerül) és overflow: clip – a
     hidden TILOS: görgetőtárolóvá tenné a szekciót, és a view() idővonal hozzá kötődne (soha nem mozdulna).
   - Az átlátszatlanság a kontrasztból: a legsűrűbb pont a mögötte álló szövegtokenekkel is legalább 4,5:1 (fehér alapon a
     --text-2 mögött legfeljebb ~20%; a --text-3 mögött ~10% volna, ezért ott nincs). Elmosás (filter: blur) nincs: a
     sugaras színátmenet maga lágy. – őrzi: StyleSheetTests (analitikus), HaloTests (képpontminta)
   - Az overflow: hidden az overflow: clip ELŐTT a régi Safari (15 és régebbi) tartaléka: a clip-et nem ismeri, a
     kilógó fény nála se adjon vízszintes görgetést; görgetéshez kötött animációja sincs, így a hidden nála nem árt. */
.hero, .section--ink, .section--subtle.cta { position: relative; isolation: isolate; overflow: hidden; overflow: clip; }
.hero::before, .section--ink::before, .section--subtle.cta::before {
    content: "";
    position: absolute;
    inset: -32px 0;
    z-index: -1;
    pointer-events: none;
}
/* Telefonon a tábla a szöveg ALATT áll: a fény az alsó harmadban. */
.hero::before {
    background:
        radial-gradient(ellipse 62% 26% at 62% 80%, color-mix(in srgb, var(--glow-blue) 18%, transparent), transparent),
        radial-gradient(ellipse 48% 18% at 92% 94%, color-mix(in srgb, var(--glow-violet) 16%, transparent), transparent);
}
/* A sötét sáv fényudvara a szekció széleitől távol áll (a teteje és az alja átlátszó), és a maszk a réteg felső és alsó
   200 px-én átlátszóba úszik: a réteg görgetésre ±120 px-et csúszik, és a rövid sötét sávban (telefonon ~430 px, a
   Licenc, a Felhasználás és a Telepítés záró sávja) a szekció overflow: clip-je a maszk nélkül a szekció szélén éles
   vonallal vágná a foltot – a szomszédos átúszó sávnál varrat látszana (mérve: 29 egység eltérés a határ két oldalán,
   maszkkal legfeljebb 9). A maszk képpontban áll, mert a csúszás is az: a hosszú sávban a fényudvar érintetlen.
   – őrzi: HaloTests (képpontmérés a sáv szélén) */
.section--ink::before {
    background:
        radial-gradient(ellipse 70% 26% at 70% 68%, color-mix(in srgb, var(--glow-violet) 30%, transparent), transparent),
        radial-gradient(ellipse 50% 18% at 92% 76%, color-mix(in srgb, var(--glow-blue) 26%, transparent), transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 200px, #000 calc(100% - 200px), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 200px, #000 calc(100% - 200px), transparent);
}
/* A záró felhívásban CSAK --text szöveg és gomb áll (a --text-2 a legvilágosabb mért token): a narancs itt 50%-ig
   mehet – a kontrasztteszt a --text-2-vel is 5,37:1-et ad. */
.section--subtle.cta::before {
    background:
        radial-gradient(ellipse 70% 40% at 60% 85%, color-mix(in srgb, var(--glow-orange) 50%, transparent), transparent);
}
@media (min-width: 900px) {
    .hero::before {
        background:
            radial-gradient(ellipse 30% 46% at 72% 46%, color-mix(in srgb, var(--glow-blue) 18%, transparent), transparent),
            radial-gradient(ellipse 22% 34% at 90% 74%, color-mix(in srgb, var(--glow-violet) 16%, transparent), transparent);
    }
    .section--ink::before {
        background:
            radial-gradient(ellipse 34% 40% at 72% 45%, color-mix(in srgb, var(--glow-violet) 30%, transparent), transparent),
            radial-gradient(ellipse 24% 30% at 92% 58%, color-mix(in srgb, var(--glow-blue) 26%, transparent), transparent);
    }
    .section--subtle.cta::before {
        background:
            radial-gradient(ellipse 30% 90% at 80% 50%, color-mix(in srgb, var(--glow-orange) 50%, transparent), transparent);
    }
}
/* Görgetéskor (view() idővonal, a szekció áthaladása a látótéren) 120 px-et csúszik, és 0,3-ról teljes erőre élénkül –
   a középső harmadban (35–65%) teljes erejű: a lap tetején álló hős szekció is ott van (a kontraszttesztek ezt az
   állapotot mérik). A 28 px-es, 0,55-ös mozgás a felhasználónak
   észrevehetetlen volt (product-web-bugfix-3). Görgetéshez kötött animáció nélkül (Firefox) és csökkentett mozgásnál a
   statikus, teljes fény áll. – őrzi: HaloTests (legalább 40 px két görgetési helyzet között) */
@supports (animation-timeline: view()) {
    .hero::before, .section--ink::before, .section--subtle.cta::before {
        animation: halo-drift linear both;
        animation-timeline: view();
    }
}
@keyframes halo-drift {
    from { transform: translateY(120px); opacity: 0.3; }
    35%, 65% { opacity: 1; }
    to { transform: translateY(-120px); opacity: 0.3; }
}

/* A feliratsáv-tábla körüli fény (a hős szekció SZÖVEG NÉLKÜLI helye): a tábla mögött, 40 px-rel túlnyúlva – a bal
   hasáb (56 px-es rés) és telefonon a fölötte álló szöveg (48 px-es rés) kívül esik rajta, a tábla saját háttere a
   közepét takarja, így csak a széle körül dereng. Erősebb a hős szekció fényudvaránál: mögötte nincs szöveg (a tábla
   alatti „Ábrázolás…” sor a tábla saját hátterén áll). – őrzi: HaloTests (képpontminta a hős szekció minden során) */
.hero__demo::before {
    content: "";
    position: absolute;
    inset: -40px;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(closest-side, color-mix(in srgb, var(--glow-violet) 55%, transparent), color-mix(in srgb, var(--glow-blue) 40%, transparent) 72%, transparent);
}
@supports (animation-timeline: view()) {
    .hero__demo::before {
        animation: glow-swell linear both;
        animation-timeline: view();
    }
}
@keyframes glow-swell {
    from { opacity: 0.3; }
    50% { opacity: 1; }
    to { opacity: 0.3; }
}

/* ── Átúszó sávok a sötét sáv előtt és után ──────────────────────────── */
/* A fehér szekciók és a sötét sáv (.section--ink) közti éles váltás helyett (product-web-bugfix-3, a gladia.io
   mintájára): egy szöveg nélküli, aria-hidden sáv a fehérből lila tónuson át a --bg-inverse-be úszik (--in), a sáv után
   vissza (--out). Az alja (ill. a teteje) pontosan --bg-inverse, így a sötét sávhoz varrat nélkül illeszkedik.
   A 4. hibajavítás óta (product-web-bugfix-4, „ez a lila átmenet nagyon darabos”) az átmenet SIMA:
   - az alapréteg 26 megállós, smoothstep görbéjű (--ink-fade-stops, a :root-ban) – a korábbi négy, távoli megálló
     lépcsőt rajzolt (a meredekség a 25 és 55%-nál hirtelen váltott);
   - a sötét szélen ülő éles szélű lila–kék kupola (és a sötét sáv szegélyében a folytatása) megszűnt: egy lineárisan
     átlátszóba futó radiális réteg széle és csúcsa látható ívet és foltot rajzolt;
   - a két mozgó folt (::before, ::after, görgetésre csúszó radiális réteg) is megszűnt: a sima alapon csak éles
     foltként látszottak volna, halványra véve pedig észrevehetetlenek voltak – a sávnak így nincs pszeudo-eleme, és
     nem kell sem a kilógó foltot vágó overflow: clip, sem animáció.
   A szekciók térköze: a sáv előtti szekció alsó és az utána következő felső margója kisebb (a sáv maga is térköz).
   – őrzi: StyleSheetTests, HaloTests (képpontra mért simaság) */
.ink-fade { height: var(--ink-fade-height); }
.ink-fade--in { background: linear-gradient(to bottom, var(--ink-fade-stops)); }
.ink-fade--out { background: linear-gradient(to top, var(--ink-fade-stops)); }
/* A sáv előtti és utáni szekció térköze: a sáv maga is térköz, a teljes margó duplán állna. */
.section:has(+ .ink-fade--in), .page:has(+ .ink-fade--in) { padding-bottom: var(--space-6); }
.ink-fade--out + .section { padding-top: var(--space-6); }

/* ── Kiegészítő színek: a számsor és a szolgáltatás-oszlopok vonalai ───── */
/* Díszítő vonal, nem szöveg: a négy mért szín a négy elemen, sorban. */
.stats__value::after { content: ""; display: block; width: 28px; height: 2px; margin-top: 10px; border-radius: 1px; background: var(--glow-blue); }
.stats__item:nth-child(4n + 2) .stats__value::after { background: var(--glow-violet); }
.stats__item:nth-child(4n + 3) .stats__value::after { background: var(--glow-orange); }
.stats__item:nth-child(4n + 4) .stats__value::after { background: var(--glow-teal); }
/* A szolgáltatás-oszlop felső vonala belső árnyékkal: a töréspontos szegélyszabályokhoz (a :first-child és az
   :nth-child szegélyei, 1000 px fölött border-top: 0) nem nyúl, mégis minden szélességen látszik. */
.services__item { box-shadow: inset 0 2px 0 var(--glow-blue); }
.services__item:nth-child(4n + 2) { box-shadow: inset 0 2px 0 var(--glow-violet); }
.services__item:nth-child(4n + 3) { box-shadow: inset 0 2px 0 var(--glow-orange); }
.services__item:nth-child(4n + 4) { box-shadow: inset 0 2px 0 var(--glow-teal); }

/* Csökkentett mozgásnál a görgetéshez kötött animációk sem futnak: a fejléc fedő, a fény statikus (de látszik). */
@media (prefers-reduced-motion: reduce) {
    .site-header, .hero::before, .section--ink::before, .section--subtle.cta::before,
    .hero__demo::before { animation: none; }
}

/* ── Útmutatók ─────────────────────────────────────────────────────────── */
.guide-list { list-style: none; padding: 0; margin: var(--space-6) 0 0; max-width: var(--measure); }
.guide-list__item { border-top: 1px solid var(--line); padding: var(--space-5) 0; max-width: none; }
.guide-list__item:last-child { border-bottom: 1px solid var(--line); }
.guide-list__item h2 { font-size: var(--fs-h3); letter-spacing: -0.015em; line-height: 1.3; margin: 0 0 var(--space-2); }
.guide-list__item h2 a { color: var(--text); text-decoration: none; }
.guide-list__item h2 a:hover { text-decoration: underline; }
.guide-list__item p { margin: 0 0 var(--space-2); color: var(--text-2); }
.guide__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-family: var(--font-mono); font-size: var(--fs-label); color: var(--text-3); margin: 0 0 var(--space-4); }
.guide__crumbs { font-size: var(--fs-small); color: var(--text-3); margin: 0 0 var(--space-3); }
.guide__crumbs a { color: var(--text-2); }
.guide__toc { border: 1px solid var(--line); border-radius: var(--radius-frame); background: var(--bg-subtle); padding: var(--space-4) var(--space-5); margin: var(--space-6) 0; max-width: var(--measure); }
.guide__toc h2 { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin: 0 0 var(--space-3); }
.guide__toc ol { margin: 0; padding-left: 1.3em; }
.guide__toc li { margin: 0 0 var(--space-1); }
.guide__toc a { color: var(--text-2); }
.guide__toc a:hover { color: var(--text); }
.guide__body { max-width: var(--measure); }
/* A horgony rése a html scroll-padding-top-jából jön (a rögzített fejléc alá), a címsor saját rése 0. */
.guide__body h2 { font-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem); letter-spacing: -0.025em; margin-top: var(--space-8); scroll-margin-top: 0; }
.guide__body h3 { font-size: 1.25rem; margin-top: var(--space-6); scroll-margin-top: 0; }
.guide__body p, .guide__body li { color: var(--text-2); }
.guide__body ul, .guide__body ol { padding-left: 1.3em; }
.guide__body li { margin-bottom: var(--space-2); }
.guide__body pre { font-size: var(--fs-small); }
.guide__body pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
/* A Markdown-tábla nem kap külön burkolót: a tábla maga görget vízszintesen, ha a hosszú szavai miatt nem fér el
   (a 390 px-es teszt a dokumentum szélességét méri – a kilógó tábla az egész lapot görgetné). */
.guide__body table { display: block; width: max-content; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: var(--fs-small); margin: 0 0 var(--space-5); }
.guide__body th, .guide__body td { text-align: left; vertical-align: top; padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--line); }
.guide__body th { color: var(--text-3); font-weight: 500; }
.guide__body blockquote { border: 1px solid var(--line-strong); border-radius: var(--radius-frame); margin: var(--space-5) 0; padding: var(--space-4) var(--space-5); color: var(--text-2); background: var(--bg-subtle); }
.guide__body blockquote p:last-child { margin-bottom: 0; }
.guide__body hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-7) 0; }
.guide__back { margin-top: var(--space-7); }

/* ── Kapcsolati űrlap ──────────────────────────────────────────────────── */
.contact { display: grid; gap: var(--space-7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .contact { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; gap: var(--space-9); } }
.contact__aside { border-top: 1px solid var(--text); padding-top: 20px; color: var(--text-2); }
.contact__aside h2 { font-size: var(--fs-h3); letter-spacing: -0.015em; line-height: 1.3; margin: 0 0 var(--space-2); }
.contact__aside p { margin: 0 0 var(--space-3); }

.contact-form { position: relative; max-width: var(--measure); }
.contact-form__note { font-size: var(--fs-small); color: var(--text-3); margin: 0 0 var(--space-5); }
.field { margin: 0 0 var(--space-5); }
.field label { display: block; font-weight: 500; margin-bottom: var(--space-1); }
.field__hint { font-size: var(--fs-small); color: var(--text-3); margin: 0 0 var(--space-2); }
/* A mezőkeret --field-line (fehéren ~3,5:1 – a 3:1-es nem szöveges küszöb felett); a --line csak díszítő vonal. */
.field input[type="text"], .field input[type="email"], .field select, .field textarea {
    display: block; width: 100%; min-height: 44px; font: inherit; color: var(--text); background: var(--bg);
    border: 1px solid var(--field-line); border-radius: var(--radius-field); padding: 0.55em 0.75em;
}
.field textarea { min-height: 10em; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-color: var(--text); }
.field [aria-invalid="true"] { border-color: var(--danger); }
.field__error:empty { display: none; }
.field__error, .validation-message { color: var(--danger); font-size: var(--fs-small); margin-top: var(--space-1); }
.field__counter { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--text-3); text-align: right; margin: var(--space-1) 0 0; }
.field--check { display: flex; gap: var(--space-2); align-items: flex-start; margin-bottom: var(--space-3); }
.field--check input { margin: 0.35em 0 0; flex: none; width: 1.05em; height: 1.05em; accent-color: var(--text); }
.field--check label { font-weight: 400; margin: 0; }

/* A mézescsupor a látótéren kívül (nem display:none – azt a robotok is kihagyják). */
.contact-form__check { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.contact-form__alert { border: 1px solid var(--danger); border-radius: var(--radius-frame); background: var(--bg); color: var(--text); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-5); }
.contact-form__done { border: 1px solid var(--ok); border-radius: var(--radius-frame); background: var(--bg); padding: var(--space-5); max-width: var(--measure); }
.contact-form__done h2 { margin: 0 0 var(--space-2); font-size: var(--fs-h3); letter-spacing: -0.015em; }
.contact-form__done p { margin: 0; }
.contact-form__fields { border: 0; margin: 0; padding: 0; min-width: 0; }
.contact-form__actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-6); }
.contact-form__alt { font-size: var(--fs-small); color: var(--text-3); margin: var(--space-5) 0 0; overflow-wrap: anywhere; }

/* ── Felhasználás és telepítés ─────────────────────────────────────────── */
.section-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0 0 var(--space-6); font-size: var(--fs-small); }
.section-nav li { max-width: none; }
.section-nav a { display: inline-block; color: var(--text-2); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 0.25em 0.8em; }
.section-nav a:hover { color: var(--text); border-color: var(--line-strong); }
.topic { padding: var(--space-6) 0; border-top: 1px solid var(--line); max-width: var(--measure); }
.topic h2 { margin-top: 0; font-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem); letter-spacing: -0.025em; }
.topic p { color: var(--text-2); }
.topic__need { font-size: var(--fs-small); color: var(--text-3); margin: var(--space-2) 0 0; }
.topic__need strong { color: var(--text); font-weight: 500; }
.console { margin: var(--space-3) 0 var(--space-4); padding: var(--space-3) var(--space-4); background: var(--bg-inverse); color: var(--on-inverse); border-radius: var(--radius-button); font-family: var(--font-mono); font-size: var(--fs-small); line-height: 1.55; overflow-x: auto; max-width: var(--measure); }
.console code { font-family: inherit; }
.steps .console { max-width: none; }
/* A Telepítés lap platformjegyzete: ahol a macOS más, a lépés alatt mono címkével. */
.platform-note, .steps .platform-note { margin: var(--space-4) 0 0; }
.platform-note__label { display: inline-block; margin-right: var(--space-2); padding: 0 0.45em; border: 1px solid var(--line-strong); border-radius: 4px; font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.04em; color: var(--text); }
.measured.kv tbody th { font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 500; width: auto; white-space: nowrap; }

/* ── Licenc és adatvédelem ─────────────────────────────────────────────── */
.components tbody th { font-weight: 500; width: auto; white-space: nowrap; }
.components td:nth-child(2), .components td:nth-child(3) { white-space: nowrap; }
.faq { max-width: var(--measure); margin: 0 0 var(--space-5); }
.faq dt { font-weight: 500; font-size: 1.125rem; margin: var(--space-5) 0 var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.faq dd { margin: 0; color: var(--text-2); }
.kv-list { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: var(--space-2) var(--space-5); max-width: var(--measure); margin: 0 0 var(--space-5); }
.kv-list dt { color: var(--text-3); }
.kv-list dd { margin: 0; }

/* ── Sajtóanyag, egylapos, képernyőképek ───────────────────────────────── */
.logo-card { margin: var(--space-5) 0; max-width: var(--measure); border: 1px solid var(--line); border-radius: var(--radius-frame); background: var(--bg); padding: var(--space-6) var(--space-5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.logo-card img { display: block; width: 64px; height: 64px; flex: none; }
.logo-card figcaption { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--fs-small); color: var(--text-2); }
.logo-card__name { font-weight: 500; color: var(--text); }
.logo-card__files { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); list-style: none; margin: 0; padding: 0; font-family: var(--font-mono); font-size: var(--fs-label); }
.logo-card__files li { max-width: none; }
.swatch { display: inline-block; width: 1em; height: 1em; border-radius: 3px; border: 1px solid var(--line-strong); vertical-align: -0.15em; margin-right: 0.35em; }
.swatch[data-token="--bg"] { background: var(--bg); }
.swatch[data-token="--bg-subtle"] { background: var(--bg-subtle); }
.swatch[data-token="--bg-inverse"] { background: var(--bg-inverse); }
.swatch[data-token="--text"] { background: var(--text); }
.swatch[data-token="--text-2"] { background: var(--text-2); }
.swatch[data-token="--text-3"] { background: var(--text-3); }
.swatch[data-token="--line"] { background: var(--line); }
.swatch[data-token="--caption"] { background: var(--caption); }
.swatch[data-token="--translation"] { background: var(--translation); }
.swatch[data-token="--glow-blue"] { background: var(--glow-blue); }
.swatch[data-token="--glow-violet"] { background: var(--glow-violet); }
.swatch[data-token="--glow-orange"] { background: var(--glow-orange); }
.swatch[data-token="--glow-teal"] { background: var(--glow-teal); }
.boilerplate { margin: 0 0 var(--space-5); padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-frame); background: var(--bg-subtle); max-width: var(--measure); user-select: all; }
.boilerplate p { margin: 0 0 var(--space-3); }
.boilerplate p:last-child { margin-bottom: 0; }

.shots { margin-top: var(--space-6); }
.shots h2 { scroll-margin-top: 0; }

.one-pager { border: 1px solid var(--line); border-radius: var(--radius-frame); background: var(--bg); padding: var(--space-6); max-width: 820px; }
.one-pager__header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.one-pager__lockup { display: inline-flex; align-items: center; gap: var(--space-3); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; color: var(--text); }
.one-pager__lockup img { display: block; width: 40px; height: 40px; }
.one-pager__site { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--text-3); }
.one-pager__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -0.025em; line-height: 1.15; margin: 0 0 var(--space-3); }
.one-pager__lead { color: var(--text-2); margin: 0 0 var(--space-5); }
.one-pager__uses { margin-bottom: var(--space-4); }
.one-pager__uses p, .one-pager__foot p { font-size: var(--fs-small); }
.one-pager .uses__item h3 { font-size: 1.125rem; }
.one-pager .pipeline { margin: var(--space-4) 0; }
.one-pager .pipeline__list { display: none; }
.one-pager .pipeline__svg { display: block; }
.one-pager h3 { margin-top: var(--space-5); }
.one-pager .uses__item h3 { margin-top: 0; }
.one-pager table.measured { font-size: var(--fs-small); }
.one-pager .measured th, .one-pager .measured td { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.one-pager__copyright { margin-top: var(--space-5); font-family: var(--font-mono); font-size: var(--fs-label); color: var(--text-3); border-top: 1px solid var(--line); padding-top: var(--space-3); }
.one-pager__tools h1 { margin-bottom: var(--space-3); }

@media print {
    @page { size: A4; margin: 14mm; }
    .one-pager-page { padding: 0; }
    .one-pager { border: 0; padding: 0; max-width: none; }
    .one-pager table.measured { page-break-inside: avoid; }
    .one-pager__uses { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .one-pager__foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .one-pager .pipeline__svg { max-height: 60mm; }
}

/* ── Betöltő-helyőrző és hibasáv ───────────────────────────────────────── */
.loading { padding: var(--space-8) var(--gutter); color: var(--text-3); }
.noscript { max-width: var(--content-width); margin: 0 auto; padding: var(--space-3) var(--gutter); color: var(--text-3); font-size: var(--fs-small); }
#blazor-error-ui {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0;
    background: var(--caption); color: var(--text);
    padding: var(--space-3) var(--gutter);
    border-top: 1px solid var(--text);
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: var(--space-3); top: var(--space-2); }

/* ── Nyomtatás ─────────────────────────────────────────────────────────── */
/* Papíron nincs sötét felület: a sötét sáv, a feliratsáv, a konzol és a kódblokk fehér háttérrel,
   --text szöveggel és vonallal (az egylapos A4-es lapja és a böngészős nyomtatás). */
@media print {
    .site-header, .site-footer, .skip-link, #blazor-error-ui, .no-print { display: none !important; }
    /* Papíron nincs fényudvar és átúszó sáv (a háttérkép nyomtatása amúgy is ki van kapcsolva, de a szabály ne a
       böngészőn múljon; a sáv magassága sem maradhat üres hézagként). */
    .hero::before, .section--ink::before, .section--subtle.cta::before,
    .hero__demo::before, .ink-fade { display: none !important; }
    body { background: var(--bg); color: var(--text); }
    a { color: var(--text); text-decoration: none; }
    .section--ink, .band, pre, .console, .hero__demo, .panel, .section--subtle, .callout, .boilerplate, .guide__toc {
        background: var(--bg) !important;
        color: var(--text) !important;
        box-shadow: none !important;
    }
    .band, pre, .console { border: 1px solid var(--line-strong); }
    .section--ink h2, .section--ink h3, .section--ink p, .section--ink li, .section--ink a,
    .band__line--original, .band__line--translation, .band__state, .ink-points li { color: var(--text) !important; }
    /* A szavak SAJÁT színe az animációé (word-speak, „both”: a végállapot fehér), az a szülő színét felülírja –
       a szülőé itt nem elég, a szót magát kell megállítani (a !important erősebb az animációnál). A sárga
       kiemelés papíron nem marad: a böngésző a háttérszínt alapból nem nyomtatja. – őrzi: PrintTests */
    .band__word {
        animation: none !important;
        opacity: 1 !important;
        background: transparent !important;
        color: var(--text) !important;
    }
    .band__dot { display: none; }
    /* A sötét sávra szánt halvány és sárga elemek fehér papíron olvashatatlanok volnának. */
    .section--ink .eyebrow, .shot--on-ink figcaption { color: var(--text-3) !important; }
    .ink-points li::before { color: var(--text) !important; }
    .shot--on-ink img { border-color: var(--line-strong); }
    .band__bar { fill: var(--text-3); }
    .shot img, .frame { box-shadow: none; }
}