/* =====================================================================
   eSI Web Design System — éles stíluslap
   Forrás: design.10.md + eSI_design.html (élő referencia, v1.0).
   A tokenek egyetlen forrása ez a :root blokk; komponens hexet nem kap.
   ===================================================================== */

/* ---------- Betűk: saját tárhely, latin + latin-ext (ő, ű) ---------- */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;
  src:url('../fonts/ibm-plex-sans-latin-wght.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;
  src:url('../fonts/ibm-plex-sans-latin-ext-wght.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/ibm-plex-mono-latin-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/ibm-plex-mono-latin-ext-500.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Fallback';font-display:swap;src:local('Arial'),local('ArialMT'),local('Liberation Sans');
  size-adjust:100.7%;ascent-override:101.8%;descent-override:27.3%;line-gap-override:0%}

/* ---------- Színek: tükörpár + szerep szerinti akcentek ----------
   Világos az alap; a sötét a rendszer beállítását követi.
   A .theme-invert sáv mindig a körülötte lévő téma ellentétét kapja. */
:root, .theme-invert .theme-invert{
  --canvas:#F0EDEA; --surface:#FAFAF9; --surface-hover:#E0DDDA; --ink:#161320;
  --ink-muted:#6B6672; --ink-subtle:#827D89; --ink-faint:#B5B1B9;
  --action-hover:#35313B;
  --route:#E0A42C; --accent:#00AEE8; --accent-text:#206988; --on-accent:#161320; --logo-ink:#1E1A2E;
  --success:#045923; --danger:#C92121;
  --logo-light:block; --logo-dark:none;
  color-scheme:light;
}
.theme-invert{
  --canvas:#161320; --surface:#35313B; --surface-hover:#423E49; --ink:#F0EDEA;
  --ink-muted:#A8A3AE; --ink-subtle:#8C8794; --ink-faint:#57525F;
  --action-hover:#E0DDDA;
  --accent-text:#00AEE8; --logo-ink:#F0EDEA;
  --success:#4CC677; --danger:#F28585;
  --logo-light:none; --logo-dark:block;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root, .theme-invert .theme-invert{
    --canvas:#161320; --surface:#35313B; --surface-hover:#423E49; --ink:#F0EDEA;
    --ink-muted:#A8A3AE; --ink-subtle:#8C8794; --ink-faint:#57525F;
    --action-hover:#E0DDDA;
    --accent-text:#00AEE8; --logo-ink:#F0EDEA;
    --success:#4CC677; --danger:#F28585;
    --logo-light:none; --logo-dark:block;
    color-scheme:dark;
  }
  .theme-invert{
    --canvas:#F0EDEA; --surface:#FAFAF9; --surface-hover:#E0DDDA; --ink:#161320;
    --ink-muted:#6B6672; --ink-subtle:#827D89; --ink-faint:#B5B1B9;
    --action-hover:#35313B;
    --accent-text:#206988; --logo-ink:#1E1A2E;
    --success:#045923; --danger:#C92121;
    --logo-light:block; --logo-dark:none;
    color-scheme:light;
  }
}
/* kényszerített világos polaritás — a színes (arany) sáv témától független,
   a benne lévő .theme-invert kártya mindkét témában sötét */
.theme-light{
  --canvas:#F0EDEA; --surface:#FAFAF9; --surface-hover:#E0DDDA; --ink:#161320;
  --ink-muted:#6B6672; --ink-subtle:#827D89; --ink-faint:#B5B1B9;
  --action-hover:#35313B; --accent-text:#206988; --logo-ink:#1E1A2E;
  --success:#045923; --danger:#C92121; --logo-light:block; --logo-dark:none;
  color-scheme:light;
}
.theme-light .theme-invert{
  --canvas:#161320; --surface:#35313B; --surface-hover:#423E49; --ink:#F0EDEA;
  --ink-muted:#A8A3AE; --ink-subtle:#8C8794; --ink-faint:#57525F;
  --action-hover:#E0DDDA; --accent-text:#00AEE8; --logo-ink:#F0EDEA;
  --success:#4CC677; --danger:#F28585; --logo-light:none; --logo-dark:block;
  color-scheme:dark;
}
/* az ellentétes sáv a saját tintáját kapja, nem örökli a környezetét */
.theme-invert{color:var(--ink)}
.theme-light{color:var(--ink)}
/* származtatott tokenek — minden polaritásban újraszámolva */
:root, .theme-invert, .theme-light{
  --action:var(--ink); --on-action:var(--canvas); --focus:var(--accent-text); --info:var(--accent-text);
}

:root{
  /* akcentskálák 800 / 500 — téma-függetlenek; a 800-ason #F0EDEA szöveg áll */
  --blue-800:#206988;  --blue-500:#00AEE8;
  --gold-800:#835818;  --gold-500:#E0A42C;
  --green-800:#045923; --green-500:#07A240;
  --red-800:#6F1212;   --red-500:#C92121;
  --on-scale:#F0EDEA;

  /* tipográfia */
  --font-sans:'IBM Plex Sans','IBM Plex Sans Fallback',Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --fw-heading:500;
  --fs-hero:clamp(30px, 22.25px + 2.066vw, 52px); --lh-hero:1.4;
  --fs-h2:36px; --lh-h2:1.16;
  --fs-title:24px; --lh-title:1.25; --ls-title:-.015em;
  --fs-lead:16px; --fs-body:16px; --lh-text:1.4;
  --fs-button:18px; --fs-chip:12px; --ls-ui:-.01em; --lh-ui:1.2;
  --fs-label:12px; --ls-label:.04em;
  --fs-eyebrow:14px; --lh-eyebrow:1.3; --ls-eyebrow:.06em;
  --mark-pad:0 .07em .025em;

  /* elrendezés: az útvonal */
  --route-w:clamp(8px, 2.78vw, 40px);
  --route-r:calc(var(--route-w) * 3.2);
  --route-ring:calc(var(--route-w) * 6);
  --route-dot:calc(var(--route-w) * 1.75);
  --route-gap:clamp(36px, 5vw, 72px);
  --line-clear:48px;
  --margin-x:max(8vw, (100vw - 1530px) / 2);
  --axis-r:78.5%; --axis-l:20%; --text-after-l:30%;
  --axis-e:calc(var(--margin-x) + var(--route-w) / 2);   /* szélső tengely: a vonal a kártyasor mellett fut le */
  --edge-l:calc(var(--margin-x) + var(--route-w) + var(--line-clear));
  --measure:640px; --measure-title:900px;
  --wide:min(84vw, 1320px);

  /* formák */
  --r-0:0; --r-12:12px; --r-16:16px; --r-24:24px; --r-32:32px; --r-pill:999px; --r-circle:50%;
  --r-card:var(--r-16); --r-well:var(--r-12); --r-panel:var(--r-32); --r-control:var(--r-pill);
  --stroke:2px; --focus-w:3px; --focus-offset:4px;

  /* mozgás */
  --dur-fast:150ms; --dur-exit:100ms; --dur-state:200ms; --dur-reveal:600ms; --stagger:80ms;
  --ease-out:cubic-bezier(.2,0,0,1); --ease-in:cubic-bezier(.4,0,1,1);
  --drift:0.25; --drift-max:320px; --draw-lead:0.92; --stack-offset:24px; --stack-travel:1.18;

  /* térköz-skála és kiosztás */
  --sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-16:16px; --sp-24:24px; --sp-32:32px;
  --sp-48:48px; --sp-64:64px; --sp-72:72px; --sp-96:96px; --sp-128:128px;
  --gap-head:48px; --gap-hero-top:64px; --gap-eyebrow:24px; --gap-title:32px;
  --gap-para:24px; --gap-para-hero:12px; --gap-cta:32px; --gap-form:48px;
  --gap-chips:48px; --gap-items:12px; --gap-dots:24px; --section-pad:96px;

  /* fix menügomb: a rögzülő blokkok alatta állnak meg */
  --burger:56px;
  --pin-top:calc(var(--gap-head) + var(--burger) + var(--sp-24));
}
@media (max-width:767px){
  :root{
    --fs-h2:32px; --fs-title:20px; --fs-button:16px; --fs-eyebrow:13px;
    --line-clear:20px; --margin-x:6vw;
    --axis-r:calc(100% - var(--margin-x) - var(--route-ring) / 2); --axis-l:10%;
    --text-after-l:calc(10% + var(--route-w) / 2 + 20px);
    --measure:100%; --measure-title:100%; --wide:88vw;
    --gap-head:24px; --gap-hero-top:48px; --gap-eyebrow:16px; --gap-title:24px; --gap-para:16px;
    --gap-cta:24px; --gap-form:32px; --gap-chips:32px; --section-pad:64px;
    --r-panel:var(--r-24); --draw-lead:0.65; --burger:48px;
  }
}
@media (prefers-reduced-motion:reduce){
  :root{ --dur-fast:0ms; --dur-exit:0ms; --dur-state:0ms; --dur-reveal:0ms; --stagger:0ms; }
}

/* =====================================================================
   Alap
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip;scrollbar-gutter:stable}
html.menu-open{overflow:hidden}
body{
  font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-text);font-weight:400;
  background:var(--canvas);color:var(--ink);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:var(--accent-text);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-offset)}
/* programból fókuszált, nem interaktív célpont (pl. az eredmény címe, amit a képernyőolvasó felolvas): nincs keret */
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}
:target{scroll-margin-top:var(--sp-96)}
b,strong{font-weight:600}
ul[role="list"],ol[role="list"]{list-style:none}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.nowrap{white-space:nowrap}
.mt-12{margin-top:var(--sp-12)} .mt-16{margin-top:var(--sp-16)}
.skip-link{position:absolute;left:var(--margin-x);top:-100px;z-index:100;background:var(--action);color:var(--on-action);
  border-radius:var(--r-control);padding:var(--sp-12) var(--sp-24);font-weight:500;text-decoration:none}
.skip-link:focus{top:var(--sp-16)}

/* ---------- Tipográfia ---------- */
.eyebrow{display:block;font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;line-height:var(--lh-eyebrow);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--accent-text)}
.eyebrow .dot{color:var(--accent)}
.h-hero{font-size:var(--fs-hero);font-weight:var(--fw-heading);line-height:var(--lh-hero);letter-spacing:0;max-width:var(--measure-title)}
.h2{font-size:var(--fs-h2);font-weight:var(--fw-heading);line-height:var(--lh-h2);letter-spacing:0;max-width:var(--measure-title);text-wrap:balance}
.h3,.t-title{font-size:var(--fs-title);font-weight:500;line-height:var(--lh-title);letter-spacing:var(--ls-title)}
.lead{font-size:var(--fs-lead);line-height:var(--lh-text);max-width:var(--measure)}
.muted{color:var(--ink-muted)}
.label{font-size:var(--fs-label);font-weight:500;line-height:var(--lh-ui);letter-spacing:var(--ls-label);text-transform:uppercase}
mark{background:var(--accent);color:var(--on-accent);padding:var(--mark-pad);-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* szekciófej: eyebrow → 24 → H2 → 32 → bevezető */
.sec-head .eyebrow{margin-bottom:var(--gap-eyebrow)}
.sec-head .lead,.sec-head > p{margin-top:var(--gap-title)}
.sec-head .lead + .lead,.sec-head > p + p{margin-top:var(--gap-para)}
.prose > * + *{margin-top:var(--gap-para)}
.sec-head .lead-block{margin-top:var(--gap-title)}
.lead-block p{max-width:var(--measure)}
.statement-wrap{margin-top:var(--sp-96)}
.prose p,.prose li{max-width:var(--measure)}
.prose ul{padding-left:1.2em}

/* ---------- Ikonok: Lucide, a látható vonal mindig 2 px ---------- */
.ico{display:block;width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico *{vector-effect:non-scaling-stroke}
.ico-40{width:40px;height:40px}

/* ---------- Gombok ---------- */
.btn{
  font-size:var(--fs-button);font-weight:500;line-height:var(--lh-ui);letter-spacing:var(--ls-ui);
  display:inline-flex;align-items:center;gap:var(--sp-12);white-space:nowrap;cursor:pointer;text-decoration:none;
  border-radius:var(--r-control);min-height:48px;padding:0 20px;border:var(--stroke) solid transparent;
  transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.btn:hover{text-decoration:none}
.btn .arr{width:28px;height:10px;flex:none}
.btn-primary{background:var(--action);color:var(--on-action)}
.btn-primary:hover{background:var(--action-hover)}
.btn-primary .arr{color:var(--accent)}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-secondary:hover{background:var(--surface)}
.btn[disabled],.btn[aria-disabled="true"]{background:transparent;color:var(--ink-faint);border-color:var(--ink-faint);cursor:not-allowed}
.btn-row{display:flex;gap:var(--sp-12);flex-wrap:wrap;align-items:center}
.field-btn{font-size:var(--fs-button);font-weight:500;line-height:var(--lh-ui);letter-spacing:var(--ls-ui);color:var(--ink);background:var(--surface);
  border:0;border-radius:var(--r-control);min-height:48px;padding:0 var(--sp-24);cursor:pointer;white-space:nowrap;
  transition:background-color var(--dur-fast) var(--ease-out)}
.field-btn:hover{background:var(--surface-hover)}
.field-btn[disabled]{color:var(--ink-faint);cursor:progress}
.text-link{display:inline-flex;align-items:center;gap:var(--sp-8);font-weight:500;color:var(--ink);text-decoration:none}
.text-link .arr{width:28px;height:10px;color:var(--accent);flex:none}
.text-link:hover{text-decoration:underline}

/* ---------- Kérdés-chip ---------- */
.qchip{display:inline-flex;align-items:center;gap:var(--sp-8);min-height:34px;background:var(--surface);color:var(--ink);border-radius:var(--r-pill);
  padding:0 14px;font-size:var(--fs-chip);font-weight:500;line-height:var(--lh-ui);letter-spacing:var(--ls-ui);white-space:nowrap}
.qchip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}

/* ---------- Sorszámkör ---------- */
.numring{width:32px;height:32px;border-radius:var(--r-circle);border:var(--stroke) solid currentColor;display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:600;line-height:1;flex:none;font-variant-numeric:tabular-nums}

/* ---------- Állapot-chip: „Feltöltés alatt" ---------- */
.status{display:inline-flex;align-items:center;gap:var(--sp-8);min-height:34px;padding:0 14px;border-radius:var(--r-pill);background:var(--surface);
  font-size:var(--fs-chip);font-weight:500;line-height:var(--lh-ui);letter-spacing:var(--ls-label);text-transform:uppercase}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.wip{font-family:var(--font-mono);font-weight:500;color:var(--ink-muted);margin-left:.35em}

/* =====================================================================
   Oldalváz és útvonal
   ===================================================================== */
.page{position:relative}
.route{position:absolute;left:0;top:0;z-index:1;pointer-events:none;overflow:visible}
.route .ring{fill:none;stroke:var(--route)}
/* az út darabjai: egyszínű téglalapok és negyedkörök, csak transformmal nőnek, újrafestés nélkül */
.route-lines{position:absolute;left:0;top:0;width:0;height:0;z-index:1;pointer-events:none}
.rl{position:absolute;display:block;background:var(--route)}
.rl-v{transform-origin:50% 0}
.rl-h.to-r{transform-origin:0 50%}
.rl-h.to-l{transform-origin:100% 50%}
.rl-d{border-radius:var(--r-circle)}
.rl-a{position:absolute;display:block;overflow:hidden}
.rl-a > b{position:absolute;inset:0;display:block;box-sizing:border-box;border:0 solid var(--route)}
.rl-a.se > b{border-width:0 var(--rw) var(--rw) 0;border-bottom-right-radius:100%;transform-origin:0 0}
.rl-a.sw > b{border-width:0 0 var(--rw) var(--rw);border-bottom-left-radius:100%;transform-origin:100% 0}
.rl-a.nw > b{border-width:var(--rw) 0 0 var(--rw);border-top-left-radius:100%;transform-origin:100% 100%}
.rl-a.ne > b{border-width:var(--rw) var(--rw) 0 0;border-top-right-radius:100%;transform-origin:0 100%}
@keyframes rl-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes rl-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rl-s{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes rl-cw{from{transform:rotate(-90deg)}to{transform:rotate(0deg)}}
@keyframes rl-ccw{from{transform:rotate(90deg)}to{transform:rotate(0deg)}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    .rl-v,.rl-h,.rl-d,.rl-a > b{animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(root block)}
    .rl-v{animation-name:rl-y} .rl-h{animation-name:rl-x} .rl-d{animation-name:rl-s}
    .rl-a.se > b,.rl-a.ne > b{animation-name:rl-cw}
    .rl-a.sw > b,.rl-a.nw > b{animation-name:rl-ccw}
  }
  @supports not (animation-timeline:scroll()){
    .rl-v,.rl-h,.rl-d,.rl-a > b{will-change:transform}
  }
}
.route-probe{position:absolute;left:0;right:0;top:0;height:0;visibility:hidden;pointer-events:none}
.route-probe i{display:block;height:0}
.route-probe [data-k="w"]{width:var(--route-w)} .route-probe [data-k="r"]{width:var(--route-r)}
.route-probe [data-k="ring"]{width:var(--route-ring)} .route-probe [data-k="gap"]{width:var(--route-gap)}
.route-probe [data-k="ar"]{width:var(--axis-r)} .route-probe [data-k="al"]{width:var(--axis-l)}
.route-probe [data-k="ae"]{width:var(--axis-e)}
.route-probe [data-k="dot"]{width:var(--route-dot)} .route-probe [data-k="pin"]{width:var(--pin-top)}

/* minden tartalom az út fölött. Az ellentétes sáv kivétel: a háttere (::before) az út
   alatt, a tartalma fölötte van — ezért nem nyithat saját rétegrendet. */
.page .site-head,.page .sec:not(.band){position:relative;z-index:2}

/* szekciók: a vonal oldala dönti el, hol áll a szöveg */
.sec{padding-top:var(--section-pad)}
.sec.cross{margin-top:calc(var(--route-gap) * 2 + var(--route-w));padding-top:0}
.sec[data-route="r"] > .in{padding-left:var(--margin-x);width:calc(var(--axis-r) - var(--route-w) / 2 - var(--line-clear));max-width:calc(var(--margin-x) + var(--measure-title))}
.sec[data-route="l"] > .in{padding-left:var(--text-after-l);padding-right:var(--margin-x)}
.sec[data-route="l"] > .in > *{max-width:var(--measure-title)}
.sec[data-route="e"] > .in{padding-left:var(--edge-l);padding-right:var(--margin-x)}
.sec[data-route="e"] > .in > *{max-width:var(--measure-title)}
.sec .wide{margin-left:var(--margin-x);width:var(--wide);position:relative;z-index:3}
.sec[data-route="e"] .wide{margin-left:var(--edge-l);width:min(100% - var(--edge-l) - var(--margin-x),1320px)}
.sec-end{padding-bottom:var(--section-pad)}

/* =====================================================================
   Fejléc és megamenü
   ===================================================================== */
.site-head{display:flex;align-items:center;justify-content:space-between;
  padding:var(--gap-head) calc(100% - var(--axis-r) - var(--route-ring) / 2 + var(--burger) + var(--sp-24)) 0 var(--margin-x);min-height:calc(var(--gap-head) + var(--burger))}
.logo-link{display:inline-block;line-height:0;border-radius:var(--r-12)}
.logo-link img{height:44px;width:auto}
.logo-light{display:var(--logo-light)} .logo-dark{display:var(--logo-dark)}

.burger{position:fixed;z-index:60;top:var(--gap-head);right:calc(100% - var(--axis-r) - var(--route-ring) / 2);
  width:var(--burger);height:var(--burger);border-radius:var(--r-circle);border:var(--stroke) solid var(--ink);
  background:var(--canvas);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-out)}
.burger:hover{background:var(--surface)}
.burger svg{width:22px;height:14px}
.burger .x{display:none}
.burger[aria-expanded="true"] .bars{display:none}
.burger[aria-expanded="true"] .x{display:block;width:16px;height:16px}

.menu-scrim{position:fixed;inset:0;z-index:55;background:color-mix(in srgb,var(--ink) 40%,transparent);visibility:hidden}
.menu-scrim.open{visibility:visible}
.menu{position:fixed;z-index:58;top:calc(var(--gap-head) + var(--burger) + var(--sp-12));
  left:var(--margin-x);right:calc(100% - var(--axis-r) - var(--route-ring) / 2);
  max-height:calc(100dvh - var(--gap-head) - var(--burger) - var(--sp-24));overflow:auto;overscroll-behavior:contain;
  background:var(--canvas);color:var(--ink);border-radius:var(--r-card);padding:var(--sp-8);
  clip-path:inset(0 0 100% 0 round var(--r-16));visibility:hidden;
  transition:clip-path var(--dur-exit) var(--ease-in),visibility 0s linear var(--dur-exit)}
.menu.open{clip-path:inset(0 0 0 0 round var(--r-16));visibility:visible;transition:clip-path var(--dur-fast) var(--ease-out),visibility 0s}
/* 9 menüpont a bal sávban; a paneleket az utolsó, rugalmas sor nyeli el, így a sáv sorai nem nyúlnak meg */
.menu-grid{display:grid;grid-template-columns:minmax(200px,248px) minmax(0,1fr);grid-template-rows:repeat(9,min-content) 1fr;column-gap:var(--sp-24)}
.rail-btn,.rail-link{grid-column:1;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);width:100%;min-height:48px;
  padding:0 var(--sp-16);border:0;border-radius:var(--r-12);background:transparent;color:var(--ink);
  font-size:var(--fs-body);font-weight:500;line-height:var(--lh-ui);text-align:left;text-decoration:none;cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-out)}
.rail-btn:hover,.rail-link:hover{background:var(--surface);text-decoration:none}
.rail-btn[aria-expanded="true"]{background:var(--surface)}
.rail-btn .chev{width:16px;height:16px;flex:none;transition:transform var(--dur-fast) var(--ease-out)}
.rail-link[aria-current="page"],.rail-btn.is-current{box-shadow:inset 3px 0 0 var(--accent)}
.mp{grid-column:2;grid-row:1 / -1;padding:var(--sp-8) var(--sp-8) var(--sp-16)}
.mp[hidden]{display:none}
.mp-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-16);flex-wrap:wrap;margin-bottom:var(--sp-16);padding:0 var(--sp-8)}
.mp{hyphens:auto;overflow-wrap:break-word}
.mp-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:var(--sp-24) var(--sp-16)}
.mp-feature-row{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;max-width:none;margin-top:var(--sp-24)}
.mp-feature-row > div:first-child{display:grid;gap:var(--sp-4);max-width:var(--measure)}
.mp-col{min-width:0}
.mp-h{display:block;padding:var(--sp-8);border-radius:var(--r-12);font-weight:500;line-height:1.3;color:var(--ink);text-decoration:none}
.mp-list{list-style:none}
.mp-list a{display:block;padding:var(--sp-8);border-radius:var(--r-12);color:var(--ink-muted);text-decoration:none;line-height:1.3;
  transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.mp-h:hover,.mp-list a:hover{background:var(--surface);color:var(--ink);text-decoration:none}
.mp a[aria-current="page"]{color:var(--ink);box-shadow:inset 3px 0 0 var(--accent)}
.mp-list .ext{display:block;font-family:var(--font-mono);font-size:var(--fs-chip);color:var(--ink-muted);margin-top:var(--sp-4)}
/* behúzott aloldalak (pl. monitoring az IT-üzemeltetés alatt) és a Tudástár cikkei */
.mp-sub{list-style:none;margin:0 0 var(--sp-4) var(--sp-16);border-left:var(--stroke) solid var(--surface)}
.mp-list .mp-sub a{font-size:var(--fs-eyebrow);padding-top:var(--sp-4);padding-bottom:var(--sp-4)}
.mp-branches > li + li{margin-top:var(--sp-4)}
.mp-list .mp-branch{color:var(--ink);font-weight:500}
.mp-arts{list-style:none;display:flex;flex-wrap:wrap;padding-left:calc(var(--sp-8) + 1.4em)}
.mp-list .mp-arts a{display:inline-block;font-size:var(--fs-eyebrow);padding-top:var(--sp-4);padding-bottom:var(--sp-4)}
.mp-art-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:0 var(--sp-16);padding-left:calc(var(--sp-8) + 1.4em)}
.mp-art-groups .mp-arts{display:block;padding-left:0}
.mp-list .mp-art-groups .mp-arts a{display:block}
.mp-g{font-family:var(--font-mono);font-size:var(--fs-chip);font-weight:500;line-height:var(--lh-ui);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--accent-text);padding:var(--sp-12) var(--sp-8) var(--sp-4)}
.mp-feature,.note-card{background:var(--surface);border-radius:var(--r-card);padding:var(--sp-24);display:flex;flex-direction:column;gap:var(--sp-16);align-items:flex-start;max-width:var(--measure)}
.mp-feature p,.note-card p{color:var(--ink-muted)}
.mp-feature .t,.note-card .t{color:var(--ink);font-weight:500}
.mp-num{font-weight:600;color:var(--ink-muted);margin-right:var(--sp-8);font-variant-numeric:tabular-nums}
.menu-foot{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:var(--sp-8) var(--sp-24);padding:var(--sp-16) var(--sp-16) var(--sp-8);color:var(--ink-muted)}
.menu-foot a{color:var(--ink-muted)}
@media (max-width:1023px){
  .menu{left:var(--margin-x);right:var(--margin-x)}
  .menu-grid{grid-template-columns:1fr;grid-template-rows:none}
  .mp{grid-column:1;grid-row:auto;padding:var(--sp-8) 0 var(--sp-16) var(--sp-8)}
  .rail-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
  .mp-list a,.mp-h{padding-top:var(--sp-12);padding-bottom:var(--sp-12)}
  .mp-list .mp-arts a,.mp-list .mp-sub a{display:flex;align-items:center;min-height:44px;padding-top:var(--sp-8);padding-bottom:var(--sp-8)}
  .mp-arts{display:block}
}
@media (min-width:1024px){ .rail-btn .chev{transform:rotate(-90deg)} }

/* =====================================================================
   Hero
   ===================================================================== */
.hero .in{padding-top:var(--gap-hero-top);width:calc(var(--axis-r) - var(--route-ring) / 2 - var(--line-clear))!important;max-width:none!important}
.hero .eyebrow{margin-bottom:var(--gap-eyebrow);max-width:var(--measure-title)}
/* a H1 gondolatonként tör, ahogy a mockupon; mobilon folyó szöveg */
.h-hero.lines > span{display:block}
@media (max-width:767px){ .h-hero.lines > span{display:inline} }
.hero .lead{margin-top:var(--gap-title)}
.hero .lead + .lead{margin-top:var(--gap-para-hero)}
.hero .btn-row{margin-top:var(--gap-cta)}
.hero.sec{padding-top:0}
.scroll-hint{position:absolute;z-index:1;font-size:var(--fs-label);font-weight:500;line-height:var(--lh-ui);letter-spacing:var(--ls-label);text-transform:uppercase;white-space:nowrap}
.chips{margin-top:var(--gap-chips);display:flex;flex-direction:column;gap:var(--gap-items);overflow:hidden;position:relative;z-index:2}
.chips .row{display:flex;gap:var(--gap-items);width:max-content}
.chips .row:nth-child(1){transform:translateX(-60px)}
.chips .row:nth-child(2){transform:translateX(-210px)}

/* aloldal-hero: kisebb cím, ugyanaz a kör */
.page-hero .h-hero{font-size:clamp(30px, 24px + 1.6vw, 48px)}
.crumbs{display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-8);list-style:none;margin-bottom:var(--sp-24);color:var(--ink-muted)}
.crumbs li{display:inline-flex;align-items:center;gap:var(--sp-8)}
.crumbs li + li::before{content:"/";color:var(--ink-faint)}
.crumbs a{color:var(--ink-muted)}
.crumbs [aria-current]{color:var(--ink)}
.wip-note{margin-top:var(--gap-cta);display:flex;flex-direction:column;gap:var(--sp-12);align-items:flex-start;max-width:var(--measure)}
.wip-note p{color:var(--ink-muted)}
.wip-note + .btn-row{margin-top:var(--gap-cta)}

/* =====================================================================
   Problémaszekció: kártyahalom
   ===================================================================== */
/* a rögzülő blokk háttere a vonal vízszintes szakaszát takarja, a bal vonalat nem */
.problem .pinner{margin-left:calc(var(--text-after-l) - var(--sp-16));padding-left:var(--sp-16);background:var(--canvas)}
.problem .pinner > .sec-head{padding-right:var(--margin-x)}
.problem .pinner > .sec-head > *{max-width:var(--measure-title)}
.problem.is-stack .pstick{position:sticky;top:var(--pin-top)}
.problem.is-stack .pcards{overflow:visible;scroll-snap-type:none}
.problem.is-stack .pcard,.problem.is-vstack .pcard{outline:var(--stroke) solid var(--canvas)}
.problem.is-vstack .pcards{display:block;overflow:visible;padding-right:var(--margin-x)}
.problem.is-vstack .pcard{position:sticky;top:calc(var(--pin-top) + var(--i) * var(--stack-offset));margin-bottom:var(--sp-16)}
.pcard:nth-child(2){--i:1} .pcard:nth-child(3){--i:2} .pcard:nth-child(4){--i:3} .pcard:nth-child(5){--i:4} .pcard:nth-child(6){--i:5}
.pcard{--i:0}
.pcards{display:flex;gap:var(--gap-items);margin-top:var(--gap-cta);overflow-x:auto;scroll-snap-type:x mandatory;padding-right:var(--margin-x);scrollbar-width:none}
.pcards::-webkit-scrollbar{display:none}
.pcard{position:relative;flex:0 0 min(384px,80%);scroll-snap-align:start;background:var(--surface);border-radius:var(--r-card);padding:var(--sp-24) var(--sp-32)}
.pcard > .ico{width:40px;height:40px;margin-bottom:var(--sp-16)}
.pcard h3{font-size:var(--fs-body);font-weight:600;line-height:var(--lh-text);margin-bottom:var(--sp-4)}
.dots{display:flex;gap:9px;align-items:center;margin-top:var(--gap-dots)}
.dots span{height:18px;width:18px;border-radius:var(--r-pill);background:var(--surface);transition:width var(--dur-state) var(--ease-out)}
.dots span.on{width:48px}
.dots button{height:18px;width:18px;border-radius:var(--r-pill);background:var(--ink-subtle);border:0;padding:0;cursor:pointer;transition:width var(--dur-state) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.dots button[aria-current="true"]{width:48px;background:var(--ink)}
.dots button::after{content:"";display:block;margin:-13px;height:44px}

/* =====================================================================
   AI-modul: ellentétes sáv
   ===================================================================== */
.band{position:relative;padding-top:var(--section-pad);padding-bottom:var(--section-pad)}
.band::before{content:"";position:absolute;inset:0;z-index:0;background:var(--canvas)}
.band.cross{padding-top:var(--section-pad)}
/* egymást követő, nem kanyarodó sávok között alapmódú rés marad */
.sec.band:not(.cross),.sec.band-gold:not(.cross){margin-top:var(--section-pad)}
.band > .in{position:relative;z-index:2}
.band h2 > span{display:block}
.geo-form{display:flex;gap:var(--sp-16);margin-top:var(--gap-form);max-width:var(--measure-title)}
.geo-field{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:var(--sp-12);min-height:48px;padding:0 22px 0 var(--sp-16);border-radius:var(--r-control);background:var(--surface);cursor:text}
.geo-field:focus-within{outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-offset)}
.geo-field .ico{color:var(--ink-muted)}
.geo-field input{flex:1 1 auto;min-width:0;height:48px;border:0;padding:0;background:transparent;color:var(--ink);font-size:var(--fs-lead);outline:none}
.geo-field input::placeholder{color:var(--ink-muted);opacity:1}

/* eredmény */
.geo-out{margin-top:var(--gap-form);max-width:var(--measure-title)}
.geo-out[hidden]{display:none}
.geo-out > * + *{margin-top:var(--sp-32)}
.geo-msg{display:flex;gap:var(--sp-8);align-items:flex-start;color:var(--danger)}
.geo-msg .ico{width:20px;height:20px;margin-top:1px}
.geo-load{background:var(--surface);border-radius:var(--r-card);padding:var(--sp-24)}
.geo-load p{font-weight:500}
.geo-bar{height:8px;border-radius:var(--r-pill);background:var(--canvas);margin-top:var(--sp-16);overflow:hidden}
.geo-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width var(--dur-state) linear}
.geo-steps{list-style:none;margin-top:var(--sp-16);display:grid;gap:var(--sp-4);color:var(--ink-muted)}
.geo-steps li.done{color:var(--ink)}
.geo-steps li.done::before{content:"✓ ";color:var(--success)}
.geo-sum{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-24);align-items:center;background:var(--surface);border-radius:var(--r-card);padding:var(--sp-24)}
.geo-score{position:relative;width:112px;height:112px}
.geo-score svg{width:112px;height:112px;transform:rotate(-90deg)}
.geo-score circle{fill:none;stroke-width:10}
.geo-score .trk{stroke:var(--canvas)}
.geo-score .val{stroke:var(--ink);stroke-linecap:butt}
.geo-score b{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:var(--fs-title);font-weight:600;line-height:1}
.geo-score b small{font-size:var(--fs-chip);font-weight:500;color:var(--ink-muted);margin-top:var(--sp-4)}
.geo-sum h3{font-size:var(--fs-title);font-weight:500;line-height:var(--lh-title)}
.geo-sum p{color:var(--ink-muted);margin-top:var(--sp-8)}
.geo-tags{display:flex;flex-wrap:wrap;gap:var(--sp-8);margin-top:var(--sp-12)}
.geo-tag{display:inline-flex;align-items:center;gap:var(--sp-8);min-height:28px;padding:0 var(--sp-12);border-radius:var(--r-pill);background:var(--canvas);font-size:var(--fs-chip);font-weight:500}
.geo-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink-muted)}
.geo-tag.ok::before{background:var(--success)} .geo-tag.warn::before{background:var(--accent)} .geo-tag.fail::before{background:var(--danger)}
.geo-sub{font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--accent-text);margin-bottom:var(--sp-12)}
.geo-bench{display:grid;gap:var(--sp-8)}
.geo-bench .r{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr) 40px;gap:var(--sp-12);align-items:center}
.geo-bench .r span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.geo-bench .t{height:10px;border-radius:var(--r-pill);background:var(--surface);overflow:hidden}
.geo-bench .t i{display:block;height:100%;background:var(--ink-subtle)}
.geo-bench .r.you .t i{background:var(--accent)}
.geo-bench .r.you span{font-weight:600}
.geo-bench b{text-align:right;font-variant-numeric:tabular-nums}
.geo-fixes{list-style:none;display:grid;gap:var(--sp-12)}
.geo-fix{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-16);background:var(--surface);border-radius:var(--r-card);padding:var(--sp-16) var(--sp-24)}
.geo-fix .g{font-weight:600;font-variant-numeric:tabular-nums;min-width:40px}
.geo-fix small{display:block;color:var(--ink-muted);margin-top:var(--sp-4);font-size:var(--fs-body)}
.geo-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:var(--gap-items)}
.geo-cat{background:var(--surface);border-radius:var(--r-card);padding:var(--sp-24)}
.geo-cat h4{display:flex;justify-content:space-between;gap:var(--sp-12);font-size:var(--fs-body);font-weight:600}
.geo-cat h4 span{font-variant-numeric:tabular-nums;color:var(--ink-muted);font-weight:500}
.geo-cat ul{list-style:none;margin-top:var(--sp-12);display:grid;gap:var(--sp-8)}
.geo-cat li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:var(--sp-8)}
.geo-cat li .ico{width:20px;height:20px;margin-top:1px}
.geo-cat li.pass .ico{color:var(--success)} .geo-cat li.warn .ico{color:var(--accent-text)} .geo-cat li.fail .ico{color:var(--danger)}
.geo-cat li small{display:block;color:var(--ink-muted);font-size:var(--fs-body)}
.geo-panel{background:var(--surface);border-radius:var(--r-card);padding:var(--sp-24)}
.geo-panel h3{font-size:var(--fs-title);font-weight:500;line-height:var(--lh-title)}
.geo-panel p{color:var(--ink-muted);margin-top:var(--sp-8)}
.geo-panel .btn-row{margin-top:var(--sp-16)}
/* kártyán belül a mezőgomb a vászon színére lép vissza, különben beleolvad */
.geo-panel .field-btn{background:var(--canvas)}
.geo-panel .field-btn:hover{background:var(--surface-hover)}
.geo-inline{display:flex;gap:var(--sp-12);flex-wrap:wrap;margin-top:var(--sp-16)}
.geo-inline input[type="email"],.geo-inline input[type="text"]{flex:1 1 240px;min-width:0;min-height:48px;padding:0 var(--sp-24);border-radius:var(--r-control);border:var(--stroke) solid var(--ink-subtle);background:var(--canvas);color:var(--ink);font-size:var(--fs-body)}
.geo-inline input:focus{outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-offset)}
.geo-consent{display:flex;gap:var(--sp-12);align-items:flex-start;margin-top:var(--sp-12);color:var(--ink-muted)}
.geo-consent input{width:20px;height:20px;margin-top:2px;accent-color:var(--ink);flex:none}
.geo-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.geo-note{margin-top:var(--sp-12);font-weight:500}
.geo-note.err{color:var(--danger)} .geo-note.ok{color:var(--success)}
.geo-serp{background:var(--canvas);border-radius:var(--r-12);padding:var(--sp-16);margin-top:var(--sp-12)}
.geo-serp .u{color:var(--ink-muted);font-size:var(--fs-chip)}
.geo-serp .t{font-size:var(--fs-title);line-height:var(--lh-title);margin-top:var(--sp-4);color:var(--accent-text)}
.geo-serp .d{color:var(--ink-muted);margin-top:var(--sp-4)}
.geo-cmp table{width:100%;border-collapse:collapse;margin-top:var(--sp-16)}
.geo-cmp th,.geo-cmp td{text-align:left;padding:var(--sp-8) var(--sp-8);border-bottom:var(--stroke) solid var(--canvas)}
.geo-cmp th{font-weight:600}
.geo-areas{list-style:none;display:grid;gap:0}
.geo-areas li{display:grid;grid-template-columns:minmax(0,1fr) minmax(90px,200px) 64px;gap:var(--sp-16);align-items:center;padding:var(--sp-12) 0;border-bottom:var(--stroke) solid var(--surface)}
.geo-areas b{font-weight:600}
.geo-areas small{display:block;color:var(--ink-muted);font-size:var(--fs-chip);line-height:1.45;margin-top:2px}
.geo-areas .t{height:8px;border-radius:var(--r-pill);background:var(--surface);overflow:hidden}
.geo-areas .t i{display:block;height:100%;border-radius:inherit;background:var(--ink)}
.geo-areas .t.low i{background:var(--danger)}
.geo-areas .n{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.geo-areas .n small{font-weight:500;margin-top:0}
.geo-fix .g small{display:block;font-size:var(--fs-chip);font-weight:500;color:var(--ink-muted);margin-top:0}
.geo-fix h4{font-size:var(--fs-body);font-weight:600}
.geo-fix p{margin-top:var(--sp-4)}
.geo-fix a{color:var(--accent-text);font-weight:500}
.geo-meta{display:flex;flex-wrap:wrap;gap:var(--sp-8);font-size:var(--fs-chip);color:var(--ink-muted)}
.geo-meta span{display:inline-flex;align-items:center;min-height:22px;padding:0 var(--sp-8);border-radius:var(--r-pill);background:var(--canvas)}
.geo-st.fail{color:var(--danger);font-weight:600}
.geo-st.warn{color:var(--accent-text);font-weight:600}
.geo-cat li small.adv{color:var(--ink);margin-top:var(--sp-4)}
.geo-cat li small.adv b{font-weight:600;color:var(--accent-text)}
.geo-ext[hidden]{display:none}
.geo-ext{background:var(--surface);border-radius:var(--r-card);padding:var(--sp-24)}
.geo-cwv__v{font-weight:500}
.geo-cwv__v b{font-weight:600}
.geo-cwv__v.ok b{color:var(--success)}
.geo-cwv__v.bad b{color:var(--danger)}
.geo-lab{margin-top:var(--sp-24)}
.geo-tiles{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:var(--sp-12);margin-top:var(--sp-12)}
.geo-tiles li{display:grid;gap:2px;background:var(--canvas);border-radius:var(--r-12);padding:var(--sp-12) var(--sp-16);border-top:3px solid var(--ink-subtle)}
.geo-tiles li.good{border-top-color:var(--success)}
.geo-tiles li.ni{border-top-color:var(--route)}
.geo-tiles li.poor{border-top-color:var(--danger)}
.geo-tiles .k{font-family:var(--font-mono);font-size:var(--fs-chip);letter-spacing:var(--ls-eyebrow);color:var(--ink-muted)}
.geo-tiles b{font-size:var(--fs-title);font-weight:600;font-variant-numeric:tabular-nums;line-height:1.2}
.geo-tiles .r{font-size:var(--fs-chip);font-weight:600}
.geo-tiles li.good .r{color:var(--success)}
.geo-tiles li.poor .r{color:var(--danger)}
.geo-tiles small{color:var(--ink-muted);font-size:var(--fs-chip);line-height:1.4}
.geo-tiles .dist{display:flex;height:6px;border-radius:var(--r-pill);overflow:hidden;margin-top:var(--sp-8);background:var(--surface)}
.geo-tiles .dist i{display:block;height:100%}
.geo-tiles .dist .g{background:var(--success)}
.geo-tiles .dist .n{background:var(--route)}
.geo-tiles .dist .p{background:var(--danger)}
.geo-opps{color:var(--ink-muted);margin-top:var(--sp-12);font-size:var(--fs-chip);line-height:1.5}
.geo-entity{margin-top:var(--sp-16);color:var(--ink-muted)}
.geo-entity.ok{color:var(--ink)}
.geo-entity a{color:var(--accent-text);font-weight:500}
.geo-method{background:var(--surface);border-radius:var(--r-card);padding:var(--sp-16) var(--sp-24)}
.geo-method summary{cursor:pointer;font-weight:600;min-height:28px;display:flex;align-items:center}
.geo-method summary:focus-visible{outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-offset)}
.geo-method p{color:var(--ink-muted);margin-top:var(--sp-8)}
@media (max-width:640px){.geo-areas li{grid-template-columns:minmax(0,1fr) 64px}.geo-areas .t{grid-column:1 / -1;grid-row:2}}
.geo-cmp td.c,.geo-cmp th.c{text-align:center;font-variant-numeric:tabular-nums}
/* forrásmegjelölés, változás az előző mérés óta */
.geo-src{margin-top:var(--sp-12);font-size:var(--fs-chip);line-height:1.5;color:var(--ink-muted)}
.geo-src::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ink-subtle);margin-right:var(--sp-8);vertical-align:1px}
.geo-sum .geo-src{margin-top:var(--sp-8)}
.geo-first{color:var(--ink-muted);font-weight:400}
.geo-prev h3{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-12)}
.geo-delta{display:inline-flex;align-items:center;min-height:26px;padding:0 var(--sp-12);border-radius:var(--r-pill);background:var(--canvas);font-size:var(--fs-chip);font-weight:600}
.geo-delta.up{color:var(--success)} .geo-delta.down{color:var(--danger)}
.geo-chg{margin-top:var(--sp-8);color:var(--ink-muted)}
.geo-chg b{color:var(--ink);font-weight:600}
.geo-chg.up b{color:var(--success)} .geo-chg.down b{color:var(--danger)}
.geo-was{display:block;color:var(--ink-muted);font-size:var(--fs-chip)}
span.geo-was{display:inline}
/* CrUX-trend: kis diagramok mérőszámonként */
.geo-trend{margin-top:var(--sp-24)}
.geo-tr__h{font-family:var(--font-mono);font-size:var(--fs-chip);letter-spacing:var(--ls-eyebrow);color:var(--ink-muted)}
.geo-tr__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:var(--sp-12);margin-top:var(--sp-12)}
.geo-tr{margin:0;background:var(--canvas);border-radius:var(--r-12);padding:var(--sp-12) var(--sp-16);min-width:0}
.geo-tr figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-8);flex-wrap:wrap}
.geo-tr figcaption b{font-weight:600}
.geo-tr__d{font-size:var(--fs-chip);font-weight:600;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.geo-tr__d.better{color:var(--success)} .geo-tr__d.worse{color:var(--danger)}
.geo-tr__s{font-size:var(--fs-chip);color:var(--ink-muted);margin-top:2px}
.geo-tr__plot{position:relative;margin-top:var(--sp-8);border-radius:var(--r-12);touch-action:pan-y}
.geo-tr__plot:focus-visible{outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-offset)}
.geo-tr__plot svg{display:block}
.geo-tr__plot .ln{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.geo-tr__plot .base{stroke:var(--surface);stroke-width:1}
.geo-tr__plot .good{stroke:var(--success);stroke-width:1}
.geo-tr__plot .end{fill:var(--ink);stroke:var(--canvas);stroke-width:2}
.geo-tr__plot .xh{stroke:var(--ink-muted);stroke-width:1}
.geo-tr__plot .pt{fill:var(--canvas);stroke:var(--ink);stroke-width:2}
.geo-tip{position:absolute;top:-6px;transform:translateY(-100%);white-space:nowrap;background:var(--ink);color:var(--canvas);font-size:var(--fs-chip);font-weight:500;padding:2px var(--sp-8);border-radius:var(--r-pill);pointer-events:none;font-variant-numeric:tabular-nums}
.geo-tr__x{display:flex;justify-content:space-between;font-size:var(--fs-chip);color:var(--ink-muted);margin-top:var(--sp-4);font-variant-numeric:tabular-nums}
/* valós láthatóság (a PDF-kéréskor) */
.geo-real{margin-top:var(--sp-24);border-top:var(--stroke) solid var(--canvas);padding-top:var(--sp-24)}
.geo-rsteps{list-style:none;display:grid;gap:var(--sp-8);margin-top:var(--sp-8);color:var(--ink-muted)}
.geo-rsteps li{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-8)}
.geo-rsteps li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;border:2px solid var(--ink-subtle);align-self:center}
.geo-rsteps li.run{color:var(--ink);font-weight:500}
.geo-rsteps li.run::before{border-color:var(--accent);background:var(--accent);animation:geoPulse 1.1s ease-in-out infinite}
.geo-rsteps li.done{color:var(--ink)}
.geo-rsteps li.done::before{border-color:var(--success);background:var(--success)}
.geo-rsteps li.skip::before{border-color:var(--ink-subtle);background:transparent}
.geo-rsteps small{color:var(--ink-muted);font-weight:400}
@keyframes geoPulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.geo-rsteps li.run::before{animation:none}}
.geo-rsec{margin-top:var(--sp-32)}
.geo-rsec h4{font-size:var(--fs-body);font-weight:600}
.geo-kpi{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:var(--sp-12);margin-top:var(--sp-12)}
.geo-kpi li{display:grid;gap:2px;background:var(--canvas);border-radius:var(--r-12);padding:var(--sp-12) var(--sp-16)}
.geo-kpi .k{font-family:var(--font-mono);font-size:var(--fs-chip);letter-spacing:var(--ls-eyebrow);color:var(--ink-muted)}
.geo-kpi b{font-size:var(--fs-title);font-weight:600;font-variant-numeric:tabular-nums;line-height:1.2}
.geo-kpi small{color:var(--ink-muted);font-size:var(--fs-chip)}
.geo-tw{overflow-x:auto;margin-top:var(--sp-12);-webkit-overflow-scrolling:touch}
.geo-tbl{width:100%;border-collapse:collapse;font-size:var(--fs-chip);min-width:520px}
.geo-tbl th{text-align:left;font-weight:600;color:var(--ink-muted);padding:var(--sp-8);border-bottom:var(--stroke) solid var(--canvas);white-space:nowrap}
.geo-tbl td{padding:var(--sp-8);border-bottom:var(--stroke) solid var(--canvas);vertical-align:top}
.geo-tbl .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.geo-tbl td.u{color:var(--ink-muted);word-break:break-word}
.geo-tbl b{font-weight:600}
.geo-pill{display:inline-flex;align-items:center;min-height:22px;padding:0 var(--sp-8);border-radius:var(--r-pill);background:var(--canvas);font-weight:600;white-space:nowrap}
.geo-pill.ok{color:var(--success)} .geo-pill.no{color:var(--danger)}
.geo-pill.ok::before,.geo-pill.no::before{margin-right:4px}
/* keskeny kijelzőn a táblázat sorai kártyák: az első cella a cím, a többi címkézett sor */
@media (max-width:560px){
  .geo-tbl{min-width:0}
  .geo-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .geo-tbl tr{display:block;padding:var(--sp-8) 0;border-bottom:var(--stroke) solid var(--canvas)}
  .geo-tbl td{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-12);border:0;padding:2px 0;text-align:right}
  .geo-tbl td:first-child{display:block;text-align:left;padding-bottom:var(--sp-4)}
  .geo-tbl td[data-l]::before{content:attr(data-l);flex:none;color:var(--ink-muted);font-weight:500;text-align:left}
  .geo-tbl td.u{word-break:break-word}
}
.geo-pill.ok::before{content:"✓"} .geo-pill.no::before{content:"✕"}

/* =====================================================================
   Soronkénti betöltés
   ===================================================================== */
.statement{font-size:var(--fs-title);font-weight:500;line-height:var(--lh-title);letter-spacing:var(--ls-title);max-width:var(--measure)}
.statement p + p{margin-top:var(--sp-12)}
.statement-lg{font-size:var(--fs-h2);line-height:var(--lh-hero);letter-spacing:0;max-width:var(--measure-title)}
.statement-lg p + p{margin-top:var(--sp-16)}
[data-reveal] .rw{white-space:nowrap}
[data-reveal] .rl{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
[data-reveal] .rl-in{display:block;transform:translateY(110%);transition:transform var(--dur-reveal) var(--ease-out)}
[data-reveal].is-in .rl-in{transform:none}

/* =====================================================================
   Számozott kártyapakli
   ===================================================================== */
.deck{display:grid;gap:var(--sp-24)}
.deck.is-pinned{display:block}
.deck.is-pinned .dcard{position:sticky;top:var(--top,var(--pin-top));transform-origin:50% 0}
.deck.is-pinned .dcard + .dcard{margin-top:var(--sp-24)}
.dcard{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--r-panel);overflow:hidden;color:var(--on-scale);outline:var(--stroke) solid var(--canvas);background:var(--c8)}
.dcard .body{background:var(--c8);padding:var(--sp-48)}
.dcard h3{font-size:var(--fs-title);font-weight:500;line-height:var(--lh-title);letter-spacing:var(--ls-title);margin-bottom:var(--sp-16)}
.dcard p + p{margin-top:var(--sp-16)}
.dcard .num{background:var(--c5);display:grid;place-items:center;overflow:hidden;container-type:size;min-height:100%}
.dcard .num span{font-size:min(80cqh,70cqw);font-weight:600;line-height:1;letter-spacing:-.04em;transform:translateY(-.03em)}
.dcard.blue{--c8:var(--blue-800);--c5:var(--blue-500)}
.dcard.gold{--c8:var(--gold-800);--c5:var(--gold-500)}
.dcard.green{--c8:var(--green-800);--c5:var(--green-500)}
.dcard.red{--c8:var(--red-800);--c5:var(--red-500)}
@media (max-width:1180px){ .dcard{grid-template-columns:3fr 2fr} .dcard .body{padding:var(--sp-32)} }
@media (max-width:767px){
  .dcard{grid-template-columns:1fr} .dcard .body{padding:var(--sp-24)}
  .dcard .num{order:-1;height:104px;min-height:0;place-items:center end;padding-right:22px}
  .dcard .num span{font-size:88px}
}

/* =====================================================================
   „Kinek való" feltételkártyák
   ===================================================================== */
.fit{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:var(--gap-items);list-style:none;margin-top:var(--gap-cta)}
.fit li{background:var(--surface);border-radius:var(--r-card);padding:var(--sp-24)}
.fit p{margin-top:var(--sp-16);font-weight:500;text-wrap:balance}

/* =====================================================================
   Referenciák: vízszintes sor
   ===================================================================== */
.refs-track{display:flex;gap:var(--gap-items);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin-top:var(--gap-cta);padding-left:var(--margin-x);padding-right:var(--margin-x);scroll-padding-left:var(--margin-x);position:relative;z-index:3}
.refs-track::-webkit-scrollbar{display:none}
.ref{flex:0 0 var(--wide);scroll-snap-align:start;display:grid;grid-template-columns:1fr 1fr;border-radius:var(--r-panel);overflow:hidden;background:var(--surface);outline:var(--stroke) solid var(--canvas)}
.ref .txt{padding:var(--sp-32) var(--sp-48) var(--sp-32) var(--sp-32)}
.ref .eyebrow{margin-bottom:var(--sp-8)}
.ref h3{font-size:var(--fs-title);font-weight:500;line-height:var(--lh-title);letter-spacing:var(--ls-title)}
.steps{list-style:none;margin-top:var(--sp-24);display:grid;gap:var(--sp-16)}
.steps li{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:var(--sp-24);position:relative}
.steps li:not(:last-child)::before{content:"";position:absolute;left:15px;top:32px;bottom:calc(-1 * var(--sp-16));width:var(--stroke);background:var(--ink)}
.steps b{display:block;font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-label);font-size:var(--fs-chip);line-height:32px}
.ref .shot{background:var(--canvas);min-height:100%;position:relative}
.ref .shot img{width:100%;height:100%;object-fit:cover;object-position:50% 0;position:absolute;inset:0}
.ref .shot.empty{display:flex;align-items:center;justify-content:center;padding:var(--sp-32);color:var(--ink-muted);text-align:center}
.refs .dots{margin-left:var(--text-after-l)}
@media (max-width:1180px){ .ref{grid-template-columns:3fr 2fr} .ref .txt{padding:var(--sp-32)} }
@media (max-width:767px){
  .ref{grid-template-columns:1fr} .ref .shot{order:-1;aspect-ratio:1200/876;min-height:0} .ref .txt{padding:var(--sp-24)}
  .refs .dots{margin-left:var(--margin-x)}
}

/* =====================================================================
   Esettanulmány, záró blokk
   ===================================================================== */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:var(--gap-items);list-style:none;margin-top:var(--gap-cta);max-width:var(--measure-title)}
.facts li{background:var(--surface);border-radius:var(--r-card);padding:var(--sp-24)}
.facts b{display:block;font-size:var(--fs-title);font-weight:500;line-height:var(--lh-title);letter-spacing:var(--ls-title);font-variant-numeric:tabular-nums}
.facts span{display:block;margin-top:var(--sp-8);color:var(--ink-muted)}
.case-end{margin-top:var(--sp-64)}
.case-end h3{margin-bottom:var(--sp-24)}
.closing .btn-row{margin-top:var(--gap-cta)}

/* aloldal: link-kártyák */
.links{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:var(--gap-items);margin-top:var(--gap-cta);max-width:var(--measure-title)}
.links a{display:flex;flex-direction:column;gap:var(--sp-8);height:100%;background:var(--surface);border-radius:var(--r-card);padding:var(--sp-24);color:var(--ink);text-decoration:none;
  transition:background-color var(--dur-fast) var(--ease-out)}
.links a:hover{background:var(--surface-hover);text-decoration:none}
.links .t{font-weight:500;display:flex;align-items:baseline;gap:var(--sp-8)}
.links .d{color:var(--ink-muted)}
.links .go{margin-top:auto;padding-top:var(--sp-8);display:flex;align-items:center;gap:var(--sp-8);color:var(--ink-muted);font-size:var(--fs-chip);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase}
.links .go .arr{width:28px;height:10px;color:var(--accent)}

/* =====================================================================
   Kapcsolati űrlap
   ===================================================================== */
.form{display:grid;gap:var(--sp-24);margin-top:var(--gap-form);max-width:var(--measure-title)}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:var(--sp-16) var(--sp-24)}
.fld{display:grid;gap:var(--sp-8)}
.fld label,.fld .lbl{font-weight:500}
.fld .opt{color:var(--ink-muted);font-weight:400}
.input{width:100%;min-height:48px;padding:0 var(--sp-24);border-radius:var(--r-control);border:var(--stroke) solid var(--ink-subtle);background:var(--surface);color:var(--ink);font-size:var(--fs-body)}
textarea.input{border-radius:var(--r-card);padding:var(--sp-12) var(--sp-24);min-height:160px;resize:vertical;line-height:var(--lh-text)}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 26px) 50%,calc(100% - 20px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:var(--sp-48)}
.input::placeholder{color:var(--ink-muted);opacity:1}
.input:focus{outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-offset)}
.input[aria-invalid="true"]{border-color:var(--danger)}
.check{display:flex;gap:var(--sp-12);align-items:flex-start}
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--ink);flex:none}
.captcha-row{display:flex;gap:var(--sp-16);align-items:center;flex-wrap:wrap}
.captcha-q{font-weight:600;font-variant-numeric:tabular-nums;min-width:120px}
.captcha-row .input{max-width:160px}
.form-status{font-weight:500}
.form-status.error{color:var(--danger)} .form-status.success{color:var(--success)}
.contact-list{list-style:none;display:grid;gap:var(--gap-items);grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));margin-top:var(--gap-cta);max-width:var(--measure-title)}
.contact-list li{background:var(--surface);border-radius:var(--r-card);padding:var(--sp-24);display:grid;gap:var(--sp-8)}
.contact-list .ico{width:24px;height:24px}
.contact-list a{color:var(--ink);font-weight:500}


/* =====================================================================
   Kisebb gomb kártyán belül (a másodlagos gomb recept, kisebb méretben)
   ===================================================================== */
.btn-sm{min-height:40px;padding:0 var(--sp-16);font-size:var(--fs-body)}
.btn-sm .arr{width:22px}

/* =====================================================================
   #15 · #17 · közös AI-modul elemek a sávban
   ===================================================================== */
.band .note-line{margin-top:var(--sp-16);color:var(--ink-muted);max-width:var(--measure)}
.kl-out,.ar-out{margin-top:var(--gap-form);max-width:var(--measure-title)}
.kl-out[hidden],.ar-out[hidden]{display:none}
.kl-out > * + *,.ar-result > * + *{margin-top:var(--sp-32)}
.kl-head{font-size:var(--fs-title);font-weight:500;line-height:var(--lh-title);letter-spacing:var(--ls-title);max-width:var(--measure)}
.kl-head b{font-weight:600}
.kl-stages{display:grid;gap:var(--sp-16)}
.kl-stage{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr) 48px;gap:var(--sp-8) var(--sp-16);align-items:center}
.kl-stage .l{font-weight:500}
.kl-stage .t{height:12px;border-radius:var(--r-pill);background:var(--surface);overflow:hidden}
.kl-stage .t i{display:block;height:100%;background:var(--accent)}
.kl-stage b{text-align:right;font-variant-numeric:tabular-nums}
.kl-stage small{grid-column:1 / -1;color:var(--ink-muted);font-size:var(--fs-body)}
.kl-qs{list-style:none;display:grid;gap:var(--gap-items)}
.kl-qs li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--sp-16);align-items:start;background:var(--surface);border-radius:var(--r-card);padding:var(--sp-24)}
.kl-qs li p{font-size:var(--fs-title);font-weight:500;line-height:var(--lh-title);letter-spacing:var(--ls-title)}
.kl-qs li small{display:block;color:var(--ink-muted);margin-top:var(--sp-8);font-size:var(--fs-body)}
.kl-meta{color:var(--ink-muted)}
.kl-meta li{margin-left:1.2em}
@media (max-width:767px){ .kl-stage{grid-template-columns:minmax(0,1fr) 48px} .kl-stage .t{grid-column:1 / -1;order:3} }

/* ---------- választási sorok (rádió, jelölőnégyzet) ---------- */
.q{border:0;margin:0;padding:0;min-width:0}
.q + .q{margin-top:var(--sp-32)}
.q legend,.q .qt{display:block;font-size:var(--fs-title);font-weight:500;line-height:var(--lh-title);letter-spacing:var(--ls-title);padding:0}
.q .hint{display:block;color:var(--ink-muted);margin-top:var(--sp-8)}
.opts{display:grid;gap:var(--sp-8);margin-top:var(--sp-16)}
.choice{display:grid;grid-template-columns:22px minmax(0,1fr);gap:var(--sp-12);align-items:start;min-height:48px;padding:var(--sp-12) var(--sp-16);
  border-radius:var(--r-12);background:var(--surface);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out)}
.choice:hover{background:var(--surface-hover)}
.choice input{width:20px;height:20px;margin-top:1px;accent-color:var(--ink);flex:none}
.choice:has(input:checked){background:var(--surface-hover);font-weight:600}
.choice:has(input:focus-visible){outline:var(--focus-w) solid var(--focus);outline-offset:2px}
.choice input:focus-visible{outline:none}
.q-err{color:var(--danger);font-weight:500;margin-top:var(--sp-8)}
.q-err:empty{display:none}
.fld .q-err{margin-top:0}
.stepper{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-16);flex-wrap:wrap;margin-top:var(--sp-32)}
.progress-txt{font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--ink-muted)}
.pbar{height:8px;border-radius:var(--r-pill);background:var(--surface);overflow:hidden;margin-top:var(--sp-12)}
.pbar i{display:block;height:100%;background:var(--accent);transition:width var(--dur-state) var(--ease-out)}

/* ---------- #17 ársávbecslő ---------- */
.ar-card{background:var(--surface);border-radius:var(--r-card);padding:var(--sp-24) var(--sp-32)}
.ar-card h3{font-size:var(--fs-title);font-weight:500;line-height:var(--lh-title);letter-spacing:var(--ls-title)}
.ar-card ul{margin-top:var(--sp-12);padding-left:1.2em}
.ar-card li + li{margin-top:var(--sp-4)}
.ar-band-sum{font-size:var(--fs-title);font-weight:500;line-height:var(--lh-title)}
.ar-warn{color:var(--ink-muted)}
.ar-actions{display:flex;gap:var(--sp-12);flex-wrap:wrap;align-items:center}
.ar-form{display:grid;gap:var(--sp-16);margin-top:var(--sp-16)}
/* v2: AI-előtöltés */
.ar-ai{display:grid;gap:var(--sp-16);margin-top:var(--gap-form);max-width:var(--measure-title)}
.ar-ai[hidden],.ar-start[hidden],.ar-other[hidden]{display:none}   /* a .btn-row / .fld display-szabálya különben felülírja */
.ar-ai-t{font-size:var(--fs-title);font-weight:500;line-height:var(--lh-title);letter-spacing:var(--ls-title)}
.ar-ai .geo-field{min-height:52px}
.ar-ai textarea.input{min-height:96px}
.ar-ai .geo-note:empty{display:none}
.ar-ai-load[hidden],.ar-ai .btn-row[hidden]{display:none}
.ar-ai-load{scroll-margin:var(--sp-24) 0 96px}   /* a lebegő Nóra-gomb ne takarja ki az alját */
.ar-ai-load:focus{outline:none}
.ar-ai-load .geo-bar i{transition-duration:400ms}
.ar-ai-load .geo-rsteps{margin-top:var(--sp-16)}
.ar-ai-load .geo-rsteps li{display:block;position:relative;padding-left:var(--sp-16)}
.ar-ai-load .geo-rsteps li::before{position:absolute;left:0;top:.6em}
.ar-ai-load .geo-rsteps small{display:block}
.geo-load .ar-ai-wait{margin-top:var(--sp-16);font-weight:400;color:var(--ink-muted)}
.ar-ai-skip{min-height:44px;margin-top:var(--sp-4);color:var(--ink-muted)}
.ar-or{margin-top:var(--sp-16);font-weight:500}
.ar-ai-why{display:block;margin-top:var(--sp-12);color:var(--ink-muted)}
.ar-ai-why .tag{margin-right:var(--sp-8);color:var(--ink)}
.ar-ai-sum{margin-top:var(--sp-16);background:var(--surface);border-radius:var(--r-card);padding:var(--sp-16) var(--sp-24)}
.ar-base{margin-top:var(--sp-4);font-weight:400}
.ar-base summary{cursor:pointer;color:var(--ink-muted);width:fit-content;max-width:100%}
.ar-base summary:focus-visible{outline:var(--focus-w) solid var(--focus);outline-offset:2px}
.ar-base ul{margin-top:var(--sp-8);padding-left:1.2em}
/* v3: igényfelmérő — modulok indoklással, ár nélkül */
.ar-card .ar-mods{list-style:none;padding-left:0}
.ar-card .ar-mods li + li{margin-top:var(--sp-12)}
.ar-mods .tag{margin-left:var(--sp-8);vertical-align:middle}
.ar-why{display:block;color:var(--ink-muted);margin-top:var(--sp-4)}

/* =====================================================================
   #16 · A megvalósítás
   ===================================================================== */
.impl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px);gap:var(--sp-64);align-items:center;padding:0 var(--margin-x)}
.impl .txt{max-width:calc(var(--measure) - var(--sp-32))}
.impl .btn-row{margin-top:var(--gap-cta)}
.flow-card{position:relative;z-index:3;background:var(--surface);border-radius:var(--r-panel);padding:var(--sp-32) var(--sp-32) var(--sp-48);outline:var(--stroke) solid var(--canvas)}
.flow{display:flex;align-items:center;list-style:none}
.flow > li{display:flex;align-items:center}
.node{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--sp-8);text-align:center}
/* asztalon a címke az ikon alatt lóg, így a vonalak az ikonok közepén futnak */
.flow > li > .node .flow-lbl{position:absolute;top:calc(100% + var(--sp-8));left:50%;transform:translateX(-50%);white-space:nowrap}
.icn{width:56px;height:56px;border-radius:var(--r-circle);border:var(--stroke) solid var(--ink);display:grid;place-items:center;flex:none;background:var(--surface)}
.icn .ico{width:28px;height:28px}
.flow-lbl{font-family:var(--font-mono);font-size:13px;font-weight:500;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;line-height:1.3}
.link-h{flex:0 0 var(--sp-48);height:var(--stroke);background:var(--ink)}
.branches{position:relative;list-style:none;display:grid;gap:var(--sp-12);padding-left:var(--sp-24);margin-left:0}
.branches::before{content:"";position:absolute;left:0;top:28px;bottom:28px;width:var(--stroke);background:var(--ink)}
.branches li{position:relative;display:flex;align-items:center;gap:var(--sp-16)}
.branches li::before{content:"";position:absolute;left:calc(-1 * var(--sp-24));top:50%;width:var(--sp-24);height:var(--stroke);background:var(--ink)}
@media (max-width:1180px){ .impl{grid-template-columns:1fr} .flow-card{max-width:640px} }
@media (max-width:560px){
  .flow{flex-direction:column;align-items:flex-start}
  .flow > li{flex-direction:column;align-items:flex-start}
  .link-h{flex:none;width:var(--stroke);height:var(--sp-24);margin-left:27px}
  .flow > li > .node{flex-direction:row;text-align:left;gap:var(--sp-16)}
  .flow > li > .node .flow-lbl{position:static;transform:none;white-space:normal}
  .branches{margin-left:27px;margin-top:0}
  .flow-card{padding:var(--sp-24)}
}

/* =====================================================================
   #18 · Saját alkalmazások
   ===================================================================== */
.apps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-items);list-style:none;margin-top:var(--gap-cta)}
.app{display:flex;flex-direction:column;gap:var(--sp-16);align-items:flex-start;background:var(--surface);border-radius:var(--r-card);padding:var(--sp-24);outline:var(--stroke) solid var(--canvas)}
.app img{height:28px;width:auto}
.app p{flex:1}
@media (max-width:1180px){ .apps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .apps{grid-template-columns:1fr} }

/* =====================================================================
   Tölcsér (főoldal #tolcser): egy érdeklődő útja hat lépésben. Egy
   animációs rendszer: az esi.js [data-anim] → .is-on; a lépések
   egymás után jelennek meg, az összekötő vonal velük rajzolódik.
   ===================================================================== */
.funnel{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-48) var(--gap-items);margin-top:var(--gap-cta);counter-reset:none}
.fstep{position:relative;display:flex;flex-direction:column;gap:var(--sp-16)}
.fnum{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--route);color:var(--on-accent);font-weight:600;font-variant-numeric:tabular-nums}
.fstep::before{content:"";position:absolute;top:21px;left:52px;right:calc(-1 * var(--gap-items) + 8px);height:2px;background:var(--route);opacity:.45;transform-origin:left center}
.fstep:nth-child(3n)::before,.fstep:last-child::before{display:none}
.fbody{display:flex;flex-direction:column;gap:var(--sp-12);align-items:flex-start;flex:1;background:var(--surface);border-radius:var(--r-card);padding:var(--sp-24);outline:var(--stroke) solid var(--canvas)}
.fbody h3{font-size:var(--fs-title);font-weight:500;line-height:var(--lh-title)}
.fbody p{color:var(--ink-muted)}
.fbody .btn{margin-top:auto;max-width:100%;white-space:normal}
.fkick{display:inline-flex;align-items:center;gap:var(--sp-8);font-family:var(--font-mono);font-size:var(--fs-chip);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--accent-text)!important}
.fkick .ico{width:18px;height:18px}
.fprod{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-8) var(--sp-12);min-height:28px}
.fprod img{height:24px;width:auto}
.ftool{display:inline-flex;align-items:center;min-height:26px;padding:0 var(--sp-12);border-radius:var(--r-pill);background:var(--canvas);font-size:var(--fs-chip);font-weight:500;color:var(--ink)}
.funnel-note{margin-top:var(--sp-48);max-width:var(--measure-title);color:var(--ink-muted)}
.funnel-note b{color:var(--ink);font-weight:600}
.js .funnel[data-anim] .fstep{opacity:0;transform:translateY(16px);transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
.js .funnel[data-anim] .fstep::before{transform:scaleX(0);transition:transform 500ms var(--ease-out)}
.js .funnel.is-on .fstep{opacity:1;transform:none}
.js .funnel.is-on .fstep::before{transform:scaleX(1)}
.funnel .fstep:nth-child(2),.funnel .fstep:nth-child(2)::before{transition-delay:.12s}
.funnel .fstep:nth-child(3),.funnel .fstep:nth-child(3)::before{transition-delay:.24s}
.funnel .fstep:nth-child(4),.funnel .fstep:nth-child(4)::before{transition-delay:.36s}
.funnel .fstep:nth-child(5),.funnel .fstep:nth-child(5)::before{transition-delay:.48s}
.funnel .fstep:nth-child(6),.funnel .fstep:nth-child(6)::before{transition-delay:.6s}
@media (max-width:1180px){
  .funnel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fstep:nth-child(3n)::before{display:block}
  .fstep:nth-child(2n)::before{display:none}
}
@media (max-width:640px){
  /* egy oszlopban a számok magán a vonalon ülnek, így az külön összekötő nélkül is összefogja a lépéseket */
  :root{--axis-e:calc(var(--margin-x) + 22px);--edge-l:calc(var(--axis-e) + var(--route-w) / 2 + var(--line-clear))}
  .sec[data-route="e"] .wide{margin-left:var(--margin-x);width:calc(100% - 2 * var(--margin-x))}
  .funnel{grid-template-columns:1fr;gap:var(--sp-32)}
  .fstep{padding-left:60px}
  .fnum{position:absolute;left:0;top:0}
  .fstep::before,.fstep:nth-child(3n)::before{display:none}
  .funnel-note{margin-left:calc(var(--edge-l) - var(--margin-x))}
}
@media (prefers-reduced-motion:reduce){ .js .funnel[data-anim] .fstep,.js .funnel[data-anim] .fstep::before{transition:none} }

/* „Előbb próbáld ki”: élő termékek kártyákon + bizonyíték-sor */
.trygrid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-items);margin-top:var(--gap-cta)}
.try{display:flex;flex-direction:column;gap:var(--sp-12);align-items:flex-start;background:var(--surface);border-radius:var(--r-card);padding:var(--sp-24);outline:var(--stroke) solid var(--canvas)}
.try h3{font-size:var(--fs-title);font-weight:500;line-height:var(--lh-title)}
.try p:not(.fkick){color:var(--ink-muted);flex:1}
.proofs{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-items);margin-top:var(--sp-48);border-top:var(--stroke) solid var(--surface);padding-top:var(--sp-32)}
.proofs li{display:grid;gap:var(--sp-4)}
.proofs b{font-size:var(--fs-title);font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums}
.proofs span{color:var(--ink-muted)}
@media (max-width:1180px){ .trygrid{grid-template-columns:repeat(2,minmax(0,1fr))} .proofs{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .trygrid,.proofs{grid-template-columns:1fr} }

/* Élő példa (iElectric): szöveg + kattintható lépések, mellette a lépésenkénti bemutató */
.livecase{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,620px);gap:var(--sp-64);align-items:center;padding:0 var(--margin-x)}
.lcshot{position:relative;z-index:3}
.livecase .sec-head{max-width:calc(var(--measure) - var(--sp-32))}
.lcsteps{list-style:none;counter-reset:lc;display:grid;gap:var(--sp-16);margin-top:var(--sp-24)}
.lcsteps li{counter-increment:lc;position:relative;padding-left:44px;color:var(--ink-muted)}
.lcsteps li::before{content:counter(lc);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface);color:var(--ink);font-size:var(--fs-chip);font-weight:600}
.lcsteps b{color:var(--ink);font-weight:600}
.livecase .btn-row{margin-top:var(--gap-cta)}
.lcshot{margin:0}
.lcshot figcaption{margin-top:var(--sp-12);color:var(--ink-muted);font-size:var(--fs-chip)}
@media (max-width:1024px){ .livecase{grid-template-columns:1fr;gap:var(--sp-48)}
  .livecase .sec-head{max-width:calc(var(--axis-r) - var(--route-w) / 2 - var(--line-clear) - var(--margin-x))} }
.livecase .lcnote{margin-top:var(--sp-24);color:var(--ink-muted);max-width:var(--measure)}

/* Lépésenkénti bemutató (#elo-pelda): a lépés gombja és a kép egy állapotot oszt.
   Egy animációs rendszer: az aktív kép lassan a fontos részre közelít (transform),
   az alsó sáv a következő lépésig hátralévő időt mutatja; ennek a vége lapoz (esi.js).
   Képernyőn kívül, rejtett lapon, egér alatt és fókuszban megáll; reduced-motion: kézi lapozás. */
.tsteps{gap:var(--sp-8)}
.tsteps li{padding-left:44px}
.tsteps li::before{top:10px;transition:background-color var(--dur-state) var(--ease-out),color var(--dur-state) var(--ease-out)}
.tstep{display:block;width:100%;margin:0 0 0 calc(-1 * var(--sp-12));padding:var(--sp-8) var(--sp-12);border:0;border-radius:var(--r-well);
  background:transparent;color:var(--ink-muted);font:inherit;text-align:left;cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.tstep:hover{background:var(--surface)}
.tstep:focus-visible{outline:var(--focus-w) solid var(--accent);outline-offset:2px}
.tstep[aria-pressed="true"]{background:var(--surface);color:var(--ink)}
.tsteps li:has(.tstep[aria-pressed="true"])::before{background:var(--route);color:var(--on-accent)}
.tour{margin:0}
.tour-frame{position:relative;aspect-ratio:16/10;border-radius:var(--r-card);overflow:hidden;background:#161320;box-shadow:0 0 0 1px var(--surface-hover);cursor:zoom-in}
.tour-img{--zs:1.38;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;opacity:0;transition:opacity 500ms var(--ease-out);transform-origin:var(--fx,50%) var(--fy,50%)}
.tour-img.is-cur{opacity:1}
.tour-img[data-step="0"]{--fx:74%;--fy:46%;--zs:1.12;object-position:50% 50%}
.tour-img[data-step="1"]{--fx:20%;--fy:34%}
.tour-img[data-step="2"]{--fx:26%;--fy:46%}
.tour-img[data-step="3"]{--fx:78%;--fy:36%}
.tour-img[data-step="4"]{--fx:74%;--fy:42%}
.tour-img[data-step="5"]{--fx:36%;--fy:30%}
.tour.is-zoom .tour-img.is-cur{animation:tourZoom var(--tour-d,7s) cubic-bezier(.4,0,.3,1) forwards}
.tour-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(22,19,32,.35);display:none}
.tour.is-run .tour-bar{display:block}
.tour-bar i{display:block;height:100%;background:var(--route);transform-origin:left center;transform:scaleX(0)}
.tour.is-run .tour-bar i{animation:tourBar var(--tour-d,7s) linear forwards}
.tour.is-paused .tour-img.is-cur,.tour.is-paused .tour-bar i{animation-play-state:paused}
@keyframes tourZoom{from{transform:scale(1)}to{transform:scale(var(--zs,1.3))}}
@keyframes tourBar{to{transform:scaleX(1)}}
.tour-tag{position:absolute;left:var(--sp-12);bottom:var(--sp-16);font-family:var(--font-mono);font-size:var(--fs-chip);color:#F0EDEA;opacity:0;transition:opacity var(--dur-state) var(--ease-out);pointer-events:none}
.tour[data-cur="0"] .tour-tag{opacity:.75}
.tour-zoom{position:absolute;top:var(--sp-12);right:var(--sp-12);display:inline-flex;align-items:center;gap:var(--sp-8);min-height:44px;padding:0 var(--sp-16);
  border:0;border-radius:var(--r-pill);background:rgba(22,19,32,.78);color:#F0EDEA;font:inherit;font-size:14px;font-weight:500;cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-out)}
.tour-zoom:hover{background:rgba(22,19,32,.92)}
.tour-zoom:focus-visible{outline:var(--focus-w) solid var(--accent);outline-offset:2px}
.tour-zoom .ico{width:18px;height:18px}
.tour figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-4) var(--sp-16);margin-top:var(--sp-12);font-size:14px}
.tour-cap{color:var(--ink)}
.tour-src{color:var(--ink-subtle)}
@media (prefers-reduced-motion:reduce){ .tour-img{transition:none} .tour-img.is-cur{animation:none!important} }

/* Nagyító ablak (bemutató képei): illesztett nézet ↔ kétszeres méret görgetéssel */
.zoombox{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#F0EDEA}
.zoombox::backdrop{background:rgba(12,10,18,.9)}
.zb-in{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;padding:72px 16px 24px}
.zb-in img{display:block;margin:0 auto;width:min(1600px,100%);height:auto;border-radius:var(--r-card);cursor:zoom-in}
.zoombox.is-z .zb-in img{width:min(3200px,200%);max-width:none;cursor:zoom-out}
.zb-bar{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16);padding:var(--sp-12) var(--sp-16);background:rgba(12,10,18,.92);z-index:1}
.zb-cap{font-size:14px;opacity:.85}
.zb-x{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:0;border-radius:var(--r-pill);background:rgba(240,237,234,.12);color:#F0EDEA;font:inherit;font-size:14px;cursor:pointer;padding:0 var(--sp-16)}
.zb-x:focus-visible{outline:var(--focus-w) solid var(--accent);outline-offset:2px}

/* =====================================================================
   iElectric esettanulmány (#esettanulmany): borító, Google-mérés,
   növekedés, belépési pontok. Animáció: [data-anim] → .is-on, egyszer.
   ===================================================================== */
.ccover{position:relative;margin-top:var(--gap-cta);aspect-ratio:21/9;border-radius:var(--r-panel);overflow:hidden;background:#161320}
.ccover-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:25% 50%}
.ccover-shot{position:absolute;right:5%;top:11%;width:47%;box-shadow:0 0 0 1px rgba(240,237,234,.16)}
.ccover-tag{position:absolute;left:var(--sp-24);bottom:var(--sp-16);font-family:var(--font-mono);font-size:var(--fs-chip);color:#F0EDEA;opacity:.7}
.ccover figcaption{position:absolute;right:5%;bottom:var(--sp-16);font-size:14px;color:#F0EDEA;opacity:.85}
.js .ccover[data-anim] .ccover-bg{transform:scale(1.06);transition:transform 1.8s var(--ease-out)}
.js .ccover[data-anim] .ccover-shot{opacity:0;transform:translateY(24px);transition:opacity 700ms var(--ease-out) .2s,transform 700ms var(--ease-out) .2s}
.js .ccover.is-on .ccover-bg,.js .ccover.is-on .ccover-shot{transform:none;opacity:1}
@media (max-width:767px){
  .ccover{aspect-ratio:4/5}
  .ccover-bg{object-position:20% 50%}
  .ccover-shot{width:88%;right:6%;top:auto;bottom:56px}
  .ccover figcaption{left:var(--sp-16);right:auto}
  .ccover-tag{top:var(--sp-16);bottom:auto;left:var(--sp-16)}
}
.cblock{margin-top:var(--sp-72)}
.cblock-d{margin-top:var(--sp-16);color:var(--ink-muted);max-width:var(--measure)}

.serp-leg{display:flex;align-items:center;gap:var(--sp-8);margin-top:var(--sp-24);font-size:14px;color:var(--ink-muted)}
.serp-sw{width:14px;height:14px;border-radius:3px;background:var(--accent-text);flex:none}
.serp{list-style:none;margin-top:var(--sp-16);display:grid;gap:var(--gap-items)}
.serp-row{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);grid-template-areas:"q ai" "q grid" "q n";gap:var(--sp-12) var(--sp-32);
  background:var(--surface);border-radius:var(--r-card);padding:var(--sp-24)}
.serp-q{grid-area:q;font-size:var(--fs-title);font-weight:500;line-height:var(--lh-title)}
.serp-ai{grid-area:ai;display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-8) var(--sp-12)}
.serp-k{font-family:var(--font-mono);font-size:var(--fs-chip);font-weight:500;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;padding:3px 10px;border-radius:var(--r-pill);white-space:nowrap}
.serp-ai.is-first .serp-k{background:var(--accent);color:var(--on-accent)}
.serp-ai.is-yes .serp-k{box-shadow:inset 0 0 0 2px var(--accent);color:var(--accent-text)}
.serp-ai.is-no{color:var(--ink-muted)}
.serp-ai.is-no .serp-k{background:var(--surface-hover);color:var(--ink-muted)}
.serp-grid{grid-area:grid;display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:4px}
.serp-grid i{display:block;height:16px;border-radius:3px;background:var(--surface-hover)}
.serp-grid i.on{background:var(--accent-text)}
.serp-n{grid-area:n;font-size:14px;color:var(--ink-muted)}
.serp-n b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.js .serp[data-anim] .serp-row{opacity:0;transform:translateY(12px);transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
.js .serp[data-anim] .serp-grid i.on{transform:scaleY(.25);opacity:.25;transition:transform 450ms var(--ease-out) .35s,opacity 450ms var(--ease-out) .35s}
.js .serp.is-on .serp-row{opacity:1;transform:none}
.js .serp.is-on .serp-grid i.on{transform:none;opacity:1}
.serp-row:nth-child(2),.serp-row:nth-child(2) .serp-grid i.on{transition-delay:.1s,.1s}
.serp-row:nth-child(2) .serp-grid i.on{transition-delay:.45s}
.serp-row:nth-child(3){transition-delay:.2s}
.serp-row:nth-child(3) .serp-grid i.on{transition-delay:.55s}
.serp-row:nth-child(4){transition-delay:.3s}
.serp-row:nth-child(4) .serp-grid i.on{transition-delay:.65s}
.serp-row:nth-child(5){transition-delay:.4s}
@media (max-width:900px){
  .serp-row{grid-template-columns:minmax(0,1fr);grid-template-areas:"q" "ai" "grid" "n";padding:var(--sp-16)}
  .serp-grid{gap:3px}
  .serp-grid i{height:14px}
}

.grow-wrap{margin-top:var(--sp-32);overflow-x:auto;scrollbar-width:thin;padding-bottom:var(--sp-8)}
.grow-wrap:focus-visible{outline:var(--focus-w) solid var(--accent);outline-offset:4px}
.grow{list-style:none;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--sp-8);min-width:780px}
.grow li{display:grid;grid-template-rows:240px auto auto;gap:var(--sp-8);align-content:start}
.g-bar{position:relative;display:block;height:240px;padding-top:36px}
.g-bar svg{display:block;width:100%;height:100%;overflow:visible;transform-origin:50% 100%}
.g-bar rect{fill:var(--accent-text)}
.grow li:last-child .g-bar rect{fill:var(--route)}
.g-v{position:absolute;left:0;right:0;bottom:calc(var(--v, 1) * (100% - 36px) + 6px);font-size:var(--fs-title);font-weight:500;line-height:1;font-variant-numeric:tabular-nums}
.g-m{font-family:var(--font-mono);font-size:var(--fs-chip);font-weight:500;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--ink);border-top:var(--stroke) solid var(--ink);padding-top:var(--sp-8)}
.g-n{font-size:14px;line-height:1.35;color:var(--ink-muted);overflow-wrap:anywhere;hyphens:auto}
.js .grow[data-anim] .g-bar svg{transform:scaleY(0);transition:transform 700ms var(--ease-out)}
.js .grow[data-anim] .g-v{opacity:0;transition:opacity 400ms var(--ease-out) .5s}
.js .grow.is-on .g-bar svg{transform:none}
.js .grow.is-on .g-v{opacity:1}
.grow li:nth-child(2) svg{transition-delay:.08s!important} .grow li:nth-child(3) svg{transition-delay:.16s!important}
.grow li:nth-child(4) svg{transition-delay:.24s!important} .grow li:nth-child(5) svg{transition-delay:.32s!important}
.grow li:nth-child(6) svg{transition-delay:.4s!important}  .grow li:nth-child(7) svg{transition-delay:.48s!important}
.grow li:nth-child(8) svg{transition-delay:.56s!important}

.paths{margin-top:var(--sp-32)}
.p-in{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-items)}
.p-in li{position:relative;background:var(--surface);border-radius:var(--r-card);padding:var(--sp-16) var(--sp-16) var(--sp-24)}
.p-q{font-weight:600;line-height:1.3;color:var(--ink)}
.p-t{margin-top:var(--sp-8);font-size:14px;line-height:1.35;color:var(--ink-muted)}
.p-in li::after{content:"";position:absolute;left:50%;top:100%;width:var(--stroke);height:24px;margin-left:-1px;background:var(--route);transform-origin:50% 0}
.p-bus{position:relative;height:var(--stroke);margin:24px calc(12.5% - 4.5px) 0;background:var(--route);transform-origin:50% 50%}
.p-bus::after{content:"";position:absolute;left:50%;top:0;width:var(--stroke);height:32px;margin-left:-1px;background:var(--route);transform-origin:50% 0}
.p-out{position:relative;margin:32px auto 0;max-width:36rem;background:var(--ink);color:var(--canvas);border-radius:var(--r-card);padding:var(--sp-24);text-align:center}
.p-h{font-size:var(--fs-title);font-weight:500;line-height:var(--lh-title)}
.p-chips{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-8);margin-top:var(--sp-16)}
.p-chips li{font-family:var(--font-mono);font-size:var(--fs-chip);font-weight:500;padding:5px 12px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px currentColor}
.p-chips li:first-child{background:var(--route);color:#161320;box-shadow:none}
.p-d{margin-top:var(--sp-16);opacity:.85}
.js .paths[data-anim] .p-in li{opacity:0;transform:translateY(12px);transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out)}
.js .paths[data-anim] .p-in li::after{transform:scaleY(0);transition:transform 300ms var(--ease-out) .55s}
.js .paths[data-anim] .p-bus{transform:scaleX(0);transition:transform 450ms var(--ease-out) .8s}
.js .paths[data-anim] .p-bus::after{transform:scaleY(0);transition:transform 300ms var(--ease-out) 1.2s}
.js .paths[data-anim] .p-out{opacity:0;transform:translateY(12px);transition:opacity 500ms var(--ease-out) 1.4s,transform 500ms var(--ease-out) 1.4s}
.js .paths.is-on .p-in li,.js .paths.is-on .p-out{opacity:1;transform:none}
.js .paths.is-on .p-in li::after{transform:none}
.js .paths.is-on .p-bus{transform:none}
.js .paths.is-on .p-bus::after{transform:none}
.paths .p-in li:nth-child(2){transition-delay:.1s} .paths .p-in li:nth-child(3){transition-delay:.2s} .paths .p-in li:nth-child(4){transition-delay:.3s}
@media (max-width:900px){
  .p-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-in li::after{display:none}
  .p-bus{height:32px;width:var(--stroke);margin:0 auto;background:var(--route)}
  .p-bus::after{display:none}
  .p-out{margin-top:0}
}
@media (max-width:520px){ .p-in{grid-template-columns:minmax(0,1fr)} }
@media (prefers-reduced-motion:reduce){
  .js .ccover[data-anim] *,.js .serp[data-anim] *,.js .serp[data-anim] .serp-row,.js .grow[data-anim] *,.js .paths[data-anim] *,.js .paths[data-anim] .p-bus::after,.js .paths[data-anim] .p-in li::after{transition:none!important}
}


/* =====================================================================
   #20 · Kapcsolat — arany sáv, négylépéses varázsló
   ===================================================================== */
.band-gold{position:relative;padding-top:var(--section-pad);padding-bottom:var(--section-pad);background:transparent}
.band-gold::before{content:"";position:absolute;inset:0;z-index:0;background:var(--gold-500)}
/* az arany sávon az út vászonszínű sávként fut tovább (a vonal maga itt nem látszana) */
.band-gold::after{content:"";position:absolute;top:0;bottom:0;z-index:1;left:calc(var(--axis-r) - var(--route-w) / 2);width:var(--route-w);background:#F0EDEA}
.band-gold > .in{position:relative;z-index:2}
.band-gold .eyebrow{color:var(--ink)}
.wz{margin-top:var(--gap-form);position:relative;z-index:3}
.wz-progress{display:flex;flex-wrap:wrap;gap:var(--sp-8) var(--sp-24);list-style:none;margin-bottom:var(--sp-16);font-family:var(--font-mono);font-size:13px;font-weight:500;letter-spacing:var(--ls-eyebrow);text-transform:uppercase}
.wz-progress li{display:flex;align-items:center;gap:var(--sp-8);color:var(--ink)}
.wz-progress li::before{content:"";width:10px;height:10px;border-radius:50%;border:var(--stroke) solid var(--ink)}
.wz-progress li[aria-current="step"]::before{background:var(--ink)}
.wz-progress li.done::before{background:var(--ink)}
.wz-step{border:0;padding:0;margin:0;min-width:0}
.wz-step > legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.wz-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap-items);align-items:start}
.wz-main,.wz-side{border-radius:var(--r-panel);padding:var(--sp-32)}
.wz-main{background:var(--surface);color:var(--ink)}
.wz-side{background:var(--canvas);color:var(--ink)}
.wz-num{display:block;font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--accent-text);margin-bottom:var(--sp-8)}
.wz-h{font-size:var(--fs-title);font-weight:500;line-height:var(--lh-title);letter-spacing:var(--ls-title);margin-bottom:var(--sp-24)}
.wz-main .fld + .fld,.wz-main .fld + .check,.wz-main .check + .fld,.wz-main .fld + .form-row,.wz-main .form-row + .fld,.wz-main .form-row + .form-row{margin-top:var(--sp-16)}
.wz-main .input{background:var(--canvas)}
/* Chrome/Edge automatikus kitöltés: a böngésző kékes UA-háttere (!important) helyett a mező saját felülete.
   A háttér színe örökölt --af-bg-ből jön, alapból --surface; ahol a mező más felületen ül, ott felülírva. */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill,select:-webkit-autofill{-webkit-text-fill-color:var(--ink);caret-color:var(--ink);-webkit-box-shadow:0 0 0 1000px var(--af-bg,var(--surface)) inset;box-shadow:0 0 0 1000px var(--af-bg,var(--surface)) inset;transition:background-color 86400s 0s}
.wz-main,.geo-inline{--af-bg:var(--canvas)}
.wz-info{background:var(--canvas);border-radius:var(--r-12);padding:var(--sp-16) var(--sp-24);margin-top:var(--sp-24)}
.wz-info h4{font-weight:600}
.wz-info p{margin-top:var(--sp-8);color:var(--ink-muted)}
.wz-nav{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-12);flex-wrap:wrap;margin-top:var(--sp-32)}
.wz-nav .btn:only-child{margin-left:auto}
.wz-done{background:var(--surface);border-radius:var(--r-panel);padding:var(--sp-48);max-width:var(--measure-title)}
.wz-done h3{font-size:var(--fs-title);font-weight:500;line-height:var(--lh-title)}
.wz-done p{margin-top:var(--sp-16);max-width:var(--measure)}
.js .wz-step:not(.on){display:none}
@media (max-width:1023px){ .wz-grid{grid-template-columns:1fr} }
@media (max-width:767px){ .wz-main,.wz-side{padding:var(--sp-24)} .wz-done{padding:var(--sp-24)} }

/* =====================================================================
   #21 · Gyakori kérdések
   ===================================================================== */
.faq{margin-top:var(--gap-cta);background:var(--canvas);color:var(--ink);border-radius:var(--r-panel);padding:var(--sp-16) var(--sp-48);max-width:var(--measure-title)}
.faq details + details{border-top:var(--stroke) solid var(--surface)}
.faq summary{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;gap:var(--sp-16);align-items:center;padding:var(--sp-24) 0;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .n{font-weight:600;color:var(--accent-text);font-variant-numeric:tabular-nums}
.faq summary .qq{font-size:var(--fs-title);font-weight:500;line-height:var(--lh-title);letter-spacing:var(--ls-title)}
.faq summary .pm{width:40px;height:40px;border-radius:var(--r-circle);border:var(--stroke) solid currentColor;display:grid;place-items:center}
.faq summary .pm svg{width:16px;height:16px}
.faq details[open] .pm .v{display:none}
.faq .a{padding:0 56px var(--sp-24);color:var(--ink-muted);max-width:calc(var(--measure) + 56px)}
.faq .a p + p{margin-top:var(--sp-12)}
.to-top{display:inline-flex;align-items:center;gap:var(--sp-8);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink);text-decoration:none}
.to-top svg{width:14px;height:14px}
.to-top-wrap{position:relative;height:var(--route-dot);margin-top:var(--sp-64)}
.to-top-wrap .to-top{position:absolute;top:50%;transform:translateY(-50%);left:calc(var(--axis-r) + var(--route-dot) / 2 + var(--sp-16))}
@media (max-width:767px){
  .faq{padding:var(--sp-8) var(--sp-24)}
  .faq summary{grid-template-columns:28px minmax(0,1fr) 40px;gap:var(--sp-12)}
  .faq .a{padding:0 0 var(--sp-24)}
  .to-top-wrap .to-top{left:auto;right:calc(100% - var(--axis-r) + var(--route-dot) / 2 + var(--sp-12));transform:translateY(-50%)}
}

/* =====================================================================
   Lábléc
   ===================================================================== */
.site-foot{position:relative;z-index:2;background:var(--canvas);color:var(--ink);padding:var(--sp-96) var(--margin-x) var(--sp-48)}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-32);flex-wrap:wrap}
.foot-top .logo-link img{height:40px}
.foot-top p{color:var(--ink-muted);max-width:var(--measure);margin-top:var(--sp-16)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:var(--sp-32) var(--sp-24);margin-top:var(--sp-64)}
.foot-grid h2{font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--accent-text);margin-bottom:var(--sp-12)}
.foot-grid ul{list-style:none;display:grid;gap:var(--sp-4)}
.foot-grid a{display:inline-block;padding:var(--sp-4) 0;line-height:1.3;color:var(--ink-muted);text-decoration:none}
.foot-grid a:hover{color:var(--ink);text-decoration:underline}
.foot-bottom{display:flex;justify-content:space-between;gap:var(--sp-16) var(--sp-32);flex-wrap:wrap;margin-top:var(--sp-64);padding-top:var(--sp-24);border-top:var(--stroke) solid var(--surface);color:var(--ink-muted)}
.foot-bottom a{color:var(--ink-muted)}
.foot-bottom ul{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-8) var(--sp-24)}

/* =====================================================================
   Cikk — tudástár-cikkek és jogi oldalak (tools/migrate_legacy.py)
   A törzs a vonal bal oldalán fut; széles képernyőn a tartalomjegyzék
   a szöveg és a vonal között ragad, keskenyen a cikk elején nyitható.
   ===================================================================== */
.art-meta{margin-top:var(--sp-24);font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;line-height:var(--lh-eyebrow);color:var(--ink-muted)}
.art-grid{display:grid;grid-template-columns:minmax(0,var(--measure));gap:var(--sp-32) var(--sp-48)}
.art-toc{background:var(--surface);border-radius:var(--r-card);padding:var(--sp-8)}
.art-toc-h{font-size:var(--fs-body);font-weight:500;line-height:var(--lh-ui)}
.art-toc-btn{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);width:100%;min-height:48px;padding:0 var(--sp-16);
  border:0;border-radius:var(--r-12);background:transparent;color:var(--ink);font:inherit;font-weight:500;cursor:pointer;text-align:left}
.art-toc-btn .chev{width:16px;height:16px;transition:transform var(--dur-fast) var(--ease-out)}
.art-toc-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.art-toc-t{display:none;padding:var(--sp-12) var(--sp-16) var(--sp-8)}
html:not(.js) .art-toc-t{display:block}
html:not(.js) .art-toc-btn{display:none}
.art-toc-l{padding:0 0 var(--sp-8)}
.art-toc-l[hidden]{display:none}
.art-toc-l a{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--sp-8);padding:var(--sp-8) var(--sp-16);border-radius:var(--r-12);
  color:var(--ink-muted);text-decoration:none;font-size:var(--fs-eyebrow);line-height:var(--lh-eyebrow);
  transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.art-toc-l a:hover{background:var(--surface-hover);color:var(--ink);text-decoration:none}
.art-toc-l a[aria-current="location"]{color:var(--ink);background:var(--canvas)}
.art-toc-l a[aria-current="location"] .n{color:var(--accent-text)}
.art-toc-l .n{font-family:var(--font-mono);font-weight:500;font-variant-numeric:tabular-nums}
.art-toc-l .t{min-width:0;hyphens:auto;overflow-wrap:anywhere}
@media (min-width:1360px){
  .art-grid.has-toc{grid-template-columns:minmax(0,var(--measure)) minmax(min(200px,100%),1fr)}
  .art-grid.has-toc .art-toc{grid-column:2;grid-row:1;align-self:start;position:sticky;top:var(--pin-top);
    max-height:calc(100dvh - var(--pin-top) - var(--sp-24));overflow:auto;overscroll-behavior:contain}
  .art-grid.has-toc .art-body{grid-column:1;grid-row:1}
  .art-toc-t{display:block}
  .art-toc-btn{display:none}
  .art-toc-l[hidden]{display:block}
}

/* törzs: 01 · cím, bekezdések a mértékre, szakaszonként 64 */
.art-body{min-width:0}
.art-body > * + *,.art-body section > * + *{margin-top:var(--gap-para)}
.art-body > section + section,.art-body > section + div,.art-body > div + section{margin-top:var(--sp-64)}
.art-body h2{font-size:var(--fs-title);font-weight:500;line-height:var(--lh-title);letter-spacing:var(--ls-title);text-wrap:balance;scroll-margin-top:var(--pin-top)}
.art-body section{scroll-margin-top:var(--pin-top)}
.art-body h2 .num{display:block;font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;line-height:var(--lh-eyebrow);letter-spacing:var(--ls-eyebrow);color:var(--accent-text);margin-bottom:var(--sp-8)}
.art-body h3{font-size:var(--fs-body);font-weight:600;line-height:var(--lh-text)}
.art-body section > h3{margin-top:var(--sp-32)}
.art-body section > h2 + h3{margin-top:var(--gap-para)}
.art-body p,.art-body li,.art-body dd{max-width:var(--measure)}
.art-body ul,.art-body ol{padding-left:1.25em}
.art-body li + li{margin-top:var(--sp-8)}
.art-body li::marker{color:var(--ink-muted)}
.art-body code{font-family:var(--font-mono);font-size:.9em;background:var(--surface);padding:.05em .3em}
.art-body blockquote:not(.pull-quote){padding-left:var(--sp-24);border-left:var(--stroke) solid var(--ink-faint);color:var(--ink-muted)}
.art-body .btn-row{margin-top:var(--sp-24)}
/* a cikkben a gomb tördelhet: keskeny hasábban sem lóghat ki, és nem érhet a vonalhoz */
.art-body .btn{white-space:normal;max-width:100%;padding-top:var(--sp-12);padding-bottom:var(--sp-12);text-align:left}

/* a lényeg röviden */
.key-takeaway{background:var(--surface);border-radius:var(--r-card);padding:var(--sp-24) var(--sp-32)}
.kt-label{display:flex;align-items:center;gap:var(--sp-8);font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;line-height:var(--lh-eyebrow);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--accent-text)}
.kt-label .ico{width:20px;height:20px}
.key-takeaway ul{list-style:none;padding:0;margin-top:var(--sp-16)}
.key-takeaway li{position:relative;padding-left:var(--sp-24)}
.key-takeaway li::before{content:"";position:absolute;left:2px;top:.55em;width:6px;height:6px;border-radius:var(--r-circle);background:var(--accent)}

/* kiemelt mondat: egy színes jel, lapos */
.pull-quote{font-size:var(--fs-title);font-weight:500;line-height:var(--lh-title);letter-spacing:var(--ls-title);max-width:var(--measure);
  padding-left:var(--sp-24);border-left:var(--stroke) solid var(--accent)}
.art-body .pull-quote{margin-top:var(--sp-48);margin-bottom:var(--sp-48)}
.pull-quote strong{font-weight:600}

/* infókártya: pont jelzi a fajtáját */
.info-card{background:var(--surface);border-radius:var(--r-card);padding:var(--sp-24);max-width:var(--measure)}
.info-card > strong:first-child{display:flex;align-items:center;gap:var(--sp-8);font-weight:600}
.info-card > strong:first-child::before{content:"";width:6px;height:6px;border-radius:var(--r-circle);background:var(--accent);flex:none}
.info-card.is-warn > strong:first-child::before{background:var(--danger)}
.info-card.is-tip > strong:first-child::before{background:var(--success)}
.info-card > * + *{margin-top:var(--sp-8)}
.info-card p{color:var(--ink-muted)}

/* kalkulátor-ajánló sáv */
.callout{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-16) var(--sp-24);background:var(--surface);border-radius:var(--r-card);padding:var(--sp-24);max-width:var(--measure)}
.art-body .callout{margin-top:var(--sp-48);margin-bottom:var(--sp-48)}
.callout-txt{flex:1 1 260px;min-width:0}
.callout-t{display:block;font-weight:600;margin-bottom:var(--sp-4)}
.callout-d{color:var(--ink-muted)}

/* kulcs–érték lista (jogi oldalak) */
.data-grid{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);gap:var(--sp-8) var(--sp-24);background:var(--surface);border-radius:var(--r-card);padding:var(--sp-24);max-width:var(--measure)}
.data-grid dt{color:var(--ink-muted)}
.data-grid dd{font-weight:500;overflow-wrap:anywhere}
@media (max-width:767px){ .data-grid{grid-template-columns:1fr;gap:0} .data-grid dd + dt{margin-top:var(--sp-12)} }

.code-block{font-family:var(--font-mono);font-size:var(--fs-eyebrow);line-height:var(--lh-text);background:var(--surface);border-radius:var(--r-well);padding:var(--sp-16) var(--sp-24);overflow-x:auto;max-width:var(--measure)}

/* táblázat: saját görgetősávon belül, sorok között vászonszínű vonal */
.tbl{overflow-x:auto;background:var(--surface);border-radius:var(--r-card);max-width:var(--measure);scrollbar-width:thin}
.tbl:focus-visible{outline-offset:2px}
.tbl table{width:100%;min-width:480px;border-collapse:collapse;font-size:var(--fs-eyebrow);line-height:var(--lh-text)}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:var(--sp-12) var(--sp-16)}
.tbl th{font-weight:600}
.tbl thead th{border-bottom:var(--stroke) solid var(--canvas)}
.tbl tbody tr + tr > *{border-top:var(--stroke) solid var(--canvas)}
.tbl td:first-child{font-weight:500}

/* diagram: kártyán, a régi sötét színek szerep szerinti osztályokká alakítva */
.kb-fig{background:var(--surface);border-radius:var(--r-card);padding:var(--sp-24);max-width:var(--measure)}
.art-body .kb-fig{margin-top:var(--sp-48);margin-bottom:var(--sp-48)}
.kb-fig-h{font-size:var(--fs-label);font-weight:500;line-height:var(--lh-ui);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-muted);margin-bottom:var(--sp-16)}
.kb-chart{width:100%;height:auto;overflow:visible}
.kb-chart text{font-family:var(--font-sans)}
.kb-fig figcaption{margin-top:var(--sp-16);color:var(--ink-muted);font-size:var(--fs-eyebrow);line-height:var(--lh-text)}
.kb-chart .f-blue{fill:var(--blue-500)}   .kb-chart .s-blue{stroke:var(--blue-500)}
.kb-chart .f-green{fill:var(--green-500)} .kb-chart .s-green{stroke:var(--green-500)}
.kb-chart .f-gold{fill:var(--gold-500)}   .kb-chart .s-gold{stroke:var(--gold-500)}
.kb-chart .f-red{fill:var(--red-500)}     .kb-chart .s-red{stroke:var(--red-500)}
.kb-chart .f-muted{fill:var(--ink-subtle)} .kb-chart .s-muted{stroke:var(--ink-subtle)}
.kb-chart .f-blue-soft{fill:color-mix(in srgb,var(--blue-500) 18%,transparent)}
.kb-chart .f-green-soft{fill:color-mix(in srgb,var(--green-500) 18%,transparent)}
.kb-chart .f-gold-soft{fill:color-mix(in srgb,var(--gold-500) 22%,transparent)}
.kb-chart .f-red-soft{fill:color-mix(in srgb,var(--red-500) 16%,transparent)}
.kb-chart .f-muted-soft{fill:color-mix(in srgb,var(--ink-subtle) 18%,transparent)}
.kb-chart .f-ink{fill:var(--ink)} .kb-chart .f-faint{fill:var(--ink-subtle)} .kb-chart .f-panel{fill:var(--canvas)}
.kb-chart .f-hole{fill:var(--surface)} .kb-chart .s-hole{stroke:var(--surface)}
.kb-chart .f-onbar{fill:var(--on-accent)}
.kb-chart .s-grid{stroke:var(--ink-faint)} .kb-chart .s-axis{stroke:var(--ink-subtle)}
/* szöveg: a sorozatszín helyett a téma olvasható párja (az arany sosem szöveg) —
   előbb a csoportról öröklött, utána a saját osztály, hogy az utóbbi nyerjen */
.kb-chart .f-blue text,.kb-chart .f-blue tspan{fill:var(--accent-text)}
.kb-chart .f-green text,.kb-chart .f-green tspan{fill:var(--success)}
.kb-chart .f-red text,.kb-chart .f-red tspan{fill:var(--danger)}
.kb-chart .f-gold text,.kb-chart .f-gold tspan,.kb-chart .f-ink text{fill:var(--ink)}
.kb-chart .f-muted text,.kb-chart .f-muted tspan{fill:var(--ink-muted)}
.kb-chart text.f-blue,.kb-chart tspan.f-blue{fill:var(--accent-text)}
.kb-chart text.f-green,.kb-chart tspan.f-green{fill:var(--success)}
.kb-chart text.f-red,.kb-chart tspan.f-red{fill:var(--danger)}
.kb-chart text.f-gold,.kb-chart tspan.f-gold,.kb-chart text.f-ink,.kb-chart tspan.f-ink{fill:var(--ink)}
.kb-chart text.f-muted,.kb-chart tspan.f-muted,.kb-chart text.f-faint{fill:var(--ink-muted)}
.kb-chart text.f-onbar,.kb-chart tspan.f-onbar{fill:var(--on-accent)}

/* =====================================================================
   Leírt tartalmú aloldalak blokkjai (tools/migrate_legacy.py, legacy_content)
   ===================================================================== */
.sec-head > .blk{margin-top:var(--gap-cta)}
.sec-head > .blk + .blk{margin-top:var(--sp-24)}
.hero-facts{display:flex;flex-wrap:wrap;gap:var(--sp-8) var(--sp-32);margin-top:var(--gap-cta);color:var(--ink-muted);max-width:var(--measure-title)}
.hero-facts b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.hero .hero-facts + .btn-row{margin-top:var(--gap-cta)}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:var(--gap-items);list-style:none;max-width:var(--measure-title)}
.cards.c2{grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
.cards > li{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-12);background:var(--surface);border-radius:var(--r-card);padding:var(--sp-24)}
.c-n{font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;line-height:var(--lh-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--accent-text)}
.c-v{font-size:var(--fs-title);font-weight:500;line-height:var(--lh-title);letter-spacing:var(--ls-title);font-variant-numeric:tabular-nums}
.c-t{font-size:var(--fs-body);font-weight:600;line-height:var(--lh-text)}
.c-d,.c-foot{color:var(--ink-muted)}
.c-foot strong{color:var(--ink)}
.c-list{display:grid;gap:var(--sp-8);list-style:none}
.c-list li{position:relative;padding-left:var(--sp-24)}
.c-list li::before{content:"";position:absolute;left:2px;top:.55em;width:6px;height:6px;border-radius:var(--r-circle);background:var(--accent)}
.tags{display:flex;flex-wrap:wrap;gap:var(--sp-8);margin-top:auto;padding-top:var(--sp-4)}
.tag{display:inline-flex;align-items:center;min-height:28px;padding:0 var(--sp-12);border-radius:var(--r-pill);background:var(--canvas);
  font-size:var(--fs-chip);font-weight:500;line-height:var(--lh-ui);letter-spacing:var(--ls-ui);white-space:nowrap}
.cards .text-link{margin-top:auto}

.steps.plain{margin-top:0;max-width:var(--measure)}
.steps.plain b{font-size:var(--fs-body);text-transform:none;letter-spacing:0}
.steps.plain p{color:var(--ink-muted)}
.facts .f-d{margin-top:var(--sp-8);color:var(--ink-muted)}
.sec-head > .blk > .facts{margin-top:0}
.sec-head > .blk > .faq{margin-top:0}
.sec-head .tbl{max-width:var(--measure-title)}
.tbl caption{text-align:left;padding:var(--sp-16) var(--sp-16) var(--sp-8);font-weight:600}
.tbl th[scope="row"]{font-weight:500}

.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:var(--gap-items);list-style:none;max-width:var(--measure-title)}
.plans > li{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-12);background:var(--surface);border-radius:var(--r-card);padding:var(--sp-24)}
.plans > li.theme-invert{background:var(--canvas)}
.p-price b{font-size:var(--fs-h2);font-weight:500;line-height:var(--lh-h2);font-variant-numeric:tabular-nums}
.p-price span{color:var(--ink-muted)}
.plans .btn{margin-top:auto;max-width:100%;white-space:normal;text-align:left}
.cards > li > *,.plans > li > *{max-width:100%}
.plans-note{margin-top:var(--sp-16);color:var(--ink-muted);max-width:var(--measure)}
@media (min-width:640px){ .plans:has(> li:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))} }   /* négy csomag: 2×2, ne maradjon árva kártya */
.shot-fig img{border-radius:var(--r-card);width:100%;height:auto;background:var(--surface)}
.shot-fig figcaption{margin-top:var(--sp-12);color:var(--ink-muted);max-width:var(--measure)}
.g-img{display:block;border-radius:var(--r-card);overflow:hidden;background:var(--surface);box-shadow:0 0 0 1px var(--surface-hover)}
.g-img img{display:block;width:100%;height:auto;border-radius:0}
a.g-img{transition:box-shadow var(--dur-fast) var(--ease-out)}
a.g-img:hover{box-shadow:0 0 0 2px var(--accent)}
a.g-img:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-48) var(--sp-32);margin:0;padding:0;list-style:none}
.gallery .g-fig{margin:0}
.gallery figcaption{margin-top:var(--sp-16);display:flex;flex-direction:column;gap:var(--sp-4)}
.gallery .g-t{font-weight:600;color:var(--ink);font-size:18px;line-height:1.35}
.gallery .g-d{color:var(--ink-muted)}
.gallery .tags{margin-top:var(--sp-8);padding-top:0}
@media (max-width:760px){.gallery{grid-template-columns:minmax(0,1fr);gap:var(--sp-32)}}
.refs-more{margin-top:var(--sp-24)}
.sec-head .pull-quote footer{margin-top:var(--sp-12);font-size:var(--fs-body);font-weight:400;color:var(--ink-muted)}

/* ---------- Tudástár-hub: kereső és cikk-kártyák (tools/migrate_special.py) ---------- */
.kb-search{background:var(--surface);border-radius:var(--r-card);padding:var(--sp-24) var(--sp-32);max-width:var(--measure-title)}
.kb-search-head .e{display:block;font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--accent-text)}
.kb-search-head h3{margin-top:var(--sp-8);font-size:var(--fs-title);font-weight:500;line-height:var(--lh-title);letter-spacing:var(--ls-title)}
.kb-search-head p{margin-top:var(--sp-8);color:var(--ink-muted)}
.kb-search-box{position:relative;margin-top:var(--sp-24)}
.kb-search-ic{position:absolute;left:var(--sp-24);top:26px;transform:translateY(-50%);width:20px;height:20px;color:var(--ink-muted);pointer-events:none}
.kb-search-box input{width:100%;min-height:52px;padding:0 120px 0 56px;border-radius:var(--r-control);border:var(--stroke) solid var(--ink-subtle);
  background:var(--canvas);color:var(--ink);font-size:var(--fs-body)}
.kb-search-box input::placeholder{color:var(--ink-muted);opacity:1}
.kb-search-box input:focus{outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-offset)}
.kb-search-count{position:absolute;right:var(--sp-24);top:50%;transform:translateY(-50%);color:var(--ink-muted);font-size:var(--fs-eyebrow);pointer-events:none}
.kb-chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-8);margin-top:var(--sp-16)}
.kb-chips-lbl{color:var(--ink-muted);font-size:var(--fs-eyebrow);margin-right:var(--sp-4)}
.kb-chip{min-height:34px;padding:0 14px;border:0;border-radius:var(--r-pill);background:var(--canvas);color:var(--ink);font-size:var(--fs-chip);font-weight:500;cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.kb-chip:hover{background:var(--surface-hover)}
.kb-chip.active{background:var(--action);color:var(--on-action)}
.kb-noresult{margin-top:var(--sp-16)}
.kb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:var(--gap-items);max-width:var(--measure-title)}
.kb-card{display:flex;flex-direction:column;gap:var(--sp-12);background:var(--surface);border-radius:var(--r-card);padding:var(--sp-24);color:var(--ink);text-decoration:none;
  transition:background-color var(--dur-fast) var(--ease-out)}
.kb-card:hover{background:var(--surface-hover);text-decoration:none}
.kb-card.kb-hidden{display:none}
.kb-cat{font-family:var(--font-mono);font-size:var(--fs-chip);font-weight:500;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--accent-text)}
.kb-title{font-size:var(--fs-body);font-weight:600;line-height:var(--lh-text)}
.kb-excerpt{color:var(--ink-muted)}
.kb-tags{display:flex;flex-wrap:wrap;gap:var(--sp-8)}
.kb-tag{display:inline-flex;align-items:center;min-height:28px;padding:0 var(--sp-12);border-radius:var(--r-pill);background:var(--canvas);font-size:var(--fs-chip);font-weight:500}
.kb-foot{margin-top:auto;padding-top:var(--sp-8);display:flex;justify-content:space-between;align-items:center;gap:var(--sp-12);flex-wrap:wrap;
  color:var(--ink-muted);font-size:var(--fs-chip);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase}
.kb-cta{display:inline-flex;align-items:center;gap:var(--sp-8);color:var(--ink)}
.kb-cta .arr{width:28px;height:10px;color:var(--accent)}
@media (max-width:767px){ .kb-search{padding:var(--sp-24)} .kb-search-box input{padding-right:var(--sp-16)} .kb-search-count{position:static;transform:none;display:block;margin-top:var(--sp-8)} }

/* ---------- Diagramok HTML-ben (tools/charts.py): olvasható betű, mobilon átrendeződik ---------- */
.k-blue{--c:var(--blue-500)} .k-green{--c:var(--green-500)} .k-gold{--c:var(--gold-500)}
.k-red{--c:var(--red-500)} .k-muted{--c:var(--ink-subtle)} .k-ink{--c:var(--ink)}
.ch{font-size:var(--fs-eyebrow);line-height:var(--lh-text)}
.ch-legend{display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-24);list-style:none;margin-bottom:var(--sp-24);color:var(--ink-muted)}
.ch-legend li{display:inline-flex;align-items:center;gap:var(--sp-8)}
.ch-legend li::before{content:"";width:12px;height:12px;border-radius:var(--r-pill);background:var(--c);flex:none}
/* sávok: címke balra, sáv jobbra, az érték a sáv végén */
.ch-rows{display:grid;gap:var(--sp-16)}
.ch-row{display:grid;grid-template-columns:minmax(0,32%) minmax(0,1fr);gap:var(--sp-4) var(--sp-16);align-items:center}
.ch-l{font-weight:500;color:var(--ink);line-height:var(--lh-ui)}
.ch-sub{display:block;margin-top:2px;font-weight:400;font-size:var(--fs-chip);color:var(--ink-muted)}
.ch-bs{display:grid;gap:6px}
.ch-b{position:relative;height:14px;margin-right:96px}
/* a cikk listastílusa (behúzás, elemköz) ne érvényesüljön a diagram-listákon */
.art-body .ch-legend,.art-body .ch-tl,.art-body .ch-layers{padding-left:0}
.art-body .ch li + li{margin-top:0}
.art-body .ch li{max-width:none}
.ch-bar{position:absolute;top:0;bottom:0;left:var(--s,0%);width:var(--w,0%);min-width:6px;border-radius:var(--r-pill);background:var(--c)}
.ch-v{position:absolute;top:50%;left:calc(var(--s,0%) + var(--w,0%) + 8px);transform:translateY(-50%);white-space:nowrap;
  font-family:var(--font-mono);font-size:var(--fs-chip);font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.ch-axis{position:relative;height:18px;margin:var(--sp-12) 96px 0 calc(32% + var(--sp-16));font-family:var(--font-mono);font-size:var(--fs-chip);color:var(--ink-muted)}
.ch-tick{position:absolute;left:var(--s,0%);transform:translateX(-50%);white-space:nowrap}
.ch-axis-t{margin-top:var(--sp-4);margin-left:calc(32% + var(--sp-16));font-size:var(--fs-chip);color:var(--ink-muted)}
@media (max-width:767px){
  .ch-row{grid-template-columns:minmax(0,1fr)}
  .ch-b{margin-right:88px}
  .ch-axis{margin-left:0;margin-right:88px}
  .ch-axis-t{margin-left:0}
}
/* idővonal: számozott fázisok vonallal összekötve; keskenyen függőleges */
.ch-tl{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--sp-16)}
.ch-tl li{position:relative;padding-top:48px;min-width:0}
.ch-tl li::before{content:"";position:absolute;top:15px;left:0;right:calc(-1 * var(--sp-16));height:var(--stroke);background:var(--ink-faint)}
.ch-tl li:last-child::before{right:0;width:32px}
.ch-dot{position:absolute;top:0;left:0;z-index:1;width:32px;height:32px;border-radius:var(--r-circle);border:var(--stroke) solid var(--c);
  background:var(--surface);display:grid;place-items:center;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.ch-tl b{display:block;font-weight:600;color:var(--ink);line-height:var(--lh-ui)}
.ch-t{display:block;margin-top:var(--sp-4);font-family:var(--font-mono);font-size:var(--fs-chip);font-weight:500;color:var(--accent-text)}
.ch-d{display:block;margin-top:var(--sp-4);color:var(--ink-muted)}
.ch-tl.ch-n5,.ch-tl.ch-n6,.ch-tl.ch-n7{font-size:var(--fs-chip)}
@media (max-width:767px){
  .ch-tl{grid-auto-flow:row;gap:var(--sp-16)}
  .ch-tl li{padding:4px 0 0 48px}
  .ch-tl li::before{top:32px;bottom:calc(-1 * var(--sp-16));left:15px;right:auto;width:var(--stroke);height:auto}
  .ch-tl li:last-child::before{display:none}
  .ch-tl.ch-n5,.ch-tl.ch-n6,.ch-tl.ch-n7{font-size:var(--fs-eyebrow)}
}
/* 2×2 mátrix: két szempont, négy ajánlás */
.ch-mx-g{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8)}
.ch-mx-c{background:var(--canvas);border-radius:var(--r-well);padding:var(--sp-16)}
.ch-mx-c b{display:flex;align-items:center;gap:var(--sp-8);font-weight:600;color:var(--ink);line-height:var(--lh-ui)}
.ch-mx-c b::before{content:"";width:8px;height:8px;border-radius:var(--r-circle);background:var(--c);flex:none}
.ch-mx-c span{display:block;margin-top:var(--sp-4);color:var(--ink-muted)}
.ch-mx-y,.ch-mx-x{font-weight:500;color:var(--ink);line-height:var(--lh-ui)}
.ch-mx-y{margin-bottom:var(--sp-12)} .ch-mx-x{margin-top:var(--sp-12);text-align:right}
.ch-mx-end{font-weight:400;color:var(--ink-muted)}
.ch-arrow{color:var(--accent-text)}
@media (max-width:480px){ .ch-mx-c{padding:var(--sp-12)} }
/* rétegek: kívülről befelé, egyre beljebb */
.ch-layers{list-style:none;display:grid;gap:var(--sp-8)}
.ch-layers li{background:var(--canvas);border-radius:var(--r-well);padding:var(--sp-12) var(--sp-16);box-shadow:inset 3px 0 0 var(--c)}
.ch-layers b{font-weight:600;color:var(--ink)} .ch-layers span{display:block;color:var(--ink-muted)}
.ch-layers .lv-1{margin-left:var(--sp-16)} .ch-layers .lv-2{margin-left:var(--sp-32)} .ch-layers .lv-3{margin-left:var(--sp-48)}
.ch-layers .lv-4{margin-left:var(--sp-64)} .ch-layers .lv-5{margin-left:var(--sp-72)}
@media (max-width:480px){ .ch-layers .lv-1,.ch-layers .lv-2,.ch-layers .lv-3,.ch-layers .lv-4,.ch-layers .lv-5{margin-left:0} }
/* megtartott SVG: nagyobb betű, keskenyen vízszintesen görgethető */
.ch-svg{overflow-x:auto;scrollbar-width:thin}
.ch-svg .kb-chart{min-width:576px}
.cw-0{--w:0%}.cw-1{--w:1%}.cw-2{--w:2%}.cw-3{--w:3%}.cw-4{--w:4%}.cw-5{--w:5%}.cw-6{--w:6%}.cw-7{--w:7%}.cw-8{--w:8%}.cw-9{--w:9%}.cw-10{--w:10%}.cw-11{--w:11%}.cw-12{--w:12%}.cw-13{--w:13%}.cw-14{--w:14%}.cw-15{--w:15%}.cw-16{--w:16%}.cw-17{--w:17%}.cw-18{--w:18%}.cw-19{--w:19%}.cw-20{--w:20%}.cw-21{--w:21%}.cw-22{--w:22%}.cw-23{--w:23%}.cw-24{--w:24%}.cw-25{--w:25%}.cw-26{--w:26%}.cw-27{--w:27%}.cw-28{--w:28%}.cw-29{--w:29%}.cw-30{--w:30%}.cw-31{--w:31%}.cw-32{--w:32%}.cw-33{--w:33%}.cw-34{--w:34%}.cw-35{--w:35%}.cw-36{--w:36%}.cw-37{--w:37%}.cw-38{--w:38%}.cw-39{--w:39%}.cw-40{--w:40%}.cw-41{--w:41%}.cw-42{--w:42%}.cw-43{--w:43%}.cw-44{--w:44%}.cw-45{--w:45%}.cw-46{--w:46%}.cw-47{--w:47%}.cw-48{--w:48%}.cw-49{--w:49%}.cw-50{--w:50%}.cw-51{--w:51%}.cw-52{--w:52%}.cw-53{--w:53%}.cw-54{--w:54%}.cw-55{--w:55%}.cw-56{--w:56%}.cw-57{--w:57%}.cw-58{--w:58%}.cw-59{--w:59%}.cw-60{--w:60%}.cw-61{--w:61%}.cw-62{--w:62%}.cw-63{--w:63%}.cw-64{--w:64%}.cw-65{--w:65%}.cw-66{--w:66%}.cw-67{--w:67%}.cw-68{--w:68%}.cw-69{--w:69%}.cw-70{--w:70%}.cw-71{--w:71%}.cw-72{--w:72%}.cw-73{--w:73%}.cw-74{--w:74%}.cw-75{--w:75%}.cw-76{--w:76%}.cw-77{--w:77%}.cw-78{--w:78%}.cw-79{--w:79%}.cw-80{--w:80%}.cw-81{--w:81%}.cw-82{--w:82%}.cw-83{--w:83%}.cw-84{--w:84%}.cw-85{--w:85%}.cw-86{--w:86%}.cw-87{--w:87%}.cw-88{--w:88%}.cw-89{--w:89%}.cw-90{--w:90%}.cw-91{--w:91%}.cw-92{--w:92%}.cw-93{--w:93%}.cw-94{--w:94%}.cw-95{--w:95%}.cw-96{--w:96%}.cw-97{--w:97%}.cw-98{--w:98%}.cw-99{--w:99%}.cw-100{--w:100%}
.cs-0{--s:0%}.cs-1{--s:1%}.cs-2{--s:2%}.cs-3{--s:3%}.cs-4{--s:4%}.cs-5{--s:5%}.cs-6{--s:6%}.cs-7{--s:7%}.cs-8{--s:8%}.cs-9{--s:9%}.cs-10{--s:10%}.cs-11{--s:11%}.cs-12{--s:12%}.cs-13{--s:13%}.cs-14{--s:14%}.cs-15{--s:15%}.cs-16{--s:16%}.cs-17{--s:17%}.cs-18{--s:18%}.cs-19{--s:19%}.cs-20{--s:20%}.cs-21{--s:21%}.cs-22{--s:22%}.cs-23{--s:23%}.cs-24{--s:24%}.cs-25{--s:25%}.cs-26{--s:26%}.cs-27{--s:27%}.cs-28{--s:28%}.cs-29{--s:29%}.cs-30{--s:30%}.cs-31{--s:31%}.cs-32{--s:32%}.cs-33{--s:33%}.cs-34{--s:34%}.cs-35{--s:35%}.cs-36{--s:36%}.cs-37{--s:37%}.cs-38{--s:38%}.cs-39{--s:39%}.cs-40{--s:40%}.cs-41{--s:41%}.cs-42{--s:42%}.cs-43{--s:43%}.cs-44{--s:44%}.cs-45{--s:45%}.cs-46{--s:46%}.cs-47{--s:47%}.cs-48{--s:48%}.cs-49{--s:49%}.cs-50{--s:50%}.cs-51{--s:51%}.cs-52{--s:52%}.cs-53{--s:53%}.cs-54{--s:54%}.cs-55{--s:55%}.cs-56{--s:56%}.cs-57{--s:57%}.cs-58{--s:58%}.cs-59{--s:59%}.cs-60{--s:60%}.cs-61{--s:61%}.cs-62{--s:62%}.cs-63{--s:63%}.cs-64{--s:64%}.cs-65{--s:65%}.cs-66{--s:66%}.cs-67{--s:67%}.cs-68{--s:68%}.cs-69{--s:69%}.cs-70{--s:70%}.cs-71{--s:71%}.cs-72{--s:72%}.cs-73{--s:73%}.cs-74{--s:74%}.cs-75{--s:75%}.cs-76{--s:76%}.cs-77{--s:77%}.cs-78{--s:78%}.cs-79{--s:79%}.cs-80{--s:80%}.cs-81{--s:81%}.cs-82{--s:82%}.cs-83{--s:83%}.cs-84{--s:84%}.cs-85{--s:85%}.cs-86{--s:86%}.cs-87{--s:87%}.cs-88{--s:88%}.cs-89{--s:89%}.cs-90{--s:90%}.cs-91{--s:91%}.cs-92{--s:92%}.cs-93{--s:93%}.cs-94{--s:94%}.cs-95{--s:95%}.cs-96{--s:96%}.cs-97{--s:97%}.cs-98{--s:98%}.cs-99{--s:99%}.cs-100{--s:100%}

/* ---------- süti-hozzájárulás (esi.js) — egyenrangú elfogadás / elutasítás, a láblécből újranyitható ---------- */
.consent{position:fixed;z-index:70;left:var(--sp-16);bottom:var(--sp-16);max-width:440px;background:var(--canvas);color:var(--ink);
  border-radius:var(--r-card);padding:var(--sp-24)}
.consent[hidden]{display:none}
.consent-t{font-weight:600;margin-bottom:var(--sp-8)}
.consent p:not(.consent-t){color:var(--ink-muted);font-size:var(--fs-eyebrow)}
.consent .btn-row{margin-top:var(--sp-16)}
html.menu-open .consent{display:none}
.link-btn{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px;cursor:pointer}
.foot-bottom .link-btn{color:var(--ink-muted)}
@media (max-width:767px){ .consent{left:var(--sp-8);right:var(--sp-8);bottom:var(--sp-8);max-width:none;padding:var(--sp-16)} }

/* =====================================================================
   Reszponzív
   ===================================================================== */
@media (max-width:767px){
  .logo-link img{height:34px}
  .hero .in{width:auto!important;padding-top:calc(var(--route-ring) + 40px);padding-right:calc(100% - var(--axis-r) + var(--route-w) / 2 + var(--line-clear))}
  .sec[data-route="r"] > .in{width:auto;max-width:none;padding-right:calc(100% - var(--axis-r) + var(--route-w) / 2 + var(--line-clear))}
  .scroll-hint,.problem .dots{display:none}
  /* mobilon a kártyák eleve egymás alatt: a JS csak a ragadós halmozást kapcsolja rá (is-vstack),
     így betöltéskor nincs vízszintes sor → függőleges lista átugrás (CLS) */
  .pcards{display:block;overflow:visible;scroll-snap-type:none}
  .pcard{padding:var(--sp-24);margin-bottom:var(--sp-16)}
  .band h2 > span{display:inline}
  .geo-form{flex-direction:column;gap:var(--sp-12)}
  .geo-field,.geo-field input,.geo-form .field-btn{min-height:52px}
  .geo-sum{grid-template-columns:1fr}
  .geo-bench .r{grid-template-columns:minmax(0,1fr) 40px} .geo-bench .t{grid-column:1 / -1;order:3}
  .site-head{padding-right:calc(var(--margin-x) + var(--burger) + var(--sp-16))}
  .impl .txt{margin-right:calc(var(--route-ring) / 2 + var(--route-w) / 2 + var(--line-clear))}
  .foot-grid{grid-template-columns:1fr 1fr}
  /* hosszú gombfelirat keskeny hasábban tördel, nem lóg a vonalra */
  .sec .btn{white-space:normal;text-align:left;padding-top:var(--sp-12);padding-bottom:var(--sp-12)}
}
@media (max-width:959px){ .band h2 > span{display:inline} }
@media (max-width:470px){
  .hero .btn-row{flex-direction:column;align-items:stretch}
  .hero .btn{white-space:normal;justify-content:space-between}
  .foot-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .chips .row{transform:none!important}
}
/* =====================================================================
   Akciós komponensek (2026-10): .promo ajándékdobozok · .valueg érték-infografika ·
   .pflow folyamatábra elágazással. Egy animációs rendszer: az esi.js a [data-anim]
   elemre egyszer ráteszi az .is-on osztályt; JS nélkül és prefers-reduced-motion
   mellett a végállapot látszik. Csak transform / opacity / stroke-dashoffset mozog.
   (.pflow, mert a .flow a főoldali folyamatsáv neve.)
   ===================================================================== */
/* --- ajándékdobozok --- */
.promo{max-width:var(--measure-title);background:var(--surface);border:var(--stroke) solid var(--route);border-radius:var(--r-24);padding:var(--sp-24)}
.promo-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-12) var(--sp-16)}
.promo-badge{display:inline-flex;align-items:center;gap:var(--sp-8);min-height:36px;padding:0 var(--sp-16);border-radius:var(--r-pill);
  background:var(--gold-500);color:var(--on-accent);font-weight:600;font-size:var(--fs-chip);letter-spacing:var(--ls-eyebrow);text-transform:uppercase}
.promo-badge .ico{width:18px;height:18px}
.promo-dl{font-weight:500}
.promo-count{margin-left:auto;display:inline-flex;align-items:center;min-height:36px;padding:0 var(--sp-16);border-radius:var(--r-pill);
  background:var(--canvas);font-family:var(--font-mono);font-size:var(--fs-chip);letter-spacing:var(--ls-label);text-transform:uppercase;font-variant-numeric:tabular-nums}
.promo-items{list-style:none;display:grid;gap:var(--sp-48);margin-top:var(--sp-24)}
.promo-item{position:relative;display:flex;flex-direction:column;gap:var(--sp-12);background:var(--canvas);border-radius:var(--r-card);padding:var(--sp-24)}
/* a dobozok közti „+” jel: egy csomag, nem külön ajánlatok */
.promo-item + .promo-item::before{content:"+";position:absolute;left:50%;top:calc(-1 * var(--sp-48) / 2);width:40px;height:40px;margin:-20px 0 0 -20px;
  display:grid;place-items:center;border-radius:var(--r-circle);background:var(--gold-500);color:var(--on-accent);font-size:26px;font-weight:500;line-height:1}
.pi-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12)}
.pi-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-circle);background:var(--surface);color:var(--ink)}
.pi-ico .ico{width:26px;height:26px}
.pi-tag{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-muted)}
.pi-t{font-size:var(--fs-title);font-weight:500;line-height:var(--lh-title);letter-spacing:var(--ls-title)}
.pi-val{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-4) var(--sp-12)}
.pi-val s{color:var(--ink-muted);text-decoration-thickness:2px}
.pi-val b{font-size:var(--fs-h2);font-weight:500;line-height:var(--lh-h2);font-variant-numeric:tabular-nums}
.pi-val span{color:var(--ink-muted);flex-basis:100%}
.pi-d{color:var(--ink)}
.pi-alt{display:grid;grid-template-columns:24px minmax(0,1fr);gap:var(--sp-12);margin-top:var(--sp-4);padding:var(--sp-16);border-radius:var(--r-well);background:var(--surface)}
.pi-alt p{color:var(--ink-muted);margin-top:var(--sp-4)}
.pi-foot{margin-top:auto;padding-top:var(--sp-8);color:var(--ink-muted);font-size:var(--fs-eyebrow)}
@media (min-width:768px){
  .promo{padding:var(--sp-32)}
  .promo-items.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .promo-items.n3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .promo-item + .promo-item::before{left:calc(-1 * var(--sp-48) / 2);top:50%}
  /* 2+1: a harmadik ajándék bónuszként, teljes szélességben, a „+” fölötte */
  .promo-items.n3 .promo-item:nth-child(3){grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--sp-32);row-gap:var(--sp-12);align-items:start}
  .promo-items.n3 .promo-item:nth-child(3) > :not(.c-list):not(.pi-foot):not(.pi-top){grid-column:1}
  .promo-items.n3 .promo-item:nth-child(3) > .pi-top{grid-column:1 / -1}
  .promo-items.n3 .promo-item:nth-child(3) > .c-list{grid-column:2;grid-row:2 / span 3;align-self:center}
  .promo-items.n3 .promo-item:nth-child(3)::before{left:50%;top:calc(-1 * var(--sp-48) / 2)}
}
.promo.is-expired .promo-badge{background:var(--ink-faint)}
.promo.is-expired .promo-items{opacity:.55}
/* belépés: a dobozok egymás után emelkednek, a „+” a végén jelenik meg */
.js .promo[data-anim] .promo-item{opacity:0;transform:translateY(16px);transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
.js .promo[data-anim] .promo-item + .promo-item::before{opacity:0;transform:scale(.6);transition:opacity var(--dur-state) var(--ease-out),transform var(--dur-state) var(--ease-out)}
.js .promo.is-on .promo-item{opacity:1;transform:none}
.js .promo.is-on .promo-item + .promo-item::before{opacity:1;transform:none;transition-delay:.55s}
.js .promo.is-on .promo-item:nth-child(2){transition-delay:.12s}
.js .promo.is-on .promo-item:nth-child(3){transition-delay:.3s}
.js .promo.is-on .promo-item:nth-child(3)::before{transition-delay:.75s}

/* --- érték-infografika --- */
.valueg{max-width:var(--measure-title);background:var(--surface);border-radius:var(--r-card);padding:var(--sp-24);display:grid;gap:var(--sp-24)}
.vg-total{display:flex;flex-direction:column;gap:var(--sp-4)}
.vg-k{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-muted)}
.vg-num{font-size:clamp(36px, 28px + 2vw, 56px);font-weight:500;line-height:1.1;font-variant-numeric:tabular-nums}
.vg-sub{color:var(--ink-muted)}
.vg-rows{display:grid;gap:var(--sp-16)}
.vg-row{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr) auto;align-items:center;gap:var(--sp-8) var(--sp-16)}
.vg-l{font-weight:500}
.vg-v{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.vg-track{position:relative;height:28px;border-radius:var(--r-pill);background:var(--canvas);overflow:hidden}
.vg-seg{position:absolute;top:0;bottom:0;left:var(--s,0%);width:var(--w,0%);background:var(--c)}
.vg-seg + .vg-seg{border-left:var(--stroke) solid var(--surface)}
.vg-zero{position:absolute;left:0;top:4px;bottom:4px;width:4px;border-radius:var(--r-pill);background:var(--success)}
.vg-pay .vg-v{color:var(--success)}
.vg-legend{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:var(--sp-8) var(--sp-24)}
.vg-legend li{display:flex;align-items:baseline;gap:var(--sp-8)}
.vg-legend li::before{content:"";flex:none;width:12px;height:12px;border-radius:3px;background:var(--c);transform:translateY(1px)}
.vg-legend span{color:var(--ink-muted)}
.vg-legend b{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.vg-extra{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-8)}
.vg-extra li{display:inline-flex;align-items:center;gap:var(--sp-8);min-height:36px;padding:0 var(--sp-16);border-radius:var(--r-pill);background:var(--canvas);font-weight:500}
.vg-extra .ico{width:18px;height:18px;color:var(--success)}
.vg-note{color:var(--ink-muted);font-size:var(--fs-eyebrow)}
@media (max-width:640px){
  .vg-row{grid-template-columns:minmax(0,1fr) auto}
  .vg-row .vg-track{grid-column:1 / -1;grid-row:2}
}
@media (min-width:768px){ .valueg{padding:var(--sp-32)} }
.js .valueg[data-anim] .vg-seg{transform:scaleX(0);transform-origin:left center;transition:transform 900ms var(--ease-out)}
.js .valueg[data-anim] .vg-seg + .vg-seg{transition-delay:.35s}
.js .valueg.is-on .vg-seg{transform:none}

/* --- folyamatábra --- */
.pflow{max-width:var(--measure-title)}
.flow-steps{list-style:none;position:relative;display:grid;gap:var(--sp-24)}
.fs{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:var(--sp-16);row-gap:var(--sp-4);align-items:start}
.fs-ico{grid-row:1 / span 3;position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-circle);
  background:var(--surface);border:var(--stroke) solid var(--ink-faint);color:var(--ink)}
.fs-ico .ico{width:22px;height:22px}
.fs-n{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--ls-label);color:var(--ink-muted)}
.fs b{font-weight:600}
.fs p{color:var(--ink-muted);overflow-wrap:break-word;hyphens:auto}
/* összekötő szakaszok lépésenként (mobilon lefelé, asztalon jobbra): alap + kirajzolódó arany réteg */
.fs:not(:last-child)::before,.fs:not(:last-child)::after{content:"";position:absolute;left:23px;top:48px;bottom:calc(-1 * var(--sp-24));width:var(--stroke);background:var(--ink-faint)}
.fs:not(:last-child)::after{background:var(--route);transform-origin:top center}
@media (min-width:1024px){
  .flow-steps.n5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .flow-steps.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fs{grid-template-columns:minmax(0,1fr);row-gap:var(--sp-8)}
  .fs-ico{grid-row:auto}
  .fs p{font-size:var(--fs-eyebrow)}
  .fs:not(:last-child)::before,.fs:not(:last-child)::after{left:48px;top:23px;bottom:auto;width:calc(100% + var(--sp-24) - 48px);height:var(--stroke)}
  .fs:not(:last-child)::after{transform-origin:left center}
}
/* döntési elágazás */
.flow-branch{position:relative;margin-top:var(--sp-24);padding-top:var(--sp-32);display:grid;justify-items:center;text-align:center;--fb-gap:var(--sp-48)}
.flow-branch::before{content:"";position:absolute;top:0;left:50%;width:var(--stroke);height:var(--sp-32);background:var(--route)}
.fb-q{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--sp-12);max-width:420px;margin-bottom:var(--fb-gap)}
/* villa és összefutás CSS-keretből: kérdés → két válasz → közös cél */
.fb-q::after,.fb-end::before{content:"";position:absolute;left:50%;width:var(--stroke);height:calc(var(--fb-gap) / 2);margin-left:-1px;background:var(--route)}
.fb-q::after{bottom:calc(-1 * var(--fb-gap))}
.fb-end::before{top:calc(-1 * var(--fb-gap) / 2 - var(--stroke))}
.fb-opts::before,.fb-opts::after{content:"";position:absolute;left:calc(25% - var(--sp-16) / 4);right:calc(25% - var(--sp-16) / 4);height:calc(var(--fb-gap) / 2);border:var(--stroke) solid var(--route)}
.fb-opts::before{top:calc(-1 * var(--fb-gap) / 2);border-bottom:0}
.fb-opts::after{bottom:calc(-1 * var(--fb-gap) / 2);border-top:0}
.fb-dia{display:grid;place-items:center;width:56px;height:56px;position:relative;color:var(--on-accent)}
.fb-dia::before{content:"";position:absolute;inset:6px;background:var(--gold-500);border-radius:6px;transform:rotate(45deg)}
.fb-dia .ico{position:relative;width:24px;height:24px}
.fb-opts{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-16);width:100%}
.fb-o{display:flex;flex-direction:column;gap:var(--sp-8);align-items:center;background:var(--surface);border-radius:var(--r-card);padding:var(--sp-24)}
.fb-o p{color:var(--ink-muted)}
.fb-l{display:inline-flex;align-items:center;min-height:28px;padding:0 var(--sp-12);border-radius:var(--r-pill);font-size:var(--fs-chip);font-weight:600;
  letter-spacing:var(--ls-label);text-transform:uppercase;background:var(--canvas)}
.fb-o.yes .fb-l{background:var(--success);color:var(--canvas)}
.fb-end{position:relative;margin-top:var(--fb-gap);display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--sp-16);align-items:center;text-align:left;width:min(100%,520px);
  border:var(--stroke) solid var(--route);border-radius:var(--r-card);padding:var(--sp-16) var(--sp-24);background:var(--surface)}
.fb-end > .ico{width:48px;height:48px;padding:12px;border-radius:var(--r-circle);background:var(--gold-500);color:var(--on-accent);box-sizing:border-box}
.fb-end p{color:var(--ink-muted);margin-top:var(--sp-4)}
@media (max-width:560px){
  .fb-opts{grid-template-columns:minmax(0,1fr)}
  .fb-opts::before,.fb-opts::after{left:50%;right:auto;width:var(--stroke);margin-left:-1px;border:0;background:var(--route)}
}
/* belépés: a vonal kirajzolódik, a lépések sorban kigyúlnak, végül az elágazás */
.js .pflow[data-anim] .fs::after{transform:scaleY(0);transition:transform 300ms linear}
@media (min-width:1024px){ .js .pflow[data-anim] .fs::after{transform:scaleX(0)} }
.js .pflow.is-on .fs::after{transform:none}
.js .pflow.is-on .fs:nth-child(1)::after{transition-delay:.1s}
.js .pflow.is-on .fs:nth-child(2)::after{transition-delay:.4s}
.js .pflow.is-on .fs:nth-child(3)::after{transition-delay:.7s}
.js .pflow.is-on .fs:nth-child(4)::after{transition-delay:1s}
.js .pflow[data-anim] .fs-ico{transition:border-color var(--dur-state) var(--ease-out),background-color var(--dur-state) var(--ease-out)}
.js .pflow.is-on .fs-ico{border-color:var(--route)}
.js .pflow.is-on .fs:nth-child(1) .fs-ico{transition-delay:0s}
.js .pflow.is-on .fs:nth-child(2) .fs-ico{transition-delay:.4s}
.js .pflow.is-on .fs:nth-child(3) .fs-ico{transition-delay:.7s}
.js .pflow.is-on .fs:nth-child(4) .fs-ico{transition-delay:1s}
.js .pflow.is-on .fs:nth-child(5) .fs-ico{transition-delay:1.3s}
.pflow.is-on .fs-ico,.pflow:not([data-anim]) .fs-ico,html:not(.js) .fs-ico{border-color:var(--route)}
.js .pflow[data-anim] .flow-branch{opacity:0;transform:translateY(12px);transition:opacity var(--dur-reveal) var(--ease-out) 1.3s,transform var(--dur-reveal) var(--ease-out) 1.3s}
.js .pflow.is-on .flow-branch{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .promo[data-anim] .promo-item,.js .promo[data-anim] .promo-item + .promo-item::before,.js .valueg[data-anim] .vg-seg,
  .js .pflow[data-anim] .fs::after,.js .pflow[data-anim] .flow-branch{
    transition:none!important;transform:none!important;opacity:1!important}
}

/* --- akció v2: igényesebb grafika ---
   Visszatérő (végtelen) animáció csak .is-live mellett fut: az esi.js akkor teszi rá, ha az
   elem a képernyőn van ÉS a lap látható; egyébként szünetel (teljesítmény-keret). */
.promo{position:relative}
/* ferdén lebegő matrica a doboz sarkán; a szavak egymás után váltják egymást */
@media (min-width:768px){ .promo.has-sticker .promo-head{padding-right:84px} }
.promo-sticker{position:absolute;z-index:3;top:-44px;right:-18px;width:112px;height:112px;transform:rotate(-12deg);pointer-events:none}
.st-burst{position:absolute;inset:0;width:100%;height:100%}
.st-burst path{fill:var(--gold-500)}
.st-words{position:absolute;inset:0;display:grid;place-items:center;color:var(--on-accent);font-weight:700;font-size:19px;line-height:1;letter-spacing:-.01em;text-align:center}
.st-words span{grid-area:1 / 1;padding:0 14px}
.st-words span:not(:first-child){opacity:0}
.promo-sticker.n1 .st-words span{opacity:1}
@media (max-width:767px){ .promo-sticker{width:92px;height:92px;top:-46px;right:-6px} .st-words{font-size:16px} }
@keyframes stFloat{0%,100%{transform:translateY(0) rotate(-12deg)}50%{transform:translateY(-8px) rotate(-8deg)}}
@keyframes stSpin{to{transform:rotate(360deg)}}
@keyframes stWord3{0%,28%{opacity:1}33.3%,95%{opacity:0}100%{opacity:1}}
.promo-sticker{animation:stFloat 5.2s ease-in-out infinite;animation-play-state:paused}
.st-burst{animation:stSpin 26s linear infinite;animation-play-state:paused}
.promo-sticker.n3 .st-words span{animation:stWord3 7.5s linear infinite;animation-play-state:paused}
.promo-sticker.n3 .st-words span:nth-child(2){animation-delay:2.5s}
.promo-sticker.n3 .st-words span:nth-child(3){animation-delay:5s}
.promo.is-live .promo-sticker,.promo.is-live .st-burst,.promo.is-live .promo-sticker.n3 .st-words span{animation-play-state:running}
/* belépés: a matrica „rácsapódik” */
.js .promo[data-anim] .promo-sticker{opacity:0;scale:1.6;transition:opacity 300ms var(--ease-out) .9s,scale 450ms cubic-bezier(.3,1.6,.5,1) .9s}
.js .promo.is-on .promo-sticker{opacity:1;scale:1}

/* a „+” jel: pulzáló gyűrű, amíg látszik */
.promo-item + .promo-item::after{content:"";position:absolute;left:50%;top:calc(-1 * var(--sp-48) / 2);width:40px;height:40px;margin:-20px 0 0 -20px;
  border-radius:var(--r-circle);border:var(--stroke) solid var(--gold-500);opacity:0;pointer-events:none}
@media (min-width:768px){
  .promo-item + .promo-item::after{left:calc(-1 * var(--sp-48) / 2);top:50%}
  .promo-items.n3 .promo-item:nth-child(3)::after{left:50%;top:calc(-1 * var(--sp-48) / 2)}
}
@keyframes plusPing{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(1.9);opacity:0}}
.promo.is-live .promo-item + .promo-item::after{animation:plusPing 2.4s var(--ease-out) infinite}
.promo.is-live .promo-item:nth-child(3)::after{animation-delay:1.2s}

/* a régi ár áthúzása kirajzolódik, a 0 Ft utána felugrik */
.pi-val s{position:relative;text-decoration:none}
.pi-val s::after{content:"";position:absolute;left:-3px;right:-3px;top:52%;height:2px;border-radius:2px;background:var(--danger);transform:rotate(-8deg)}
.js .promo[data-anim] .pi-val s::after{transform:rotate(-8deg) scaleX(0);transform-origin:left center;transition:transform 450ms var(--ease-out) .7s}
.js .promo.is-on .pi-val s::after{transform:rotate(-8deg) scaleX(1)}
.js .promo[data-anim] .pi-val b{display:inline-block;opacity:0;transform:scale(.7);transition:opacity 250ms var(--ease-out) 1.1s,transform 400ms cubic-bezier(.3,1.6,.5,1) 1.1s}
.js .promo.is-on .pi-val b{opacity:1;transform:none}
.pi-ico{background:var(--gold-500);color:var(--on-accent)}

/* --- érték-infografika ajánlat-részlettel --- */
@media (min-width:1024px){
  .valueg.has-receipt{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;column-gap:var(--sp-32)}
  .valueg.has-receipt .vg-row{grid-template-columns:minmax(0,1fr) auto}
  .valueg.has-receipt .vg-row .vg-track{grid-column:1 / -1;grid-row:2}
}
.vg-main{display:grid;gap:var(--sp-24)}
.vg-receipt{position:relative;background:var(--canvas);border-radius:var(--r-card);padding:var(--sp-24);overflow:hidden}
.vg-receipt::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:repeating-linear-gradient(90deg,var(--route) 0 12px,transparent 12px 20px)}
.rc-h{display:flex;align-items:center;gap:var(--sp-8);font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-muted);margin-top:var(--sp-4)}
.rc-h .ico{width:18px;height:18px}
.rc-rows{list-style:none;display:grid;gap:var(--sp-8);margin-top:var(--sp-16)}
.rc-rows li{display:grid;grid-template-columns:auto minmax(12px,1fr) auto;align-items:baseline;gap:var(--sp-8)}
.rc-rows i{border-bottom:var(--stroke) dotted var(--ink-faint);transform:translateY(-4px)}
.rc-rows b{font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap}
.rc-rows li.rc-gift span,.rc-rows li.rc-gift b{color:var(--success);font-weight:600}
.rc-total{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-16);margin-top:var(--sp-16);padding-top:var(--sp-12);border-top:var(--stroke) solid var(--ink)}
.rc-total span{font-weight:600}
.rc-total b{font-size:var(--fs-title);font-weight:600;color:var(--success);font-variant-numeric:tabular-nums}
.rc-stamp{position:absolute;right:16px;top:18px;padding:4px 12px;border:3px solid var(--danger);border-radius:8px;color:var(--danger);
  font-family:var(--font-mono);font-weight:500;font-size:15px;letter-spacing:.12em;text-transform:uppercase;transform:rotate(-14deg);opacity:.85;pointer-events:none}
.js .valueg[data-anim] .rc-stamp{opacity:0;transform:rotate(-14deg) scale(1.8)}
.js .valueg.is-on .rc-stamp{opacity:.85;transform:rotate(-14deg) scale(1);transition:opacity 200ms var(--ease-out) 1.2s,transform 380ms cubic-bezier(.3,1.5,.5,1) 1.2s}
.js .valueg[data-anim] .rc-rows li{opacity:0;transform:translateX(-8px);transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out)}
.js .valueg.is-on .rc-rows li{opacity:1;transform:none}
.js .valueg.is-on .rc-rows li:nth-child(2){transition-delay:.15s} .js .valueg.is-on .rc-rows li:nth-child(3){transition-delay:.3s}
.js .valueg.is-on .rc-rows li:nth-child(4){transition-delay:.45s} .js .valueg.is-on .rc-rows li:nth-child(5){transition-delay:.6s}
.js .valueg.is-on .rc-rows li:nth-child(6){transition-delay:.75s}

/* --- folyamatábra: a kigyúlt lépés arany korongot kap; a cél ajándékja pulzál --- */
.js .pflow.is-on .fs-ico,html:not(.js) .fs-ico{background:var(--gold-500);color:var(--on-accent)}
.js .pflow[data-anim] .fs-ico{transition:border-color var(--dur-state) var(--ease-out),background-color 300ms var(--ease-out),color 300ms var(--ease-out)}
.fb-gift{position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-circle);background:var(--gold-500);color:var(--on-accent)}
.fb-gift .ico{width:24px;height:24px}
.fb-gift::after{content:"";position:absolute;inset:0;border-radius:var(--r-circle);border:var(--stroke) solid var(--gold-500);opacity:0}
.pflow.is-live .fb-gift::after{animation:plusPing 2.4s var(--ease-out) infinite}

/* --- böngészőkeretes galéria --- */
.gallery.g-frame .g-img{position:relative;padding-top:30px;border-radius:12px;background:var(--surface-hover)}
.gallery.g-frame .g-img::before{content:"";position:absolute;top:11px;left:14px;width:46px;height:8px;
  background:radial-gradient(circle at 4px 4px,var(--ink-faint) 3.5px,transparent 4px) 0 0 / 16px 8px repeat-x}
.gallery.g-frame .g-img img{border-radius:0 0 10px 10px}
.gallery.g-frame a.g-img img{transition:transform 400ms var(--ease-out)}
.gallery.g-frame a.g-img:hover img{transform:scale(1.02)}

/* --- ikonos feltételrács --- */
.checks{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:var(--gap-items);max-width:var(--measure-title)}
.checks li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--sp-16);background:var(--surface);border-radius:var(--r-card);padding:var(--sp-24)}
.ck-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-circle);background:var(--canvas);color:var(--ink)}
.ck-ico .ico{width:20px;height:20px}
.checks b{font-weight:600}
.checks p{color:var(--ink-muted);margin-top:var(--sp-4)}

/* --- kiemelt menüpont (Akció) --- */
.rail-link.is-hot{justify-content:flex-start}
.hot-dot{width:8px;height:8px;border-radius:var(--r-circle);background:var(--gold-500);flex:none}

@media (prefers-reduced-motion:reduce){
  .promo-sticker,.st-burst,.st-words span,.promo-item + .promo-item::after,.fb-gift::after{animation:none!important}
  .promo-sticker{transform:rotate(-12deg)}
  .js .promo[data-anim] .promo-sticker,.js .promo[data-anim] .pi-val b,.js .valueg[data-anim] .rc-rows li{opacity:1!important;scale:1!important;transform:none!important;transition:none!important}
  .js .promo[data-anim] .pi-val s::after{transform:rotate(-8deg)!important;transition:none!important}
  .js .valueg[data-anim] .rc-stamp{opacity:.85!important;transform:rotate(-14deg)!important;transition:none!important}
}

/* --- élő munkák kirakata (.showcase) ---
   Sötét „bemutatóterem”: három böngészőablak térben (oldalsók elforgatva, halványítva).
   A kártya vagy az ablak fölé víve az ablak előre jön — CSS :has, JS nélkül. Belépéskor
   az ablakok alulról, egymás után úsznak be (a `translate` tulajdonsággal, hogy a
   `transform`-os elrendezést ne írja felül). Mobilon lapozható, sík sor. */
.showcase{max-width:var(--measure-title);display:grid;gap:var(--sp-32)}
.sc-stage{position:relative;aspect-ratio:16 / 9;border-radius:var(--r-24);overflow:hidden;perspective:1800px;border:1px solid var(--surface-hover);
  background-color:var(--canvas);background-image:radial-gradient(circle,var(--surface-hover) 1.2px,transparent 1.6px);background-size:24px 24px}
.sc-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--stroke);background:var(--route);opacity:.9}
.sc-win{position:absolute;top:50%;left:50%;width:46%;border-radius:12px;overflow:hidden;background:var(--surface);color:var(--ink);
  outline:1px solid var(--surface-hover);text-decoration:none;
  transition:transform 600ms var(--ease-out),filter 600ms var(--ease-out),translate 700ms var(--ease-out),opacity 500ms var(--ease-out)}
.sc-win:focus-visible{outline:var(--focus-w) solid var(--accent);outline-offset:3px}
.sc-bar{display:flex;align-items:center;gap:12px;height:30px;padding:0 12px;background:var(--surface)}
.sc-dots{width:42px;height:8px;flex:none;background:radial-gradient(circle at 4px 4px,var(--ink-faint) 3.5px,transparent 4px) 0 0 / 16px 8px repeat-x}
.sc-url{display:inline-flex;align-items:center;gap:6px;min-width:0;height:20px;padding:0 12px;border-radius:var(--r-pill);background:var(--canvas);
  font-family:var(--font-mono);font-size:12px;color:var(--ink-muted);white-space:nowrap;overflow:hidden}
.sc-url .ico{width:12px;height:12px}
.sc-win img{display:block;width:100%;height:auto}
.sc-win.p1{transform:translate(-112%,-47%) rotateY(20deg) scale(.85);z-index:1;filter:brightness(.66)}
.sc-win.p2{transform:translate(-50%,-50%) scale(1.06);z-index:3}
.sc-win.p3{transform:translate(12%,-47%) rotateY(-20deg) scale(.85);z-index:1;filter:brightness(.66)}
/* kiemelés: a választott ablak előre jön, a középső háttérbe lép */
.sc-win.p1:hover,.showcase:has(.sc-card.c1:is(:hover,:focus-within)) .sc-win.p1{transform:translate(-93%,-50%) rotateY(0) scale(1.06);z-index:5;filter:none}
.sc-win.p3:hover,.showcase:has(.sc-card.c3:is(:hover,:focus-within)) .sc-win.p3{transform:translate(-7%,-50%) rotateY(0) scale(1.06);z-index:5;filter:none}
.showcase:has(.sc-win.p1:hover) .sc-win.p2,.showcase:has(.sc-win.p3:hover) .sc-win.p2,
.showcase:has(.sc-card.c1:is(:hover,:focus-within)) .sc-win.p2,.showcase:has(.sc-card.c3:is(:hover,:focus-within)) .sc-win.p2{filter:brightness(.66);transform:translate(-50%,-50%) scale(.94)}
.sc-win.p2:hover,.showcase:has(.sc-card.c2:is(:hover,:focus-within)) .sc-win.p2{transform:translate(-50%,-50%) scale(1.12)}
/* projektkártyák */
/* két ablak (.n2): egymás mellett, kissé befelé fordulva; a kártya fölé víve az ablak kiegyenesedik */
.sc-stage.n2 .sc-win.p1{transform:translate(-97%,-50%) rotateY(16deg) scale(.92);z-index:2;filter:none}
.sc-stage.n2 .sc-win.p2{transform:translate(-3%,-50%) rotateY(-16deg) scale(.92);z-index:2;filter:none}
.sc-stage.n2 .sc-win.p1:hover,.showcase:has(.sc-card.c1:is(:hover,:focus-within)) .sc-stage.n2 .sc-win.p1{transform:translate(-90%,-50%) rotateY(0) scale(1.02);z-index:5;filter:none}
.sc-stage.n2 .sc-win.p2:hover,.showcase:has(.sc-card.c2:is(:hover,:focus-within)) .sc-stage.n2 .sc-win.p2{transform:translate(-10%,-50%) rotateY(0) scale(1.02);z-index:5;filter:none}
.showcase:has(.sc-stage.n2 .sc-win.p1:hover) .sc-stage.n2 .sc-win.p2,.showcase:has(.sc-card.c1:is(:hover,:focus-within)) .sc-stage.n2 .sc-win.p2{transform:translate(-3%,-50%) rotateY(-16deg) scale(.9);filter:brightness(.66)}
.showcase:has(.sc-stage.n2 .sc-win.p2:hover) .sc-stage.n2 .sc-win.p1,.showcase:has(.sc-card.c2:is(:hover,:focus-within)) .sc-stage.n2 .sc-win.p1{transform:translate(-97%,-50%) rotateY(16deg) scale(.9);filter:brightness(.66)}
.sc-cards{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:var(--gap-items)}
.sc-card{display:flex;flex-direction:column;gap:var(--sp-12);background:var(--surface);border-radius:var(--r-card);padding:var(--sp-24);
  border-top:4px solid var(--c);transition:background-color var(--dur-state) var(--ease-out)}
.sc-card:hover,.sc-card:focus-within{background:var(--surface-hover)}
.sc-kicker{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-muted)}
.sc-t{font-size:var(--fs-title);font-weight:500;line-height:var(--lh-title);letter-spacing:var(--ls-title)}
.sc-d{color:var(--ink-muted)}
.sc-stats{list-style:none;display:grid;gap:var(--sp-8);padding:var(--sp-12) 0;border-top:var(--stroke) solid var(--canvas);border-bottom:var(--stroke) solid var(--canvas)}
.sc-stats li{display:flex;align-items:baseline;gap:var(--sp-8)}
.sc-stats b{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.sc-stats span{color:var(--ink-muted)}
.sc-card .tags{display:flex;flex-wrap:wrap;gap:var(--sp-8)}
.sc-links{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-12) var(--sp-16);padding-top:var(--sp-8)}
.sc-links .btn .ico{width:18px;height:18px}
@media (max-width:767px){
  .sc-stage{aspect-ratio:auto;display:flex;gap:var(--sp-16);overflow-x:auto;scroll-snap-type:x mandatory;padding:var(--sp-24) var(--sp-16);perspective:none}
  .sc-win{position:relative;top:auto;left:auto;flex:0 0 86%;scroll-snap-align:center;transform:none!important;filter:none!important}
}
/* belépés */
.js .showcase[data-anim] .sc-win{opacity:0;translate:0 48px}
.js .showcase.is-on .sc-win{opacity:1;translate:0 0}
/* a késleltetés csak a belépésre vonatkozik, a kiemelésre (transform, filter) nem */
.js .showcase.is-on .sc-win.p1{transition:transform 600ms var(--ease-out),filter 600ms var(--ease-out),translate 700ms var(--ease-out) .15s,opacity 500ms var(--ease-out) .15s}
.js .showcase.is-on .sc-win.p3{transition:transform 600ms var(--ease-out),filter 600ms var(--ease-out),translate 700ms var(--ease-out) .3s,opacity 500ms var(--ease-out) .3s}
@media (prefers-reduced-motion:reduce){
  .sc-win{transition:none!important}
  .js .showcase[data-anim] .sc-win{opacity:1!important;translate:none!important}
}

@media print{
  .consent,.burger,.menu,.menu-scrim,.route,.route-lines,.chips,.scroll-hint,.art-toc,.closing,.site-foot .foot-grid{display:none!important}
  .tbl{overflow:visible}
  .site-foot{padding-top:var(--sp-24)}
}