/* ARworks védelmi portfólió — prezentáció (1280×720-as vászon, arányosan a nézetablakhoz skálázva).
   Elv: az alapállapot mindig a VÉGLEGES kép (nyomtatás, áttekintő nézet, szkript nélkül is);
   a belépő mozgás és a „poénok” csak az aktív diára (`.slide.is-active`) kapcsolnak be, és
   `backwards` kitöltéssel a végállapotba érkeznek — így a hover-hatások sem ütköznek velük. */

.deck-body { margin: 0; height: 100vh; overflow: hidden; background: #050607; color: #fff; font-family: var(--font-body, 'Space Grotesk', sans-serif); -webkit-font-smoothing: antialiased; }
.deck-body *, .deck-body *::before, .deck-body *::after { box-sizing: border-box; }
.deck-body.is-idle { cursor: none; }
.deck-body { --ease: cubic-bezier(0.16, 1, 0.3, 1); }

/* ------------------------------------------------------------ keret: felső sáv, haladás, alsó navigáció */
.deck-topbar { position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 40; display: flex; align-items: center; gap: 20px; padding: 0 20px; background: rgba(8, 9, 10, 0.94); border-bottom: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(10px); transition: opacity 0.4s, transform 0.4s; }
.deck-brand { display: flex; align-items: baseline; gap: 1px; flex: none; text-decoration: none; }
.deck-brand b { font: 400 19px/1 var(--font-display, 'Jost', sans-serif); letter-spacing: 0.02em; color: #fff; }
.deck-brand span { font: 300 19px/1 var(--font-display, 'Jost', sans-serif); letter-spacing: 0.02em; color: #ef5422; }
.deck-topbar__title { flex: 1 1 auto; min-width: 0; font: 400 11px/1 var(--font-mono, monospace); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-topbar__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.deck-btn { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--font-body, sans-serif); color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, 0.26); border-radius: 2px; padding: 9px 13px; cursor: pointer; text-decoration: none; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.deck-btn:hover { background: #fff; color: #000; border-color: #fff; text-decoration: none; }
.deck-btn--accent { background: #ef5422; border-color: #ef5422; }
.deck-btn--accent:hover { background: #d3431a; border-color: #d3431a; color: #fff; }
.deck-lang { display: inline-flex; border: 1px solid rgba(255, 255, 255, 0.26); border-radius: 2px; overflow: hidden; }
.deck-lang span, .deck-lang a { font: 500 11px/1 var(--font-mono, monospace); letter-spacing: 0.1em; padding: 9px 10px; color: rgba(255, 255, 255, 0.7); text-decoration: none; }
.deck-lang .is-active { background: #fff; color: #000; }
.deck-lang a:hover { background: rgba(255, 255, 255, 0.14); color: #fff; text-decoration: none; }
.deck-progress { position: fixed; top: 56px; left: 0; right: 0; height: 2px; z-index: 40; background: rgba(255, 255, 255, 0.1); transition: opacity 0.4s; }
.deck-progress__bar { height: 100%; width: 0; background: #ef5422; transition: width 0.35s var(--ease); }
.deck-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 68px; z-index: 40; display: flex; align-items: center; justify-content: center; gap: 14px; background: rgba(8, 9, 10, 0.94); border-top: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(10px); transition: opacity 0.4s, transform 0.4s; }
.deck-arrow { width: 42px; height: 42px; display: grid; place-items: center; cursor: pointer; background: transparent; border: 1px solid rgba(255, 255, 255, 0.26); border-radius: 2px; color: #fff; transition: background 0.15s, color 0.15s; }
.deck-arrow:hover:not(:disabled) { background: #fff; color: #000; }
.deck-arrow:disabled { opacity: 0.28; cursor: default; }
.deck-count { font: 400 12px/1 var(--font-mono, monospace); letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.6); min-width: 78px; text-align: center; }
.deck-count b { color: #fff; font-weight: 400; }
.deck-hint { position: absolute; right: 20px; font: 400 10px/1 var(--font-mono, monospace); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.56); }
.deck-body.is-idle .deck-topbar { opacity: 0; transform: translateY(-100%); pointer-events: none; }
.deck-body.is-idle .deck-nav { opacity: 0; transform: translateY(100%); pointer-events: none; }
.deck-body.is-idle .deck-progress { opacity: 0; }
@media (max-width: 900px) { .deck-hint, .deck-btn span { display: none; } .deck-topbar__title { display: none; } .deck-topbar__actions { margin-left: auto; } }

/* ------------------------------------------------------------ vászon */
.deck { position: fixed; top: 58px; bottom: 68px; left: 0; right: 0; z-index: 10; }
.deck-body.is-fs .deck { top: 0; bottom: 0; }
.deck-edge { position: absolute; top: 0; bottom: 0; width: 10%; max-width: 150px; z-index: 1; cursor: pointer; background: transparent; border: 0; }
.deck-edge--left { left: 0; }
.deck-edge--right { right: 0; }
.stage { position: absolute; left: 50%; top: 50%; z-index: 2; width: 1280px; height: 720px; transform-origin: center center; background: #0a0b0c; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 40px 120px rgba(0, 0, 0, 0.7); }
.slide { position: absolute; inset: 0; padding: 50px 64px 52px; overflow: hidden; background: #0a0b0c; color: #fff; opacity: 0; visibility: hidden; transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), visibility 0s linear 0.5s; }
.slide.is-active { opacity: 1; visibility: visible; z-index: 2; transition-delay: 0s; }
.slide.is-prev { transform: translateX(-34px); }
.slide.is-next { transform: translateX(34px); }
/* a nem aktív diákon (és az áttekintő bélyegképein) a hurkok állnak: nincs háttérterhelés, a bélyegkép determinisztikus */
.slide:not(.is-active) *, .slide:not(.is-active) *::before, .slide:not(.is-active) *::after { animation-play-state: paused !important; }
/* :where() — a lejjebb álló, abszolút pozíciójú elemek (pl. .cv, .lv-tl) felülírhatják */
.slide > :where(:not(.s-bg):not(.s-wm):not(.s-foot)) { position: relative; z-index: 2; }
.s-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background:
  radial-gradient(700px 420px at 86% 18%, rgba(239, 84, 34, 0.12), transparent 70%),
  linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 64px 64px,
  linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 64px 64px; }
.s-wm { position: absolute; z-index: 1; right: -70px; top: -90px; height: 620px; width: auto; max-width: none; opacity: 0.045; pointer-events: none; }
.s-wm--cta { top: auto; bottom: -150px; opacity: 0.06; }
.s-foot { position: absolute; left: 64px; right: 64px; bottom: 20px; z-index: 2; display: flex; justify-content: space-between; font: 400 10px/1 var(--font-mono, monospace); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.52); }

/* ------------------------------------------------------------ tipográfia és elemek */
.deck-body .s-k { font: 400 12px/1.4 var(--font-mono, monospace); letter-spacing: 0.14em; text-transform: uppercase; color: #f2703f; }
.deck-body .s-h1 { font: 300 92px/1.02 var(--font-display, 'Jost', sans-serif); letter-spacing: 0.05em; text-transform: uppercase; margin-top: 20px; }
.deck-body .s-h1 em { font-style: normal; color: #ef5422; }
.deck-body .s-h2 { font: 300 44px/1.08 var(--font-display, 'Jost', sans-serif); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 14px; max-width: 24ch; text-wrap: balance; }
.deck-body .s-h2--xl { font-size: 54px; }
.deck-body .s-h2--wide { max-width: 40ch; }
.deck-body .s-lead--one { max-width: none; font-size: 15px; }
.deck-body .s-lead { font-size: 20px; line-height: 1.5; color: rgba(255, 255, 255, 0.7); margin-top: 22px; max-width: 54ch; text-wrap: pretty; }
.deck-body .s-lead--sm { font-size: 16.5px; margin-top: 14px; max-width: 76ch; }
.deck-body .s-label { font: 400 10.5px/1.3 var(--font-mono, monospace); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.64); }
.deck-body .s-note { font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.62); border-left: 2px solid #ef5422; padding: 2px 0 2px 14px; max-width: 52ch; }
.deck-body .s-list { margin-top: 22px; max-width: 46ch; }
.deck-body .s-list li { position: relative; padding-left: 24px; font-size: 17px; line-height: 1.45; color: rgba(255, 255, 255, 0.86); margin-top: 13px; }
.deck-body .s-list li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 11px; height: 1px; background: #ef5422; }
.deck-body .s-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.deck-body .s-chips li { font: 500 12px/1 var(--font-body, sans-serif); padding: 7px 10px; border: 1px solid rgba(255, 255, 255, 0.26); border-radius: 2px; color: rgba(255, 255, 255, 0.74); }
.deck-body .s-btn { display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px/1 var(--font-body, sans-serif); padding: 10px 14px; border: 1px solid rgba(255, 255, 255, 0.36); background: transparent; color: #fff; cursor: pointer; border-radius: 2px; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.deck-body .s-btn:hover { background: #fff; color: #000; border-color: #fff; }
.deck-body .s-btn--play { background: #ef5422; border-color: #ef5422; }
.deck-body .s-btn--play:hover { background: #d3431a; border-color: #d3431a; color: #fff; }
.deck-body .s-card__act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.deck-body button:focus-visible, .deck-body a:focus-visible, .deck-body [role='button']:focus-visible { outline: 2px solid #ef5422; outline-offset: 3px; }
.deck-body img { display: block; max-width: none; }

/* belépő mozgás: az alapállapot a végleges; az aktív diára „honnan” érkezik */
@keyframes d-rise { from { opacity: 0; transform: translateY(20px); } }
@keyframes d-pop { from { opacity: 0; transform: scale(0.94); } }
@keyframes d-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes d-grow { from { opacity: 0; transform: scale(0.04); } }
@keyframes d-fade { from { opacity: 0; } }
.slide.is-active .rv { animation: d-rise 0.8s var(--ease) backwards; animation-delay: calc(var(--d, 0) * 110ms + 200ms); }
.slide.is-active .rv-pop { animation: d-pop 0.9s var(--ease) backwards; animation-delay: calc(var(--d, 0) * 110ms + 200ms); }

/* számláló (@property): a szöveg a végső szám marad, csak az aktív diára rajzolódik fel */
@property --cu { syntax: '<integer>'; initial-value: 0; inherits: false; }
@keyframes d-count { from { --cu: 0; } to { --cu: var(--to, 0); } }
.slide.is-active .cu { --cu: 0; counter-reset: cu var(--cu); position: relative; color: transparent; animation: d-count 1.6s var(--ease) 0.5s forwards; }
.slide.is-active .cu::after { content: counter(cu); position: absolute; left: 0; top: 0; color: #fff; }

/* ------------------------------------------------------------ állapotjelzők és HUD-keret a diákon */
.deck-body .ap-brk i { border-color: rgba(255, 255, 255, 0.6); }

/* ------------------------------------------------------------ kártya (diákon) */
.s-card { position: relative; display: flex; flex-direction: column; overflow: hidden; background: #101316; border: 1px solid rgba(255, 255, 255, 0.14); transition: border-color 0.25s, transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.s-card:hover { border-color: #ef5422; transform: translateY(-3px); box-shadow: 0 26px 44px -24px rgba(0, 0, 0, 0.9); }
.s-card__media { position: relative; flex: none; overflow: hidden; background: #000; }
.s-card__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92) brightness(0.94); transition: transform 0.9s var(--ease), filter 0.5s; }
.s-card:hover .s-card__media img { transform: scale(1.05); filter: none; }
.s-card__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), transparent 30%, transparent 62%, rgba(0, 0, 0, 0.55)); pointer-events: none; }
.s-card__media .ap-brk { z-index: 3; }
.s-card__media .ap-status { position: absolute; right: 12px; top: 12px; z-index: 4; }
.deck-body .s-card:hover .ap-brk i { border-color: #ef5422; }
.deck-body .s-card:hover .ap-brk i:nth-child(1) { transform: translate(7px, 7px); }
.deck-body .s-card:hover .ap-brk i:nth-child(2) { transform: translate(-7px, 7px); }
.deck-body .s-card:hover .ap-brk i:nth-child(3) { transform: translate(7px, -7px); }
.deck-body .s-card:hover .ap-brk i:nth-child(4) { transform: translate(-7px, -7px); }
.s-card__chip { position: absolute; left: 12px; bottom: 12px; z-index: 4; padding: 5px 9px; font: 400 10px/1 var(--font-mono, monospace); letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: rgba(8, 9, 10, 0.74); border: 1px solid rgba(255, 255, 255, 0.26); backdrop-filter: blur(4px); }
.s-card__body { display: flex; flex-direction: column; gap: 7px; padding: 16px 18px 18px; flex: 1; }
.s-card__sub { font: 400 10.5px/1.3 var(--font-mono, monospace); letter-spacing: 0.12em; text-transform: uppercase; color: #f2703f; }
.s-card__t { font: 400 22px/1.15 var(--font-display, 'Jost', sans-serif); letter-spacing: 0.05em; text-transform: uppercase; }
.s-card__p { font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.68); }
.s-card__body .s-card__act { margin-top: auto; padding-top: 12px; }
.s-card--row { flex-direction: row; }
.s-card--row .s-card__media { width: 224px; }

@keyframes d-flow { to { stroke-dashoffset: -24; } }

/* ------------------------------------------------------------ közös mozgás-alapok */
@keyframes d-road { to { background-position-x: -60px; } }
@keyframes d-pulse { 0% { transform: scale(0.8); opacity: 0.9; } 100% { transform: scale(2.6); opacity: 0; } }
.deck-body .s-h2--xl { font-size: 54px; }

/* ------------------------------------------------------------ 01 — címlap: a hős-autó */
.cv { position: absolute; inset: 0; z-index: 2; padding: 58px 64px; pointer-events: none; }
.cv__copy { width: 560px; display: flex; flex-direction: column; align-items: flex-start; pointer-events: auto; }
.deck-body .cv__h1 { font-size: 60px; line-height: 1.05; margin-top: 18px; max-width: 14ch; }
.deck-body .cv .s-lead { max-width: 40ch; font-size: 19px; }
.cv__partners { margin-top: 26px; font: 400 11px/1.7 var(--font-mono, monospace); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); max-width: 46ch; }
.cv-stage { position: absolute; right: -52px; bottom: 36px; width: 860px; z-index: 3; }
.deck-body .ap-stage { width: 100%; margin-right: 0; min-height: 0; aspect-ratio: 860 / 470; }
.deck-body .ap-stage .ap-brk { inset: 8px 56px 8px 0; }
.deck-body .ap-stage__hud { left: 6%; top: 5%; }
.deck-body .ap-stage__tag { right: 64px; }
.deck-body .ap-swatches { bottom: 7%; }
/* a nyitóanimáció csak az aktív diára indul; az alapállapot a végleges kép */
.deck-body .ap-car__rig, .deck-body .ap-car__lamp, .deck-body .ap-car__beam { animation: none; }
.slide.is-active .ap-car__rig { animation: ap-drive 2.2s cubic-bezier(0.16, 1, 0.3, 1) 0.5s backwards; }
.slide.is-active .ap-car__lamp { animation: ap-lamp 1.6s ease 2.1s backwards; }
.slide.is-active .ap-car__beam { animation: ap-beam 2.2s ease 2.1s backwards; }
.slide.is-active .ap-stage__floor::after { animation: ap-floor 2.4s linear infinite; }
.deck-body .ap-stage__floor::after { animation: none; }
.slide--cover.is-active .s-wm { animation: d-fade 1.4s ease 0.2s backwards; }

/* ------------------------------------------------------------ 02 — három helyzet: a szellemkép „testet ölt” */
.st { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 26px; height: 440px; }
.st-p { position: relative; overflow: hidden; background: #000; border: 1px solid rgba(255, 255, 255, 0.14); transition: border-color 0.25s; }
.st-p:hover { border-color: #ef5422; }
.st-p__m { position: absolute; inset: 0; }
.st-p__m img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1.2s var(--ease), filter 0.5s; }
.st-p__g { filter: grayscale(1) brightness(0.42) contrast(1.25); }
.st-p__c { filter: saturate(0.9) brightness(0.74); }
.st-p:hover .st-p__c { transform: scale(1.06); filter: saturate(1) brightness(0.92); }
.slide.is-active .st-p__c { animation: st-fill 1.6s var(--ease) backwards; animation-delay: calc(var(--i) * 0.55s + 1s); }
@keyframes st-fill { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
.st-p__b { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; flex-direction: column; padding: 90px 26px 24px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.93), rgba(0, 0, 0, 0.62) 58%, transparent); }
.st-p__n { font: 300 58px/1 var(--font-display, 'Jost', sans-serif); color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.72); transition: color 0.4s, -webkit-text-stroke-color 0.4s; }
.st-p:hover .st-p__n { color: #ef5422; -webkit-text-stroke-color: #ef5422; }
.st-p__t { font: 400 25px/1.12 var(--font-display, 'Jost', sans-serif); letter-spacing: 0.05em; text-transform: uppercase; margin-top: 8px; }
.st-p__p { font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.82); margin-top: 8px; max-width: 32ch; }
.st-p__refs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.st-p__refs button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; cursor: pointer; font: 400 10.5px/1 var(--font-mono, monospace); letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: rgba(8, 9, 10, 0.6); border: 1px solid rgba(255, 255, 255, 0.4); transition: background 0.2s, color 0.2s; }
.st-p__refs button:hover { background: #fff; color: #000; }

/* ------------------------------------------------------------ 03 — úton 2011 óta: az autó végigmegy az éveken */
.yr { position: relative; margin-top: 8px; height: 450px; --n: 7; }
.yr-odo { position: absolute; right: 0; top: -92px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.yr-odo__n { font: 300 100px/1 var(--font-display, 'Jost', sans-serif); letter-spacing: 0.04em; color: #fff; font-variant-numeric: tabular-nums; }
.yr-odo em { font: 400 11px/1 var(--font-mono, monospace); letter-spacing: 0.14em; text-transform: uppercase; font-style: normal; color: rgba(255, 255, 255, 0.6); }
@property --yr { syntax: '<integer>'; initial-value: 2025; inherits: false; }
@keyframes yr-count { from { --yr: 2011; } to { --yr: 2025; } }
.slide.is-active .yr-odo__n { --yr: 2011; counter-reset: yr var(--yr); position: relative; color: transparent; animation: yr-count 8s linear 0.8s forwards; }
.slide.is-active .yr-odo__n::after { content: counter(yr); position: absolute; right: 0; top: 0; color: #fff; }
.yr-lane { position: absolute; left: 0; right: 0; top: 86px; height: 84px; overflow: hidden; background: linear-gradient(#171a1d, #0f1113); border-top: 1px solid rgba(255, 255, 255, 0.26); border-bottom: 1px solid rgba(255, 255, 255, 0.26); }
.yr-dash { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.42) 0 28px, transparent 28px 60px); }
.slide.is-active .yr-dash { animation: d-road 1.2s linear infinite; }
.yr-car { position: absolute; bottom: 9px; left: calc(100% - 172px); width: 172px; z-index: 2; filter: drop-shadow(0 7px 6px rgba(0, 0, 0, 0.6)); }
.yr-car img { display: block; width: 100%; height: auto; max-width: none; }
.slide.is-active .yr-car { animation: yr-drive 8s linear 0.8s backwards; }
@keyframes yr-drive { from { left: 0; } }
.yr-stops { position: absolute; left: 0; right: 0; top: 188px; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 12px; }
.yr-s { position: relative; padding-top: 28px; }
.yr-s::before { content: ''; position: absolute; left: 0; top: -22px; width: 1px; height: 50px; background: #ef5422; }
.yr-s::after { content: ''; position: absolute; left: -6px; top: 22px; width: 13px; height: 13px; border-radius: 50%; background: #ef5422; border: 2px solid #ef5422; box-shadow: 0 0 0 5px rgba(239, 84, 34, 0.22); }
.yr-s--idea::after { background: #0a0b0c; border-style: dashed; box-shadow: none; }
.slide.is-active .yr-s::after { animation: yr-lit 0.5s var(--ease) backwards; animation-delay: calc(0.1s + var(--i) * 1.34s); }
.slide.is-active .yr-s::before { animation: d-fade 0.4s ease backwards; animation-delay: calc(0.1s + var(--i) * 1.34s); }
@keyframes yr-lit { from { background: #0a0b0c; box-shadow: none; transform: scale(0.6); } }
.yr-s button { display: flex; flex-direction: column; gap: 7px; width: 100%; padding: 14px 4px 4px 0; text-align: left; cursor: pointer; background: none; border: 0; color: #fff; }
.yr-w { font: 400 12px/1 var(--font-mono, monospace); letter-spacing: 0.14em; color: #f2703f; }
.yr-t { font: 400 16px/1.2 var(--font-display, 'Jost', sans-serif); letter-spacing: 0.05em; text-transform: uppercase; transition: color 0.2s; }
.yr-p { font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.62); }
.yr-s button:hover .yr-t { color: #f2703f; }

/* ------------------------------------------------------------ 04 — térkép */
.mp { width: 990px; margin: 6px auto 0; }
.mp .ap-map { width: 100%; }
.slide.is-active .ap-map__arc:not(.ap-map__arc--show) { animation: d-draw 1.9s var(--ease) backwards; animation-delay: calc(0.5s + var(--i, 0) * 0.28s); }
.slide.is-active .ap-map__arc--show { animation: d-fade 0.8s ease 1.8s backwards; }
.mp-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin-top: 8px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.14); }
.mp-chips li { display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 16px; background: #0a0b0c; transition: background 0.25s; cursor: default; }
.mp-chips li:hover { background: #14181b; }
.mp-chips b { font: 400 16px/1.2 var(--font-display, 'Jost', sans-serif); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 400; }
.mp-chips span { font-size: 12px; line-height: 1.4; color: rgba(255, 255, 255, 0.62); }
/* a lista fölé húzva a térkép megfelelő pontja kiemelkedik */
.slide:has(.mp-chips li[data-city='budapest']:hover) .ap-map__node[data-city='budapest'] .ap-map__dot,
.slide:has(.mp-chips li[data-city='singapore']:hover) .ap-map__node[data-city='singapore'] .ap-map__dot,
.slide:has(.mp-chips li[data-city='hongkong']:hover) .ap-map__node[data-city='hongkong'] .ap-map__dot,
.slide:has(.mp-chips li[data-city='kuwait']:hover) .ap-map__node[data-city='kuwait'] .ap-map__dot,
.slide:has(.mp-chips li[data-city='riyadh']:hover) .ap-map__node[data-city='riyadh'] .ap-map__dot,
.slide:has(.mp-chips li[data-city='dubai']:hover) .ap-map__node[data-city='dubai'] .ap-map__dot { r: 11px; filter: drop-shadow(0 0 8px #ef5422); }

/* ------------------------------------------------------------ 05 — Lincoln: egy járműállomány, három felület */
.lc { display: grid; grid-template-columns: minmax(0, 1fr) 620px; gap: 48px; align-items: center; height: 560px; }
.lc__copy { display: flex; flex-direction: column; }
.lc__copy .s-chips { margin-top: 22px; }
.lc-show { position: relative; width: 620px; height: 470px; overflow: hidden; background: radial-gradient(70% 60% at 50% 60%, rgba(239, 84, 34, 0.16), transparent 70%), #0c0e10; border: 1px solid rgba(255, 255, 255, 0.26); }
.lc-dev { position: absolute; left: 50%; top: 50%; margin: 0; opacity: 0; transform: translate(-50%, -50%); }
.lc-dev:nth-of-type(1) { opacity: 1; }
.slide.is-active .lc-dev { animation: lc-cycle 9s linear infinite; animation-delay: calc(var(--k, 0) * 3s - 0.2s); }
@keyframes lc-cycle { 0% { opacity: 0; transform: translate(-50%, -46%) scale(0.93); } 4%, 30% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 34%, 100% { opacity: 0; transform: translate(-50%, -54%) scale(1.04); } }
.lc-dev__s { position: relative; overflow: hidden; background: #000; }
.lc-dev__s img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.lc-dev--touch .lc-dev__s { width: 500px; aspect-ratio: 16 / 9; border: 10px solid #1b1e21; outline: 1px solid rgba(255, 255, 255, 0.26); box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.9); }
.lc-dev__stand { display: block; width: 150px; height: 28px; margin: 0 auto; background: linear-gradient(180deg, #1b1e21, #0f1113); clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); }
.lc-dev--pad .lc-dev__s { width: 430px; aspect-ratio: 4 / 3; border: 14px solid #1b1e21; border-radius: 28px; outline: 1px solid rgba(255, 255, 255, 0.26); box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.9); }
.lc-dev--pad .lc-dev__s img { object-position: 62% 50%; }
.lc-dev--vr .lc-dev__s { width: 520px; aspect-ratio: 16 / 9; border-radius: 90px / 70px; border: 3px solid rgba(255, 255, 255, 0.4); box-shadow: 0 0 60px rgba(239, 84, 34, 0.25); }
.lc-pills { position: absolute; left: 16px; top: 14px; z-index: 5; display: flex; gap: 6px; }
.lc-pills li { font: 400 10px/1 var(--font-mono, monospace); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); padding: 6px 9px; background: rgba(8, 9, 10, 0.78); border: 1px solid rgba(255, 255, 255, 0.22); }
.lc-pills li:first-child { color: #fff; border-color: #ef5422; background: rgba(239, 84, 34, 0.3); }
.slide.is-active .lc-pills li { animation: gp-pill 9s linear infinite; animation-delay: calc(var(--k, 0) * 3s - 0.2s); }
@keyframes gp-pill { 0%, 1% { color: rgba(255, 255, 255, 0.55); border-color: rgba(255, 255, 255, 0.22); background: rgba(8, 9, 10, 0.78); } 3%, 30% { color: #fff; border-color: #ef5422; background: rgba(239, 84, 34, 0.35); } 34%, 100% { color: rgba(255, 255, 255, 0.55); border-color: rgba(255, 255, 255, 0.22); background: rgba(8, 9, 10, 0.78); } }

/* ------------------------------------------------------------ 06 — Honda: a képernyőfelvétel és az arab (jobbról balra) felület */
.hn { display: grid; grid-template-columns: 748px minmax(0, 1fr); gap: 40px; height: 576px; align-items: start; }
.hn__main { display: flex; flex-direction: column; }
.hn-screen { margin-top: 18px; }
.hn-screen .ap-cap { padding-bottom: 30px; }
.hn__side { display: flex; flex-direction: column; padding-top: 6px; }
.hn__side .ap-cap__steps { margin-top: 0; }
.hn__side .ap-cap__step button { padding: 11px 0 11px 12px; }
.hn__side .ap-cap__step em { font-size: 12.5px; margin-top: 3px; }
.hn__side .ap-cap__step b { font-size: 15px; }
.rtl { position: relative; height: 176px; margin-top: 16px; perspective: 900px; }
.rtl__c { position: absolute; left: 0; right: 0; top: 0; height: 142px; display: flex; flex-direction: column; gap: 6px; padding: 11px 18px; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.26); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.rtl__c b { align-self: flex-start; font: 400 10px/1 var(--font-mono, monospace); letter-spacing: 0.14em; color: #fff; background: #ef5422; padding: 4px 7px; font-weight: 400; }
.rtl__c--ar b { align-self: flex-start; }
.rtl__c span { display: flex; align-items: center; gap: 10px; font-size: 15px; color: rgba(255, 255, 255, 0.88); }
.rtl__c span i { width: 12px; height: 12px; border: 1.5px solid #ef5422; flex: none; }
.rtl__c span:first-of-type i { background: #ef5422; }
.rtl__c--ar { transform: rotateY(180deg); }
.rtl__c--ar span { font-size: 17px; }
.slide.is-active .rtl__c { animation: rtl-a 6s ease-in-out infinite 1s; }
.slide.is-active .rtl__c--ar { animation-name: rtl-b; }
@keyframes rtl-a { 0%, 40% { transform: rotateY(0); } 50%, 90% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
@keyframes rtl-b { 0%, 40% { transform: rotateY(180deg); } 50%, 90% { transform: rotateY(360deg); } 100% { transform: rotateY(540deg); } }
.rtl__cap { position: absolute; left: 0; right: 0; bottom: 0; font: 400 10px/1.4 var(--font-mono, monospace); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.hn__side .s-card__act { margin-top: 16px; }

/* ------------------------------------------------------------ 07 — kereskedői rendszerek családja */
.fm { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.fm-t { display: flex; flex-direction: column; text-align: left; padding: 0; background: #101316; border: 1px solid rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; overflow: hidden; transition: border-color 0.25s, transform 0.4s var(--ease); }
.fm-t:hover { border-color: #ef5422; transform: translateY(-4px); }
.fm-t__m { position: relative; display: block; height: 216px; overflow: hidden; background: #000; }
.fm-t__m img, .fm-t__m .apv { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 0.9s var(--ease); }
.fm-t:hover .fm-t__m img { transform: scale(1.06); }
.fm-t__m .ap-status { position: absolute; right: 12px; top: 12px; z-index: 4; }
.fm-t__c { position: absolute; left: 12px; bottom: 12px; z-index: 4; padding: 5px 9px; font: 400 10px/1 var(--font-mono, monospace); letter-spacing: 0.12em; text-transform: uppercase; background: rgba(8, 9, 10, 0.74); border: 1px solid rgba(255, 255, 255, 0.26); }
.fm-t__m--ic { display: grid; place-items: center; background: radial-gradient(60% 60% at 50% 50%, rgba(239, 84, 34, 0.16), transparent 70%), #0c0e10; color: #ef5422; }
.fm-t__m--ic .api { width: 84px; height: 84px; position: static; }
.fm-t__b { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 20px; }
.fm-t__b b { font: 400 19px/1.18 var(--font-display, 'Jost', sans-serif); letter-spacing: 0.05em; text-transform: uppercase; font-weight: 400; }
.fm-t__b em { font-style: normal; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.68); }

/* ------------------------------------------------------------ 08 — Audi: hat bevezetés és a Le Mans-köridő */
.au { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 30px; margin-top: 22px; align-items: start; }
.au__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.au-t { display: flex; flex-direction: column; text-align: left; padding: 0; background: #101316; border: 1px solid rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; overflow: hidden; transition: border-color 0.25s, transform 0.4s var(--ease), opacity 0.3s; }
.au-t:hover { border-color: #ef5422; transform: translateY(-3px); }
.au__grid:has(.au-t:hover) .au-t:not(:hover) { opacity: 0.55; }
.au-t__m { position: relative; display: block; height: 138px; overflow: hidden; background: #000; }
.au-t__m img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 0.9s var(--ease); }
.au-t:hover .au-t__m img { transform: scale(1.07); }
.au-t__y { position: absolute; left: 10px; bottom: 10px; z-index: 4; padding: 4px 8px; font: 400 10px/1 var(--font-mono, monospace); letter-spacing: 0.12em; background: rgba(8, 9, 10, 0.74); border: 1px solid rgba(255, 255, 255, 0.26); }
.au-t__b { display: flex; flex-direction: column; gap: 5px; padding: 11px 13px 13px; }
.au-t__b i { font: 400 9.5px/1.3 var(--font-mono, monospace); letter-spacing: 0.12em; text-transform: uppercase; font-style: normal; color: #f2703f; }
.au-t__b b { font: 400 15px/1.2 var(--font-display, 'Jost', sans-serif); letter-spacing: 0.05em; text-transform: uppercase; font-weight: 400; }
.au-race { position: relative; margin: 0; padding: 14px 14px 12px; background: #0c0e10; border: 1px solid rgba(255, 255, 255, 0.26); }
.au-race__svg { display: block; width: 100%; height: auto; }
.au-track { fill: none; stroke: rgba(255, 255, 255, 0.09); stroke-width: 36; }
.au-track--c { stroke: rgba(255, 255, 255, 0.5); stroke-width: 1.4; stroke-dasharray: 6 8; }
.au-fin { stroke: #fff; stroke-width: 3; stroke-dasharray: 4 4; fill: none; }
.au-lbl { font: 400 38px 'Jost', sans-serif; letter-spacing: 0.1em; fill: rgba(255, 255, 255, 0.85); }
.au-lbl--m { font: 400 9.5px 'Space Mono', monospace; letter-spacing: 0.1em; fill: rgba(255, 255, 255, 0.5); text-transform: uppercase; }
.au-car { offset-path: path('M120 60H300A75 75 0 0 1 300 210H120A75 75 0 0 1 120 60Z'); offset-rotate: auto; offset-distance: 0%; }
.au-car--you rect:first-child { fill: #ef5422; }
.au-car--you rect:last-child { fill: rgba(0, 0, 0, 0.55); }
.au-car--ghost rect { fill: rgba(255, 255, 255, 0.5); }
.slide.is-active .au-car--you { animation: au-lap 5.4s linear infinite; }
.slide.is-active .au-car--ghost { animation: au-lap 6.1s linear infinite; }
@keyframes au-lap { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.au-board { display: grid; grid-template-columns: 1fr; gap: 5px; margin-top: 10px; }
.au-board > span { font: 400 10px/1 var(--font-mono, monospace); letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.6); }
.au-board i { display: block; height: 7px; width: var(--w); background: rgba(255, 255, 255, 0.3); transform-origin: left; }
.au-board i:first-of-type { background: #ef5422; }
.slide.is-active .au-board i { animation: lv-fill 1.2s var(--ease) backwards; animation-delay: calc(0.8s + var(--i) * 0.15s); }
.au-board p { display: flex; align-items: center; gap: 8px; margin-top: 4px; font: 400 10px/1 var(--font-mono, monospace); letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.7); }
.au-key { display: inline-block; width: 12px; height: 6px; }
.au-key--you { background: #ef5422; }
.au-key--ghost { background: rgba(255, 255, 255, 0.5); margin-left: 10px; }
.au-race figcaption { margin-top: 10px; font-size: 12.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.66); }
@keyframes lv-fill { from { transform: scaleX(0); } }

/* ------------------------------------------------------------ 09 — Mercedes: pásztázó panoráma és a gyárlátogatás */
.mb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; margin-top: 22px; }
.mb__a, .mb__b { cursor: pointer; display: flex; flex-direction: column; gap: 12px; }
.mb-pad { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #000; border: 12px solid #1b1e21; border-radius: 22px; outline: 1px solid rgba(255, 255, 255, 0.26); box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.9); }
.mb-pan { position: relative; width: 168%; height: 100%; }
.mb-pan img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.slide.is-active .mb-pan { animation: mb-pan 10s ease-in-out infinite alternate 0.8s; }
@keyframes mb-pan { from { transform: translateX(0); } to { transform: translateX(-40.5%); } }
.mb-pin { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.mb-pin i { position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; display: grid; place-items: center; font: 400 11px/1 var(--font-mono, monospace); font-style: normal; color: #fff; background: rgba(239, 84, 34, 0.95); border-radius: 50%; box-shadow: 0 0 0 5px rgba(239, 84, 34, 0.3); }
.slide.is-active .mb-pin i { animation: d-pop 0.5s var(--ease) backwards; animation-delay: calc(1.4s + var(--i) * 0.5s); }
.mb-fac { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0c0e10; border: 1px solid rgba(255, 255, 255, 0.26); }
.mb-fac .apv { position: absolute; inset: 0; width: 100%; height: 100%; }
.mb__cap { font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, 0.7); }
.mb-bar { display: grid; grid-template-columns: 1.05fr 1.2fr 1.6fr 1.15fr; gap: 3px; margin-top: 2px; }
.mb-bar li { position: relative; height: 46px; display: flex; align-items: center; padding: 0 9px; background: rgba(255, 255, 255, 0.09); overflow: hidden; }
.mb-bar li:nth-child(3) { background: rgba(239, 84, 34, 0.28); }
.mb-bar li:last-child { background: #ef5422; }
.mb-bar span { font: 400 9.5px/1.25 var(--font-mono, monospace); letter-spacing: 0.06em; text-transform: uppercase; }
.slide.is-active .mb-bar li { animation: lv-fill 0.8s var(--ease) backwards; animation-delay: calc(1s + var(--i) * 0.55s); transform-origin: left; }

/* ------------------------------------------------------------ 10 — Opel (AR-pálya) és Infiniti (2000+) */
.ev { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 20px; }
.ev-c { display: flex; flex-direction: column; gap: 10px; }
.ev-c__m { position: relative; height: 200px; overflow: hidden; background: #000; border: 1px solid rgba(255, 255, 255, 0.2); cursor: pointer; }
.ev-c__m img { width: 100%; height: 100%; max-width: none; object-fit: cover; filter: saturate(0.92) brightness(0.92); transition: transform 0.9s var(--ease); }
.ev-c__m:hover img { transform: scale(1.05); }
.ev-c__m .ap-status { position: absolute; right: 12px; top: 12px; z-index: 4; }
.ev-play { position: absolute; right: 12px; bottom: 12px; z-index: 4; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #ef5422; color: #fff; }
.ev-c__t { font: 400 22px/1.15 var(--font-display, 'Jost', sans-serif); letter-spacing: 0.05em; text-transform: uppercase; }
.ev-c__p { font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.68); }
.ev-track { position: relative; height: 70px; border: 1px solid rgba(255, 255, 255, 0.26); background: rgba(255, 255, 255, 0.03); }
.ev-track__s { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.ev-track__s li { position: relative; display: flex; align-items: flex-end; padding: 0 0 6px 8px; border-left: 1px dashed rgba(255, 255, 255, 0.22); }
.ev-track__s li:first-child { border-left: 0; }
.ev-track__s span { font: 400 9.5px/1 var(--font-mono, monospace); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.ev-track__car { position: absolute; top: 6px; left: calc(100% - 96px); width: 90px; }
.ev-track__car img { display: block; width: 100%; height: auto; max-width: none; }
.slide.is-active .ev-track__car { animation: ev-run 5s cubic-bezier(0.45, 0.05, 0.4, 1) infinite alternate 1s; }
@keyframes ev-run { from { left: 4px; } to { left: calc(100% - 96px); } }
.ev-num { display: flex; align-items: baseline; gap: 14px; margin-top: 0; }
.ev-num__n { font: 300 72px/1 var(--font-display, 'Jost', sans-serif); letter-spacing: 0.04em; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ev-num em { font: 400 11px/1.4 var(--font-mono, monospace); letter-spacing: 0.12em; text-transform: uppercase; font-style: normal; color: rgba(255, 255, 255, 0.64); max-width: 20ch; }
@property --pk { syntax: '<integer>'; initial-value: 2000; inherits: false; }
@keyframes ev-count { from { --pk: 0; } to { --pk: 2000; } }
.slide.is-active .ev-num__n { --pk: 0; counter-reset: pk var(--pk); position: relative; color: transparent; animation: ev-count 2.4s var(--ease) 0.8s forwards; }
.slide.is-active .ev-num__n::after { content: counter(pk) '+'; position: absolute; left: 0; top: 0; color: #fff; }
.ev-c .s-card__act { margin-top: 2px; }

/* ------------------------------------------------------------ 11 — gyár, oktatás, digitális iker (a letapogató sáv) */
.bd { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 26px; }
.bd-p { display: flex; flex-direction: column; text-align: left; padding: 0; background: #101316; border: 1px solid rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; overflow: hidden; transition: border-color 0.25s, transform 0.4s var(--ease); }
.bd-p:hover { border-color: #ef5422; transform: translateY(-4px); }
.bd-p__m { position: relative; display: block; height: 330px; overflow: hidden; background: #000; }
.bd-p__m img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: saturate(0.95) brightness(0.92); transition: transform 0.9s var(--ease); }
.bd-p:hover .bd-p__m img { transform: scale(1.05); }
.bd-p__tag { position: absolute; left: 12px; top: 12px; z-index: 4; padding: 5px 9px; font: 400 10px/1 var(--font-mono, monospace); letter-spacing: 0.12em; text-transform: uppercase; background: rgba(8, 9, 10, 0.74); border: 1px solid rgba(255, 255, 255, 0.26); }
.bd-p__b { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 14px 18px 18px; }
.bd-p__b b { font: 400 18px/1.2 var(--font-display, 'Jost', sans-serif); letter-spacing: 0.05em; text-transform: uppercase; font-weight: 400; }
.bd-scan { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; z-index: 3; pointer-events: none; opacity: 0; background: linear-gradient(transparent, #ef5422, transparent); box-shadow: 0 0 22px 5px rgba(239, 84, 34, 0.6); }
.slide.is-active .bd-scan { opacity: 1; animation: bd-sweep 4.6s ease-in-out infinite alternate 1s; }
@keyframes bd-sweep { from { left: 0; } to { left: 100%; } }
.bd-pin { position: absolute; left: var(--x); top: var(--y); z-index: 4; width: 0; height: 0; }
.bd-pin i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: #ef5422; box-shadow: 0 0 0 4px rgba(239, 84, 34, 0.3); }
.bd-pin.bd-pin--l em { left: auto; right: 12px; }
.bd-pin em { position: absolute; left: 12px; top: -11px; white-space: nowrap; padding: 4px 8px; font: 400 9.5px/1 var(--font-mono, monospace); letter-spacing: 0.1em; text-transform: uppercase; font-style: normal; color: #fff; background: rgba(8, 9, 10, 0.86); border: 1px solid #ef5422; }
.slide.is-active .bd-pin { animation: d-pop 0.5s var(--ease) backwards; animation-delay: calc(1.6s + var(--i) * 0.6s); }

/* ------------------------------------------------------------ 12 — felületek (hub, sötét változat) */
.hb { width: 1060px; margin: 8px auto 0; }
.hb .ap-hub { width: 100%; height: auto; }
.hb .ap-hub__tile { fill: #101316; stroke: rgba(255, 255, 255, 0.28); stroke-width: 1.2; transition: stroke 0.25s; }
.hb .ap-hub__tile--acc { stroke: #ef5422; fill: rgba(239, 84, 34, 0.08); }
.hb .ap-hub__lbl { font: 500 19px 'Space Grotesk', sans-serif; fill: #fff; }
.hb .ap-hub__lbl--c, .hb .ap-hub__sub--c { text-anchor: middle; }
.hb .ap-hub__ico { stroke: #ef5422; }
.hb .ap-hub__sub { font: 400 12.5px 'Space Mono', monospace; fill: rgba(255, 255, 255, 0.6); letter-spacing: 0.04em; }
.hb .ap-hub__more { font: 400 11.5px 'Space Mono', monospace; fill: #f2703f; letter-spacing: 0.1em; text-transform: uppercase; }
.hb .ap-hub__tag { font: 400 10.5px 'Space Mono', monospace; fill: rgba(255, 255, 255, 0.6); letter-spacing: 0.1em; text-transform: uppercase; }
.hb .ap-hub__line { stroke: rgba(255, 255, 255, 0.34); animation: none; }
/* a page.css-ben élő @keyframes és a pulzus kitöltése a prezentációba is kell (a deck nem tölti be a page.css-t) */
@keyframes ap-orbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.hb .ap-hub__pulse { fill: #ef5422; offset-rotate: 0deg; animation: none; opacity: 0; }
.slide.is-active .hb .ap-hub__line { animation: d-flow 1.4s linear infinite; }
.slide.is-active .hb .ap-hub__pulse { opacity: 1; animation: ap-orbit 3.6s linear infinite; animation-delay: calc(var(--i, 0) * -0.6s); }
.hb .ap-hub__node:hover .ap-hub__tile, .hb .ap-hub__node:focus-visible .ap-hub__tile { stroke: #ef5422; }
/* a három ismertetőjel a címsor mellett (a jobb felső sarok üres), nem a lábléc sávjában */
.hb__pts { position: absolute; right: 64px; top: 76px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.hb__pts li { font: 400 11px/1 var(--font-mono, monospace); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); padding: 8px 12px; border: 1px solid rgba(255, 255, 255, 0.2); }
.hb__pts b { font-weight: 400; }
.slide.is-active .hb .ap-hub__node { animation: d-pop 0.7s var(--ease) backwards; animation-delay: calc(0.4s + var(--i, 0) * 0.12s); }

/* ------------------------------------------------------------ 13 — AI-demó */
.ax { position: absolute; left: 64px; right: 64px; top: 44px; bottom: 52px; display: grid; grid-template-columns: 700px minmax(0, 1fr); gap: 44px; align-items: start; z-index: 2; }
.ax__demo { padding-top: 6px; }
.ax .ap-ai__scene { aspect-ratio: 16 / 6.9; }
.ax .ap-ai__car { left: 14%; right: 14%; bottom: 14%; }
.ax .ap-ai__log { height: 92px; }
.ax .ap-ai__chat { gap: 9px; padding: 12px 14px; }
.ax .ap-ai__input { padding: 9px 12px; }
.ax .ap-msg { font-size: 13px; padding: 7px 11px; }
.ax .ap-ai__lead { bottom: 10%; }
.ax .ap-ai__chips { flex-direction: row; flex-wrap: wrap; right: 16px; gap: 6px; }
.ax .ap-ai__cmp { padding: 64px 6% 8%; }
.ax__copy { display: flex; flex-direction: column; padding-top: 4px; }
.ax-flow { margin-top: 22px; display: grid; gap: 0; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.ax-flow li { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); font: 400 18px/1.2 var(--font-display, 'Jost', sans-serif); letter-spacing: 0.06em; text-transform: uppercase; }
.ax-flow li span { font: 400 11px/1 var(--font-mono, monospace); letter-spacing: 0.14em; color: #f2703f; width: 26px; }
.ax-flow li:nth-child(3) { color: #fff; background: linear-gradient(90deg, rgba(239, 84, 34, 0.14), transparent); border-left: 2px solid #ef5422; padding-left: 12px; }
.slide.is-active .ax-flow li { animation: ax-glow 3.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.5s + 1s); }
@keyframes ax-glow { 0%, 60%, 100% { color: #fff; } 12%, 30% { color: #f2703f; } }
.ax__s { margin-top: 20px; font-size: 16.5px; line-height: 1.5; color: #fff; max-width: 40ch; }
.ax .s-note { margin-top: 18px; }

/* ------------------------------------------------------------ 14 — az AI-réteg képességei */
.ac { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.ac-t { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; min-height: 176px; background: #101316; border: 1px solid rgba(255, 255, 255, 0.14); transition: border-color 0.25s, transform 0.4s var(--ease), background 0.25s; }
.ac-t:hover { border-color: #ef5422; transform: translateY(-4px); background: #14181b; }
.ac-t__ic { color: #ef5422; margin-bottom: 2px; }
.ac-t__ic .api { width: 42px; height: 42px; }
.ac-t b { font: 400 17px/1.2 var(--font-display, 'Jost', sans-serif); letter-spacing: 0.05em; text-transform: uppercase; font-weight: 400; }
.ac-t em { font-style: normal; font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.66); }
.ac-t--n { background: transparent; border-style: dashed; justify-content: center; }
.ac-t--n em { color: rgba(255, 255, 255, 0.78); }
.slide.is-active .ac-t__ic { animation: d-fade 0.4s ease backwards; animation-delay: calc(var(--d, 0) * 110ms + 300ms); }
.ac-proofs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.ac-proofs li { display: flex; flex-direction: column; gap: 5px; }
.ac-proofs strong { font: 400 14px/1.2 var(--font-display, 'Jost', sans-serif); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 400; color: #f2703f; }
.ac-proofs span { font-size: 11.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.6); }

/* ------------------------------------------------------------ 15 — mit építhetünk */
.of { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.of-t { display: flex; flex-direction: column; text-align: left; padding: 0; background: #101316; border: 1px solid rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; overflow: hidden; transition: border-color 0.25s, transform 0.4s var(--ease); }
.of-t:hover { border-color: #ef5422; transform: translateY(-3px); }
.of-t__m { position: relative; display: block; height: 158px; overflow: hidden; background: #000; }
.of-t__m img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 0.9s var(--ease); }
.of-t:hover .of-t__m img { transform: scale(1.06); }
.of-t__tag { position: absolute; left: 10px; top: 10px; z-index: 4; padding: 4px 8px; font: 400 9.5px/1 var(--font-mono, monospace); letter-spacing: 0.12em; text-transform: uppercase; background: rgba(8, 9, 10, 0.74); border: 1px solid rgba(255, 255, 255, 0.26); }
.of-t__b { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 12px 16px 14px; }
.of-t__b b { font: 400 16px/1.2 var(--font-display, 'Jost', sans-serif); letter-spacing: 0.05em; text-transform: uppercase; font-weight: 400; }
.deck-body .of-t .ap-status { font-size: 9.5px; padding: 4px 8px 4px 7px; }
.deck-body .ac-t__ic .ap-status { font-size: 10px; }

/* ------------------------------------------------------------ 16 — bevezetés: az autó végigmegy a lépéseken */
.ps { position: relative; margin-top: 18px; height: 330px; --n: 5; }
.ps-lane { position: absolute; left: 0; right: 0; top: 0; height: 78px; overflow: hidden; background: linear-gradient(#171a1d, #0f1113); border-top: 1px solid rgba(255, 255, 255, 0.26); border-bottom: 1px solid rgba(255, 255, 255, 0.26); }
.ps-dash { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.42) 0 28px, transparent 28px 60px); }
.slide.is-active .ps-dash { animation: d-road 1.2s linear infinite; }
.ps-car { position: absolute; bottom: 8px; left: calc(100% - 168px); width: 168px; z-index: 2; filter: drop-shadow(0 7px 6px rgba(0, 0, 0, 0.6)); }
.ps-car img { display: block; width: 100%; height: auto; max-width: none; }
.slide.is-active .ps-car { animation: yr-drive 7s linear 0.8s backwards; }
.ps-steps { position: absolute; left: 0; right: 0; top: 100px; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 22px; }
.ps-s { position: relative; padding-top: 30px; }
.ps-s::before { content: ''; position: absolute; left: 0; top: -22px; width: 1px; height: 46px; background: #ef5422; }
.ps-s::after { content: ''; position: absolute; left: -6px; top: 20px; width: 13px; height: 13px; border-radius: 50%; background: #ef5422; border: 2px solid #ef5422; box-shadow: 0 0 0 5px rgba(239, 84, 34, 0.22); }
.slide.is-active .ps-s::after { animation: yr-lit 0.5s var(--ease) backwards; animation-delay: calc(0.15s + var(--i) * 1.45s); }
.ps-s__n { font: 400 11px/1 var(--font-mono, monospace); letter-spacing: 0.14em; color: #f2703f; }
.ps-s h3 { font: 400 18px/1.2 var(--font-display, 'Jost', sans-serif); letter-spacing: 0.05em; text-transform: uppercase; margin-top: 10px; font-weight: 400; }
.ps-s p { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.66); margin-top: 8px; }
.ps__meas { position: absolute; left: 64px; right: 64px; bottom: 54px; z-index: 2; display: flex; flex-direction: column; gap: 10px; }

/* ------------------------------------------------------------ 17 — kapcsolat */
.slide--cta .s-bg { background: radial-gradient(800px 520px at 18% 30%, rgba(239, 84, 34, 0.2), transparent 70%), linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 64px 64px, linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 64px 64px; }
.ct { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 56px; align-items: center; height: 560px; }
.ct__copy { display: flex; flex-direction: column; }
.ct-steps { margin-top: 26px; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.ct-steps li { display: grid; grid-template-columns: 46px 1fr; gap: 6px; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.ct-steps li > span { font: 300 24px/1 var(--font-display, 'Jost', sans-serif); color: #ef5422; }
.ct-steps b { font: 400 16px/1.2 var(--font-display, 'Jost', sans-serif); letter-spacing: 0.05em; text-transform: uppercase; font-weight: 400; }
.ct-steps p { font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.64); margin-top: 4px; }
.ct-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 34px 32px 30px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.26); }
.ct-card::before { content: ''; position: absolute; left: -1px; top: -1px; width: 56px; height: 3px; background: #ef5422; }
.ct-online { display: inline-flex; align-items: center; gap: 9px; font: 400 10.5px/1 var(--font-mono, monospace); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.ct-online i { width: 8px; height: 8px; border-radius: 50%; background: #3dd68c; }
.slide.is-active .ct-online i { animation: ap-blink 1.8s ease-in-out infinite; }
.ct-card__n { font: 300 30px/1.1 var(--font-display, 'Jost', sans-serif); letter-spacing: 0.05em; text-transform: uppercase; margin-top: 6px; }
.ct-card__r { font: 400 11.5px/1.4 var(--font-mono, monospace); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); margin-bottom: 8px; }
.s-cta { align-self: stretch; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 17px 24px; font: 500 16px/1 var(--font-body, sans-serif); color: #fff; background: #ef5422; border: 1px solid #ef5422; text-decoration: none; border-radius: 2px; transition: background 0.2s; }
.s-cta:hover { background: #d3431a; color: #fff; text-decoration: none; }
.slide.is-active .s-cta { animation: ct-ring 2.8s ease-out 2.4s infinite; }
@keyframes ct-ring { 0% { box-shadow: 0 0 0 0 rgba(239, 84, 34, 0.55); } 70%, 100% { box-shadow: 0 0 0 18px rgba(239, 84, 34, 0); } }
.ct-card__l a, .ct-card__tel, .ct-card__tel a { font-size: 15px; color: #fff; text-decoration: none; }
.ct-card__l { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.s-copy { font: 400 10px/1 var(--font-mono, monospace); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); background: none; border: 1px solid rgba(255, 255, 255, 0.26); border-radius: 2px; padding: 6px 9px; cursor: pointer; }
.s-copy:hover { color: #fff; border-color: #fff; }
.ct-card__l a { border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding-bottom: 2px; }
.ct-card__l a:hover { color: #f2703f; border-color: #f2703f; text-decoration: none; }
.ct-card__tel { display: inline-flex; align-items: center; gap: 9px; padding: 0 0 2px; background: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.3); cursor: pointer; }
.ct-card__tel:hover { color: #f2703f; border-color: #f2703f; }
.ct-card__u { font: 400 11px/1 var(--font-mono, monospace); letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.64); margin-top: 8px; }

/* ------------------------------------------------------------ áttekintő nézet */
.overview { position: fixed; inset: 0; z-index: 60; display: none; background: #050607; overflow-y: auto; padding: 78px 32px 40px; }
.overview.is-open { display: block; }
.overview__head { position: fixed; top: 0; left: 0; right: 0; height: 56px; background: #08090a; border-bottom: 1px solid rgba(255, 255, 255, 0.12); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; z-index: 2; }
.overview__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; max-width: 1500px; margin: 0 auto; }
.ov-cell { display: block; width: 100%; text-align: left; padding: 0; background: transparent; border: 0; cursor: pointer; font: inherit; color: inherit; }
.ov-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.18); background: #0a0b0c; transition: border-color 0.2s, transform 0.3s var(--ease); }
.ov-cell:hover .ov-frame, .ov-cell:focus-visible .ov-frame { border-color: #ef5422; transform: translateY(-2px); }
.ov-cell.is-current .ov-frame { border: 2px solid #ef5422; }
.ov-frame .slide { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; opacity: 1 !important; visibility: visible !important; transform-origin: top left; pointer-events: none; transition: none; }
.ov-cap { font: 400 10px/1.4 var(--font-mono, monospace); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.68); margin-top: 9px; }
.ov-cell.is-current .ov-cap { color: #f2703f; }

/* ------------------------------------------------------------ indítókapu */
.gate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #050607; transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s; }
.gate.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.gate__bg { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(900px 560px at 70% 40%, rgba(239, 84, 34, 0.18), transparent 70%), linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 64px 64px, linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 64px 64px; }
.gate__bg img { position: absolute; right: -80px; bottom: -160px; height: 760px; opacity: 0.05; }
.gate__box { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 0 24px; max-width: 760px; animation: d-rise 0.9s var(--ease) both; }
.gate__brand { display: inline-flex; align-items: baseline; gap: 1px; margin-bottom: 18px; }
.gate__brand b { font: 400 26px/1 var(--font-display, 'Jost', sans-serif); letter-spacing: 0.02em; }
.gate__brand span { font: 300 26px/1 var(--font-display, 'Jost', sans-serif); letter-spacing: 0.02em; color: #ef5422; }
.gate__t { font: 300 clamp(40px, 7vw, 84px)/1.04 var(--font-display, 'Jost', sans-serif); letter-spacing: 0.05em; text-transform: uppercase; }
.gate__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.gate__hint { margin-top: 18px; font: 400 10.5px/1.5 var(--font-mono, monospace); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }

/* ------------------------------------------------------------ videó */
.deck-vid { padding: 0; border: 0; margin: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; color: #fff; }
.deck-vid[open] { display: grid; place-items: center; }
.deck-vid::backdrop { background: rgba(0, 0, 0, 0.94); }
.deck-vid__box { width: min(1180px, calc(100vw - 64px)); }
.deck-vid__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.deck-vid__bar > span { font: 300 24px/1.1 var(--font-display, 'Jost', sans-serif); letter-spacing: 0.06em; text-transform: uppercase; }
.deck-vid__bar > div { display: flex; gap: 8px; }
.deck-vid__frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.deck-vid__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ------------------------------------------------------------ mozgáscsökkentés, nyomtatás */
@media (prefers-reduced-motion: reduce) {
  .deck-body *, .deck-body *::before, .deck-body *::after { animation: none !important; transition-duration: 0.001ms !important; }
  .slide.is-prev, .slide.is-next { transform: none; }
}
@media print {
  @page { size: 1280px 720px; margin: 0; }
  .deck-topbar, .deck-nav, .deck-progress, .deck-edge, .overview, .gate, .deck-vid, .ap-dialogs, .s-card__act, .s-copy { display: none !important; } /* nyomtatásban a kattintható elemeknek nincs értelme */
  .deck-body { height: auto; overflow: visible; background: #0a0b0c; }
  .deck { position: static; }
  .stage { position: static; transform: none !important; width: 1280px; height: auto; box-shadow: none; }
  .slide { position: relative; inset: auto; width: 1280px; height: 720px; opacity: 1 !important; visibility: visible !important; transform: none !important; page-break-after: always; break-after: page; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .deck-body *, .deck-body *::before, .deck-body *::after { animation: none !important; backdrop-filter: none !important; }
}