/* ============================================================================
   Balance — a LANDING oldal saját stílusa
   ----------------------------------------------------------------------------
   A Landing B teljes, generált Tailwind-kimenete (a héj nélkül). CSAK a
   főoldalon töltődik, ezért a benne lévő elem-szintű reset a többi oldalt
   nem érinti.
   ============================================================================ */

:root,:host { --font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono) }
*,:after,:before,::backdrop { box-sizing:border-box;border:0 solid;margin:0;padding:0 }
::file-selector-button { box-sizing:border-box;border:0 solid;margin:0;padding:0 }
html,:host { -webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent }
hr { height:0;color:inherit;border-top-width:1px }
abbr:where([title]) { -webkit-text-decoration:underline dotted;text-decoration:underline dotted }
h1,h2,h3,h4,h5,h6 { font-size:inherit;font-weight:inherit }
a { color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit }
b,strong { font-weight:bolder }
code,kbd,samp,pre { font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em }
small { font-size:80% }
sub,sup { vertical-align:baseline;font-size:75%;line-height:0;position:relative }
sub { bottom:-.25em }
sup { top:-.5em }
table { text-indent:0;border-color:inherit;border-collapse:collapse }
:-moz-focusring { outline:auto }
progress { vertical-align:baseline }
summary { display:list-item }
ol,ul,menu { list-style:none }
img,svg,video,canvas,audio,iframe,embed,object { vertical-align:middle;display:block }
img,video { max-width:100%;height:auto }
button,input,select,optgroup,textarea { font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0 }
::file-selector-button { font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0 }
:where(select:is([multiple],[size])) optgroup { font-weight:bolder }
:where(select:is([multiple],[size])) optgroup option { padding-inline-start:20px }
::file-selector-button { margin-inline-end:4px }
::placeholder { opacity:1 }
::placeholder { color:currentColor }
::placeholder { color:color-mix(in oklab,currentcolor 50%,transparent) }
textarea { resize:vertical }
::-webkit-search-decoration { -webkit-appearance:none }
::-webkit-date-and-time-value { min-height:1lh;text-align:inherit }
::-webkit-datetime-edit { display:inline-flex }
::-webkit-datetime-edit-fields-wrapper { padding:0 }
::-webkit-datetime-edit { padding-block:0 }
::-webkit-datetime-edit-year-field { padding-block:0 }
::-webkit-datetime-edit-month-field { padding-block:0 }
::-webkit-datetime-edit-day-field { padding-block:0 }
::-webkit-datetime-edit-hour-field { padding-block:0 }
::-webkit-datetime-edit-minute-field { padding-block:0 }
::-webkit-datetime-edit-second-field { padding-block:0 }
::-webkit-datetime-edit-millisecond-field { padding-block:0 }
::-webkit-datetime-edit-meridiem-field { padding-block:0 }
::-webkit-calendar-picker-indicator { line-height:1 }
:-moz-ui-invalid { box-shadow:none }
button,input:where([type=button],[type=reset],[type=submit]) { appearance:button }
::file-selector-button { appearance:button }
::-webkit-inner-spin-button { height:auto }
::-webkit-outer-spin-button { height:auto }
[hidden]:where(:not([hidden=until-found])) { display:none!important }
.container { width:100% }
:root { color-scheme:light;--ink:#0f172a;--ink-soft:#1e293b;--muted:#66758a;--muted-light:#8a96a8;--line:#e7edf2;--paper:#f8fafc;--white:#fff;--blue:#2563eb;--blue-dark:#1d4ed8;--green:#10b981;--green-dark:#059669;--mint:#e9faf3;--shadow-soft:0 18px 50px #162a4612;--shadow-card:0 14px 40px #162a4611;font-synthesis:none;text-rendering:optimizeLegibility;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif }
* { box-sizing:border-box }
html { background:var(--paper);min-width:320px }
body { min-width:320px;min-height:100vh;color:var(--ink);background:radial-gradient(ellipse at 76% 4%,#dbf5ee30,transparent 35%),var(--paper);-webkit-font-smoothing:antialiased;margin:0;font-size:15px }
button,input,textarea,select { font:inherit }
a { color:inherit;text-decoration:none }
button,a { -webkit-tap-highlight-color:transparent }
::selection { color:#064e3b;background:#10b98130 }
.wordmark-symbol { background:linear-gradient(135deg,#2563eb,#16b982);border-radius:9px;flex:none;place-items:center;width:25px;height:25px;display:grid;position:relative;box-shadow:0 4px 10px #2563eb2e }
.wordmark-symbol:before,.wordmark-symbol>span { content:"";border:1.7px solid #fff;border-radius:50%;width:9px;height:9px;display:block;position:absolute }
.wordmark-symbol>span { border-top-color:#0000;border-left-color:#0000;margin:5px 0 0 5px;transform:rotate(17deg) }
.wordmark-name { color:#12263a;letter-spacing:-.065em;font-size:18px;font-weight:720 }
.wordmark-divider { background:#dce4ea;width:1px;height:20px;margin:0 2px 0 5px }
.wordmark-academy { color:#738296;letter-spacing:.19em;font-size:9px;font-weight:730 }
.home-page { padding-top:11px;padding-bottom:90px }
.hero-section { grid-template-columns:minmax(0,1.02fr) minmax(390px,.98fr);align-items:center;gap:clamp(30px,4.5vw,70px);min-height:612px;padding-top:54px;padding-bottom:54px;display:grid }
.hero-copy { z-index:3;max-width:610px;position:relative }
.eyebrow { color:#748398;letter-spacing:.16em;align-items:center;gap:9px;margin:0;font-size:10px;font-weight:720;line-height:1.4;display:flex }
.eyebrow-dot { width:7px;height:7px }
.hero-eyebrow { color:#52677a;letter-spacing:.15em;font-size:9px }
.hero-copy h1 { color:var(--ink);letter-spacing:-.072em;margin:25px 0 20px;font-size:clamp(49px,5.25vw,71px);font-weight:650;line-height:1.035 }
/* ⚠ A SOR VÉGI BETŰ LEVÁGVA (2026-09-30). Mérve és izolációs teszttel
   bizonyítva: a `background-clip: text` + a szoros betűköz (`-4,32px` @60px)
   együtt vágja le az utolsó betű túllógását. A festett háttér a padding-dobozig
   ér, a betű INKJE viszont túllóg rajta — a szövegre vágott háttér így nem
   festi ki. A kikapcsolás próbája: a `válságálló` utolsó `ó`-ja teljes lett.
   Javítás: `padding-right` + `box-decoration-break: clone` — az utóbbi miatt a
   padding MINDEN sor-töredéken megjelenik (sima padding csak az utolsón).
   MÉRVE: a `ó` teljes, a gradiens és a tördelés változatlan. */
.hero-highlight,.section-heading h2 span,.portal-heading h2 span,.page-heading h1 span { color:#0000;background:linear-gradient(102deg,#2563eb,#1395c7 42%,#10b981);-webkit-background-clip:text;background-clip:text;padding-right:.14em;-webkit-box-decoration-break:clone;box-decoration-break:clone }
.hero-description { color:#68778b;max-width:505px;margin:0;font-size:16.5px;line-height:1.78 }
.hero-actions { flex-wrap:wrap;align-items:center;gap:11px;margin-top:27px;display:flex }
.button { border:1px solid #0000;border-radius:14px;justify-content:center;align-items:center;gap:11px;min-height:54px;padding:0 22px;font-size:13.5px;font-weight:680;line-height:1.2;transition:transform .18s,box-shadow .18s,background .18s,border-color .18s;display:inline-flex }
.button:hover { transform:translateY(-2px) }
.button-primary { color:#fff;background:linear-gradient(108deg,#0a58ff,#0092cf 45%,#10c98c);box-shadow:0 11px 22px #0a58ff38,inset 0 1px #ffffff3d }
.button-primary:hover { box-shadow:0 15px 28px #0a58ff5e,inset 0 1px #ffffff3d }
.button-secondary { color:#334155;background:#ffffffb8;border-color:#e2eaf0;box-shadow:0 5px 14px #162a4609 }
.button-secondary:hover { background:#fff;border-color:#caeadd;box-shadow:0 9px 19px #162a4613 }
.button-play { color:#059669;background:#e8faf2;border-radius:50%;place-items:center;width:23px;height:23px;display:grid }
.button-play svg { fill:currentColor;stroke:currentColor;margin-left:2px }
.trust-row { flex-wrap:wrap;align-items:center;gap:11px;margin-top:31px;display:flex }
/* ⚠ A felhasználó mérése: „a kis betűk legyenek nagyobbak, mert így nem
   láthatók rendesen". Mérve 2026-09-30-án: a trust-sor 9px, a
   `pillar-card` bekezdés 11px, a leírás 12px volt. Mindhárom méret emelve. */
.trust-item { color:#778498;white-space:nowrap;align-items:center;gap:5px;font-size:13px;font-weight:560;display:inline-flex }
.trust-item svg { color:#0eaa7c;stroke-width:2.2px }
.trust-divider { background:#dfe6ec;width:1px;height:13px }
.hero-art { isolation:isolate;justify-self:center;width:min(100%,550px);height:490px;position:relative }
.art-halo { z-index:-2;filter:blur(2px);pointer-events:none;border-radius:50%;position:absolute }
.art-halo-one { aspect-ratio:1;background:radial-gradient(circle,#def6efe0,#e9f6fa8f 49%,#f8fafc00 73%);width:81%;top:21px;left:9% }
.art-halo-two { aspect-ratio:1;background:radial-gradient(circle,#bfe8e561,#0000 71%);width:39%;bottom:24px;right:1% }
.art-orbit { z-index:-1;pointer-events:none;border:1px solid #91c5c42e;border-radius:50%;position:absolute }
.art-orbit-one { width:88%;height:385px;top:31px;left:5%;transform:rotate(-15deg) }
.art-orbit-two { border-color:#6fafc421;width:92%;height:328px;top:74px;left:4%;transform:rotate(14deg) }
.energy-dashboard { z-index:2;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:linear-gradient(147deg,#fffffff2,#fbfefddb);border:1px solid #ffffffeb;border-radius:25px;padding:21px 23px 17px;position:absolute;top:45px;left:15px;right:13px;box-shadow:0 28px 75px #2e536d21,0 4px 14px #243f4d0d,inset 0 1px #fffffff2 }
.dashboard-topline,.dashboard-brand,.dashboard-live,.dashboard-bottomline,.chart-panel-heading,.chart-period { align-items:center;display:flex }
.dashboard-topline { border-bottom:1px solid #edf2f4;justify-content:space-between;padding-bottom:16px }
.dashboard-brand { color:#26394c;letter-spacing:-.055em;gap:5px;font-size:13px;font-weight:730 }
.dashboard-brand-icon { color:#fff;background:linear-gradient(140deg,#2563eb,#10b981);border-radius:8px;place-items:center;width:23px;height:23px;margin-right:2px;display:grid }
.dashboard-brand-dot { color:#10b981;margin-left:-5px }
.dashboard-live { color:#728198;letter-spacing:.12em;gap:7px;font-size:8px;font-weight:750 }
.dashboard-live>span { background:#10b981;border-radius:50%;width:6px;height:6px;box-shadow:0 0 0 3px #10b9811a }
.dashboard-summary { justify-content:space-between;align-items:center;gap:14px;padding:20px 3px 17px;display:flex }
.energy-score-copy { flex-direction:column;align-items:flex-start;min-width:0;display:flex }
.dashboard-overline { color:#8794a6;letter-spacing:.13em;font-size:8px;font-weight:740 }
.energy-score-copy>strong { color:#1a2b40;letter-spacing:-.035em;margin-top:8px;font-size:16px;font-weight:690 }
.dashboard-caption { color:#8a96a7;margin-top:5px;font-size:9px }
.dashboard-caption b { color:#07986b;font-weight:700 }
.energy-ring { background:conic-gradient(#10b981 0deg 245deg,#dcefe9 245deg 360deg);border-radius:50%;flex:none;place-items:center;width:77px;height:77px;display:grid;transform:rotate(-38deg);box-shadow:0 5px 14px #10b9811a }
.energy-ring>div { background:#fff;border-radius:50%;justify-content:center;align-items:center;width:62px;height:62px;display:flex;transform:rotate(38deg) }
.energy-ring strong { color:#16334a;letter-spacing:-.06em;font-size:22px;font-weight:720 }
.energy-ring span { color:#748497;align-self:center;margin:4px 0 0 1px;font-size:9px;font-weight:600 }
.chart-panel { background:linear-gradient(160deg,#f9fbfcf2,#f8fcfbed);border:1px solid #edf1f4;border-radius:16px;padding:13px 14px 9px }
.chart-panel-heading { justify-content:space-between;gap:10px }
.chart-panel-heading>div { flex-direction:column;gap:4px;display:flex }
.chart-panel-heading strong { color:#304156;font-size:10px;font-weight:700 }
.chart-panel-heading>div>span { color:#94a0af;font-size:8px }
.chart-period { color:#718095;background:#fff;border:1px solid #e9eef1;border-radius:7px;gap:1px;padding:5px 7px;font-size:8px }
.energy-chart { grid-template-columns:repeat(7,minmax(0,1fr));align-items:end;gap:10px;height:99px;margin-top:10px;padding:0 4px;display:grid }
.chart-day { flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%;display:flex }
.chart-bar-track { background:#edf2f4;border-radius:9px;align-items:flex-end;width:14px;height:72px;display:flex;overflow:hidden }
.chart-bar-fill { background:linear-gradient(#79d8b3,#3cbf99);border-radius:9px;width:100%;display:block }
.chart-day-highlight .chart-bar-fill { background:linear-gradient(#4da5f5,#3675e8);box-shadow:0 3px 7px #2563eb30 }
.chart-day-label { color:#9aa6b4;font-size:7px;line-height:1 }
.chart-day-highlight .chart-day-label { color:#3278df;font-weight:700 }
.dashboard-bottomline { color:#8d99a8;flex-wrap:wrap;gap:11px;padding:13px 2px 0;font-size:8px }
.dashboard-bottomline>span:not(.dashboard-week) { align-items:center;gap:5px;display:flex }
.dashboard-legend-dot { background:#4e8bed;border-radius:50%;width:6px;height:6px }
.legend-dot-mint { background:#55c39b }
.dashboard-week { color:#a1aab7;margin-left:auto;font-size:7px }
.floating-note { z-index:4;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffffe8;border:1px solid #fffffff0;border-radius:16px;align-items:center;gap:10px;min-height:58px;padding:10px 12px;display:flex;position:absolute;box-shadow:0 15px 36px #253f541f,0 2px 7px #253f540b }
.recovery-note { bottom:42px;left:-17px }
.focus-note { top:88px;right:-18px }
.floating-icon { border-radius:12px;flex:none;place-items:center;width:35px;height:35px;display:grid }
.floating-icon-green { color:#059669;background:#e7f9f1 }
.floating-icon-blue { color:#3479dd;background:#edf4ff }
.floating-copy { flex-direction:column;gap:3px;display:flex }
.floating-copy strong { color:#25384b;white-space:nowrap;font-size:10px;font-weight:720 }
.floating-copy small { color:#8794a5;white-space:nowrap;font-size:8px }
.floating-check { color:#fff;background:#10b981;border-radius:50%;place-items:center;width:19px;height:19px;margin-left:4px;display:grid }
.art-caption { color:#8795a3;letter-spacing:.015em;justify-content:center;align-items:center;gap:7px;font-size:9px;display:flex;position:absolute;bottom:3px;left:0;right:0 }
.art-caption>span { background:#10b981;border-radius:50%;width:5px;height:5px }
.belief-strip { text-align:center;background:linear-gradient(110deg,#ffffffc2,#fafdfce6);border:1px solid #e9eff2;border-radius:21px;justify-content:center;align-items:center;gap:10px;min-height:91px;padding:20px 28px;margin-top:19px;display:flex;box-shadow:0 6px 22px #1f394a06 }
.belief-strip p { color:#58677a;letter-spacing:-.015em;margin:0;font-size:16px;font-weight:550 }
.belief-strip p em { color:#24364a;font-style:normal;font-weight:700 }
.belief-strip>span { color:#0c9b71;align-items:center;gap:7px;font-size:16px;font-style:italic;font-weight:620;display:inline-flex }
.belief-strip>span svg { flex:none }
.value-section { padding-top:102px }
.section-heading,.portal-heading { justify-content:space-between;align-items:flex-end;gap:40px;display:flex }
.section-heading h2,.portal-heading h2 { color:#122137;letter-spacing:-.059em;margin:16px 0 0;font-size:clamp(31px,3.1vw,43px);font-weight:640;line-height:1.12 }
.section-intro,.portal-heading>p { color:#728096;max-width:360px;margin:0 0 4px;font-size:13px;line-height:1.75 }
.pillar-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;margin-top:31px;display:grid }
.pillar-card { background:#ffffffd6;border:1px solid #e3ebf0f0;border-radius:22px;flex-direction:column;align-items:flex-start;min-height:255px;padding:23px 24px 20px;transition:transform .22s,box-shadow .22s,border-color .22s;display:flex;position:relative;overflow:hidden;box-shadow:0 9px 26px #162a4609 }
.pillar-card:after { content:"";pointer-events:none;background:radial-gradient(circle,#d7f3ea7a,#0000 70%);border-radius:50%;width:155px;height:155px;position:absolute;bottom:-50px;right:-29px }
.pillar-card:hover { border-color:#d7eae4;transform:translateY(-5px);box-shadow:0 18px 35px #162a4613 }
.pillar-card-top { justify-content:space-between;align-items:center;width:100%;display:flex }
.pillar-icon { border:1px solid #ffffffeb;border-radius:14px;place-items:center;width:44px;height:44px;display:grid;box-shadow:0 4px 11px #1c3c4e0a }
.pillar-blue .pillar-icon { color:#3477df;background:linear-gradient(145deg,#eff5ff,#e6f4fc) }
.pillar-green .pillar-icon { color:#07976c;background:linear-gradient(145deg,#e9faf2,#e6f7f4) }
.pillar-violet .pillar-icon { color:#7772d8;background:linear-gradient(145deg,#f3f0ff,#edf2ff) }
.pillar-number { color:#a8b2bf;letter-spacing:.11em;font-size:10px;font-weight:700 }
.pillar-card h3 { color:#1c2b40;letter-spacing:-.035em;margin:19px 0 8px;font-size:17px;font-weight:675 }
.pillar-card>p { color:#78869a;max-width:390px;margin:0;font-size:14px;line-height:1.75 }
.pillar-note { color:#52667b;align-items:center;gap:7px;margin-top:auto;padding-top:17px;font-size:9px;font-weight:650;display:inline-flex }
.pillar-note>span { background:#10b981;border-radius:50%;width:6px;height:6px }
.portal-section { padding-top:100px }
.portal-heading { align-items:flex-end }
.portal-heading h2 { font-size:clamp(31px,3vw,40px) }
.portal-heading>p { max-width:320px }
.portal-shortcut-grid { grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:28px;display:grid }
.portal-shortcut { background:#ffffffc7;border:1px solid #e7edf1;border-radius:19px;flex-direction:column;align-items:flex-start;gap:16px;min-height:150px;padding:17px 17px 15px;transition:transform .19s,border-color .19s,box-shadow .19s,background .19s;display:flex;position:relative;box-shadow:0 6px 18px #162a4606 }
.portal-shortcut:hover { background:#fff;border-color:#cdeade;transform:translateY(-4px);box-shadow:0 15px 30px #162a4613 }
.shortcut-icon { color:#07986d;background:linear-gradient(145deg,#eefaf5,#f1f8ff);border:1px solid #e8f1ed;border-radius:12px;place-items:center;width:37px;height:37px;display:grid }
.shortcut-copy { flex-direction:column;gap:5px;display:flex }
.shortcut-copy strong { color:#25354a;letter-spacing:-.015em;font-size:11px;font-weight:680 }
.shortcut-copy small { color:#8895a6;font-size:9px;line-height:1.45 }
.shortcut-arrow { color:#a1adba;transition:color .18s,transform .18s;position:absolute;top:17px;right:15px }
.portal-shortcut:hover .shortcut-arrow { color:#059669;transform:translate(2px,-2px) }
.closing-cta { color:#fff;background:linear-gradient(111deg,#152947,#153c59 54%,#0e5960);border:1px solid #ffffff2b;border-radius:28px;justify-content:space-between;align-items:center;gap:24px;min-height:213px;margin-top:90px;padding:35px clamp(25px,5vw,57px);display:flex;position:relative;overflow:hidden;box-shadow:0 21px 45px #11364926 }
.closing-glow { pointer-events:none;background:radial-gradient(circle,#37c79e3d,#0000 69%);border-radius:50%;width:390px;height:390px;position:absolute;top:-150px;right:15% }
.closing-copy { align-items:flex-start;gap:17px;display:flex;position:relative }
.closing-mark { color:#a9f1d0;background:#ffffff1a;border:1px solid #ffffff2e;border-radius:14px;flex:none;place-items:center;width:43px;height:43px;display:grid }
.closing-eyebrow { color:#98d6c8;letter-spacing:.16em;margin:2px 0 10px;font-size:9px;font-weight:750 }
.closing-cta h2 { color:#fff;letter-spacing:-.055em;margin:0;font-size:clamp(25px,3vw,37px);font-weight:580;line-height:1.16 }
.button-light { color:#17344a;background:#fff;flex:none;position:relative;box-shadow:0 9px 22px #02162724 }
.button-light:hover { background:#effbf5;box-shadow:0 13px 27px #02162730 }
.portal-page { padding-top:55px;padding-bottom:88px }
.page-heading-copy { color:#6c7a8e;max-width:620px;margin:0;font-size:14px;line-height:1.75 }
.tutor-slot { -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#ffffffc4;border:1px solid #e2eaefed;border-radius:26px;padding:23px;overflow:hidden;box-shadow:0 12px 36px #162a460b,inset 0 1px #ffffffeb }
.tutor-slot-header { border-bottom:1px solid #eef2f4;justify-content:space-between;align-items:center;gap:14px;min-height:55px;padding:0 2px 17px;display:flex }
.tutor-slot-title-group { align-items:center;gap:11px;display:flex }
.tutor-slot-icon { color:#078f68;background:linear-gradient(145deg,#eaf9f2,#eff8ff);border:1px solid #e3f2eb;border-radius:12px;flex:none;place-items:center;width:37px;height:37px;display:grid }
.tutor-slot-kicker { color:#8d9aab;letter-spacing:.12em;text-transform:uppercase;margin:0 0 4px;font-size:8px;font-weight:720 }
.tutor-slot-header h2 { color:#26364a;letter-spacing:-.02em;margin:0;font-size:13px;font-weight:690 }
.module-ready { color:#5d8174;white-space:nowrap;background:#f6fcf9;border:1px solid #e6f3ed;border-radius:999px;align-items:center;gap:8px;padding:8px 10px;font-size:9px;font-weight:620;display:inline-flex }
.module-ready>span { width:6px;height:6px }
.tutor-slot-body { padding-top:20px }
.catalog-toolbar { justify-content:space-between;align-items:center;gap:18px;min-height:48px;margin:-3px 0 14px;display:flex }
.catalog-count { color:#526479;align-items:center;gap:8px;font-size:11px;font-weight:650;display:flex }
.catalog-count b { color:#98a3b1;font-weight:540 }
.catalog-live-dot { width:6px;height:6px }
.catalog-tags { flex-wrap:wrap;justify-content:flex-end;gap:6px;display:flex }
.catalog-tag { color:#758397;background:#ffffffab;border:1px solid #e6ecf0;border-radius:999px;padding:7px 10px;font-size:9px;font-weight:560 }
.catalog-tag-active { color:#078b63;background:#effaf4;border-color:#d2efdf;font-weight:680 }
.course-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;display:grid }
.course-card { background:#fff;border:1px solid #e9eef1;border-radius:19px;transition:transform .2s,border-color .2s,box-shadow .2s;overflow:hidden;box-shadow:0 6px 20px #192e4309 }
.course-card:hover { border-color:#d8e9e3;transform:translateY(-4px);box-shadow:0 16px 31px #192e4316 }
.course-visual { isolation:isolate;justify-content:space-between;align-items:flex-start;height:166px;padding:15px;display:flex;position:relative;overflow:hidden }
.course-visual-mint { background:linear-gradient(130deg,#dff6ee,#e8f8f7 54%,#edf7fc) }
.course-visual-blue { background:linear-gradient(130deg,#e6efff,#e9f1fd 48%,#e9f7f5) }
.course-visual-lavender { background:linear-gradient(130deg,#eeeaff,#e9f2ff 52%,#e4f7f0) }
.course-visual-orbit { z-index:-1;border:1px solid #569e9730;border-radius:50%;width:151px;height:151px;position:absolute }
.course-visual-orbit-one { top:-47px;right:7px }
.course-visual-orbit-two { border-color:#4d8abd29;width:184px;height:184px;top:-30px;right:-21px }
.course-badge { color:#42675f;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);background:#ffffff94;border:1px solid #ffffffba;border-radius:999px;align-items:center;gap:6px;padding:7px 9px;font-size:11px;font-weight:660;display:inline-flex }
.course-badge>span { background:#10b981;border-radius:50%;width:5px;height:5px }
.course-art-number { color:#26506424;letter-spacing:-.1em;font-size:52px;font-weight:720;line-height:.9 }
.course-art-label { color:#274a5b8f;letter-spacing:.14em;font-size:10px;font-weight:740;position:absolute;bottom:16px;left:15px;right:15px }
.course-art-mark { color:#078e6b;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);background:#ffffffa3;border:1px solid #ffffffd6;border-radius:16px;place-items:center;width:46px;height:46px;display:grid;position:absolute;top:51px;right:47px;box-shadow:0 8px 19px #26596717 }
.course-card-body { padding:16px 16px 15px }
.course-card-meta { color:#8794a4;flex-wrap:wrap;align-items:center;gap:9px 12px;font-size:11px;font-weight:560;display:flex }
.course-card-meta>span { align-items:center;gap:4px;display:inline-flex }
.course-card-meta svg { color:#60a994 }
.course-card h3 { color:#1d2e44;letter-spacing:-.03em;min-height:42px;margin:13px 0 8px;font-size:16px;font-weight:680;line-height:1.42 }
.course-card-body>p { color:#7b899a;min-height:55px;margin:0;font-size:13px;line-height:1.7 }
.course-link { color:#087e64;align-items:center;gap:7px;margin-top:14px;padding:7px 0 2px;font-size:13px;font-weight:700;transition:gap .16s;display:inline-flex }
.course-link:hover { gap:10px }

/* ---------------------------------------------------------------------------
   KIEMELT KÉPZÉSEK — a kezdőlap kurzuskártyái (2026-10-01)
   ---------------------------------------------------------------------------
   A dizájn a /teszt-3d/ `CourseCard.tsx`-éből; a jelölést a
   `[balance_kiemelt_kepzesek]` rövidkód adja, VALÓS Tutor-adatokkal
   (lásd functions.php). A Tailwind-osztályokat itt írtam át sima CSS-re,
   mert a témában nincs Tailwind.

   ⚠ A kártyák fenti .course-* szabályai a Landing-B statikus blokkjához
   tartoznak, ami 2026-10-01 óta ki van kapcsolva — azok érintetlenek.
   --------------------------------------------------------------------------- */

.bal-top { margin-top: 46px }

.bal-top-head {
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 20px;
	display: flex;
	margin-bottom: 22px;
}

.bal-top-head h2 {
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.15;
	color: #0f172a;
	margin: 10px 0 0;
}

/* ⚠⚠ A `background` RÖVIDÍTÉS VISSZAÁLLÍTJA a `background-clip`-et `border-box`-ra!
   Ezért a színátmenetes FELIRATNÁL a `background`-nak KELL ELŐBB jönnie, és a
   `background-clip: text`-nek UTÁNA — különben a gradiens TÖMBKÉNT jelenik meg
   a betűk helyett (ez volt élesben, a felhasználó képernyőképén). */
.bal-top-head h2 span {
	background: linear-gradient(100deg, #2563eb, #1395c7 45%, #10b981);
	-webkit-background-clip: text;
	background-clip: text;
	color: #0000;
}

.bal-top-sub { font-size: 15px; color: #64748b; margin: 9px 0 0 }

.bal-top-all {
	color: #0f172a;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 999px;
	align-items: center;
	gap: 8px;
	padding: 12px 19px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: transform .18s, box-shadow .18s;
	display: inline-flex;
	box-shadow: 0 8px 20px #0f172a0f;
}

.bal-top-all:hover { transform: translateY(-2px); box-shadow: 0 12px 26px #0f172a1a }

.bal-top-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; display: grid }

.bal-top-card {
	flex-direction: column;
	display: flex;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 22px;
	overflow: hidden;
	transition: transform .2s, box-shadow .2s;
	box-shadow: 0 10px 28px -12px #0f172a24;
}

.bal-top-card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -14px #0f172a2e }

/* --- fejrész --- */
.bal-top-visual {
	height: 168px;
	padding: 18px;
	color: #fff;
	display: block;
	position: relative;
	overflow: hidden;
	text-decoration: none;
}

.bal-top-visual--mint { background: linear-gradient(135deg, #0fb98b, #12b981 55%, #0ea5a0) }
.bal-top-visual--blue { background: linear-gradient(135deg, #4f46e5, #2563eb 60%, #3b82f6) }
.bal-top-visual--violet { background: linear-gradient(135deg, #7c3aed, #a21caf 60%, #c026d3) }

.bal-top-visual:before {
	content: "";
	background-image: radial-gradient(#ffffff 1px, #0000 1px);
	background-size: 14px 14px;
	opacity: .18;
	position: absolute;
	inset: 0;
}

.bal-top-visual:after {
	content: "";
	background: radial-gradient(circle, #ffffff2e, #0000 70%);
	border-radius: 50%;
	width: 150px;
	height: 150px;
	position: absolute;
	top: -34px;
	right: -26px;
}

.bal-top-visual-top {
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
	display: flex;
	position: relative;
}

.bal-top-icon {
	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);
	background: #ffffff33;
	border: 1px solid #ffffff66;
	border-radius: 16px;
	place-items: center;
	width: 48px;
	height: 48px;
	display: grid;
}

.bal-top-cat {
	background: #00000040;
	border-radius: 999px;
	padding: 6px 11px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.bal-top-chips { justify-content: flex-start; gap: 8px; display: flex; position: absolute; bottom: 16px; left: 18px }

.bal-top-chip {
	background: #ffffff33;
	border: 1px solid #ffffff4d;
	border-radius: 999px;
	padding: 6px 11px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.bal-top-chip--free { background: #34d399; border-color: #0000; color: #042e1c }

/* --- törzs --- */
.bal-top-body { flex-direction: column; flex: 1; padding: 16px 18px 18px; display: flex }

.bal-top-meta { color: #64748b; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; display: flex }
.bal-top-meta .bal-top-star { color: #f59e0b; align-items: center; gap: 4px; display: inline-flex }
.bal-top-meta .bal-top-star b { color: #1e293b }
.bal-top-dot { color: #cbd5e1 }
.bal-top-new { color: #059669; background: #e7f8f1; border: 1px solid #c8ecdd; border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 800 }

.bal-top-card h3 { font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.35; color: #0f172a; margin: 9px 0 0 }
.bal-top-card h3 a { color: inherit; text-decoration: none }
.bal-top-card h3 a:hover { color: #1d4ed8 }

.bal-top-desc { font-size: 13.5px; line-height: 1.6; color: #64748b; margin: 7px 0 0 }

/* ⚠ Az óra+lecke sor: a „Részletek" gomb ebben a sorban van (a felhasználó
   kérése: „az óra és lecke magasságában"), és a `translateY(-9px)` miatt
   KILÓG a sor fölé — ez a „jöjjön ki az óra+lecke felett". */
.bal-top-times { color: #64748b; align-items: center; gap: 14px; margin-top: 20px; font-size: 12.5px; font-weight: 500; display: flex }
.bal-top-times span { align-items: center; gap: 5px; display: inline-flex }
.bal-top-times svg { color: #94a3b8 }

.bal-top-details {
	color: #0b7a5c;
	background: #e7f8f1;
	border: 1px solid #c8ecdd;
	border-radius: 999px;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	padding: 8px 14px;
	font-size: 12.5px;
	font-weight: 800;
	text-decoration: none;
	transition: background .16s, transform .16s;
	display: inline-flex;
	transform: translateY(-9px);
}

.bal-top-details:hover { background: #d5f2e7; transform: translateY(-11px) }

/* ⚠ `margin-top: auto`: a törzs flex-oszlop, ezért ez az oktató-sort (és vele
   az árat + gombot) a kártya ALJÁHOZ rögzíti — így a három kártya alsó sora
   egy vonalban van, akármilyen hosszú a cím vagy a leírás. */
.bal-top-author { color: #64748b; border-top: 1px dashed #e2e8f0; margin: auto 0 0; padding-top: 12px; font-size: 12.5px; font-weight: 600 }
.bal-top-author span { color: #94a3b8; font-weight: 400 }

.bal-top-foot { justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; display: flex }
.bal-top-price { color: #059669; font-size: 17px; font-weight: 800; letter-spacing: -.02em }

/* ⚠⚠ EREDETI + AKCIÓS ÁR (2026-10-06, a felhasználó kérése): a 3D kártyán is
   látszódjon az áthúzott eredeti ár — mint a 2D kártyán. A `<del>`-t a modul
   `balance_ar_html()`-je adja (a `functions.php` csak hívja).
   ⚠ MÉRVE: a `balance_ar_felirat()` CSAK az eredeti árat adta (39 900 Ft),
   holott a kurzus 29 900 Ft-ba kerül. */
.bal-top-price del {
	margin-left: 6px;
	color: #94a3b8;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: line-through;
}

.bal-top-join {
	color: #fff;
	background: linear-gradient(108deg, #0a58ff, #0092cf 45%, #10c98c);
	border-radius: 999px;
	align-items: center;
	gap: 7px;
	padding: 11px 19px;
	font-size: 13px;
	font-weight: 800;
	text-decoration: none;
	transition: transform .18s, box-shadow .18s;
	display: inline-flex;
	box-shadow: 0 10px 20px #0a58ff33;
}

.bal-top-join:hover { transform: translateY(-2px); box-shadow: 0 14px 26px #0a58ff4d }

@media (max-width: 980px) {
	.bal-top-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

@media (max-width: 640px) {
	.bal-top-grid { grid-template-columns: 1fr }
	.bal-top-head { align-items: flex-start }
	.bal-top-visual { height: 150px }
}
.portal-note-row { background:linear-gradient(100deg,#f1faf6,#ffffffbf);border:1px solid #e6efeb;border-radius:16px;align-items:center;gap:12px;margin-top:21px;padding:15px 18px;display:flex }
.portal-note-icon { color:#0c9a70;background:#fff;border-radius:10px;flex:none;place-items:center;width:31px;height:31px;display:grid }
.portal-note-row p { color:#738398;flex:1;margin:0;font-size:10px;line-height:1.6 }
.portal-note-row p strong { color:#33475b;font-weight:700 }
.portal-note-row>a { color:#078b63;flex:none;align-items:center;gap:6px;font-size:10px;font-weight:690;display:inline-flex }
.dashboard-stats-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid }
.dashboard-stat-card { background:#fff;border:1px solid #edf1f3;border-radius:17px;flex-direction:column;align-items:flex-start;min-height:145px;padding:16px 17px 14px;display:flex;position:relative }
.dashboard-stat-icon { border-radius:11px;place-items:center;width:34px;height:34px;margin-bottom:12px;display:grid }
.stat-icon-blue { color:#3275df;background:#eef4ff }
.stat-icon-green { color:#0b9b70;background:#eaf9f2 }
.stat-icon-violet { color:#7c74d3;background:#f1efff }
.dashboard-stat-label { color:#8693a5;font-size:9px;font-weight:610 }
.dashboard-stat-card>strong { color:#24344a;letter-spacing:-.06em;margin-top:6px;font-size:23px;font-weight:680;line-height:1 }
.dashboard-stat-card>strong small { color:#708096;margin-left:2px;font-size:11px }
.dashboard-stat-card>small { color:#a0aab6;margin-top:8px;font-size:8px }
.dashboard-stat-card-note>.dashboard-stat-icon { position:absolute;top:16px;right:16px }
.dashboard-stat-card>strong.stat-note { margin-top:8px;font-size:14px;line-height:1.32 }
.dashboard-empty-state { background:linear-gradient(107deg,#f8fcfa,#fff 75%);border:1px dashed #dce9e4;border-radius:19px;align-items:center;gap:clamp(25px,7vw,80px);min-height:225px;margin-top:14px;padding:24px clamp(20px,5vw,65px);display:flex }
.empty-art { flex:none;place-items:center;width:115px;height:115px;display:grid;position:relative }
.empty-art-circle { border-radius:50%;place-items:center;display:grid;position:absolute }
.empty-art-circle-back { background:radial-gradient(circle,#e1f7ee73,#eff8ff30 64%,#0000 65%);border:1px solid #5bb19529;width:106px;height:106px }
.empty-art-circle-front { color:#0b9c70;background:linear-gradient(145deg,#fff,#eaf9f2);border:1px solid #fffffff2;width:66px;height:66px;box-shadow:0 12px 26px #19584f1c }
.empty-art-spark { color:#3679df;background:#edf5ff;border:1px solid #fff;border-radius:10px;place-items:center;width:29px;height:29px;display:grid;position:absolute;box-shadow:0 6px 13px #204a7414 }
.empty-art-spark-one { top:3px;right:4px }
.empty-art-spark-two { color:#07976c;background:#e7f8f0;bottom:1px;left:1px }
.empty-state-copy { max-width:520px }
.empty-state-label { color:#8a9aab;letter-spacing:.15em;font-size:8px;font-weight:740 }
.empty-state-copy h3 { color:#24344a;letter-spacing:-.045em;margin:8px 0 7px;font-size:21px;font-weight:670 }
.empty-state-copy>p { color:#7c8b9c;margin:0;font-size:11px;line-height:1.7 }
.empty-state-actions { flex-wrap:wrap;align-items:center;gap:17px;margin-top:16px;display:flex }
.empty-state-actions .button { border-radius:12px;min-height:41px;padding:0 14px;font-size:10px }
.subtle-link { color:#718196;align-items:center;gap:6px;font-size:10px;font-weight:620;transition:color .16s,gap .16s;display:inline-flex }
.subtle-link:hover { color:#078d68;gap:9px }
.dashboard-tip { align-items:center;gap:10px;margin-top:19px;padding:0 3px;display:flex }
.dashboard-tip>span { color:#0b9b70;background:#e9f8f1;border-radius:10px;flex:none;place-items:center;width:30px;height:30px;display:grid }
.dashboard-tip p { color:#7b899a;margin:0;font-size:10px;line-height:1.5 }
.dashboard-tip p strong { color:#33475c }
.registration-layout,.instructor-layout,.login-layout { grid-template-columns:minmax(245px,.78fr) minmax(0,1.22fr);align-items:stretch;gap:19px;display:grid }
.registration-benefits,.instructor-story,.login-welcome { background:linear-gradient(152deg,#eff9f5,#f5fbfa 53%,#f5f8ff);border:1px solid #e5efeb;border-radius:23px;padding:29px 27px 23px;position:relative;overflow:hidden }
.registration-benefits:after,.instructor-story:after,.login-welcome:after { content:"";pointer-events:none;background:radial-gradient(circle,#b2e6d457,#0000 68%);border-radius:50%;width:220px;height:220px;position:absolute;bottom:-85px;right:-74px }
.registration-benefit-icon,.instructor-story-mark,.login-welcome-icon { color:#0b9c70;background:#ffffffb8;border:1px solid #ffffffed;border-radius:14px;place-items:center;width:43px;height:43px;margin-bottom:22px;display:grid;box-shadow:0 7px 17px #1f614e11 }
.registration-aside-eyebrow { color:#6a9b8c;letter-spacing:.16em;margin:0 0 9px;font-size:8px;font-weight:760 }
.registration-benefits h2,.instructor-story h2,.login-welcome h2 { z-index:1;color:#21374a;letter-spacing:-.048em;margin:0;font-size:23px;font-weight:650;line-height:1.22;position:relative }
.registration-aside-copy,.instructor-story-copy,.login-welcome>p:not(.registration-aside-eyebrow) { z-index:1;color:#75899a;margin:12px 0 0;font-size:10px;line-height:1.75;position:relative }
.registration-benefits ul { z-index:1;flex-direction:column;gap:12px;margin:23px 0 24px;padding:0;list-style:none;display:flex;position:relative }
.registration-benefits li { color:#63778a;align-items:flex-start;gap:8px;font-size:9px;line-height:1.5;display:flex }
.registration-benefits li>span { color:#078f65;background:#dff5e9;border-radius:50%;flex:none;place-items:center;width:17px;height:17px;margin-top:-1px;display:grid }
.registration-aside-foot { z-index:1;color:#7e928f;border-top:1px solid #c5ddd39e;align-items:center;gap:9px;padding-top:14px;font-size:8px;line-height:1.45;display:flex;position:relative }
.registration-aside-foot strong { color:#3b6e60;font-weight:680 }
.aside-avatars { align-items:center;display:flex }
.aside-avatars i { color:#367a68;background:#d9f1e6;border:2px solid #f2faf6;border-radius:50%;place-items:center;width:28px;height:28px;font-size:7px;font-style:normal;font-weight:730;display:grid }
.aside-avatars i+i { color:#5476b0;background:#e2ecff;margin-left:-7px }
.registration-layout .tutor-slot,.instructor-layout .tutor-slot,.login-layout .tutor-slot { flex-direction:column;min-width:0;display:flex }
.registration-layout .tutor-slot-body,.instructor-layout .tutor-slot-body,.login-layout .tutor-slot-body { flex-direction:column;flex:1;justify-content:center;display:flex }
.form-preview-card { background:#fff;border:1px solid #edf1f3;border-radius:19px;width:min(100%,450px);margin:0 auto;padding:22px 23px 18px;box-shadow:0 10px 29px #1a34480b }
.form-preview-top { justify-content:space-between;align-items:center;gap:8px;display:flex }
.form-preview-symbol { color:#098e69;background:linear-gradient(145deg,#e9faf2,#edf6ff);border-radius:12px;place-items:center;width:37px;height:37px;display:grid }
.form-preview-badge { color:#698275;background:#f8fcf9;border:1px solid #e7f1eb;border-radius:999px;align-items:center;gap:7px;padding:7px 9px;font-size:8px;font-weight:610;display:inline-flex }
.form-preview-badge>span { width:5px;height:5px }
.form-preview-card h3,.instructor-form-copy h3 { color:#24354a;letter-spacing:-.047em;margin:16px 0 5px;font-size:20px;font-weight:670 }
.form-preview-description,.instructor-form-copy>p:not(.integration-disclaimer) { color:#7c8999;margin:0;font-size:9px;line-height:1.65 }
.preview-fields { flex-direction:column;gap:9px;margin-top:18px;display:flex }
.preview-field { color:#98a3b1;background:#fff;border:1px solid #e8edf1;border-radius:11px;justify-content:space-between;align-items:center;gap:10px;min-height:42px;padding:0 12px;font-size:9px;display:flex }
.preview-field i { color:#a9b4c0;place-items:center;font-style:normal;display:grid }
.preview-consent { align-items:center;gap:7px;margin-top:12px;display:flex }
.preview-consent>span { color:#098e67;background:#effaf4;border:1px solid #b9e5d1;border-radius:4px;place-items:center;width:13px;height:13px;display:grid }
.preview-consent p { color:#8793a2;margin:0;font-size:8px }
.preview-submit { color:#fff;background:linear-gradient(105deg,#2563eb,#128fc8 54%,#10b981);border-radius:11px;justify-content:center;align-items:center;gap:9px;min-height:43px;margin-top:16px;font-size:10px;font-weight:680;display:flex;box-shadow:0 8px 16px #2563eb21 }
.preview-submit-muted { color:#527a6c;box-shadow:none;background:linear-gradient(105deg,#edf8f3,#eef7fb) }
.integration-disclaimer { color:#98a4b1;align-items:flex-start;gap:6px;margin:12px 0 0;font-size:8px;line-height:1.55;display:flex }
.integration-disclaimer svg { color:#80a797;flex:none }
.registration-bottom-link { color:#8491a0;justify-content:center;align-items:center;gap:8px;margin-top:21px;font-size:10px;display:flex }
.registration-bottom-link a,.login-form-bottom a { color:#078e67;align-items:center;gap:5px;font-weight:680;display:inline-flex }
.instructor-layout { grid-template-columns:minmax(245px,.84fr) minmax(0,1.16fr) }
.instructor-story-mark { color:#3c7add;background:#fffc }
.instructor-story h2 { max-width:360px;font-size:25px }
.instructor-story-copy { max-width:390px }
.instructor-principles { z-index:1;flex-direction:column;gap:13px;margin-top:22px;display:flex;position:relative }
.instructor-principle { align-items:center;gap:9px;display:flex }
.instructor-principle>span { color:#128f73;background:#ffffffbf;border-radius:10px;flex:none;place-items:center;width:31px;height:31px;display:grid }
.instructor-principle>div { flex-direction:column;gap:2px;display:flex }
.instructor-principle strong { color:#526b78;font-size:9px;font-weight:680 }
.instructor-principle small { color:#8999a3;font-size:8px }
.instructor-explore-link { z-index:1;margin-top:24px;position:relative }
.instructor-form-preview { background:#fff;border:1px solid #edf1f3;border-radius:19px;grid-template-columns:.84fr 1.16fr;min-height:310px;display:grid;overflow:hidden;box-shadow:0 10px 29px #1a34480b }
.instructor-preview-art { background:linear-gradient(152deg,#e3f6ef,#e8f2ff 57%,#f1f2fd);flex-direction:column;justify-content:flex-end;min-height:100%;padding:18px;display:flex;position:relative;overflow:hidden }
.instructor-preview-orbit { border:1px solid #5b9fa430;border-radius:50%;width:190px;height:190px;position:absolute;top:22px;left:-32px }
.instructor-preview-orbit-two { border-color:#4f85be2e;width:150px;height:150px;top:51px;left:-9px }
.instructor-preview-star { color:#147e83;background:#ffffffa3;border:1px solid #ffffffe6;border-radius:16px;place-items:center;width:48px;height:48px;display:grid;position:absolute;top:84px;left:50%;transform:translate(-50%);box-shadow:0 8px 21px #2752691a }
.instructor-preview-caption { color:#698893;letter-spacing:.14em;font-size:7px;font-weight:730;position:relative }
.instructor-preview-word { color:#304e61;letter-spacing:-.075em;margin-top:6px;font-size:26px;font-weight:670;position:relative }
.instructor-preview-word span { color:#10b981 }
.instructor-form-copy { align-self:center;padding:22px 19px }
.instructor-form-copy .form-preview-badge { font-size:7px }
.instructor-form-copy h3 { margin-top:14px;font-size:19px }
.instructor-preview-steps { flex-direction:column;gap:8px;margin:16px 0 0;display:flex }
.instructor-preview-steps>span { color:#738397;align-items:center;gap:8px;font-size:8px;display:flex }
.instructor-preview-steps i { color:#158c6b;background:#edf8f2;border-radius:7px;place-items:center;width:21px;height:21px;font-size:7px;font-style:normal;font-weight:720;display:grid }
.instructor-form-copy .preview-submit { min-height:39px;margin-top:14px;font-size:9px }
.instructor-form-copy .integration-disclaimer { margin-top:9px }
.login-layout { grid-template-columns:minmax(245px,.76fr) minmax(0,1.24fr) }
.login-welcome { background:linear-gradient(151deg,#eff7ff,#f1faf7 64%,#f5fbf8) }
.login-welcome-icon { color:#3674db }
.login-welcome h2 { max-width:300px }
.login-welcome-quote { z-index:1;background:#ffffff94;border:1px solid #ffffffd9;border-radius:15px;flex-direction:column;margin-top:31px;padding:14px 14px 13px;display:flex;position:relative }
.login-welcome-quote>span { color:#3d90c3;height:18px;font-family:Georgia,serif;font-size:32px;line-height:1 }
.login-welcome-quote strong { color:#3e6172;font-size:11px;font-weight:650;line-height:1.5 }
.login-welcome-quote small { color:#91a2aa;margin-top:7px;font-size:8px }
.login-form-preview { width:min(100%,430px) }
.login-preview-options { color:#8492a1;justify-content:space-between;align-items:center;gap:8px;margin-top:13px;font-size:8px;display:flex }
.login-preview-options>span:first-child { align-items:center;gap:6px;display:inline-flex }
.login-preview-options i { border:1px solid #cfdae1;border-radius:4px;width:12px;height:12px }
.login-form-bottom { color:#8a96a4;border-top:1px solid #eff2f4;justify-content:center;align-items:center;gap:6px;margin-top:14px;padding-top:13px;font-size:8px;display:flex }
.login-footer-note { color:#8a97a6;text-align:center;justify-content:center;align-items:center;gap:8px;margin-top:19px;font-size:9px;display:flex }
.login-footer-note>span { color:#6a9b87;background:#eff8f3;border-radius:8px;place-items:center;width:25px;height:25px;display:grid }
:focus-visible { outline-offset:3px;outline:3px solid #2563eb8c }

@media(min-width:40rem) {
    .container { max-width:40rem }
}

@media(min-width:48rem) {
    .container { max-width:48rem }
}

@media(min-width:64rem) {
    .container { max-width:64rem }
}

@media(min-width:80rem) {
    .container { max-width:80rem }
}

@media(min-width:96rem) {
    .container { max-width:96rem }
}

@media(max-width:1180px) {
    .hero-section { grid-template-columns:minmax(0,1fr) minmax(360px,.92fr);gap:28px }
    .hero-copy h1 { font-size:clamp(47px,5.15vw,62px) }
    .trust-row { gap:8px }
    .trust-item { font-size:12px }
    .energy-dashboard { left:7px;right:7px }
    .focus-note { right:-10px }
    .recovery-note { left:-8px }
    .portal-shortcut-grid { grid-template-columns:repeat(3,minmax(0,1fr)) }
}

@media(max-width:980px) {
    .hero-section { min-height:unset;grid-template-columns:minmax(0,1fr);gap:14px;padding-top:54px;padding-bottom:37px }
    .hero-copy { max-width:680px }
    .hero-copy h1 { font-size:clamp(55px,7vw,71px) }
    .hero-description { max-width:560px }
    .hero-art { width:min(100%,590px);margin-top:1px }
    .belief-strip { flex-wrap:wrap;gap:8px 13px }
    .section-heading,.portal-heading { flex-direction:column;align-items:flex-start;gap:15px }
    .section-intro,.portal-heading>p { max-width:560px }
    .registration-layout,.instructor-layout,.login-layout { grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:13px }
    .registration-benefits,.instructor-story,.login-welcome { padding:24px 20px 20px }
    .tutor-slot { padding:18px }
    .instructor-form-preview { grid-template-columns:minmax(110px,.74fr) minmax(0,1.26fr) }
    .instructor-form-copy { padding:18px 14px }
}

@media(max-width:760px) {
    .wordmark-name { font-size:17px }
    .wordmark-academy { font-size:8px }
    .home-page { padding-top:0;padding-bottom:58px }
    .hero-section { gap:0;padding-top:46px;padding-bottom:32px }
    .hero-copy h1 { margin-top:21px;font-size:clamp(48px,9.3vw,66px) }
    .hero-description { max-width:590px;font-size:15px }
    .hero-art { height:475px;margin-top:12px }
    .energy-dashboard { top:40px;left:21px;right:21px }
    .focus-note { top:75px;right:2px }
    .recovery-note { bottom:39px;left:1px }
    .belief-strip { min-height:unset;flex-direction:column;padding:19px 17px }
    .belief-strip p { font-size:15px;line-height:1.55 }
    .belief-strip>span { font-size:15px;line-height:1.5;font-style:italic }
    .value-section,.portal-section { padding-top:75px }
    .section-heading h2,.portal-heading h2 { font-size:clamp(30px,6vw,40px) }
    .pillar-grid { gap:12px;margin-top:23px }
    .pillar-card { min-height:218px;padding:19px 20px 17px }
    .pillar-card h3 { margin-top:15px }
    .portal-shortcut-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:21px }
    .portal-shortcut { border-radius:16px;gap:12px;min-height:131px;padding:14px 12px 12px }
    .portal-shortcut:last-child { flex-direction:row;grid-column:1/-1;align-items:center;min-height:88px }
    .portal-shortcut:last-child .shortcut-copy { flex:1 }
    .portal-shortcut:last-child .shortcut-arrow { top:50%;transform:translateY(-50%) }
    .portal-shortcut:last-child:hover .shortcut-arrow { transform:translate(2px,-50%) }
    .closing-cta { min-height:unset;border-radius:23px;flex-direction:column;align-items:flex-start;gap:20px;margin-top:62px;padding:25px 23px }
    .closing-copy { gap:12px }
    .closing-mark { width:38px;height:38px }
    .closing-cta h2 { font-size:29px }
    .button-light { min-height:45px }
    .portal-page { padding-top:43px;padding-bottom:60px }
    .page-heading-copy { font-size:12px }
    .catalog-toolbar { flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:11px }
    .catalog-tags { justify-content:flex-start }
    .course-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
    .dashboard-empty-state { gap:20px;padding:22px }
    .registration-layout,.instructor-layout,.login-layout { grid-template-columns:1fr;gap:13px }
    .registration-benefits,.instructor-story,.login-welcome { padding:24px }
    .registration-benefits ul { gap:9px;margin:17px 0 18px }
    .registration-layout .tutor-slot,.instructor-layout .tutor-slot,.login-layout .tutor-slot { min-height:460px }
    .instructor-story h2 { max-width:500px }
    .instructor-principles { grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid }
    .instructor-principle { align-items:flex-start }
    .instructor-principle small { line-height:1.4 }
    .instructor-explore-link { margin-top:18px }
    .login-welcome-quote { max-width:300px;margin-top:20px }
}

@media(max-width:560px) {
    .wordmark-symbol { width:23px;height:23px }
    .wordmark-name { font-size:16px }
    .wordmark-divider { height:17px;margin-left:2px;margin-right:0 }
    .wordmark-academy { letter-spacing:.14em;font-size:7px }
    .hero-section { padding-top:37px }
    .hero-eyebrow { letter-spacing:.11em;font-size:8px }
    .hero-copy h1 { letter-spacing:-.068em;margin:19px 0 15px;font-size:clamp(43px,10.5vw,57px) }
    .hero-description { font-size:14px;line-height:1.72 }
    .hero-actions { gap:9px;margin-top:21px }
    .hero-actions .button { border-radius:12px;min-height:50px;padding:0 15px;font-size:11.5px }
    .button-play { width:20px;height:20px }
    .trust-row { gap:7px 9px;margin-top:21px }
    .trust-item { font-size:11px }
    .trust-divider { height:11px }
    .trust-divider-last { display:none }
    .hero-art { height:405px;margin-top:8px }
    .energy-dashboard { border-radius:20px;padding:16px 14px 13px;top:35px;left:5px;right:5px }
    .dashboard-topline { padding-bottom:12px }
    .dashboard-summary { padding:15px 2px 13px }
    .energy-score-copy>strong { font-size:14px }
    .energy-ring { width:66px;height:66px }
    .energy-ring>div { width:53px;height:53px }
    .energy-ring strong { font-size:19px }
    .chart-panel { padding:10px 9px 7px }
    .chart-panel-heading strong { font-size:9px }
    .chart-panel-heading>div>span { font-size:7px }
    .energy-chart { gap:5px;height:83px;margin-top:7px }
    .chart-bar-track { width:12px;height:59px }
    .dashboard-bottomline { gap:8px;padding-top:10px;font-size:7px }
    .dashboard-week { display:none }
    .focus-note { border-radius:13px;gap:7px;min-height:48px;padding:7px 9px;top:18px;right:-1px }
    .focus-note .floating-icon { border-radius:10px;width:29px;height:29px }
    .focus-note .floating-copy strong { font-size:8px }
    .focus-note .floating-copy small { font-size:7px }
    .recovery-note { border-radius:13px;gap:7px;min-height:51px;padding:7px 9px;bottom:31px;left:-2px }
    .recovery-note .floating-icon { border-radius:10px;width:30px;height:30px }
    .recovery-note .floating-copy strong { font-size:9px }
    .recovery-note .floating-copy small { font-size:7px }
    .recovery-note .floating-check { width:16px;height:16px;margin-left:0 }
    .art-caption { font-size:8px;bottom:1px }
    .belief-strip p { font-size:14px }
    .belief-strip>span { font-size:14px;font-style:italic }
    .value-section,.portal-section { padding-top:62px }
    .section-heading h2,.portal-heading h2 { font-size:30px }
    .section-intro,.portal-heading>p { font-size:11px }
    .pillar-card { min-height:213px }
    .portal-shortcut-grid { grid-template-columns:1fr 1fr }
    .shortcut-copy strong { font-size:10px }
    .shortcut-copy small { font-size:8px }
    .closing-cta { margin-top:48px;padding:22px 17px }
    .closing-copy { gap:10px }
    .closing-mark { border-radius:11px;width:34px;height:34px }
    .closing-eyebrow { font-size:8px }
    .closing-cta h2 { font-size:25px }
    .closing-cta .button { min-height:42px;padding:0 13px;font-size:10px }
    .portal-page { padding-top:36px }
    .page-heading-copy { font-size:11px }
    .tutor-slot { border-radius:20px;padding:14px }
    .tutor-slot-header { gap:8px;padding-bottom:13px }
    .tutor-slot-icon { width:32px;height:32px }
    .tutor-slot-kicker { font-size:7px }
    .tutor-slot-header h2 { font-size:11px }
    .module-ready { gap:6px;padding:6px 7px;font-size:7px }
    .course-grid { grid-template-columns:1fr }
    .course-visual { height:145px }
    .course-card h3,.course-card-body>p { min-height:0 }
    .course-card-body>p { font-size:10px }
    .portal-note-row { flex-wrap:wrap;align-items:flex-start;gap:9px;padding:13px }
    .portal-note-row p { flex:unset;width:calc(100% - 42px) }
    .portal-note-row>a { margin-left:40px }
    .dashboard-stats-grid { grid-template-columns:1fr 1fr }
    .dashboard-stat-card { min-height:136px;padding:13px }
    .dashboard-stat-card-note { grid-column:1/-1;min-height:105px }
    .dashboard-stat-card-note>.dashboard-stat-icon { top:14px;right:13px }
    .dashboard-stat-card>strong.stat-note { font-size:13px }
    .dashboard-empty-state { flex-direction:column;align-items:flex-start;gap:10px;padding:19px 16px }
    .empty-art { width:75px;height:75px;margin-bottom:3px }
    .empty-art-circle-back { width:73px;height:73px }
    .empty-art-circle-front { width:48px;height:48px }
    .empty-art-circle-front svg { width:21px }
    .empty-art-spark { border-radius:8px;width:22px;height:22px }
    .empty-art-spark svg { width:12px }
    .empty-state-copy h3 { font-size:18px }
    .empty-state-actions { gap:12px }
    .empty-state-actions .subtle-link { font-size:9px }
    .registration-benefits,.instructor-story,.login-welcome { border-radius:20px;padding:20px 18px }
    .registration-benefits h2,.instructor-story h2,.login-welcome h2 { font-size:21px }
    .registration-layout .tutor-slot,.instructor-layout .tutor-slot,.login-layout .tutor-slot { min-height:0 }
    .tutor-slot-body { padding-top:15px }
    .form-preview-card { padding:18px 15px 15px }
    .form-preview-card h3 { font-size:18px }
    .instructor-form-preview { grid-template-columns:1fr }
    .instructor-preview-art { min-height:143px }
    .instructor-preview-star { width:40px;height:40px;top:26px;left:73% }
    .instructor-preview-orbit { width:174px;height:174px;top:-26px;left:auto;right:-8px }
    .instructor-preview-orbit-two { width:134px;height:134px;top:-7px;right:13px }
    .instructor-preview-caption { font-size:6px }
    .instructor-preview-word { font-size:22px }
    .instructor-form-copy { padding:18px 15px }
    .instructor-principles { grid-template-columns:1fr;gap:9px }
    .instructor-principle { align-items:center }
    .registration-bottom-link,.login-footer-note { font-size:8px }
}

@media(prefers-reduced-motion:reduce) {
    *,:before,:after { scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important }
}

/* ============================================================================
   A HERO HÁTTERE — A FELTÖLTÖTT FOTÓVAL
   ----------------------------------------------------------------------------
   A felhasználó kérése (2026-09-30): „tedd be a hero hátterének ezt a képet".
   A forrás: `C:\Users\Surface\Downloads\ChatGPT Image 2026. szept. 26. 00_34_30.png`
   (1672×941, 1,7 MB PNG) → a témába JPEG-ként került
   (`assets/hero.jpg`, ugyanaz a kép, tömörítve, hogy ne lassítsa az oldalt).

   MIÉRT VAN FÁTYOL A KÉP ELŐTT
   ────────────────────────────
   A kép BAL OLDALÁN van a világos ég, a JOBB oldalán a növények, a polcok és a
   laptop — vagyis pont ott, ahol a hero szövege áll, a fotó nem elég világos
   a szöveghez. Ezért a háttér KÉT réteg: alul a fotó, felül egy balról jobbra
   halványuló, meleg-fehér fátyol. A szöveg így a fátylon ül (átolvasható), a
   fotó pedig a jobb oldalon érvényesül — ott, ahol a hero grafikája van.

   A `border-radius` + `overflow:hidden` a hero-t egy lekerekített sávvá teszi,
   így a fotó nem folyik ki a keretből. */
.bal-embed .hero-section {
    position: relative;
    isolation: isolate;
    border-radius: 30px;
    overflow: hidden;
    /* A felhasználó kérése (2026-09-30): a hero „energia-kimutatása" lekerült,
       mert nem állt mögötte valós adat. Ezért a hero EGYHASÁBOS lett — a
       szöveg kapja a helyet, a képet a háttér adja. */
    grid-template-columns: minmax(0, 1fr);
    padding-left: clamp(24px, 3.6vw, 58px);
    padding-right: clamp(24px, 3.6vw, 58px);
    background-color: #f8fafc;
    background-image:
        linear-gradient(96deg,
            rgba(248, 250, 252, 0.97) 0%,
            rgba(248, 250, 252, 0.93) 32%,
            rgba(248, 250, 252, 0.62) 56%,
            rgba(248, 250, 252, 0.18) 80%,
            rgba(248, 250, 252, 0.05) 100%),
        url("hero.jpg");
    background-size: cover, cover;
    background-position: center center, 50% 32%;
    background-repeat: no-repeat, no-repeat;
}

.bal-embed .hero-copy { max-width: 720px }

/* ⚠ BIZTONSÁGI HÁLÓ. A gyorsítótárazott HTML-ben még benne lehet a régi
   „kimutatás" — ez a szabály akkor is eltünteti, ha a lap HTML-je nem
   töltődik újra. (A forrásból is kivettük, ez csak a régi másolatokra hat.) */
.bal-embed .hero-art { display: none }

@media(max-width:1180px) {
    .bal-embed .hero-section { border-radius: 26px }
}

@media(max-width:760px) {
    /* Mobilon a szöveg a kép FÖLÉ kerül, ezért a fátyol erősebb — különben a
       fotó részletei elnyelnék a betűket. */
    .bal-embed .hero-section {
        border-radius: 22px;
        padding-left: 22px;
        padding-right: 22px;
        background-image:
            linear-gradient(180deg,
                rgba(248, 250, 252, 0.96) 0%,
                rgba(248, 250, 252, 0.92) 55%,
                rgba(248, 250, 252, 0.82) 100%),
            url("hero.jpg");
        background-position: center center, 50% 30%;
    }
}

/* ============================================================
   KATEGÓRIA-LAPOZÓ (3D) — a valós `course-category` fogalmakból
   A fülek/panelek a shortcode-ból jönnek, itt csak a megjelenés.
   ============================================================ */

/* a két új színvilág a kurzuskártya-fejléchez és a fül ikonjához */
.bal-top-visual--amber { background: linear-gradient(135deg, #d97706, #f59e0b 60%, #fbbf24) }
.bal-top-visual--teal { background: linear-gradient(135deg, #0d9488, #06b6d4 60%, #22d3ee) }

/* --- két hasáb: BALRA a kategória-menü, JOBBRA a kártyapakli --- */
.bal-kat {
	display: grid;
	grid-template-columns: 294px minmax(0, 1fr);
	gap: 30px;
	align-items: start;
	margin-top: 26px;
}

.bal-kat-menu {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bal-kat-pakli { min-width: 0 }

.bal-kat-tab {
	align-items: center;
	gap: 12px;
	display: flex;
	width: 100%;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-left: 3px solid transparent;
	border-radius: 14px;
	padding: 9px 12px;
	cursor: pointer;
	text-align: left;
	transition: transform .18s, box-shadow .18s, border-color .18s, background .18s;
	box-shadow: 0 4px 12px -9px #0f172a2e;
}

.bal-kat-tab:hover {
	transform: translateX(3px);
	border-color: #cbd5e1;
	box-shadow: 0 10px 22px -14px #0f172a4d;
}

.bal-kat-tab.is-active {
	border-color: #0f172a;
	border-left-color: #0f172a;
	background: #f8fafc;
	box-shadow: 0 12px 26px -16px #0f172a5c;
}

.bal-kat-tab:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px }

.bal-kat-tab-ikon {
	border-radius: 11px;
	place-items: center;
	width: 34px;
	height: 34px;
	display: grid;
	color: #fff;
	flex: 0 0 auto;
}

.bal-kat-tab-ikon--mint { background: linear-gradient(135deg, #0fb98b, #0ea5a0) }
.bal-kat-tab-ikon--blue { background: linear-gradient(135deg, #4f46e5, #3b82f6) }
.bal-kat-tab-ikon--violet { background: linear-gradient(135deg, #7c3aed, #c026d3) }
.bal-kat-tab-ikon--amber { background: linear-gradient(135deg, #d97706, #f59e0b) }
.bal-kat-tab-ikon--teal { background: linear-gradient(135deg, #0d9488, #06b6d4) }

.bal-kat-tab-szoveg { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; min-width: 0 }
.bal-kat-tab-szoveg b { font-size: 14px; font-weight: 700; color: #0f172a }
.bal-kat-tab-szoveg i { font-size: 11.5px; font-style: normal; color: #64748b }

/* a kártyapakli nyilai (a kategória-nyilak megszűntek, minden kategória látszik) */

.bal-kat-nav {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	cursor: pointer;
	background: #fff;
	border: 1px solid #e2e8f0;
	color: #0f172a;
	transition: transform .18s, box-shadow .18s;
	box-shadow: 0 6px 16px -10px #0f172a2e;
}

.bal-kat-nav:hover { transform: translateY(-2px); box-shadow: 0 14px 24px -14px #0f172a5c }
.bal-kat-nav:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px }
.bal-kat-nav--prev svg { transform: rotate(180deg) }

.bal-kat-panels { margin-top: 0 }

.bal-kat-panel[hidden] { display: none }

.bal-kat-osszes {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	font-size: 13.5px;
	font-weight: 700;
	color: #1d4ed8;
	text-decoration: none;
	transition: gap .18s;
}

.bal-kat-osszes:hover { gap: 11px }

@media (max-width: 900px) {
	/* egy hasáb: a menü felülre kerül, és vízszintesen görgethető lesz */
	.bal-kat { grid-template-columns: 1fr; gap: 16px }
	.bal-kat-menu {
		flex-direction: row;
		gap: 10px;
		overflow-x: auto;
		padding: 4px 2px 10px;
		scrollbar-width: none;
		scroll-behavior: smooth;
	}
	.bal-kat-menu::-webkit-scrollbar { display: none }
	.bal-kat-tab {
		width: auto;
		flex: 0 0 auto;
		padding: 9px 13px 9px 10px;
		border-left-width: 1px;
	}
	.bal-kat-tab:hover { transform: none }
	.bal-kat-tab-szoveg b,
	.bal-kat-tab-szoveg i { white-space: nowrap }
	.bal-kat-tab-szoveg b { font-size: 13px }
}

@media (max-width: 600px) {
	.bal-kat { margin-top: 20px }
	.bal-kat-tab-szoveg i { font-size: 11px }
}

/* ============================================================
   3D KÁRTYAMOZGATÁS — a kategória képzései coverflow-ban
   A kártyák pozícióját a JS állítja (`transform`), itt a tér és a felület.
   ============================================================ */

.bal-3d {
	position: relative;
	overflow: hidden;
	padding: 28px 0 12px;
}

.bal-3d-stage {
	position: relative;
	height: 500px; /* MÉRVE: a kártya természetes magassága 460–483px */
	perspective: 1500px;
	perspective-origin: 50% 42%;
	transform-style: preserve-3d;
}

.bal-3d-card {
	position: absolute;
	top: 0;
	left: 50%;
	width: 372px;
	/* a magasságot a JS méri és állítja a panel legmagasabb kártyájához */
	margin-left: -186px;
	transform-style: preserve-3d;
	backface-visibility: hidden;
	transition:
		transform .6s cubic-bezier(.22, .61, .36, 1),
		opacity .5s ease;
	will-change: transform, opacity;
}

/* ═══ ★★★ A NAGYÍTÁS A BELSŐ RÉTEGEN — A BETŰK ÉLESSÉGE ═════════════════════
   UGYANAZ a mechanizmus, mint a „fejlődés útján”
   (`.bal-ut-tabla > .bal-ut-belso`): a `scale()` a `perspective()`+`rotateY()`
   MELLETT 3D-s raszterréteget kényszerít — a böngésző a LAYOUT méretén
   raszterizál, a kompozitor pedig NAGYÍTJA, ezért a betűk elmosódnak.
   A BELSŐ elemen a nagyítás már a FESTÉS ELŐTT érvényesül, így a szöveg a
   TÉNYLEGES méretén raszterizálódik.

   ⚠ A `--s`-t a JS adja (`balance-shell.js` → `ramelez()`), és onnan a
     `scale()` KIkerült. Ugyanaz a mért javítás, mint az úton: 277 → 633.
   ⚠ A `will-change` a KÜLSŐ elemen MARAD (a journey mintája), a belsőn
     SZÁNDÉKOSAN nincs: az visszahozná a gyorsítótárazott (kicsi) rasztert.
   ⚠ A `transition` görbéje és ideje UGYANAZ, mint a külsőé — különben a méret
     és a hely szétcsúszna az animáció alatt. */
.bal-3d-card > .bal-top-card {
	transform: scale(var(--s, 1));
	transform-origin: 50% 50%;
	transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

/* a hover-emelés a skálával EGYÜTT — a `.bal-top-card:hover` (0,2,0) másképp
   felülírná a skálát, és a kártya mérete ugrana hoverre */
.bal-3d-card > .bal-top-card:hover {
	transform: scale(var(--s, 1)) translateY(-4px);
}

/* „azonnal” frissítés (init / resize): a skála sem animálhat, csak a hely */
.bal-3d-card.is-azonnal > .bal-top-card {
	transition: none;
}

/* a belső kártya a KIEMELT KÉPZÉSEK kártyája — ugyanaz a felület */
.bal-3d-card .bal-top-visual { height: 132px }
.bal-3d-card .bal-top-cat { font-size: 10.5px }

/* ⚠ A 3D ALOLDALON a pakli a `.bal-content` alatt van, és a téma
   `.bal-content a` szabálya (0,1,1) felülírta a fejrész fehér szövegét —
   MÉRVE: a Típus-jelvény színe `rgb(37,99,235)` lett a fehér helyett.
   A landingen nem jött elő, mert ott a wrapper `bal-is-landing`.
   Ezért itt kétszeres osztály-specificitással rögzítjük. */
.bal-3d .bal-top-visual { color: #fff }
.bal-3d .bal-top-chip { color: #fff }
.bal-3d .bal-top-chip--free { color: #042e1c }

/* a leírás 3 sorban, hogy minden kártya egyforma magas és olvasható legyen */
.bal-3d-card .bal-top-desc {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* a nem aktív kártya: kattintásra előre jön, a linkjei nem visznek el */
.bal-3d-card:not(.is-active) { cursor: pointer }

.bal-3d-vezerlok {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 8px;
}

.bal-3d-pontok { display: flex; align-items: center; gap: 7px }

.bal-3d-pont {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	padding: 0;
	border: 0;
	background: #cbd5e1;
	cursor: pointer;
	transition: width .25s, background .25s;
}

.bal-3d-pont.is-active { width: 24px; border-radius: 5px; background: #0f172a }
.bal-3d-pont:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 3px }

@media (max-width: 900px) {
	.bal-3d-stage { height: 496px; perspective: 1100px }
	.bal-3d-card { width: 322px; margin-left: -161px }
	.bal-3d-card .bal-top-visual { height: 118px }
}

@media (max-width: 600px) {
	.bal-3d { padding: 20px 0 8px }
	.bal-3d-stage { height: 524px; perspective: 880px }
	.bal-3d-card { width: 84vw; margin-left: -42vw }
	.bal-3d-card .bal-top-desc { -webkit-line-clamp: 4 }
	.bal-3d-vezerlok { margin-top: 4px; gap: 12px }
}

@media (prefers-reduced-motion: reduce) {
	.bal-3d-card { transition: none }
	.bal-3d-card > .bal-top-card { transition: none }
	.bal-kat-menu { scroll-behavior: auto }
}

/* ============================================================
   GRAFIKUS TÍPUS / SZINT JELVÉNY (a 3D kártyapakli kártyáin)
   A felhasználó kérése: „a 3d-ben a Típus, Szint-re kell egy
   ízléses grafikus megoldás" — tehát nem sima szöveg.
   A .bal-top-chip adja a pirula alakját (a fejrészen, üvegszerűen).
   ============================================================ */

.bal-jelveny {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-left: 9px;
}

.bal-jelveny svg { flex: 0 0 auto }

/* szint: három sáv, a szintnek megfelelően töltve (1 / 2 / 3) */
.bal-szint-savok {
	display: inline-flex;
	align-items: flex-end;
	gap: 2px;
	height: 11px;
}

.bal-szint-savok i {
	display: block;
	width: 3px;
	border-radius: 2px;
	background: #ffffff59;
}

.bal-szint-savok i:nth-child(1) { height: 5px }
.bal-szint-savok i:nth-child(2) { height: 8px }
.bal-szint-savok i:nth-child(3) { height: 11px }
.bal-szint-savok i.is-feltolt { background: #fff }

/* ═══════════════════════════════════════════════════════════════════
   A /teszt-3d/ „Kezdd el ingyen" GOMBJÁNAK ANIMÁCIÓJA — átvéve 1:1
   ═══════════════════════════════════════════════════════════════════
   ⚠ A prototípus forrása (`_teszt-3d/src/globals.css` → `.btn-gradient`,
     használja: `src/components/TopBar.tsx` — jobb fent):
       background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 45%, #10b981 100%);
       background-size: 160% 160%;
       transition: background-position .5s ease, transform .2s ease, box-shadow .25s ease;
       :hover  { background-position: 90% 50%; transform: translateY(-1px);
                 box-shadow: 0 14px 32px -10px rgba(37,99,235,.5) }
       :active { transform: translateY(0) }

   ⚠ A SZÍNEK az éles márkáé maradnak (`--bal-grad`: ugyanaz a kék→cián→zöld,
     csak élénkebb) — az ANIMÁCIÓ jön át: a színátmenet VÉGIGCSÚSZIK a gombon.

   ⚠⚠ A `background` SHORTHAND visszaállítja a `background-size`-t `auto`-ra,
     ezért ez a szabály a gombok definíciója UTÁN van — különben nem lenne mit
     csúsztatni. (Ugyanaz a csapda, mint a `background-clip: text`-nél.)

   ⚠ A nyíl elmozdulását is átvettük (`group-hover:translate-x-0.5`).
   ═══════════════════════════════════════════════════════════════════ */

.button-primary,
.bal-top-join {
	background-size: 220% 220%;
	background-position: 0% 50%;
	transition: background-position .5s ease, transform .2s ease, box-shadow .25s ease;
}

.button-primary:hover,
.bal-top-join:hover {
	background-position: 100% 50%;
	box-shadow: 0 14px 32px -10px #2563eb80;
}

.button-primary:active,
.bal-top-join:active { transform: translateY(0) }

.button-primary svg { transition: transform .25s ease }
.button-primary:hover svg { transform: translateX(4px) }

@media (prefers-reduced-motion: reduce) {
	.button-primary,
	.bal-top-join { transition: none }
}

/* ═══════════════════════════════════════════════════════════════════
   A KATEGÓRIA-SZINTEK SZÍNEI (2026-10-01)
   ═══════════════════════════════════════════════════════════════════
   A felhasználó rendszere — a SZINT adja az alapszínt, a szinten belül
   a kategóriák finomabb árnyalatot kapnak:

     NARANCS = fizikai             Digitális jóllét (1), Napi rutin (2),
                                   Mikro-regeneráció (3)
     ZÖLD    = érzelmi-kapcsolati  Kommunikáció és értékesítés (1),
                                   Burnout-prevenció (2), Környezetvédelem (3)
     KÉK     = mentális            Mentális pajzs (1), Fókusz és mélymunka (2),
                                   Reziliens vezetés (3)
     LILA    = lelki               Irányvétel (1)

   ⚠ UGYANAZ a szín megy a bal oldali menü ikonjára ÉS a kártya fejrészére —
     különben a fül és a kártya két különböző színt mutatna ugyanarra a
     kategóriára.
   ⚠ Az érték a `_balance_kategoria_szin` TERM-METÁBÓL jön
     (`functions.php` → `balance_kategoria_szin()`), nem innen: új kategória
     is kap színt, az átnevezés pedig nem töri el.
   ═══════════════════════════════════════════════════════════════════ */

/* --- NARANCS: fizikai --- */
.bal-kat-tab-ikon--fiz-1, .bal-top-visual--fiz-1 { background: linear-gradient(135deg, #f59e0b, #fbbf24) }
.bal-kat-tab-ikon--fiz-2, .bal-top-visual--fiz-2 { background: linear-gradient(135deg, #f97316, #fb923c) }
.bal-kat-tab-ikon--fiz-3, .bal-top-visual--fiz-3 { background: linear-gradient(135deg, #ea580c, #f59e0b) }

/* --- ZÖLD: érzelmi-kapcsolati ---
   ⚠ Az `erz-1` és `erz-3` gradiens SZÁNDÉKOSAN fel van cserélve (mint a mentális
     csoportnál a `men-1`/`men-2`): a felhasználó a Környezetvédelemhez a teálosat,
     a Kommunikáció és értékesítéshez a smaragdzöldet kérte. A menü SORRENDJE
     viszont maradjon — ezért a csere ITT van és nem a term-metában: a meta
     cseréje a sorrendet is megfordítaná. */
.bal-kat-tab-ikon--erz-1, .bal-top-visual--erz-1 { background: linear-gradient(135deg, #0d9488, #14b8a6) }
.bal-kat-tab-ikon--erz-2, .bal-top-visual--erz-2 { background: linear-gradient(135deg, #059669, #10b981) }
.bal-kat-tab-ikon--erz-3, .bal-top-visual--erz-3 { background: linear-gradient(135deg, #10b981, #34d399) }

/* --- KÉK: mentális ---
   ⚠ A `men-1` és `men-2` gradiens SZÁNDÉKOSAN fel van cserélve: a felhasználó
     (2026-10-01) a Mentális pajzshoz a lilásat, a Fókusz és mélymunkához a kéket
     kérte. A csere AZÉRT itt van és nem a term-metában, mert a menü a szinten
     belül az árnyalat sorszáma szerint rendez — a meta cseréje a sorrendet is
     megfordítaná, azt viszont nem kérték. */
.bal-kat-tab-ikon--men-1, .bal-top-visual--men-1 { background: linear-gradient(135deg, #4f46e5, #6366f1) }
.bal-kat-tab-ikon--men-2, .bal-top-visual--men-2 { background: linear-gradient(135deg, #2563eb, #3b82f6) }
.bal-kat-tab-ikon--men-3, .bal-top-visual--men-3 { background: linear-gradient(135deg, #0284c7, #38bdf8) }

/* --- LILA: lelki --- */
.bal-kat-tab-ikon--lel-1, .bal-top-visual--lel-1 { background: linear-gradient(135deg, #7c3aed, #a855f7) }

/* --- besorolatlan (új) kategória: semleges, nem hazudik szintet --- */
.bal-kat-tab-ikon--semleges, .bal-top-visual--semleges { background: linear-gradient(135deg, #64748b, #94a3b8) }

/* ═══════════════════════════════════════════════════════════════════
   „A FEJLŐDÉS ÚTJA" — görgetős út öt napszakon át
   ═══════════════════════════════════════════════════════════════════
   A felhasználó: „művészien egyszerű és szép, kedves, egységes,
   megtervezett, stílusos és jelentőségteljes."

   ⚠ AZ ÉG NEM egy gradiens, amit átállítunk — a gradiens NEM animálható —,
     hanem ÖT EGYMÁSRA TETT RÉTEG, amiket átúsztatunk (`opacity`).
   ⚠ A SZÖVEG ÜVEGPANELEN van: a nappali égen a világos szöveg, az éjszakain
     a sötét olvashatatlan lenne. A panel minden háttéren olvasható.
   ⚠ Nincs scroll-jacking: a lap görgetését a böngésző adja, az út a SAJÁT
     görgető felülete (a `body` görgetése közben rögzítve).
   ═══════════════════════════════════════════════════════════════════ */

/* --- a nyitó gomb --- */
.bal-ut-nyito {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 11px;
	margin-top: 28px;
}

.bal-ut-gomb {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 14px 27px 14px 20px;
	border: 1px solid #ffffffeb;
	border-radius: 999px;
	cursor: pointer;
	font-size: 15px;
	font-weight: 800;
	color: #0f172a;
	background: linear-gradient(135deg, #ffffffd9, #e0f2fe8c 55%, #ede9fe80);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	backdrop-filter: blur(16px) saturate(160%);
	box-shadow: 0 18px 44px -26px #0f172a5c, inset 0 1px 0 #ffffffeb;
	transition: transform .25s cubic-bezier(.22, .61, .36, 1), box-shadow .25s ease;
}

.bal-ut-gomb:hover {
	transform: translateY(-2px);
	box-shadow: 0 28px 56px -26px #0f172a75, inset 0 1px 0 #ffffffeb;
}

.bal-ut-gomb:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 3px }

.bal-ut-gomb-ikon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 11px;
	color: #fff;
	background: linear-gradient(135deg, #4f46e5, #6366f1);
}

.bal-ut-nyito-alairas { margin: 0; font-size: 13px; color: #64748b }

/* ⚠⚠ FEHÉR CÍMKESOR ÉS GOMBSZÖVEG — a felhasználó kérése:
   „a Megálló + megálló neve sorok legyen fehér”, „a Nyisd ki gombok
   szövege is”.
   ⚠ `!important`, mert a `.bal-ut[data-bal-ut-kontraszt="vilagos"]`
   adaptív tokenek KÉSŐBB definiálódnak, és normál specificitással
   felülírná ezt a szabályt.
   ⚠ A `.bal-ut-gomb` (nyitó gomb) SZÁNDÉKOSAN kimarad: világos átmenetes
   a háttere, a fehér szöveg eltűnne rajta. */
.bal-ut-napszak,
.bal-ut-napszak-megallo,
.bal-ut-potio { color: #ffffff !important }

/* ⚠ A NYITÓ KÉPEN (1. állomás) a jobb oldali sáv címkéje rejtve —
   a felhasználó kérése: „ne legyen »ma« jelölő”. */
.bal-ut.bal-ut-elso .bal-ut-sin-cimke { opacity: 0 !important }

/* --- a felület --- */
/* ═══ A DESIGN NYELVE — a singularity.engl.design felépítése ══════════════
   A minta KÉT betűszerepet használ (Space Grotesk + Space Mono), és minden
   metaadat mono, NAGYBETŰS, szellős betűközzel. A szöveg világos, az alap sötét.

   ⚠ Ezért a panel a korábbi VILÁGOS üvegről SÖTÉTRE vált: a minta palettája
     világos kék (#dce9ff) sötét alapon, és így a napos nappali égen is
     olvasható marad — a világos panel a nappali égen mosódott.

   ⚠ A `backdrop-filter` SZÁNDÉKOSAN nincs a panelen: a `filter: blur()`-ös
     belépő animációval együtt megbízhatatlan, és drága. A sötét gradiens
     önmagában is olvasható, és a minta sem használ üveg-elmosást.
   ═══════════════════════════════════════════════════════════════════════ */
/* ── DESIGN TOKENEK — a singularity.engl.design MÉRT értékei ──────────────
   A mintából kiolvasott token-készlet (böngészőből, computed style-lal).
   A neveket a saját `--ut-` előtagunkra írtuk át, az ÉRTÉKEK azonosak.
     mért: --fs-hero clamp(46px,12.5vw,240px) · --fs-h2 clamp(38px,5.8vw,108px)
           --fs-body clamp(17px,1.3vw,21px)  · --fs-caption 11px · --fs-caption-lg 12px
           --fs-figure clamp(40px,8.5vw,140px)
           --track-hero -.04em · --track-display -.03em · --track-caption .12em
           --lh-display .92 · --lh-body 1.5 · --measure 34ch
           --ice #dce9ff · --gray #8a8f9c · --accent #6d87c7 · --neon-hot #4f7dff
           --bg #050507 · --space-edge clamp(20px,4vw,64px) · --space-kicker 20px
           --hud-safe 32px · --dur-base .42s
           --ease-out-expo cubic-bezier(.16,1,.3,1) · --z-labels 8 · --z-hud 20
   ⚠ A minta KÉT betűszerepet használ (Space Grotesk + Space Mono). Mi NEM
     telepítünk új betűtípust: a display az örökölt Inter, a mono a rendszer
     monospace-e. A RENDSZER (méret, betűköz, szerep) az, amit átveszünk.
   ──────────────────────────────────────────────────────────────────────── */
.bal-ut {
	--ut-ice: #dce9ff;
	--ut-gray: #8a8f9c;
	--ut-accent: #6d87c7;
	--ut-neon: #4f7dff;
	--ut-bg: #050507;
	--ut-szoveg: var(--ut-ice);
	--ut-halvany: var(--ut-gray);
	--ut-kiemelt: var(--ut-neon);
	/* ★ ezek váltanak világos égen (lásd [data-bal-ut-kontraszt=vilagos]) */
	--ut-cim-szin: #ffffff;
	--ut-cim-2: #dce9ff9e;
	--ut-torzs: #dce9ffd1;
	--ut-cimke-szin: var(--ut-accent);
	/* ⚠⚠ A „FUTURISZTIKUS” BETŰTÍPUS LECSERÉLVE (a felhasználó kérése).
	   A mono/keskeny betű adta a sci-fi hangulatot; mostantól a lap saját
	   sans betűje, minden `var(--ut-mono)` helyen. */
	--ut-mono: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--ut-fs-hero: clamp(34px, 5.2vw, 68px);
	--ut-fs-h2: clamp(30px, 4.4vw, 58px);
	--ut-fs-figure: clamp(40px, 8.5vw, 132px);
	--ut-fs-body: clamp(17px, 1.3vw, 20px);
	/* ⚠ NAGYOBB NAPSZAK-MEGJELÖLÉS (a felhasználó kérése): 11/12px → 15/17px */
	--ut-fs-cimke: 15px;
	--ut-fs-cimke-lg: 17px;
	--ut-track-display: -.03em;
	--ut-track-caption: .12em;
	--ut-lh-display: .95;
	--ut-lh-body: 1.5;
	--ut-measure: 34ch;
	--ut-space-kicker: 20px;
	--ut-space-edge: clamp(20px, 4vw, 64px);
	--ut-dur: .42s;
	--ut-ease: cubic-bezier(.16, 1, .3, 1);
	position: fixed;
	inset: 0;
	z-index: 120;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	scroll-behavior: smooth;
	background: #06080f;
	color: var(--ut-szoveg);
}

.bal-ut[hidden] { display: none }

/* ★ VILÁGOS ÉG → SÖTÉT SZÖVEG. A WebGL modul mért égfényességből állítja. */
.bal-ut[data-bal-ut-kontraszt="vilagos"] {
	--ut-ice: #0b1020;
	--ut-gray: #48566b;
	--ut-accent: #1d4ed8;
	--ut-neon: #1d4ed8;
	--ut-cim-szin: #0b1020;
	--ut-cim-2: #0b1020a1;
	--ut-torzs: #1e293b;
}

body.bal-ut-nyitva { overflow: hidden }

/* a 3D ég vászna — a CSS-rétegek FÖLÖTT (z-index), hogy működéskor lefedje
   őket; ha nincs WebGL, a vászon eltűnik és a rétegek adják az eget */
.bal-ut-eg-vaszon {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	display: block;
}

/* --- HUD: felső sáv (a minta felépítése) --- */
.bal-ut-fej {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 3;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 14px;
	padding: 22px 26px;
	margin: 0;
	font-family: var(--ut-mono);
	font-size: 10.5px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--ut-halvany);
	pointer-events: none;
}

.bal-ut-fej-jel, .bal-ut-fej-cimke { margin: 0 }

.bal-ut-fej-cimke {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--ut-szoveg);
}

.bal-ut-fej-szam { color: var(--ut-kiemelt) }

.bal-ut-fej-nev { transition: opacity .4s ease }
.bal-ut-fej-nev.csere { opacity: 0 }

/* a sarok-sáv FOLYAMATJELZŐJE — szám helyett (nincs „01 / 08”) */
.bal-ut-lab-sav {
	display: block;
	width: clamp(90px, 16vw, 190px);
	height: 2px;
	border-radius: 2px;
	background: #dce9ff2e;
	overflow: hidden;
}

.bal-ut-lab-tolt {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--ut-accent), var(--ut-neon));
	transition: width .18s linear;
}

/* --- alsó sarok-sáv --- */
.bal-ut-lab {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px;
	padding: 22px 26px;
	font-family: var(--ut-mono);
	font-size: 10.5px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--ut-halvany);
	pointer-events: none;
}

.bal-ut-lab-bal, .bal-ut-lab-jobb { margin: 0 }

/* --- jobb oldali fejezet-sáv (a minta `hud__scale`-je) --- */
.bal-ut-sin {
	position: fixed;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 13px;
}

.bal-ut-sin-jel {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 3px 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: var(--ut-mono);
	font-size: 9.5px;
	letter-spacing: .14em;
	color: var(--ut-halvany);
	transition: color .4s ease;
}

/* ★ A MINTÁBÓL — a függõleges sáv mellett a fejezet CÍMKÉJE.
   ⚠ Abszolút pozícióval BALRA nyúlik, nem a sorba kerül: különben a címke
   megjelenése ELTOLNÁ a vonalat (mért elrendezés-ugrás). */
.bal-ut-sin-cimke {
	position: absolute;
	right: 100%;
	top: 50%;
	margin-right: 11px;
	transform: translateY(-50%);
	font-family: var(--ut-mono);
	font-size: 9.5px;
	letter-spacing: var(--ut-track-caption);
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--ut-accent);
	opacity: 0;
	transition: opacity .45s var(--ut-ease);
}

.bal-ut-sin-jel.is-aktiv .bal-ut-sin-cimke { opacity: 1 }

.bal-ut-sin-vonal {
	display: block;
	width: 16px;
	height: 1.5px;
	background: currentColor;
	opacity: .45;
	transition: width .5s cubic-bezier(.22, .61, .36, 1), opacity .4s ease;
}

.bal-ut-sin-jel.is-aktiv { color: var(--ut-kiemelt) }
.bal-ut-sin-jel.is-aktiv .bal-ut-sin-vonal { width: 46px; opacity: 1 }
.bal-ut-sin-jel:hover { color: var(--ut-szoveg) }
.bal-ut-sin-jel:focus-visible { outline: 2px solid var(--ut-kiemelt); outline-offset: 3px }

/* --- az ég: öt réteg, átúsztatva --- */
.bal-ut-eg {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.bal-ut-eg-reteg {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0;
	transition: opacity 1.15s ease;
	background: linear-gradient(180deg, var(--eg-1) 0%, var(--eg-2) 56%, var(--eg-3) 100%);
}

.bal-ut-eg-reteg.is-lathato { opacity: 1 }

/* a nap / hold a rétegEN belül — így együtt úszik át a színnel */
.bal-ut-eg-reteg::before {
	content: "";
	position: absolute;
	left: 50%;
	width: 92px;
	height: 92px;
	margin-left: -46px;
	border-radius: 50%;
	background: radial-gradient(circle at 36% 30%, #fff, var(--hold-1, #fff) 52%, var(--hold-2, #fff));
	box-shadow: 0 0 90px 34px var(--hold-feny, #ffffff3d);
}

/* a csillagok — csak hajnalban és éjszaka látszanak */
.bal-ut-eg-reteg::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(#fff 1px, transparent 1.6px);
	background-size: 46px 46px;
	opacity: var(--csillag, 0);
}

.bal-ut-eg-reteg[data-bal-ut-reteg="hajnal"] {
	--eg-1: #16204a;
	--eg-2: #4a4a7a;
	--eg-3: #f0b39a;
	--csillag: .38;
}

.bal-ut-eg-reteg[data-bal-ut-reteg="hajnal"]::before {
	top: 62%;
	--hold-1: #ffe3c6;
	--hold-2: #ffb98a;
	--hold-feny: #ffd0a347;
}

.bal-ut-eg-reteg[data-bal-ut-reteg="reggel"] {
	--eg-1: #6aa6dd;
	--eg-2: #a8cdec;
	--eg-3: #ffe3b0;
}

.bal-ut-eg-reteg[data-bal-ut-reteg="reggel"]::before {
	top: 44%;
	--hold-1: #fff4d9;
	--hold-2: #ffd98f;
	--hold-feny: #ffe6a552;
}

.bal-ut-eg-reteg[data-bal-ut-reteg="nappal"] {
	--eg-1: #3f8fd6;
	--eg-2: #8fc3ea;
	--eg-3: #e6f3ff;
}

.bal-ut-eg-reteg[data-bal-ut-reteg="nappal"]::before {
	top: 13%;
	--hold-1: #ffffff;
	--hold-2: #eaf4ff;
	--hold-feny: #ffffff6b;
}

.bal-ut-eg-reteg[data-bal-ut-reteg="este"] {
	--eg-1: #1d2547;
	--eg-2: #6d4a6b;
	--eg-3: #f0a56e;
	--csillag: .16;
}

.bal-ut-eg-reteg[data-bal-ut-reteg="este"]::before {
	top: 58%;
	--hold-1: #ffdcb0;
	--hold-2: #ff9d5c;
	--hold-feny: #ffae6b4d;
}

.bal-ut-eg-reteg[data-bal-ut-reteg="ejszaka"] {
	--eg-1: #060b1c;
	--eg-2: #101a38;
	--eg-3: #223055;
	--csillag: .85;
}

.bal-ut-eg-reteg[data-bal-ut-reteg="ejszaka"]::before {
	top: 18%;
	width: 62px;
	height: 62px;
	margin-left: -31px;
	--hold-1: #f2f5ff;
	--hold-2: #cfd9f7;
	--hold-feny: #cfdfff3d;
}

/* finom sötétedés alul, hogy a világos panelek ne „lebegjenek" */
.bal-ut-eg-horizont {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	height: 34%;
	background: linear-gradient(180deg, #0000, #050a1a3d);
}

/* ── FEJEZET-ANATÓMIA — a singularity.engl.design mintája ────────────────
   szám · napszak · címke   →   NAGY állítás két sorra tördelve   →
   törzs   →   mono lábjegyzet   →   kérdés   →   bájital
   ────────────────────────────────────────────────────────────────────── */
/* ═══ 3D SZÍNPAD — AZ ÜZENETEK AZ ÚTTAL JÖNNEK ELŐ ═══════════════════════
   A felhasználó kérése: „az üzenetek az úttal jönnek elő, nőnek meg 3D-ben,
   nem függőleges 2D görgetés kell nekik”.
   Ezért a színpad RÖGZÍTETT, és a JS adja mindegyik panel perspektivikus
   helyét (`--x`, `--y`), méretét (`--s`) és áttetszőségét (`--o`). A görgetés
   hosszát külön szinter adja (`.bal-ut-szinter`), a záró döntés pedig utána
   folyásban áll.
   ⚠ A transform SORRENDJE számít: jobbról balra hajtódik végre, ezért a
     `scale` fut le először (a `transform-origin: 50% 100%` = a panel
     alsó-középpontja), aztán az eltolás, végül a középre igazítás. */
/* ⚠⚠ A SZÍNPAD `sticky`, NEM `fixed` — EZ VOLT A „MEGÁLL” HIBA.
   Mért hiba: `position: fixed`-nél a panel fölött a görgőkerék a VIEWPORTOT
   görgetné (a fix elem saját görgetési környezetet nyit), a `body` viszont
   `overflow: hidden` — ezért a kerék **nulla** elmozdulást adott, és az út
   megállt, amikor az egér a panel fölé ért.
   A `sticky` az áramlásban marad, ezért a görgetési környezet továbbra is a
   `.bal-ut` — a kerék rendesen görget.
   ⚠ A `margin-bottom: -100vh` azért kell, hogy a színpad ne vigyen el
     100vh-nyi helyet a szinter elöl (különben a lap magassága is változna). */
.bal-ut-folyam {
	position: sticky;
	top: 0;
	height: 100vh;
	margin-bottom: -100vh;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

.bal-ut-allomasok { list-style: none; margin: 0; padding: 0 }

.bal-ut-allomas {
	position: absolute;
	left: 50%;
	top: 0;
	width: min(660px, calc(100vw - 48px));
	margin: 0;
	/* ⚠ `50% 100%` (alul) volt: a növekedés FELFELÉ tolta a panelt, ezért
	   tűnt úgy, hogy LENTRŐL jön. Középre téve szimmetrikusan nő, és a
	   `--y` viszi a horizonttól az útig. */
	transform-origin: 50% 50%;
	/* ★★★ PERSPEKTÍVÁBAN FORDUL A KANYARRAL (a felhasználó kérése; a minta
	   mechanizmusa: ott a szöveg VALÓDI 3D mesh a világban, ezért a kamerához
	   képest fordul, amikor az út kanyarodik).
	   ⚠ A korábbi `--ry` az ABSZOLÚT út-érintőből jött, ezért rövid távolságon
	   belül ±37°-ot billegt — AZÉRT lett törölve. A mostani a RELATÍV yaw
	   (`szog(sPan) − szog(sKam)`), ami fokokban kicsi és folyamatos: nem billeg,
	   hanem a kanyarral fordul.
	   ⚠ A `perspective()` a `rotateY` ELŐTT van — különben nincs térmélység. */
	/* ⚠⚠ A `scale(var(--s))` INNEN a BELSŐ rétegre került (lásd
	   `.bal-ut-allomas > .bal-ut-belso`) — a betűk élessége miatt. */
	transform: translate(-50%, -50%) translate3d(var(--x, 0px), var(--y, 0px), 0) perspective(1400px) rotateY(var(--ry, 0deg));
	opacity: var(--o, 0);
	will-change: transform, opacity;
	pointer-events: none;
}

/* csak az olvasási távolságban lévő panel fogad kattintást */
.bal-ut-allomas.is-aktiv { pointer-events: auto }

/* ══════════════════════════════════════════════════════════════════════════
   ★★★ FELÜLÍRÁS (2026-10-02): A „<li>” MÁR CSAK A HELY — a NÉV és a TÁBLA
   KÜLÖN VETÍTETT RÉTEG. A felhasználó kérése: „azonos útmennyiségnek
   (görgetésnek) kéne következni az 1. állomás név és az 1. állomás szöveg
   között… egységes ritmus kell majd: görgess > név > szöveg > név > szöveg.
   Azonos ritmusban, távolról kicsiből nagyítva.”
   ⚠ EZÉRT a fenti `.bal-ut-allomas` transformja ÉRVÉNYTELEN: helyette az alábbi
   szabályok élnek. A két réteg UGYANAZT a vetítést kapja a JS-től
   (`--x/--y/--ry/--o`, a méretet a `--s`), ezért a név és a tábla külön
   szakaszon ül — a sorrend így SZERKEZETI, nem két óra versenye.
   ⚠ A MÉRÉSI TANULSÁG MEGMARAD: a `scale()` 3D-kontextusban ELMOSSA a szöveget,
   ezért a nagyítás a BELSŐ rétegen van (`.bal-ut-tabla > .bal-ut-belso`). */
.bal-ut-allomas {
	position: absolute;
	inset: 0;
	width: auto;
	margin: 0;
	transform: none;
	opacity: 1;
	pointer-events: none;
}

/* a KÉT vetített réteg */
.bal-ut-nev,
.bal-ut-tabla {
	position: absolute;
	left: 50%;
	top: 0;
	width: min(660px, calc(100vw - 48px));
	transform-origin: 50% 50%;
	transform: translate(-50%, -50%) translate3d(var(--x, 0px), var(--y, 0px), 0) perspective(1400px) rotateY(var(--ry, 0deg));
	opacity: var(--o, 0);
	will-change: transform, opacity;
}

.bal-ut-allomas.is-aktiv > .bal-ut-tabla { pointer-events: auto }

/* ═══ ★★★ A NÉV (a saját szakasza) ═════════════════════════════════════════
   A DOM-szöveg az ÉLŐ úton NEM látszik: a mintás pötty-effektet a
   `balance-ut-nev.js` rajzolja a `.bal-ut-nev-vaszon`-ra. A DOM-szöveg
   SZÁNDÉKOSAN megmarad — ez az akadálymentes tartalom és a tartalék.
   ⚠ A nagyság itt CSAK a tartalékhoz kell: az éles méretet a vászon adja. */
.bal-ut-nev {
	width: min(1100px, calc(100vw - 40px));
	margin: 0;
	text-align: center;
	font-size: clamp(34px, 6.4vw, 96px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ut-cim-szin);
	/* ★★★ A CÍM SZÍNÁTMENETE — a VÁSZONRA rajzolva (`balance-ut-nev.js`,
	   `source-in`). A felhasználó kérése (2026-10-07): „világos kékeszöld
	   átmenetes, esztétikus a cím, ne fekete”. ⚠ A világos él a hullám
	   felől érkezik (jobb kanyarnál a jobb-felső sarok), ezért a sorrend
	   1 → 3: VILÁGOS → mély. Ugyanaz a kékeszöld család, mint a gomboké
	   (`--ut-gomb-1/2/3`), hogy a lap egynek látsszon. */
	--nev-szin-1: #8af0dd;
	--nev-szin-2: #1cc8b4;
	--nev-szin-3: #0a6b85;
	pointer-events: none;
}

.bal-ut-tabla > .bal-ut-belso {
	transform: scale(var(--s, 1));
	transform-origin: 50% 50%;
}

/* ⚠ Ha a pötty-vászon ÉL, a DOM-név rejtve marad: `opacity: 0` — így a
   képernyőolvasó továbbra is felolvassa (nem `display: none`). */
.bal-ut.bal-ut-nev-on .bal-ut-nev { opacity: 0 }

/* ★★★ A NÉV VÁSZONA — a KÉPERNYŐ KÖZEPÉN áll (a minta szava is ott áll: a mesh
   a kamerán ül, `depthTest: false`, ezért MINDEN fölött van).
   ⚠ A méretet a JS adja (`width`/`height` képpontban) — a vászon a SZÓHOZ
   méreteződik, nem a viewporthoz. */
.bal-ut-nev-vaszon {
	position: absolute;
	/* ⚠ `inset: 0` + `margin: auto` — a méretet a JS adja, ezért ez PONTOSAN
	   középre teszi (a folyam maga a viewport). A `left: 50%` + `translate(-50%)`
	   mért hibát adott: a vászon 280 px-rel jobbra került. */
	inset: 0;
	margin: auto;
	z-index: 300;
	pointer-events: none;
}

.bal-ut-szinter { width: 100% }

/* ★ A FÁTYOL TÖRÖLVE — a felhasználó kérése: „a szöveg mögötti homályos foltot
   töröld”. A korábbi elmosott radiális folt helyett a SZÖVEG SZÍNE igazodik az
   éghez (`data-bal-ut-kontraszt`, a WebGL modul állítja): világos égen sötét,
   sötét égen fehér — így folt nélkül is olvasható. */
.bal-ut-belso {
	position: relative;
	width: min(660px, 100%);
	padding: 44px 42px 40px;
}

/* ═══ ★★★ A NAGYÍTÁS A BELSŐ RÉTEGEN — A BETŰK ÉLESSÉGE ══════════════════
   A felhasználó észrevétele: „az úton a betűk akkor is élesek maradjanak,
   ha már közel vannak” (a közelben a szöveg elmosódott volt).

   ⚠⚠ MÉRT OK (élő, azonos kivágáson, élesség = Laplace-variancia / erős élek):
     A) nagyítás a KÜLSŐ elemen, 3D-vel (eredeti):  277 / 513
     F) `perspective()` nélkül:                    581 / 1665
     C) semmilyen 3D:                              687 / 2363
     E) nagyítás a BELSŐ elemen (ez a megoldás):    633 / 1910
   A `scale()` a `perspective()`+`rotateY()` MELLETT 3D-s raszterréteget
   kényszerít: a böngésző a LAYOUT méretén raszterizál, majd a kompozitor
   NAGYÍTJA — ezért mosódik el a szöveg. A belső elemen a nagyítás már a
   festés előtt érvényesül, ezért a szöveg a TÉNYLEGES méretén raszterizálódik.

   ⚠ A HELY ÉS A FORGATÁS VÁLTOZATLAN: a külső elem továbbra is fordít
   (`rotateY(--ry)`) és helyez (`--x`/`--y`), csak a nagyítást nem ő végzi.
   Mérve: a külső és a belső befoglaló téglalap (155 / 1151) PONTOSAN ugyanaz,
   mint amikor a nagyítás a külsőn volt — nincs elcsúszás.
   ⚠ SZÁNDÉKOSAN NINCS rajta `will-change: transform`: az visszahozná a
   gyorsítótárazott (kicsi) rasztert, azaz a mosódást (mérve: 179 / 218,
   azaz a `will-change` önmagában NEM javít).
   ⚠ CSAK a panel belső rétege: a záró blokk (`.bal-ut-zaras`) a SAJÁT
   elemén nagyít (`0.5 → 1`, azaz sosem nagyít fel), és nem `.bal-ut-allomas`
   alatt van, ezért érintetlen. */
.bal-ut-allomas > .bal-ut-belso {
	transform: scale(var(--s, 1));
	transform-origin: 50% 50%;
}

/* a MEGÁLLÓ fészke: nincs külön fátyol (a folt törölve) — helyette a
   címke-pirula jelzi a típust */

/* ★ A SZÖVEG SZÍNE AZ ÉGHEZ IGAZODIK.
   A WebGL modul a panel helyén mért égfényességből állítja a
   `data-bal-ut-kontraszt` attribútumot; a tokenek itt váltanak.
   ⚠ Ezért a szövegek NEM fix színt kapnak, hanem tokent. */

/* ═══ ÚTTÁBLÁK — a robinpayot.com „szöveges útjelző táblái” ═══════════════
   A minta: a talajon kanyargó pontsor fölött egy PONT, abból SZÁR emelkedik,
   és a szár végén áll a szöveg. A táblák a görgetéssel vonulnak el — ez adja
   a képben az előrehaladást.
   ⚠ A szöveg DOM-ban van, NEM WebGL-ben: a shader-szöveg drága és mosódna,
     a DOM-szöveg éles és akadálymentes.
   ⚠ A pontos helyet a JS adja `transform: translate3d(...)`-dal, ezért itt
     `left: 0; top: 0` áll. */
.bal-ut-jelzesek {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	overflow: hidden;
}

.bal-ut-jelzes {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: var(--ut-mono);
	font-size: 9.5px;
	line-height: 1.2;
	letter-spacing: var(--ut-track-caption);
	text-transform: uppercase;
	color: var(--ut-gray);
	white-space: nowrap;
	opacity: 0;
	will-change: transform, opacity;
}

.bal-ut-jelzes-szoveg {
	display: block;
	margin-bottom: 5px;
	white-space: nowrap;
}

/* a szár + a végén a pont — a talajra mutat */
.bal-ut-jelzes-szarv {
	position: relative;
	display: block;
	width: 1px;
	height: 44px;
	background: linear-gradient(180deg, currentColor, #0000);
}

.bal-ut-jelzes-szarv::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -2px;
	width: 5px;
	height: 5px;
	margin-left: -2.5px;
	border-radius: 50%;
	background: currentColor;
}

.bal-ut-jelzes.is-aktiv { color: var(--ut-neon) }
.bal-ut-jelzes.is-aktiv .bal-ut-jelzes-szoveg { color: var(--ut-szoveg) }

/* a belépő átmenet: a panel a színpadon érkezik, ezért itt CSAK az BELSŐ
   elemek jelennek meg (sor-maszk + betűk), amikor ez a fejezet az aktív */
.bal-ut-allomas.is-aktiv .bal-ut-sor { transform: none }
.bal-ut-allomas.is-aktiv .bal-ut-betu { transform: none; opacity: 1 }

/* ★ A MINTÁBÓL — EGY közös címke-szabály a kicker-re és a caption-re.
   mért: mono, 12px, `letter-spacing: .12em`, NAGYBETŰS, `--gray`, 400. */
.bal-ut-napszak,
.bal-ut-felirat {
	font-family: var(--ut-mono);
	font-size: var(--ut-fs-cimke-lg);
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: var(--ut-track-caption);
	text-transform: uppercase;
	color: var(--ut-gray);
}

.bal-ut-napszak {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin: 0 0 22px;
}

/* ⚠ SZÁMOZÁS NINCS (a felhasználó kérése) — a címke NAPSZAK · CÍMKE, és a
   megálló külön pirulát kap, hogy megkülönböztethető legyen. */
.bal-ut-napszak-megallo {
	margin-right: 12px;
	padding: 3px 9px;
	border: 1px solid #4f7dff59;
	border-radius: 999px;
	font-size: 9.5px;
	letter-spacing: .16em;
	color: var(--ut-neon);
}

/* ★★★ A SOR VÁGJA A BETŰKET — a mintából (`.split-text { overflow: hidden }`).
   A betűk a sor ALÓL emelkednek elő, ezért a sornak vágnia kell.
   ⚠ A negatív margó + azonos padding azért kell, hogy a MÁR A HELÉN ÜLŐ betűk
   ékezete/szára ne csípődjön le (ugyanaz a trükk, mint a `.bal-ut-sor-maszk`-nál). */
.bal-ut-betu-sor {
	display: inline-block;
	overflow: clip;
	margin: -.24em -.06em -.3em;
	padding: .24em .06em .3em;
}
.bal-ut-betu-szo { display: inline-block; white-space: nowrap }

/* ⚠⚠ A BETŰNKÉNTI LÉPCSŐZÉS KIKAPCSOLVA. A felhasználó mérése:
   „a címek ne [külön] emelkedjenek elő, hanem végig legyenek együtt a
   szöveggel” — vagyis a panel EGY egységként jelenjen meg, a cím és a
   törzs együtt. A láthatóságot már a panel saját `--o` értéke vezérli,
   ezért itt nincs külön animáció (a PHP továbbra is betűnként bontja).
   ⚠ 2026-10-02: a minta betű-animációjának PRÓBÁJA (`.bal-ut-cim .bal-ut-betu`)
   VISSZAVONVA — kiderült, hogy a betűk saját `transform`-ja külön raszttert
   kényszerített, és a panel (a törzs-szöveggel együtt) ÚJRA ELMOSÓDOTT, amikor
   nagy lett ✗ (a felhasználó észrevétele). Az éles szövegek visszaálltak. */
.bal-ut-betu {
	display: inline-block;
}

/* ═══ ★★★ A MINTA NAGYBETŰS BETŰ-ANIMÁCIÓJA (robinpayot.com, MÉRVE) ════════
   A felhasználó kérése: „be kéne hozni a mintaoldal nagybetűs animált szavait,
   változatlan formában”.

   ⚠⚠ HOVA KERÜL: a NAGY SZAVAKRA — vagyis az állomás-címre (`.bal-ut-cim`).
   A felhasználó pontosítása: „a mintaoldalon az úton Lab, About, Projects szavak
   jelennek meg. Ezekre gondoltam” — a mi útunkon ezek megfelelője a nagy cím
   („Nem a munka fáraszt el igazán”).
   ⚠ A mintában azok a szavak **WebGL-vászonban** vannak (3D mesh-szöveg, a DOM-ban
   csak egy `canvas.scene__canvas` található — mérve) — az nem hozható át szó
   szerint. A FORMÁT viszont a minta SAJÁT, DOM-os betű-animációja adja (a fejléc
   `R O B I N P A Y O T` mérése), és az átvihető könyvtár nélkül.
   ⚠ A kis NAGYBETŰS címkékről (`.bal-ut-napszak`, `.bal-ut-felirat`) ez VISSZA
   van véve: a mintában azok csak elhalványulnak (mért: `opacity .2s linear`).
   ⚠ A NAGY CÍMEK korábbi kérése („ne emelkedjenek elő külön”) ezzel a
   felhasználó új kérésére MÓDOSUL — egy szóval visszavehető.

   A minta MÉRT értékei (élő, 2026-10-02, szó szerint átvéve):
     transform: rotate(25deg) translateY(100%) scale(0.5);
     transform-origin: left center;  backface-visibility: hidden;  opacity: 0;
     transition: transform 1s cubic-bezier(0.22, 1.4, 0.36, 1), opacity .5s linear;
     ütemezés: betűnként 0,02 s  →  transition-delay: calc(var(--i) * .02s)
   ⚠ A minta a betű sorszámát `:nth-child`-dal adta (11 külön szabály); nálunk a
   bontó PHP MÁR kiírja a `--i`-t a betűre (szavankénti `nowrap` burkoló van
   közte, ezért az `:nth-child` ott újraindulna ✗) — ez PONTOSAN ugyanaz az
   ütemezés, csak egy szabállyal.
   ⚠ A minta `Roadgeek` betűjét NEM visszük át (licenc) — a forma igen. */
/* ⚠⚠ `body.bal-ut-nyitva` KAPCSOLÓ: a `body`-ra a JS `nyit()`-je teszi, amikor az
   út kinyílik — így a rejtett alapállapot CSAK az úton belül érvényes. Ha a JS
   nem fut le, a címek LÁTHATÓAK maradnak (nem maradhat üres panel).
   ⚠ A minta szavai BE és KI is animálnak (a felhasználó pontosítása: „megjelenik
   animálva és el is tűnik animálva”): a JS az `is-aktiv`-ot a panel `--o`
   értékéből ODA-VISSZA váltja — belépéskor rápattan (a betűk felemelkednek),
   elmenetkor lekerül (a betűk visszabillennek); a transition mindkét irányban
   ugyanaz. */
body.bal-ut-nyitva .bal-ut-cim .bal-ut-betu {
	display: inline-block;
	transform: rotate(25deg) translateY(100%) scale(0.5);
	transform-origin: left center;
	backface-visibility: hidden;
	opacity: 0;
	transition: transform 1s cubic-bezier(0.22, 1.4, 0.36, 1), opacity 0.5s linear;
	transition-delay: calc(var(--i, 0) * 0.02s);
}

/* a kiváltó: a panel `is-aktiv`-vá válik, amikor a JS szerint látszik (--o > 0.01) */
body.bal-ut-nyitva .bal-ut-allomas.is-aktiv .bal-ut-cim .bal-ut-betu {
	transform: none;
	opacity: 1;
}

/* ⚠⚠ 2026-10-02: a „KÉTFÁZISÚ ÁLLOMÁS” próba (a `--on`/`--ob` fázis-opacityk)
   TÖRÖLVE. A felhasználó mérése szerint a sorrend NEM volt garantált: a nevet
   a görgetés-arány, a táblát a 3D láthatóság kapuzta — két külön óra. Az új
   modellben a név és a tábla KÜLÖN VETÍTÉSI SZAKASZON ül, ezért a sorrend
   szerkezetileg adott (a tábla ablaka pontosan a név ablaka UTÁN kezdődik). */

/* ══════════════════════════════════════════════════════════════════════
   ★★★ A NÉV ANIMÁCIÓJA — ÁTKÖLTÖZÖTT a `balance-ut-nev.js`-be (2026-10-02).
   A minta `SectionTitles/SectionTitle.js`-éből:
   (robinpayot.com, forrástérképből KIOLVASVA, 2026-10-02).
   A minta ott bmfont-MSDF szöveg a WebGL-ben, a mozgás a vertex shaderben:
   * betűnként késleltetett FELFELÉ csúszás: `offsetY = max(INIT_Y * (1 - uProgressY/letter), 0)`
     (INIT_Y = 18 egység, `letter` = a betű sorszáma / összes betű) ✔
   * a SZÓ −7,5°-ról 0°-ra billen: `angleToVec2(-7.5 * (1 - uProgressY))` ✔
   * GSAP idővonal: `uProgressY` 0→1 **1,2 s `quart.out`**, `uProgress` 0→1 **2,3 s**,
     **1,5 s tartás**, majd `uReverse` — vagyis FORDÍTVA tűnik el ✔
   DOM-ban ugyanez: a konténer billen (rotate(−7,5°) → 0), a betűk pedig
   betűnként késleltetve emelkednek fel; kimenetkor minden visszafordul (a
   transition mindkét irányban ugyanaz).
   ⚠ `quart.out` = `cubic-bezier(0.165, 0.84, 0.44, 1)` (GSAP Power4.easeOut). */
/* ⚠⚠ A DOM-os név-billenés és betű-emelkedés TÖRÖLVE (2026-10-02).
   Az effekt a `.bal-ut-nev-vaszon`-on él (`balance-ut-nev.js`). */
body.bal-ut-nyitva .bal-ut-allomasok > .bal-ut-allomas:first-child .bal-ut-napszak { transform: none }

body.bal-ut-nyitva .bal-ut-allomasok > .bal-ut-allomas:first-child.nev-fazis .bal-ut-napszak { transform: none }

/* a sor VÁG (a betűk alulról emelkednek elő); a padding a billenés és az
   ékezetek levágása ellen */
body.bal-ut-nyitva .bal-ut-allomasok > .bal-ut-allomas:first-child .bal-ut-napszak .bal-ut-betu-sor {
	overflow: clip;
	margin: -.32em -.08em -.3em;
	padding: .32em .08em .3em;
}

body.bal-ut-nyitva .bal-ut-allomasok > .bal-ut-allomas:first-child .bal-ut-napszak .bal-ut-betu {
	display: inline-block;
	transform: translateY(115%);
	transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition-delay: calc(var(--i, 0) * 0.06s);
}

body.bal-ut-nyitva .bal-ut-allomasok > .bal-ut-allomas:first-child.nev-fazis .bal-ut-napszak .bal-ut-betu { transform: none }

/* ═══ ★★★ A NÉV-FÁZIS: ÓRIÁS, KÖZÉPEN, PÖTTYÖSEN (2026-10-02) ═══════════
   A felhasználó kérése: „a hajnal ma felirat … középen óriásfeliratként
   animálva megjelenjen, hasonló pöttyös módon, mint a start gomb megnyomása után”.
   A mintában (robinpayot.com) az úti szavak (PROJECTS / LAB / ABOUT) a
   fragment shader `circle()` függvényével fedődnek fel — PONTOSAN ugyanazzal a
   pötty-ráccsal, mint a Start utáni átmenet (`uProgress` 0→1). Nálunk ez WebGL
   helyett CSS-maszk:
     1. réteg = a korong, ami a középpontból nő (`--nev-r` 0 → 78%, a JS hajtja)
     2. réteg = a pöttyrács (`radial-gradient` ismételve 7 px-enként)
   A kettő METSZETE (`mask-composite: intersect`) = a pöttyökben növekvő szó ✔.
   ⚠ A `position: absolute; inset: 0` + `place-items: center` teszi KÖZÉPRE
   (a panel maga középen áll), a méret pedig a minta óriás-szava. */
/* ⚠⚠ 2026-10-02: AZ ELŐZŐ KOMMENTBEN LEÍRT CSS-MASZK MEGSZŰNT. A `nev-fazis`
   osztály és a `--nev-r`-es maszk TÖRÖLVE. A név effektjét a `.bal-ut-nev-vaszon`
   adja (`balance-ut-nev.js`): ott a pöttyök SUGARA nő (nem egy fix 7 px-es
   raszter mögül nő egy korong), ezért a szó a végén TELE lesz — és ugyanaz a
   rács záródik vissza. */

/* ★ SOR-MASZK — a maszk megmarad (a túlnyúló ékezetek levágása ellen),
   de a FELFELÉ CSÚSZÁS KIKAPCSOLVA. A felhasználó mérése:
   „a címek ne emelkedjenek elő, hanem végig legyenek együtt a szöveggel”.
   A negatív margó + azonos padding azért kell, hogy a betűk túlnyúló része
   (ékezet, szárak) ne vágódjon le. */
.bal-ut-sor-maszk {
	display: block;
	overflow: clip;
	margin: -.2em -.06em -.3em;
	padding: .2em .06em .3em;
}

.bal-ut-sor {
	display: block;
}

/* a NAGY állítás — szűk betűköz, két sorra tördelve (a minta display tipója) */
.bal-ut-cim {
	margin: 0;
	font-family: inherit;
	font-size: var(--ut-fs-h2);
	font-weight: 700;
	line-height: var(--ut-lh-display);
	letter-spacing: var(--ut-track-display);
	color: var(--ut-cim-szin);
}

.bal-ut-sor-2 { color: var(--ut-cim-2) }

.bal-ut-allitas {
	margin: 26px 0 0;
	max-width: var(--ut-measure);
	font-size: var(--ut-fs-body);
	line-height: var(--ut-lh-body);
	color: var(--ut-torzs);
}

/* mono lábjegyzet — a mintában itt áll a forrás/definíció */
.bal-ut-felirat {
	margin: 22px 0 0;
	max-width: 54ch;
	line-height: 1.75;
	letter-spacing: .1em;
}

.bal-ut-kerdes {
	margin: 30px 0 0;
	padding-left: 19px;
	border-left: 2px solid var(--ut-kiemelt);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -.012em;
	color: var(--ut-cim-szin);
}

.bal-ut-potio {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 30px;
	padding: 11px 19px 11px 12px;
	border-radius: 999px;
	border: 1px solid #4f7dff59;
	font-family: var(--ut-mono);
	font-size: 11px;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--ut-szoveg);
	text-decoration: none;
	background: #4f7dff1f;
	transition: transform .22s, background .25s, border-color .25s;
}

.bal-ut-potio:hover {
	transform: translateY(-2px);
	background: #4f7dff33;
	border-color: #4f7dff99;
}

.bal-ut-potio-ikon {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	color: #fff;
	background: linear-gradient(135deg, #4f7dff, #7c9dff);
}

/* ★ A MINTÁBÓL — a FIX MARKER-CÍMKE (`.marker-label`) stílusát átvettük, de a
   mi felületünkön a fix alsó marker FELESLEGES volt (ugyanazt mondta, mint a
   HUD középső címkéje, és a panel aljára lógott). A helyére a jobb oldali sáv
   aktív jelére került a fejezet címkéje (`.bal-ut-sin-cimke`). */

/* --- a záró döntési pont --- */
.bal-ut-zaras {
	min-height: 100vh;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 30px;
	padding: 62px 22px;
	text-align: center;
}

.bal-ut-zaro-kerdes {
	margin: 0;
	max-width: 14em;
	font-size: clamp(34px, 5.2vw, 68px);
	font-weight: 700;
	letter-spacing: -.038em;
	line-height: 1.04;
	color: var(--ut-cim-szin);
}

.bal-ut-zaro-gombok {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.bal-ut-zaro-nem {
	padding: 15px 24px;
	border-radius: 999px;
	border: 1px solid #dce9ff38;
	cursor: pointer;
	font-family: var(--ut-mono);
	font-size: 11px;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--ut-szoveg);
	background: #dce9ff14;
	transition: background .2s, border-color .2s;
}

.bal-ut-zaro-nem:hover { background: #dce9ff26; border-color: #dce9ff70 }
.bal-ut-zaro-nem:focus-visible { outline: 2px solid #fff; outline-offset: 2px }

.bal-ut-tovabb {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
	font-family: var(--ut-mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ut-szoveg);
	text-decoration: none;
	opacity: .82;
	transition: opacity .2s;
}

.bal-ut-tovabb:hover { opacity: 1 }
.bal-ut-tovabb-szoveg {
	/* ⚠⚠ CÍM NAGYSÁGÚ ZÁRÓ MONDAT (a felhasználó kérése). A `.bal-ut-tovabb`
	   mono/uppercase örökségét vissza kell állítani, különben a mondat
	   kicsi és csupa nagybetűs marad. */
	max-width: 20ch;
	font-family: inherit;
	font-size: var(--ut-fs-h2);
	font-weight: 700;
	line-height: var(--ut-lh-display);
	letter-spacing: var(--ut-track-display);
	text-transform: none;
	color: var(--ut-cim-szin);
}

/* ⚠⚠ NAGY KÖR ALAKÚ GOMB, KÉT SORBAN (a felhasználó kérése).
   A Tutor `.button-primary`-ját felül kell írni méretben és alakban. */
.bal-ut-zaro-gombok a.button-primary {
	display: grid;
	place-items: center;
	width: 230px;
	height: 230px;
	/* ★★ 16 px gyűrű, BEFELÉ vastagodva — a gomb mérete NEM változik
	   (`closest-side` + `100% - 16px`: a lyuk sugara 115 − 16 = 99 px).
	   ⚠ A `padding: 0 58px` szándékos: ettől a felirat KÉT SORBA tördelődik
	   („Fejlődni” / „akarok”), a kör mérete változatlan. */
	padding: 0 58px;
	border-radius: 50%;
	text-align: center;
	/* ⚠ +30% (a felhasználó kérése): 21 px -> 27.3 px */
	font-size: 27.3px;
	line-height: 1.15;
	font-weight: 800;
	text-decoration: none;
	/* ⚠⚠ NEM ZÖLDESKÉK (a felhasználó kérése): a Tutor `.button-primary`
	   színét felülírjuk — FEHÉR GYŰRŰ 50% opacity, a belső kör fehér 20%,
	   a szöveg fehér. */
	/* ⚠⚠ A BELSŐ KÖR A KORÁBBI FEHÉR (a felhasználó kérése).
	   Az én hibám volt: a kétrétegű háttérnél a színátmenet ÁTLÁTSZOTT a
	   belső körön (a 20% fehér nem fedi el), ezért az EGÉSZ kör zöldes lett.
	   Most a gyűrű KÜLÖN RÉTEGEN van (`::after` + `mask`), a belső kör
	   érintetlen. */
	position: relative;
	border: 0 !important;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.2) !important;
	background-image: none !important;
	color: #ffffff !important;
	box-shadow: none !important;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

/* ★★★ A GYŰRŰN KÖRBE-KÖRBE MENŐ, VILÁGOSABB-ÉLÉNKEBB ZÖLD FÉNY
   (a felhasználó kérése: „menjen körbe-körbe jobbra, világosabb-élénkebb
   zöld fény átmenettel, mint egy »kérjük várjon« idõjelzõ”).
   A fény egy `conic-gradient` a gyűrűn, amit a `--bal-szog` forgat —
   a NÖVEKVŐ szög az óramutató járása, azaz JOBBRA fordul.
   ⚠ Az `@property` azért kell, hogy a szög FOLYAMATOSAN interpolálódjon;
   ahol nincs ilyen támogatás, ott a gyűrű áll — a statikus szín megmarad. */
@property --bal-szog {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

@keyframes bal-gyuru-feny {
	to { --bal-szog: 360deg; }
}

/* ★★★ CÉLKERESZT A ZÁRÓ GOMB BELSEJÉBEN (a felhasználó kérése: „az út végén a
   fejlődni akarok gomb belső részén legyen egy halvány szürke célkereszt (a kört
   metsző függőleges és vízszintes vonal), ami nem ér el a szövegig, hanem 4 mm-re
   megáll rajta kívül”).
   ⚠ CSAK a záró gombon: a szelektor `.bal-ut-zaras` alá szűkít, a főoldali
   „Start” (`.bal-ut-nyito` alatt) NEM kapja meg.
   ⚠ A vonal NÉGY SZAKASZBÓL áll (fent, lent, balra, jobbra): a középen így
   SEMMI nem kerül a szöveg mögé — a gomb belseje áttetszı üveg
   (`rgba(255,255,255,0.2)` + `backdrop-filter`), ezért a vonalat nem lehetne
   utólag „kitakarni” a szöveg alatt.
   ⚠ MÉRT geometria (2026-10-02, élı): a gomb 230×230 px, a felirat doboza
   114×63 px, a bal-felsı sarka 58 / 84 px-nél, a középpont 115 / 115. A 4 mm
   15,11 px-nek felel meg (1 mm = 3,7795 px) — ezért a szakaszok hossza:
     vízszintes: 115 − 57 − 4mm = 42,9 px      (balra és jobbra is)
     függıleges: 115 − 31,5 − 4mm = 68,4 px    (fentre és lentre is)
   ⚠ Ha a felirat betőmérete vagy szövege változik, ezt újra kell mérni. */
.bal-ut-zaras .bal-ut-zaro-gombok a.button-primary::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	/* halvány szürke (a felhasználó kérése) — a fehér üvegen is látszik */
	--bal-kereszt: rgba(94, 116, 143, 0.42);
	--bal-kereszt-res: 4mm;
	--bal-kereszt-vizsz: calc(50% - 57px - var(--bal-kereszt-res));
	--bal-kereszt-fugg: calc(50% - 31.5px - var(--bal-kereszt-res));
	/* ★★★ KÉTSZER VASTAGABB VONAL (a felhasználó kérése: „nagyon kicsit legyen
	   vastagabb vonal, ha most pl. 0,25 px, legyen 0,5 (x2)”).
	   ⚠ Az 1 px-es vonal a `50%` pozíción FÉL PIXELRE esett, ezért a böngésző
	   KÉT félárnyalatú pixelre bontotta — ezért tűnt 0,25 px-nek. A 2 px már
	   egész pixelhatárokra esik: éles, és pont a duplája. */
	background-image:
		linear-gradient(var(--bal-kereszt), var(--bal-kereszt)),
		linear-gradient(var(--bal-kereszt), var(--bal-kereszt)),
		linear-gradient(var(--bal-kereszt), var(--bal-kereszt)),
		linear-gradient(var(--bal-kereszt), var(--bal-kereszt));
	background-size:
		2px var(--bal-kereszt-fugg),
		2px var(--bal-kereszt-fugg),
		var(--bal-kereszt-vizsz) 2px,
		var(--bal-kereszt-vizsz) 2px;
	background-position: 50% 0, 50% 100%, 0 50%, 100% 50%;
	background-repeat: no-repeat;
	/* ★★★ A CÉLKERESZT A GYŰRŰBEN NEM LÁTSZIK (a felhasználó kérése).
	   A külső gyűrű a sugár 102–115 px-es sávjában van (lásd a gyűrű maszkját),
	   ezért a célkeresztet a BELSŐ KORONGRA vágjuk: 96 px-ig teljesen látszik,
	   ​100 px-nél már eltűnt — így 2 px rést hagy a gyűrű előtt.
	   ⚠ A maszk a vonalak VÉGÉT is az ívhez igazítja (lekerekíti), ami
	   célkeresztnél épp kívánatos. */
	-webkit-mask: radial-gradient(circle closest-side,
		#000 calc(100% - 19px),
		rgba(0, 0, 0, 0) calc(100% - 15px));
	mask: radial-gradient(circle closest-side,
		#000 calc(100% - 19px),
		rgba(0, 0, 0, 0) calc(100% - 15px));
}

/* ★★ A GYŰRŰ: **16 px**, befelé vastagodva, 60% opacity, KÉK-ZÖLD ÁTMENET.
   A `border` nem tud színátmenetet, a `mask` viszont kivágja a közepét,
   így a színátmenet CSAK a gyűrűben látszik, a belső kör tiszta fehér. */
.bal-ut-zaro-gombok a.button-primary::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	/* ★★★ KÉT RÉTEG: a FORGÓ élénk-zöld fény a statikus gyűrű-színátmenet
	   FÖLÖTT. Mindkettőt a `mask` vágja a 16 px-es gyűrűre, ezért a fény
	   tényleg a GYŰRŰN fut körbe (nem a gomb belsején). */
	background:
		conic-gradient(from var(--bal-szog),
			rgba(255, 255, 255, 0) 0deg,
			rgba(190, 255, 215, 0.14) 36deg,
			rgba(214, 255, 232, 0.30) 72deg,
			rgba(228, 255, 242, 0.48) 104deg,
			rgba(238, 255, 248, 0.70) 130deg,
			rgba(244, 255, 251, 0.92) 150deg,
			rgba(238, 255, 248, 1) 168deg,
			rgba(198, 250, 220, 0.60) 200deg,
			rgba(140, 240, 178, 0.32) 228deg,
			rgba(74, 222, 128, 0.12) 254deg,
			rgba(255, 255, 255, 0) 288deg),
		linear-gradient(135deg, rgba(56, 189, 248, 0.42), rgba(16, 185, 129, 0.42));
	/* ★★★ 1 px-ES ÁTMENET MINDKÉT ÉLEN (a felhasználó kérése: „nézzük meg 1 px
	   blurral”). A korábbi 2 px-es rámpa helyett 1 px — a próba kedvéért.
	   ⚠ EZ A SZABÁLY MINDKÉT GOMBRA VONATKOZIK: a záró „Fejlődni akarok” ÉS a
	   főoldali „Start” ugyanezt a markupot és osztályt használja
	   (`.bal-ut-nyito .bal-ut-zaro-gombok a.button-primary`), ezért egy helyen
	   állítva mindkettő ugyanazt kapja.
	   ⚠ Az 1 px már csak a legszükségesebb élsimítás: a TELJESEN KEMÉNY váltás
	   (0 px) pixelesen lépcsőzött („sorjás” ✗), az 1 px ezt épp megszünteti.
	   Sugár-értelmezés (a gomb 230 px, `closest-side` = 115 px):
	     r = 101 px → 0 · 102 px → 1 (belső él, 1 px) · 114 px (a gyűrű anyaga)
	     · 115 px → 0 (külső él, 1 px). */
	-webkit-mask: radial-gradient(circle closest-side,
		rgba(0, 0, 0, 0) calc(100% - 14px),
		#000 calc(100% - 13px),
		#000 calc(100% - 1px),
		rgba(0, 0, 0, 0) 100%);
	mask: radial-gradient(circle closest-side,
		rgba(0, 0, 0, 0) calc(100% - 14px),
		#000 calc(100% - 13px),
		#000 calc(100% - 1px),
		rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
	animation: bal-gyuru-feny 3.1s linear infinite;
}

/* ★★★ A FELIRAT KÉKES CSILLANÁSA (a felhasználó kérése: „a körben a
   Fejlődni akarok szöveg is kékesen csillanjon meg, ha rámegyek egérrel”).
   ⚠ A felirat ezért külön `<span>`-ben van (`bal-ut-zaro-felirat`): a
   `background-clip: text` a SAJÁT elem hátterét vágja a betűkre, a gomb
   `<a>`-ján nem lehet (azon van a belső kör háttere). */
.bal-ut-zaro-felirat {
	display: inline-block;
	/* ⚠ A felirat a gomb ::before (célkereszt) és ::after (gyűrű) FÖLÖTT van */
	position: relative;
	z-index: 1;
}

/* ★ A csillanás: egy FEHÉR alapú színátmenet, benne egy LÁGY KÉK sáv, ami
   **ÁTLÓSAN FELFELÉ** fut végig a betűkön — a fényudvar NINCS (a felhasználó
   kérése: „nem fényudvart jelent a betűk körül, ezt töröld”).
   ⚠ A színátmenet szöge 45 fok: az izovonala „\” irányú (bal-fentől
   jobb-lent), a mozgás viszont JOBBRA-FELFELÉ — vagyis a sáv NEM önmaga
   mentén csúszik, hanem ÁTHALAD a betűkön ✔.
   ⚠ A méret 200%×200% és a pozíció 100%/0% → 0%/100% között fut, mert így
   a kép MINDIG teljesen lefedi a dobozt (nincs olyan pillanat, amikor a
   betű háttere hiányzik és a szöveg eltűnne). */
.bal-ut-zaro-gombok a.button-primary:hover .bal-ut-zaro-felirat {
	background-image: linear-gradient(45deg,
		#ffffff 0%, #ffffff 40%,
		#a0ccff 47%, #e8f5ff 50%, #a0ccff 53%,
		#ffffff 60%, #ffffff 100%);
	background-size: 200% 200%;
	background-position: 100% 0%;
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	animation: bal-felirat-csillan 3.8s ease-in-out infinite;
}

@keyframes bal-felirat-csillan {
	from { background-position: 100% 0%; }
	to   { background-position: 0% 100%; }
}

/* ★ hoverre NE cseréljük le a hátteret (akkor a forgó fény eltûnne),
   hanem fényesítsük — így a fény végig megmarad. */
.bal-ut-zaro-gombok a.button-primary:hover::after {
	filter: brightness(1.3) saturate(1.05);
}

@media (prefers-reduced-motion: reduce) {
	.bal-ut-zaro-gombok a.button-primary::after { animation: none; }
	/* a csillanás NEM fut, de a sáv a felirat közepén ÁLL — így a kék szín
	   mozgás nélkül is látszik (nincs fényudvar, csak a betűk színe) */
	.bal-ut-zaro-gombok a.button-primary:hover .bal-ut-zaro-felirat {
		animation: none;
		background-position: 50% 50%;
	}
}

@media (max-width: 640px) {
	.bal-ut-zaro-gombok a.button-primary {
		width: 170px;
		height: 170px;
		font-size: 22.1px;
		padding: 0 40px;
	}
}

/* ═══ RÁCS-ÁTMENET (a minta betöltője) — a VÁSZON a lap fölött ═════════════
   A mechanizmus a robinpayot.com `src/js/components/Overlay/overlay.frag`
   shaderje: a fehér pontok a képernyő ÁTLÓJA mentén nőnek (feltöltés), majd
   oldódnak fel — a két fázis a FEHÉR csúcson kapcsolódik, ezért nem villan.
   A shader, az időzítés és az ÉRKEZÉS: `assets/balance-atmenet.js`.
   ⚠ A vászon a LÁBLÉCBEN van (footer.php), ezért `fixed` — az ÚT görgethető
   felületén BELÜL ez hiba lenne, a lap szintjén viszont épp ez a helyes. */
.bal-ut-atmenet {
	position: fixed;
	inset: 0;
	z-index: 900;
	pointer-events: none;
}
.bal-ut-atmenet[hidden] { display: none }
.bal-ut-atmenet-vaszon {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

/* ⚠⚠ A FEHÉR FÁTYOL az ÉRKEZŐ lapon: a PHP teszi rá a `bal-atmenet-be`
   osztályt MÉG A JS ELŐTT — így az új lap nem villan be. A fátylat a vászon
   váltja le (`bal-atmenet-fut`), és ha a JS nem fut le, 2,5 s után MAGÁTÓL is
   eltűnik: nem marad fehér a lap. */
.bal-atmenet-fatyol {
	position: fixed;
	inset: 0;
	z-index: 899;
	background: #fff;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s linear;
}
body.bal-atmenet-be .bal-atmenet-fatyol {
	opacity: 1;
	animation: bal-fatyol-el 0.9s 2.5s ease forwards;
}
body.bal-atmenet-be.bal-atmenet-fut .bal-atmenet-fatyol {
	opacity: 0;
	animation: none;
}

@keyframes bal-fatyol-el {
	to { opacity: 0; visibility: hidden }
}

/* ★★★ A 0. (NYITÓ) ÜZENET — „Görgess!”: a belépés után ez áll az úton, és az
   ELSŐ görgetésre eltűnik (a `--o`-t a JS adja, lásd `szinpadHely()`). */
.bal-ut-nyitas {
	position: sticky;
	top: 0;
	height: 100vh;
	margin-bottom: -100vh;
	z-index: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: var(--o, 1);
	pointer-events: none;
}
.bal-ut-nyitas-szoveg {
	margin: 0;
	font-size: clamp(38px, 6.4vw, 96px);
	line-height: 1;
	font-weight: 800;
	letter-spacing: -0.03em;
	/* ★ FEHÉR (a felhasználó kérése) — nem az adaptív kontraszt-szín */
	color: #fff;
	text-shadow: 0 14px 44px rgba(12, 24, 48, 0.35);
}

/* ★★★ A FŐOLDALI START GOMB (a felhasználó kérése): **KÉKESZÖLD, FINOMAN
   SZÍNVÁLTÓ** (2026-10-06), és **NINCS rajta kékes csillanás**.
   ⚠ A szín a gombok EGY helyen definiált családjából jön (`--ut-gomb-*`);
   a finom színváltás a `bal-ut-gomb-szinvaltas` (hue-rotate) — a FEHÉR
   feliratot ez nem érinti. */
.bal-ut-nyito .bal-ut-zaro-gombok a.button-primary {
	/* ★ DOMBORÚ BELSEJŰ (a felhasználó kérése): felül-balra fény, alul belső
	   árnyék — ez adja a 3D hatást; a külső lágy árnyék emeli a lapról. */
	background-image:
		radial-gradient(circle at 34% 26%,
			rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0.14) 42%, rgba(255, 255, 255, 0) 64%),
		linear-gradient(108deg, #0b6d7d, #12a3a8 45%, #2fd4a4) !important;
	box-shadow:
		inset 0 -18px 34px rgba(4, 26, 62, 0.42),
		inset 0 14px 28px rgba(255, 255, 255, 0.32),
		0 22px 46px -20px rgba(11, 26, 54, 0.55) !important;
	color: #fff !important;
	animation: bal-ut-gomb-szinvaltas 11s ease-in-out infinite alternate;
}
.bal-ut-nyito .bal-ut-zaro-gombok a.button-primary .bal-ut-zaro-felirat {
	color: #fff;
	-webkit-text-fill-color: #fff;
}

/* ⚠ a csillanás (a fehér-kék sáv) a Starton NEM fut: a hover az alapértéket
   állítja vissza, csak a felirat marad fehér */
.bal-ut-nyito .bal-ut-zaro-gombok a.button-primary:hover .bal-ut-zaro-felirat {
	animation: none !important;
	background-image: none !important;
	-webkit-background-clip: border-box !important;
	background-clip: border-box !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	transition: none;
}

/* ═══ ★★★ A GOMBOK — KÉKESZÖLD ÉS FINOMAN SZÍNVÁLTÓ (2026-10-06) ═════════
   A felhasználó kérése: „a színe minta gomboknak, kékeszöld és kicsit
   színváltós”. Az út gombjai EGY helyen kapják a színt.
   ⚠ SZŰKÍTVE a `.bal-ut-doboz`-ra — a lap többi `.button-primary`-ja
   (kurzusok, pakli) VÁLTOZATLAN.
   ⚠ A „színváltás” `hue-rotate`: a FEHÉR feliratot nem érinti, és minden
   háttér-rétegen működik (a domború fény sem csúszik el).
   `prefers-reduced-motion` esetén a globális szabály (813. sor) leállítja. */
@keyframes bal-ut-gomb-szinvaltas {
	0%   { filter: hue-rotate(-16deg) saturate(1.04) }
	100% { filter: hue-rotate(16deg) saturate(1.16) }
}

.bal-ut-doboz {
	--ut-gomb-1: #0b6d7d;
	--ut-gomb-2: #12a3a8;
	--ut-gomb-3: #2fd4a4;
}

/* a közös kékeszöld sáv (a záró CTA — és a `.bal-ut-nyito` Start felülírja
   a saját domború változatával) */
.bal-ut-doboz .bal-ut-zaro-gombok a.button-primary {
	background-image: linear-gradient(108deg, var(--ut-gomb-1), var(--ut-gomb-2) 45%, var(--ut-gomb-3));
	color: #fff;
	animation: bal-ut-gomb-szinvaltas 11s ease-in-out infinite alternate;
}

/* a „nem” gomb és a bezáró ✕ UGYANEBBŐL a családból, de halkabban:
   áttetsző kékeszöld, hogy megmaradjon a másodlagos szerepük */
.bal-ut-doboz .bal-ut-zaro-nem,
.bal-ut-doboz .bal-ut-bezar {
	background-image: linear-gradient(150deg, #0b6d7d5c, #2fd4a45c);
	animation: bal-ut-gomb-szinvaltas 13s ease-in-out infinite alternate;
}

.bal-ut-doboz .bal-ut-zaro-nem:hover { background-image: linear-gradient(150deg, #0b6d7d8a, #2fd4a48a) }

/* ⚠ a SAROK-CÍMKE („Görgess tovább”) a nyitó üzenet ELLENTÉTESE: amíg az áll,
   ez rejtve van — így nem mondja ugyanazt kétszer (a `--o`-t a JS adja). */
.bal-ut-lab { opacity: var(--o, 1) }

/* ⚠⚠ A ZÁRÓ BLOKK ELHELYEZÉSE (a felhasználó kérése): „legyen jóval feljebb
   a képernyő középvonala felé, hogy a középvonal ALATT elférjen a kerek
   gomb”. Ezért a záró MONDAT a középvonal fölé, a KÖR GOMB alá kerül.
   A DOM-sorrend (kérdés → gombok → mondat) CSS `order`-rel fordul meg. */
.bal-ut-zaras {
	/* ★★ A ZÁRÓ BLOKK A 3D SZÍNPADON VAN (a felhasználó kérése: ne alulról
	   jöjjön fel, hanem úgy nőjön meg, mint a többi üzenet). A színpad
	   rögzített, ezért `absolute`, és a JS adja a `--s` / `--o` értékét.
	   ⚠ Az alapérték 0: a blokk a görgetés végéig rejtve marad. */
	position: absolute;
	inset: 0;
	z-index: 300;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 34px;
	transform: scale(var(--s, 1));
	transform-origin: 50% 50%;
	opacity: var(--o, 0);
	pointer-events: none;
}

.bal-ut-zaras a,
.bal-ut-zaras button { pointer-events: auto }

.bal-ut-zaro-kerdes { order: 1 }
.bal-ut-tovabb { order: 2; margin-top: 0 }
/* ⚠⚠ A KÖR A NYÍL FÜGGŐLEGES VONALÁBA KERÜL (a felhasználó mérése:
   „nem középen van a gomb, fölötte van egy nyíl”). Ezért a gombsor
   OSZLOPBA rendeződik: a kör középen, a „mégsem” alatta. */
.bal-ut-zaro-gombok {
	order: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

/* ⚠ A KÖR GOMB MINDIG LÁTSZIK (a felhasználó kérése: „ne csak akkor
   látszódjon, ha rávizsem az egeret”). */
.bal-ut-zaro-gombok a.button-primary,
.bal-ut-tovabb { opacity: 1 !important }

.bal-ut-tovabb-nyil {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid #dce9ff38;
	background: #dce9ff14;
	animation: bal-ut-lebeg 2.6s ease-in-out infinite;
}

@keyframes bal-ut-lebeg {
	0%, 100% { transform: rotate(90deg) translateY(0) }
	50% { transform: rotate(90deg) translateY(6px) }
}

.bal-ut-bezar {
	position: fixed;
	top: 13px;
	right: 20px;
	z-index: 4;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	color: var(--ut-szoveg);
	background: #dce9ff1a;
	border: 1px solid #dce9ff2e;
	transition: transform .2s, background .2s;
}

.bal-ut-bezar:hover { transform: scale(1.06); background: #dce9ff2e }
.bal-ut-bezar:focus-visible { outline: 2px solid var(--ut-kiemelt); outline-offset: 2px }

/* --- a nyitó gomb az archívumon (bal oldalon, a kurzusok felett) --- */
.bal-nezet-ut {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 18px 9px 13px;
	border-radius: 999px;
	border: 1px solid #e0e7ff;
	font-size: 13px;
	font-weight: 800;
	color: #4f46e5;
	text-decoration: none;
	background: #eef2ff;
	transition: transform .2s, box-shadow .25s, background .25s;
}

.bal-nezet-ut:hover { transform: translateY(-2px); background: #e0e7ff; box-shadow: 0 14px 30px -14px #4f46e580 }
.bal-nezet-ut svg { flex: 0 0 auto }

@media (max-width: 900px) {
	.bal-ut-fej {
		grid-template-columns: 1fr;
		padding: 18px 18px;
		padding-right: 66px;
		font-size: 9.5px;
	}

	.bal-ut-fej-cimke { justify-content: flex-start }

	.bal-ut-lab { padding: 18px 18px; font-size: 9.5px }

	.bal-ut-sin { right: 11px; gap: 11px }
	.bal-ut-sin-szam { display: none }
	.bal-ut-sin-vonal { width: 11px }
	.bal-ut-sin-jel.is-aktiv .bal-ut-sin-vonal { width: 26px }

	.bal-ut-allomas { min-height: 92vh; padding: 86px 16px }
	.bal-ut-belso { padding: 32px 24px 30px; border-radius: 20px }
	.bal-ut-cim { font-size: clamp(30px, 9vw, 46px) }
	.bal-ut-allitas { font-size: 16px }
	.bal-ut-kerdes { font-size: 17px; padding-left: 15px }
	.bal-ut-felirat { font-size: 9.5px }
	.bal-ut-bezar { top: 11px; right: 12px }
	.bal-nezet-ut { font-size: 12px; padding: 8px 14px 8px 11px }
}

@media (prefers-reduced-motion: reduce) {
	.bal-ut { scroll-behavior: auto }
	.bal-ut-eg-reteg { transition: none }
	.bal-ut-allomas .bal-ut-belso { transition: none; opacity: 1; filter: none; transform: none }
	.bal-ut-sin-vonal { transition: none }
	.bal-ut-tovabb-nyil { animation: none }
}