/* AiGent · 2026 Brand Identity 1.1 · komponensek
   Csak a tokens.css változóit használja. Szín, méret vagy időtartam ide nem kerül nyersen.
   Betöltési sorrend: assets/fonts/fonts.css → tokens.css → lib/aigent.css */

/* ── alap ─────────────────────────────────────────────── */
.ag{font-family:var(--ag-font-sans);color:var(--ag-text-1);background:var(--ag-bg);-webkit-font-smoothing:antialiased}
.ag *,.ag *::before,.ag *::after{box-sizing:border-box}
/* minden témajelölt elem a saját témája szerint színez és fest hátteret (a szülő témája nem öröklődik bele) */
[data-ag-theme]{color:var(--ag-text-1);background-color:var(--ag-bg)}

/* ── háttér: az 1. dia rétegei (lásd brand-rules.md 4. pont) ─────────
   1. alap: --ag-bg   2. kék fényfolt bal fent   3. barack fényfolt jobb lent   4. grain minden felett */
.ag-aurora{position:relative;overflow:hidden;isolation:isolate;background:var(--ag-bg);--ag-aurora-scale:1}
.ag-aurora::before,.ag-aurora::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:-1;opacity:var(--ag-aurora-opacity)}
.ag-aurora::before{
  width:calc(var(--ag-effect-aurora-a-size) * var(--ag-aurora-scale));height:calc(var(--ag-effect-aurora-a-size) * var(--ag-aurora-scale));
  left:calc(var(--ag-effect-aurora-a-left) * var(--ag-aurora-scale));top:calc(var(--ag-effect-aurora-a-top) * var(--ag-aurora-scale));
  background:var(--ag-effect-aurora-a-color);filter:blur(calc(var(--ag-effect-aurora-a-blur) * var(--ag-aurora-scale)))}
.ag-aurora::after{
  width:calc(var(--ag-effect-aurora-b-size) * var(--ag-aurora-scale));height:calc(var(--ag-effect-aurora-b-size) * var(--ag-aurora-scale));
  right:calc(var(--ag-effect-aurora-b-right) * var(--ag-aurora-scale));bottom:calc(var(--ag-effect-aurora-b-bottom) * var(--ag-aurora-scale));
  background:var(--ag-effect-aurora-b-color);filter:blur(calc(var(--ag-effect-aurora-b-blur) * var(--ag-aurora-scale)))}
/* webes felületen arányosan kisebb foltok (a vászonon 1) */
@media (max-width:1439px){.ag-aurora:not(.ag-canvas){--ag-aurora-scale:.75}}
@media (max-width:767px){.ag-aurora:not(.ag-canvas){--ag-aurora-scale:.5}}
.ag-grain{position:absolute;inset:0;pointer-events:none;z-index:5;opacity:var(--ag-effect-grain-opacity);
  background-image:url("../assets/backgrounds/grain.svg");background-size:var(--ag-effect-grain-tile)}

/* ── prezentációs vászon (1920 × 1080, arányosan illesztve) ── */
.ag-canvas{width:var(--ag-layout-presentation-canvas-w);height:var(--ag-layout-presentation-canvas-h);
  padding:var(--ag-layout-presentation-pad-top) var(--ag-layout-presentation-pad-x) var(--ag-layout-presentation-pad-bottom);
  display:flex;flex-direction:column}
.ag-fit{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--ag-color-stage-black);border-radius:var(--ag-radius-card)}
.ag-fit>.ag-canvas{position:absolute;left:50%;top:50%;transform-origin:center;transform:translate(-50%,-50%) scale(var(--ag-fit-scale,.5))}

/* ── tipográfia ───────────────────────────────────────── */
.ag-display,.ag-h1,.ag-h2,.ag-h3,.ag-lead,.ag-body,.ag-caption,.ag-kicker,.ag-metric-xl,.ag-metric-l,.ag-tag,.ag-source,.ag-quote{margin:0}
.ag-display,.ag-h1,.ag-h2,.ag-h3,.ag-metric-xl,.ag-metric-l,.ag-quote{color:var(--ag-text-1)}
.ag-display{font:var(--ag-type-display-weight) var(--ag-type-display-size)/var(--ag-type-display-lh) var(--ag-type-display-family);letter-spacing:var(--ag-type-display-ls)}
.ag-h1{font:var(--ag-type-h1-weight) var(--ag-type-h1-size)/var(--ag-type-h1-lh) var(--ag-type-h1-family);letter-spacing:var(--ag-type-h1-ls)}
.ag-h2{font:var(--ag-type-h2-weight) var(--ag-type-h2-size)/var(--ag-type-h2-lh) var(--ag-type-h2-family);letter-spacing:var(--ag-type-h2-ls);max-width:var(--ag-layout-web-measure-h2)}
.ag-h3{font:var(--ag-type-h3-weight) var(--ag-type-h3-size)/var(--ag-type-h3-lh) var(--ag-type-h3-family);letter-spacing:var(--ag-type-h3-ls)}
.ag-lead{font:var(--ag-type-lead-weight) var(--ag-type-lead-size)/var(--ag-type-lead-lh) var(--ag-type-lead-family);color:var(--ag-text-2);max-width:var(--ag-layout-web-measure-lead)}
.ag-canvas .ag-lead{max-width:var(--ag-layout-presentation-lead-measure)}
.ag-body{font:var(--ag-type-body-weight) var(--ag-type-body-size)/var(--ag-type-body-lh) var(--ag-type-body-family);color:var(--ag-text-2);max-width:var(--ag-layout-web-measure-text)}
.ag-caption{font:var(--ag-type-caption-weight) var(--ag-type-caption-size)/var(--ag-type-caption-lh) var(--ag-type-caption-family);color:var(--ag-text-2)}
.ag-kicker{font:var(--ag-type-kicker-weight) var(--ag-type-kicker-size)/var(--ag-type-kicker-lh) var(--ag-type-kicker-family);letter-spacing:var(--ag-type-kicker-ls);text-transform:uppercase;color:var(--ag-text-3);margin-bottom:var(--ag-layout-web-kicker-gap)}
.ag-kicker b{color:var(--ag-accent);font-weight:500}
.ag-canvas .ag-kicker{margin-bottom:var(--ag-layout-presentation-kicker-gap)}
.ag-canvas .ag-h2{max-width:var(--ag-layout-presentation-h2-measure)}
.ag-metric-xl{font:var(--ag-type-metric-xl-weight) var(--ag-type-metric-xl-size)/var(--ag-type-metric-xl-lh) var(--ag-type-metric-xl-family);letter-spacing:var(--ag-type-metric-xl-ls)}
.ag-metric-l{font:var(--ag-type-metric-l-weight) var(--ag-type-metric-l-size)/var(--ag-type-metric-l-lh) var(--ag-type-metric-l-family);letter-spacing:var(--ag-type-metric-l-ls)}
.ag-quote{font:var(--ag-type-quote-weight) var(--ag-type-quote-size)/var(--ag-type-quote-lh) var(--ag-type-quote-family);letter-spacing:var(--ag-type-quote-ls)}
.ag-mono{font-family:var(--ag-font-mono)}
.ag-grad,.ag-grad[data-ag-theme]{background:var(--ag-color-aurora-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.ag-source{font:var(--ag-type-source-weight) var(--ag-type-source-size)/var(--ag-type-source-lh) var(--ag-type-source-family);letter-spacing:var(--ag-type-source-ls);color:var(--ag-text-3);display:flex;justify-content:space-between;gap:var(--ag-space-7)}
.ag-canvas .ag-source{position:absolute;left:var(--ag-layout-presentation-pad-x);right:var(--ag-layout-presentation-pad-x);bottom:var(--ag-layout-presentation-source-bottom)}

/* ── címkék: állapot (szöveggel együtt, sosem csak szín) ── */
.ag-tag{display:inline-flex;align-items:center;gap:.5em;font:var(--ag-type-tag-weight) var(--ag-type-tag-size)/var(--ag-type-tag-lh) var(--ag-type-tag-family);letter-spacing:var(--ag-type-tag-ls);text-transform:uppercase;padding:.4em .9em;border-radius:var(--ag-radius-pill);border:var(--ag-stroke-hairline) solid var(--ag-line);color:var(--ag-text-2)}
.ag-tag--live::before{content:"";width:.6em;height:.6em;border-radius:50%;background:var(--ag-color-status-live-hex);background:var(--ag-color-status-live)}
.ag-tag--demo{border-color:var(--ag-color-status-demo-border);color:var(--ag-tag-demo)}
.ag-tag--future{border-color:var(--ag-color-status-future-border);color:var(--ag-tag-future)}
.ag-tag--own{border-color:var(--ag-color-status-own-border);color:var(--ag-tag-own)}
.ag-placeholder{font-family:var(--ag-font-mono);color:var(--ag-color-status-demo);border:var(--ag-stroke-hairline) dashed var(--ag-color-status-placeholder-border);border-radius:var(--ag-radius-tooltip);padding:.4em .7em;display:inline-block}

/* ── felületek és rácsok ──────────────────────────────── */
.ag-card{background:var(--ag-fill-card);border:var(--ag-stroke-hairline) solid var(--ag-line);border-radius:var(--ag-radius-card);padding:var(--ag-layout-web-card-pad);backdrop-filter:blur(var(--ag-effect-glass-blur));-webkit-backdrop-filter:blur(var(--ag-effect-glass-blur));box-shadow:var(--ag-card-shadow)}
.ag-canvas .ag-card{padding:var(--ag-layout-presentation-card-pad-y) var(--ag-layout-presentation-card-pad-x)}
/* saját témájú kártya: az áttetsző kitöltés a SAJÁT témája alapjára kerül, nem a szülőére */
.ag-card[data-ag-theme]{background:linear-gradient(var(--ag-fill-card),var(--ag-fill-card)),var(--ag-bg)}
.ag-grid-2,.ag-grid-3{display:grid;gap:var(--ag-layout-web-grid-gap)}
.ag-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ag-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ag-canvas .ag-grid-2{gap:var(--ag-layout-presentation-grid-gap-l)}
.ag-canvas .ag-grid-3{gap:var(--ag-layout-presentation-grid-gap-s)}
@media (max-width:767px){.ag-grid-2:not(.ag-canvas *),.ag-grid-3:not(.ag-canvas *){grid-template-columns:1fr}}
.ag-rule{border:0;border-top:var(--ag-stroke-hairline) solid var(--ag-line);margin:0}
.ag-container{max-width:var(--ag-layout-web-container);margin-inline:auto;padding-inline:var(--ag-layout-web-page-x)}
.ag-section{padding-block:var(--ag-layout-web-section-y)}

/* ── idővonal (aurora gerinc, üres pontok) ── */
.ag-timeline{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--ag-space-5)}
.ag-timeline::before{content:"";position:absolute;left:0;right:0;top:.6em;height:2px;background:var(--ag-color-aurora-gradient);opacity:.6}
.ag-timeline .pt{position:relative;padding-top:2.4em}
.ag-timeline .pt::before{content:"";position:absolute;top:.2em;left:0;width:.85em;height:.85em;border-radius:50%;background:var(--ag-bg);border:3px solid var(--ag-color-aurora-lavender)}
.ag-timeline .y{font-family:var(--ag-font-mono);color:var(--ag-text-1)}
.ag-timeline .x{color:var(--ag-text-2);margin-top:.4em;line-height:1.35}
@media (max-width:767px){.ag-timeline:not(.ag-canvas *){grid-auto-flow:row}.ag-timeline:not(.ag-canvas *)::before{display:none}}

/* ── összevetés két oszlopban (ajánlatkérés útja) ── */
.ag-race{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--ag-layout-presentation-grid-gap);row-gap:6px}
.ag-race>div{padding:.5em 0;border-bottom:var(--ag-stroke-hairline) solid var(--ag-line);color:var(--ag-text-2);line-height:1.35}
.ag-race b{font-family:var(--ag-font-mono);font-weight:500;margin-right:.5em}
.ag-race .a b{color:var(--ag-color-aurora-peach)}
.ag-race .b b{color:var(--ag-color-aurora-blue)}

/* ── haladásjelző és tooltip ── */
.ag-progress{position:absolute;left:0;bottom:0;height:var(--ag-motion-presentation-progress-height);background:var(--ag-color-aurora-gradient);transition:width var(--ag-motion-presentation-progress-duration)}
.ag-tip{position:fixed;pointer-events:none;background:var(--ag-raised);border:var(--ag-stroke-hairline) solid var(--ag-line);border-radius:var(--ag-radius-tooltip);padding:.6em .8em;font:400 var(--ag-type-chart-value-size)/1.2 var(--ag-font-mono);color:var(--ag-text-1);opacity:0;transition:opacity var(--ag-motion-presentation-tooltip-duration);z-index:50;white-space:nowrap}

/* ── ábrák (SVG osztályok, nyers szín nélkül) ── */
.ag-chart{width:100%}
.ag-chart svg{display:block;width:100%;height:auto;overflow:visible}
.ag-chart text{fill:var(--ag-text-2);font-family:var(--ag-font-sans)}
.ag-chart .num{fill:var(--ag-text-1);font-family:var(--ag-font-mono)}
.ag-chart .mono{font-family:var(--ag-font-mono)}
.ag-chart .ax{stroke:var(--ag-line);stroke-width:var(--ag-stroke-hairline)}
.ag-g text{font-family:var(--ag-font-sans);fill:var(--ag-text-2)}
.ag-g .t1{fill:var(--ag-text-1);font-weight:600}
.ag-g .t4{fill:var(--ag-text-4)}
.ag-g .mono{font-family:var(--ag-font-mono)}
.ag-g .label-free{fill:var(--ag-g-label-free);font-family:var(--ag-font-mono);letter-spacing:.15em}
.ag-g .label-closed{fill:var(--ag-g-label-closed);font-family:var(--ag-font-mono);letter-spacing:.15em}
.ag-g .label-human{fill:var(--ag-g-label-human);font-family:var(--ag-font-mono)}
.ag-g .zone-free{fill:var(--ag-color-graph-zone-free-fill);stroke:var(--ag-color-graph-zone-free-stroke);stroke-dasharray:var(--ag-stroke-dash-zone)}
.ag-g .zone-closed{fill:var(--ag-color-graph-zone-closed-fill);stroke:var(--ag-color-graph-zone-closed-stroke)}
.ag-g .node{fill:var(--ag-g-node-fill);stroke:var(--ag-g-node-stroke)}
.ag-g .node-key{fill:var(--ag-g-node-fill);stroke:var(--ag-color-graph-node-key);stroke-width:var(--ag-stroke-emphasis)}
.ag-g .node-human{fill:var(--ag-color-graph-node-human-fill);stroke:var(--ag-color-graph-node-human-stroke);stroke-width:var(--ag-stroke-emphasis)}
.ag-g .node-ext{fill:var(--ag-g-ext-fill);stroke:var(--ag-g-node-stroke)}
.ag-g .node-ext-key{fill:var(--ag-color-graph-node-ext-fill);stroke:var(--ag-color-aurora-blue);stroke-width:var(--ag-stroke-emphasis)}
.ag-g .edge{stroke:var(--ag-g-edge);stroke-width:var(--ag-stroke-edge);fill:none}
.ag-g .edge-both{stroke:var(--ag-g-edge-both);stroke-width:var(--ag-stroke-emphasis);fill:none}
.ag-g .head{fill:var(--ag-g-head)}
.ag-g .frame{fill:none;stroke:var(--ag-g-frame);stroke-width:var(--ag-stroke-edge);stroke-dasharray:var(--ag-stroke-dash-frame)}
.ag-g .zone{fill:var(--ag-g-zone-fill);stroke:var(--ag-g-zone-stroke);stroke-width:var(--ag-stroke-emphasis)}
.ag-g .core{fill:var(--ag-g-node-fill);stroke:var(--ag-g-core-stroke);stroke-width:var(--ag-stroke-emphasis)}
.ag-g .spine{stroke-width:var(--ag-stroke-chain);stroke-linecap:round}
.ag-g .outline-1{fill:none;stroke:var(--ag-color-aurora-blue);stroke-width:var(--ag-stroke-series)}
.ag-g .outline-2{fill:none;stroke:var(--ag-color-aurora-lavender);stroke-width:var(--ag-stroke-series)}
.ag-g .outline-3{fill:none;stroke:var(--ag-color-aurora-peach);stroke-width:var(--ag-stroke-series)}
.ag-g .stop-1{stop-color:var(--ag-color-aurora-blue)}
.ag-g .stop-2{stop-color:var(--ag-color-aurora-lavender)}
.ag-g .stop-3{stop-color:var(--ag-color-aurora-peach)}
.ag-g .on-pastel{fill:var(--ag-color-paper-ink-1);font-weight:600}
/* a világos változatot a téma szemantikus változói adják (--ag-g-*), így mindig a legközelebbi data-ag-theme érvényes */

/* ── mozgás ───────────────────────────────────────────── */
/* prezentáció: lépcsős belépés kattintásra (.on) */
.ag-step{opacity:0;transform:translateY(var(--ag-motion-presentation-step-distance));transition:opacity var(--ag-motion-presentation-step-duration) var(--ag-motion-presentation-step-easing),transform var(--ag-motion-presentation-step-duration) var(--ag-motion-presentation-step-easing)}
.ag-step.on{opacity:1;transform:none}
/* prezentáció: diaváltás áttűnéssel */
.ag-slide{opacity:0;visibility:hidden;transition:opacity var(--ag-motion-presentation-slide-duration) var(--ag-motion-presentation-slide-easing),visibility var(--ag-motion-presentation-slide-duration)}
.ag-slide.active{opacity:1;visibility:visible}
/* nyitólogó: alulról, elmosódásból élesedve */
.ag-logo-in{opacity:0;transform:translateY(var(--ag-motion-presentation-logo-distance));filter:blur(var(--ag-motion-presentation-logo-blur));
  transition:transform var(--ag-motion-presentation-logo-duration) var(--ag-motion-presentation-logo-easing),opacity var(--ag-motion-presentation-logo-duration) ease,filter var(--ag-motion-presentation-logo-duration) ease}
.ag-logo-in.on{opacity:1;transform:none;filter:none}
/* web: görgetéses belépés egyszer (.is-in), rövidebb és kisebb elmozdulással */
.ag-reveal{opacity:0;transform:translateY(var(--ag-motion-web-reveal-distance));transition:opacity var(--ag-motion-web-reveal-duration) var(--ag-motion-web-reveal-easing),transform var(--ag-motion-web-reveal-duration) var(--ag-motion-web-reveal-easing);transition-delay:calc(var(--i,0) * var(--ag-motion-web-reveal-stagger))}
.ag-reveal.is-in{opacity:1;transform:none}
/* web: hover és fókusz */
.ag-link{color:var(--ag-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;transition:color var(--ag-motion-web-hover-duration) var(--ag-motion-web-hover-easing)}
.ag-link:hover{color:var(--ag-text-1)}
.ag-button{display:inline-flex;align-items:center;gap:.5em;text-decoration:none;font:500 var(--ag-type-body-size)/1 var(--ag-font-sans);padding:.8em 1.3em;border-radius:var(--ag-radius-pill);border:var(--ag-stroke-hairline) solid var(--ag-line-strong);background:var(--ag-fill-card);color:var(--ag-text-1);cursor:pointer;
  transition:border-color var(--ag-motion-web-hover-duration) var(--ag-motion-web-hover-easing),background-color var(--ag-motion-web-hover-duration) var(--ag-motion-web-hover-easing),transform var(--ag-motion-web-hover-duration) var(--ag-motion-web-hover-easing)}
.ag-button:hover{border-color:var(--ag-accent);transform:translateY(-1px)}
.ag-button:active{transform:none}
.ag-button--primary{background:var(--ag-color-aurora-gradient);color:var(--ag-color-paper-ink-1);border-color:transparent}
.ag :focus-visible{outline:2px solid var(--ag-accent);outline-offset:3px}

/* csökkentett mozgás: minden azonnal a végállapotban, olvasható és használható */
@media (prefers-reduced-motion:reduce){
  .ag-step,.ag-slide,.ag-logo-in,.ag-reveal,.ag-button,.ag-link,.ag-progress,.ag-tip{transition:none!important}
  .ag-reveal,.ag-logo-in{opacity:1;transform:none;filter:none}
  .ag-button:hover{transform:none}
}
/* ugyanez kézzel kapcsolva (bemutatóhoz): <html class="ag-reduced"> */
.ag-reduced .ag-step,.ag-reduced .ag-slide,.ag-reduced .ag-logo-in,.ag-reduced .ag-reveal,.ag-reduced .ag-button{transition:none!important}
.ag-reduced .ag-reveal,.ag-reduced .ag-logo-in{opacity:1;transform:none;filter:none}

/* nyomtatás és statikus kép: a lépcsős elemek látszanak */
@media print{.ag-step,.ag-reveal,.ag-logo-in{opacity:1!important;transform:none!important;filter:none!important}}
.ag-static .ag-step,.ag-static .ag-reveal,.ag-static .ag-logo-in{opacity:1;transform:none;filter:none;transition:none}
.ag-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.ag-chart{position:relative}
.ag-chart-demo{margin-bottom:var(--ag-space-3)}

/* ── előzetes képernyő: váltakozó teaserek (a mozgó hálózat felett) ── */
.ag-teaser{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;opacity:0;transform:scale(var(--ag-motion-presentation-teaser-scaleFrom));
  transition:opacity var(--ag-motion-presentation-teaser-fade) var(--ag-motion-presentation-teaser-easing),transform var(--ag-motion-presentation-teaser-scaleDuration) var(--ag-motion-presentation-teaser-scaleEasing)}
.ag-teaser.on{opacity:1;transform:none}
.ag-network{position:absolute;inset:0;width:100%;height:100%}
@media (prefers-reduced-motion:reduce){.ag-teaser{transition:none!important;transform:none}}
.ag-reduced .ag-teaser{transition:none!important;transform:none}